@fluentui/react-radio 9.0.14 → 9.0.16
Sign up to get free protection for your applications and to get access to all the features.
- 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"]}
|