@fluentui/react-radio 9.1.61 → 9.2.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +33 -2
- package/lib/components/Radio/useRadio.js +1 -3
- package/lib/components/Radio/useRadio.js.map +1 -1
- package/lib/components/Radio/useRadioStyles.styles.js +13 -4
- package/lib/components/Radio/useRadioStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Radio/useRadio.js +1 -3
- package/lib-commonjs/components/Radio/useRadio.js.map +1 -1
- package/lib-commonjs/components/Radio/useRadioStyles.styles.js +57 -38
- package/lib-commonjs/components/Radio/useRadioStyles.styles.js.map +1 -1
- package/package.json +7 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,43 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-radio
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 16 Jan 2024 13:07:17 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.2.1)
|
|
8
|
+
|
|
9
|
+
Tue, 16 Jan 2024 13:07:17 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.2.0..@fluentui/react-radio_v9.2.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: correct version of @types/react-dom peer dep that matches for 16.x ([PR #30259](https://github.com/microsoft/fluentui/pull/30259) by mgodbolt@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-field to v9.1.48 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.25 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
|
|
17
|
+
- Bump @fluentui/react-label to v9.1.56 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
|
|
18
|
+
- Bump @fluentui/react-tabster to v9.17.1 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
|
|
19
|
+
|
|
20
|
+
## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.2.0)
|
|
21
|
+
|
|
22
|
+
Mon, 08 Jan 2024 16:24:24 GMT
|
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.1.61..@fluentui/react-radio_v9.2.0)
|
|
24
|
+
|
|
25
|
+
### Minor changes
|
|
26
|
+
|
|
27
|
+
- chore: Update Radio indicator for perf and alignment at 125% DPI ([PR #30207](https://github.com/microsoft/fluentui/pull/30207) by behowell@microsoft.com)
|
|
28
|
+
- Bump @fluentui/react-field to v9.1.47 ([PR #30179](https://github.com/microsoft/fluentui/pull/30179) by beachball)
|
|
29
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.24 ([PR #30179](https://github.com/microsoft/fluentui/pull/30179) by beachball)
|
|
30
|
+
- Bump @fluentui/react-label to v9.1.55 ([PR #30179](https://github.com/microsoft/fluentui/pull/30179) by beachball)
|
|
31
|
+
- Bump @fluentui/react-tabster to v9.17.0 ([PR #30179](https://github.com/microsoft/fluentui/pull/30179) by beachball)
|
|
32
|
+
- Bump @fluentui/react-utilities to v9.15.6 ([PR #30179](https://github.com/microsoft/fluentui/pull/30179) by beachball)
|
|
33
|
+
|
|
34
|
+
### Patches
|
|
35
|
+
|
|
36
|
+
- Update version of @fluentui/react-icons to 2.0.224 ([PR #30078](https://github.com/microsoft/fluentui/pull/30078) by ololubek@microsoft.com)
|
|
37
|
+
|
|
7
38
|
## [9.1.61](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.1.61)
|
|
8
39
|
|
|
9
|
-
Wed, 03 Jan 2024 09:
|
|
40
|
+
Wed, 03 Jan 2024 09:26:44 GMT
|
|
10
41
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.1.60..@fluentui/react-radio_v9.1.61)
|
|
11
42
|
|
|
12
43
|
### Patches
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { CircleFilled } from '@fluentui/react-icons';
|
|
3
2
|
import { Label } from '@fluentui/react-label';
|
|
4
3
|
import { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';
|
|
5
4
|
import { useRadioGroupContextValue_unstable } from '../../contexts/RadioGroupContext';
|
|
@@ -58,8 +57,7 @@ import { useFocusWithin } from '@fluentui/react-tabster';
|
|
|
58
57
|
});
|
|
59
58
|
const indicator = slot.always(props.indicator, {
|
|
60
59
|
defaultProps: {
|
|
61
|
-
'aria-hidden': true
|
|
62
|
-
children: /*#__PURE__*/ React.createElement(CircleFilled, null)
|
|
60
|
+
'aria-hidden': true
|
|
63
61
|
},
|
|
64
62
|
elementType: 'div'
|
|
65
63
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useRadio.tsx"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useRadio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';\nimport { useRadioGroupContextValue_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 group = useRadioGroupContextValue_unstable();\n\n const {\n name = group.name,\n checked = group.value !== undefined ? group.value === props.value : undefined,\n defaultChecked = group.defaultValue !== undefined ? group.defaultValue === props.value : undefined,\n labelPosition = group.layout === 'horizontal-stacked' ? 'below' : 'after',\n disabled = group.disabled,\n required = group.required,\n 'aria-describedby': ariaDescribedBy = group['aria-describedby'],\n onChange,\n } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n });\n\n const root = slot.always(props.root, {\n defaultProps: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\n elementType: 'span',\n });\n const input = slot.always(props.input, {\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 'aria-describedby': ariaDescribedBy,\n ...nativeProps.primary,\n },\n elementType: 'input',\n });\n input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { value: ev.currentTarget.value }));\n const label = slot.optional(props.label, {\n defaultProps: { htmlFor: input.id, disabled: input.disabled },\n elementType: Label,\n });\n const indicator = slot.always(props.indicator, {\n defaultProps: { 'aria-hidden': true },\n elementType: 'div',\n });\n return {\n labelPosition,\n components: { root: 'span', input: 'input', label: Label, indicator: 'div' },\n root,\n input,\n label,\n indicator,\n };\n};\n"],"names":["React","Label","getPartitionedNativeProps","mergeCallbacks","useId","slot","useRadioGroupContextValue_unstable","useFocusWithin","useRadio_unstable","props","ref","group","name","checked","value","undefined","defaultChecked","defaultValue","labelPosition","layout","disabled","required","ariaDescribedBy","onChange","nativeProps","primarySlotTagName","excludedPropNames","root","always","defaultProps","elementType","input","type","id","primary","ev","currentTarget","label","optional","htmlFor","indicator","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,yBAAyB,EAAEC,cAAc,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AACnG,SAASC,kCAAkC,QAAQ,mCAAmC;AACtF,SAASC,cAAc,QAAQ,0BAA0B;AAGzD;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAMC,QAAQL;IAEd,MAAM,EACJM,OAAOD,MAAMC,IAAI,EACjBC,UAAUF,MAAMG,KAAK,KAAKC,YAAYJ,MAAMG,KAAK,KAAKL,MAAMK,KAAK,GAAGC,SAAS,EAC7EC,iBAAiBL,MAAMM,YAAY,KAAKF,YAAYJ,MAAMM,YAAY,KAAKR,MAAMK,KAAK,GAAGC,SAAS,EAClGG,gBAAgBP,MAAMQ,MAAM,KAAK,uBAAuB,UAAU,OAAO,EACzEC,WAAWT,MAAMS,QAAQ,EACzBC,WAAWV,MAAMU,QAAQ,EACzB,oBAAoBC,kBAAkBX,KAAK,CAAC,mBAAmB,EAC/DY,QAAQ,EACT,GAAGd;IAEJ,MAAMe,cAActB,0BAA0B;QAC5CO;QACAgB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAW;YAAkB;SAAW;IAC9D;IAEA,MAAMC,OAAOtB,KAAKuB,MAAM,CAACnB,MAAMkB,IAAI,EAAE;QACnCE,cAAc;YACZnB,KAAKH;YACL,GAAGiB,YAAYG,IAAI;QACrB;QACAG,aAAa;IACf;IACA,MAAMC,QAAQ1B,KAAKuB,MAAM,CAACnB,MAAMsB,KAAK,EAAE;QACrCF,cAAc;YACZnB;YACAsB,MAAM;YACNC,IAAI7B,MAAM,UAAUoB,YAAYU,OAAO,CAACD,EAAE;YAC1CrB;YACAC;YACAG;YACAI;YACAC;YACA,oBAAoBC;YACpB,GAAGE,YAAYU,OAAO;QACxB;QACAJ,aAAa;IACf;IACAC,MAAMR,QAAQ,GAAGpB,eAAe4B,MAAMR,QAAQ,EAAEY,CAAAA,KAAMZ,qBAAAA,+BAAAA,SAAWY,IAAI;YAAErB,OAAOqB,GAAGC,aAAa,CAACtB,KAAK;QAAC;IACrG,MAAMuB,QAAQhC,KAAKiC,QAAQ,CAAC7B,MAAM4B,KAAK,EAAE;QACvCR,cAAc;YAAEU,SAASR,MAAME,EAAE;YAAEb,UAAUW,MAAMX,QAAQ;QAAC;QAC5DU,aAAa7B;IACf;IACA,MAAMuC,YAAYnC,KAAKuB,MAAM,CAACnB,MAAM+B,SAAS,EAAE;QAC7CX,cAAc;YAAE,eAAe;QAAK;QACpCC,aAAa;IACf;IACA,OAAO;QACLZ;QACAuB,YAAY;YAAEd,MAAM;YAAQI,OAAO;YAASM,OAAOpC;YAAOuC,WAAW;QAAM;QAC3Eb;QACAI;QACAM;QACAG;IACF;AACF,EAAE"}
|
|
@@ -21,16 +21,25 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
21
21
|
}, {
|
|
22
22
|
d: [".f1vx9l62{flex-direction:column;}", ".f122n59{align-items:center;}"]
|
|
23
23
|
});
|
|
24
|
-
const useInputBaseClassName = /*#__PURE__*/__resetStyles("
|
|
24
|
+
const useInputBaseClassName = /*#__PURE__*/__resetStyles("rg1upok", "rzwdzb4", {
|
|
25
|
+
r: [".rg1upok{position:absolute;left:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}", ".rg1upok:enabled{cursor:pointer;}", ".rg1upok:enabled~.fui-Radio__label{cursor:pointer;}", ".rg1upok:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}", ".rg1upok:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}", ".rg1upok:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}", ".rg1upok:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".rg1upok:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".rg1upok:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".rg1upok:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".rg1upok:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}", ".rg1upok:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}", ".rg1upok:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}", ".rg1upok:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}", ".rg1upok:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}", ".rzwdzb4{position:absolute;right:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}", ".rzwdzb4:enabled{cursor:pointer;}", ".rzwdzb4:enabled~.fui-Radio__label{cursor:pointer;}", ".rzwdzb4:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}", ".rzwdzb4:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}", ".rzwdzb4:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}", ".rzwdzb4:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".rzwdzb4:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".rzwdzb4:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".rzwdzb4:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".rzwdzb4:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}", ".rzwdzb4:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}", ".rzwdzb4:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}", ".rzwdzb4:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}", ".rzwdzb4:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}"],
|
|
26
|
+
s: ["@media (forced-colors: active){.rg1upok:enabled:not(:checked)~.fui-Radio__indicator{border-color:ButtonBorder;}}", "@media (forced-colors: active){.rg1upok:enabled:checked~.fui-Radio__indicator{border-color:Highlight;color:Highlight;}.rg1upok:enabled:checked~.fui-Radio__indicator::after{background-color:Highlight;}}", "@media (forced-colors: active){.rg1upok:disabled~.fui-Radio__label{color:GrayText;}}", "@media (forced-colors: active){.rg1upok:disabled~.fui-Radio__indicator{border-color:GrayText;color:GrayText;}.rg1upok:disabled~.fui-Radio__indicator::after{background-color:GrayText;}}", "@media (forced-colors: active){.rzwdzb4:enabled:not(:checked)~.fui-Radio__indicator{border-color:ButtonBorder;}}", "@media (forced-colors: active){.rzwdzb4:enabled:checked~.fui-Radio__indicator{border-color:Highlight;color:Highlight;}.rzwdzb4:enabled:checked~.fui-Radio__indicator::after{background-color:Highlight;}}", "@media (forced-colors: active){.rzwdzb4:disabled~.fui-Radio__label{color:GrayText;}}", "@media (forced-colors: active){.rzwdzb4:disabled~.fui-Radio__indicator{border-color:GrayText;color:GrayText;}.rzwdzb4:disabled~.fui-Radio__indicator::after{background-color:GrayText;}}"]
|
|
27
|
+
});
|
|
25
28
|
const useInputStyles = /*#__PURE__*/__styles({
|
|
26
29
|
below: {
|
|
27
30
|
a9b677: "fly5x3f",
|
|
28
31
|
Bqenvij: "f1je6zif"
|
|
32
|
+
},
|
|
33
|
+
defaultIndicator: {
|
|
34
|
+
Blbys7f: "f9ma1gx"
|
|
35
|
+
},
|
|
36
|
+
customIndicator: {
|
|
37
|
+
Bojc29n: "fhb1dn5"
|
|
29
38
|
}
|
|
30
39
|
}, {
|
|
31
|
-
d: [".fly5x3f{width:100%;}", ".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}"]
|
|
40
|
+
d: [".fly5x3f{width:100%;}", ".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}", ".f9ma1gx:checked~.fui-Radio__indicator::after{content:\"\";}", ".fhb1dn5:not(:checked)~.fui-Radio__indicator>*{opacity:0;}"]
|
|
32
41
|
});
|
|
33
|
-
const useIndicatorBaseClassName = /*#__PURE__*/__resetStyles("
|
|
42
|
+
const useIndicatorBaseClassName = /*#__PURE__*/__resetStyles("rwtekvw", null, [".rwtekvw{position:relative;width:16px;height:16px;font-size:12px;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid;border-radius:var(--borderRadiusCircular);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;}", ".rwtekvw::after{position:absolute;width:16px;height:16px;border-radius:var(--borderRadiusCircular);transform:scale(0.625);background-color:currentColor;}"]);
|
|
34
43
|
// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
|
|
35
44
|
const useLabelStyles = /*#__PURE__*/__styles({
|
|
36
45
|
base: {
|
|
@@ -64,7 +73,7 @@ export const useRadioStyles_unstable = state => {
|
|
|
64
73
|
state.root.className = mergeClasses(radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);
|
|
65
74
|
const inputBaseClassName = useInputBaseClassName();
|
|
66
75
|
const inputStyles = useInputStyles();
|
|
67
|
-
state.input.className = mergeClasses(radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.input.className);
|
|
76
|
+
state.input.className = mergeClasses(radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.indicator.children ? inputStyles.customIndicator : inputStyles.defaultIndicator, state.input.className);
|
|
68
77
|
const indicatorBaseClassName = useIndicatorBaseClassName();
|
|
69
78
|
state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);
|
|
70
79
|
const labelStyles = useLabelStyles();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","shorthands","radioClassNames","root","indicator","input","label","indicatorSize","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","Bt984gj","d","useInputBaseClassName","useInputStyles","below","a9b677","Bqenvij","useIndicatorBaseClassName","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","after","B6of3ja","jrapky","fsow6f","useRadioStyles_unstable","state","labelPosition","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","labelStyles"],"sources":["useRadioStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const radioClassNames = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n position: 'relative',\n ...createFocusOutlineStyle({\n style: {},\n selector: 'focus-within'\n })\n});\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n alignItems: 'center'\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 ':enabled': {\n cursor: 'pointer',\n [`& ~ .${radioClassNames.label}`]: {\n cursor: 'pointer'\n }\n },\n // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n opacity: '0'\n },\n // 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 ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessibleHover\n }\n },\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessiblePressed\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 ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokeHover,\n color: tokens.colorCompoundBrandForeground1Hover\n }\n },\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokePressed,\n color: tokens.colorCompoundBrandForeground1Pressed\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});\nconst useInputStyles = makeStyles({\n below: {\n width: '100%',\n height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`\n }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n width: indicatorSize,\n height: indicatorSize,\n fontSize: '12px',\n boxSizing: 'border-box',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n border: tokens.strokeWidthThin + ' solid',\n borderRadius: tokens.borderRadiusCircular,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none'\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 after: {\n paddingLeft: tokens.spacingHorizontalXS,\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 below: {\n paddingTop: tokens.spacingVerticalXS,\n textAlign: 'center'\n }\n});\n/**\n * Apply styling to the Radio slots based on the state\n */ export const useRadioStyles_unstable = (state)=>{\n const { labelPosition } = state;\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.input.className);\n const indicatorBaseClassName = useIndicatorBaseClassName();\n state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n }\n};\n"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE,WAAW;EACjBC,SAAS,EAAE,sBAAsB;EACjCC,KAAK,EAAE,kBAAkB;EACzBC,KAAK,EAAE;AACX,CAAC;AACD;AACA,MAAMC,aAAa,GAAG,MAAM;AAC5B,MAAMC,oBAAoB,gBAAGV,aAAA;EAAAW,CAAA;EAAAC,CAAA;AAAA,CAO5B,CAAC;AACF,MAAMC,aAAa,gBAAGZ,QAAA;EAAAa,QAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKrB,CAAC;AACF,MAAMC,qBAAqB,gBAAGlB,aAAA,26GA6E7B,CAAC;AACF,MAAMmB,cAAc,gBAAGlB,QAAA;EAAAmB,KAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,CAKtB,CAAC;AACF,MAAMM,yBAAyB,gBAAGvB,aAAA,8VAejC,CAAC;AACF;AACA,MAAMwB,cAAc,gBAAGvB,QAAA;EAAAwB,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAD,MAAA;IAAAE,OAAA;IAAAC,MAAA;EAAA;EAAAb,KAAA;IAAAO,MAAA;IAAAO,MAAA;EAAA;AAAA;EAAAjB,CAAA;AAAA,CAgBtB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMkB,uBAAuB,GAAIC,KAAK,IAAG;EAChD,MAAM;IAAEC;EAAc,CAAC,GAAGD,KAAK;EAC/B,MAAME,iBAAiB,GAAG5B,oBAAoB,CAAC,CAAC;EAChD,MAAM6B,UAAU,GAAG1B,aAAa,CAAC,CAAC;EAClCuB,KAAK,CAAC/B,IAAI,CAACmC,SAAS,GAAGtC,YAAY,CAACE,eAAe,CAACC,IAAI,EAAEiC,iBAAiB,EAAED,aAAa,KAAK,OAAO,IAAIE,UAAU,CAACzB,QAAQ,EAAEsB,KAAK,CAAC/B,IAAI,CAACmC,SAAS,CAAC;EACpJ,MAAMC,kBAAkB,GAAGvB,qBAAqB,CAAC,CAAC;EAClD,MAAMwB,WAAW,GAAGvB,cAAc,CAAC,CAAC;EACpCiB,KAAK,CAAC7B,KAAK,CAACiC,SAAS,GAAGtC,YAAY,CAACE,eAAe,CAACG,KAAK,EAAEkC,kBAAkB,EAAEJ,aAAa,KAAK,OAAO,IAAIK,WAAW,CAACtB,KAAK,EAAEgB,KAAK,CAAC7B,KAAK,CAACiC,SAAS,CAAC;EACtJ,MAAMG,sBAAsB,GAAGpB,yBAAyB,CAAC,CAAC;EAC1Da,KAAK,CAAC9B,SAAS,CAACkC,SAAS,GAAGtC,YAAY,CAACE,eAAe,CAACE,SAAS,EAAEqC,sBAAsB,EAAEP,KAAK,CAAC9B,SAAS,CAACkC,SAAS,CAAC;EACtH,MAAMI,WAAW,GAAGpB,cAAc,CAAC,CAAC;EACpC,IAAIY,KAAK,CAAC5B,KAAK,EAAE;IACb4B,KAAK,CAAC5B,KAAK,CAACgC,SAAS,GAAGtC,YAAY,CAACE,eAAe,CAACI,KAAK,EAAEoC,WAAW,CAACnB,IAAI,EAAEmB,WAAW,CAACP,aAAa,CAAC,EAAED,KAAK,CAAC5B,KAAK,CAACgC,SAAS,CAAC;EACpI;AACJ,CAAC"}
|
|
1
|
+
{"version":3,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","shorthands","radioClassNames","root","indicator","input","label","indicatorSize","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","Bt984gj","d","useInputBaseClassName","useInputStyles","below","a9b677","Bqenvij","defaultIndicator","Blbys7f","customIndicator","Bojc29n","useIndicatorBaseClassName","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","after","B6of3ja","jrapky","fsow6f","useRadioStyles_unstable","state","labelPosition","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","children","indicatorBaseClassName","labelStyles"],"sources":["useRadioStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const radioClassNames = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n position: 'relative',\n ...createFocusOutlineStyle({\n style: {},\n selector: 'focus-within'\n })\n});\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n alignItems: 'center'\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 ':enabled': {\n cursor: 'pointer',\n [`& ~ .${radioClassNames.label}`]: {\n cursor: 'pointer'\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 '@media (forced-colors: active)': {\n borderColor: 'ButtonBorder'\n }\n },\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessibleHover\n }\n },\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessiblePressed\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 '@media (forced-colors: active)': {\n borderColor: 'Highlight',\n color: 'Highlight',\n '::after': {\n backgroundColor: 'Highlight'\n }\n }\n },\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokeHover,\n color: tokens.colorCompoundBrandForeground1Hover\n }\n },\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokePressed,\n color: tokens.colorCompoundBrandForeground1Pressed\n }\n }\n },\n // Colors for the disabled state\n ':disabled': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'default',\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n borderColor: 'GrayText',\n color: 'GrayText',\n '::after': {\n backgroundColor: 'GrayText'\n }\n }\n }\n }\n});\nconst useInputStyles = makeStyles({\n below: {\n width: '100%',\n height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`\n },\n // If the indicator has no children, use the ::after pseudo-element for the checked state\n defaultIndicator: {\n [`:checked ~ .${radioClassNames.indicator}::after`]: {\n content: '\"\"'\n }\n },\n // If the indicator has a child, hide it until the radio is checked\n customIndicator: {\n [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n opacity: '0'\n }\n }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n position: 'relative',\n width: indicatorSize,\n height: indicatorSize,\n fontSize: '12px',\n boxSizing: 'border-box',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n border: tokens.strokeWidthThin + ' solid',\n borderRadius: tokens.borderRadiusCircular,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n '::after': {\n position: 'absolute',\n width: indicatorSize,\n height: indicatorSize,\n borderRadius: tokens.borderRadiusCircular,\n // Use a transform to avoid pixel rounding errors at 125% DPI\n // https://github.com/microsoft/fluentui/issues/30025\n transform: 'scale(0.625)',\n backgroundColor: 'currentColor'\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 after: {\n paddingLeft: tokens.spacingHorizontalXS,\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 below: {\n paddingTop: tokens.spacingVerticalXS,\n textAlign: 'center'\n }\n});\n/**\n * Apply styling to the Radio slots based on the state\n */ export const useRadioStyles_unstable = (state)=>{\n const { labelPosition } = state;\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.indicator.children ? inputStyles.customIndicator : inputStyles.defaultIndicator, state.input.className);\n const indicatorBaseClassName = useIndicatorBaseClassName();\n state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n }\n};\n"],"mappings":"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"}
|
|
@@ -10,7 +10,6 @@ Object.defineProperty(exports, "useRadio_unstable", {
|
|
|
10
10
|
});
|
|
11
11
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
|
-
const _reacticons = require("@fluentui/react-icons");
|
|
14
13
|
const _reactlabel = require("@fluentui/react-label");
|
|
15
14
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
16
15
|
const _RadioGroupContext = require("../../contexts/RadioGroupContext");
|
|
@@ -61,8 +60,7 @@ const useRadio_unstable = (props, ref)=>{
|
|
|
61
60
|
});
|
|
62
61
|
const indicator = _reactutilities.slot.always(props.indicator, {
|
|
63
62
|
defaultProps: {
|
|
64
|
-
'aria-hidden': true
|
|
65
|
-
children: /*#__PURE__*/ _react.createElement(_reacticons.CircleFilled, null)
|
|
63
|
+
'aria-hidden': true
|
|
66
64
|
},
|
|
67
65
|
elementType: 'div'
|
|
68
66
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useRadio.js"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useRadio.js"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';\nimport { useRadioGroupContextValue_unstable } from '../../contexts/RadioGroupContext';\nimport { useFocusWithin } from '@fluentui/react-tabster';\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 */ export const useRadio_unstable = (props, ref)=>{\n const group = useRadioGroupContextValue_unstable();\n const { name = group.name, checked = group.value !== undefined ? group.value === props.value : undefined, defaultChecked = group.defaultValue !== undefined ? group.defaultValue === props.value : undefined, labelPosition = group.layout === 'horizontal-stacked' ? 'below' : 'after', disabled = group.disabled, required = group.required, 'aria-describedby': ariaDescribedBy = group['aria-describedby'], onChange } = props;\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: [\n 'checked',\n 'defaultChecked',\n 'onChange'\n ]\n });\n const root = slot.always(props.root, {\n defaultProps: {\n ref: useFocusWithin(),\n ...nativeProps.root\n },\n elementType: 'span'\n });\n const input = slot.always(props.input, {\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 'aria-describedby': ariaDescribedBy,\n ...nativeProps.primary\n },\n elementType: 'input'\n });\n input.onChange = mergeCallbacks(input.onChange, (ev)=>onChange === null || onChange === void 0 ? void 0 : onChange(ev, {\n value: ev.currentTarget.value\n }));\n const label = slot.optional(props.label, {\n defaultProps: {\n htmlFor: input.id,\n disabled: input.disabled\n },\n elementType: Label\n });\n const indicator = slot.always(props.indicator, {\n defaultProps: {\n 'aria-hidden': true\n },\n elementType: 'div'\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"],"names":["useRadio_unstable","props","ref","group","useRadioGroupContextValue_unstable","name","checked","value","undefined","defaultChecked","defaultValue","labelPosition","layout","disabled","required","ariaDescribedBy","onChange","nativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","root","slot","always","defaultProps","useFocusWithin","elementType","input","type","id","useId","primary","mergeCallbacks","ev","currentTarget","label","optional","htmlFor","Label","indicator","components"],"mappings":";;;;+BAaiBA;;;eAAAA;;;;iEAbM;4BACD;gCACiD;mCACpB;8BACpB;AASpB,MAAMA,oBAAoB,CAACC,OAAOC;IACzC,MAAMC,QAAQC,IAAAA,qDAAkC;IAChD,MAAM,EAAEC,OAAOF,MAAME,IAAI,EAAEC,UAAUH,MAAMI,KAAK,KAAKC,YAAYL,MAAMI,KAAK,KAAKN,MAAMM,KAAK,GAAGC,SAAS,EAAEC,iBAAiBN,MAAMO,YAAY,KAAKF,YAAYL,MAAMO,YAAY,KAAKT,MAAMM,KAAK,GAAGC,SAAS,EAAEG,gBAAgBR,MAAMS,MAAM,KAAK,uBAAuB,UAAU,OAAO,EAAEC,WAAWV,MAAMU,QAAQ,EAAEC,WAAWX,MAAMW,QAAQ,EAAE,oBAAoBC,kBAAkBZ,KAAK,CAAC,mBAAmB,EAAEa,QAAQ,EAAE,GAAGf;IAC7Z,MAAMgB,cAAcC,IAAAA,yCAAyB,EAAC;QAC1CjB;QACAkB,oBAAoB;QACpBC,mBAAmB;YACf;YACA;YACA;SACH;IACL;IACA,MAAMC,OAAOC,oBAAI,CAACC,MAAM,CAACtB,MAAMoB,IAAI,EAAE;QACjCG,cAAc;YACVtB,KAAKuB,IAAAA,4BAAc;YACnB,GAAGR,YAAYI,IAAI;QACvB;QACAK,aAAa;IACjB;IACA,MAAMC,QAAQL,oBAAI,CAACC,MAAM,CAACtB,MAAM0B,KAAK,EAAE;QACnCH,cAAc;YACVtB;YACA0B,MAAM;YACNC,IAAIC,IAAAA,qBAAK,EAAC,UAAUb,YAAYc,OAAO,CAACF,EAAE;YAC1CxB;YACAC;YACAG;YACAI;YACAC;YACA,oBAAoBC;YACpB,GAAGE,YAAYc,OAAO;QAC1B;QACAL,aAAa;IACjB;IACAC,MAAMX,QAAQ,GAAGgB,IAAAA,8BAAc,EAACL,MAAMX,QAAQ,EAAE,CAACiB,KAAKjB,aAAa,QAAQA,aAAa,KAAK,IAAI,KAAK,IAAIA,SAASiB,IAAI;YAC/G1B,OAAO0B,GAAGC,aAAa,CAAC3B,KAAK;QACjC;IACJ,MAAM4B,QAAQb,oBAAI,CAACc,QAAQ,CAACnC,MAAMkC,KAAK,EAAE;QACrCX,cAAc;YACVa,SAASV,MAAME,EAAE;YACjBhB,UAAUc,MAAMd,QAAQ;QAC5B;QACAa,aAAaY,iBAAK;IACtB;IACA,MAAMC,YAAYjB,oBAAI,CAACC,MAAM,CAACtB,MAAMsC,SAAS,EAAE;QAC3Cf,cAAc;YACV,eAAe;QACnB;QACAE,aAAa;IACjB;IACA,OAAO;QACHf;QACA6B,YAAY;YACRnB,MAAM;YACNM,OAAO;YACPQ,OAAOG,iBAAK;YACZC,WAAW;QACf;QACAlB;QACAM;QACAQ;QACAI;IACJ;AACJ"}
|
|
@@ -54,53 +54,72 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
54
54
|
".f122n59{align-items:center;}"
|
|
55
55
|
]
|
|
56
56
|
});
|
|
57
|
-
const useInputBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
57
|
+
const useInputBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rg1upok", "rzwdzb4", {
|
|
58
|
+
r: [
|
|
59
|
+
".rg1upok{position:absolute;left:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}",
|
|
60
|
+
".rg1upok:enabled{cursor:pointer;}",
|
|
61
|
+
".rg1upok:enabled~.fui-Radio__label{cursor:pointer;}",
|
|
62
|
+
".rg1upok:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}",
|
|
63
|
+
".rg1upok:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}",
|
|
64
|
+
".rg1upok:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}",
|
|
65
|
+
".rg1upok:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}",
|
|
66
|
+
".rg1upok:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}",
|
|
67
|
+
".rg1upok:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}",
|
|
68
|
+
".rg1upok:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}",
|
|
69
|
+
".rg1upok:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}",
|
|
70
|
+
".rg1upok:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}",
|
|
71
|
+
".rg1upok:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}",
|
|
72
|
+
".rg1upok:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}",
|
|
73
|
+
".rg1upok:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}",
|
|
74
|
+
".rzwdzb4{position:absolute;right:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}",
|
|
75
|
+
".rzwdzb4:enabled{cursor:pointer;}",
|
|
76
|
+
".rzwdzb4:enabled~.fui-Radio__label{cursor:pointer;}",
|
|
77
|
+
".rzwdzb4:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}",
|
|
78
|
+
".rzwdzb4:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}",
|
|
79
|
+
".rzwdzb4:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}",
|
|
80
|
+
".rzwdzb4:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}",
|
|
81
|
+
".rzwdzb4:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}",
|
|
82
|
+
".rzwdzb4:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}",
|
|
83
|
+
".rzwdzb4:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}",
|
|
84
|
+
".rzwdzb4:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}",
|
|
85
|
+
".rzwdzb4:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}",
|
|
86
|
+
".rzwdzb4:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}",
|
|
87
|
+
".rzwdzb4:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}",
|
|
88
|
+
".rzwdzb4:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}"
|
|
89
|
+
],
|
|
90
|
+
s: [
|
|
91
|
+
"@media (forced-colors: active){.rg1upok:enabled:not(:checked)~.fui-Radio__indicator{border-color:ButtonBorder;}}",
|
|
92
|
+
"@media (forced-colors: active){.rg1upok:enabled:checked~.fui-Radio__indicator{border-color:Highlight;color:Highlight;}.rg1upok:enabled:checked~.fui-Radio__indicator::after{background-color:Highlight;}}",
|
|
93
|
+
"@media (forced-colors: active){.rg1upok:disabled~.fui-Radio__label{color:GrayText;}}",
|
|
94
|
+
"@media (forced-colors: active){.rg1upok:disabled~.fui-Radio__indicator{border-color:GrayText;color:GrayText;}.rg1upok:disabled~.fui-Radio__indicator::after{background-color:GrayText;}}",
|
|
95
|
+
"@media (forced-colors: active){.rzwdzb4:enabled:not(:checked)~.fui-Radio__indicator{border-color:ButtonBorder;}}",
|
|
96
|
+
"@media (forced-colors: active){.rzwdzb4:enabled:checked~.fui-Radio__indicator{border-color:Highlight;color:Highlight;}.rzwdzb4:enabled:checked~.fui-Radio__indicator::after{background-color:Highlight;}}",
|
|
97
|
+
"@media (forced-colors: active){.rzwdzb4:disabled~.fui-Radio__label{color:GrayText;}}",
|
|
98
|
+
"@media (forced-colors: active){.rzwdzb4:disabled~.fui-Radio__indicator{border-color:GrayText;color:GrayText;}.rzwdzb4:disabled~.fui-Radio__indicator::after{background-color:GrayText;}}"
|
|
99
|
+
]
|
|
100
|
+
});
|
|
91
101
|
const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
92
102
|
below: {
|
|
93
103
|
a9b677: "fly5x3f",
|
|
94
104
|
Bqenvij: "f1je6zif"
|
|
105
|
+
},
|
|
106
|
+
defaultIndicator: {
|
|
107
|
+
Blbys7f: "f9ma1gx"
|
|
108
|
+
},
|
|
109
|
+
customIndicator: {
|
|
110
|
+
Bojc29n: "fhb1dn5"
|
|
95
111
|
}
|
|
96
112
|
}, {
|
|
97
113
|
d: [
|
|
98
114
|
".fly5x3f{width:100%;}",
|
|
99
|
-
".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}"
|
|
115
|
+
".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}",
|
|
116
|
+
".f9ma1gx:checked~.fui-Radio__indicator::after{content:\"\";}",
|
|
117
|
+
".fhb1dn5:not(:checked)~.fui-Radio__indicator>*{opacity:0;}"
|
|
100
118
|
]
|
|
101
119
|
});
|
|
102
|
-
const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
103
|
-
".
|
|
120
|
+
const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rwtekvw", null, [
|
|
121
|
+
".rwtekvw{position:relative;width:16px;height:16px;font-size:12px;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid;border-radius:var(--borderRadiusCircular);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;}",
|
|
122
|
+
".rwtekvw::after{position:absolute;width:16px;height:16px;border-radius:var(--borderRadiusCircular);transform:scale(0.625);background-color:currentColor;}"
|
|
104
123
|
]);
|
|
105
124
|
// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
|
|
106
125
|
const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
@@ -151,7 +170,7 @@ const useRadioStyles_unstable = (state)=>{
|
|
|
151
170
|
state.root.className = (0, _react.mergeClasses)(radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);
|
|
152
171
|
const inputBaseClassName = useInputBaseClassName();
|
|
153
172
|
const inputStyles = useInputStyles();
|
|
154
|
-
state.input.className = (0, _react.mergeClasses)(radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.input.className);
|
|
173
|
+
state.input.className = (0, _react.mergeClasses)(radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.indicator.children ? inputStyles.customIndicator : inputStyles.defaultIndicator, state.input.className);
|
|
155
174
|
const indicatorBaseClassName = useIndicatorBaseClassName();
|
|
156
175
|
state.indicator.className = (0, _react.mergeClasses)(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);
|
|
157
176
|
const labelStyles = useLabelStyles();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useRadioStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nexport const radioClassNames = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"rm0dkue\", \"rjjxb3w\", {\n r: [\".rm0dkue{display:inline-flex;position:relative;}\", \".rm0dkue:focus{outline-style:none;}\", \".rm0dkue:focus-visible{outline-style:none;}\", \".rm0dkue[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".rm0dkue[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:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".rjjxb3w{display:inline-flex;position:relative;}\", \".rjjxb3w:focus{outline-style:none;}\", \".rjjxb3w:focus-visible{outline-style:none;}\", \".rjjxb3w[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".rjjxb3w[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:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"],\n s: [\"@media (forced-colors: active){.rm0dkue[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}\", \"@media (forced-colors: active){.rjjxb3w[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}\"]\n});\nconst useRootStyles = /*#__PURE__*/__styles({\n vertical: {\n Beiy3e4: \"f1vx9l62\",\n Bt984gj: \"f122n59\"\n }\n}, {\n d: [\".f1vx9l62{flex-direction:column;}\", \".f122n59{align-items:center;}\"]\n});\nconst useInputBaseClassName = /*#__PURE__*/__resetStyles(\"r9gx1vl\", \"r1uk1i2c\", [\".r9gx1vl{position:absolute;left:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}\", \".r9gx1vl:enabled{cursor:pointer;}\", \".r9gx1vl:enabled~.fui-Radio__label{cursor:pointer;}\", \".r9gx1vl:not(:checked)~.fui-Radio__indicator>*{opacity:0;}\", \".r9gx1vl:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}\", \".r9gx1vl:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}\", \".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}\", \".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}\", \".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".r9gx1vl:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".r9gx1vl:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}\", \".r9gx1vl:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}\", \".r9gx1vl:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}\", \".r9gx1vl:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}\", \".r9gx1vl:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}\", \".r1uk1i2c{position:absolute;right:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}\", \".r1uk1i2c:enabled{cursor:pointer;}\", \".r1uk1i2c:enabled~.fui-Radio__label{cursor:pointer;}\", \".r1uk1i2c:not(:checked)~.fui-Radio__indicator>*{opacity:0;}\", \".r1uk1i2c:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}\", \".r1uk1i2c:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}\", \".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}\", \".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}\", \".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".r1uk1i2c:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".r1uk1i2c:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}\", \".r1uk1i2c:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}\", \".r1uk1i2c:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}\", \".r1uk1i2c:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}\", \".r1uk1i2c:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}\"]);\nconst useInputStyles = /*#__PURE__*/__styles({\n below: {\n a9b677: \"fly5x3f\",\n Bqenvij: \"f1je6zif\"\n }\n}, {\n d: [\".fly5x3f{width:100%;}\", \".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}\"]\n});\nconst useIndicatorBaseClassName = /*#__PURE__*/__resetStyles(\"rid4516\", null, [\".rid4516{width:16px;height:16px;font-size:12px;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid;border-radius:var(--borderRadiusCircular);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;}\"]);\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = /*#__PURE__*/__styles({\n base: {\n qb2dma: \"f7nlbp4\",\n z8tnut: \"f1kwiid1\",\n z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n Byoj8tv: \"f5b47ha\",\n uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n },\n after: {\n uwmqm3: [\"fruq291\", \"f7x41pl\"],\n B6of3ja: \"fjzwpt6\",\n jrapky: \"fh6j2fo\"\n },\n below: {\n z8tnut: \"f1ywm7hm\",\n fsow6f: \"f17mccla\"\n }\n}, {\n d: [\".f7nlbp4{align-self:center;}\", \".f1kwiid1{padding-top:var(--spacingVerticalS);}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f5b47ha{padding-bottom:var(--spacingVerticalS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}\", \".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}\", \".f1ywm7hm{padding-top:var(--spacingVerticalXS);}\", \".f17mccla{text-align:center;}\"]\n});\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = state => {\n const {\n labelPosition\n } = state;\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.input.className);\n const indicatorBaseClassName = useIndicatorBaseClassName();\n state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n }\n};\n//# sourceMappingURL=useRadioStyles.styles.js.map"],"names":["radioClassNames","useRadioStyles_unstable","root","indicator","input","label","indicatorSize","useRootBaseClassName","__resetStyles","r","s","useRootStyles","__styles","vertical","Beiy3e4","Bt984gj","d","useInputBaseClassName","useInputStyles","below","a9b677","Bqenvij","useIndicatorBaseClassName","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","after","B6of3ja","jrapky","fsow6f","state","labelPosition","rootBaseClassName","rootStyles","className","mergeClasses","inputBaseClassName","inputStyles","indicatorBaseClassName","labelStyles"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useRadioStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nexport const radioClassNames = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"rm0dkue\", \"rjjxb3w\", {\n r: [\".rm0dkue{display:inline-flex;position:relative;}\", \".rm0dkue:focus{outline-style:none;}\", \".rm0dkue:focus-visible{outline-style:none;}\", \".rm0dkue[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".rm0dkue[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:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".rjjxb3w{display:inline-flex;position:relative;}\", \".rjjxb3w:focus{outline-style:none;}\", \".rjjxb3w:focus-visible{outline-style:none;}\", \".rjjxb3w[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".rjjxb3w[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:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"],\n s: [\"@media (forced-colors: active){.rm0dkue[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}\", \"@media (forced-colors: active){.rjjxb3w[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}\"]\n});\nconst useRootStyles = /*#__PURE__*/__styles({\n vertical: {\n Beiy3e4: \"f1vx9l62\",\n Bt984gj: \"f122n59\"\n }\n}, {\n d: [\".f1vx9l62{flex-direction:column;}\", \".f122n59{align-items:center;}\"]\n});\nconst useInputBaseClassName = /*#__PURE__*/__resetStyles(\"rg1upok\", \"rzwdzb4\", {\n r: [\".rg1upok{position:absolute;left:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}\", \".rg1upok:enabled{cursor:pointer;}\", \".rg1upok:enabled~.fui-Radio__label{cursor:pointer;}\", \".rg1upok:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}\", \".rg1upok:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}\", \".rg1upok:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}\", \".rg1upok:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}\", \".rg1upok:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".rg1upok:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".rg1upok:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".rg1upok:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}\", \".rg1upok:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}\", \".rg1upok:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}\", \".rg1upok:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}\", \".rg1upok:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}\", \".rzwdzb4{position:absolute;right:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}\", \".rzwdzb4:enabled{cursor:pointer;}\", \".rzwdzb4:enabled~.fui-Radio__label{cursor:pointer;}\", \".rzwdzb4:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}\", \".rzwdzb4:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}\", \".rzwdzb4:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}\", \".rzwdzb4:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}\", \".rzwdzb4:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".rzwdzb4:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".rzwdzb4:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".rzwdzb4:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}\", \".rzwdzb4:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}\", \".rzwdzb4:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}\", \".rzwdzb4:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}\", \".rzwdzb4:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}\"],\n s: [\"@media (forced-colors: active){.rg1upok:enabled:not(:checked)~.fui-Radio__indicator{border-color:ButtonBorder;}}\", \"@media (forced-colors: active){.rg1upok:enabled:checked~.fui-Radio__indicator{border-color:Highlight;color:Highlight;}.rg1upok:enabled:checked~.fui-Radio__indicator::after{background-color:Highlight;}}\", \"@media (forced-colors: active){.rg1upok:disabled~.fui-Radio__label{color:GrayText;}}\", \"@media (forced-colors: active){.rg1upok:disabled~.fui-Radio__indicator{border-color:GrayText;color:GrayText;}.rg1upok:disabled~.fui-Radio__indicator::after{background-color:GrayText;}}\", \"@media (forced-colors: active){.rzwdzb4:enabled:not(:checked)~.fui-Radio__indicator{border-color:ButtonBorder;}}\", \"@media (forced-colors: active){.rzwdzb4:enabled:checked~.fui-Radio__indicator{border-color:Highlight;color:Highlight;}.rzwdzb4:enabled:checked~.fui-Radio__indicator::after{background-color:Highlight;}}\", \"@media (forced-colors: active){.rzwdzb4:disabled~.fui-Radio__label{color:GrayText;}}\", \"@media (forced-colors: active){.rzwdzb4:disabled~.fui-Radio__indicator{border-color:GrayText;color:GrayText;}.rzwdzb4:disabled~.fui-Radio__indicator::after{background-color:GrayText;}}\"]\n});\nconst useInputStyles = /*#__PURE__*/__styles({\n below: {\n a9b677: \"fly5x3f\",\n Bqenvij: \"f1je6zif\"\n },\n defaultIndicator: {\n Blbys7f: \"f9ma1gx\"\n },\n customIndicator: {\n Bojc29n: \"fhb1dn5\"\n }\n}, {\n d: [\".fly5x3f{width:100%;}\", \".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}\", \".f9ma1gx:checked~.fui-Radio__indicator::after{content:\\\"\\\";}\", \".fhb1dn5:not(:checked)~.fui-Radio__indicator>*{opacity:0;}\"]\n});\nconst useIndicatorBaseClassName = /*#__PURE__*/__resetStyles(\"rwtekvw\", null, [\".rwtekvw{position:relative;width:16px;height:16px;font-size:12px;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid;border-radius:var(--borderRadiusCircular);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;}\", \".rwtekvw::after{position:absolute;width:16px;height:16px;border-radius:var(--borderRadiusCircular);transform:scale(0.625);background-color:currentColor;}\"]);\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = /*#__PURE__*/__styles({\n base: {\n qb2dma: \"f7nlbp4\",\n z8tnut: \"f1kwiid1\",\n z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n Byoj8tv: \"f5b47ha\",\n uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n },\n after: {\n uwmqm3: [\"fruq291\", \"f7x41pl\"],\n B6of3ja: \"fjzwpt6\",\n jrapky: \"fh6j2fo\"\n },\n below: {\n z8tnut: \"f1ywm7hm\",\n fsow6f: \"f17mccla\"\n }\n}, {\n d: [\".f7nlbp4{align-self:center;}\", \".f1kwiid1{padding-top:var(--spacingVerticalS);}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f5b47ha{padding-bottom:var(--spacingVerticalS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}\", \".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}\", \".f1ywm7hm{padding-top:var(--spacingVerticalXS);}\", \".f17mccla{text-align:center;}\"]\n});\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = state => {\n const {\n labelPosition\n } = state;\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.indicator.children ? inputStyles.customIndicator : inputStyles.defaultIndicator, state.input.className);\n const indicatorBaseClassName = useIndicatorBaseClassName();\n state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n }\n};\n//# sourceMappingURL=useRadioStyles.styles.js.map"],"names":["radioClassNames","useRadioStyles_unstable","root","indicator","input","label","indicatorSize","useRootBaseClassName","__resetStyles","r","s","useRootStyles","__styles","vertical","Beiy3e4","Bt984gj","d","useInputBaseClassName","useInputStyles","below","a9b677","Bqenvij","defaultIndicator","Blbys7f","customIndicator","Bojc29n","useIndicatorBaseClassName","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","after","B6of3ja","jrapky","fsow6f","state","labelPosition","rootBaseClassName","rootStyles","className","mergeClasses","inputBaseClassName","inputStyles","children","indicatorBaseClassName","labelStyles"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-radio",
|
|
3
|
-
"version": "9.1
|
|
3
|
+
"version": "9.2.1",
|
|
4
4
|
"description": "Fluent UI Radio component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -33,20 +33,19 @@
|
|
|
33
33
|
"@fluentui/scripts-tasks": "*"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@fluentui/react-field": "^9.1.
|
|
37
|
-
"@fluentui/react-
|
|
38
|
-
"@fluentui/react-
|
|
39
|
-
"@fluentui/react-label": "^9.1.54",
|
|
36
|
+
"@fluentui/react-field": "^9.1.48",
|
|
37
|
+
"@fluentui/react-jsx-runtime": "^9.0.25",
|
|
38
|
+
"@fluentui/react-label": "^9.1.56",
|
|
40
39
|
"@fluentui/react-shared-contexts": "^9.13.2",
|
|
41
|
-
"@fluentui/react-tabster": "^9.
|
|
40
|
+
"@fluentui/react-tabster": "^9.17.1",
|
|
42
41
|
"@fluentui/react-theme": "^9.1.16",
|
|
43
|
-
"@fluentui/react-utilities": "^9.15.
|
|
42
|
+
"@fluentui/react-utilities": "^9.15.6",
|
|
44
43
|
"@griffel/react": "^1.5.14",
|
|
45
44
|
"@swc/helpers": "^0.5.1"
|
|
46
45
|
},
|
|
47
46
|
"peerDependencies": {
|
|
48
47
|
"@types/react": ">=16.14.0 <19.0.0",
|
|
49
|
-
"@types/react-dom": ">=16.
|
|
48
|
+
"@types/react-dom": ">=16.9.0 <19.0.0",
|
|
50
49
|
"react": ">=16.14.0 <19.0.0",
|
|
51
50
|
"react-dom": ">=16.14.0 <19.0.0",
|
|
52
51
|
"scheduler": "^0.19.0 || ^0.20.0"
|