@fluentui/react-radio 0.0.0-nightly-20240823-1802.1 → 0.0.0-nightly-20240826-0407.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +33 -13
- package/lib/components/Radio/useRadioStyles.styles.js +7 -7
- package/lib/components/Radio/useRadioStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Radio/useRadioStyles.styles.js +48 -48
- package/lib-commonjs/components/Radio/useRadioStyles.styles.js.map +1 -1
- package/package.json +10 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,26 +1,46 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-radio
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 26 Aug 2024 04:12:14 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20240826-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v0.0.0-nightly-20240826-0407.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.2.
|
|
9
|
+
Mon, 26 Aug 2024 04:12:14 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.2.30..@fluentui/react-radio_v0.0.0-nightly-20240826-0407.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-field to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-label to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
21
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
22
|
-
- Bump @fluentui/react-conformance to v0.0.0-nightly-
|
|
23
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-field to v0.0.0-nightly-20240826-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/5dcae25a432204f702bef2a94ec902770060fab7) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240826-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/5dcae25a432204f702bef2a94ec902770060fab7) by beachball)
|
|
17
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20240826-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/5dcae25a432204f702bef2a94ec902770060fab7) by beachball)
|
|
18
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240826-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/5dcae25a432204f702bef2a94ec902770060fab7) by beachball)
|
|
19
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20240826-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/5dcae25a432204f702bef2a94ec902770060fab7) by beachball)
|
|
20
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20240826-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/5dcae25a432204f702bef2a94ec902770060fab7) by beachball)
|
|
21
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20240826-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/5dcae25a432204f702bef2a94ec902770060fab7) by beachball)
|
|
22
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20240826-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/5dcae25a432204f702bef2a94ec902770060fab7) by beachball)
|
|
23
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240826-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/5dcae25a432204f702bef2a94ec902770060fab7) by beachball)
|
|
24
|
+
|
|
25
|
+
## [9.2.30](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.2.30)
|
|
26
|
+
|
|
27
|
+
Thu, 15 Aug 2024 13:49:46 GMT
|
|
28
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.2.29..@fluentui/react-radio_v9.2.30)
|
|
29
|
+
|
|
30
|
+
### Patches
|
|
31
|
+
|
|
32
|
+
- Bump @fluentui/react-field to v9.1.74 ([PR #32313](https://github.com/microsoft/fluentui/pull/32313) by beachball)
|
|
33
|
+
- Bump @fluentui/react-tabster to v9.22.5 ([PR #32313](https://github.com/microsoft/fluentui/pull/32313) by beachball)
|
|
34
|
+
|
|
35
|
+
## [9.2.29](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.2.29)
|
|
36
|
+
|
|
37
|
+
Thu, 15 Aug 2024 08:22:17 GMT
|
|
38
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.2.28..@fluentui/react-radio_v9.2.29)
|
|
39
|
+
|
|
40
|
+
### Patches
|
|
41
|
+
|
|
42
|
+
- Bump @fluentui/react-field to v9.1.73 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
|
|
43
|
+
- Bump @fluentui/react-tabster to v9.22.4 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
|
|
24
44
|
|
|
25
45
|
## [9.2.28](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.2.28)
|
|
26
46
|
|
|
@@ -21,9 +21,9 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
21
21
|
}, {
|
|
22
22
|
d: [".f1vx9l62{flex-direction:column;}", ".f122n59{align-items:center;}"]
|
|
23
23
|
});
|
|
24
|
-
const useInputBaseClassName = /*#__PURE__*/__resetStyles("
|
|
25
|
-
r: [".
|
|
26
|
-
s: ["@media (forced-colors: active){.
|
|
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
27
|
});
|
|
28
28
|
const useInputStyles = /*#__PURE__*/__styles({
|
|
29
29
|
below: {
|
|
@@ -39,7 +39,7 @@ const useInputStyles = /*#__PURE__*/__styles({
|
|
|
39
39
|
}, {
|
|
40
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
|
-
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;}"]);
|
|
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: {
|
|
@@ -51,18 +51,18 @@ const useLabelStyles = /*#__PURE__*/__styles({
|
|
|
51
51
|
B0ocmuz: "f1f5q0n8"
|
|
52
52
|
},
|
|
53
53
|
after: {
|
|
54
|
-
uwmqm3: ["
|
|
54
|
+
uwmqm3: ["fruq291", "f7x41pl"],
|
|
55
55
|
B6of3ja: "fjzwpt6",
|
|
56
56
|
jrapky: "fh6j2fo"
|
|
57
57
|
},
|
|
58
58
|
below: {
|
|
59
|
-
z8tnut: "
|
|
59
|
+
z8tnut: "f1ywm7hm",
|
|
60
60
|
fsow6f: "f17mccla"
|
|
61
61
|
}
|
|
62
62
|
}, {
|
|
63
63
|
d: [".f7nlbp4{align-self:center;}", [".f1f5q0n8{padding:var(--spacingVerticalS) var(--spacingHorizontalS);}", {
|
|
64
64
|
p: -1
|
|
65
|
-
}], ".
|
|
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;}"]
|
|
66
66
|
});
|
|
67
67
|
/**
|
|
68
68
|
* Apply styling to the Radio slots based on the state
|
|
@@ -1 +1 @@
|
|
|
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: `var(--1507, var(--1508, ${tokens.colorNeutralForeground3}))`\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: `var(--1509, var(--1510, ${tokens.colorNeutralStrokeAccessible}))`,\n '@media (forced-colors: active)': {\n borderColor: 'ButtonBorder'\n }\n },\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: `var(--1511, var(--1512, ${tokens.colorNeutralForeground2}))`\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: `var(--1513, var(--1514, ${tokens.colorNeutralStrokeAccessibleHover}))`\n }\n },\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: `var(--1515, var(--1516, ${tokens.colorNeutralForeground1}))`\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: `var(--1517, var(--1518, ${tokens.colorNeutralStrokeAccessiblePressed}))`\n }\n }\n },\n // Colors for the checked state\n ':enabled:checked': {\n [`& ~ .${radioClassNames.label}`]: {\n color: `var(--1519, var(--1520, ${tokens.colorNeutralForeground1}))`\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: `var(--1521, var(--1522, ${tokens.colorCompoundBrandStroke}))`,\n color: `var(--1523, var(--1524, ${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: `var(--1525, var(--1526, ${tokens.colorCompoundBrandStrokeHover}))`,\n color: `var(--1527, var(--1528, ${tokens.colorCompoundBrandForeground1Hover}))`\n }\n },\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: `var(--1529, var(--1530, ${tokens.colorCompoundBrandStrokePressed}))`,\n color: `var(--1531, var(--1532, ${tokens.colorCompoundBrandForeground1Pressed}))`\n }\n }\n },\n // Colors for the disabled state\n ':disabled': {\n [`& ~ .${radioClassNames.label}`]: {\n color: `var(--1533, var(--1534, ${tokens.colorNeutralForegroundDisabled}))`,\n cursor: 'default',\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: `var(--1535, var(--1536, ${tokens.colorNeutralStrokeDisabled}))`,\n color: `var(--1537, var(--1538, ${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: `var(--1539, var(--1540, ${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: `var(--1541, var(--1542, ${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: `var(--1543, var(--1544, ${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: `var(--1545, var(--1546, ${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 'use no memo';\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 'use no memo';\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":[]}
|
|
@@ -54,48 +54,48 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
54
54
|
".f122n59{align-items:center;}"
|
|
55
55
|
]
|
|
56
56
|
});
|
|
57
|
-
const useInputBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
57
|
+
const useInputBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rg1upok", "rzwdzb4", {
|
|
58
58
|
r: [
|
|
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
|
-
".
|
|
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
89
|
],
|
|
90
90
|
s: [
|
|
91
|
-
"@media (forced-colors: active){.
|
|
92
|
-
"@media (forced-colors: active){.
|
|
93
|
-
"@media (forced-colors: active){.
|
|
94
|
-
"@media (forced-colors: active){.
|
|
95
|
-
"@media (forced-colors: active){.
|
|
96
|
-
"@media (forced-colors: active){.
|
|
97
|
-
"@media (forced-colors: active){.
|
|
98
|
-
"@media (forced-colors: active){.
|
|
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
99
|
]
|
|
100
100
|
});
|
|
101
101
|
const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
@@ -117,9 +117,9 @@ const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
117
117
|
".f12zxao0:not(:checked)~.fui-Radio__indicator>*{opacity:0;}"
|
|
118
118
|
]
|
|
119
119
|
});
|
|
120
|
-
const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
121
|
-
".
|
|
122
|
-
".
|
|
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;}"
|
|
123
123
|
]);
|
|
124
124
|
// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
|
|
125
125
|
const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
@@ -133,14 +133,14 @@ const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
133
133
|
},
|
|
134
134
|
after: {
|
|
135
135
|
uwmqm3: [
|
|
136
|
-
"
|
|
137
|
-
"
|
|
136
|
+
"fruq291",
|
|
137
|
+
"f7x41pl"
|
|
138
138
|
],
|
|
139
139
|
B6of3ja: "fjzwpt6",
|
|
140
140
|
jrapky: "fh6j2fo"
|
|
141
141
|
},
|
|
142
142
|
below: {
|
|
143
|
-
z8tnut: "
|
|
143
|
+
z8tnut: "f1ywm7hm",
|
|
144
144
|
fsow6f: "f17mccla"
|
|
145
145
|
}
|
|
146
146
|
}, {
|
|
@@ -152,11 +152,11 @@ const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
152
152
|
p: -1
|
|
153
153
|
}
|
|
154
154
|
],
|
|
155
|
-
".
|
|
156
|
-
".
|
|
155
|
+
".fruq291{padding-left:var(--spacingHorizontalXS);}",
|
|
156
|
+
".f7x41pl{padding-right:var(--spacingHorizontalXS);}",
|
|
157
157
|
".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}",
|
|
158
158
|
".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}",
|
|
159
|
-
".
|
|
159
|
+
".f1ywm7hm{padding-top:var(--spacingVerticalXS);}",
|
|
160
160
|
".f17mccla{text-align:center;}"
|
|
161
161
|
]
|
|
162
162
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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: `var(--1507, var(--1508, ${tokens.colorNeutralForeground3}))`\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: `var(--1509, var(--1510, ${tokens.colorNeutralStrokeAccessible}))`,\n '@media (forced-colors: active)': {\n borderColor: 'ButtonBorder'\n }\n },\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: `var(--1511, var(--1512, ${tokens.colorNeutralForeground2}))`\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: `var(--1513, var(--1514, ${tokens.colorNeutralStrokeAccessibleHover}))`\n }\n },\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: `var(--1515, var(--1516, ${tokens.colorNeutralForeground1}))`\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: `var(--1517, var(--1518, ${tokens.colorNeutralStrokeAccessiblePressed}))`\n }\n }\n },\n // Colors for the checked state\n ':enabled:checked': {\n [`& ~ .${radioClassNames.label}`]: {\n color: `var(--1519, var(--1520, ${tokens.colorNeutralForeground1}))`\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: `var(--1521, var(--1522, ${tokens.colorCompoundBrandStroke}))`,\n color: `var(--1523, var(--1524, ${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: `var(--1525, var(--1526, ${tokens.colorCompoundBrandStrokeHover}))`,\n color: `var(--1527, var(--1528, ${tokens.colorCompoundBrandForeground1Hover}))`\n }\n },\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: `var(--1529, var(--1530, ${tokens.colorCompoundBrandStrokePressed}))`,\n color: `var(--1531, var(--1532, ${tokens.colorCompoundBrandForeground1Pressed}))`\n }\n }\n },\n // Colors for the disabled state\n ':disabled': {\n [`& ~ .${radioClassNames.label}`]: {\n color: `var(--1533, var(--1534, ${tokens.colorNeutralForegroundDisabled}))`,\n cursor: 'default',\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: `var(--1535, var(--1536, ${tokens.colorNeutralStrokeDisabled}))`,\n color: `var(--1537, var(--1538, ${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: `var(--1539, var(--1540, ${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: `var(--1541, var(--1542, ${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: `var(--1543, var(--1544, ${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: `var(--1545, var(--1546, ${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 'use no memo';\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"],"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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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 { 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 'use no memo';\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"],"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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-radio",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20240826-0407.1",
|
|
4
4
|
"description": "Fluent UI Radio component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -26,19 +26,19 @@
|
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
|
29
|
-
"@fluentui/react-conformance": "0.0.0-nightly-
|
|
30
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
29
|
+
"@fluentui/react-conformance": "0.0.0-nightly-20240826-0407.1",
|
|
30
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20240826-0407.1",
|
|
31
31
|
"@fluentui/scripts-api-extractor": "*",
|
|
32
32
|
"@fluentui/scripts-tasks": "*"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-field": "0.0.0-nightly-
|
|
36
|
-
"@fluentui/react-jsx-runtime": "0.0.0-nightly-
|
|
37
|
-
"@fluentui/react-label": "0.0.0-nightly-
|
|
38
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
|
39
|
-
"@fluentui/react-tabster": "0.0.0-nightly-
|
|
40
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
41
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
35
|
+
"@fluentui/react-field": "0.0.0-nightly-20240826-0407.1",
|
|
36
|
+
"@fluentui/react-jsx-runtime": "0.0.0-nightly-20240826-0407.1",
|
|
37
|
+
"@fluentui/react-label": "0.0.0-nightly-20240826-0407.1",
|
|
38
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20240826-0407.1",
|
|
39
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20240826-0407.1",
|
|
40
|
+
"@fluentui/react-theme": "0.0.0-nightly-20240826-0407.1",
|
|
41
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20240826-0407.1",
|
|
42
42
|
"@griffel/react": "^1.5.22",
|
|
43
43
|
"@swc/helpers": "^0.5.1"
|
|
44
44
|
},
|