@fluentui/react-radio 9.2.20 → 9.2.22
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +28 -3
- package/lib/components/Radio/useRadioStyles.styles.js +14 -11
- package/lib/components/Radio/useRadioStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Radio/useRadioStyles.styles.js +26 -29
- package/lib-commonjs/components/Radio/useRadioStyles.styles.js.map +1 -1
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,17 +1,42 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-radio
|
|
2
2
|
|
|
3
|
-
This log was last generated on Thu,
|
|
3
|
+
This log was last generated on Thu, 23 May 2024 07:57:58 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.2.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.2.22)
|
|
8
|
+
|
|
9
|
+
Thu, 23 May 2024 07:57:58 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.2.21..@fluentui/react-radio_v9.2.22)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: replace usage of .shorthands() in styles ([PR #31449](https://github.com/microsoft/fluentui/pull/31449) by olfedias@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-tabster to v9.21.4 ([commit](https://github.com/microsoft/fluentui/commit/10e6758b203de79c53ce31ba264e137f83f50ff4) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.2.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.2.21)
|
|
18
|
+
|
|
19
|
+
Mon, 20 May 2024 12:45:02 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.2.20..@fluentui/react-radio_v9.2.21)
|
|
21
|
+
|
|
22
|
+
### Patches
|
|
23
|
+
|
|
24
|
+
- chore: bump @griffel/react ([PR #31258](https://github.com/microsoft/fluentui/pull/31258) by olfedias@microsoft.com)
|
|
25
|
+
- Bump @fluentui/react-field to v9.1.66 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
|
|
26
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.38 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
|
|
27
|
+
- Bump @fluentui/react-label to v9.1.70 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
|
|
28
|
+
- Bump @fluentui/react-shared-contexts to v9.19.0 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
|
|
29
|
+
- Bump @fluentui/react-tabster to v9.21.3 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
|
|
30
|
+
- Bump @fluentui/react-utilities to v9.18.9 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
|
|
31
|
+
|
|
7
32
|
## [9.2.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.2.20)
|
|
8
33
|
|
|
9
|
-
Thu, 16 May 2024 09:
|
|
34
|
+
Thu, 16 May 2024 09:25:20 GMT
|
|
10
35
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.2.19..@fluentui/react-radio_v9.2.20)
|
|
11
36
|
|
|
12
37
|
### Patches
|
|
13
38
|
|
|
14
|
-
- Bump @fluentui/react-field to v9.1.65 ([
|
|
39
|
+
- Bump @fluentui/react-field to v9.1.65 ([PR #31390](https://github.com/microsoft/fluentui/pull/31390) by beachball)
|
|
15
40
|
|
|
16
41
|
## [9.2.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.2.19)
|
|
17
42
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
|
-
import { __resetStyles, __styles, mergeClasses
|
|
3
|
+
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
|
|
4
4
|
export const radioClassNames = {
|
|
5
5
|
root: 'fui-Radio',
|
|
6
6
|
indicator: 'fui-Radio__indicator',
|
|
@@ -9,9 +9,9 @@ export const radioClassNames = {
|
|
|
9
9
|
};
|
|
10
10
|
// The indicator size is used by the indicator and label styles
|
|
11
11
|
const indicatorSize = '16px';
|
|
12
|
-
const useRootBaseClassName = /*#__PURE__*/__resetStyles("
|
|
13
|
-
r: [".
|
|
14
|
-
s: ["@media (forced-colors: active){.
|
|
12
|
+
const useRootBaseClassName = /*#__PURE__*/__resetStyles("r1siqwd8", "rmnplyc", {
|
|
13
|
+
r: [".r1siqwd8{display:inline-flex;position:relative;}", ".r1siqwd8:focus{outline-style:none;}", ".r1siqwd8:focus-visible{outline-style:none;}", ".r1siqwd8[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1siqwd8[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".rmnplyc{display:inline-flex;position:relative;}", ".rmnplyc:focus{outline-style:none;}", ".rmnplyc:focus-visible{outline-style:none;}", ".rmnplyc[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".rmnplyc[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
|
|
14
|
+
s: ["@media (forced-colors: active){.r1siqwd8[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){.rmnplyc[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"]
|
|
15
15
|
});
|
|
16
16
|
const useRootStyles = /*#__PURE__*/__styles({
|
|
17
17
|
vertical: {
|
|
@@ -34,20 +34,21 @@ const useInputStyles = /*#__PURE__*/__styles({
|
|
|
34
34
|
Blbys7f: "f9ma1gx"
|
|
35
35
|
},
|
|
36
36
|
customIndicator: {
|
|
37
|
-
|
|
37
|
+
Bj53wkj: "f12zxao0"
|
|
38
38
|
}
|
|
39
39
|
}, {
|
|
40
|
-
d: [".fly5x3f{width:100%;}", ".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}", ".f9ma1gx:checked~.fui-Radio__indicator::after{content:\"\";}", ".
|
|
40
|
+
d: [".fly5x3f{width:100%;}", ".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}", ".f9ma1gx:checked~.fui-Radio__indicator::after{content:\"\";}", ".f12zxao0:not(:checked)~.fui-Radio__indicator>*{opacity:0;}"]
|
|
41
41
|
});
|
|
42
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;}"]);
|
|
43
43
|
// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
|
|
44
44
|
const useLabelStyles = /*#__PURE__*/__styles({
|
|
45
45
|
base: {
|
|
46
46
|
qb2dma: "f7nlbp4",
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
47
|
+
Byoj8tv: 0,
|
|
48
|
+
uwmqm3: 0,
|
|
49
|
+
z189sj: 0,
|
|
50
|
+
z8tnut: 0,
|
|
51
|
+
B0ocmuz: "f1f5q0n8"
|
|
51
52
|
},
|
|
52
53
|
after: {
|
|
53
54
|
uwmqm3: ["fruq291", "f7x41pl"],
|
|
@@ -59,7 +60,9 @@ const useLabelStyles = /*#__PURE__*/__styles({
|
|
|
59
60
|
fsow6f: "f17mccla"
|
|
60
61
|
}
|
|
61
62
|
}, {
|
|
62
|
-
d: [".f7nlbp4{align-self:center;}", ".
|
|
63
|
+
d: [".f7nlbp4{align-self:center;}", [".f1f5q0n8{padding:var(--spacingVerticalS) var(--spacingHorizontalS);}", {
|
|
64
|
+
p: -1
|
|
65
|
+
}], ".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;}"]
|
|
63
66
|
});
|
|
64
67
|
/**
|
|
65
68
|
* Apply styling to the Radio slots based on the state
|
|
@@ -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","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 return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","radioClassNames","root","indicator","input","label","indicatorSize","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","Bt984gj","d","useInputBaseClassName","useInputStyles","below","a9b677","Bqenvij","defaultIndicator","Blbys7f","customIndicator","Bj53wkj","useIndicatorBaseClassName","useLabelStyles","base","qb2dma","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","after","B6of3ja","jrapky","fsow6f","p","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 } 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 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 return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -25,22 +25,22 @@ const radioClassNames = {
|
|
|
25
25
|
};
|
|
26
26
|
// The indicator size is used by the indicator and label styles
|
|
27
27
|
const indicatorSize = '16px';
|
|
28
|
-
const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
28
|
+
const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1siqwd8", "rmnplyc", {
|
|
29
29
|
r: [
|
|
30
|
-
".
|
|
31
|
-
".
|
|
32
|
-
".
|
|
33
|
-
".
|
|
34
|
-
".
|
|
35
|
-
".
|
|
36
|
-
".
|
|
37
|
-
".
|
|
38
|
-
".
|
|
39
|
-
".
|
|
30
|
+
".r1siqwd8{display:inline-flex;position:relative;}",
|
|
31
|
+
".r1siqwd8:focus{outline-style:none;}",
|
|
32
|
+
".r1siqwd8:focus-visible{outline-style:none;}",
|
|
33
|
+
".r1siqwd8[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
|
|
34
|
+
".r1siqwd8[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
|
|
35
|
+
".rmnplyc{display:inline-flex;position:relative;}",
|
|
36
|
+
".rmnplyc:focus{outline-style:none;}",
|
|
37
|
+
".rmnplyc:focus-visible{outline-style:none;}",
|
|
38
|
+
".rmnplyc[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
|
|
39
|
+
".rmnplyc[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
|
|
40
40
|
],
|
|
41
41
|
s: [
|
|
42
|
-
"@media (forced-colors: active){.
|
|
43
|
-
"@media (forced-colors: active){.
|
|
42
|
+
"@media (forced-colors: active){.r1siqwd8[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}",
|
|
43
|
+
"@media (forced-colors: active){.rmnplyc[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"
|
|
44
44
|
]
|
|
45
45
|
});
|
|
46
46
|
const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
@@ -107,14 +107,14 @@ const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
107
107
|
Blbys7f: "f9ma1gx"
|
|
108
108
|
},
|
|
109
109
|
customIndicator: {
|
|
110
|
-
|
|
110
|
+
Bj53wkj: "f12zxao0"
|
|
111
111
|
}
|
|
112
112
|
}, {
|
|
113
113
|
d: [
|
|
114
114
|
".fly5x3f{width:100%;}",
|
|
115
115
|
".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}",
|
|
116
116
|
".f9ma1gx:checked~.fui-Radio__indicator::after{content:\"\";}",
|
|
117
|
-
".
|
|
117
|
+
".f12zxao0:not(:checked)~.fui-Radio__indicator>*{opacity:0;}"
|
|
118
118
|
]
|
|
119
119
|
});
|
|
120
120
|
const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rwtekvw", null, [
|
|
@@ -125,16 +125,11 @@ const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rwtek
|
|
|
125
125
|
const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
126
126
|
base: {
|
|
127
127
|
qb2dma: "f7nlbp4",
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
Byoj8tv: "f5b47ha",
|
|
134
|
-
uwmqm3: [
|
|
135
|
-
"f1f5gg8d",
|
|
136
|
-
"f1vdfbxk"
|
|
137
|
-
]
|
|
128
|
+
Byoj8tv: 0,
|
|
129
|
+
uwmqm3: 0,
|
|
130
|
+
z189sj: 0,
|
|
131
|
+
z8tnut: 0,
|
|
132
|
+
B0ocmuz: "f1f5q0n8"
|
|
138
133
|
},
|
|
139
134
|
after: {
|
|
140
135
|
uwmqm3: [
|
|
@@ -151,10 +146,12 @@ const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
151
146
|
}, {
|
|
152
147
|
d: [
|
|
153
148
|
".f7nlbp4{align-self:center;}",
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
149
|
+
[
|
|
150
|
+
".f1f5q0n8{padding:var(--spacingVerticalS) var(--spacingHorizontalS);}",
|
|
151
|
+
{
|
|
152
|
+
p: -1
|
|
153
|
+
}
|
|
154
|
+
],
|
|
158
155
|
".fruq291{padding-left:var(--spacingHorizontalXS);}",
|
|
159
156
|
".f7x41pl{padding-right:var(--spacingHorizontalXS);}",
|
|
160
157
|
".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}",
|
|
@@ -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(\"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 return state;\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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"}
|
|
1
|
+
{"version":3,"sources":["useRadioStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { __resetStyles, __styles, mergeClasses } 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(\"r1siqwd8\", \"rmnplyc\", {\n r: [\".r1siqwd8{display:inline-flex;position:relative;}\", \".r1siqwd8:focus{outline-style:none;}\", \".r1siqwd8:focus-visible{outline-style:none;}\", \".r1siqwd8[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r1siqwd8[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".rmnplyc{display:inline-flex;position:relative;}\", \".rmnplyc:focus{outline-style:none;}\", \".rmnplyc:focus-visible{outline-style:none;}\", \".rmnplyc[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".rmnplyc[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"],\n s: [\"@media (forced-colors: active){.r1siqwd8[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){.rmnplyc[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 Bj53wkj: \"f12zxao0\"\n }\n}, {\n d: [\".fly5x3f{width:100%;}\", \".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}\", \".f9ma1gx:checked~.fui-Radio__indicator::after{content:\\\"\\\";}\", \".f12zxao0: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 Byoj8tv: 0,\n uwmqm3: 0,\n z189sj: 0,\n z8tnut: 0,\n B0ocmuz: \"f1f5q0n8\"\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;}\", [\".f1f5q0n8{padding:var(--spacingVerticalS) var(--spacingHorizontalS);}\", {\n p: -1\n }], \".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 return state;\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","Bj53wkj","useIndicatorBaseClassName","useLabelStyles","base","qb2dma","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","after","B6of3ja","jrapky","fsow6f","p","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.2.
|
|
3
|
+
"version": "9.2.22",
|
|
4
4
|
"description": "Fluent UI Radio component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -33,14 +33,14 @@
|
|
|
33
33
|
"@fluentui/scripts-tasks": "*"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@fluentui/react-field": "^9.1.
|
|
37
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
38
|
-
"@fluentui/react-label": "^9.1.
|
|
39
|
-
"@fluentui/react-shared-contexts": "^9.
|
|
40
|
-
"@fluentui/react-tabster": "^9.21.
|
|
36
|
+
"@fluentui/react-field": "^9.1.66",
|
|
37
|
+
"@fluentui/react-jsx-runtime": "^9.0.38",
|
|
38
|
+
"@fluentui/react-label": "^9.1.70",
|
|
39
|
+
"@fluentui/react-shared-contexts": "^9.19.0",
|
|
40
|
+
"@fluentui/react-tabster": "^9.21.4",
|
|
41
41
|
"@fluentui/react-theme": "^9.1.19",
|
|
42
|
-
"@fluentui/react-utilities": "^9.18.
|
|
43
|
-
"@griffel/react": "^1.5.
|
|
42
|
+
"@fluentui/react-utilities": "^9.18.9",
|
|
43
|
+
"@griffel/react": "^1.5.22",
|
|
44
44
|
"@swc/helpers": "^0.5.1"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|