@fluentui/react-radio 9.0.10 → 9.0.12
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +111 -1
- package/CHANGELOG.md +32 -2
- package/dist/index.d.ts +10 -1
- package/lib/Radio.js.map +1 -1
- package/lib/RadioGroup.js.map +1 -1
- package/lib/RadioGroupField.js +2 -0
- package/lib/RadioGroupField.js.map +1 -0
- package/lib/components/Radio/Radio.js.map +1 -1
- package/lib/components/Radio/Radio.types.js.map +1 -1
- package/lib/components/Radio/index.js.map +1 -1
- package/lib/components/Radio/renderRadio.js.map +1 -1
- package/lib/components/Radio/useRadio.js.map +1 -1
- package/lib/components/Radio/useRadioStyles.js.map +1 -1
- package/lib/components/RadioGroup/RadioGroup.js.map +1 -1
- package/lib/components/RadioGroup/RadioGroup.types.js.map +1 -1
- package/lib/components/RadioGroup/index.js.map +1 -1
- package/lib/components/RadioGroup/renderRadioGroup.js.map +1 -1
- package/lib/components/RadioGroup/useRadioGroup.js.map +1 -1
- package/lib/components/RadioGroup/useRadioGroupStyles.js.map +1 -1
- package/lib/components/RadioGroupField/RadioGroupField.js +15 -0
- package/lib/components/RadioGroupField/RadioGroupField.js.map +1 -0
- package/lib/components/RadioGroupField/index.js +2 -0
- package/lib/components/RadioGroupField/index.js.map +1 -0
- package/lib/contexts/RadioGroupContext.js.map +1 -1
- package/lib/contexts/index.js.map +1 -1
- package/lib/contexts/useRadioGroupContextValues.js.map +1 -1
- package/lib/index.js +1 -0
- package/lib/index.js.map +1 -1
- package/lib-amd/Radio.js +6 -0
- package/lib-amd/Radio.js.map +1 -0
- package/lib-amd/RadioGroup.js +6 -0
- package/lib-amd/RadioGroup.js.map +1 -0
- package/lib-amd/RadioGroupField.js +6 -0
- package/lib-amd/RadioGroupField.js.map +1 -0
- package/lib-amd/components/Radio/Radio.js +15 -0
- package/lib-amd/components/Radio/Radio.js.map +1 -0
- package/lib-amd/components/Radio/Radio.types.js +5 -0
- package/lib-amd/components/Radio/Radio.types.js.map +1 -0
- package/lib-amd/components/Radio/index.js +10 -0
- package/lib-amd/components/Radio/index.js.map +1 -0
- package/lib-amd/components/Radio/renderRadio.js +17 -0
- package/lib-amd/components/Radio/renderRadio.js.map +1 -0
- package/lib-amd/components/Radio/useRadio.js +65 -0
- package/lib-amd/components/Radio/useRadio.js.map +1 -0
- package/lib-amd/components/Radio/useRadioStyles.js +120 -0
- package/lib-amd/components/Radio/useRadioStyles.js.map +1 -0
- package/lib-amd/components/RadioGroup/RadioGroup.js +16 -0
- package/lib-amd/components/RadioGroup/RadioGroup.js.map +1 -0
- package/lib-amd/components/RadioGroup/RadioGroup.types.js +5 -0
- package/lib-amd/components/RadioGroup/RadioGroup.types.js.map +1 -0
- package/lib-amd/components/RadioGroup/index.js +10 -0
- package/lib-amd/components/RadioGroup/index.js.map +1 -0
- package/lib-amd/components/RadioGroup/renderRadioGroup.js +15 -0
- package/lib-amd/components/RadioGroup/renderRadioGroup.js.map +1 -0
- package/lib-amd/components/RadioGroup/useRadioGroup.js +36 -0
- package/lib-amd/components/RadioGroup/useRadioGroup.js.map +1 -0
- package/lib-amd/components/RadioGroup/useRadioGroupStyles.js +26 -0
- package/lib-amd/components/RadioGroup/useRadioGroupStyles.js.map +1 -0
- package/lib-amd/components/RadioGroupField/RadioGroupField.js +17 -0
- package/lib-amd/components/RadioGroupField/RadioGroupField.js.map +1 -0
- package/lib-amd/components/RadioGroupField/index.js +6 -0
- package/lib-amd/components/RadioGroupField/index.js.map +1 -0
- package/lib-amd/contexts/RadioGroupContext.js +19 -0
- package/lib-amd/contexts/RadioGroupContext.js.map +1 -0
- package/lib-amd/contexts/index.js +7 -0
- package/lib-amd/contexts/index.js.map +1 -0
- package/lib-amd/contexts/useRadioGroupContextValues.js +19 -0
- package/lib-amd/contexts/useRadioGroupContextValues.js.map +1 -0
- package/lib-amd/index.js +21 -0
- package/lib-amd/index.js.map +1 -0
- package/lib-commonjs/Radio.js.map +1 -1
- package/lib-commonjs/RadioGroup.js.map +1 -1
- package/lib-commonjs/RadioGroupField.js +10 -0
- package/lib-commonjs/RadioGroupField.js.map +1 -0
- package/lib-commonjs/components/Radio/Radio.js.map +1 -1
- package/lib-commonjs/components/Radio/index.js.map +1 -1
- package/lib-commonjs/components/Radio/renderRadio.js.map +1 -1
- package/lib-commonjs/components/Radio/useRadio.js.map +1 -1
- package/lib-commonjs/components/Radio/useRadioStyles.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/RadioGroup.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/index.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/renderRadioGroup.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/useRadioGroup.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.js.map +1 -1
- package/lib-commonjs/components/RadioGroupField/RadioGroupField.js +25 -0
- package/lib-commonjs/components/RadioGroupField/RadioGroupField.js.map +1 -0
- package/lib-commonjs/components/RadioGroupField/index.js +10 -0
- package/lib-commonjs/components/RadioGroupField/index.js.map +1 -0
- package/lib-commonjs/contexts/RadioGroupContext.js.map +1 -1
- package/lib-commonjs/contexts/index.js.map +1 -1
- package/lib-commonjs/contexts/useRadioGroupContextValues.js.map +1 -1
- package/lib-commonjs/index.js +16 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +14 -13
@@ -0,0 +1,65 @@
|
|
1
|
+
define(["require", "exports", "tslib", "react", "@fluentui/react-icons", "@fluentui/react-label", "@fluentui/react-utilities", "../../contexts/RadioGroupContext", "@fluentui/react-tabster"], function (require, exports, tslib_1, React, react_icons_1, react_label_1, react_utilities_1, RadioGroupContext_1, react_tabster_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.useRadio_unstable = void 0;
|
5
|
+
/**
|
6
|
+
* Create the state required to render Radio.
|
7
|
+
*
|
8
|
+
* The returned state can be modified with hooks such as useRadioStyles_unstable,
|
9
|
+
* before being passed to renderRadio_unstable.
|
10
|
+
*
|
11
|
+
* @param props - props from this instance of Radio
|
12
|
+
* @param ref - reference to `<input>` element of Radio
|
13
|
+
*/
|
14
|
+
var useRadio_unstable = function (props, ref) {
|
15
|
+
var nameGroup = RadioGroupContext_1.useRadioGroupContext_unstable(function (ctx) { return ctx.name; });
|
16
|
+
var value = RadioGroupContext_1.useRadioGroupContext_unstable(function (ctx) { return ctx.value; });
|
17
|
+
var defaultValue = RadioGroupContext_1.useRadioGroupContext_unstable(function (ctx) { return ctx.defaultValue; });
|
18
|
+
var disabledGroup = RadioGroupContext_1.useRadioGroupContext_unstable(function (ctx) { return ctx.disabled; });
|
19
|
+
var layout = RadioGroupContext_1.useRadioGroupContext_unstable(function (ctx) { return ctx.layout; });
|
20
|
+
var requiredGroup = RadioGroupContext_1.useRadioGroupContext_unstable(function (ctx) { return ctx.required; });
|
21
|
+
var _a = props.name, name = _a === void 0 ? nameGroup : _a, _b = props.checked, checked = _b === void 0 ? value !== undefined ? value === props.value : undefined : _b, _c = props.defaultChecked, defaultChecked = _c === void 0 ? defaultValue !== undefined ? defaultValue === props.value : undefined : _c, _d = props.labelPosition, labelPosition = _d === void 0 ? layout === 'horizontal-stacked' ? 'below' : 'after' : _d, _e = props.disabled, disabled = _e === void 0 ? disabledGroup : _e, _f = props.required, required = _f === void 0 ? requiredGroup : _f, onChange = props.onChange;
|
22
|
+
var nativeProps = react_utilities_1.getPartitionedNativeProps({
|
23
|
+
props: props,
|
24
|
+
primarySlotTagName: 'input',
|
25
|
+
excludedPropNames: ['checked', 'defaultChecked', 'onChange'],
|
26
|
+
});
|
27
|
+
var root = react_utilities_1.resolveShorthand(props.root, {
|
28
|
+
required: true,
|
29
|
+
defaultProps: tslib_1.__assign({ ref: react_tabster_1.useFocusWithin() }, nativeProps.root),
|
30
|
+
});
|
31
|
+
var input = react_utilities_1.resolveShorthand(props.input, {
|
32
|
+
required: true,
|
33
|
+
defaultProps: tslib_1.__assign({ ref: ref, type: 'radio', id: react_utilities_1.useId('radio-', nativeProps.primary.id), name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, required: required }, nativeProps.primary),
|
34
|
+
});
|
35
|
+
input.onChange = react_utilities_1.mergeCallbacks(input.onChange, function (ev) { return onChange === null || onChange === void 0 ? void 0 : onChange(ev, { value: ev.currentTarget.value }); });
|
36
|
+
var label = react_utilities_1.resolveShorthand(props.label, {
|
37
|
+
defaultProps: {
|
38
|
+
htmlFor: input.id,
|
39
|
+
disabled: disabled,
|
40
|
+
},
|
41
|
+
});
|
42
|
+
var indicator = react_utilities_1.resolveShorthand(props.indicator, {
|
43
|
+
required: true,
|
44
|
+
defaultProps: {
|
45
|
+
'aria-hidden': true,
|
46
|
+
children: React.createElement(react_icons_1.CircleFilled, null),
|
47
|
+
},
|
48
|
+
});
|
49
|
+
return {
|
50
|
+
labelPosition: labelPosition,
|
51
|
+
components: {
|
52
|
+
root: 'span',
|
53
|
+
input: 'input',
|
54
|
+
label: react_label_1.Label,
|
55
|
+
indicator: 'div',
|
56
|
+
},
|
57
|
+
root: root,
|
58
|
+
input: input,
|
59
|
+
label: label,
|
60
|
+
indicator: indicator,
|
61
|
+
};
|
62
|
+
};
|
63
|
+
exports.useRadio_unstable = useRadio_unstable;
|
64
|
+
});
|
65
|
+
//# sourceMappingURL=useRadio.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useRadio.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-radio/src/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, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { useRadioGroupContext_unstable } from '../../contexts/RadioGroupContext';\nimport { useFocusWithin } from '@fluentui/react-tabster';\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 = useRadioGroupContext_unstable(ctx => ctx.name);\n const value = useRadioGroupContext_unstable(ctx => ctx.value);\n const defaultValue = useRadioGroupContext_unstable(ctx => ctx.defaultValue);\n const disabledGroup = useRadioGroupContext_unstable(ctx => ctx.disabled);\n const layout = useRadioGroupContext_unstable(ctx => ctx.layout);\n const requiredGroup = useRadioGroupContext_unstable(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 === 'horizontal-stacked' ? '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: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\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 = mergeCallbacks(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"]}
|
@@ -0,0 +1,120 @@
|
|
1
|
+
define(["require", "exports", "tslib", "@fluentui/react-tabster", "@fluentui/react-theme", "@griffel/react"], function (require, exports, tslib_1, react_tabster_1, react_theme_1, react_1) {
|
2
|
+
"use strict";
|
3
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
4
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
5
|
+
exports.useRadioStyles_unstable = exports.radioClassNames = void 0;
|
6
|
+
exports.radioClassNames = {
|
7
|
+
root: 'fui-Radio',
|
8
|
+
indicator: 'fui-Radio__indicator',
|
9
|
+
input: 'fui-Radio__input',
|
10
|
+
label: 'fui-Radio__label',
|
11
|
+
};
|
12
|
+
// The indicator size is used by the indicator and label styles
|
13
|
+
var indicatorSize = '16px';
|
14
|
+
/**
|
15
|
+
* Styles for the root slot
|
16
|
+
*/
|
17
|
+
var useRootStyles = react_1.makeStyles({
|
18
|
+
base: {
|
19
|
+
display: 'inline-flex',
|
20
|
+
position: 'relative',
|
21
|
+
},
|
22
|
+
vertical: {
|
23
|
+
flexDirection: 'column',
|
24
|
+
alignItems: 'center',
|
25
|
+
},
|
26
|
+
focusIndicator: react_tabster_1.createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),
|
27
|
+
});
|
28
|
+
var useInputStyles = react_1.makeStyles({
|
29
|
+
base: tslib_1.__assign(tslib_1.__assign({ position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', boxSizing: 'border-box' }, react_1.shorthands.margin(0)), (_a = { opacity: 0, ':enabled': (_b = {
|
30
|
+
cursor: 'pointer'
|
31
|
+
},
|
32
|
+
_b["& ~ ." + exports.radioClassNames.label] = {
|
33
|
+
cursor: 'pointer',
|
34
|
+
},
|
35
|
+
_b) }, _a[":not(:checked) ~ ." + exports.radioClassNames.indicator + " > *"] = {
|
36
|
+
opacity: '0',
|
37
|
+
},
|
38
|
+
// Colors for the unchecked state
|
39
|
+
_a[':enabled:not(:checked)'] = (_c = {},
|
40
|
+
_c["& ~ ." + exports.radioClassNames.label] = {
|
41
|
+
color: react_theme_1.tokens.colorNeutralForeground3,
|
42
|
+
},
|
43
|
+
_c["& ~ ." + exports.radioClassNames.indicator] = tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeAccessible)),
|
44
|
+
_c[':hover'] = (_d = {},
|
45
|
+
_d["& ~ ." + exports.radioClassNames.label] = {
|
46
|
+
color: react_theme_1.tokens.colorNeutralForeground2,
|
47
|
+
},
|
48
|
+
_d["& ~ ." + exports.radioClassNames.indicator] = tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeAccessibleHover)),
|
49
|
+
_d),
|
50
|
+
_c[':hover:active'] = (_e = {},
|
51
|
+
_e["& ~ ." + exports.radioClassNames.label] = {
|
52
|
+
color: react_theme_1.tokens.colorNeutralForeground1,
|
53
|
+
},
|
54
|
+
_e["& ~ ." + exports.radioClassNames.indicator] = tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeAccessiblePressed)),
|
55
|
+
_e),
|
56
|
+
_c),
|
57
|
+
// Colors for the checked state
|
58
|
+
_a[':enabled:checked'] = (_f = {},
|
59
|
+
_f["& ~ ." + exports.radioClassNames.label] = {
|
60
|
+
color: react_theme_1.tokens.colorNeutralForeground1,
|
61
|
+
},
|
62
|
+
_f["& ~ ." + exports.radioClassNames.indicator] = tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorCompoundBrandStroke)), { color: react_theme_1.tokens.colorCompoundBrandForeground1 }),
|
63
|
+
_f[':hover'] = (_g = {},
|
64
|
+
_g["& ~ ." + exports.radioClassNames.indicator] = tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorCompoundBrandStrokeHover)), { color: react_theme_1.tokens.colorCompoundBrandForeground1Hover }),
|
65
|
+
_g),
|
66
|
+
_f[':hover:active'] = (_h = {},
|
67
|
+
_h["& ~ ." + exports.radioClassNames.indicator] = tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorCompoundBrandStrokePressed)), { color: react_theme_1.tokens.colorCompoundBrandForeground1Pressed }),
|
68
|
+
_h),
|
69
|
+
_f),
|
70
|
+
// Colors for the disabled state
|
71
|
+
_a[':disabled'] = (_j = {},
|
72
|
+
_j["& ~ ." + exports.radioClassNames.label] = {
|
73
|
+
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
74
|
+
cursor: 'default',
|
75
|
+
},
|
76
|
+
_j["& ~ ." + exports.radioClassNames.indicator] = tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), { color: react_theme_1.tokens.colorNeutralForegroundDisabled }),
|
77
|
+
_j), _a)),
|
78
|
+
after: {
|
79
|
+
width: "calc(" + indicatorSize + " + 2 * " + react_theme_1.tokens.spacingHorizontalS + ")",
|
80
|
+
},
|
81
|
+
below: {
|
82
|
+
height: "calc(" + indicatorSize + " + 2 * " + react_theme_1.tokens.spacingVerticalS + ")",
|
83
|
+
},
|
84
|
+
});
|
85
|
+
var useIndicatorStyles = react_1.makeStyles({
|
86
|
+
base: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ width: indicatorSize, height: indicatorSize, fontSize: '12px', boxSizing: 'border-box', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }, react_1.shorthands.overflow('hidden')), react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid')), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)), react_1.shorthands.margin(react_theme_1.tokens.spacingVerticalS, react_theme_1.tokens.spacingHorizontalS)), { fill: 'currentColor', pointerEvents: 'none' }),
|
87
|
+
});
|
88
|
+
var useLabelStyles = react_1.makeStyles({
|
89
|
+
base: tslib_1.__assign({ alignSelf: 'center' }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalS, react_theme_1.tokens.spacingHorizontalS)),
|
90
|
+
after: {
|
91
|
+
paddingLeft: react_theme_1.tokens.spacingHorizontalXS,
|
92
|
+
// Use a (negative) margin to account for the difference between the indicator's height and the label's line height.
|
93
|
+
// This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.
|
94
|
+
marginTop: "calc((" + indicatorSize + " - " + react_theme_1.tokens.lineHeightBase300 + ") / 2)",
|
95
|
+
marginBottom: "calc((" + indicatorSize + " - " + react_theme_1.tokens.lineHeightBase300 + ") / 2)",
|
96
|
+
},
|
97
|
+
below: {
|
98
|
+
paddingTop: react_theme_1.tokens.spacingVerticalXS,
|
99
|
+
textAlign: 'center',
|
100
|
+
},
|
101
|
+
});
|
102
|
+
/**
|
103
|
+
* Apply styling to the Radio slots based on the state
|
104
|
+
*/
|
105
|
+
var useRadioStyles_unstable = function (state) {
|
106
|
+
var labelPosition = state.labelPosition;
|
107
|
+
var rootStyles = useRootStyles();
|
108
|
+
state.root.className = react_1.mergeClasses(exports.radioClassNames.root, rootStyles.base, rootStyles.focusIndicator, labelPosition === 'below' && rootStyles.vertical, state.root.className);
|
109
|
+
var inputStyles = useInputStyles();
|
110
|
+
state.input.className = react_1.mergeClasses(exports.radioClassNames.input, inputStyles.base, inputStyles[labelPosition], state.input.className);
|
111
|
+
var indicatorStyles = useIndicatorStyles();
|
112
|
+
state.indicator.className = react_1.mergeClasses(exports.radioClassNames.indicator, indicatorStyles.base, state.indicator.className);
|
113
|
+
var labelStyles = useLabelStyles();
|
114
|
+
if (state.label) {
|
115
|
+
state.label.className = react_1.mergeClasses(exports.radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
|
116
|
+
}
|
117
|
+
};
|
118
|
+
exports.useRadioStyles_unstable = useRadioStyles_unstable;
|
119
|
+
});
|
120
|
+
//# sourceMappingURL=useRadioStyles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useRadioStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-radio/src/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\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n },\n\n vertical: {\n flexDirection: 'column',\n alignItems: 'center',\n },\n\n focusIndicator: createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputStyles = makeStyles({\n base: {\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n boxSizing: 'border-box',\n ...shorthands.margin(0),\n opacity: 0,\n\n ':enabled': {\n cursor: 'pointer',\n [`& ~ .${radioClassNames.label}`]: {\n cursor: 'pointer',\n },\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 cursor: 'default',\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n\n after: {\n width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`,\n },\n below: {\n height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`,\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 ...shorthands.margin(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n },\n\n below: {\n paddingTop: tokens.spacingVerticalXS,\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 { labelPosition } = state;\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n radioClassNames.root,\n rootStyles.base,\n rootStyles.focusIndicator,\n labelPosition === 'below' && rootStyles.vertical,\n state.root.className,\n );\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n radioClassNames.input,\n inputStyles.base,\n inputStyles[labelPosition],\n state.input.className,\n );\n\n const indicatorStyles = useIndicatorStyles();\n state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n radioClassNames.label,\n labelStyles.base,\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n};\n"]}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
define(["require", "exports", "react", "./renderRadioGroup", "./useRadioGroup", "./useRadioGroupStyles", "../../contexts/useRadioGroupContextValues"], function (require, exports, React, renderRadioGroup_1, useRadioGroup_1, useRadioGroupStyles_1, useRadioGroupContextValues_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.RadioGroup = void 0;
|
5
|
+
/**
|
6
|
+
* A RadioGroup component presents a set of options where only one option can be selected.
|
7
|
+
*/
|
8
|
+
exports.RadioGroup = React.forwardRef(function (props, ref) {
|
9
|
+
var state = useRadioGroup_1.useRadioGroup_unstable(props, ref);
|
10
|
+
var contextValues = useRadioGroupContextValues_1.useRadioGroupContextValues(state);
|
11
|
+
useRadioGroupStyles_1.useRadioGroupStyles_unstable(state);
|
12
|
+
return renderRadioGroup_1.renderRadioGroup_unstable(state, contextValues);
|
13
|
+
});
|
14
|
+
exports.RadioGroup.displayName = 'RadioGroup';
|
15
|
+
});
|
16
|
+
//# sourceMappingURL=RadioGroup.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-radio/src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACU,QAAA,UAAU,GAAyC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC1F,IAAM,KAAK,GAAG,sCAAsB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QACjD,IAAM,aAAa,GAAG,uDAA0B,CAAC,KAAK,CAAC,CAAC;QAExD,kDAA4B,CAAC,KAAK,CAAC,CAAC;QACpC,OAAO,4CAAyB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IACzD,CAAC,CAAC,CAAC;IAEH,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","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"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"RadioGroup.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-radio/src/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' | 'horizontal-stacked';\n\n /**\n * Disable all Radio items in this group.\n */\n disabled?: boolean;\n\n /**\n * Require a selection in this group. Adds the `required` prop to all child Radio items.\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"]}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
define(["require", "exports", "tslib", "./RadioGroup", "./RadioGroup.types", "./renderRadioGroup", "./useRadioGroup", "./useRadioGroupStyles"], function (require, exports, tslib_1, RadioGroup_1, RadioGroup_types_1, renderRadioGroup_1, useRadioGroup_1, useRadioGroupStyles_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
tslib_1.__exportStar(RadioGroup_1, exports);
|
5
|
+
tslib_1.__exportStar(RadioGroup_types_1, exports);
|
6
|
+
tslib_1.__exportStar(renderRadioGroup_1, exports);
|
7
|
+
tslib_1.__exportStar(useRadioGroup_1, exports);
|
8
|
+
tslib_1.__exportStar(useRadioGroupStyles_1, exports);
|
9
|
+
});
|
10
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-radio/src/components/RadioGroup/index.ts"],"names":[],"mappings":";;;IAAA,4CAA6B;IAC7B,kDAAmC;IACnC,kDAAmC;IACnC,+CAAgC;IAChC,qDAAsC","sourcesContent":["export * from './RadioGroup';\nexport * from './RadioGroup.types';\nexport * from './renderRadioGroup';\nexport * from './useRadioGroup';\nexport * from './useRadioGroupStyles';\n"]}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "../../contexts/RadioGroupContext"], function (require, exports, tslib_1, React, react_utilities_1, RadioGroupContext_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.renderRadioGroup_unstable = void 0;
|
5
|
+
/**
|
6
|
+
* Render the final JSX of RadioGroup
|
7
|
+
*/
|
8
|
+
var renderRadioGroup_unstable = function (state, contextValues) {
|
9
|
+
var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
|
10
|
+
return (React.createElement(RadioGroupContext_1.RadioGroupContext.Provider, { value: contextValues.radioGroup },
|
11
|
+
React.createElement(slots.root, tslib_1.__assign({}, slotProps.root))));
|
12
|
+
};
|
13
|
+
exports.renderRadioGroup_unstable = renderRadioGroup_unstable;
|
14
|
+
});
|
15
|
+
//# sourceMappingURL=renderRadioGroup.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"renderRadioGroup.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-radio/src/components/RadioGroup/renderRadioGroup.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,yBAAyB,GAAG,UAAC,KAAsB,EAAE,aAAsC;QAChG,IAAA,KAAuB,0BAAQ,CAAkB,KAAK,CAAC,EAArD,KAAK,WAAA,EAAE,SAAS,eAAqC,CAAC;QAE9D,OAAO,CACL,oBAAC,qCAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa,CAAC,UAAU;YACzD,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CACP,CAC9B,CAAC;IACJ,CAAC,CAAC;IARW,QAAA,yBAAyB,6BAQpC","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"]}
|
@@ -0,0 +1,36 @@
|
|
1
|
+
define(["require", "exports", "tslib", "@fluentui/react-utilities"], function (require, exports, tslib_1, react_utilities_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.useRadioGroup_unstable = void 0;
|
5
|
+
/**
|
6
|
+
* Create the state required to render RadioGroup.
|
7
|
+
*
|
8
|
+
* The returned state can be modified with hooks such as useRadioGroupStyles_unstable,
|
9
|
+
* before being passed to renderRadioGroup_unstable.
|
10
|
+
*
|
11
|
+
* @param props - props from this instance of RadioGroup
|
12
|
+
* @param ref - reference to root HTMLElement of RadioGroup
|
13
|
+
*/
|
14
|
+
var useRadioGroup_unstable = function (props, ref) {
|
15
|
+
var generatedName = react_utilities_1.useId('radiogroup-');
|
16
|
+
var _a = props.name, name = _a === void 0 ? generatedName : _a, value = props.value, defaultValue = props.defaultValue, disabled = props.disabled, _b = props.layout, layout = _b === void 0 ? 'vertical' : _b, onChange = props.onChange, required = props.required;
|
17
|
+
return {
|
18
|
+
layout: layout,
|
19
|
+
name: name,
|
20
|
+
value: value,
|
21
|
+
defaultValue: defaultValue,
|
22
|
+
disabled: disabled,
|
23
|
+
required: required,
|
24
|
+
components: {
|
25
|
+
root: 'div',
|
26
|
+
},
|
27
|
+
root: tslib_1.__assign(tslib_1.__assign({ ref: ref, role: 'radiogroup' }, react_utilities_1.getNativeElementProps('div', props, /*excludedPropNames:*/ ['onChange', 'name'])), { onChange: react_utilities_1.useEventCallback(function (ev) {
|
28
|
+
if (onChange && ev.target instanceof HTMLInputElement && ev.target.type === 'radio') {
|
29
|
+
onChange(ev, { value: ev.target.value });
|
30
|
+
}
|
31
|
+
}) }),
|
32
|
+
};
|
33
|
+
};
|
34
|
+
exports.useRadioGroup_unstable = useRadioGroup_unstable;
|
35
|
+
});
|
36
|
+
//# sourceMappingURL=useRadioGroup.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useRadioGroup.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-radio/src/components/RadioGroup/useRadioGroup.ts"],"names":[],"mappings":";;;;IAIA;;;;;;;;OAQG;IACI,IAAM,sBAAsB,GAAG,UAAC,KAAsB,EAAE,GAA8B;QAC3F,IAAM,aAAa,GAAG,uBAAK,CAAC,aAAa,CAAC,CAAC;QAEnC,IAAA,KAAiG,KAAK,KAAlF,EAApB,IAAI,mBAAG,aAAa,KAAA,EAAE,KAAK,GAAsE,KAAK,MAA3E,EAAE,YAAY,GAAwD,KAAK,aAA7D,EAAE,QAAQ,GAA8C,KAAK,SAAnD,EAAE,KAA4C,KAAK,OAA9B,EAAnB,MAAM,mBAAG,UAAU,KAAA,EAAE,QAAQ,GAAe,KAAK,SAApB,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAW;QAE/G,OAAO;YACL,MAAM,QAAA;YACN,IAAI,MAAA;YACJ,KAAK,OAAA;YACL,YAAY,cAAA;YACZ,QAAQ,UAAA;YACR,QAAQ,UAAA;YACR,UAAU,EAAE;gBACV,IAAI,EAAE,KAAK;aACZ;YACD,IAAI,sCACF,GAAG,KAAA,EACH,IAAI,EAAE,YAAY,IACf,uCAAqB,CAAC,KAAK,EAAE,KAAK,EAAE,sBAAsB,CAAC,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,KACnF,QAAQ,EAAE,kCAAgB,CAAC,UAAA,EAAE;oBAC3B,IAAI,QAAQ,IAAI,EAAE,CAAC,MAAM,YAAY,gBAAgB,IAAI,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,OAAO,EAAE;wBACnF,QAAQ,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;qBAC1C;gBACH,CAAC,CAAC,GACH;SACF,CAAC;IACJ,CAAC,CAAC;IA1BW,QAAA,sBAAsB,0BA0BjC","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"]}
|
@@ -0,0 +1,26 @@
|
|
1
|
+
define(["require", "exports", "@griffel/react"], function (require, exports, react_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.useRadioGroupStyles_unstable = exports.radioGroupClassNames = void 0;
|
5
|
+
exports.radioGroupClassNames = {
|
6
|
+
root: 'fui-RadioGroup',
|
7
|
+
};
|
8
|
+
var useStyles = react_1.makeStyles({
|
9
|
+
root: {
|
10
|
+
display: 'flex',
|
11
|
+
alignItems: 'flex-start',
|
12
|
+
},
|
13
|
+
vertical: {
|
14
|
+
flexDirection: 'column',
|
15
|
+
},
|
16
|
+
});
|
17
|
+
/**
|
18
|
+
* Apply styling to the RadioGroup slots based on the state
|
19
|
+
*/
|
20
|
+
var useRadioGroupStyles_unstable = function (state) {
|
21
|
+
var styles = useStyles();
|
22
|
+
state.root.className = react_1.mergeClasses(exports.radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);
|
23
|
+
};
|
24
|
+
exports.useRadioGroupStyles_unstable = useRadioGroupStyles_unstable;
|
25
|
+
});
|
26
|
+
//# sourceMappingURL=useRadioGroupStyles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useRadioGroupStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts"],"names":[],"mappings":";;;;IAIa,QAAA,oBAAoB,GAAoC;QACnE,IAAI,EAAE,gBAAgB;KACvB,CAAC;IAEF,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,YAAY;SACzB;QAED,QAAQ,EAAE;YACR,aAAa,EAAE,QAAQ;SACxB;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,4BAA4B,GAAG,UAAC,KAAsB;QACjE,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CACjC,4BAAoB,CAAC,IAAI,EACzB,MAAM,CAAC,IAAI,EACX,KAAK,CAAC,MAAM,KAAK,UAAU,IAAI,MAAM,CAAC,QAAQ,EAC9C,KAAK,CAAC,IAAI,CAAC,SAAS,CACrB,CAAC;IACJ,CAAC,CAAC;IARW,QAAA,4BAA4B,gCAQvC","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\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"]}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
define(["require", "exports", "react", "@fluentui/react-field", "../../RadioGroup"], function (require, exports, React, react_field_1, RadioGroup_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.RadioGroupField = exports.radioGroupFieldClassNames = void 0;
|
5
|
+
exports.radioGroupFieldClassNames = react_field_1.getFieldClassNames('RadioGroupField');
|
6
|
+
exports.RadioGroupField = React.forwardRef(function (props, ref) {
|
7
|
+
var state = react_field_1.useField_unstable(props, ref, {
|
8
|
+
component: RadioGroup_1.RadioGroup,
|
9
|
+
classNames: exports.radioGroupFieldClassNames,
|
10
|
+
labelConnection: 'aria-labelledby',
|
11
|
+
});
|
12
|
+
react_field_1.useFieldStyles_unstable(state);
|
13
|
+
return react_field_1.renderField_unstable(state);
|
14
|
+
});
|
15
|
+
exports.RadioGroupField.displayName = 'RadioGroupField';
|
16
|
+
});
|
17
|
+
//# sourceMappingURL=RadioGroupField.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"RadioGroupField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-radio/src/components/RadioGroupField/RadioGroupField.tsx"],"names":[],"mappings":";;;;IAaa,QAAA,yBAAyB,GAAG,gCAAkB,CAAC,iBAAiB,CAAC,CAAC;IAElE,QAAA,eAAe,GAA8C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QACpG,IAAM,KAAK,GAAG,+BAAiB,CAAC,KAAK,EAAE,GAAG,EAAE;YAC1C,SAAS,EAAE,uBAAU;YACrB,UAAU,EAAE,iCAAyB;YACrC,eAAe,EAAE,iBAAiB;SACnC,CAAC,CAAC;QACH,qCAAuB,CAAC,KAAK,CAAC,CAAC;QAC/B,OAAO,kCAAoB,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,uBAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n getFieldClassNames,\n renderField_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { RadioGroup } from '../../RadioGroup';\n\nexport type RadioGroupFieldProps = FieldProps<typeof RadioGroup>;\n\nexport const radioGroupFieldClassNames = getFieldClassNames('RadioGroupField');\n\nexport const RadioGroupField: ForwardRefComponent<RadioGroupFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, {\n component: RadioGroup,\n classNames: radioGroupFieldClassNames,\n labelConnection: 'aria-labelledby',\n });\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nRadioGroupField.displayName = 'RadioGroupField';\n"]}
|
@@ -0,0 +1,6 @@
|
|
1
|
+
define(["require", "exports", "tslib", "./RadioGroupField"], function (require, exports, tslib_1, RadioGroupField_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
tslib_1.__exportStar(RadioGroupField_1, exports);
|
5
|
+
});
|
6
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-radio/src/components/RadioGroupField/index.ts"],"names":[],"mappings":";;;IAAA,iDAAkC","sourcesContent":["export * from './RadioGroupField';\n"]}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
define(["require", "exports", "@fluentui/react-context-selector"], function (require, exports, react_context_selector_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.useRadioGroupContext_unstable = exports.RadioGroupProvider = exports.RadioGroupContext = void 0;
|
5
|
+
/**
|
6
|
+
* RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.
|
7
|
+
*/
|
8
|
+
exports.RadioGroupContext = react_context_selector_1.createContext(undefined);
|
9
|
+
var radioGroupContextDefaultValue = {};
|
10
|
+
exports.RadioGroupProvider = exports.RadioGroupContext.Provider;
|
11
|
+
var useRadioGroupContext_unstable = function (selector) {
|
12
|
+
return react_context_selector_1.useContextSelector(exports.RadioGroupContext, function (ctx) {
|
13
|
+
if (ctx === void 0) { ctx = radioGroupContextDefaultValue; }
|
14
|
+
return selector(ctx);
|
15
|
+
});
|
16
|
+
};
|
17
|
+
exports.useRadioGroupContext_unstable = useRadioGroupContext_unstable;
|
18
|
+
});
|
19
|
+
//# sourceMappingURL=RadioGroupContext.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"RadioGroupContext.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-radio/src/contexts/RadioGroupContext.ts"],"names":[],"mappings":";;;;IAIA;;OAEG;IACU,QAAA,iBAAiB,GAAoC,sCAAa,CAC7E,SAAS,CACyB,CAAC;IAErC,IAAM,6BAA6B,GAA2B,EAAE,CAAC;IAEpD,QAAA,kBAAkB,GAAG,yBAAiB,CAAC,QAAQ,CAAC;IAEtD,IAAM,6BAA6B,GAAG,UAAI,QAAoD;QACnG,OAAA,2CAAkB,CAAC,yBAAiB,EAAE,UAAC,GAAmC;YAAnC,oBAAA,EAAA,mCAAmC;YAAK,OAAA,QAAQ,CAAC,GAAG,CAAC;QAAb,CAAa,CAAC;IAA7F,CAA6F,CAAC;IADnF,QAAA,6BAA6B,iCACsD","sourcesContent":["import { createContext, useContextSelector, ContextSelector } 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<RadioGroupContextValue | undefined>(\n undefined,\n) as Context<RadioGroupContextValue>;\n\nconst radioGroupContextDefaultValue: RadioGroupContextValue = {};\n\nexport const RadioGroupProvider = RadioGroupContext.Provider;\n\nexport const useRadioGroupContext_unstable = <T>(selector: ContextSelector<RadioGroupContextValue, T>): T =>\n useContextSelector(RadioGroupContext, (ctx = radioGroupContextDefaultValue) => selector(ctx));\n"]}
|
@@ -0,0 +1,7 @@
|
|
1
|
+
define(["require", "exports", "tslib", "./RadioGroupContext", "./useRadioGroupContextValues"], function (require, exports, tslib_1, RadioGroupContext_1, useRadioGroupContextValues_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
tslib_1.__exportStar(RadioGroupContext_1, exports);
|
5
|
+
tslib_1.__exportStar(useRadioGroupContextValues_1, exports);
|
6
|
+
});
|
7
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-radio/src/contexts/index.ts"],"names":[],"mappings":";;;IAAA,mDAAoC;IACpC,4DAA6C","sourcesContent":["export * from './RadioGroupContext';\nexport * from './useRadioGroupContextValues';\n"]}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
define(["require", "exports"], function (require, exports) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.useRadioGroupContextValues = void 0;
|
5
|
+
var useRadioGroupContextValues = function (state) {
|
6
|
+
var name = state.name, value = state.value, defaultValue = state.defaultValue, disabled = state.disabled, layout = state.layout, required = state.required;
|
7
|
+
var radioGroup = {
|
8
|
+
name: name,
|
9
|
+
value: value,
|
10
|
+
defaultValue: defaultValue,
|
11
|
+
disabled: disabled,
|
12
|
+
layout: layout,
|
13
|
+
required: required,
|
14
|
+
};
|
15
|
+
return { radioGroup: radioGroup };
|
16
|
+
};
|
17
|
+
exports.useRadioGroupContextValues = useRadioGroupContextValues;
|
18
|
+
});
|
19
|
+
//# sourceMappingURL=useRadioGroupContextValues.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useRadioGroupContextValues.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-radio/src/contexts/useRadioGroupContextValues.ts"],"names":[],"mappings":";;;;IAEO,IAAM,0BAA0B,GAAG,UAAC,KAAsB;QACvD,IAAA,IAAI,GAAsD,KAAK,KAA3D,EAAE,KAAK,GAA+C,KAAK,MAApD,EAAE,YAAY,GAAiC,KAAK,aAAtC,EAAE,QAAQ,GAAuB,KAAK,SAA5B,EAAE,MAAM,GAAe,KAAK,OAApB,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAW;QAExE,IAAM,UAAU,GAA2B;YACzC,IAAI,MAAA;YACJ,KAAK,OAAA;YACL,YAAY,cAAA;YACZ,QAAQ,UAAA;YACR,MAAM,QAAA;YACN,QAAQ,UAAA;SACT,CAAC;QAEF,OAAO,EAAE,UAAU,YAAA,EAAE,CAAC;IACxB,CAAC,CAAC;IAbW,QAAA,0BAA0B,8BAarC","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"]}
|
package/lib-amd/index.js
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
define(["require", "exports", "./RadioGroup", "./Radio", "./contexts/index", "./RadioGroupField"], function (require, exports, RadioGroup_1, Radio_1, index_1, RadioGroupField_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.radioGroupFieldClassNames = exports.RadioGroupField_unstable = exports.useRadioGroupContext_unstable = exports.useRadioGroupContextValues = exports.RadioGroupProvider = exports.useRadio_unstable = exports.useRadioStyles_unstable = exports.renderRadio_unstable = exports.radioClassNames = exports.Radio = exports.useRadioGroup_unstable = exports.useRadioGroupStyles_unstable = exports.renderRadioGroup_unstable = exports.radioGroupClassNames = exports.RadioGroup = void 0;
|
5
|
+
Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return RadioGroup_1.RadioGroup; } });
|
6
|
+
Object.defineProperty(exports, "radioGroupClassNames", { enumerable: true, get: function () { return RadioGroup_1.radioGroupClassNames; } });
|
7
|
+
Object.defineProperty(exports, "renderRadioGroup_unstable", { enumerable: true, get: function () { return RadioGroup_1.renderRadioGroup_unstable; } });
|
8
|
+
Object.defineProperty(exports, "useRadioGroupStyles_unstable", { enumerable: true, get: function () { return RadioGroup_1.useRadioGroupStyles_unstable; } });
|
9
|
+
Object.defineProperty(exports, "useRadioGroup_unstable", { enumerable: true, get: function () { return RadioGroup_1.useRadioGroup_unstable; } });
|
10
|
+
Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return Radio_1.Radio; } });
|
11
|
+
Object.defineProperty(exports, "radioClassNames", { enumerable: true, get: function () { return Radio_1.radioClassNames; } });
|
12
|
+
Object.defineProperty(exports, "renderRadio_unstable", { enumerable: true, get: function () { return Radio_1.renderRadio_unstable; } });
|
13
|
+
Object.defineProperty(exports, "useRadioStyles_unstable", { enumerable: true, get: function () { return Radio_1.useRadioStyles_unstable; } });
|
14
|
+
Object.defineProperty(exports, "useRadio_unstable", { enumerable: true, get: function () { return Radio_1.useRadio_unstable; } });
|
15
|
+
Object.defineProperty(exports, "RadioGroupProvider", { enumerable: true, get: function () { return index_1.RadioGroupProvider; } });
|
16
|
+
Object.defineProperty(exports, "useRadioGroupContextValues", { enumerable: true, get: function () { return index_1.useRadioGroupContextValues; } });
|
17
|
+
Object.defineProperty(exports, "useRadioGroupContext_unstable", { enumerable: true, get: function () { return index_1.useRadioGroupContext_unstable; } });
|
18
|
+
Object.defineProperty(exports, "RadioGroupField_unstable", { enumerable: true, get: function () { return RadioGroupField_1.RadioGroupField; } });
|
19
|
+
Object.defineProperty(exports, "radioGroupFieldClassNames", { enumerable: true, get: function () { return RadioGroupField_1.radioGroupFieldClassNames; } });
|
20
|
+
});
|
21
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-radio/src/index.ts"],"names":[],"mappings":";;;;IACE,wGAAA,UAAU,OAAA;IACV,kHAAA,oBAAoB,OAAA;IACpB,uHAAA,yBAAyB,OAAA;IACzB,0HAAA,4BAA4B,OAAA;IAC5B,oHAAA,sBAAsB,OAAA;IAUf,8FAAA,KAAK,OAAA;IAAE,wGAAA,eAAe,OAAA;IAAE,6GAAA,oBAAoB,OAAA;IAAE,gHAAA,uBAAuB,OAAA;IAAE,0GAAA,iBAAiB,OAAA;IAExF,2GAAA,kBAAkB,OAAA;IAAE,mHAAA,0BAA0B,OAAA;IAAE,sHAAA,6BAA6B,OAAA;IAE7E,2HAAA,eAAe,OAA4B;IAAE,4HAAA,yBAAyB,OAAA","sourcesContent":["export {\n RadioGroup,\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 { Radio, radioClassNames, renderRadio_unstable, useRadioStyles_unstable, useRadio_unstable } from './Radio';\nexport type { RadioProps, RadioSlots, RadioState, RadioOnChangeData } from './Radio';\nexport { RadioGroupProvider, useRadioGroupContextValues, useRadioGroupContext_unstable } from './contexts/index';\n\nexport { RadioGroupField as RadioGroupField_unstable, radioGroupFieldClassNames } from './RadioGroupField';\nexport type { RadioGroupFieldProps as RadioGroupFieldProps_unstable } from './RadioGroupField';\n"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["Radio.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Radio/index';\n"],"sourceRoot":"../src/"}
|
1
|
+
{"version":3,"sources":["packages/react-components/react-radio/src/Radio.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Radio/index';\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["RadioGroup.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/RadioGroup/index';\n"],"sourceRoot":"../src/"}
|
1
|
+
{"version":3,"sources":["packages/react-components/react-radio/src/RadioGroup.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/RadioGroup/index';\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
|
7
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
8
|
+
|
9
|
+
tslib_1.__exportStar(require("./components/RadioGroupField/index"), exports);
|
10
|
+
//# sourceMappingURL=RadioGroupField.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-radio/src/RadioGroupField.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/RadioGroupField/index';\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/Radio/Radio.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,UAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;EAEA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { RadioProps } from './Radio.types';\nimport { renderRadio_unstable } from './renderRadio';\nimport { useRadio_unstable } from './useRadio';\nimport { useRadioStyles_unstable } from './useRadioStyles';\n\n/**\n * Radio component is a wrapper for a radio button with a label.\n */\nexport const Radio: ForwardRefComponent<RadioProps> = React.forwardRef((props, ref) => {\n const state = useRadio_unstable(props, ref);\n\n useRadioStyles_unstable(state);\n return renderRadio_unstable(state);\n});\n\nRadio.displayName = 'Radio';\n"],"sourceRoot":"../src/"}
|
1
|
+
{"version":3,"sources":["packages/react-components/react-radio/src/components/Radio/Radio.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,UAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;EAEA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { RadioProps } from './Radio.types';\nimport { renderRadio_unstable } from './renderRadio';\nimport { useRadio_unstable } from './useRadio';\nimport { useRadioStyles_unstable } from './useRadioStyles';\n\n/**\n * Radio component is a wrapper for a radio button with a label.\n */\nexport const Radio: ForwardRefComponent<RadioProps> = React.forwardRef((props, ref) => {\n const state = useRadio_unstable(props, ref);\n\n useRadioStyles_unstable(state);\n return renderRadio_unstable(state);\n});\n\nRadio.displayName = 'Radio';\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/Radio/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Radio';\nexport * from './Radio.types';\nexport * from './renderRadio';\nexport * from './useRadio';\nexport * from './useRadioStyles';\n"],"sourceRoot":"../src/"}
|
1
|
+
{"version":3,"sources":["packages/react-components/react-radio/src/components/Radio/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Radio';\nexport * from './Radio.types';\nexport * from './renderRadio';\nexport * from './useRadio';\nexport * from './useRadioStyles';\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/Radio/renderRadio.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAhB,CAFF,EAGG,KAAK,CAAC,KAAN,IAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAHlB,CADF;AAOD,CAVM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { RadioSlots, RadioState } from './Radio.types';\n\n/**\n * Render the final JSX of Radio\n */\nexport const renderRadio_unstable = (state: RadioState) => {\n const { slots, slotProps } = getSlots<RadioSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.input {...slotProps.input} />\n <slots.indicator {...slotProps.indicator} />\n {slots.label && <slots.label {...slotProps.label} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
1
|
+
{"version":3,"sources":["packages/react-components/react-radio/src/components/Radio/renderRadio.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAhB,CAFF,EAGG,KAAK,CAAC,KAAN,IAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAHlB,CADF;AAOD,CAVM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { RadioSlots, RadioState } from './Radio.types';\n\n/**\n * Render the final JSX of Radio\n */\nexport const renderRadio_unstable = (state: RadioState) => {\n const { slots, slotProps } = getSlots<RadioSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.input {...slotProps.input} />\n <slots.indicator {...slotProps.indicator} />\n {slots.label && <slots.label {...slotProps.label} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|