@fluentui/react-checkbox 9.1.56 → 9.2.0
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 +15 -2
- package/lib/components/Checkbox/useCheckboxStyles.styles.js +29 -50
- package/lib/components/Checkbox/useCheckboxStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Checkbox/useCheckboxStyles.styles.js +44 -146
- package/lib-commonjs/components/Checkbox/useCheckboxStyles.styles.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,25 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-checkbox
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 20 Nov 2023 09:51:20 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.2.0)
|
|
8
|
+
|
|
9
|
+
Mon, 20 Nov 2023 09:51:20 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.1.56..@fluentui/react-checkbox_v9.2.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- fix: Replace child selectors with css vars in Checkbox styles ([PR #29796](https://github.com/microsoft/fluentui/pull/29796) by behowell@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-field to v9.1.42 ([PR #29878](https://github.com/microsoft/fluentui/pull/29878) by beachball)
|
|
16
|
+
- Bump @fluentui/react-label to v9.1.50 ([PR #29878](https://github.com/microsoft/fluentui/pull/29878) by beachball)
|
|
17
|
+
- Bump @fluentui/react-shared-contexts to v9.13.0 ([PR #29878](https://github.com/microsoft/fluentui/pull/29878) by beachball)
|
|
18
|
+
- Bump @fluentui/react-tabster to v9.14.6 ([PR #29878](https://github.com/microsoft/fluentui/pull/29878) by beachball)
|
|
19
|
+
|
|
7
20
|
## [9.1.56](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.1.56)
|
|
8
21
|
|
|
9
|
-
Tue, 14 Nov 2023 17:
|
|
22
|
+
Tue, 14 Nov 2023 17:51:27 GMT
|
|
10
23
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.1.55..@fluentui/react-checkbox_v9.1.56)
|
|
11
24
|
|
|
12
25
|
### Patches
|
|
@@ -7,6 +7,12 @@ export const checkboxClassNames = {
|
|
|
7
7
|
input: 'fui-Checkbox__input',
|
|
8
8
|
indicator: 'fui-Checkbox__indicator'
|
|
9
9
|
};
|
|
10
|
+
// CSS variables used internally in Checkbox's styles
|
|
11
|
+
const vars = {
|
|
12
|
+
indicatorColor: '--fui-Checkbox__indicator--color',
|
|
13
|
+
indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',
|
|
14
|
+
indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor'
|
|
15
|
+
};
|
|
10
16
|
// The indicator size is used by the indicator and label styles
|
|
11
17
|
const indicatorSizeMedium = '16px';
|
|
12
18
|
const indicatorSizeLarge = '20px';
|
|
@@ -14,71 +20,44 @@ const useRootBaseClassName = /*#__PURE__*/__resetStyles("r1qaeuiq", "rm0k3vm", [
|
|
|
14
20
|
const useRootStyles = /*#__PURE__*/__styles({
|
|
15
21
|
unchecked: {
|
|
16
22
|
Bi91k9c: "f3p8bqa",
|
|
17
|
-
|
|
18
|
-
n5iecx: ["f42z0vd", "f1j37kh1"],
|
|
19
|
-
Bq2lx2j: "f10v6cc1",
|
|
20
|
-
Bv7p3up: ["f1j37kh1", "f42z0vd"],
|
|
23
|
+
pv5h1i: "fium13f",
|
|
21
24
|
lj723h: "f1r2dosr",
|
|
22
|
-
|
|
23
|
-
Be5wueo: ["fo8gord", "f18ci1af"],
|
|
24
|
-
Cgwcxn: "fviagcr",
|
|
25
|
-
Btnvhkj: ["f18ci1af", "fo8gord"]
|
|
25
|
+
Hnthvo: "f1729es6"
|
|
26
26
|
},
|
|
27
27
|
checked: {
|
|
28
28
|
sj55zd: "f19n0e5",
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
ns3gzv: "fub8hyy",
|
|
37
|
-
n5iecx: ["fffzknn", "f172bh4s"],
|
|
38
|
-
Bq2lx2j: "f6tipb1",
|
|
39
|
-
Bv7p3up: ["f172bh4s", "fffzknn"],
|
|
40
|
-
Bgesukf: "f8adco2",
|
|
41
|
-
B6u2zzw: "f1lepnt8",
|
|
42
|
-
Be5wueo: ["f80ygm0", "frrkusm"],
|
|
43
|
-
Cgwcxn: "f1gg953z",
|
|
44
|
-
Btnvhkj: ["frrkusm", "f80ygm0"]
|
|
29
|
+
wkncrt: "f35ds98",
|
|
30
|
+
zxk7z7: "f12mnkne",
|
|
31
|
+
Hmsnfy: "fei9a8h",
|
|
32
|
+
e6czan: "fix56y3",
|
|
33
|
+
pv5h1i: "f1bcv2js",
|
|
34
|
+
qbydtz: "f7dr4go",
|
|
35
|
+
Hnthvo: "f1r5cpua"
|
|
45
36
|
},
|
|
46
37
|
mixed: {
|
|
47
38
|
sj55zd: "f19n0e5",
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
n5iecx: ["f1bhstg2", "f6tsdgz"],
|
|
55
|
-
Bq2lx2j: "fqxbw9v",
|
|
56
|
-
Bv7p3up: ["f6tsdgz", "f1bhstg2"],
|
|
57
|
-
cc1l3s: "f1r38qqt",
|
|
58
|
-
B6u2zzw: "f12q3i2l",
|
|
59
|
-
Be5wueo: ["f9g1hxu", "f1o4ic5t"],
|
|
60
|
-
Cgwcxn: "f1c3thm1",
|
|
61
|
-
Btnvhkj: ["f1o4ic5t", "f9g1hxu"],
|
|
62
|
-
km5s60: "ffd07pq"
|
|
39
|
+
Hmsnfy: "f1l27tf0",
|
|
40
|
+
zxk7z7: "fcilktj",
|
|
41
|
+
pv5h1i: "f1lphd54",
|
|
42
|
+
Bunfa6h: "f1obkvq7",
|
|
43
|
+
Hnthvo: "f2gmbuh",
|
|
44
|
+
B15ykmv: "f1oy4fa1"
|
|
63
45
|
},
|
|
64
46
|
disabled: {
|
|
65
47
|
Bceei9c: "f158kwzp",
|
|
66
48
|
sj55zd: "f1s2aq7o",
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
Bphahg7: "f1u7lsiy",
|
|
70
|
-
Jctw66: ["f71co73", "f1q4sfkt"],
|
|
71
|
-
opw9sb: "f3vxa14",
|
|
49
|
+
Hmsnfy: "f1w7mfl5",
|
|
50
|
+
zxk7z7: "fcoafq6",
|
|
72
51
|
Bbusuzp: "f1dcs8yz",
|
|
73
|
-
|
|
52
|
+
mrqfp9: "fxb3eh3"
|
|
74
53
|
}
|
|
75
54
|
}, {
|
|
76
|
-
h: [".f3p8bqa:hover{color:var(--colorNeutralForeground2);}", ".
|
|
77
|
-
a: [".f1r2dosr:active{color:var(--colorNeutralForeground1);}", ".
|
|
78
|
-
d: [".f19n0e5{color:var(--colorNeutralForeground1);}", ".
|
|
55
|
+
h: [".f3p8bqa:hover{color:var(--colorNeutralForeground2);}", ".fium13f:hover{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeAccessibleHover);}", ".fix56y3:hover{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackgroundHover);}", ".f1bcv2js:hover{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackgroundHover);}", ".f1lphd54:hover{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStrokeHover);}", ".f1obkvq7:hover{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1Hover);}"],
|
|
56
|
+
a: [".f1r2dosr:active{color:var(--colorNeutralForeground1);}", ".f1729es6:active{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeAccessiblePressed);}", ".f7dr4go:active{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackgroundPressed);}", ".f1r5cpua:active{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackgroundPressed);}", ".f2gmbuh:active{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStrokePressed);}", ".f1oy4fa1:active{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1Pressed);}"],
|
|
57
|
+
d: [".f19n0e5{color:var(--colorNeutralForeground1);}", ".f35ds98{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackground);}", ".f12mnkne{--fui-Checkbox__indicator--color:var(--colorNeutralForegroundInverted);}", ".fei9a8h{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackground);}", ".f1l27tf0{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStroke);}", ".fcilktj{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1);}", ".f158kwzp{cursor:default;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1w7mfl5{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeDisabled);}", ".fcoafq6{--fui-Checkbox__indicator--color:var(--colorNeutralForegroundDisabled);}"],
|
|
79
58
|
m: [["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
|
|
80
59
|
m: "(forced-colors: active)"
|
|
81
|
-
}], ["@media (forced-colors: active){.
|
|
60
|
+
}], ["@media (forced-colors: active){.fxb3eh3{--fui-Checkbox__indicator--color:GrayText;}}", {
|
|
82
61
|
m: "(forced-colors: active)"
|
|
83
62
|
}]]
|
|
84
63
|
});
|
|
@@ -96,7 +75,7 @@ const useInputStyles = /*#__PURE__*/__styles({
|
|
|
96
75
|
}, {
|
|
97
76
|
d: [".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f1mq5jt6{width:calc(20px + 2 * var(--spacingHorizontalS));}"]
|
|
98
77
|
});
|
|
99
|
-
const useIndicatorBaseClassName = /*#__PURE__*/__resetStyles("
|
|
78
|
+
const useIndicatorBaseClassName = /*#__PURE__*/__resetStyles("rl7ci6d", null, [".rl7ci6d{align-self:flex-start;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--fui-Checkbox__indicator--color);background-color:var(--fui-Checkbox__indicator--backgroundColor);border-color:var(--fui-Checkbox__indicator--borderColor, var(--colorNeutralStrokeAccessible));border-style:solid;border-width:var(--strokeWidthThin);border-radius:var(--borderRadiusSmall);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;font-size:12px;height:16px;width:16px;}"]);
|
|
100
79
|
const useIndicatorStyles = /*#__PURE__*/__styles({
|
|
101
80
|
large: {
|
|
102
81
|
Be2twd7: "f4ybsrx",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","useRootStyles","unchecked","Bi91k9c","ns3gzv","n5iecx","Bq2lx2j","Bv7p3up","lj723h","B6u2zzw","Be5wueo","Cgwcxn","Btnvhkj","checked","sj55zd","Bvs3sgl","opw9sb","C5wppx","B32epof","Bphahg7","Jctw66","Bq0zqd5","Bgesukf","mixed","cc1l3s","km5s60","disabled","Bceei9c","Bbusuzp","B7bxudy","h","a","d","m","useInputBaseClassName","useInputStyles","before","j35jbq","after","oyh7mz","large","a9b677","useIndicatorBaseClassName","useIndicatorStyles","Be2twd7","Bqenvij","circular","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","medium","B6of3ja","jrapky","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"sources":["useCheckboxStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const checkboxClassNames = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\nconst useRootBaseClassName = makeResetStyles({\n position: 'relative',\n display: 'inline-flex',\n cursor: 'pointer',\n verticalAlign: 'middle',\n color: tokens.colorNeutralForeground3,\n ...createFocusOutlineStyle({\n style: {},\n selector: 'focus-within'\n })\n});\nconst useRootStyles = makeStyles({\n unchecked: {\n ':hover': {\n color: tokens.colorNeutralForeground2,\n [`> .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover)\n }\n },\n ':active': {\n color: tokens.colorNeutralForeground1,\n [`> .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed)\n }\n }\n },\n checked: {\n color: tokens.colorNeutralForeground1,\n [`> .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground)\n },\n ':hover': {\n [`> .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover)\n }\n },\n ':active': {\n [`> .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed)\n }\n }\n },\n mixed: {\n color: tokens.colorNeutralForeground1,\n [`> .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1\n },\n ':hover': {\n [`> .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover\n }\n },\n ':active': {\n [`> .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed\n }\n }\n },\n disabled: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n [`> .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled\n },\n '@media (forced-colors: active)': {\n color: 'GrayText',\n [`> .${checkboxClassNames.indicator}`]: {\n color: 'GrayText'\n }\n }\n }\n});\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'inherit',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n top: 0,\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`\n});\nconst useInputStyles = makeStyles({\n before: {\n right: 0\n },\n after: {\n left: 0\n },\n large: {\n width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`\n }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n border: tokens.strokeWidthThin + ' solid ' + tokens.colorNeutralStrokeAccessible,\n borderRadius: tokens.borderRadiusSmall,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n fontSize: '12px',\n height: indicatorSizeMedium,\n width: indicatorSizeMedium\n});\nconst useIndicatorStyles = makeStyles({\n large: {\n fontSize: '16px',\n height: indicatorSizeLarge,\n width: indicatorSizeLarge\n },\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular)\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 color: 'inherit',\n cursor: 'inherit',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS)\n },\n before: {\n paddingRight: tokens.spacingHorizontalXS\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS\n },\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n medium: {\n marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`\n },\n large: {\n marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`\n }\n});\n/**\n * Apply styling to the Checkbox slots based on the state\n */ export const useCheckboxStyles_unstable = (state)=>{\n const { checked, disabled, labelPosition, shape, size } = state;\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);\n }\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,qBAAqB;EAC5BC,KAAK,EAAE,qBAAqB;EAC5BC,SAAS,EAAE;AACf,CAAC;AACD;AACA,MAAMC,mBAAmB,GAAG,MAAM;AAClC,MAAMC,kBAAkB,GAAG,MAAM;AACjC,MAAMC,oBAAoB,gBAAGb,aAAA,yxEAU5B,CAAC;AACF,MAAMc,aAAa,gBAAGb,QAAA;EAAAc,SAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAjB,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAe,OAAA;IAAAb,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAW,KAAA;IAAAT,MAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAJ,MAAA;IAAAZ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAiB,MAAA;IAAAf,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAa,MAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAb,MAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAJ,MAAA;IAAAY,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAoErB,CAAC;AACF,MAAMC,qBAAqB,gBAAG/C,aAAA,6KAW7B,CAAC;AACF,MAAMgD,cAAc,gBAAG/C,QAAA;EAAAgD,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,MAAA;EAAA;AAAA;EAAAT,CAAA;AAAA,CAUtB,CAAC;AACF,MAAMU,yBAAyB,gBAAGvD,aAAA,qZAgBjC,CAAC;AACF,MAAMwD,kBAAkB,gBAAGvD,QAAA;EAAAoD,KAAA;IAAAI,OAAA;IAAAC,OAAA;IAAAJ,MAAA;EAAA;EAAAK,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAlB,CAAA;AAAA,CAS1B,CAAC;AACF;AACA,MAAMmB,cAAc,gBAAG/D,QAAA;EAAAgE,IAAA;IAAAC,MAAA;IAAAvC,MAAA;IAAAa,OAAA;IAAA2B,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAArB,MAAA;IAAAmB,MAAA;EAAA;EAAAjB,KAAA;IAAAmB,MAAA;EAAA;EAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAApB,KAAA;IAAAmB,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAA5B,CAAA;AAAA,CAuBtB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAM6B,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAM;IAAEjD,OAAO;IAAEa,QAAQ;IAAEqC,aAAa;IAAEC,KAAK;IAAEC;EAAK,CAAC,GAAGH,KAAK;EAC/D,MAAMI,iBAAiB,GAAGlE,oBAAoB,CAAC,CAAC;EAChD,MAAMmE,UAAU,GAAGlE,aAAa,CAAC,CAAC;EAClC6D,KAAK,CAACpE,IAAI,CAAC0E,SAAS,GAAG/E,YAAY,CAACI,kBAAkB,CAACC,IAAI,EAAEwE,iBAAiB,EAAExC,QAAQ,GAAGyC,UAAU,CAACzC,QAAQ,GAAGb,OAAO,KAAK,OAAO,GAAGsD,UAAU,CAAC5C,KAAK,GAAGV,OAAO,GAAGsD,UAAU,CAACtD,OAAO,GAAGsD,UAAU,CAACjE,SAAS,EAAE4D,KAAK,CAACpE,IAAI,CAAC0E,SAAS,CAAC;EACpO,MAAMC,kBAAkB,GAAGnC,qBAAqB,CAAC,CAAC;EAClD,MAAMoC,WAAW,GAAGnC,cAAc,CAAC,CAAC;EACpC2B,KAAK,CAAClE,KAAK,CAACwE,SAAS,GAAG/E,YAAY,CAACI,kBAAkB,CAACG,KAAK,EAAEyE,kBAAkB,EAAEJ,IAAI,KAAK,OAAO,IAAIK,WAAW,CAAC9B,KAAK,EAAE8B,WAAW,CAACP,aAAa,CAAC,EAAED,KAAK,CAAClE,KAAK,CAACwE,SAAS,CAAC;EAC5K,MAAMG,sBAAsB,GAAG7B,yBAAyB,CAAC,CAAC;EAC1D,MAAM8B,eAAe,GAAG7B,kBAAkB,CAAC,CAAC;EAC5C,IAAImB,KAAK,CAACjE,SAAS,EAAE;IACjBiE,KAAK,CAACjE,SAAS,CAACuE,SAAS,GAAG/E,YAAY,CAACI,kBAAkB,CAACI,SAAS,EAAE0E,sBAAsB,EAAEN,IAAI,KAAK,OAAO,IAAIO,eAAe,CAAChC,KAAK,EAAEwB,KAAK,KAAK,UAAU,IAAIQ,eAAe,CAAC1B,QAAQ,EAAEgB,KAAK,CAACjE,SAAS,CAACuE,SAAS,CAAC;EAC1N;EACA,MAAMK,WAAW,GAAGtB,cAAc,CAAC,CAAC;EACpC,IAAIW,KAAK,CAACnE,KAAK,EAAE;IACbmE,KAAK,CAACnE,KAAK,CAACyE,SAAS,GAAG/E,YAAY,CAACI,kBAAkB,CAACE,KAAK,EAAE8E,WAAW,CAACrB,IAAI,EAAEqB,WAAW,CAACR,IAAI,CAAC,EAAEQ,WAAW,CAACV,aAAa,CAAC,EAAED,KAAK,CAACnE,KAAK,CAACyE,SAAS,CAAC;EAC1J;EACA,OAAON,KAAK;AAChB,CAAC"}
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","vars","indicatorColor","indicatorBorderColor","indicatorBackgroundColor","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","useRootStyles","unchecked","Bi91k9c","pv5h1i","lj723h","Hnthvo","checked","sj55zd","wkncrt","zxk7z7","Hmsnfy","e6czan","qbydtz","mixed","Bunfa6h","B15ykmv","disabled","Bceei9c","Bbusuzp","mrqfp9","h","a","d","m","useInputBaseClassName","useInputStyles","before","j35jbq","after","oyh7mz","large","a9b677","useIndicatorBaseClassName","useIndicatorStyles","Be2twd7","Bqenvij","circular","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","medium","B6of3ja","jrapky","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"sources":["useCheckboxStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const checkboxClassNames = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator'\n};\n// CSS variables used internally in Checkbox's styles\nconst vars = {\n indicatorColor: '--fui-Checkbox__indicator--color',\n indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',\n indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\nconst useRootBaseClassName = makeResetStyles({\n position: 'relative',\n display: 'inline-flex',\n cursor: 'pointer',\n verticalAlign: 'middle',\n color: tokens.colorNeutralForeground3,\n ...createFocusOutlineStyle({\n style: {},\n selector: 'focus-within'\n })\n});\nconst useRootStyles = makeStyles({\n unchecked: {\n ':hover': {\n color: tokens.colorNeutralForeground2,\n [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessibleHover\n },\n ':active': {\n color: tokens.colorNeutralForeground1,\n [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessiblePressed\n }\n },\n checked: {\n color: tokens.colorNeutralForeground1,\n [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackground,\n [vars.indicatorColor]: tokens.colorNeutralForegroundInverted,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackground,\n ':hover': {\n [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundHover,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundHover\n },\n ':active': {\n [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundPressed,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundPressed\n }\n },\n mixed: {\n color: tokens.colorNeutralForeground1,\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandStroke,\n [vars.indicatorColor]: tokens.colorCompoundBrandForeground1,\n ':hover': {\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokeHover,\n [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokePressed,\n [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Pressed\n }\n },\n disabled: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n [vars.indicatorBorderColor]: tokens.colorNeutralStrokeDisabled,\n [vars.indicatorColor]: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n [vars.indicatorColor]: 'GrayText'\n }\n }\n});\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'inherit',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n top: 0,\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`\n});\nconst useInputStyles = makeStyles({\n before: {\n right: 0\n },\n after: {\n left: 0\n },\n large: {\n width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`\n }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n color: `var(${vars.indicatorColor})`,\n backgroundColor: `var(${vars.indicatorBackgroundColor})`,\n borderColor: `var(${vars.indicatorBorderColor}, ${tokens.colorNeutralStrokeAccessible})`,\n borderStyle: 'solid',\n borderWidth: tokens.strokeWidthThin,\n borderRadius: tokens.borderRadiusSmall,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n fontSize: '12px',\n height: indicatorSizeMedium,\n width: indicatorSizeMedium\n});\nconst useIndicatorStyles = makeStyles({\n large: {\n fontSize: '16px',\n height: indicatorSizeLarge,\n width: indicatorSizeLarge\n },\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular)\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 color: 'inherit',\n cursor: 'inherit',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS)\n },\n before: {\n paddingRight: tokens.spacingHorizontalXS\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS\n },\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n medium: {\n marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`\n },\n large: {\n marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`\n }\n});\n/**\n * Apply styling to the Checkbox slots based on the state\n */ export const useCheckboxStyles_unstable = (state)=>{\n const { checked, disabled, labelPosition, shape, size } = state;\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);\n }\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);\n }\n return state;\n};\n"],"mappings":"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"}
|
|
@@ -23,6 +23,12 @@ const checkboxClassNames = {
|
|
|
23
23
|
input: 'fui-Checkbox__input',
|
|
24
24
|
indicator: 'fui-Checkbox__indicator'
|
|
25
25
|
};
|
|
26
|
+
// CSS variables used internally in Checkbox's styles
|
|
27
|
+
const vars = {
|
|
28
|
+
indicatorColor: '--fui-Checkbox__indicator--color',
|
|
29
|
+
indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',
|
|
30
|
+
indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor'
|
|
31
|
+
};
|
|
26
32
|
// The indicator size is used by the indicator and label styles
|
|
27
33
|
const indicatorSizeMedium = '16px';
|
|
28
34
|
const indicatorSizeLarge = '20px';
|
|
@@ -41,173 +47,65 @@ const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1qaeuiq",
|
|
|
41
47
|
const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
42
48
|
unchecked: {
|
|
43
49
|
Bi91k9c: "f3p8bqa",
|
|
44
|
-
|
|
45
|
-
n5iecx: [
|
|
46
|
-
"f42z0vd",
|
|
47
|
-
"f1j37kh1"
|
|
48
|
-
],
|
|
49
|
-
Bq2lx2j: "f10v6cc1",
|
|
50
|
-
Bv7p3up: [
|
|
51
|
-
"f1j37kh1",
|
|
52
|
-
"f42z0vd"
|
|
53
|
-
],
|
|
50
|
+
pv5h1i: "fium13f",
|
|
54
51
|
lj723h: "f1r2dosr",
|
|
55
|
-
|
|
56
|
-
Be5wueo: [
|
|
57
|
-
"fo8gord",
|
|
58
|
-
"f18ci1af"
|
|
59
|
-
],
|
|
60
|
-
Cgwcxn: "fviagcr",
|
|
61
|
-
Btnvhkj: [
|
|
62
|
-
"f18ci1af",
|
|
63
|
-
"fo8gord"
|
|
64
|
-
]
|
|
52
|
+
Hnthvo: "f1729es6"
|
|
65
53
|
},
|
|
66
54
|
checked: {
|
|
67
55
|
sj55zd: "f19n0e5",
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
Bphahg7: "f1qq5vh1",
|
|
76
|
-
Jctw66: [
|
|
77
|
-
"f13mj44e",
|
|
78
|
-
"fub94a2"
|
|
79
|
-
],
|
|
80
|
-
Bq0zqd5: "f5x9vvn",
|
|
81
|
-
ns3gzv: "fub8hyy",
|
|
82
|
-
n5iecx: [
|
|
83
|
-
"fffzknn",
|
|
84
|
-
"f172bh4s"
|
|
85
|
-
],
|
|
86
|
-
Bq2lx2j: "f6tipb1",
|
|
87
|
-
Bv7p3up: [
|
|
88
|
-
"f172bh4s",
|
|
89
|
-
"fffzknn"
|
|
90
|
-
],
|
|
91
|
-
Bgesukf: "f8adco2",
|
|
92
|
-
B6u2zzw: "f1lepnt8",
|
|
93
|
-
Be5wueo: [
|
|
94
|
-
"f80ygm0",
|
|
95
|
-
"frrkusm"
|
|
96
|
-
],
|
|
97
|
-
Cgwcxn: "f1gg953z",
|
|
98
|
-
Btnvhkj: [
|
|
99
|
-
"frrkusm",
|
|
100
|
-
"f80ygm0"
|
|
101
|
-
]
|
|
56
|
+
wkncrt: "f35ds98",
|
|
57
|
+
zxk7z7: "f12mnkne",
|
|
58
|
+
Hmsnfy: "fei9a8h",
|
|
59
|
+
e6czan: "fix56y3",
|
|
60
|
+
pv5h1i: "f1bcv2js",
|
|
61
|
+
qbydtz: "f7dr4go",
|
|
62
|
+
Hnthvo: "f1r5cpua"
|
|
102
63
|
},
|
|
103
64
|
mixed: {
|
|
104
65
|
sj55zd: "f19n0e5",
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
Jctw66: [
|
|
112
|
-
"fttsnhr",
|
|
113
|
-
"f171e6fm"
|
|
114
|
-
],
|
|
115
|
-
opw9sb: "fvvg2h8",
|
|
116
|
-
ns3gzv: "f1nlwys0",
|
|
117
|
-
n5iecx: [
|
|
118
|
-
"f1bhstg2",
|
|
119
|
-
"f6tsdgz"
|
|
120
|
-
],
|
|
121
|
-
Bq2lx2j: "fqxbw9v",
|
|
122
|
-
Bv7p3up: [
|
|
123
|
-
"f6tsdgz",
|
|
124
|
-
"f1bhstg2"
|
|
125
|
-
],
|
|
126
|
-
cc1l3s: "f1r38qqt",
|
|
127
|
-
B6u2zzw: "f12q3i2l",
|
|
128
|
-
Be5wueo: [
|
|
129
|
-
"f9g1hxu",
|
|
130
|
-
"f1o4ic5t"
|
|
131
|
-
],
|
|
132
|
-
Cgwcxn: "f1c3thm1",
|
|
133
|
-
Btnvhkj: [
|
|
134
|
-
"f1o4ic5t",
|
|
135
|
-
"f9g1hxu"
|
|
136
|
-
],
|
|
137
|
-
km5s60: "ffd07pq"
|
|
66
|
+
Hmsnfy: "f1l27tf0",
|
|
67
|
+
zxk7z7: "fcilktj",
|
|
68
|
+
pv5h1i: "f1lphd54",
|
|
69
|
+
Bunfa6h: "f1obkvq7",
|
|
70
|
+
Hnthvo: "f2gmbuh",
|
|
71
|
+
B15ykmv: "f1oy4fa1"
|
|
138
72
|
},
|
|
139
73
|
disabled: {
|
|
140
74
|
Bceei9c: "f158kwzp",
|
|
141
75
|
sj55zd: "f1s2aq7o",
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
"f1q4sfkt",
|
|
145
|
-
"f71co73"
|
|
146
|
-
],
|
|
147
|
-
Bphahg7: "f1u7lsiy",
|
|
148
|
-
Jctw66: [
|
|
149
|
-
"f71co73",
|
|
150
|
-
"f1q4sfkt"
|
|
151
|
-
],
|
|
152
|
-
opw9sb: "f3vxa14",
|
|
76
|
+
Hmsnfy: "f1w7mfl5",
|
|
77
|
+
zxk7z7: "fcoafq6",
|
|
153
78
|
Bbusuzp: "f1dcs8yz",
|
|
154
|
-
|
|
79
|
+
mrqfp9: "fxb3eh3"
|
|
155
80
|
}
|
|
156
81
|
}, {
|
|
157
82
|
h: [
|
|
158
83
|
".f3p8bqa:hover{color:var(--colorNeutralForeground2);}",
|
|
159
|
-
".
|
|
160
|
-
".
|
|
161
|
-
".
|
|
162
|
-
".
|
|
163
|
-
".
|
|
164
|
-
".fub8hyy:hover>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundHover);}",
|
|
165
|
-
".fffzknn:hover>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundHover);}",
|
|
166
|
-
".f172bh4s:hover>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundHover);}",
|
|
167
|
-
".f6tipb1:hover>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundHover);}",
|
|
168
|
-
".f1nlwys0:hover>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}",
|
|
169
|
-
".f1bhstg2:hover>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}",
|
|
170
|
-
".f6tsdgz:hover>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}",
|
|
171
|
-
".fqxbw9v:hover>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}",
|
|
172
|
-
".f1r38qqt:hover>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Hover);}"
|
|
84
|
+
".fium13f:hover{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeAccessibleHover);}",
|
|
85
|
+
".fix56y3:hover{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackgroundHover);}",
|
|
86
|
+
".f1bcv2js:hover{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackgroundHover);}",
|
|
87
|
+
".f1lphd54:hover{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStrokeHover);}",
|
|
88
|
+
".f1obkvq7:hover{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1Hover);}"
|
|
173
89
|
],
|
|
174
90
|
a: [
|
|
175
91
|
".f1r2dosr:active{color:var(--colorNeutralForeground1);}",
|
|
176
|
-
".
|
|
177
|
-
".
|
|
178
|
-
".
|
|
179
|
-
".
|
|
180
|
-
".
|
|
181
|
-
".f1lepnt8:active>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundPressed);}",
|
|
182
|
-
".f80ygm0:active>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundPressed);}",
|
|
183
|
-
".frrkusm:active>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundPressed);}",
|
|
184
|
-
".f1gg953z:active>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundPressed);}",
|
|
185
|
-
".f12q3i2l:active>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}",
|
|
186
|
-
".f9g1hxu:active>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}",
|
|
187
|
-
".f1o4ic5t:active>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}",
|
|
188
|
-
".f1c3thm1:active>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}",
|
|
189
|
-
".ffd07pq:active>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Pressed);}"
|
|
92
|
+
".f1729es6:active{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeAccessiblePressed);}",
|
|
93
|
+
".f7dr4go:active{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackgroundPressed);}",
|
|
94
|
+
".f1r5cpua:active{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackgroundPressed);}",
|
|
95
|
+
".f2gmbuh:active{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStrokePressed);}",
|
|
96
|
+
".f1oy4fa1:active{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1Pressed);}"
|
|
190
97
|
],
|
|
191
98
|
d: [
|
|
192
99
|
".f19n0e5{color:var(--colorNeutralForeground1);}",
|
|
193
|
-
".
|
|
194
|
-
".
|
|
195
|
-
".
|
|
196
|
-
".
|
|
197
|
-
".
|
|
198
|
-
".f1qq5vh1>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackground);}",
|
|
199
|
-
".f12fgbth>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStroke);}",
|
|
200
|
-
".f171e6fm>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStroke);}",
|
|
201
|
-
".fttsnhr>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStroke);}",
|
|
202
|
-
".f1fyk1ks>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStroke);}",
|
|
203
|
-
".fvvg2h8>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1);}",
|
|
100
|
+
".f35ds98{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackground);}",
|
|
101
|
+
".f12mnkne{--fui-Checkbox__indicator--color:var(--colorNeutralForegroundInverted);}",
|
|
102
|
+
".fei9a8h{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackground);}",
|
|
103
|
+
".f1l27tf0{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStroke);}",
|
|
104
|
+
".fcilktj{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1);}",
|
|
204
105
|
".f158kwzp{cursor:default;}",
|
|
205
106
|
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
|
|
206
|
-
".
|
|
207
|
-
".
|
|
208
|
-
".f71co73>.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}",
|
|
209
|
-
".f1u7lsiy>.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}",
|
|
210
|
-
".f3vxa14>.fui-Checkbox__indicator{color:var(--colorNeutralForegroundDisabled);}"
|
|
107
|
+
".f1w7mfl5{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeDisabled);}",
|
|
108
|
+
".fcoafq6{--fui-Checkbox__indicator--color:var(--colorNeutralForegroundDisabled);}"
|
|
211
109
|
],
|
|
212
110
|
m: [
|
|
213
111
|
[
|
|
@@ -217,7 +115,7 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
217
115
|
}
|
|
218
116
|
],
|
|
219
117
|
[
|
|
220
|
-
"@media (forced-colors: active){.
|
|
118
|
+
"@media (forced-colors: active){.fxb3eh3{--fui-Checkbox__indicator--color:GrayText;}}",
|
|
221
119
|
{
|
|
222
120
|
m: "(forced-colors: active)"
|
|
223
121
|
}
|
|
@@ -250,8 +148,8 @@ const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
250
148
|
".f1mq5jt6{width:calc(20px + 2 * var(--spacingHorizontalS));}"
|
|
251
149
|
]
|
|
252
150
|
});
|
|
253
|
-
const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
254
|
-
".
|
|
151
|
+
const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rl7ci6d", null, [
|
|
152
|
+
".rl7ci6d{align-self:flex-start;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--fui-Checkbox__indicator--color);background-color:var(--fui-Checkbox__indicator--backgroundColor);border-color:var(--fui-Checkbox__indicator--borderColor, var(--colorNeutralStrokeAccessible));border-style:solid;border-width:var(--strokeWidthThin);border-radius:var(--borderRadiusSmall);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;font-size:12px;height:16px;width:16px;}"
|
|
255
153
|
]);
|
|
256
154
|
const useIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
257
155
|
large: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCheckboxStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const checkboxClassNames = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"r1qaeuiq\", \"rm0k3vm\", [\".r1qaeuiq{position:relative;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}\", \".r1qaeuiq:focus{outline-style:none;}\", \".r1qaeuiq:focus-visible{outline-style:none;}\", \".r1qaeuiq[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r1qaeuiq[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);}\", \".rm0k3vm{position:relative;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}\", \".rm0k3vm:focus{outline-style:none;}\", \".rm0k3vm:focus-visible{outline-style:none;}\", \".rm0k3vm[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".rm0k3vm[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);}\"]);\nconst useRootStyles = /*#__PURE__*/__styles({\n unchecked: {\n Bi91k9c: \"f3p8bqa\",\n ns3gzv: \"ffqb913\",\n n5iecx: [\"f42z0vd\", \"f1j37kh1\"],\n Bq2lx2j: \"f10v6cc1\",\n Bv7p3up: [\"f1j37kh1\", \"f42z0vd\"],\n lj723h: \"f1r2dosr\",\n B6u2zzw: \"f1oarbgq\",\n Be5wueo: [\"fo8gord\", \"f18ci1af\"],\n Cgwcxn: \"fviagcr\",\n Btnvhkj: [\"f18ci1af\", \"fo8gord\"]\n },\n checked: {\n sj55zd: \"f19n0e5\",\n Bvs3sgl: \"f5opsb9\",\n opw9sb: \"fpaw01r\",\n C5wppx: \"f1gqj827\",\n B32epof: [\"fub94a2\", \"f13mj44e\"],\n Bphahg7: \"f1qq5vh1\",\n Jctw66: [\"f13mj44e\", \"fub94a2\"],\n Bq0zqd5: \"f5x9vvn\",\n ns3gzv: \"fub8hyy\",\n n5iecx: [\"fffzknn\", \"f172bh4s\"],\n Bq2lx2j: \"f6tipb1\",\n Bv7p3up: [\"f172bh4s\", \"fffzknn\"],\n Bgesukf: \"f8adco2\",\n B6u2zzw: \"f1lepnt8\",\n Be5wueo: [\"f80ygm0\", \"frrkusm\"],\n Cgwcxn: \"f1gg953z\",\n Btnvhkj: [\"frrkusm\", \"f80ygm0\"]\n },\n mixed: {\n sj55zd: \"f19n0e5\",\n C5wppx: \"f12fgbth\",\n B32epof: [\"f171e6fm\", \"fttsnhr\"],\n Bphahg7: \"f1fyk1ks\",\n Jctw66: [\"fttsnhr\", \"f171e6fm\"],\n opw9sb: \"fvvg2h8\",\n ns3gzv: \"f1nlwys0\",\n n5iecx: [\"f1bhstg2\", \"f6tsdgz\"],\n Bq2lx2j: \"fqxbw9v\",\n Bv7p3up: [\"f6tsdgz\", \"f1bhstg2\"],\n cc1l3s: \"f1r38qqt\",\n B6u2zzw: \"f12q3i2l\",\n Be5wueo: [\"f9g1hxu\", \"f1o4ic5t\"],\n Cgwcxn: \"f1c3thm1\",\n Btnvhkj: [\"f1o4ic5t\", \"f9g1hxu\"],\n km5s60: \"ffd07pq\"\n },\n disabled: {\n Bceei9c: \"f158kwzp\",\n sj55zd: \"f1s2aq7o\",\n C5wppx: \"fgiuqeu\",\n B32epof: [\"f1q4sfkt\", \"f71co73\"],\n Bphahg7: \"f1u7lsiy\",\n Jctw66: [\"f71co73\", \"f1q4sfkt\"],\n opw9sb: \"f3vxa14\",\n Bbusuzp: \"f1dcs8yz\",\n B7bxudy: \"f1lmtjkn\"\n }\n}, {\n h: [\".f3p8bqa:hover{color:var(--colorNeutralForeground2);}\", \".ffqb913:hover>.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}\", \".f42z0vd:hover>.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}\", \".f1j37kh1:hover>.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}\", \".f10v6cc1:hover>.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}\", \".f5x9vvn:hover>.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);}\", \".fub8hyy:hover>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundHover);}\", \".fffzknn:hover>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundHover);}\", \".f172bh4s:hover>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundHover);}\", \".f6tipb1:hover>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundHover);}\", \".f1nlwys0:hover>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}\", \".f1bhstg2:hover>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}\", \".f6tsdgz:hover>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}\", \".fqxbw9v:hover>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}\", \".f1r38qqt:hover>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Hover);}\"],\n a: [\".f1r2dosr:active{color:var(--colorNeutralForeground1);}\", \".f1oarbgq:active>.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".fo8gord:active>.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".f18ci1af:active>.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".fviagcr:active>.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".f8adco2:active>.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}\", \".f1lepnt8:active>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundPressed);}\", \".f80ygm0:active>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundPressed);}\", \".frrkusm:active>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundPressed);}\", \".f1gg953z:active>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundPressed);}\", \".f12q3i2l:active>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}\", \".f9g1hxu:active>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}\", \".f1o4ic5t:active>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}\", \".f1c3thm1:active>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}\", \".ffd07pq:active>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Pressed);}\"],\n d: [\".f19n0e5{color:var(--colorNeutralForeground1);}\", \".f5opsb9>.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);}\", \".fpaw01r>.fui-Checkbox__indicator{color:var(--colorNeutralForegroundInverted);}\", \".f1gqj827>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackground);}\", \".fub94a2>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackground);}\", \".f13mj44e>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackground);}\", \".f1qq5vh1>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackground);}\", \".f12fgbth>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStroke);}\", \".f171e6fm>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStroke);}\", \".fttsnhr>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStroke);}\", \".f1fyk1ks>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStroke);}\", \".fvvg2h8>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1);}\", \".f158kwzp{cursor:default;}\", \".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\", \".fgiuqeu>.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}\", \".f1q4sfkt>.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}\", \".f71co73>.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}\", \".f1u7lsiy>.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}\", \".f3vxa14>.fui-Checkbox__indicator{color:var(--colorNeutralForegroundDisabled);}\"],\n m: [[\"@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.f1lmtjkn>.fui-Checkbox__indicator{color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }]]\n});\nconst useInputBaseClassName = /*#__PURE__*/__resetStyles(\"ruo9svu\", null, [\".ruo9svu{box-sizing:border-box;cursor:inherit;height:100%;margin:0;opacity:0;position:absolute;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));}\"]);\nconst useInputStyles = /*#__PURE__*/__styles({\n before: {\n j35jbq: [\"f1e31b4d\", \"f1vgc2s3\"]\n },\n after: {\n oyh7mz: [\"f1vgc2s3\", \"f1e31b4d\"]\n },\n large: {\n a9b677: \"f1mq5jt6\"\n }\n}, {\n d: [\".f1e31b4d{right:0;}\", \".f1vgc2s3{left:0;}\", \".f1mq5jt6{width:calc(20px + 2 * var(--spacingHorizontalS));}\"]\n});\nconst useIndicatorBaseClassName = /*#__PURE__*/__resetStyles(\"rrh91wr\", null, [\".rrh91wr{align-self:flex-start;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);border-radius:var(--borderRadiusSmall);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;font-size:12px;height:16px;width:16px;}\"]);\nconst useIndicatorStyles = /*#__PURE__*/__styles({\n large: {\n Be2twd7: \"f4ybsrx\",\n Bqenvij: \"fjamq6b\",\n a9b677: \"f64fuq3\"\n },\n circular: {\n Bbmb7ep: [\"f8fbkgy\", \"f1nfllo7\"],\n Beyfa6y: [\"f1nfllo7\", \"f8fbkgy\"],\n B7oj6ja: [\"f1djnp8u\", \"f1s8kh49\"],\n Btl43ni: [\"f1s8kh49\", \"f1djnp8u\"]\n }\n}, {\n d: [\".f4ybsrx{font-size:16px;}\", \".fjamq6b{height:20px;}\", \".f64fuq3{width:20px;}\", \".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}\", \".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}\", \".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}\", \".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}\"]\n});\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 sj55zd: \"f1ym3bx4\",\n Bceei9c: \"fpo1scq\",\n z8tnut: \"f1kwiid1\",\n z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n Byoj8tv: \"f5b47ha\",\n uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n },\n before: {\n z189sj: [\"f7x41pl\", \"fruq291\"]\n },\n after: {\n uwmqm3: [\"fruq291\", \"f7x41pl\"]\n },\n medium: {\n B6of3ja: \"fjzwpt6\",\n jrapky: \"fh6j2fo\"\n },\n large: {\n B6of3ja: \"f1xlvstr\",\n jrapky: \"f49ad5g\"\n }\n}, {\n d: [\".f7nlbp4{align-self:center;}\", \".f1ym3bx4{color:inherit;}\", \".fpo1scq{cursor:inherit;}\", \".f1kwiid1{padding-top:var(--spacingVerticalS);}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f5b47ha{padding-bottom:var(--spacingVerticalS);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}\", \".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}\", \".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}\", \".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}\"]\n});\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = state => {\n const {\n checked,\n disabled,\n labelPosition,\n shape,\n size\n } = state;\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);\n }\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);\n }\n return state;\n};\n//# sourceMappingURL=useCheckboxStyles.styles.js.map"],"names":["checkboxClassNames","useCheckboxStyles_unstable","root","label","input","indicator","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","__resetStyles","useRootStyles","__styles","unchecked","Bi91k9c","ns3gzv","n5iecx","Bq2lx2j","Bv7p3up","lj723h","B6u2zzw","Be5wueo","Cgwcxn","Btnvhkj","checked","sj55zd","Bvs3sgl","opw9sb","C5wppx","B32epof","Bphahg7","Jctw66","Bq0zqd5","Bgesukf","mixed","cc1l3s","km5s60","disabled","Bceei9c","Bbusuzp","B7bxudy","h","a","d","m","useInputBaseClassName","useInputStyles","before","j35jbq","after","oyh7mz","large","a9b677","useIndicatorBaseClassName","useIndicatorStyles","Be2twd7","Bqenvij","circular","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","medium","B6of3ja","jrapky","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","mergeClasses","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useCheckboxStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const checkboxClassNames = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator'\n};\n// CSS variables used internally in Checkbox's styles\nconst vars = {\n indicatorColor: '--fui-Checkbox__indicator--color',\n indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',\n indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"r1qaeuiq\", \"rm0k3vm\", [\".r1qaeuiq{position:relative;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}\", \".r1qaeuiq:focus{outline-style:none;}\", \".r1qaeuiq:focus-visible{outline-style:none;}\", \".r1qaeuiq[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r1qaeuiq[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);}\", \".rm0k3vm{position:relative;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}\", \".rm0k3vm:focus{outline-style:none;}\", \".rm0k3vm:focus-visible{outline-style:none;}\", \".rm0k3vm[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".rm0k3vm[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);}\"]);\nconst useRootStyles = /*#__PURE__*/__styles({\n unchecked: {\n Bi91k9c: \"f3p8bqa\",\n pv5h1i: \"fium13f\",\n lj723h: \"f1r2dosr\",\n Hnthvo: \"f1729es6\"\n },\n checked: {\n sj55zd: \"f19n0e5\",\n wkncrt: \"f35ds98\",\n zxk7z7: \"f12mnkne\",\n Hmsnfy: \"fei9a8h\",\n e6czan: \"fix56y3\",\n pv5h1i: \"f1bcv2js\",\n qbydtz: \"f7dr4go\",\n Hnthvo: \"f1r5cpua\"\n },\n mixed: {\n sj55zd: \"f19n0e5\",\n Hmsnfy: \"f1l27tf0\",\n zxk7z7: \"fcilktj\",\n pv5h1i: \"f1lphd54\",\n Bunfa6h: \"f1obkvq7\",\n Hnthvo: \"f2gmbuh\",\n B15ykmv: \"f1oy4fa1\"\n },\n disabled: {\n Bceei9c: \"f158kwzp\",\n sj55zd: \"f1s2aq7o\",\n Hmsnfy: \"f1w7mfl5\",\n zxk7z7: \"fcoafq6\",\n Bbusuzp: \"f1dcs8yz\",\n mrqfp9: \"fxb3eh3\"\n }\n}, {\n h: [\".f3p8bqa:hover{color:var(--colorNeutralForeground2);}\", \".fium13f:hover{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeAccessibleHover);}\", \".fix56y3:hover{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackgroundHover);}\", \".f1bcv2js:hover{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackgroundHover);}\", \".f1lphd54:hover{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStrokeHover);}\", \".f1obkvq7:hover{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1Hover);}\"],\n a: [\".f1r2dosr:active{color:var(--colorNeutralForeground1);}\", \".f1729es6:active{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeAccessiblePressed);}\", \".f7dr4go:active{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackgroundPressed);}\", \".f1r5cpua:active{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackgroundPressed);}\", \".f2gmbuh:active{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStrokePressed);}\", \".f1oy4fa1:active{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1Pressed);}\"],\n d: [\".f19n0e5{color:var(--colorNeutralForeground1);}\", \".f35ds98{--fui-Checkbox__indicator--backgroundColor:var(--colorCompoundBrandBackground);}\", \".f12mnkne{--fui-Checkbox__indicator--color:var(--colorNeutralForegroundInverted);}\", \".fei9a8h{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandBackground);}\", \".f1l27tf0{--fui-Checkbox__indicator--borderColor:var(--colorCompoundBrandStroke);}\", \".fcilktj{--fui-Checkbox__indicator--color:var(--colorCompoundBrandForeground1);}\", \".f158kwzp{cursor:default;}\", \".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\", \".f1w7mfl5{--fui-Checkbox__indicator--borderColor:var(--colorNeutralStrokeDisabled);}\", \".fcoafq6{--fui-Checkbox__indicator--color:var(--colorNeutralForegroundDisabled);}\"],\n m: [[\"@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.fxb3eh3{--fui-Checkbox__indicator--color:GrayText;}}\", {\n m: \"(forced-colors: active)\"\n }]]\n});\nconst useInputBaseClassName = /*#__PURE__*/__resetStyles(\"ruo9svu\", null, [\".ruo9svu{box-sizing:border-box;cursor:inherit;height:100%;margin:0;opacity:0;position:absolute;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));}\"]);\nconst useInputStyles = /*#__PURE__*/__styles({\n before: {\n j35jbq: [\"f1e31b4d\", \"f1vgc2s3\"]\n },\n after: {\n oyh7mz: [\"f1vgc2s3\", \"f1e31b4d\"]\n },\n large: {\n a9b677: \"f1mq5jt6\"\n }\n}, {\n d: [\".f1e31b4d{right:0;}\", \".f1vgc2s3{left:0;}\", \".f1mq5jt6{width:calc(20px + 2 * var(--spacingHorizontalS));}\"]\n});\nconst useIndicatorBaseClassName = /*#__PURE__*/__resetStyles(\"rl7ci6d\", null, [\".rl7ci6d{align-self:flex-start;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--fui-Checkbox__indicator--color);background-color:var(--fui-Checkbox__indicator--backgroundColor);border-color:var(--fui-Checkbox__indicator--borderColor, var(--colorNeutralStrokeAccessible));border-style:solid;border-width:var(--strokeWidthThin);border-radius:var(--borderRadiusSmall);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;font-size:12px;height:16px;width:16px;}\"]);\nconst useIndicatorStyles = /*#__PURE__*/__styles({\n large: {\n Be2twd7: \"f4ybsrx\",\n Bqenvij: \"fjamq6b\",\n a9b677: \"f64fuq3\"\n },\n circular: {\n Bbmb7ep: [\"f8fbkgy\", \"f1nfllo7\"],\n Beyfa6y: [\"f1nfllo7\", \"f8fbkgy\"],\n B7oj6ja: [\"f1djnp8u\", \"f1s8kh49\"],\n Btl43ni: [\"f1s8kh49\", \"f1djnp8u\"]\n }\n}, {\n d: [\".f4ybsrx{font-size:16px;}\", \".fjamq6b{height:20px;}\", \".f64fuq3{width:20px;}\", \".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}\", \".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}\", \".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}\", \".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}\"]\n});\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 sj55zd: \"f1ym3bx4\",\n Bceei9c: \"fpo1scq\",\n z8tnut: \"f1kwiid1\",\n z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n Byoj8tv: \"f5b47ha\",\n uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n },\n before: {\n z189sj: [\"f7x41pl\", \"fruq291\"]\n },\n after: {\n uwmqm3: [\"fruq291\", \"f7x41pl\"]\n },\n medium: {\n B6of3ja: \"fjzwpt6\",\n jrapky: \"fh6j2fo\"\n },\n large: {\n B6of3ja: \"f1xlvstr\",\n jrapky: \"f49ad5g\"\n }\n}, {\n d: [\".f7nlbp4{align-self:center;}\", \".f1ym3bx4{color:inherit;}\", \".fpo1scq{cursor:inherit;}\", \".f1kwiid1{padding-top:var(--spacingVerticalS);}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f5b47ha{padding-bottom:var(--spacingVerticalS);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}\", \".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}\", \".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}\", \".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}\"]\n});\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = state => {\n const {\n checked,\n disabled,\n labelPosition,\n shape,\n size\n } = state;\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);\n }\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);\n }\n return state;\n};\n//# sourceMappingURL=useCheckboxStyles.styles.js.map"],"names":["checkboxClassNames","useCheckboxStyles_unstable","root","label","input","indicator","vars","indicatorColor","indicatorBorderColor","indicatorBackgroundColor","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","__resetStyles","useRootStyles","__styles","unchecked","Bi91k9c","pv5h1i","lj723h","Hnthvo","checked","sj55zd","wkncrt","zxk7z7","Hmsnfy","e6czan","qbydtz","mixed","Bunfa6h","B15ykmv","disabled","Bceei9c","Bbusuzp","mrqfp9","h","a","d","m","useInputBaseClassName","useInputStyles","before","j35jbq","after","oyh7mz","large","a9b677","useIndicatorBaseClassName","useIndicatorStyles","Be2twd7","Bqenvij","circular","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","medium","B6of3ja","jrapky","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","mergeClasses","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-checkbox",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.2.0",
|
|
4
4
|
"description": "Fluent UI checkbox component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -33,12 +33,12 @@
|
|
|
33
33
|
"@fluentui/scripts-tasks": "*"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@fluentui/react-field": "^9.1.
|
|
36
|
+
"@fluentui/react-field": "^9.1.42",
|
|
37
37
|
"@fluentui/react-icons": "^2.0.217",
|
|
38
38
|
"@fluentui/react-jsx-runtime": "^9.0.19",
|
|
39
|
-
"@fluentui/react-label": "^9.1.
|
|
40
|
-
"@fluentui/react-shared-contexts": "^9.
|
|
41
|
-
"@fluentui/react-tabster": "^9.14.
|
|
39
|
+
"@fluentui/react-label": "^9.1.50",
|
|
40
|
+
"@fluentui/react-shared-contexts": "^9.13.0",
|
|
41
|
+
"@fluentui/react-tabster": "^9.14.6",
|
|
42
42
|
"@fluentui/react-theme": "^9.1.16",
|
|
43
43
|
"@fluentui/react-utilities": "^9.15.2",
|
|
44
44
|
"@griffel/react": "^1.5.14",
|