@fluentui/react-radio 9.0.1 → 9.0.4
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +146 -1
- package/CHANGELOG.md +42 -2
- package/README.md +1 -1
- package/lib/components/Radio/useRadio.js +5 -1
- package/lib/components/Radio/useRadio.js.map +1 -1
- package/lib/components/Radio/useRadioStyles.js +32 -30
- package/lib/components/Radio/useRadioStyles.js.map +1 -1
- package/lib/contexts/RadioGroupContext.js +1 -0
- package/lib/contexts/RadioGroupContext.js.map +1 -1
- package/lib-commonjs/components/Radio/useRadio.js +6 -1
- package/lib-commonjs/components/Radio/useRadio.js.map +1 -1
- package/lib-commonjs/components/Radio/useRadioStyles.js +32 -30
- package/lib-commonjs/components/Radio/useRadioStyles.js.map +1 -1
- package/lib-commonjs/contexts/RadioGroupContext.js +1 -0
- package/lib-commonjs/contexts/RadioGroupContext.js.map +1 -1
- package/package.json +10 -9
package/CHANGELOG.json
CHANGED
@@ -2,7 +2,152 @@
|
|
2
2
|
"name": "@fluentui/react-radio",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
5
|
+
"date": "Wed, 03 Aug 2022 16:00:24 GMT",
|
6
|
+
"tag": "@fluentui/react-radio_v9.0.4",
|
7
|
+
"version": "9.0.4",
|
8
|
+
"comments": {
|
9
|
+
"none": [
|
10
|
+
{
|
11
|
+
"author": "lingfangao@hotmail.com",
|
12
|
+
"package": "@fluentui/react-radio",
|
13
|
+
"commit": "99cc385631d04a76ee10ebc143cb9fecd99640b6",
|
14
|
+
"comment": "chore: Add `prerelease` as disallowed changetype for 9.0.0 packages"
|
15
|
+
},
|
16
|
+
{
|
17
|
+
"author": "bernardo.sunderhus@gmail.com",
|
18
|
+
"package": "@fluentui/react-radio",
|
19
|
+
"commit": "d966ea3d9169f2e8d69f0d2a4daf86fe4ca328d6",
|
20
|
+
"comment": "disables eslint rule @fluentui/no-context-default-value for local component context"
|
21
|
+
}
|
22
|
+
],
|
23
|
+
"patch": [
|
24
|
+
{
|
25
|
+
"author": "lingfangao@hotmail.com",
|
26
|
+
"package": "@fluentui/react-radio",
|
27
|
+
"commit": "71590ea6aeab8ce24d8c8e50e0ee80ece81a4392",
|
28
|
+
"comment": "refactor: use `useFocusWithin` hook for :focus-within styles"
|
29
|
+
},
|
30
|
+
{
|
31
|
+
"author": "miroslav.stastny@microsoft.com",
|
32
|
+
"package": "@fluentui/react-radio",
|
33
|
+
"commit": "08563664778fd80284561d3c9d254307a0a32362",
|
34
|
+
"comment": "chore: Bump Griffel dependencies"
|
35
|
+
},
|
36
|
+
{
|
37
|
+
"author": "beachball",
|
38
|
+
"package": "@fluentui/react-radio",
|
39
|
+
"comment": "Bump @fluentui/react-label to v9.0.4",
|
40
|
+
"commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
|
41
|
+
},
|
42
|
+
{
|
43
|
+
"author": "beachball",
|
44
|
+
"package": "@fluentui/react-radio",
|
45
|
+
"comment": "Bump @fluentui/react-tabster to v9.1.0",
|
46
|
+
"commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
|
47
|
+
},
|
48
|
+
{
|
49
|
+
"author": "beachball",
|
50
|
+
"package": "@fluentui/react-radio",
|
51
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12",
|
52
|
+
"commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
|
53
|
+
}
|
54
|
+
]
|
55
|
+
}
|
56
|
+
},
|
57
|
+
{
|
58
|
+
"date": "Thu, 14 Jul 2022 21:21:03 GMT",
|
59
|
+
"tag": "@fluentui/react-radio_v9.0.3",
|
60
|
+
"version": "9.0.3",
|
61
|
+
"comments": {
|
62
|
+
"patch": [
|
63
|
+
{
|
64
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
65
|
+
"package": "@fluentui/react-radio",
|
66
|
+
"commit": "802bc4e3730a88b0fc61b5bf42ef7fc6b6543fe2",
|
67
|
+
"comment": "fix: Fixing bad version bump of @fluentui/react-utilities."
|
68
|
+
},
|
69
|
+
{
|
70
|
+
"author": "beachball",
|
71
|
+
"package": "@fluentui/react-radio",
|
72
|
+
"comment": "Bump @fluentui/react-context-selector to v9.0.2",
|
73
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
74
|
+
},
|
75
|
+
{
|
76
|
+
"author": "beachball",
|
77
|
+
"package": "@fluentui/react-radio",
|
78
|
+
"comment": "Bump @fluentui/react-label to v9.0.3",
|
79
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
80
|
+
},
|
81
|
+
{
|
82
|
+
"author": "beachball",
|
83
|
+
"package": "@fluentui/react-radio",
|
84
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.3",
|
85
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
86
|
+
},
|
87
|
+
{
|
88
|
+
"author": "beachball",
|
89
|
+
"package": "@fluentui/react-radio",
|
90
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.2",
|
91
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
92
|
+
}
|
93
|
+
]
|
94
|
+
}
|
95
|
+
},
|
96
|
+
{
|
97
|
+
"date": "Thu, 14 Jul 2022 17:06:21 GMT",
|
98
|
+
"tag": "@fluentui/react-radio_v9.0.2",
|
99
|
+
"version": "9.0.2",
|
100
|
+
"comments": {
|
101
|
+
"none": [
|
102
|
+
{
|
103
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
104
|
+
"package": "@fluentui/react-radio",
|
105
|
+
"commit": "422636fffd66758c1a6dd617063582d902b61927",
|
106
|
+
"comment": "docs: Replacing https://aka.ms/fluentui-storybook with https://react.fluentui.dev/ to point to the official documentation site."
|
107
|
+
}
|
108
|
+
],
|
109
|
+
"patch": [
|
110
|
+
{
|
111
|
+
"author": "ololubek@microsoft.com",
|
112
|
+
"package": "@fluentui/react-radio",
|
113
|
+
"commit": "63ab03fa7a9b3d02204147ea5356b8f78751df42",
|
114
|
+
"comment": "chore: Update @fluentui/react-icons dependency to v2.0.175"
|
115
|
+
},
|
116
|
+
{
|
117
|
+
"author": "beachball",
|
118
|
+
"package": "@fluentui/react-radio",
|
119
|
+
"comment": "Bump @fluentui/react-context-selector to v9.0.1",
|
120
|
+
"commit": "35237381e941c8935b1892c9217096cea3e5601f"
|
121
|
+
},
|
122
|
+
{
|
123
|
+
"author": "beachball",
|
124
|
+
"package": "@fluentui/react-radio",
|
125
|
+
"comment": "Bump @fluentui/react-label to v9.0.2",
|
126
|
+
"commit": "35237381e941c8935b1892c9217096cea3e5601f"
|
127
|
+
},
|
128
|
+
{
|
129
|
+
"author": "beachball",
|
130
|
+
"package": "@fluentui/react-radio",
|
131
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.2",
|
132
|
+
"commit": "35237381e941c8935b1892c9217096cea3e5601f"
|
133
|
+
},
|
134
|
+
{
|
135
|
+
"author": "beachball",
|
136
|
+
"package": "@fluentui/react-radio",
|
137
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.1-0",
|
138
|
+
"commit": "35237381e941c8935b1892c9217096cea3e5601f"
|
139
|
+
},
|
140
|
+
{
|
141
|
+
"author": "beachball",
|
142
|
+
"package": "@fluentui/react-radio",
|
143
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11",
|
144
|
+
"commit": "35237381e941c8935b1892c9217096cea3e5601f"
|
145
|
+
}
|
146
|
+
]
|
147
|
+
}
|
148
|
+
},
|
149
|
+
{
|
150
|
+
"date": "Tue, 28 Jun 2022 17:39:51 GMT",
|
6
151
|
"tag": "@fluentui/react-radio_v9.0.1",
|
7
152
|
"version": "9.0.1",
|
8
153
|
"comments": {
|
package/CHANGELOG.md
CHANGED
@@ -1,12 +1,52 @@
|
|
1
1
|
# Change Log - @fluentui/react-radio
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Wed, 03 Aug 2022 16:00:24 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.0.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.4)
|
8
|
+
|
9
|
+
Wed, 03 Aug 2022 16:00:24 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.3..@fluentui/react-radio_v9.0.4)
|
11
|
+
|
12
|
+
### Patches
|
13
|
+
|
14
|
+
- refactor: use `useFocusWithin` hook for :focus-within styles ([PR #24154](https://github.com/microsoft/fluentui/pull/24154) by lingfangao@hotmail.com)
|
15
|
+
- chore: Bump Griffel dependencies ([PR #24114](https://github.com/microsoft/fluentui/pull/24114) by miroslav.stastny@microsoft.com)
|
16
|
+
- Bump @fluentui/react-label to v9.0.4 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
|
17
|
+
- Bump @fluentui/react-tabster to v9.1.0 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
|
18
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
|
19
|
+
|
20
|
+
## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.3)
|
21
|
+
|
22
|
+
Thu, 14 Jul 2022 21:21:03 GMT
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.2..@fluentui/react-radio_v9.0.3)
|
24
|
+
|
25
|
+
### Patches
|
26
|
+
|
27
|
+
- fix: Fixing bad version bump of @fluentui/react-utilities. ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by Humberto.Morimoto@microsoft.com)
|
28
|
+
- Bump @fluentui/react-context-selector to v9.0.2 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
29
|
+
- Bump @fluentui/react-label to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
30
|
+
- Bump @fluentui/react-tabster to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
31
|
+
- Bump @fluentui/react-utilities to v9.0.2 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
32
|
+
|
33
|
+
## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.2)
|
34
|
+
|
35
|
+
Thu, 14 Jul 2022 17:06:21 GMT
|
36
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.1..@fluentui/react-radio_v9.0.2)
|
37
|
+
|
38
|
+
### Patches
|
39
|
+
|
40
|
+
- chore: Update @fluentui/react-icons dependency to v2.0.175 ([PR #23812](https://github.com/microsoft/fluentui/pull/23812) by ololubek@microsoft.com)
|
41
|
+
- Bump @fluentui/react-context-selector to v9.0.1 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
|
42
|
+
- Bump @fluentui/react-label to v9.0.2 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
|
43
|
+
- Bump @fluentui/react-tabster to v9.0.2 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
|
44
|
+
- Bump @fluentui/react-utilities to v9.0.1-0 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
|
45
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
|
46
|
+
|
7
47
|
## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.1)
|
8
48
|
|
9
|
-
Tue, 28 Jun 2022 17:
|
49
|
+
Tue, 28 Jun 2022 17:39:51 GMT
|
10
50
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0..@fluentui/react-radio_v9.0.1)
|
11
51
|
|
12
52
|
### Patches
|
package/README.md
CHANGED
@@ -36,7 +36,7 @@ import { Radio, RadioGroup } from '@fluentui/react-radio';
|
|
36
36
|
</RadioGroup>
|
37
37
|
```
|
38
38
|
|
39
|
-
See [Fluent UI Storybook](https://
|
39
|
+
See [Fluent UI Storybook](https://react.fluentui.dev/) for more detailed usage examples.
|
40
40
|
|
41
41
|
Alternatively, run Storybook locally with:
|
42
42
|
|
@@ -4,6 +4,7 @@ import { Label } from '@fluentui/react-label';
|
|
4
4
|
import { getPartitionedNativeProps, resolveShorthand, useId, useMergedEventCallbacks } from '@fluentui/react-utilities';
|
5
5
|
import { RadioGroupContext } from '../../contexts/RadioGroupContext';
|
6
6
|
import { useContextSelector } from '@fluentui/react-context-selector';
|
7
|
+
import { useFocusWithin } from '@fluentui/react-tabster';
|
7
8
|
/**
|
8
9
|
* Create the state required to render Radio.
|
9
10
|
*
|
@@ -37,7 +38,10 @@ export const useRadio_unstable = (props, ref) => {
|
|
37
38
|
});
|
38
39
|
const root = resolveShorthand(props.root, {
|
39
40
|
required: true,
|
40
|
-
defaultProps:
|
41
|
+
defaultProps: {
|
42
|
+
ref: useFocusWithin(),
|
43
|
+
...nativeProps.root
|
44
|
+
}
|
41
45
|
});
|
42
46
|
const input = resolveShorthand(props.input, {
|
43
47
|
required: true,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/Radio/useRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,YAAT,QAA6B,uBAA7B;AACA,SAAS,KAAT,QAAsB,uBAAtB;AACA,SAAS,yBAAT,EAAoC,gBAApC,EAAsD,KAAtD,EAA6D,uBAA7D,QAA4F,2BAA5F;AACA,SAAS,iBAAT,QAAkC,kCAAlC;AACA,SAAS,kBAAT,QAAmC,kCAAnC;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;EACnG,MAAM,SAAS,GAAG,kBAAkB,CAAC,iBAAD,EAAoB,GAAG,IAAI,GAAG,CAAC,IAA/B,CAApC;EACA,MAAM,KAAK,GAAG,kBAAkB,CAAC,iBAAD,EAAoB,GAAG,IAAI,GAAG,CAAC,KAA/B,CAAhC;EACA,MAAM,YAAY,GAAG,kBAAkB,CAAC,iBAAD,EAAoB,GAAG,IAAI,GAAG,CAAC,YAA/B,CAAvC;EACA,MAAM,aAAa,GAAG,kBAAkB,CAAC,iBAAD,EAAoB,GAAG,IAAI,GAAG,CAAC,QAA/B,CAAxC;EACA,MAAM,MAAM,GAAG,kBAAkB,CAAC,iBAAD,EAAoB,GAAG,IAAI,GAAG,CAAC,MAA/B,CAAjC;EACA,MAAM,aAAa,GAAG,kBAAkB,CAAC,iBAAD,EAAoB,GAAG,IAAI,GAAG,CAAC,QAA/B,CAAxC;EAEA,MAAM;IACJ,IAAI,GAAG,SADH;IAEJ,OAAO,GAAG,KAAK,KAAK,SAAV,GAAsB,KAAK,KAAK,KAAK,CAAC,KAAtC,GAA8C,SAFpD;IAGJ,cAAc,GAAG,YAAY,KAAK,SAAjB,GAA6B,YAAY,KAAK,KAAK,CAAC,KAApD,GAA4D,SAHzE;IAIJ,aAAa,GAAG,MAAM,KAAK,oBAAX,GAAkC,OAAlC,GAA4C,OAJxD;IAKJ,QAAQ,GAAG,aALP;IAMJ,QAAQ,GAAG,aANP;IAOJ;EAPI,IAQF,KARJ;EAUA,MAAM,WAAW,GAAG,yBAAyB,CAAC;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,OAFwB;IAG5C,iBAAiB,EAAE,CAAC,SAAD,EAAY,gBAAZ,EAA8B,UAA9B;EAHyB,CAAD,CAA7C;EAMA,MAAM,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;IACxC,QAAQ,EAAE,IAD8B;IAExC,YAAY,EAAE,WAAW,CAAC;
|
1
|
+
{"version":3,"sources":["components/Radio/useRadio.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, resolveShorthand, useId, useMergedEventCallbacks } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { 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 = useContextSelector(RadioGroupContext, ctx => ctx.name);\n const value = useContextSelector(RadioGroupContext, ctx => ctx.value);\n const defaultValue = useContextSelector(RadioGroupContext, ctx => ctx.defaultValue);\n const disabledGroup = useContextSelector(RadioGroupContext, ctx => ctx.disabled);\n const layout = useContextSelector(RadioGroupContext, ctx => ctx.layout);\n const requiredGroup = useContextSelector(RadioGroupContext, ctx => ctx.required);\n\n const {\n name = nameGroup,\n checked = value !== undefined ? value === props.value : undefined,\n defaultChecked = defaultValue !== undefined ? defaultValue === props.value : undefined,\n labelPosition = layout === '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 = useMergedEventCallbacks(input.onChange, ev => onChange?.(ev, { value: ev.currentTarget.value }));\n\n const label = resolveShorthand(props.label, {\n defaultProps: {\n htmlFor: input.id,\n disabled,\n },\n });\n\n const indicator = resolveShorthand(props.indicator, {\n required: true,\n defaultProps: {\n 'aria-hidden': true,\n children: <CircleFilled />,\n },\n });\n\n return {\n labelPosition,\n components: {\n root: 'span',\n input: 'input',\n label: Label,\n indicator: 'div',\n },\n root,\n input,\n label,\n indicator,\n };\n};\n"],"sourceRoot":"../src/"}
|
@@ -28,38 +28,40 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
28
28
|
},
|
29
29
|
"focusIndicator": {
|
30
30
|
"Brovlpu": "ftqa4ok",
|
31
|
-
"
|
32
|
-
"
|
33
|
-
"
|
34
|
-
"
|
35
|
-
"
|
36
|
-
"
|
37
|
-
"
|
38
|
-
"
|
39
|
-
"
|
40
|
-
"
|
41
|
-
"
|
42
|
-
"
|
43
|
-
"
|
44
|
-
"
|
45
|
-
"
|
46
|
-
"
|
47
|
-
"
|
48
|
-
"
|
49
|
-
"
|
50
|
-
"
|
51
|
-
"
|
52
|
-
"
|
53
|
-
"
|
54
|
-
"
|
55
|
-
"
|
56
|
-
"
|
57
|
-
"
|
58
|
-
"
|
31
|
+
"B486eqv": "f2hkw1w",
|
32
|
+
"Bgobo1x": "fo4ocm0",
|
33
|
+
"Jo8lrp": ["f1uvj27t", "fecisja"],
|
34
|
+
"Bpke50p": "f1rzrqo7",
|
35
|
+
"aty7ik": ["fecisja", "f1uvj27t"],
|
36
|
+
"hm6prv": "f1g7kvsv",
|
37
|
+
"Bjex43u": "fzrlbma",
|
38
|
+
"sr5bkg": "fj7d4uc",
|
39
|
+
"F8og5": "f1l6kybf",
|
40
|
+
"Bvc59ag": "f1p3v545",
|
41
|
+
"od54ob": ["f18ooxnm", "for8r4m"],
|
42
|
+
"Bi136el": "f1dek44a",
|
43
|
+
"B3l1rvm": ["for8r4m", "f18ooxnm"],
|
44
|
+
"e0acac": "fo0rwiw",
|
45
|
+
"vp2hgr": ["f1y3sdd5", "f1xpp2ec"],
|
46
|
+
"h2c9ne": "f10zrybh",
|
47
|
+
"Bvfpqjq": ["f1xpp2ec", "f1y3sdd5"],
|
48
|
+
"Bd8parj": ["ft333ue", "f16uznis"],
|
49
|
+
"c00pmh": ["f16uznis", "ft333ue"],
|
50
|
+
"Bvs3b7t": ["f1sbsurx", "f1d2cokh"],
|
51
|
+
"Bnhloe": ["f1d2cokh", "f1sbsurx"],
|
52
|
+
"Hpy7w9": "fxx05f1",
|
53
|
+
"Bmdll0j": ["f1ph57ev", "fiz0wg0"],
|
54
|
+
"w8a68g": "f1tu679n",
|
55
|
+
"w65o9e": ["fiz0wg0", "f1ph57ev"],
|
56
|
+
"Bnvy6ax": "fi7ex6y",
|
57
|
+
"y8tio2": "f17j406i",
|
58
|
+
"Fgxkz8": ["fbegtek", "f21ipxl"],
|
59
|
+
"Bpakkmj": ["f21ipxl", "fbegtek"]
|
59
60
|
}
|
60
61
|
}, {
|
61
|
-
"d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".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;}", "
|
62
|
-
"f": [".ftqa4ok:focus{outline-style:none;}"]
|
62
|
+
"d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".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;}", ".fui-FluentProvider .fo4ocm0.fui-focus-within:focus-within{border-top-color:transparent;}", ".fui-FluentProvider .f1uvj27t.fui-focus-within:focus-within{border-right-color:transparent;}", ".fui-FluentProvider .fecisja.fui-focus-within:focus-within{border-left-color:transparent;}", ".fui-FluentProvider .f1rzrqo7.fui-focus-within:focus-within{border-bottom-color:transparent;}", ".fui-FluentProvider .f1g7kvsv.fui-focus-within:focus-within::after{content:\"\";}", ".fui-FluentProvider .fzrlbma.fui-focus-within:focus-within::after{position:absolute;}", ".fui-FluentProvider .fj7d4uc.fui-focus-within:focus-within::after{pointer-events:none;}", ".fui-FluentProvider .f1l6kybf.fui-focus-within:focus-within::after{z-index:1;}", ".fui-FluentProvider .f1p3v545.fui-focus-within:focus-within::after{border-top-style:solid;}", ".fui-FluentProvider .f18ooxnm.fui-focus-within:focus-within::after{border-right-style:solid;}", ".fui-FluentProvider .for8r4m.fui-focus-within:focus-within::after{border-left-style:solid;}", ".fui-FluentProvider .f1dek44a.fui-focus-within:focus-within::after{border-bottom-style:solid;}", ".fui-FluentProvider .fo0rwiw.fui-focus-within:focus-within::after{border-top-width:2px;}", ".fui-FluentProvider .f1y3sdd5.fui-focus-within:focus-within::after{border-right-width:2px;}", ".fui-FluentProvider .f1xpp2ec.fui-focus-within:focus-within::after{border-left-width:2px;}", ".fui-FluentProvider .f10zrybh.fui-focus-within:focus-within::after{border-bottom-width:2px;}", ".fui-FluentProvider .ft333ue.fui-focus-within:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .f16uznis.fui-focus-within:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .f1sbsurx.fui-focus-within:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .f1d2cokh.fui-focus-within:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .fxx05f1.fui-focus-within:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .f1ph57ev.fui-focus-within:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .fiz0wg0.fui-focus-within:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .f1tu679n.fui-focus-within:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .fi7ex6y.fui-focus-within:focus-within::after{top:-2px;}", ".fui-FluentProvider .f17j406i.fui-focus-within:focus-within::after{bottom:-2px;}", ".fui-FluentProvider .fbegtek.fui-focus-within:focus-within::after{left:-2px;}", ".fui-FluentProvider .f21ipxl.fui-focus-within:focus-within::after{right:-2px;}"],
|
63
|
+
"f": [".ftqa4ok:focus{outline-style:none;}"],
|
64
|
+
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
63
65
|
});
|
64
66
|
|
65
67
|
const useInputStyles = /*#__PURE__*/__styles({
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":"AAAA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAIA,OAAO,MAAM,eAAe,GAA+B;EACzD,IAAI,EAAE,WADmD;EAEzD,SAAS,EAAE,sBAF8C;EAGzD,KAAK,EAAE,kBAHkD;EAIzD,KAAK,EAAE;AAJkD,CAApD,C,CAOP;;AACA,MAAM,aAAa,GAAG,MAAtB;AAEA;;AAEG;;AACH,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;AAAA,EAAtB;;AAeA,MAAM,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;;AAsFA,MAAM,kBAAkB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA3B;;AAoBA,MAAM,cAAc,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;AAoBA;;AAEG;;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAsB;EAC3D,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,eAAe,CAAC,IADiB,EAEjC,UAAU,CAAC,IAFsB,EAGjC,UAAU,CAAC,cAHsB,EAIjC,KAAK,CAAC,aAAN,KAAwB,OAAxB,IAAmC,UAAU,CAAC,QAJb,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;EAQA,MAAM,WAAW,GAAG,cAAc,EAAlC;EACA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,eAAe,CAAC,KAAjB,EAAwB,WAAW,CAAC,IAApC,EAA0C,KAAK,CAAC,KAAN,CAAY,SAAtD,CAApC;EAEA,MAAM,eAAe,GAAG,kBAAkB,EAA1C;EACA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CAAC,eAAe,CAAC,SAAjB,EAA4B,eAAe,CAAC,IAA5C,EAAkD,KAAK,CAAC,SAAN,CAAgB,SAAlE,CAAxC;EAEA,MAAM,WAAW,GAAG,cAAc,EAAlC;;EACA,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAClC,eAAe,CAAC,KADkB,EAElC,WAAW,CAAC,IAFsB,EAGlC,WAAW,CAAC,KAAK,CAAC,aAAP,CAHuB,EAIlC,KAAK,CAAC,KAAN,CAAY,SAJsB,CAApC;EAMD;AACF,CAzBM","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 ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\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 },\n\n // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n opacity: '0',\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked)': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n // Colors for the disabled state\n ':disabled': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n width: indicatorSize,\n height: indicatorSize,\n fontSize: '12px',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n\n ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n },\n\n after: {\n marginLeft: tokens.spacingHorizontalM,\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 marginTop: tokens.spacingVerticalM,\n textAlign: 'center',\n },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState) => {\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n radioClassNames.root,\n rootStyles.base,\n rootStyles.focusIndicator,\n state.labelPosition === 'below' && rootStyles.vertical,\n state.root.className,\n );\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(radioClassNames.input, inputStyles.base, state.input.className);\n\n const indicatorStyles = useIndicatorStyles();\n state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n radioClassNames.label,\n labelStyles.base,\n labelStyles[state.labelPosition],\n state.label.className,\n );\n }\n};\n"],"sourceRoot":"../src/"}
|
1
|
+
{"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":"AAAA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAIA,OAAO,MAAM,eAAe,GAA+B;EACzD,IAAI,EAAE,WADmD;EAEzD,SAAS,EAAE,sBAF8C;EAGzD,KAAK,EAAE,kBAHkD;EAIzD,KAAK,EAAE;AAJkD,CAApD,C,CAOP;;AACA,MAAM,aAAa,GAAG,MAAtB;AAEA;;AAEG;;AACH,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAtB;;AAeA,MAAM,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;;AAsFA,MAAM,kBAAkB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA3B;;AAoBA,MAAM,cAAc,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;AAoBA;;AAEG;;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAsB;EAC3D,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,eAAe,CAAC,IADiB,EAEjC,UAAU,CAAC,IAFsB,EAGjC,UAAU,CAAC,cAHsB,EAIjC,KAAK,CAAC,aAAN,KAAwB,OAAxB,IAAmC,UAAU,CAAC,QAJb,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;EAQA,MAAM,WAAW,GAAG,cAAc,EAAlC;EACA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,eAAe,CAAC,KAAjB,EAAwB,WAAW,CAAC,IAApC,EAA0C,KAAK,CAAC,KAAN,CAAY,SAAtD,CAApC;EAEA,MAAM,eAAe,GAAG,kBAAkB,EAA1C;EACA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CAAC,eAAe,CAAC,SAAjB,EAA4B,eAAe,CAAC,IAA5C,EAAkD,KAAK,CAAC,SAAN,CAAgB,SAAlE,CAAxC;EAEA,MAAM,WAAW,GAAG,cAAc,EAAlC;;EACA,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAClC,eAAe,CAAC,KADkB,EAElC,WAAW,CAAC,IAFsB,EAGlC,WAAW,CAAC,KAAK,CAAC,aAAP,CAHuB,EAIlC,KAAK,CAAC,KAAN,CAAY,SAJsB,CAApC;EAMD;AACF,CAzBM","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 ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\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 },\n\n // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n opacity: '0',\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked)': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n // Colors for the disabled state\n ':disabled': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n width: indicatorSize,\n height: indicatorSize,\n fontSize: '12px',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n\n ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n },\n\n after: {\n marginLeft: tokens.spacingHorizontalM,\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 marginTop: tokens.spacingVerticalM,\n textAlign: 'center',\n },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState) => {\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n radioClassNames.root,\n rootStyles.base,\n rootStyles.focusIndicator,\n state.labelPosition === 'below' && rootStyles.vertical,\n state.root.className,\n );\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(radioClassNames.input, inputStyles.base, state.input.className);\n\n const indicatorStyles = useIndicatorStyles();\n state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n radioClassNames.label,\n labelStyles.base,\n labelStyles[state.labelPosition],\n state.label.className,\n );\n }\n};\n"],"sourceRoot":"../src/"}
|
@@ -2,6 +2,7 @@ import { createContext, useContextSelector } from '@fluentui/react-context-selec
|
|
2
2
|
/**
|
3
3
|
* RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.
|
4
4
|
*/
|
5
|
+
// eslint-disable-next-line @fluentui/no-context-default-value
|
5
6
|
|
6
7
|
export const RadioGroupContext = /*#__PURE__*/createContext({});
|
7
8
|
export const RadioGroupProvider = RadioGroupContext.Provider;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["contexts/RadioGroupContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,EAAwB,kBAAxB,QAAmE,kCAAnE;AAIA;;AAEG;;
|
1
|
+
{"version":3,"sources":["contexts/RadioGroupContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,EAAwB,kBAAxB,QAAmE,kCAAnE;AAIA;;AAEG;AACH;;AACA,OAAO,MAAM,iBAAiB,gBAAoC,aAAa,CAAC,EAAD,CAAxE;AAEP,OAAO,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,QAA7C;AAEP,OAAO,MAAM,6BAA6B,GAAO,QAAJ,IAC3C,kBAAkB,CAAC,iBAAD,EAAoB,QAApB,CADb","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 */\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const RadioGroupContext: Context<RadioGroupContextValue> = createContext({});\n\nexport const RadioGroupProvider = RadioGroupContext.Provider;\n\nexport const useRadioGroupContext_unstable = <T>(selector: ContextSelector<RadioGroupContextValue, T>): T =>\n useContextSelector(RadioGroupContext, selector);\n"],"sourceRoot":"../src/"}
|
@@ -16,6 +16,8 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
16
16
|
const RadioGroupContext_1 = /*#__PURE__*/require("../../contexts/RadioGroupContext");
|
17
17
|
|
18
18
|
const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
|
19
|
+
|
20
|
+
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
19
21
|
/**
|
20
22
|
* Create the state required to render Radio.
|
21
23
|
*
|
@@ -50,7 +52,10 @@ const useRadio_unstable = (props, ref) => {
|
|
50
52
|
});
|
51
53
|
const root = react_utilities_1.resolveShorthand(props.root, {
|
52
54
|
required: true,
|
53
|
-
defaultProps:
|
55
|
+
defaultProps: {
|
56
|
+
ref: react_tabster_1.useFocusWithin(),
|
57
|
+
...nativeProps.root
|
58
|
+
}
|
54
59
|
});
|
55
60
|
const input = react_utilities_1.resolveShorthand(props.input, {
|
56
61
|
required: true,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/Radio/useRadio.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;EACnG,MAAM,SAAS,GAAG,wBAAA,CAAA,kBAAA,CAAmB,mBAAA,CAAA,iBAAnB,EAAsC,GAAG,IAAI,GAAG,CAAC,IAAjD,CAAlB;EACA,MAAM,KAAK,GAAG,wBAAA,CAAA,kBAAA,CAAmB,mBAAA,CAAA,iBAAnB,EAAsC,GAAG,IAAI,GAAG,CAAC,KAAjD,CAAd;EACA,MAAM,YAAY,GAAG,wBAAA,CAAA,kBAAA,CAAmB,mBAAA,CAAA,iBAAnB,EAAsC,GAAG,IAAI,GAAG,CAAC,YAAjD,CAArB;EACA,MAAM,aAAa,GAAG,wBAAA,CAAA,kBAAA,CAAmB,mBAAA,CAAA,iBAAnB,EAAsC,GAAG,IAAI,GAAG,CAAC,QAAjD,CAAtB;EACA,MAAM,MAAM,GAAG,wBAAA,CAAA,kBAAA,CAAmB,mBAAA,CAAA,iBAAnB,EAAsC,GAAG,IAAI,GAAG,CAAC,MAAjD,CAAf;EACA,MAAM,aAAa,GAAG,wBAAA,CAAA,kBAAA,CAAmB,mBAAA,CAAA,iBAAnB,EAAsC,GAAG,IAAI,GAAG,CAAC,QAAjD,CAAtB;EAEA,MAAM;IACJ,IAAI,GAAG,SADH;IAEJ,OAAO,GAAG,KAAK,KAAK,SAAV,GAAsB,KAAK,KAAK,KAAK,CAAC,KAAtC,GAA8C,SAFpD;IAGJ,cAAc,GAAG,YAAY,KAAK,SAAjB,GAA6B,YAAY,KAAK,KAAK,CAAC,KAApD,GAA4D,SAHzE;IAIJ,aAAa,GAAG,MAAM,KAAK,oBAAX,GAAkC,OAAlC,GAA4C,OAJxD;IAKJ,QAAQ,GAAG,aALP;IAMJ,QAAQ,GAAG,aANP;IAOJ;EAPI,IAQF,KARJ;EAUA,MAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,OAFwB;IAG5C,iBAAiB,EAAE,CAAC,SAAD,EAAY,gBAAZ,EAA8B,UAA9B;EAHyB,CAA1B,CAApB;EAMA,MAAM,IAAI,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;IACxC,QAAQ,EAAE,IAD8B;IAExC,YAAY,EAAE,WAAW,CAAC;
|
1
|
+
{"version":3,"sources":["components/Radio/useRadio.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, resolveShorthand, useId, useMergedEventCallbacks } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { 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 = useContextSelector(RadioGroupContext, ctx => ctx.name);\n const value = useContextSelector(RadioGroupContext, ctx => ctx.value);\n const defaultValue = useContextSelector(RadioGroupContext, ctx => ctx.defaultValue);\n const disabledGroup = useContextSelector(RadioGroupContext, ctx => ctx.disabled);\n const layout = useContextSelector(RadioGroupContext, ctx => ctx.layout);\n const requiredGroup = useContextSelector(RadioGroupContext, ctx => ctx.required);\n\n const {\n name = nameGroup,\n checked = value !== undefined ? value === props.value : undefined,\n defaultChecked = defaultValue !== undefined ? defaultValue === props.value : undefined,\n labelPosition = layout === '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 = useMergedEventCallbacks(input.onChange, ev => onChange?.(ev, { value: ev.currentTarget.value }));\n\n const label = resolveShorthand(props.label, {\n defaultProps: {\n htmlFor: input.id,\n disabled,\n },\n });\n\n const indicator = resolveShorthand(props.indicator, {\n required: true,\n defaultProps: {\n 'aria-hidden': true,\n children: <CircleFilled />,\n },\n });\n\n return {\n labelPosition,\n components: {\n root: 'span',\n input: 'input',\n label: Label,\n indicator: 'div',\n },\n root,\n input,\n label,\n indicator,\n };\n};\n"],"sourceRoot":"../src/"}
|
@@ -38,38 +38,40 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
38
38
|
},
|
39
39
|
"focusIndicator": {
|
40
40
|
"Brovlpu": "ftqa4ok",
|
41
|
-
"
|
42
|
-
"
|
43
|
-
"
|
44
|
-
"
|
45
|
-
"
|
46
|
-
"
|
47
|
-
"
|
48
|
-
"
|
49
|
-
"
|
50
|
-
"
|
51
|
-
"
|
52
|
-
"
|
53
|
-
"
|
54
|
-
"
|
55
|
-
"
|
56
|
-
"
|
57
|
-
"
|
58
|
-
"
|
59
|
-
"
|
60
|
-
"
|
61
|
-
"
|
62
|
-
"
|
63
|
-
"
|
64
|
-
"
|
65
|
-
"
|
66
|
-
"
|
67
|
-
"
|
68
|
-
"
|
41
|
+
"B486eqv": "f2hkw1w",
|
42
|
+
"Bgobo1x": "fo4ocm0",
|
43
|
+
"Jo8lrp": ["f1uvj27t", "fecisja"],
|
44
|
+
"Bpke50p": "f1rzrqo7",
|
45
|
+
"aty7ik": ["fecisja", "f1uvj27t"],
|
46
|
+
"hm6prv": "f1g7kvsv",
|
47
|
+
"Bjex43u": "fzrlbma",
|
48
|
+
"sr5bkg": "fj7d4uc",
|
49
|
+
"F8og5": "f1l6kybf",
|
50
|
+
"Bvc59ag": "f1p3v545",
|
51
|
+
"od54ob": ["f18ooxnm", "for8r4m"],
|
52
|
+
"Bi136el": "f1dek44a",
|
53
|
+
"B3l1rvm": ["for8r4m", "f18ooxnm"],
|
54
|
+
"e0acac": "fo0rwiw",
|
55
|
+
"vp2hgr": ["f1y3sdd5", "f1xpp2ec"],
|
56
|
+
"h2c9ne": "f10zrybh",
|
57
|
+
"Bvfpqjq": ["f1xpp2ec", "f1y3sdd5"],
|
58
|
+
"Bd8parj": ["ft333ue", "f16uznis"],
|
59
|
+
"c00pmh": ["f16uznis", "ft333ue"],
|
60
|
+
"Bvs3b7t": ["f1sbsurx", "f1d2cokh"],
|
61
|
+
"Bnhloe": ["f1d2cokh", "f1sbsurx"],
|
62
|
+
"Hpy7w9": "fxx05f1",
|
63
|
+
"Bmdll0j": ["f1ph57ev", "fiz0wg0"],
|
64
|
+
"w8a68g": "f1tu679n",
|
65
|
+
"w65o9e": ["fiz0wg0", "f1ph57ev"],
|
66
|
+
"Bnvy6ax": "fi7ex6y",
|
67
|
+
"y8tio2": "f17j406i",
|
68
|
+
"Fgxkz8": ["fbegtek", "f21ipxl"],
|
69
|
+
"Bpakkmj": ["f21ipxl", "fbegtek"]
|
69
70
|
}
|
70
71
|
}, {
|
71
|
-
"d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".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;}", "
|
72
|
-
"f": [".ftqa4ok:focus{outline-style:none;}"]
|
72
|
+
"d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".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;}", ".fui-FluentProvider .fo4ocm0.fui-focus-within:focus-within{border-top-color:transparent;}", ".fui-FluentProvider .f1uvj27t.fui-focus-within:focus-within{border-right-color:transparent;}", ".fui-FluentProvider .fecisja.fui-focus-within:focus-within{border-left-color:transparent;}", ".fui-FluentProvider .f1rzrqo7.fui-focus-within:focus-within{border-bottom-color:transparent;}", ".fui-FluentProvider .f1g7kvsv.fui-focus-within:focus-within::after{content:\"\";}", ".fui-FluentProvider .fzrlbma.fui-focus-within:focus-within::after{position:absolute;}", ".fui-FluentProvider .fj7d4uc.fui-focus-within:focus-within::after{pointer-events:none;}", ".fui-FluentProvider .f1l6kybf.fui-focus-within:focus-within::after{z-index:1;}", ".fui-FluentProvider .f1p3v545.fui-focus-within:focus-within::after{border-top-style:solid;}", ".fui-FluentProvider .f18ooxnm.fui-focus-within:focus-within::after{border-right-style:solid;}", ".fui-FluentProvider .for8r4m.fui-focus-within:focus-within::after{border-left-style:solid;}", ".fui-FluentProvider .f1dek44a.fui-focus-within:focus-within::after{border-bottom-style:solid;}", ".fui-FluentProvider .fo0rwiw.fui-focus-within:focus-within::after{border-top-width:2px;}", ".fui-FluentProvider .f1y3sdd5.fui-focus-within:focus-within::after{border-right-width:2px;}", ".fui-FluentProvider .f1xpp2ec.fui-focus-within:focus-within::after{border-left-width:2px;}", ".fui-FluentProvider .f10zrybh.fui-focus-within:focus-within::after{border-bottom-width:2px;}", ".fui-FluentProvider .ft333ue.fui-focus-within:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .f16uznis.fui-focus-within:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .f1sbsurx.fui-focus-within:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .f1d2cokh.fui-focus-within:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .fxx05f1.fui-focus-within:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .f1ph57ev.fui-focus-within:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .fiz0wg0.fui-focus-within:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .f1tu679n.fui-focus-within:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .fi7ex6y.fui-focus-within:focus-within::after{top:-2px;}", ".fui-FluentProvider .f17j406i.fui-focus-within:focus-within::after{bottom:-2px;}", ".fui-FluentProvider .fbegtek.fui-focus-within:focus-within::after{left:-2px;}", ".fui-FluentProvider .f21ipxl.fui-focus-within:focus-within::after{right:-2px;}"],
|
73
|
+
"f": [".ftqa4ok:focus{outline-style:none;}"],
|
74
|
+
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
73
75
|
});
|
74
76
|
|
75
77
|
const useInputStyles = /*#__PURE__*/react_1.__styles({
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\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 ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\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 },\n\n // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n opacity: '0',\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked)': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n // Colors for the disabled state\n ':disabled': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n width: indicatorSize,\n height: indicatorSize,\n fontSize: '12px',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n\n ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n },\n\n after: {\n marginLeft: tokens.spacingHorizontalM,\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 marginTop: tokens.spacingVerticalM,\n textAlign: 'center',\n },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState) => {\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n radioClassNames.root,\n rootStyles.base,\n rootStyles.focusIndicator,\n state.labelPosition === 'below' && rootStyles.vertical,\n state.root.className,\n );\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(radioClassNames.input, inputStyles.base, state.input.className);\n\n const indicatorStyles = useIndicatorStyles();\n state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n radioClassNames.label,\n labelStyles.base,\n labelStyles[state.labelPosition],\n state.label.className,\n );\n }\n};\n"],"sourceRoot":"../src/"}
|
1
|
+
{"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\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 ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\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 },\n\n // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n opacity: '0',\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked)': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n // Colors for the disabled state\n ':disabled': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n width: indicatorSize,\n height: indicatorSize,\n fontSize: '12px',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n\n ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n },\n\n after: {\n marginLeft: tokens.spacingHorizontalM,\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 marginTop: tokens.spacingVerticalM,\n textAlign: 'center',\n },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState) => {\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n radioClassNames.root,\n rootStyles.base,\n rootStyles.focusIndicator,\n state.labelPosition === 'below' && rootStyles.vertical,\n state.root.className,\n );\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(radioClassNames.input, inputStyles.base, state.input.className);\n\n const indicatorStyles = useIndicatorStyles();\n state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n radioClassNames.label,\n labelStyles.base,\n labelStyles[state.labelPosition],\n state.label.className,\n );\n }\n};\n"],"sourceRoot":"../src/"}
|
@@ -9,6 +9,7 @@ const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-s
|
|
9
9
|
/**
|
10
10
|
* RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.
|
11
11
|
*/
|
12
|
+
// eslint-disable-next-line @fluentui/no-context-default-value
|
12
13
|
|
13
14
|
|
14
15
|
exports.RadioGroupContext = /*#__PURE__*/react_context_selector_1.createContext({});
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["contexts/RadioGroupContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAIA;;AAEG;;;
|
1
|
+
{"version":3,"sources":["contexts/RadioGroupContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAIA;;AAEG;AACH;;;AACa,OAAA,CAAA,iBAAA,gBAAqD,wBAAA,CAAA,aAAA,CAAc,EAAd,CAArD;AAEA,OAAA,CAAA,kBAAA,GAAqB,OAAA,CAAA,iBAAA,CAAkB,QAAvC;;AAEN,MAAM,6BAA6B,GAAO,QAAJ,IAC3C,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,iBAAnB,EAAsC,QAAtC,CADK;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","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 */\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const RadioGroupContext: Context<RadioGroupContextValue> = createContext({});\n\nexport const RadioGroupProvider = RadioGroupContext.Provider;\n\nexport const useRadioGroupContext_unstable = <T>(selector: ContextSelector<RadioGroupContextValue, T>): T =>\n useContextSelector(RadioGroupContext, selector);\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-radio",
|
3
|
-
"version": "9.0.
|
3
|
+
"version": "9.0.4",
|
4
4
|
"description": "Fluent UI Radio component",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -28,16 +28,16 @@
|
|
28
28
|
"devDependencies": {
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
30
30
|
"@fluentui/react-conformance": "*",
|
31
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.12"
|
32
32
|
},
|
33
33
|
"dependencies": {
|
34
|
-
"@fluentui/react-context-selector": "^9.0.
|
35
|
-
"@fluentui/react-icons": "^2.0.
|
36
|
-
"@fluentui/react-label": "^9.0.
|
37
|
-
"@fluentui/react-tabster": "^9.0
|
34
|
+
"@fluentui/react-context-selector": "^9.0.2",
|
35
|
+
"@fluentui/react-icons": "^2.0.175",
|
36
|
+
"@fluentui/react-label": "^9.0.4",
|
37
|
+
"@fluentui/react-tabster": "^9.1.0",
|
38
38
|
"@fluentui/react-theme": "^9.0.0",
|
39
|
-
"@fluentui/react-utilities": "^9.0.
|
40
|
-
"@griffel/react": "^1.2.
|
39
|
+
"@fluentui/react-utilities": "^9.0.2",
|
40
|
+
"@griffel/react": "^1.2.3",
|
41
41
|
"tslib": "^2.1.0"
|
42
42
|
},
|
43
43
|
"peerDependencies": {
|
@@ -49,7 +49,8 @@
|
|
49
49
|
},
|
50
50
|
"beachball": {
|
51
51
|
"disallowedChangeTypes": [
|
52
|
-
"major"
|
52
|
+
"major",
|
53
|
+
"prerelease"
|
53
54
|
]
|
54
55
|
},
|
55
56
|
"exports": {
|