@fluentui/react-checkbox 9.0.0-beta.11 → 9.0.0-beta.12

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.
Files changed (7) hide show
  1. package/CHANGELOG.json +27 -6
  2. package/CHANGELOG.md +17 -7
  3. package/lib/components/Checkbox/useCheckboxStyles.js +6 -2
  4. package/lib/components/Checkbox/useCheckboxStyles.js.map +1 -1
  5. package/lib-commonjs/components/Checkbox/useCheckboxStyles.js +6 -2
  6. package/lib-commonjs/components/Checkbox/useCheckboxStyles.js.map +1 -1
  7. package/package.json +2 -2
package/CHANGELOG.json CHANGED
@@ -2,7 +2,28 @@
2
2
  "name": "@fluentui/react-checkbox",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 19 Apr 2022 19:14:26 GMT",
5
+ "date": "Mon, 25 Apr 2022 09:31:18 GMT",
6
+ "tag": "@fluentui/react-checkbox_v9.0.0-beta.12",
7
+ "version": "9.0.0-beta.12",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "mgodbolt@microsoft.com",
12
+ "package": "@fluentui/react-checkbox",
13
+ "commit": "1cb4002d46236c724a274ff5abafc1c1e99397e2",
14
+ "comment": "Fix disabled HCM styles in Checkbox."
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-checkbox",
19
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.7",
20
+ "commit": "02ca1d3c198452c1693067f5f18bd01b2ed5d6e6"
21
+ }
22
+ ]
23
+ }
24
+ },
25
+ {
26
+ "date": "Tue, 19 Apr 2022 19:17:16 GMT",
6
27
  "tag": "@fluentui/react-checkbox_v9.0.0-beta.11",
7
28
  "version": "9.0.0-beta.11",
8
29
  "comments": {
@@ -41,31 +62,31 @@
41
62
  "author": "beachball",
42
63
  "package": "@fluentui/react-checkbox",
43
64
  "comment": "Bump @fluentui/react-label to v9.0.0-beta.10",
44
- "commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
65
+ "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
45
66
  },
46
67
  {
47
68
  "author": "beachball",
48
69
  "package": "@fluentui/react-checkbox",
49
70
  "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.6",
50
- "commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
71
+ "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
51
72
  },
52
73
  {
53
74
  "author": "beachball",
54
75
  "package": "@fluentui/react-checkbox",
55
76
  "comment": "Bump @fluentui/react-theme to v9.0.0-rc.5",
56
- "commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
77
+ "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
57
78
  },
58
79
  {
59
80
  "author": "beachball",
60
81
  "package": "@fluentui/react-checkbox",
61
82
  "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.6",
62
- "commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
83
+ "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
63
84
  },
64
85
  {
65
86
  "author": "beachball",
66
87
  "package": "@fluentui/react-checkbox",
67
88
  "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4",
68
- "commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
89
+ "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
69
90
  }
70
91
  ],
71
92
  "none": [
package/CHANGELOG.md CHANGED
@@ -1,12 +1,22 @@
1
1
  # Change Log - @fluentui/react-checkbox
2
2
 
3
- This log was last generated on Tue, 19 Apr 2022 19:14:26 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 25 Apr 2022 09:31:18 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-beta.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.0-beta.12)
8
+
9
+ Mon, 25 Apr 2022 09:31:18 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.0.0-beta.11..@fluentui/react-checkbox_v9.0.0-beta.12)
11
+
12
+ ### Changes
13
+
14
+ - Fix disabled HCM styles in Checkbox. ([PR #22595](https://github.com/microsoft/fluentui/pull/22595) by mgodbolt@microsoft.com)
15
+ - Bump @fluentui/react-tabster to v9.0.0-rc.7 ([PR #22601](https://github.com/microsoft/fluentui/pull/22601) by beachball)
16
+
7
17
  ## [9.0.0-beta.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.0-beta.11)
8
18
 
9
- Tue, 19 Apr 2022 19:14:26 GMT
19
+ Tue, 19 Apr 2022 19:17:16 GMT
10
20
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.0.0-beta.10..@fluentui/react-checkbox_v9.0.0-beta.11)
11
21
 
12
22
  ### Changes
@@ -16,11 +26,11 @@ Tue, 19 Apr 2022 19:14:26 GMT
16
26
  - chore: Update Griffel to latest version ([PR #21976](https://github.com/microsoft/fluentui/pull/21976) by olfedias@microsoft.com)
17
27
  - Update Checkbox onChange event parameter to be of type ChangeEvent instead of type FormEvent. ([PR #22057](https://github.com/microsoft/fluentui/pull/22057) by seanmonahan@microsoft.com)
18
28
  - update react-icons version to ^2.0.166-rc.3 from ^2.0.159-beta.10 ([PR #22512](https://github.com/microsoft/fluentui/pull/22512) by seanmonahan@microsoft.com)
19
- - Bump @fluentui/react-label to v9.0.0-beta.10 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
20
- - Bump @fluentui/react-tabster to v9.0.0-rc.6 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
21
- - Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
22
- - Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
23
- - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
29
+ - Bump @fluentui/react-label to v9.0.0-beta.10 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
30
+ - Bump @fluentui/react-tabster to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
31
+ - Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
32
+ - Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
33
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
24
34
 
25
35
  ## [9.0.0-beta.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.0-beta.10)
26
36
 
package/lib/components/Checkbox/useCheckboxStyles.js CHANGED
@@ -128,14 +128,18 @@ const useInputStyles = /*#__PURE__*/__styles({
128
128
  "B0rx68v": "f8c3d4w",
129
129
  "ezr58z": "fvxnmui",
130
130
  "Bdfu378": "f1ceq7vh",
131
+ "Bhmh25c": "f2zvonr",
131
132
  "fvfg5q": "f4ohyq5",
132
133
  "Bbnnodr": ["f1kakd2g", "f3ulah5"],
133
134
  "B7y28oj": "f5fda5m",
134
135
  "Dpxclb": ["f3ulah5", "f1kakd2g"],
135
- "E1kcat": "f1c3drxw"
136
+ "E1kcat": "f1c3drxw",
137
+ "Bt6osj6": "f8cdtmm",
138
+ "Jop56w": "f8701xt"
136
139
  }
137
140
  }, {
138
- "d": [".f1euv43f{position:absolute;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1k6fduh{cursor:pointer;}", ".f1yrrd5t:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator>*{opacity:0;}", ".fvfr0er:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground3);}", ".fcwiijr:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f11s8ldy:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f37mzfx:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".forfpyi:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1vd61pd:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__label{color:var(--colorNeutralForeground2);}", ".f1mzgjal:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1iwu0i3:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f6umev3:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".femu9zt:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1s8s9qo:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".fuvx3by:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fuqx993:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1akce7s:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".feccz1o:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fqgvcms:enabled:checked:not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".f1wvbx6q:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);}", ".fcsc0bc:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{color:var(--colorNeutralForegroundOnBrand);}", ".fkf9h0q:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackground);}", ".faeo8p5:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackground);}", ".f4rpdul:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackground);}", ".fsk3itm:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackground);}", ".f4wqdms:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);}", ".ftufdon:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundHover);}", ".f1ni78ii:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundHover);}", ".f1pe82pw:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundHover);}", ".fxl8eb7:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundHover);}", ".f12pgwe7:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1c5u0pt:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundPressed);}", ".fyfn4nz:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1aaeu2t:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundPressed);}", ".ffzx9q8:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1rm0htn:enabled:indeterminate~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".fpb7n6l:enabled:indeterminate~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStroke);}", ".f1uwkm0d:enabled:indeterminate~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStroke);}", ".fakdbj6:enabled:indeterminate~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStroke);}", ".f180qsza:enabled:indeterminate~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f3nyagc:enabled:indeterminate~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1);}", ".f1eh922j:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}", ".f1f3l6lh:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}", ".faa1us6:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}", ".f1g6jlfz:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}", ".f1d2ycii:enabled:indeterminate:hover~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Hover);}", ".f18ruat1:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}", ".f18b6ltw:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}", ".fd6ao2z:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}", ".fdz9k82:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f8c3d4w:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Pressed);}", ".fvxnmui:disabled{cursor:default;}", ".f1ceq7vh:disabled~.fui-Checkbox__label{color:var(--colorNeutralForegroundDisabled);}", ".f4ohyq5:disabled~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1kakd2g:disabled~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f3ulah5:disabled~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f5fda5m:disabled~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1c3drxw:disabled~.fui-Checkbox__indicator{color:var(--colorNeutralForegroundDisabled);}"]
141
+ "d": [".f1euv43f{position:absolute;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1k6fduh{cursor:pointer;}", ".f1yrrd5t:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator>*{opacity:0;}", ".fvfr0er:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground3);}", ".fcwiijr:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f11s8ldy:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f37mzfx:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".forfpyi:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1vd61pd:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__label{color:var(--colorNeutralForeground2);}", ".f1mzgjal:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1iwu0i3:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f6umev3:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".femu9zt:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1s8s9qo:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".fuvx3by:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fuqx993:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1akce7s:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".feccz1o:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fqgvcms:enabled:checked:not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".f1wvbx6q:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);}", ".fcsc0bc:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{color:var(--colorNeutralForegroundOnBrand);}", ".fkf9h0q:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackground);}", ".faeo8p5:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackground);}", ".f4rpdul:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackground);}", ".fsk3itm:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackground);}", ".f4wqdms:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);}", ".ftufdon:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundHover);}", ".f1ni78ii:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundHover);}", ".f1pe82pw:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundHover);}", ".fxl8eb7:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundHover);}", ".f12pgwe7:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1c5u0pt:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundPressed);}", ".fyfn4nz:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1aaeu2t:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundPressed);}", ".ffzx9q8:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1rm0htn:enabled:indeterminate~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".fpb7n6l:enabled:indeterminate~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStroke);}", ".f1uwkm0d:enabled:indeterminate~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStroke);}", ".fakdbj6:enabled:indeterminate~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStroke);}", ".f180qsza:enabled:indeterminate~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f3nyagc:enabled:indeterminate~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1);}", ".f1eh922j:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}", ".f1f3l6lh:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}", ".faa1us6:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}", ".f1g6jlfz:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}", ".f1d2ycii:enabled:indeterminate:hover~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Hover);}", ".f18ruat1:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}", ".f18b6ltw:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}", ".fd6ao2z:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}", ".fdz9k82:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f8c3d4w:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Pressed);}", ".fvxnmui:disabled{cursor:default;}", ".f1ceq7vh:disabled~.fui-Checkbox__label{color:var(--colorNeutralForegroundDisabled);}", ".f4ohyq5:disabled~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1kakd2g:disabled~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f3ulah5:disabled~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f5fda5m:disabled~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1c3drxw:disabled~.fui-Checkbox__indicator{color:var(--colorNeutralForegroundDisabled);}"],
142
+ "t": ["@media (forced-colors: active){.f2zvonr:disabled~.fui-Checkbox__label{color:GrayText;}}", "@media (forced-colors: active){.f8cdtmm:disabled~.fui-Checkbox__indicator{color:GrayText;}}", "@media (forced-colors: active){.f8701xt:disabled~.fui-Checkbox__indicator svg{color:GrayText;}}"]
139
143
  });
140
144
 
141
145
  const useIndicatorStyles = /*#__PURE__*/__styles({
package/lib/components/Checkbox/useCheckboxStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `checkboxClassNames.root` instead.\n */\nexport const checkboxClassName = 'fui-Checkbox';\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator',\n};\n\n// TODO replace these spacing constants with theme values once they're on the theme\nconst spacingHorizontalS = '8px';\nconst spacingHorizontalM = '12px';\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootStyles = makeStyles({\n base: {\n position: 'relative',\n display: 'inline-flex',\n columnGap: spacingHorizontalM,\n ...shorthands.padding(spacingHorizontalS),\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n boxSizing: 'border-box',\n ...shorthands.margin(0),\n opacity: 0,\n cursor: 'pointer',\n\n // When unchecked, hide the the checkmark icon (child of the indicator slot)\n [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > *`]: {\n opacity: 0,\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked):not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked:not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),\n },\n },\n },\n\n // Colors for the mixed state\n ':enabled:indeterminate': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n\n ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n\n medium: {\n width: indicatorSizeMedium,\n height: indicatorSizeMedium,\n fontSize: '12px',\n },\n\n large: {\n width: indicatorSizeLarge,\n height: indicatorSizeLarge,\n fontSize: '16px',\n },\n\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n userSelect: 'none',\n cursor: 'inherit',\n color: 'inherit',\n },\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 ...shorthands.margin(`calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`, 0),\n },\n large: {\n ...shorthands.margin(`calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`, 0),\n },\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(checkboxClassNames.root, rootStyles.base, state.root.className);\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(checkboxClassNames.input, inputStyles.base, state.input.className);\n\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(\n checkboxClassNames.indicator,\n indicatorStyles.base,\n indicatorStyles[state.size],\n state.shape === 'circular' && indicatorStyles.circular,\n state.indicator.className,\n );\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n checkboxClassNames.label,\n labelStyles.base,\n labelStyles[state.size],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `checkboxClassNames.root` instead.\n */\nexport const checkboxClassName = 'fui-Checkbox';\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator',\n};\n\n// TODO replace these spacing constants with theme values once they're on the theme\nconst spacingHorizontalS = '8px';\nconst spacingHorizontalM = '12px';\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootStyles = makeStyles({\n base: {\n position: 'relative',\n display: 'inline-flex',\n columnGap: spacingHorizontalM,\n ...shorthands.padding(spacingHorizontalS),\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n boxSizing: 'border-box',\n ...shorthands.margin(0),\n opacity: 0,\n cursor: 'pointer',\n\n // When unchecked, hide the the checkmark icon (child of the indicator slot)\n [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > *`]: {\n opacity: 0,\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked):not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked:not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),\n },\n },\n },\n\n // Colors for the mixed state\n ':enabled:indeterminate': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator} svg`]: {\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n },\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n\n ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n\n medium: {\n width: indicatorSizeMedium,\n height: indicatorSizeMedium,\n fontSize: '12px',\n },\n\n large: {\n width: indicatorSizeLarge,\n height: indicatorSizeLarge,\n fontSize: '16px',\n },\n\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n userSelect: 'none',\n cursor: 'inherit',\n color: 'inherit',\n },\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 ...shorthands.margin(`calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`, 0),\n },\n large: {\n ...shorthands.margin(`calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`, 0),\n },\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(checkboxClassNames.root, rootStyles.base, state.root.className);\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(checkboxClassNames.input, inputStyles.base, state.input.className);\n\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(\n checkboxClassNames.indicator,\n indicatorStyles.base,\n indicatorStyles[state.size],\n state.shape === 'circular' && indicatorStyles.circular,\n state.indicator.className,\n );\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n checkboxClassNames.label,\n labelStyles.base,\n labelStyles[state.size],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Checkbox/useCheckboxStyles.js CHANGED
@@ -138,14 +138,18 @@ const useInputStyles = /*#__PURE__*/react_1.__styles({
138
138
  "B0rx68v": "f8c3d4w",
139
139
  "ezr58z": "fvxnmui",
140
140
  "Bdfu378": "f1ceq7vh",
141
+ "Bhmh25c": "f2zvonr",
141
142
  "fvfg5q": "f4ohyq5",
142
143
  "Bbnnodr": ["f1kakd2g", "f3ulah5"],
143
144
  "B7y28oj": "f5fda5m",
144
145
  "Dpxclb": ["f3ulah5", "f1kakd2g"],
145
- "E1kcat": "f1c3drxw"
146
+ "E1kcat": "f1c3drxw",
147
+ "Bt6osj6": "f8cdtmm",
148
+ "Jop56w": "f8701xt"
146
149
  }
147
150
  }, {
148
- "d": [".f1euv43f{position:absolute;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1k6fduh{cursor:pointer;}", ".f1yrrd5t:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator>*{opacity:0;}", ".fvfr0er:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground3);}", ".fcwiijr:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f11s8ldy:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f37mzfx:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".forfpyi:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1vd61pd:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__label{color:var(--colorNeutralForeground2);}", ".f1mzgjal:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1iwu0i3:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f6umev3:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".femu9zt:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1s8s9qo:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".fuvx3by:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fuqx993:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1akce7s:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".feccz1o:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fqgvcms:enabled:checked:not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".f1wvbx6q:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);}", ".fcsc0bc:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{color:var(--colorNeutralForegroundOnBrand);}", ".fkf9h0q:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackground);}", ".faeo8p5:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackground);}", ".f4rpdul:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackground);}", ".fsk3itm:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackground);}", ".f4wqdms:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);}", ".ftufdon:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundHover);}", ".f1ni78ii:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundHover);}", ".f1pe82pw:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundHover);}", ".fxl8eb7:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundHover);}", ".f12pgwe7:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1c5u0pt:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundPressed);}", ".fyfn4nz:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1aaeu2t:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundPressed);}", ".ffzx9q8:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1rm0htn:enabled:indeterminate~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".fpb7n6l:enabled:indeterminate~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStroke);}", ".f1uwkm0d:enabled:indeterminate~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStroke);}", ".fakdbj6:enabled:indeterminate~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStroke);}", ".f180qsza:enabled:indeterminate~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f3nyagc:enabled:indeterminate~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1);}", ".f1eh922j:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}", ".f1f3l6lh:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}", ".faa1us6:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}", ".f1g6jlfz:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}", ".f1d2ycii:enabled:indeterminate:hover~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Hover);}", ".f18ruat1:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}", ".f18b6ltw:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}", ".fd6ao2z:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}", ".fdz9k82:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f8c3d4w:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Pressed);}", ".fvxnmui:disabled{cursor:default;}", ".f1ceq7vh:disabled~.fui-Checkbox__label{color:var(--colorNeutralForegroundDisabled);}", ".f4ohyq5:disabled~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1kakd2g:disabled~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f3ulah5:disabled~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f5fda5m:disabled~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1c3drxw:disabled~.fui-Checkbox__indicator{color:var(--colorNeutralForegroundDisabled);}"]
151
+ "d": [".f1euv43f{position:absolute;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1k6fduh{cursor:pointer;}", ".f1yrrd5t:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator>*{opacity:0;}", ".fvfr0er:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground3);}", ".fcwiijr:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f11s8ldy:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f37mzfx:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".forfpyi:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1vd61pd:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__label{color:var(--colorNeutralForeground2);}", ".f1mzgjal:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1iwu0i3:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f6umev3:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".femu9zt:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1s8s9qo:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".fuvx3by:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fuqx993:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1akce7s:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".feccz1o:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fqgvcms:enabled:checked:not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".f1wvbx6q:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);}", ".fcsc0bc:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{color:var(--colorNeutralForegroundOnBrand);}", ".fkf9h0q:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackground);}", ".faeo8p5:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackground);}", ".f4rpdul:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackground);}", ".fsk3itm:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackground);}", ".f4wqdms:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);}", ".ftufdon:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundHover);}", ".f1ni78ii:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundHover);}", ".f1pe82pw:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundHover);}", ".fxl8eb7:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundHover);}", ".f12pgwe7:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1c5u0pt:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundPressed);}", ".fyfn4nz:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1aaeu2t:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundPressed);}", ".ffzx9q8:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1rm0htn:enabled:indeterminate~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".fpb7n6l:enabled:indeterminate~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStroke);}", ".f1uwkm0d:enabled:indeterminate~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStroke);}", ".fakdbj6:enabled:indeterminate~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStroke);}", ".f180qsza:enabled:indeterminate~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f3nyagc:enabled:indeterminate~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1);}", ".f1eh922j:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}", ".f1f3l6lh:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}", ".faa1us6:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}", ".f1g6jlfz:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}", ".f1d2ycii:enabled:indeterminate:hover~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Hover);}", ".f18ruat1:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}", ".f18b6ltw:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}", ".fd6ao2z:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}", ".fdz9k82:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f8c3d4w:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Pressed);}", ".fvxnmui:disabled{cursor:default;}", ".f1ceq7vh:disabled~.fui-Checkbox__label{color:var(--colorNeutralForegroundDisabled);}", ".f4ohyq5:disabled~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1kakd2g:disabled~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f3ulah5:disabled~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f5fda5m:disabled~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1c3drxw:disabled~.fui-Checkbox__indicator{color:var(--colorNeutralForegroundDisabled);}"],
152
+ "t": ["@media (forced-colors: active){.f2zvonr:disabled~.fui-Checkbox__label{color:GrayText;}}", "@media (forced-colors: active){.f8cdtmm:disabled~.fui-Checkbox__indicator{color:GrayText;}}", "@media (forced-colors: active){.f8701xt:disabled~.fui-Checkbox__indicator svg{color:GrayText;}}"]
149
153
  });
150
154
 
151
155
  const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
package/lib-commonjs/components/Checkbox/useCheckboxStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `checkboxClassNames.root` instead.\n */\nexport const checkboxClassName = 'fui-Checkbox';\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator',\n};\n\n// TODO replace these spacing constants with theme values once they're on the theme\nconst spacingHorizontalS = '8px';\nconst spacingHorizontalM = '12px';\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootStyles = makeStyles({\n base: {\n position: 'relative',\n display: 'inline-flex',\n columnGap: spacingHorizontalM,\n ...shorthands.padding(spacingHorizontalS),\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n boxSizing: 'border-box',\n ...shorthands.margin(0),\n opacity: 0,\n cursor: 'pointer',\n\n // When unchecked, hide the the checkmark icon (child of the indicator slot)\n [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > *`]: {\n opacity: 0,\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked):not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked:not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),\n },\n },\n },\n\n // Colors for the mixed state\n ':enabled:indeterminate': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n\n ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n\n medium: {\n width: indicatorSizeMedium,\n height: indicatorSizeMedium,\n fontSize: '12px',\n },\n\n large: {\n width: indicatorSizeLarge,\n height: indicatorSizeLarge,\n fontSize: '16px',\n },\n\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n userSelect: 'none',\n cursor: 'inherit',\n color: 'inherit',\n },\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 ...shorthands.margin(`calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`, 0),\n },\n large: {\n ...shorthands.margin(`calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`, 0),\n },\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(checkboxClassNames.root, rootStyles.base, state.root.className);\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(checkboxClassNames.input, inputStyles.base, state.input.className);\n\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(\n checkboxClassNames.indicator,\n indicatorStyles.base,\n indicatorStyles[state.size],\n state.shape === 'circular' && indicatorStyles.circular,\n state.indicator.className,\n );\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n checkboxClassNames.label,\n labelStyles.base,\n labelStyles[state.size],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,iBAAA,GAAoB,cAApB;AACA,OAAA,CAAA,kBAAA,GAAoD;AAC/D,EAAA,IAAI,EAAE,cADyD;AAE/D,EAAA,KAAK,EAAE,qBAFwD;AAG/D,EAAA,KAAK,EAAE,qBAHwD;AAI/D,EAAA,SAAS,EAAE;AAJoD,CAApD,C,CAOb;;AACA,MAAM,kBAAkB,GAAG,KAA3B;AACA,MAAM,kBAAkB,GAAG,MAA3B,C,CAEA;;AACA,MAAM,mBAAmB,GAAG,MAA5B;AACA,MAAM,kBAAkB,GAAG,MAA3B;;AAEA,MAAM,aAAa,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAUA,MAAM,cAAc,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAyHA,MAAM,kBAAkB,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA3B;;AAkCA,MAAM,cAAc,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;AAkBA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAAwC;AAChF,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,kBAAA,CAAmB,IAAhC,EAAsC,UAAU,CAAC,IAAjD,EAAuD,KAAK,CAAC,IAAN,CAAW,SAAlE,CAAvB;AAEA,QAAM,WAAW,GAAG,cAAc,EAAlC;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,kBAAA,CAAmB,KAAhC,EAAuC,WAAW,CAAC,IAAnD,EAAyD,KAAK,CAAC,KAAN,CAAY,SAArE,CAAxB;AAEA,QAAM,eAAe,GAAG,kBAAkB,EAA1C;;AACA,MAAI,KAAK,CAAC,SAAV,EAAqB;AACnB,IAAA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,OAAA,CAAA,YAAA,CAC1B,OAAA,CAAA,kBAAA,CAAmB,SADO,EAE1B,eAAe,CAAC,IAFU,EAG1B,eAAe,CAAC,KAAK,CAAC,IAAP,CAHW,EAI1B,KAAK,CAAC,KAAN,KAAgB,UAAhB,IAA8B,eAAe,CAAC,QAJpB,EAK1B,KAAK,CAAC,SAAN,CAAgB,SALU,CAA5B;AAOD;;AAED,QAAM,WAAW,GAAG,cAAc,EAAlC;;AACA,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CACtB,OAAA,CAAA,kBAAA,CAAmB,KADG,EAEtB,WAAW,CAAC,IAFU,EAGtB,WAAW,CAAC,KAAK,CAAC,IAAP,CAHW,EAItB,KAAK,CAAC,KAAN,CAAY,SAJU,CAAxB;AAMD;;AAED,SAAO,KAAP;AACD,CA7BM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `checkboxClassNames.root` instead.\n */\nexport const checkboxClassName = 'fui-Checkbox';\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n root: 'fui-Checkbox',\n label: 'fui-Checkbox__label',\n input: 'fui-Checkbox__input',\n indicator: 'fui-Checkbox__indicator',\n};\n\n// TODO replace these spacing constants with theme values once they're on the theme\nconst spacingHorizontalS = '8px';\nconst spacingHorizontalM = '12px';\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootStyles = makeStyles({\n base: {\n position: 'relative',\n display: 'inline-flex',\n columnGap: spacingHorizontalM,\n ...shorthands.padding(spacingHorizontalS),\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n boxSizing: 'border-box',\n ...shorthands.margin(0),\n opacity: 0,\n cursor: 'pointer',\n\n // When unchecked, hide the the checkmark icon (child of the indicator slot)\n [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > *`]: {\n opacity: 0,\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked):not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked:not(:indeterminate)': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),\n },\n },\n },\n\n // Colors for the mixed state\n ':enabled:indeterminate': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator} svg`]: {\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n },\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n\n ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n\n medium: {\n width: indicatorSizeMedium,\n height: indicatorSizeMedium,\n fontSize: '12px',\n },\n\n large: {\n width: indicatorSizeLarge,\n height: indicatorSizeLarge,\n fontSize: '16px',\n },\n\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n userSelect: 'none',\n cursor: 'inherit',\n color: 'inherit',\n },\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 ...shorthands.margin(`calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`, 0),\n },\n large: {\n ...shorthands.margin(`calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`, 0),\n },\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(checkboxClassNames.root, rootStyles.base, state.root.className);\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(checkboxClassNames.input, inputStyles.base, state.input.className);\n\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(\n checkboxClassNames.indicator,\n indicatorStyles.base,\n indicatorStyles[state.size],\n state.shape === 'circular' && indicatorStyles.circular,\n state.indicator.className,\n );\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n checkboxClassNames.label,\n labelStyles.base,\n labelStyles[state.size],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-checkbox",
3
- "version": "9.0.0-beta.11",
3
+ "version": "9.0.0-beta.12",
4
4
  "description": "Fluent UI checkbox component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -33,7 +33,7 @@
33
33
  "dependencies": {
34
34
  "@fluentui/react-icons": "^2.0.166-rc.3",
35
35
  "@fluentui/react-label": "9.0.0-beta.10",
36
- "@fluentui/react-tabster": "9.0.0-rc.6",
36
+ "@fluentui/react-tabster": "9.0.0-rc.7",
37
37
  "@fluentui/react-theme": "9.0.0-rc.5",
38
38
  "@fluentui/react-utilities": "9.0.0-rc.6",
39
39
  "@griffel/react": "1.0.3",