@fluentui/react-radio 9.1.4 → 9.1.6
Sign up to get free protection for your applications and to get access to all the features.
- package/.swcrc +30 -0
- package/CHANGELOG.json +109 -1
- package/CHANGELOG.md +33 -2
- package/lib/Radio.js.map +1 -1
- package/lib/RadioGroup.js.map +1 -1
- package/lib/RadioGroupField.js.map +1 -1
- package/lib/components/Radio/Radio.js.map +1 -1
- package/lib/components/Radio/Radio.types.js +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 +1 -9
- package/lib/components/Radio/renderRadio.js.map +1 -1
- package/lib/components/Radio/useRadio.js +5 -3
- 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 +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 +1 -3
- package/lib/components/RadioGroup/renderRadioGroup.js.map +1 -1
- package/lib/components/RadioGroup/useRadioGroup.js +1 -0
- package/lib/components/RadioGroup/useRadioGroup.js.map +1 -1
- package/lib/components/RadioGroup/useRadioGroupStyles.js.map +1 -1
- package/lib/components/RadioGroupField/RadioGroupField.js +1 -2
- package/lib/components/RadioGroupField/RadioGroupField.js.map +1 -1
- package/lib/components/RadioGroupField/index.js.map +1 -1
- 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.map +1 -1
- package/lib-commonjs/Radio.js +5 -4
- package/lib-commonjs/Radio.js.map +1 -1
- package/lib-commonjs/RadioGroup.js +5 -4
- package/lib-commonjs/RadioGroup.js.map +1 -1
- package/lib-commonjs/RadioGroupField.js +5 -4
- package/lib-commonjs/RadioGroupField.js.map +1 -1
- package/lib-commonjs/components/Radio/Radio.js +19 -20
- package/lib-commonjs/components/Radio/Radio.js.map +1 -1
- package/lib-commonjs/components/Radio/Radio.types.js +5 -2
- package/lib-commonjs/components/Radio/Radio.types.js.map +1 -1
- package/lib-commonjs/components/Radio/index.js +9 -8
- package/lib-commonjs/components/Radio/index.js.map +1 -1
- package/lib-commonjs/components/Radio/renderRadio.js +13 -24
- package/lib-commonjs/components/Radio/renderRadio.js.map +1 -1
- package/lib-commonjs/components/Radio/useRadio.js +83 -91
- package/lib-commonjs/components/Radio/useRadio.js.map +1 -1
- package/lib-commonjs/components/Radio/useRadioStyles.js +139 -65
- package/lib-commonjs/components/Radio/useRadioStyles.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/RadioGroup.js +21 -22
- package/lib-commonjs/components/RadioGroup/RadioGroup.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/RadioGroup.types.js +5 -2
- package/lib-commonjs/components/RadioGroup/RadioGroup.types.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/index.js +9 -8
- package/lib-commonjs/components/RadioGroup/index.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/renderRadioGroup.js +16 -21
- package/lib-commonjs/components/RadioGroup/renderRadioGroup.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/useRadioGroup.js +40 -50
- package/lib-commonjs/components/RadioGroup/useRadioGroup.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.js +32 -23
- package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.js.map +1 -1
- package/lib-commonjs/components/RadioGroupField/RadioGroupField.js +17 -11
- package/lib-commonjs/components/RadioGroupField/RadioGroupField.js.map +1 -1
- package/lib-commonjs/components/RadioGroupField/index.js +5 -4
- package/lib-commonjs/components/RadioGroupField/index.js.map +1 -1
- package/lib-commonjs/contexts/RadioGroupContext.js +17 -11
- package/lib-commonjs/contexts/RadioGroupContext.js.map +1 -1
- package/lib-commonjs/contexts/index.js +6 -5
- package/lib-commonjs/contexts/index.js.map +1 -1
- package/lib-commonjs/contexts/useRadioGroupContextValues.js +20 -25
- package/lib-commonjs/contexts/useRadioGroupContextValues.js.map +1 -1
- package/lib-commonjs/index.js +31 -99
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +13 -12
- package/lib-amd/Radio.js +0 -6
- package/lib-amd/Radio.js.map +0 -1
- package/lib-amd/RadioGroup.js +0 -6
- package/lib-amd/RadioGroup.js.map +0 -1
- package/lib-amd/RadioGroupField.js +0 -6
- package/lib-amd/RadioGroupField.js.map +0 -1
- package/lib-amd/components/Radio/Radio.js +0 -17
- package/lib-amd/components/Radio/Radio.js.map +0 -1
- package/lib-amd/components/Radio/Radio.types.js +0 -5
- package/lib-amd/components/Radio/Radio.types.js.map +0 -1
- package/lib-amd/components/Radio/index.js +0 -10
- package/lib-amd/components/Radio/index.js.map +0 -1
- package/lib-amd/components/Radio/renderRadio.js +0 -17
- package/lib-amd/components/Radio/renderRadio.js.map +0 -1
- package/lib-amd/components/Radio/useRadio.js +0 -65
- package/lib-amd/components/Radio/useRadio.js.map +0 -1
- package/lib-amd/components/Radio/useRadioStyles.js +0 -158
- package/lib-amd/components/Radio/useRadioStyles.js.map +0 -1
- package/lib-amd/components/RadioGroup/RadioGroup.js +0 -18
- package/lib-amd/components/RadioGroup/RadioGroup.js.map +0 -1
- package/lib-amd/components/RadioGroup/RadioGroup.types.js +0 -5
- package/lib-amd/components/RadioGroup/RadioGroup.types.js.map +0 -1
- package/lib-amd/components/RadioGroup/index.js +0 -10
- package/lib-amd/components/RadioGroup/index.js.map +0 -1
- package/lib-amd/components/RadioGroup/renderRadioGroup.js +0 -15
- package/lib-amd/components/RadioGroup/renderRadioGroup.js.map +0 -1
- package/lib-amd/components/RadioGroup/useRadioGroup.js +0 -38
- package/lib-amd/components/RadioGroup/useRadioGroup.js.map +0 -1
- package/lib-amd/components/RadioGroup/useRadioGroupStyles.js +0 -26
- package/lib-amd/components/RadioGroup/useRadioGroupStyles.js.map +0 -1
- package/lib-amd/components/RadioGroupField/RadioGroupField.js +0 -10
- package/lib-amd/components/RadioGroupField/RadioGroupField.js.map +0 -1
- package/lib-amd/components/RadioGroupField/index.js +0 -6
- package/lib-amd/components/RadioGroupField/index.js.map +0 -1
- package/lib-amd/contexts/RadioGroupContext.js +0 -19
- package/lib-amd/contexts/RadioGroupContext.js.map +0 -1
- package/lib-amd/contexts/index.js +0 -7
- package/lib-amd/contexts/index.js.map +0 -1
- package/lib-amd/contexts/useRadioGroupContextValues.js +0 -19
- package/lib-amd/contexts/useRadioGroupContextValues.js.map +0 -1
- package/lib-amd/index.js +0 -21
- package/lib-amd/index.js.map +0 -1
@@ -1,79 +1,153 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
function _export(target, all) {
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
7
|
+
enumerable: true,
|
8
|
+
get: all[name]
|
9
|
+
});
|
10
|
+
}
|
11
|
+
_export(exports, {
|
12
|
+
radioClassNames: ()=>radioClassNames,
|
13
|
+
useRadioStyles_unstable: ()=>useRadioStyles_unstable
|
5
14
|
});
|
6
|
-
|
7
|
-
const
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
indicator: 'fui-Radio__indicator',
|
13
|
-
input: 'fui-Radio__input',
|
14
|
-
label: 'fui-Radio__label'
|
15
|
+
const _react = require("@griffel/react");
|
16
|
+
const radioClassNames = {
|
17
|
+
root: 'fui-Radio',
|
18
|
+
indicator: 'fui-Radio__indicator',
|
19
|
+
input: 'fui-Radio__input',
|
20
|
+
label: 'fui-Radio__label'
|
15
21
|
};
|
16
22
|
// The indicator size is used by the indicator and label styles
|
17
23
|
const indicatorSize = '16px';
|
18
|
-
const useRootBaseClassName = /*#__PURE__*/
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
+
const useRootBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("r18vxbm9", "r1631i6s", [
|
25
|
+
".r18vxbm9{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}",
|
26
|
+
".r18vxbm9:focus{outline-style:none;}",
|
27
|
+
".r18vxbm9:focus-visible{outline-style:none;}",
|
28
|
+
".r18vxbm9[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
|
29
|
+
".r18vxbm9[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;left:-2px;right:-2px;}",
|
30
|
+
".r1631i6s{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}",
|
31
|
+
".r1631i6s:focus{outline-style:none;}",
|
32
|
+
".r1631i6s:focus-visible{outline-style:none;}",
|
33
|
+
".r1631i6s[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
|
34
|
+
".r1631i6s[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;right:-2px;left:-2px;}"
|
35
|
+
]);
|
36
|
+
const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
37
|
+
vertical: {
|
38
|
+
Beiy3e4: "f1vx9l62",
|
39
|
+
Bt984gj: "f122n59"
|
40
|
+
}
|
24
41
|
}, {
|
25
|
-
|
42
|
+
d: [
|
43
|
+
".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}",
|
44
|
+
".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"
|
45
|
+
]
|
26
46
|
});
|
27
|
-
const useInputBaseClassName = /*#__PURE__*/
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
47
|
+
const useInputBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("r9gx1vl", "r1uk1i2c", [
|
48
|
+
".r9gx1vl{position:absolute;left:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}",
|
49
|
+
".r9gx1vl:enabled{cursor:pointer;}",
|
50
|
+
".r9gx1vl:enabled~.fui-Radio__label{cursor:pointer;}",
|
51
|
+
".r9gx1vl:not(:checked)~.fui-Radio__indicator>*{opacity:0;}",
|
52
|
+
".r9gx1vl:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}",
|
53
|
+
".r9gx1vl:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}",
|
54
|
+
".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}",
|
55
|
+
".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}",
|
56
|
+
".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}",
|
57
|
+
".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}",
|
58
|
+
".r9gx1vl:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}",
|
59
|
+
".r9gx1vl:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}",
|
60
|
+
".r9gx1vl:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}",
|
61
|
+
".r9gx1vl:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}",
|
62
|
+
".r9gx1vl:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}",
|
63
|
+
".r9gx1vl:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}",
|
64
|
+
".r1uk1i2c{position:absolute;right:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}",
|
65
|
+
".r1uk1i2c:enabled{cursor:pointer;}",
|
66
|
+
".r1uk1i2c:enabled~.fui-Radio__label{cursor:pointer;}",
|
67
|
+
".r1uk1i2c:not(:checked)~.fui-Radio__indicator>*{opacity:0;}",
|
68
|
+
".r1uk1i2c:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}",
|
69
|
+
".r1uk1i2c:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}",
|
70
|
+
".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}",
|
71
|
+
".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}",
|
72
|
+
".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}",
|
73
|
+
".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}",
|
74
|
+
".r1uk1i2c:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}",
|
75
|
+
".r1uk1i2c:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}",
|
76
|
+
".r1uk1i2c:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}",
|
77
|
+
".r1uk1i2c:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}",
|
78
|
+
".r1uk1i2c:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}",
|
79
|
+
".r1uk1i2c:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}"
|
80
|
+
]);
|
81
|
+
const useInputStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
82
|
+
below: {
|
83
|
+
a9b677: "fly5x3f",
|
84
|
+
Bqenvij: "f1je6zif"
|
85
|
+
}
|
33
86
|
}, {
|
34
|
-
|
87
|
+
d: [
|
88
|
+
".fly5x3f{width:100%;}",
|
89
|
+
".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}"
|
90
|
+
]
|
35
91
|
});
|
36
|
-
const useIndicatorBaseClassName = /*#__PURE__*/
|
92
|
+
const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("rid4516", null, [
|
93
|
+
".rid4516{width:16px;height:16px;font-size:12px;box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid;border-radius:var(--borderRadiusCircular);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;}"
|
94
|
+
]);
|
37
95
|
// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
|
38
|
-
const useLabelStyles = /*#__PURE__*/
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
96
|
+
const useLabelStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
97
|
+
base: {
|
98
|
+
qb2dma: "f7nlbp4",
|
99
|
+
z8tnut: "f1kwiid1",
|
100
|
+
z189sj: [
|
101
|
+
"f1vdfbxk",
|
102
|
+
"f1f5gg8d"
|
103
|
+
],
|
104
|
+
Byoj8tv: "f5b47ha",
|
105
|
+
uwmqm3: [
|
106
|
+
"f1f5gg8d",
|
107
|
+
"f1vdfbxk"
|
108
|
+
]
|
109
|
+
},
|
110
|
+
after: {
|
111
|
+
uwmqm3: [
|
112
|
+
"fruq291",
|
113
|
+
"f7x41pl"
|
114
|
+
],
|
115
|
+
B6of3ja: "fjzwpt6",
|
116
|
+
jrapky: "fh6j2fo"
|
117
|
+
},
|
118
|
+
below: {
|
119
|
+
z8tnut: "f1ywm7hm",
|
120
|
+
fsow6f: "f17mccla"
|
121
|
+
}
|
55
122
|
}, {
|
56
|
-
|
123
|
+
d: [
|
124
|
+
".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}",
|
125
|
+
".f1kwiid1{padding-top:var(--spacingVerticalS);}",
|
126
|
+
".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
|
127
|
+
".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
|
128
|
+
".f5b47ha{padding-bottom:var(--spacingVerticalS);}",
|
129
|
+
".fruq291{padding-left:var(--spacingHorizontalXS);}",
|
130
|
+
".f7x41pl{padding-right:var(--spacingHorizontalXS);}",
|
131
|
+
".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}",
|
132
|
+
".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}",
|
133
|
+
".f1ywm7hm{padding-top:var(--spacingVerticalXS);}",
|
134
|
+
".f17mccla{text-align:center;}"
|
135
|
+
]
|
57
136
|
});
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
const
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
if (state.label) {
|
75
|
-
state.label.className = react_1.mergeClasses(exports.radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
|
76
|
-
}
|
77
|
-
};
|
78
|
-
exports.useRadioStyles_unstable = useRadioStyles_unstable;
|
137
|
+
const useRadioStyles_unstable = (state)=>{
|
138
|
+
const { labelPosition } = state;
|
139
|
+
const rootBaseClassName = useRootBaseClassName();
|
140
|
+
const rootStyles = useRootStyles();
|
141
|
+
state.root.className = (0, _react.mergeClasses)(radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);
|
142
|
+
const inputBaseClassName = useInputBaseClassName();
|
143
|
+
const inputStyles = useInputStyles();
|
144
|
+
state.input.className = (0, _react.mergeClasses)(radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.input.className);
|
145
|
+
const indicatorBaseClassName = useIndicatorBaseClassName();
|
146
|
+
state.indicator.className = (0, _react.mergeClasses)(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);
|
147
|
+
const labelStyles = useLabelStyles();
|
148
|
+
if (state.label) {
|
149
|
+
state.label.className = (0, _react.mergeClasses)(radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
|
150
|
+
}
|
151
|
+
}; //# sourceMappingURL=useRadioStyles.js.map
|
152
|
+
|
79
153
|
//# sourceMappingURL=useRadioStyles.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["react_tabster_1","require","react_theme_1","react_1","exports","radioClassNames","root","indicator","input","label","indicatorSize","useRootBaseClassName","__resetStyles","useRootStyles","__styles","vertical","Beiy3e4","Bt984gj","d","useInputBaseClassName","useInputStyles","below","a9b677","Bqenvij","useIndicatorBaseClassName","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","after","B6of3ja","jrapky","fsow6f","useRadioStyles_unstable","state","labelPosition","rootBaseClassName","rootStyles","className","mergeClasses","inputBaseClassName","inputStyles","indicatorBaseClassName","labelStyles"],"sources":["../src/packages/react-components/react-radio/src/components/Radio/useRadioStyles.ts"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, 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\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n position: 'relative',\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n alignItems: 'center',\n },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n position: 'absolute',\n left: 0,\n top: 0,\n width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`,\n height: '100%',\n boxSizing: 'border-box',\n 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 borderColor: tokens.colorNeutralStrokeAccessible,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n 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 borderColor: tokens.colorCompoundBrandStroke,\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokeHover,\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n 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 borderColor: tokens.colorNeutralStrokeDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n below: {\n width: '100%',\n height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`,\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\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 overflow: 'hidden',\n\n border: tokens.strokeWidthThin + ' solid',\n borderRadius: tokens.borderRadiusCircular,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\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 rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n radioClassNames.root,\n rootBaseClassName,\n labelPosition === 'below' && rootStyles.vertical,\n state.root.className,\n );\n\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n radioClassNames.input,\n inputBaseClassName,\n labelPosition === 'below' && inputStyles.below,\n state.input.className,\n );\n\n const indicatorBaseClassName = useIndicatorBaseClassName();\n state.indicator.className = mergeClasses(\n radioClassNames.indicator,\n indicatorBaseClassName,\n state.indicator.className,\n );\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"],"mappings":";;;;;;AAAA,MAAAA,eAAA,gBAAAC,OAAA;AACA,MAAAC,aAAA,gBAAAD,OAAA;AACA,MAAAE,OAAA,gBAAAF,OAAA;AAIaG,OAAA,CAAAC,eAAe,GAA+B;EACzDC,IAAI,EAAE,WAAW;EACjBC,SAAS,EAAE,sBAAsB;EACjCC,KAAK,EAAE,kBAAkB;EACzBC,KAAK,EAAE;CACR;AAED;AACA,MAAMC,aAAa,GAAG,MAAM;AAE5B,MAAMC,oBAAoB,gBAAGR,OAAA,CAAAS,aAAe,guEAI1C;AAEF,MAAMC,aAAa,gBAAGV,OAAA,CAAAW,QAAU;EAAAC,QAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAK9B;AAEF,MAAMC,qBAAqB,gBAAGhB,OAAA,CAAAS,aAAe,46GAsF3C;AAEF,MAAMQ,cAAc,gBAAGjB,OAAA,CAAAW,QAAU;EAAAO,KAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,EAK/B;AAEF,MAAMM,yBAAyB,gBAAGrB,OAAA,CAAAS,aAAe,4lBAiB/C;AAEF;AACA,MAAMa,cAAc,gBAAGtB,OAAA,CAAAW,QAAU;EAAAY,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAD,MAAA;IAAAE,OAAA;IAAAC,MAAA;EAAA;EAAAb,KAAA;IAAAO,MAAA;IAAAO,MAAA;EAAA;AAAA;EAAAjB,CAAA;AAAA,EAmB/B;AAEF;;;AAGO,MAAMkB,uBAAuB,GAAIC,KAAiB,IAAI;EAC3D,MAAM;IAAEC;EAAa,CAAE,GAAGD,KAAK;EAE/B,MAAME,iBAAiB,GAAG5B,oBAAoB,EAAE;EAChD,MAAM6B,UAAU,GAAG3B,aAAa,EAAE;EAClCwB,KAAK,CAAC/B,IAAI,CAACmC,SAAS,GAAGtC,OAAA,CAAAuC,YAAY,CACjCtC,OAAA,CAAAC,eAAe,CAACC,IAAI,EACpBiC,iBAAiB,EACjBD,aAAa,KAAK,OAAO,IAAIE,UAAU,CAACzB,QAAQ,EAChDsB,KAAK,CAAC/B,IAAI,CAACmC,SAAS,CACrB;EAED,MAAME,kBAAkB,GAAGxB,qBAAqB,EAAE;EAClD,MAAMyB,WAAW,GAAGxB,cAAc,EAAE;EACpCiB,KAAK,CAAC7B,KAAK,CAACiC,SAAS,GAAGtC,OAAA,CAAAuC,YAAY,CAClCtC,OAAA,CAAAC,eAAe,CAACG,KAAK,EACrBmC,kBAAkB,EAClBL,aAAa,KAAK,OAAO,IAAIM,WAAW,CAACvB,KAAK,EAC9CgB,KAAK,CAAC7B,KAAK,CAACiC,SAAS,CACtB;EAED,MAAMI,sBAAsB,GAAGrB,yBAAyB,EAAE;EAC1Da,KAAK,CAAC9B,SAAS,CAACkC,SAAS,GAAGtC,OAAA,CAAAuC,YAAY,CACtCtC,OAAA,CAAAC,eAAe,CAACE,SAAS,EACzBsC,sBAAsB,EACtBR,KAAK,CAAC9B,SAAS,CAACkC,SAAS,CAC1B;EAED,MAAMK,WAAW,GAAGrB,cAAc,EAAE;EACpC,IAAIY,KAAK,CAAC5B,KAAK,EAAE;IACf4B,KAAK,CAAC5B,KAAK,CAACgC,SAAS,GAAGtC,OAAA,CAAAuC,YAAY,CAClCtC,OAAA,CAAAC,eAAe,CAACI,KAAK,EACrBqC,WAAW,CAACpB,IAAI,EAChBoB,WAAW,CAACR,aAAa,CAAC,EAC1BD,KAAK,CAAC5B,KAAK,CAACgC,SAAS,CACtB;;AAEL,CAAC;AArCYrC,OAAA,CAAAgC,uBAAuB,GAAAA,uBAAA"}
|
1
|
+
{"version":3,"sources":["../../../lib/components/Radio/useRadioStyles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nexport const radioClassNames = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"r18vxbm9\", \"r1631i6s\", [\".r18vxbm9{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}\", \".r18vxbm9:focus{outline-style:none;}\", \".r18vxbm9:focus-visible{outline-style:none;}\", \".r18vxbm9[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r18vxbm9[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;left:-2px;right:-2px;}\", \".r1631i6s{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}\", \".r1631i6s:focus{outline-style:none;}\", \".r1631i6s:focus-visible{outline-style:none;}\", \".r1631i6s[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".r1631i6s[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;right:-2px;left:-2px;}\"]);\nconst useRootStyles = /*#__PURE__*/__styles({\n vertical: {\n Beiy3e4: \"f1vx9l62\",\n Bt984gj: \"f122n59\"\n }\n}, {\n d: [\".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;}\"]\n});\nconst useInputBaseClassName = /*#__PURE__*/__resetStyles(\"r9gx1vl\", \"r1uk1i2c\", [\".r9gx1vl{position:absolute;left:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}\", \".r9gx1vl:enabled{cursor:pointer;}\", \".r9gx1vl:enabled~.fui-Radio__label{cursor:pointer;}\", \".r9gx1vl:not(:checked)~.fui-Radio__indicator>*{opacity:0;}\", \".r9gx1vl:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}\", \".r9gx1vl:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}\", \".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}\", \".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}\", \".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".r9gx1vl:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".r9gx1vl:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}\", \".r9gx1vl:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}\", \".r9gx1vl:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}\", \".r9gx1vl:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}\", \".r9gx1vl:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}\", \".r1uk1i2c{position:absolute;right:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}\", \".r1uk1i2c:enabled{cursor:pointer;}\", \".r1uk1i2c:enabled~.fui-Radio__label{cursor:pointer;}\", \".r1uk1i2c:not(:checked)~.fui-Radio__indicator>*{opacity:0;}\", \".r1uk1i2c:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}\", \".r1uk1i2c:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}\", \".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}\", \".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}\", \".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".r1uk1i2c:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".r1uk1i2c:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}\", \".r1uk1i2c:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}\", \".r1uk1i2c:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}\", \".r1uk1i2c:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}\", \".r1uk1i2c:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}\"]);\nconst useInputStyles = /*#__PURE__*/__styles({\n below: {\n a9b677: \"fly5x3f\",\n Bqenvij: \"f1je6zif\"\n }\n}, {\n d: [\".fly5x3f{width:100%;}\", \".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}\"]\n});\nconst useIndicatorBaseClassName = /*#__PURE__*/__resetStyles(\"rid4516\", null, [\".rid4516{width:16px;height:16px;font-size:12px;box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid;border-radius:var(--borderRadiusCircular);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;}\"]);\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = /*#__PURE__*/__styles({\n base: {\n qb2dma: \"f7nlbp4\",\n z8tnut: \"f1kwiid1\",\n z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n Byoj8tv: \"f5b47ha\",\n uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n },\n after: {\n uwmqm3: [\"fruq291\", \"f7x41pl\"],\n B6of3ja: \"fjzwpt6\",\n jrapky: \"fh6j2fo\"\n },\n below: {\n z8tnut: \"f1ywm7hm\",\n fsow6f: \"f17mccla\"\n }\n}, {\n d: [\".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}\", \".f1kwiid1{padding-top:var(--spacingVerticalS);}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f5b47ha{padding-bottom:var(--spacingVerticalS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}\", \".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}\", \".f1ywm7hm{padding-top:var(--spacingVerticalXS);}\", \".f17mccla{text-align:center;}\"]\n});\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = state => {\n const {\n labelPosition\n } = state;\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.input.className);\n const indicatorBaseClassName = useIndicatorBaseClassName();\n state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n }\n};\n//# sourceMappingURL=useRadioStyles.js.map"],"names":["radioClassNames","useRadioStyles_unstable","root","indicator","input","label","indicatorSize","useRootBaseClassName","__resetStyles","useRootStyles","__styles","vertical","Beiy3e4","Bt984gj","d","useInputBaseClassName","useInputStyles","below","a9b677","Bqenvij","useIndicatorBaseClassName","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","after","B6of3ja","jrapky","fsow6f","state","labelPosition","rootBaseClassName","rootStyles","className","mergeClasses","inputBaseClassName","inputStyles","indicatorBaseClassName","labelStyles"],"mappings":";;;;;;;;;;;IAGaA,eAAe,MAAfA;IAmDAC,uBAAuB,MAAvBA;;uBApDqD;AAC3D,MAAMD,kBAAkB;IAC7BE,MAAM;IACNC,WAAW;IACXC,OAAO;IACPC,OAAO;AACT;AACA,+DAA+D;AAC/D,MAAMC,gBAAgB;AACtB,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,uBAAa,EAAC,YAAY,YAAY;IAAC;IAAuI;IAAwC;IAAgD;IAA6K;IAAutB;IAAuI;IAAwC;IAAgD;IAA6K;CAAstB;AACtxE,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IAC1CC,UAAU;QACRC,SAAS;QACTC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAA6F;KAA0G;AAC7M;AACA,MAAMC,wBAAwB,WAAW,GAAEP,IAAAA,uBAAa,EAAC,WAAW,YAAY;IAAC;IAAmJ;IAAqC;IAAuD;IAA8D;IAA2F;IAA2G;IAAiG;IAAsH;IAAwG;IAA+H;IAAqF;IAA4I;IAA4J;IAAuK;IAAoG;IAAwI;IAAqJ;IAAsC;IAAwD;IAA+D;IAA4F;IAA4G;IAAkG;IAAuH;IAAyG;IAAgI;IAAsF;IAA6I;IAA6J;IAAwK;IAAqG;CAAwI;AACn+G,MAAMQ,iBAAiB,WAAW,GAAEN,IAAAA,kBAAQ,EAAC;IAC3CO,OAAO;QACLC,QAAQ;QACRC,SAAS;IACX;AACF,GAAG;IACDL,GAAG;QAAC;QAAyB;KAA8D;AAC7F;AACA,MAAMM,4BAA4B,WAAW,GAAEZ,IAAAA,uBAAa,EAAC,WAAW,IAAI,EAAE;IAAC;CAAwkB;AACvpB,mGAAmG;AACnG,MAAMa,iBAAiB,WAAW,GAAEX,IAAAA,kBAAQ,EAAC;IAC3CY,MAAM;QACJC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;IAClC;IACAC,OAAO;QACLD,QAAQ;YAAC;YAAW;SAAU;QAC9BE,SAAS;QACTC,QAAQ;IACV;IACAb,OAAO;QACLO,QAAQ;QACRO,QAAQ;IACV;AACF,GAAG;IACDjB,GAAG;QAAC;QAAqF;QAAmD;QAAuD;QAAsD;QAAqD;QAAsD;QAAuD;QAAqE;QAAwE;QAAoD;KAAgC;AAC9nB;AAIO,MAAMb,0BAA0B+B,CAAAA,QAAS;IAC9C,MAAM,EACJC,cAAa,EACd,GAAGD;IACJ,MAAME,oBAAoB3B;IAC1B,MAAM4B,aAAa1B;IACnBuB,MAAM9B,IAAI,CAACkC,SAAS,GAAGC,IAAAA,mBAAY,EAACrC,gBAAgBE,IAAI,EAAEgC,mBAAmBD,kBAAkB,WAAWE,WAAWxB,QAAQ,EAAEqB,MAAM9B,IAAI,CAACkC,SAAS;IACnJ,MAAME,qBAAqBvB;IAC3B,MAAMwB,cAAcvB;IACpBgB,MAAM5B,KAAK,CAACgC,SAAS,GAAGC,IAAAA,mBAAY,EAACrC,gBAAgBI,KAAK,EAAEkC,oBAAoBL,kBAAkB,WAAWM,YAAYtB,KAAK,EAAEe,MAAM5B,KAAK,CAACgC,SAAS;IACrJ,MAAMI,yBAAyBpB;IAC/BY,MAAM7B,SAAS,CAACiC,SAAS,GAAGC,IAAAA,mBAAY,EAACrC,gBAAgBG,SAAS,EAAEqC,wBAAwBR,MAAM7B,SAAS,CAACiC,SAAS;IACrH,MAAMK,cAAcpB;IACpB,IAAIW,MAAM3B,KAAK,EAAE;QACf2B,MAAM3B,KAAK,CAAC+B,SAAS,GAAGC,IAAAA,mBAAY,EAACrC,gBAAgBK,KAAK,EAAEoC,YAAYnB,IAAI,EAAEmB,WAAW,CAACR,cAAc,EAAED,MAAM3B,KAAK,CAAC+B,SAAS;IACjI,CAAC;AACH,GACA,0CAA0C"}
|
@@ -1,27 +1,26 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "RadioGroup", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>RadioGroup
|
5
8
|
});
|
6
|
-
|
7
|
-
const
|
8
|
-
const
|
9
|
-
const
|
10
|
-
const
|
11
|
-
const
|
12
|
-
const
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
const {
|
21
|
-
useRadioGroupStyles_unstable: useCustomStyles
|
22
|
-
} = react_shared_contexts_1.useCustomStyleHooks_unstable();
|
23
|
-
useCustomStyles(state);
|
24
|
-
return renderRadioGroup_1.renderRadioGroup_unstable(state, contextValues);
|
9
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
10
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
11
|
+
const _renderRadioGroup = require("./renderRadioGroup");
|
12
|
+
const _useRadioGroup = require("./useRadioGroup");
|
13
|
+
const _useRadioGroupStyles = require("./useRadioGroupStyles");
|
14
|
+
const _useRadioGroupContextValues = require("../../contexts/useRadioGroupContextValues");
|
15
|
+
const _reactSharedContexts = require("@fluentui/react-shared-contexts");
|
16
|
+
const RadioGroup = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
17
|
+
const state = (0, _useRadioGroup.useRadioGroup_unstable)(props, ref);
|
18
|
+
const contextValues = (0, _useRadioGroupContextValues.useRadioGroupContextValues)(state);
|
19
|
+
(0, _useRadioGroupStyles.useRadioGroupStyles_unstable)(state);
|
20
|
+
const { useRadioGroupStyles_unstable: useCustomStyles } = (0, _reactSharedContexts.useCustomStyleHooks_unstable)();
|
21
|
+
useCustomStyles(state);
|
22
|
+
return (0, _renderRadioGroup.renderRadioGroup_unstable)(state, contextValues);
|
25
23
|
});
|
26
|
-
|
24
|
+
RadioGroup.displayName = 'RadioGroup'; //# sourceMappingURL=RadioGroup.js.map
|
25
|
+
|
27
26
|
//# sourceMappingURL=RadioGroup.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../../lib/components/RadioGroup/RadioGroup.js"],"sourcesContent":["import * as React from 'react';\nimport { renderRadioGroup_unstable } from './renderRadioGroup';\nimport { useRadioGroup_unstable } from './useRadioGroup';\nimport { useRadioGroupStyles_unstable } from './useRadioGroupStyles';\nimport { useRadioGroupContextValues } from '../../contexts/useRadioGroupContextValues';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n/**\n * A RadioGroup component presents a set of options where only one option can be selected.\n */\nexport const RadioGroup = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useRadioGroup_unstable(props, ref);\n const contextValues = useRadioGroupContextValues(state);\n useRadioGroupStyles_unstable(state);\n const {\n useRadioGroupStyles_unstable: useCustomStyles\n } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n return renderRadioGroup_unstable(state, contextValues);\n});\nRadioGroup.displayName = 'RadioGroup';\n//# sourceMappingURL=RadioGroup.js.map"],"names":["RadioGroup","React","forwardRef","props","ref","state","useRadioGroup_unstable","contextValues","useRadioGroupContextValues","useRadioGroupStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderRadioGroup_unstable","displayName"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;kCACmB;+BACH;qCACM;4CACF;qCACE;AAItC,MAAMA,aAAa,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACtE,MAAMC,QAAQC,IAAAA,qCAAsB,EAACH,OAAOC;IAC5C,MAAMG,gBAAgBC,IAAAA,sDAA0B,EAACH;IACjDI,IAAAA,iDAA4B,EAACJ;IAC7B,MAAM,EACJI,8BAA8BC,gBAAe,EAC9C,GAAGC,IAAAA,iDAA4B;IAChCD,gBAAgBL;IAChB,OAAOO,IAAAA,2CAAyB,EAACP,OAAOE;AAC1C;AACAP,WAAWa,WAAW,GAAG,cACzB,sCAAsC"}
|
@@ -1,6 +1,9 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
5
4
|
});
|
5
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
6
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
7
|
+
//# sourceMappingURL=RadioGroup.types.js.map
|
8
|
+
|
6
9
|
//# sourceMappingURL=RadioGroup.types.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../../lib/components/RadioGroup/RadioGroup.types.js"],"sourcesContent":["import * as React from 'react';\n//# sourceMappingURL=RadioGroup.types.js.map"],"names":[],"mappings":";;;;;6DAAuB;CACvB,4CAA4C"}
|
@@ -1,12 +1,13 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
5
4
|
});
|
6
|
-
const
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
5
|
+
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
6
|
+
_exportStar(require("./RadioGroup"), exports);
|
7
|
+
_exportStar(require("./RadioGroup.types"), exports);
|
8
|
+
_exportStar(require("./renderRadioGroup"), exports);
|
9
|
+
_exportStar(require("./useRadioGroup"), exports);
|
10
|
+
_exportStar(require("./useRadioGroupStyles"), exports);
|
11
|
+
//# sourceMappingURL=index.js.map
|
12
|
+
|
12
13
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../../lib/components/RadioGroup/index.js"],"sourcesContent":["export * from './RadioGroup';\nexport * from './RadioGroup.types';\nexport * from './renderRadioGroup';\nexport * from './useRadioGroup';\nexport * from './useRadioGroupStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
|
@@ -1,25 +1,20 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "renderRadioGroup_unstable", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>renderRadioGroup_unstable
|
5
8
|
});
|
6
|
-
|
7
|
-
const
|
8
|
-
const
|
9
|
-
const
|
10
|
-
|
11
|
-
|
12
|
-
*/
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
} = react_utilities_1.getSlots(state);
|
18
|
-
return React.createElement(RadioGroupContext_1.RadioGroupContext.Provider, {
|
19
|
-
value: contextValues.radioGroup
|
20
|
-
}, React.createElement(slots.root, {
|
21
|
-
...slotProps.root
|
22
|
-
}));
|
23
|
-
};
|
24
|
-
exports.renderRadioGroup_unstable = renderRadioGroup_unstable;
|
9
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
10
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
11
|
+
const _reactUtilities = require("@fluentui/react-utilities");
|
12
|
+
const _radioGroupContext = require("../../contexts/RadioGroupContext");
|
13
|
+
const renderRadioGroup_unstable = (state, contextValues)=>{
|
14
|
+
const { slots , slotProps } = (0, _reactUtilities.getSlots)(state);
|
15
|
+
return /*#__PURE__*/ _react.createElement(_radioGroupContext.RadioGroupContext.Provider, {
|
16
|
+
value: contextValues.radioGroup
|
17
|
+
}, /*#__PURE__*/ _react.createElement(slots.root, slotProps.root));
|
18
|
+
}; //# sourceMappingURL=renderRadioGroup.js.map
|
19
|
+
|
25
20
|
//# sourceMappingURL=renderRadioGroup.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../../lib/components/RadioGroup/renderRadioGroup.js"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\n/**\n * Render the final JSX of RadioGroup\n */\nexport const renderRadioGroup_unstable = (state, contextValues) => {\n const {\n slots,\n slotProps\n } = getSlots(state);\n return /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {\n value: contextValues.radioGroup\n }, /*#__PURE__*/React.createElement(slots.root, slotProps.root));\n};\n//# sourceMappingURL=renderRadioGroup.js.map"],"names":["renderRadioGroup_unstable","state","contextValues","slots","slotProps","getSlots","React","createElement","RadioGroupContext","Provider","value","radioGroup","root"],"mappings":";;;;+BAMaA;;aAAAA;;;6DANU;gCACE;mCACS;AAI3B,MAAMA,4BAA4B,CAACC,OAAOC,gBAAkB;IACjE,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACJ;IACb,OAAO,WAAW,GAAEK,OAAMC,aAAa,CAACC,oCAAiB,CAACC,QAAQ,EAAE;QAClEC,OAAOR,cAAcS,UAAU;IACjC,GAAG,WAAW,GAAEL,OAAMC,aAAa,CAACJ,MAAMS,IAAI,EAAER,UAAUQ,IAAI;AAChE,GACA,4CAA4C"}
|
@@ -1,55 +1,45 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "useRadioGroup_unstable", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>useRadioGroup_unstable
|
5
8
|
});
|
6
|
-
|
7
|
-
const
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
root: {
|
39
|
-
ref,
|
40
|
-
role: 'radiogroup',
|
41
|
-
...react_utilities_1.getNativeElementProps('div', props, /*excludedPropNames:*/['onChange', 'name']),
|
42
|
-
onChange: react_utilities_1.useEventCallback(ev => {
|
43
|
-
if (onChange && react_utilities_1.isHTMLElement(ev.target, {
|
44
|
-
constructorName: 'HTMLInputElement'
|
45
|
-
}) && ev.target.type === 'radio') {
|
46
|
-
onChange(ev, {
|
47
|
-
value: ev.target.value
|
48
|
-
});
|
9
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
10
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
11
|
+
const _reactUtilities = require("@fluentui/react-utilities");
|
12
|
+
const useRadioGroup_unstable = (props, ref)=>{
|
13
|
+
const generatedName = (0, _reactUtilities.useId)('radiogroup-');
|
14
|
+
const { name =generatedName , value , defaultValue , disabled , layout ='vertical' , onChange , required } = props;
|
15
|
+
return {
|
16
|
+
layout,
|
17
|
+
name,
|
18
|
+
value,
|
19
|
+
defaultValue,
|
20
|
+
disabled,
|
21
|
+
required,
|
22
|
+
components: {
|
23
|
+
root: 'div'
|
24
|
+
},
|
25
|
+
root: {
|
26
|
+
ref,
|
27
|
+
role: 'radiogroup',
|
28
|
+
...(0, _reactUtilities.getNativeElementProps)('div', props, /*excludedPropNames:*/ [
|
29
|
+
'onChange',
|
30
|
+
'name'
|
31
|
+
]),
|
32
|
+
onChange: (0, _reactUtilities.useEventCallback)((ev)=>{
|
33
|
+
if (onChange && (0, _reactUtilities.isHTMLElement)(ev.target, {
|
34
|
+
constructorName: 'HTMLInputElement'
|
35
|
+
}) && ev.target.type === 'radio') {
|
36
|
+
onChange(ev, {
|
37
|
+
value: ev.target.value
|
38
|
+
});
|
39
|
+
}
|
40
|
+
})
|
49
41
|
}
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
};
|
54
|
-
exports.useRadioGroup_unstable = useRadioGroup_unstable;
|
42
|
+
};
|
43
|
+
}; //# sourceMappingURL=useRadioGroup.js.map
|
44
|
+
|
55
45
|
//# sourceMappingURL=useRadioGroup.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../../lib/components/RadioGroup/useRadioGroup.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isHTMLElement, useEventCallback, useId } from '@fluentui/react-utilities';\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, ref) => {\n const generatedName = useId('radiogroup-');\n const {\n name = generatedName,\n value,\n defaultValue,\n disabled,\n layout = 'vertical',\n onChange,\n required\n } = props;\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 && isHTMLElement(ev.target, {\n constructorName: 'HTMLInputElement'\n }) && ev.target.type === 'radio') {\n onChange(ev, {\n value: ev.target.value\n });\n }\n })\n }\n };\n};\n//# sourceMappingURL=useRadioGroup.js.map"],"names":["useRadioGroup_unstable","props","ref","generatedName","useId","name","value","defaultValue","disabled","layout","onChange","required","components","root","role","getNativeElementProps","useEventCallback","ev","isHTMLElement","target","constructorName","type"],"mappings":";;;;+BAWaA;;aAAAA;;;6DAXU;gCACuD;AAUvE,MAAMA,yBAAyB,CAACC,OAAOC,MAAQ;IACpD,MAAMC,gBAAgBC,IAAAA,qBAAK,EAAC;IAC5B,MAAM,EACJC,MAAOF,cAAa,EACpBG,MAAK,EACLC,aAAY,EACZC,SAAQ,EACRC,QAAS,WAAU,EACnBC,SAAQ,EACRC,SAAQ,EACT,GAAGV;IACJ,OAAO;QACLQ;QACAJ;QACAC;QACAC;QACAC;QACAG;QACAC,YAAY;YACVC,MAAM;QACR;QACAA,MAAM;YACJX;YACAY,MAAM;YACN,GAAGC,IAAAA,qCAAqB,EAAC,OAAOd,OAAO,oBAAoB,GAAE;gBAAC;gBAAY;aAAO,CAAC;YAClFS,UAAUM,IAAAA,gCAAgB,EAACC,CAAAA,KAAM;gBAC/B,IAAIP,YAAYQ,IAAAA,6BAAa,EAACD,GAAGE,MAAM,EAAE;oBACvCC,iBAAiB;gBACnB,MAAMH,GAAGE,MAAM,CAACE,IAAI,KAAK,SAAS;oBAChCX,SAASO,IAAI;wBACXX,OAAOW,GAAGE,MAAM,CAACb,KAAK;oBACxB;gBACF,CAAC;YACH;QACF;IACF;AACF,GACA,yCAAyC"}
|