@fluentui/react-radio 9.0.14 → 9.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +101 -1
- package/CHANGELOG.md +29 -2
- package/lib/components/Radio/Radio.js +0 -1
- package/lib/components/Radio/Radio.js.map +1 -1
- package/lib/components/Radio/renderRadio.js +8 -5
- package/lib/components/Radio/renderRadio.js.map +1 -1
- package/lib/components/Radio/useRadio.js +0 -1
- package/lib/components/Radio/useRadio.js.map +1 -1
- package/lib/components/Radio/useRadioStyles.js +26 -35
- package/lib/components/Radio/useRadioStyles.js.map +1 -1
- package/lib/components/RadioGroup/RadioGroup.js +0 -1
- package/lib/components/RadioGroup/RadioGroup.js.map +1 -1
- package/lib/components/RadioGroup/renderRadioGroup.js +2 -2
- package/lib/components/RadioGroup/renderRadioGroup.js.map +1 -1
- package/lib/components/RadioGroup/useRadioGroup.js +1 -4
- package/lib/components/RadioGroup/useRadioGroup.js.map +1 -1
- package/lib/components/RadioGroup/useRadioGroupStyles.js +6 -9
- package/lib/components/RadioGroup/useRadioGroupStyles.js.map +1 -1
- package/lib/components/RadioGroupField/RadioGroupField.js.map +1 -1
- package/lib/contexts/RadioGroupContext.js +0 -1
- package/lib/contexts/RadioGroupContext.js.map +1 -1
- package/lib/contexts/useRadioGroupContextValues.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Radio.js +0 -2
- package/lib-commonjs/Radio.js.map +1 -1
- package/lib-commonjs/RadioGroup.js +0 -2
- package/lib-commonjs/RadioGroup.js.map +1 -1
- package/lib-commonjs/RadioGroupField.js +0 -2
- package/lib-commonjs/RadioGroupField.js.map +1 -1
- package/lib-commonjs/components/Radio/Radio.js +0 -6
- package/lib-commonjs/components/Radio/Radio.js.map +1 -1
- package/lib-commonjs/components/Radio/Radio.types.js.map +1 -1
- package/lib-commonjs/components/Radio/index.js +0 -6
- package/lib-commonjs/components/Radio/index.js.map +1 -1
- package/lib-commonjs/components/Radio/renderRadio.js +8 -9
- package/lib-commonjs/components/Radio/renderRadio.js.map +1 -1
- package/lib-commonjs/components/Radio/useRadio.js +0 -9
- package/lib-commonjs/components/Radio/useRadio.js.map +1 -1
- package/lib-commonjs/components/Radio/useRadioStyles.js +26 -40
- package/lib-commonjs/components/Radio/useRadioStyles.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/RadioGroup.js +0 -7
- package/lib-commonjs/components/RadioGroup/RadioGroup.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/RadioGroup.types.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/index.js +0 -6
- package/lib-commonjs/components/RadioGroup/index.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/renderRadioGroup.js +2 -7
- package/lib-commonjs/components/RadioGroup/renderRadioGroup.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/useRadioGroup.js +1 -7
- package/lib-commonjs/components/RadioGroup/useRadioGroup.js.map +1 -1
- package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.js +6 -12
- package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.js.map +1 -1
- package/lib-commonjs/components/RadioGroupField/RadioGroupField.js +0 -4
- package/lib-commonjs/components/RadioGroupField/RadioGroupField.js.map +1 -1
- package/lib-commonjs/components/RadioGroupField/index.js +0 -2
- package/lib-commonjs/components/RadioGroupField/index.js.map +1 -1
- package/lib-commonjs/contexts/RadioGroupContext.js +0 -5
- package/lib-commonjs/contexts/RadioGroupContext.js.map +1 -1
- package/lib-commonjs/contexts/index.js +0 -3
- package/lib-commonjs/contexts/index.js.map +1 -1
- package/lib-commonjs/contexts/useRadioGroupContextValues.js +0 -2
- package/lib-commonjs/contexts/useRadioGroupContextValues.js.map +1 -1
- package/lib-commonjs/index.js +0 -8
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +9 -9
package/CHANGELOG.json
CHANGED
@@ -2,7 +2,107 @@
|
|
2
2
|
"name": "@fluentui/react-radio",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
5
|
+
"date": "Wed, 04 Jan 2023 01:35:46 GMT",
|
6
|
+
"tag": "@fluentui/react-radio_v9.0.16",
|
7
|
+
"version": "9.0.16",
|
8
|
+
"comments": {
|
9
|
+
"none": [
|
10
|
+
{
|
11
|
+
"author": "martinhochel@microsoft.com",
|
12
|
+
"package": "@fluentui/react-radio",
|
13
|
+
"commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105",
|
14
|
+
"comment": "chore(scripts): move index.ts to to follow sub-folder domain packaging"
|
15
|
+
}
|
16
|
+
],
|
17
|
+
"patch": [
|
18
|
+
{
|
19
|
+
"author": "olfedias@microsoft.com",
|
20
|
+
"package": "@fluentui/react-radio",
|
21
|
+
"commit": "2c38f1e4ae07b2b60df596efe11015a68f166dbf",
|
22
|
+
"comment": "chore: Update Griffel to latest version"
|
23
|
+
},
|
24
|
+
{
|
25
|
+
"author": "beachball",
|
26
|
+
"package": "@fluentui/react-radio",
|
27
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.4",
|
28
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
29
|
+
},
|
30
|
+
{
|
31
|
+
"author": "beachball",
|
32
|
+
"package": "@fluentui/react-radio",
|
33
|
+
"comment": "Bump @fluentui/react-field to v9.0.0-alpha.13",
|
34
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
35
|
+
},
|
36
|
+
{
|
37
|
+
"author": "beachball",
|
38
|
+
"package": "@fluentui/react-radio",
|
39
|
+
"comment": "Bump @fluentui/react-label to v9.0.15",
|
40
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
41
|
+
},
|
42
|
+
{
|
43
|
+
"author": "beachball",
|
44
|
+
"package": "@fluentui/react-radio",
|
45
|
+
"comment": "Bump @fluentui/react-tabster to v9.3.5",
|
46
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
47
|
+
},
|
48
|
+
{
|
49
|
+
"author": "beachball",
|
50
|
+
"package": "@fluentui/react-radio",
|
51
|
+
"comment": "Bump @fluentui/react-utilities to v9.3.1",
|
52
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
53
|
+
},
|
54
|
+
{
|
55
|
+
"author": "beachball",
|
56
|
+
"package": "@fluentui/react-radio",
|
57
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19",
|
58
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
59
|
+
}
|
60
|
+
]
|
61
|
+
}
|
62
|
+
},
|
63
|
+
{
|
64
|
+
"date": "Wed, 21 Dec 2022 10:20:30 GMT",
|
65
|
+
"tag": "@fluentui/react-radio_v9.0.15",
|
66
|
+
"version": "9.0.15",
|
67
|
+
"comments": {
|
68
|
+
"none": [
|
69
|
+
{
|
70
|
+
"author": "behowell@microsoft.com",
|
71
|
+
"package": "@fluentui/react-radio",
|
72
|
+
"commit": "68505ab8eb1b05f45ab09c21b9d66c177d1e50f5",
|
73
|
+
"comment": "chore: Add bundle size tests for Fields"
|
74
|
+
}
|
75
|
+
],
|
76
|
+
"patch": [
|
77
|
+
{
|
78
|
+
"author": "beachball",
|
79
|
+
"package": "@fluentui/react-radio",
|
80
|
+
"comment": "Bump @fluentui/react-field to v9.0.0-alpha.12",
|
81
|
+
"commit": "66bf89f634cad4a275e957d7a2214c7e73ff8c2e"
|
82
|
+
},
|
83
|
+
{
|
84
|
+
"author": "beachball",
|
85
|
+
"package": "@fluentui/react-radio",
|
86
|
+
"comment": "Bump @fluentui/react-label to v9.0.14",
|
87
|
+
"commit": "66bf89f634cad4a275e957d7a2214c7e73ff8c2e"
|
88
|
+
},
|
89
|
+
{
|
90
|
+
"author": "beachball",
|
91
|
+
"package": "@fluentui/react-radio",
|
92
|
+
"comment": "Bump @fluentui/react-tabster to v9.3.4",
|
93
|
+
"commit": "66bf89f634cad4a275e957d7a2214c7e73ff8c2e"
|
94
|
+
},
|
95
|
+
{
|
96
|
+
"author": "beachball",
|
97
|
+
"package": "@fluentui/react-radio",
|
98
|
+
"comment": "Bump @fluentui/react-theme to v9.1.5",
|
99
|
+
"commit": "66bf89f634cad4a275e957d7a2214c7e73ff8c2e"
|
100
|
+
}
|
101
|
+
]
|
102
|
+
}
|
103
|
+
},
|
104
|
+
{
|
105
|
+
"date": "Tue, 20 Dec 2022 14:59:28 GMT",
|
6
106
|
"tag": "@fluentui/react-radio_v9.0.14",
|
7
107
|
"version": "9.0.14",
|
8
108
|
"comments": {
|
package/CHANGELOG.md
CHANGED
@@ -1,12 +1,39 @@
|
|
1
1
|
# Change Log - @fluentui/react-radio
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Wed, 04 Jan 2023 01:35:46 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.0.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.16)
|
8
|
+
|
9
|
+
Wed, 04 Jan 2023 01:35:46 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.15..@fluentui/react-radio_v9.0.16)
|
11
|
+
|
12
|
+
### Patches
|
13
|
+
|
14
|
+
- chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
|
15
|
+
- Bump @fluentui/react-context-selector to v9.1.4 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
16
|
+
- Bump @fluentui/react-field to v9.0.0-alpha.13 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
17
|
+
- Bump @fluentui/react-label to v9.0.15 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
18
|
+
- Bump @fluentui/react-tabster to v9.3.5 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
19
|
+
- Bump @fluentui/react-utilities to v9.3.1 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
20
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
21
|
+
|
22
|
+
## [9.0.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.15)
|
23
|
+
|
24
|
+
Wed, 21 Dec 2022 10:20:30 GMT
|
25
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.14..@fluentui/react-radio_v9.0.15)
|
26
|
+
|
27
|
+
### Patches
|
28
|
+
|
29
|
+
- Bump @fluentui/react-field to v9.0.0-alpha.12 ([commit](https://github.com/microsoft/fluentui/commit/66bf89f634cad4a275e957d7a2214c7e73ff8c2e) by beachball)
|
30
|
+
- Bump @fluentui/react-label to v9.0.14 ([commit](https://github.com/microsoft/fluentui/commit/66bf89f634cad4a275e957d7a2214c7e73ff8c2e) by beachball)
|
31
|
+
- Bump @fluentui/react-tabster to v9.3.4 ([commit](https://github.com/microsoft/fluentui/commit/66bf89f634cad4a275e957d7a2214c7e73ff8c2e) by beachball)
|
32
|
+
- Bump @fluentui/react-theme to v9.1.5 ([commit](https://github.com/microsoft/fluentui/commit/66bf89f634cad4a275e957d7a2214c7e73ff8c2e) by beachball)
|
33
|
+
|
7
34
|
## [9.0.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.14)
|
8
35
|
|
9
|
-
Tue, 20 Dec 2022 14:
|
36
|
+
Tue, 20 Dec 2022 14:59:28 GMT
|
10
37
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.13..@fluentui/react-radio_v9.0.14)
|
11
38
|
|
12
39
|
### Patches
|
@@ -5,7 +5,6 @@ import { useRadioStyles_unstable } from './useRadioStyles';
|
|
5
5
|
/**
|
6
6
|
* Radio component is a wrapper for a radio button with a label.
|
7
7
|
*/
|
8
|
-
|
9
8
|
export const Radio = /*#__PURE__*/React.forwardRef((props, ref) => {
|
10
9
|
const state = useRadio_unstable(props, ref);
|
11
10
|
useRadioStyles_unstable(state);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,iBAAiB,QAAQ,YAAY;AAC9C,SAASC,uBAAuB,QAAQ,kBAAkB;AAE1D;;;AAGA,OAAO,MAAMC,KAAK,gBAAoCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGN,iBAAiB,CAACI,KAAK,EAAEC,GAAG,CAAC;EAE3CJ,uBAAuB,CAACK,KAAK,CAAC;EAC9B,OAAOP,oBAAoB,CAACO,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFJ,KAAK,CAACK,WAAW,GAAG,OAAO","names":["React","renderRadio_unstable","useRadio_unstable","useRadioStyles_unstable","Radio","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-radio/src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { RadioProps } from './Radio.types';\nimport { renderRadio_unstable } from './renderRadio';\nimport { useRadio_unstable } from './useRadio';\nimport { useRadioStyles_unstable } from './useRadioStyles';\n\n/**\n * Radio component is a wrapper for a radio button with a label.\n */\nexport const Radio: ForwardRefComponent<RadioProps> = React.forwardRef((props, ref) => {\n const state = useRadio_unstable(props, ref);\n\n useRadioStyles_unstable(state);\n return renderRadio_unstable(state);\n});\n\nRadio.displayName = 'Radio';\n"]}
|
@@ -3,16 +3,19 @@ import { getSlots } from '@fluentui/react-utilities';
|
|
3
3
|
/**
|
4
4
|
* Render the final JSX of Radio
|
5
5
|
*/
|
6
|
-
|
7
6
|
export const renderRadio_unstable = state => {
|
8
7
|
const {
|
9
8
|
slots,
|
10
9
|
slotProps
|
11
10
|
} = getSlots(state);
|
12
|
-
return /*#__PURE__*/React.createElement(slots.root, {
|
13
|
-
|
14
|
-
}
|
15
|
-
|
11
|
+
return /*#__PURE__*/React.createElement(slots.root, {
|
12
|
+
...slotProps.root
|
13
|
+
}, /*#__PURE__*/React.createElement(slots.input, {
|
14
|
+
...slotProps.input
|
15
|
+
}), /*#__PURE__*/React.createElement(slots.indicator, {
|
16
|
+
...slotProps.indicator
|
17
|
+
}), slots.label && /*#__PURE__*/React.createElement(slots.label, {
|
18
|
+
...slotProps.label
|
16
19
|
}));
|
17
20
|
};
|
18
21
|
//# sourceMappingURL=renderRadio.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,oBAAoB,GAAIC,KAAiB,IAAI;EACxD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAaE,KAAK,CAAC;EAExD,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,gBAC5BN,oBAACI,KAAK,CAACG,KAAK;IAAA,GAAKF,SAAS,CAACE;EAAK,EAAI,eACpCP,oBAACI,KAAK,CAACI,SAAS;IAAA,GAAKH,SAAS,CAACG;EAAS,EAAI,EAC3CJ,KAAK,CAACK,KAAK,iBAAIT,oBAACI,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,CACzC;AAEjB,CAAC","names":["React","getSlots","renderRadio_unstable","state","slots","slotProps","root","input","indicator","label"],"sourceRoot":"../src/","sources":["packages/react-components/react-radio/src/components/Radio/renderRadio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { RadioSlots, RadioState } from './Radio.types';\n\n/**\n * Render the final JSX of Radio\n */\nexport const renderRadio_unstable = (state: RadioState) => {\n const { slots, slotProps } = getSlots<RadioSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.input {...slotProps.input} />\n <slots.indicator {...slotProps.indicator} />\n {slots.label && <slots.label {...slotProps.label} />}\n </slots.root>\n );\n};\n"]}
|
@@ -13,7 +13,6 @@ import { useFocusWithin } from '@fluentui/react-tabster';
|
|
13
13
|
* @param props - props from this instance of Radio
|
14
14
|
* @param ref - reference to `<input>` element of Radio
|
15
15
|
*/
|
16
|
-
|
17
16
|
export const useRadio_unstable = (props, ref) => {
|
18
17
|
const nameGroup = useRadioGroupContext_unstable(ctx => ctx.name);
|
19
18
|
const value = useRadioGroupContext_unstable(ctx => ctx.value);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"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","names":["React","CircleFilled","Label","getPartitionedNativeProps","mergeCallbacks","resolveShorthand","useId","useRadioGroupContext_unstable","useFocusWithin","useRadio_unstable","props","ref","nameGroup","ctx","name","value","defaultValue","disabledGroup","disabled","layout","requiredGroup","required","checked","undefined","defaultChecked","labelPosition","onChange","nativeProps","primarySlotTagName","excludedPropNames","root","defaultProps","input","type","id","primary","ev","currentTarget","label","htmlFor","indicator","children","components"],"sourceRoot":"../src/","sources":["packages/react-components/react-radio/src/components/Radio/useRadio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { useRadioGroupContext_unstable } from '../../contexts/RadioGroupContext';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport type { RadioProps, RadioState } from './Radio.types';\n\n/**\n * Create the state required to render Radio.\n *\n * The returned state can be modified with hooks such as useRadioStyles_unstable,\n * before being passed to renderRadio_unstable.\n *\n * @param props - props from this instance of Radio\n * @param ref - reference to `<input>` element of Radio\n */\nexport const useRadio_unstable = (props: RadioProps, ref: React.Ref<HTMLInputElement>): RadioState => {\n const nameGroup = useRadioGroupContext_unstable(ctx => ctx.name);\n const value = useRadioGroupContext_unstable(ctx => ctx.value);\n const defaultValue = useRadioGroupContext_unstable(ctx => ctx.defaultValue);\n const disabledGroup = useRadioGroupContext_unstable(ctx => ctx.disabled);\n const layout = useRadioGroupContext_unstable(ctx => ctx.layout);\n const requiredGroup = useRadioGroupContext_unstable(ctx => ctx.required);\n\n const {\n name = nameGroup,\n checked = value !== undefined ? value === props.value : undefined,\n defaultChecked = defaultValue !== undefined ? defaultValue === props.value : undefined,\n labelPosition = layout === 'horizontal-stacked' ? 'below' : 'after',\n disabled = disabledGroup,\n required = requiredGroup,\n onChange,\n } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n });\n\n const root = resolveShorthand(props.root, {\n required: true,\n defaultProps: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\n });\n\n const input = resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n ref,\n type: 'radio',\n id: useId('radio-', nativeProps.primary.id),\n name,\n checked,\n defaultChecked,\n disabled,\n required,\n ...nativeProps.primary,\n },\n });\n\n input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { value: ev.currentTarget.value }));\n\n const label = resolveShorthand(props.label, {\n defaultProps: {\n htmlFor: input.id,\n disabled,\n },\n });\n\n const indicator = resolveShorthand(props.indicator, {\n required: true,\n defaultProps: {\n 'aria-hidden': true,\n children: <CircleFilled />,\n },\n });\n\n return {\n labelPosition,\n components: {\n root: 'span',\n input: 'input',\n label: Label,\n indicator: 'div',\n },\n root,\n input,\n label,\n indicator,\n };\n};\n"]}
|
@@ -6,60 +6,52 @@ export const radioClassNames = {
|
|
6
6
|
indicator: 'fui-Radio__indicator',
|
7
7
|
input: 'fui-Radio__input',
|
8
8
|
label: 'fui-Radio__label'
|
9
|
-
};
|
10
|
-
|
9
|
+
};
|
10
|
+
// The indicator size is used by the indicator and label styles
|
11
11
|
const indicatorSize = '16px';
|
12
|
-
|
13
12
|
const 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;}"]);
|
14
|
-
|
15
13
|
const useRootStyles = /*#__PURE__*/__styles({
|
16
|
-
|
17
|
-
|
18
|
-
|
14
|
+
vertical: {
|
15
|
+
Beiy3e4: "f1vx9l62",
|
16
|
+
Bt984gj: "f122n59"
|
19
17
|
}
|
20
18
|
}, {
|
21
|
-
|
19
|
+
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;}"]
|
22
20
|
});
|
23
|
-
|
24
21
|
const 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);}"]);
|
25
|
-
|
26
22
|
const useInputStyles = /*#__PURE__*/__styles({
|
27
|
-
|
28
|
-
|
29
|
-
|
23
|
+
below: {
|
24
|
+
a9b677: "fly5x3f",
|
25
|
+
Bqenvij: "f1je6zif"
|
30
26
|
}
|
31
27
|
}, {
|
32
|
-
|
28
|
+
d: [".fly5x3f{width:100%;}", ".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}"]
|
33
29
|
});
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
30
|
+
const 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;}"]);
|
31
|
+
// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
|
38
32
|
const useLabelStyles = /*#__PURE__*/__styles({
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
33
|
+
base: {
|
34
|
+
qb2dma: "f7nlbp4",
|
35
|
+
z8tnut: "f1kwiid1",
|
36
|
+
z189sj: ["f1vdfbxk", "f1f5gg8d"],
|
37
|
+
Byoj8tv: "f5b47ha",
|
38
|
+
uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
|
45
39
|
},
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
40
|
+
after: {
|
41
|
+
uwmqm3: ["fruq291", "f7x41pl"],
|
42
|
+
B6of3ja: "fjzwpt6",
|
43
|
+
jrapky: "fh6j2fo"
|
50
44
|
},
|
51
|
-
|
52
|
-
|
53
|
-
|
45
|
+
below: {
|
46
|
+
z8tnut: "f1ywm7hm",
|
47
|
+
fsow6f: "f17mccla"
|
54
48
|
}
|
55
49
|
}, {
|
56
|
-
|
50
|
+
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;}"]
|
57
51
|
});
|
58
52
|
/**
|
59
53
|
* Apply styling to the Radio slots based on the state
|
60
54
|
*/
|
61
|
-
|
62
|
-
|
63
55
|
export const useRadioStyles_unstable = state => {
|
64
56
|
const {
|
65
57
|
labelPosition
|
@@ -73,7 +65,6 @@ export const useRadioStyles_unstable = state => {
|
|
73
65
|
const indicatorBaseClassName = useIndicatorBaseClassName();
|
74
66
|
state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);
|
75
67
|
const labelStyles = useLabelStyles();
|
76
|
-
|
77
68
|
if (state.label) {
|
78
69
|
state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
|
79
70
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,SAASA,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,kCAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAItF,OAAO,MAAMC,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,gBAAG,6uEAI3B;AAEF,MAAMC,aAAa,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAKpB;AAEF,MAAMC,qBAAqB,gBAAG,y7GAsF5B;AAEF,MAAMC,cAAc,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAKrB;AAEF,MAAMC,yBAAyB,gBAAG,ymBAiBhC;AAEF;AACA,MAAMC,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAmBrB;AAEF;;;AAGA,OAAO,MAAMC,uBAAuB,GAAIC,KAAiB,IAAI;EAC3D,MAAM;IAAEC;EAAa,CAAE,GAAGD,KAAK;EAE/B,MAAME,iBAAiB,GAAGT,oBAAoB,EAAE;EAChD,MAAMU,UAAU,GAAGT,aAAa,EAAE;EAClCM,KAAK,CAACZ,IAAI,CAACgB,SAAS,GAAGnB,YAAY,CACjCE,eAAe,CAACC,IAAI,EACpBc,iBAAiB,EACjBD,aAAa,KAAK,OAAO,IAAIE,UAAU,CAACE,QAAQ,EAChDL,KAAK,CAACZ,IAAI,CAACgB,SAAS,CACrB;EAED,MAAME,kBAAkB,GAAGX,qBAAqB,EAAE;EAClD,MAAMY,WAAW,GAAGX,cAAc,EAAE;EACpCI,KAAK,CAACV,KAAK,CAACc,SAAS,GAAGnB,YAAY,CAClCE,eAAe,CAACG,KAAK,EACrBgB,kBAAkB,EAClBL,aAAa,KAAK,OAAO,IAAIM,WAAW,CAACC,KAAK,EAC9CR,KAAK,CAACV,KAAK,CAACc,SAAS,CACtB;EAED,MAAMK,sBAAsB,GAAGZ,yBAAyB,EAAE;EAC1DG,KAAK,CAACX,SAAS,CAACe,SAAS,GAAGnB,YAAY,CACtCE,eAAe,CAACE,SAAS,EACzBoB,sBAAsB,EACtBT,KAAK,CAACX,SAAS,CAACe,SAAS,CAC1B;EAED,MAAMM,WAAW,GAAGZ,cAAc,EAAE;EACpC,IAAIE,KAAK,CAACT,KAAK,EAAE;IACfS,KAAK,CAACT,KAAK,CAACa,SAAS,GAAGnB,YAAY,CAClCE,eAAe,CAACI,KAAK,EACrBmB,WAAW,CAACC,IAAI,EAChBD,WAAW,CAACT,aAAa,CAAC,EAC1BD,KAAK,CAACT,KAAK,CAACa,SAAS,CACtB;;AAEL,CAAC","names":["createFocusOutlineStyle","tokens","mergeClasses","shorthands","radioClassNames","root","indicator","input","label","indicatorSize","useRootBaseClassName","useRootStyles","useInputBaseClassName","useInputStyles","useIndicatorBaseClassName","useLabelStyles","useRadioStyles_unstable","state","labelPosition","rootBaseClassName","rootStyles","className","vertical","inputBaseClassName","inputStyles","below","indicatorBaseClassName","labelStyles","base"],"sourceRoot":"../src/","sources":["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"]}
|
@@ -6,7 +6,6 @@ import { useRadioGroupContextValues } from '../../contexts/useRadioGroupContextV
|
|
6
6
|
/**
|
7
7
|
* A RadioGroup component presents a set of options where only one option can be selected.
|
8
8
|
*/
|
9
|
-
|
10
9
|
export const RadioGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
|
11
10
|
const state = useRadioGroup_unstable(props, ref);
|
12
11
|
const contextValues = useRadioGroupContextValues(state);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,SAASC,yBAAyB,QAAQ,oBAAoB;AAC9D,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,4BAA4B,QAAQ,uBAAuB;AACpE,SAASC,0BAA0B,QAAQ,2CAA2C;AAEtF;;;AAGA,OAAO,MAAMC,UAAU,gBAAyCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGP,sBAAsB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAChD,MAAME,aAAa,GAAGN,0BAA0B,CAACK,KAAK,CAAC;EAEvDN,4BAA4B,CAACM,KAAK,CAAC;EACnC,OAAOR,yBAAyB,CAACQ,KAAK,EAAEC,aAAa,CAAC;AACxD,CAAC,CAAC;AAEFL,UAAU,CAACM,WAAW,GAAG,YAAY","names":["React","renderRadioGroup_unstable","useRadioGroup_unstable","useRadioGroupStyles_unstable","useRadioGroupContextValues","RadioGroup","forwardRef","props","ref","state","contextValues","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-radio/src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { RadioGroupProps } from './RadioGroup.types';\nimport { renderRadioGroup_unstable } from './renderRadioGroup';\nimport { useRadioGroup_unstable } from './useRadioGroup';\nimport { useRadioGroupStyles_unstable } from './useRadioGroupStyles';\nimport { useRadioGroupContextValues } from '../../contexts/useRadioGroupContextValues';\n\n/**\n * A RadioGroup component presents a set of options where only one option can be selected.\n */\nexport const RadioGroup: ForwardRefComponent<RadioGroupProps> = React.forwardRef((props, ref) => {\n const state = useRadioGroup_unstable(props, ref);\n const contextValues = useRadioGroupContextValues(state);\n\n useRadioGroupStyles_unstable(state);\n return renderRadioGroup_unstable(state, contextValues);\n});\n\nRadioGroup.displayName = 'RadioGroup';\n"]}
|
@@ -4,7 +4,6 @@ import { RadioGroupContext } from '../../contexts/RadioGroupContext';
|
|
4
4
|
/**
|
5
5
|
* Render the final JSX of RadioGroup
|
6
6
|
*/
|
7
|
-
|
8
7
|
export const renderRadioGroup_unstable = (state, contextValues) => {
|
9
8
|
const {
|
10
9
|
slots,
|
@@ -12,7 +11,8 @@ export const renderRadioGroup_unstable = (state, contextValues) => {
|
|
12
11
|
} = getSlots(state);
|
13
12
|
return /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
|
14
13
|
value: contextValues.radioGroup
|
15
|
-
}, /*#__PURE__*/React.createElement(slots.root, {
|
14
|
+
}, /*#__PURE__*/React.createElement(slots.root, {
|
15
|
+
...slotProps.root
|
16
16
|
}));
|
17
17
|
};
|
18
18
|
//# sourceMappingURL=renderRadioGroup.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,iBAAiB,QAAQ,kCAAkC;AAGpE;;;AAGA,OAAO,MAAMC,yBAAyB,GAAG,CAACC,KAAsB,EAAEC,aAAsC,KAAI;EAC1G,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAkBG,KAAK,CAAC;EAE7D,oBACEJ,oBAACE,iBAAiB,CAACM,QAAQ;IAACC,KAAK,EAAEJ,aAAa,CAACK;EAAU,gBACzDV,oBAACM,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,EAAI,CACP;AAEjC,CAAC","names":["React","getSlots","RadioGroupContext","renderRadioGroup_unstable","state","contextValues","slots","slotProps","Provider","value","radioGroup","root"],"sourceRoot":"../src/","sources":["packages/react-components/react-radio/src/components/RadioGroup/renderRadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\nimport { RadioGroupContextValues, RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\n\n/**\n * Render the final JSX of RadioGroup\n */\nexport const renderRadioGroup_unstable = (state: RadioGroupState, contextValues: RadioGroupContextValues) => {\n const { slots, slotProps } = getSlots<RadioGroupSlots>(state);\n\n return (\n <RadioGroupContext.Provider value={contextValues.radioGroup}>\n <slots.root {...slotProps.root} />\n </RadioGroupContext.Provider>\n );\n};\n"]}
|
@@ -8,7 +8,6 @@ import { getNativeElementProps, useEventCallback, useId } from '@fluentui/react-
|
|
8
8
|
* @param props - props from this instance of RadioGroup
|
9
9
|
* @param ref - reference to root HTMLElement of RadioGroup
|
10
10
|
*/
|
11
|
-
|
12
11
|
export const useRadioGroup_unstable = (props, ref) => {
|
13
12
|
const generatedName = useId('radiogroup-');
|
14
13
|
const {
|
@@ -33,9 +32,7 @@ export const useRadioGroup_unstable = (props, ref) => {
|
|
33
32
|
root: {
|
34
33
|
ref,
|
35
34
|
role: 'radiogroup',
|
36
|
-
...getNativeElementProps('div', props,
|
37
|
-
/*excludedPropNames:*/
|
38
|
-
['onChange', 'name']),
|
35
|
+
...getNativeElementProps('div', props, /*excludedPropNames:*/['onChange', 'name']),
|
39
36
|
onChange: useEventCallback(ev => {
|
40
37
|
if (onChange && ev.target instanceof HTMLInputElement && ev.target.type === 'radio') {
|
41
38
|
onChange(ev, {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,2BAA2B;AAG1F;;;;;;;;;AASA,OAAO,MAAMC,sBAAsB,GAAG,CAACC,KAAsB,EAAEC,GAA8B,KAAqB;EAChH,MAAMC,aAAa,GAAGJ,KAAK,CAAC,aAAa,CAAC;EAE1C,MAAM;IAAEK,IAAI,GAAGD,aAAa;IAAEE,KAAK;IAAEC,YAAY;IAAEC,QAAQ;IAAEC,MAAM,GAAG,UAAU;IAAEC,QAAQ;IAAEC;EAAQ,CAAE,GAAGT,KAAK;EAE9G,OAAO;IACLO,MAAM;IACNJ,IAAI;IACJC,KAAK;IACLC,YAAY;IACZC,QAAQ;IACRG,QAAQ;IACRC,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IACDA,IAAI,EAAE;MACJV,GAAG;MACHW,IAAI,EAAE,YAAY;MAClB,GAAGhB,qBAAqB,CAAC,KAAK,EAAEI,KAAK,EAAE,sBAAuB,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;MACnFQ,QAAQ,EAAEX,gBAAgB,CAACgB,EAAE,IAAG;QAC9B,IAAIL,QAAQ,IAAIK,EAAE,CAACC,MAAM,YAAYC,gBAAgB,IAAIF,EAAE,CAACC,MAAM,CAACE,IAAI,KAAK,OAAO,EAAE;UACnFR,QAAQ,CAACK,EAAE,EAAE;YAAET,KAAK,EAAES,EAAE,CAACC,MAAM,CAACV;UAAK,CAAE,CAAC;;MAE5C,CAAC;;GAEJ;AACH,CAAC","names":["getNativeElementProps","useEventCallback","useId","useRadioGroup_unstable","props","ref","generatedName","name","value","defaultValue","disabled","layout","onChange","required","components","root","role","ev","target","HTMLInputElement","type"],"sourceRoot":"../src/","sources":["packages/react-components/react-radio/src/components/RadioGroup/useRadioGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useEventCallback, useId } from '@fluentui/react-utilities';\nimport { RadioGroupProps, RadioGroupState } from './RadioGroup.types';\n\n/**\n * Create the state required to render RadioGroup.\n *\n * The returned state can be modified with hooks such as useRadioGroupStyles_unstable,\n * before being passed to renderRadioGroup_unstable.\n *\n * @param props - props from this instance of RadioGroup\n * @param ref - reference to root HTMLElement of RadioGroup\n */\nexport const useRadioGroup_unstable = (props: RadioGroupProps, ref: React.Ref<HTMLDivElement>): RadioGroupState => {\n const generatedName = useId('radiogroup-');\n\n const { name = generatedName, value, defaultValue, disabled, layout = 'vertical', onChange, required } = props;\n\n return {\n layout,\n name,\n value,\n defaultValue,\n disabled,\n required,\n components: {\n root: 'div',\n },\n root: {\n ref,\n role: 'radiogroup',\n ...getNativeElementProps('div', props, /*excludedPropNames:*/ ['onChange', 'name']),\n onChange: useEventCallback(ev => {\n if (onChange && ev.target instanceof HTMLInputElement && ev.target.type === 'radio') {\n onChange(ev, { value: ev.target.value });\n }\n }),\n },\n };\n};\n"]}
|
@@ -2,23 +2,20 @@ import { __styles, mergeClasses } from '@griffel/react';
|
|
2
2
|
export const radioGroupClassNames = {
|
3
3
|
root: 'fui-RadioGroup'
|
4
4
|
};
|
5
|
-
|
6
5
|
const useStyles = /*#__PURE__*/__styles({
|
7
|
-
|
8
|
-
|
9
|
-
|
6
|
+
root: {
|
7
|
+
mc9l5x: "f22iagw",
|
8
|
+
Bt984gj: "f6jr5hl"
|
10
9
|
},
|
11
|
-
|
12
|
-
|
10
|
+
vertical: {
|
11
|
+
Beiy3e4: "f1vx9l62"
|
13
12
|
}
|
14
13
|
}, {
|
15
|
-
|
14
|
+
d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"]
|
16
15
|
});
|
17
16
|
/**
|
18
17
|
* Apply styling to the RadioGroup slots based on the state
|
19
18
|
*/
|
20
|
-
|
21
|
-
|
22
19
|
export const useRadioGroupStyles_unstable = state => {
|
23
20
|
const styles = useStyles();
|
24
21
|
state.root.className = mergeClasses(radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,QAAQ,gBAAgB;AAIzD,OAAO,MAAMC,oBAAoB,GAAoC;EACnEC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAShB;AAEF;;;AAGA,OAAO,MAAMC,4BAA4B,GAAIC,KAAsB,IAAI;EACrE,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGP,YAAY,CACjCC,oBAAoB,CAACC,IAAI,EACzBI,MAAM,CAACJ,IAAI,EACXG,KAAK,CAACG,MAAM,KAAK,UAAU,IAAIF,MAAM,CAACG,QAAQ,EAC9CJ,KAAK,CAACH,IAAI,CAACK,SAAS,CACrB;AACH,CAAC","names":["mergeClasses","radioGroupClassNames","root","useStyles","useRadioGroupStyles_unstable","state","styles","className","layout","vertical"],"sourceRoot":"../src/","sources":["packages/react-components/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {\n root: 'fui-RadioGroup',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'flex-start',\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\n/**\n * Apply styling to the RadioGroup slots based on the state\n */\nexport const useRadioGroupStyles_unstable = (state: RadioGroupState) => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n radioGroupClassNames.root,\n styles.root,\n state.layout === 'vertical' && styles.vertical,\n state.root.className,\n );\n};\n"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SACEC,kBAAkB,EAClBC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,QACZ,uBAAuB;AAE9B,SAASC,UAAU,QAAQ,kBAAkB;AAI7C,OAAO,MAAMC,yBAAyB,gBAAGL,kBAAkB,CAAC,iBAAiB,CAAC;AAE9E,OAAO,MAAMM,eAAe,gBAA8CP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxG,MAAMC,KAAK,GAAGP,iBAAiB,CAACK,KAAK,EAAEC,GAAG,EAAE;IAC1CE,SAAS,EAAEP,UAAU;IACrBQ,UAAU,EAAEP,yBAAyB;IACrCQ,eAAe,EAAE;GAClB,CAAC;EACFX,uBAAuB,CAACQ,KAAK,CAAC;EAC9B,OAAOT,oBAAoB,CAACS,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFJ,eAAe,CAACQ,WAAW,GAAG,iBAAiB","names":["React","getFieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","RadioGroup","radioGroupFieldClassNames","RadioGroupField","forwardRef","props","ref","state","component","classNames","labelConnection","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-radio/src/components/RadioGroupField/RadioGroupField.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n getFieldClassNames,\n renderField_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { RadioGroup } from '../../RadioGroup';\n\nexport type RadioGroupFieldProps = FieldProps<typeof RadioGroup>;\n\nexport const radioGroupFieldClassNames = getFieldClassNames('RadioGroupField');\n\nexport const RadioGroupField: ForwardRefComponent<RadioGroupFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, {\n component: RadioGroup,\n classNames: radioGroupFieldClassNames,\n labelConnection: 'aria-labelledby',\n });\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nRadioGroupField.displayName = 'RadioGroupField';\n"]}
|
@@ -2,7 +2,6 @@ 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
|
-
|
6
5
|
export const RadioGroupContext = /*#__PURE__*/createContext(undefined);
|
7
6
|
const radioGroupContextDefaultValue = {};
|
8
7
|
export const RadioGroupProvider = RadioGroupContext.Provider;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAyB,kCAAkC;AAIrG;;;AAGA,OAAO,MAAMC,iBAAiB,gBAAoCF,aAAa,CAC7EG,SAAS,CACyB;AAEpC,MAAMC,6BAA6B,GAA2B,EAAE;AAEhE,OAAO,MAAMC,kBAAkB,GAAGH,iBAAiB,CAACI,QAAQ;AAE5D,OAAO,MAAMC,6BAA6B,GAAOC,QAAoD,IACnGP,kBAAkB,CAACC,iBAAiB,EAAE,CAACO,GAAG,GAAGL,6BAA6B,KAAKI,QAAQ,CAACC,GAAG,CAAC,CAAC","names":["createContext","useContextSelector","RadioGroupContext","undefined","radioGroupContextDefaultValue","RadioGroupProvider","Provider","useRadioGroupContext_unstable","selector","ctx"],"sourceRoot":"../src/","sources":["packages/react-components/react-radio/src/contexts/RadioGroupContext.ts"],"sourcesContent":["import { createContext, useContextSelector, ContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { RadioGroupContextValue } from '../RadioGroup';\n\n/**\n * RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.\n */\nexport const RadioGroupContext: Context<RadioGroupContextValue> = createContext<RadioGroupContextValue | undefined>(\n undefined,\n) as Context<RadioGroupContextValue>;\n\nconst radioGroupContextDefaultValue: RadioGroupContextValue = {};\n\nexport const RadioGroupProvider = RadioGroupContext.Provider;\n\nexport const useRadioGroupContext_unstable = <T>(selector: ContextSelector<RadioGroupContextValue, T>): T =>\n useContextSelector(RadioGroupContext, (ctx = radioGroupContextDefaultValue) => selector(ctx));\n"]}
|