@fluentui/react-checkbox 9.0.0-beta.10 → 9.0.0-beta.13

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 (19) hide show
  1. package/CHANGELOG.json +146 -1
  2. package/CHANGELOG.md +97 -57
  3. package/dist/{react-checkbox.d.ts → index.d.ts} +7 -1
  4. package/lib/components/Checkbox/Checkbox.types.d.ts +1 -1
  5. package/lib/components/Checkbox/Checkbox.types.js.map +1 -1
  6. package/lib/components/Checkbox/useCheckboxStyles.d.ts +6 -1
  7. package/lib/components/Checkbox/useCheckboxStyles.js +41 -15
  8. package/lib/components/Checkbox/useCheckboxStyles.js.map +1 -1
  9. package/lib/index.d.ts +2 -1
  10. package/lib/index.js +2 -1
  11. package/lib/index.js.map +1 -1
  12. package/lib-commonjs/components/Checkbox/Checkbox.types.d.ts +1 -1
  13. package/lib-commonjs/components/Checkbox/useCheckboxStyles.d.ts +6 -1
  14. package/lib-commonjs/components/Checkbox/useCheckboxStyles.js +42 -16
  15. package/lib-commonjs/components/Checkbox/useCheckboxStyles.js.map +1 -1
  16. package/lib-commonjs/index.d.ts +2 -1
  17. package/lib-commonjs/index.js +39 -2
  18. package/lib-commonjs/index.js.map +1 -1
  19. package/package.json +11 -21
package/lib/components/Checkbox/useCheckboxStyles.js CHANGED
@@ -1,9 +1,17 @@
1
1
  import { shorthands, __styles, mergeClasses } from '@griffel/react';
2
2
  import { createFocusOutlineStyle } from '@fluentui/react-tabster';
3
3
  import { tokens } from '@fluentui/react-theme';
4
+ /**
5
+ * @deprecated Use `checkboxClassNames.root` instead.
6
+ */
7
+
4
8
  export const checkboxClassName = 'fui-Checkbox';
5
- const indicatorClassName = 'fui-Checkbox__indicator';
6
- const labelClassName = 'fui-Checkbox__label'; // TODO replace these spacing constants with theme values once they're on the theme
9
+ export const checkboxClassNames = {
10
+ root: 'fui-Checkbox',
11
+ label: 'fui-Checkbox__label',
12
+ input: 'fui-Checkbox__input',
13
+ indicator: 'fui-Checkbox__indicator'
14
+ }; // TODO replace these spacing constants with theme values once they're on the theme
7
15
 
8
16
  const spacingHorizontalS = '8px';
9
17
  const spacingHorizontalM = '12px'; // The indicator size is used by the indicator and label styles
@@ -21,23 +29,37 @@ const useRootStyles = /*#__PURE__*/__styles({
21
29
  "Byoj8tv": "f150uoa4",
22
30
  "uwmqm3": ["f177v4lu", "f19lj068"],
23
31
  "B486eqv": "f2hkw1w",
24
- "c2y4jd": "fsofd9k",
32
+ "vchsgm": "fbiesyy",
33
+ "ozrjjd": ["fq2kn9", "f1jxwnad"],
34
+ "B7lelfh": "f1il7mou",
35
+ "Bp3tz3o": ["f1jxwnad", "fq2kn9"],
25
36
  "B8vm7ur": "f12sql3b",
26
37
  "f4hv8x": "f1i4q40k",
27
38
  "Gpan81": "fcrbge9",
28
- "z7afg": "ft464mn",
29
39
  "rsjj6t": "fskqmiq",
30
- "Bqsd8kq": "f2gy8jn",
31
- "sfhsbh": "f1pke3uf",
32
- "Bugh3ej": "f18xdlq9",
33
- "hpanx6": "f1114nks",
40
+ "E86f5s": "f1kbdjx9",
41
+ "f5nhos": ["fw1d893", "fpuz8dn"],
42
+ "Bhtq6h7": "f14hlsw1",
43
+ "Bubk9yy": ["fpuz8dn", "fw1d893"],
44
+ "dzajus": "f1bkt4b4",
45
+ "B8gmrwi": ["f16hf5f2", "f1qhqcal"],
46
+ "Byq6oy9": "fyyqeim",
47
+ "Bdy2j38": ["f1qhqcal", "f16hf5f2"],
48
+ "Bi8bqab": ["f1aneyfs", "f15nmyc0"],
49
+ "kq6z4e": ["f15nmyc0", "f1aneyfs"],
50
+ "l5tc3q": ["f3cpy5b", "f13v6kgv"],
51
+ "d1z3ck": ["f13v6kgv", "f3cpy5b"],
52
+ "epcuuz": "filx0we",
53
+ "Ba33l6n": ["f1horip2", "fgnx9ah"],
54
+ "va7z1g": "fkii2tb",
55
+ "Bmi6mq9": ["fgnx9ah", "f1horip2"],
34
56
  "Bjkpy09": "f1unftzx",
35
57
  "Jxg1p8": "f8rjbh6",
36
58
  "Bc94xmo": ["fxfgh6q", "f8l10fm"],
37
59
  "Bj23z95": ["f8l10fm", "fxfgh6q"]
38
60
  }
39
61
  }, {
40
- "d": [".f10pi13n{position:relative;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", "[data-keyboard-nav] .fsofd9k:focus-within{border-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .ft464mn:focus-within:after{box-sizing:outline-box;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f2gy8jn:focus-within:after{border-style:solid;}", "[data-keyboard-nav] .f1pke3uf:focus-within:after{border-width:2px;}", "[data-keyboard-nav] .f18xdlq9:focus-within:after{border-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1114nks:focus-within:after{border-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}"],
62
+ "d": [".f10pi13n{position:relative;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", "[data-keyboard-nav] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f1kbdjx9:focus-within:after{border-top-style:solid;}", "[data-keyboard-nav] .fw1d893:focus-within:after{border-right-style:solid;}", "[data-keyboard-nav] .fpuz8dn:focus-within:after{border-left-style:solid;}", "[data-keyboard-nav] .f14hlsw1:focus-within:after{border-bottom-style:solid;}", "[data-keyboard-nav] .f1bkt4b4:focus-within:after{border-top-width:2px;}", "[data-keyboard-nav] .f16hf5f2:focus-within:after{border-right-width:2px;}", "[data-keyboard-nav] .f1qhqcal:focus-within:after{border-left-width:2px;}", "[data-keyboard-nav] .fyyqeim:focus-within:after{border-bottom-width:2px;}", "[data-keyboard-nav] .f1aneyfs:focus-within:after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f15nmyc0:focus-within:after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f3cpy5b:focus-within:after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f13v6kgv:focus-within:after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .filx0we:focus-within:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1horip2:focus-within:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgnx9ah:focus-within:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fkii2tb:focus-within:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}"],
41
63
  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
42
64
  });
43
65
 
@@ -106,14 +128,18 @@ const useInputStyles = /*#__PURE__*/__styles({
106
128
  "B0rx68v": "f8c3d4w",
107
129
  "ezr58z": "fvxnmui",
108
130
  "Bdfu378": "f1ceq7vh",
131
+ "Bhmh25c": "f2zvonr",
109
132
  "fvfg5q": "f4ohyq5",
110
133
  "Bbnnodr": ["f1kakd2g", "f3ulah5"],
111
134
  "B7y28oj": "f5fda5m",
112
135
  "Dpxclb": ["f3ulah5", "f1kakd2g"],
113
- "E1kcat": "f1c3drxw"
136
+ "E1kcat": "f1c3drxw",
137
+ "Bt6osj6": "f8cdtmm",
138
+ "Jop56w": "f8701xt"
114
139
  }
115
140
  }, {
116
- "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;}}"]
117
143
  });
118
144
 
119
145
  const useIndicatorStyles = /*#__PURE__*/__styles({
@@ -190,19 +216,19 @@ const useLabelStyles = /*#__PURE__*/__styles({
190
216
 
191
217
  export const useCheckboxStyles_unstable = state => {
192
218
  const rootStyles = useRootStyles();
193
- state.root.className = mergeClasses(checkboxClassName, rootStyles.base, state.root.className);
219
+ state.root.className = mergeClasses(checkboxClassNames.root, rootStyles.base, state.root.className);
194
220
  const inputStyles = useInputStyles();
195
- state.input.className = mergeClasses(inputStyles.base, state.input.className);
221
+ state.input.className = mergeClasses(checkboxClassNames.input, inputStyles.base, state.input.className);
196
222
  const indicatorStyles = useIndicatorStyles();
197
223
 
198
224
  if (state.indicator) {
199
- state.indicator.className = mergeClasses(indicatorClassName, indicatorStyles.base, indicatorStyles[state.size], state.shape === 'circular' && indicatorStyles.circular, state.indicator.className);
225
+ state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorStyles.base, indicatorStyles[state.size], state.shape === 'circular' && indicatorStyles.circular, state.indicator.className);
200
226
  }
201
227
 
202
228
  const labelStyles = useLabelStyles();
203
229
 
204
230
  if (state.label) {
205
- state.label.className = mergeClasses(labelClassName, labelStyles.base, labelStyles[state.size], state.label.className);
231
+ state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[state.size], state.label.className);
206
232
  }
207
233
 
208
234
  return state;
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 { CheckboxState } from './Checkbox.types';\n\nexport const checkboxClassName = 'fui-Checkbox';\nconst indicatorClassName = 'fui-Checkbox__indicator';\nconst labelClassName = 'fui-Checkbox__label';\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) ~ .${indicatorClassName} > *`]: {\n opacity: 0,\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked):not(:indeterminate)': {\n [`& ~ .${labelClassName}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${indicatorClassName}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${labelClassName}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${indicatorClassName}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':active:hover': {\n [`& ~ .${labelClassName}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${indicatorClassName}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked:not(:indeterminate)': {\n [`& ~ .${labelClassName}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${indicatorClassName}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n },\n\n ':hover': {\n [`& ~ .${indicatorClassName}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),\n },\n },\n\n ':active:hover': {\n [`& ~ .${indicatorClassName}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),\n },\n },\n },\n\n // Colors for the mixed state\n ':enabled:indeterminate': {\n [`& ~ .${labelClassName}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${indicatorClassName}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${indicatorClassName}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${indicatorClassName}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${labelClassName}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n [`& ~ .${indicatorClassName}`]: {\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(checkboxClassName, rootStyles.base, state.root.className);\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(inputStyles.base, state.input.className);\n\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(\n indicatorClassName,\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 labelClassName,\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/index.d.ts CHANGED
@@ -1 +1,2 @@
1
- export * from './Checkbox';
1
+ export { Checkbox, checkboxClassName, checkboxClassNames, renderCheckbox_unstable, useCheckboxStyles_unstable, useCheckbox_unstable, } from './Checkbox';
2
+ export type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox';
package/lib/index.js CHANGED
@@ -1,2 +1,3 @@
1
- export * from './Checkbox';
1
+ export { Checkbox, // eslint-disable-next-line deprecation/deprecation
2
+ checkboxClassName, checkboxClassNames, renderCheckbox_unstable, useCheckboxStyles_unstable, useCheckbox_unstable } from './Checkbox';
2
3
  //# sourceMappingURL=index.js.map
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC","sourcesContent":["export * from './Checkbox';\n"]}
1
+ {"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,QADF,EAEE;AACA,iBAHF,EAIE,kBAJF,EAKE,uBALF,EAME,0BANF,EAOE,oBAPF,QAQO,YARP","sourcesContent":["export {\n Checkbox,\n // eslint-disable-next-line deprecation/deprecation\n checkboxClassName,\n checkboxClassNames,\n renderCheckbox_unstable,\n useCheckboxStyles_unstable,\n useCheckbox_unstable,\n} from './Checkbox';\nexport type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox';\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Checkbox/Checkbox.types.d.ts CHANGED
@@ -71,7 +71,7 @@ export declare type CheckboxProps = Omit<ComponentProps<Partial<CheckboxSlots>,
71
71
  /**
72
72
  * Callback to be called when the checked state value changes.
73
73
  */
74
- onChange?: (ev: React.FormEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;
74
+ onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;
75
75
  /**
76
76
  * Whether the checkbox should be rendered as checked by default.
77
77
  */
package/lib-commonjs/components/Checkbox/useCheckboxStyles.d.ts CHANGED
@@ -1,5 +1,10 @@
1
- import { CheckboxState } from './Checkbox.types';
1
+ import { CheckboxSlots, CheckboxState } from './Checkbox.types';
2
+ import type { SlotClassNames } from '@fluentui/react-utilities';
3
+ /**
4
+ * @deprecated Use `checkboxClassNames.root` instead.
5
+ */
2
6
  export declare const checkboxClassName = "fui-Checkbox";
7
+ export declare const checkboxClassNames: SlotClassNames<CheckboxSlots>;
3
8
  /**
4
9
  * Apply styling to the Checkbox slots based on the state
5
10
  */
package/lib-commonjs/components/Checkbox/useCheckboxStyles.js CHANGED
@@ -3,17 +3,25 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useCheckboxStyles_unstable = exports.checkboxClassName = void 0;
6
+ exports.useCheckboxStyles_unstable = exports.checkboxClassNames = exports.checkboxClassName = void 0;
7
7
 
8
8
  const react_1 = /*#__PURE__*/require("@griffel/react");
9
9
 
10
10
  const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
11
11
 
12
12
  const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
13
+ /**
14
+ * @deprecated Use `checkboxClassNames.root` instead.
15
+ */
16
+
13
17
 
14
18
  exports.checkboxClassName = 'fui-Checkbox';
15
- const indicatorClassName = 'fui-Checkbox__indicator';
16
- const labelClassName = 'fui-Checkbox__label'; // TODO replace these spacing constants with theme values once they're on the theme
19
+ exports.checkboxClassNames = {
20
+ root: 'fui-Checkbox',
21
+ label: 'fui-Checkbox__label',
22
+ input: 'fui-Checkbox__input',
23
+ indicator: 'fui-Checkbox__indicator'
24
+ }; // TODO replace these spacing constants with theme values once they're on the theme
17
25
 
18
26
  const spacingHorizontalS = '8px';
19
27
  const spacingHorizontalM = '12px'; // The indicator size is used by the indicator and label styles
@@ -31,23 +39,37 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
31
39
  "Byoj8tv": "f150uoa4",
32
40
  "uwmqm3": ["f177v4lu", "f19lj068"],
33
41
  "B486eqv": "f2hkw1w",
34
- "c2y4jd": "fsofd9k",
42
+ "vchsgm": "fbiesyy",
43
+ "ozrjjd": ["fq2kn9", "f1jxwnad"],
44
+ "B7lelfh": "f1il7mou",
45
+ "Bp3tz3o": ["f1jxwnad", "fq2kn9"],
35
46
  "B8vm7ur": "f12sql3b",
36
47
  "f4hv8x": "f1i4q40k",
37
48
  "Gpan81": "fcrbge9",
38
- "z7afg": "ft464mn",
39
49
  "rsjj6t": "fskqmiq",
40
- "Bqsd8kq": "f2gy8jn",
41
- "sfhsbh": "f1pke3uf",
42
- "Bugh3ej": "f18xdlq9",
43
- "hpanx6": "f1114nks",
50
+ "E86f5s": "f1kbdjx9",
51
+ "f5nhos": ["fw1d893", "fpuz8dn"],
52
+ "Bhtq6h7": "f14hlsw1",
53
+ "Bubk9yy": ["fpuz8dn", "fw1d893"],
54
+ "dzajus": "f1bkt4b4",
55
+ "B8gmrwi": ["f16hf5f2", "f1qhqcal"],
56
+ "Byq6oy9": "fyyqeim",
57
+ "Bdy2j38": ["f1qhqcal", "f16hf5f2"],
58
+ "Bi8bqab": ["f1aneyfs", "f15nmyc0"],
59
+ "kq6z4e": ["f15nmyc0", "f1aneyfs"],
60
+ "l5tc3q": ["f3cpy5b", "f13v6kgv"],
61
+ "d1z3ck": ["f13v6kgv", "f3cpy5b"],
62
+ "epcuuz": "filx0we",
63
+ "Ba33l6n": ["f1horip2", "fgnx9ah"],
64
+ "va7z1g": "fkii2tb",
65
+ "Bmi6mq9": ["fgnx9ah", "f1horip2"],
44
66
  "Bjkpy09": "f1unftzx",
45
67
  "Jxg1p8": "f8rjbh6",
46
68
  "Bc94xmo": ["fxfgh6q", "f8l10fm"],
47
69
  "Bj23z95": ["f8l10fm", "fxfgh6q"]
48
70
  }
49
71
  }, {
50
- "d": [".f10pi13n{position:relative;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", "[data-keyboard-nav] .fsofd9k:focus-within{border-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .ft464mn:focus-within:after{box-sizing:outline-box;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f2gy8jn:focus-within:after{border-style:solid;}", "[data-keyboard-nav] .f1pke3uf:focus-within:after{border-width:2px;}", "[data-keyboard-nav] .f18xdlq9:focus-within:after{border-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1114nks:focus-within:after{border-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}"],
72
+ "d": [".f10pi13n{position:relative;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", "[data-keyboard-nav] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f1kbdjx9:focus-within:after{border-top-style:solid;}", "[data-keyboard-nav] .fw1d893:focus-within:after{border-right-style:solid;}", "[data-keyboard-nav] .fpuz8dn:focus-within:after{border-left-style:solid;}", "[data-keyboard-nav] .f14hlsw1:focus-within:after{border-bottom-style:solid;}", "[data-keyboard-nav] .f1bkt4b4:focus-within:after{border-top-width:2px;}", "[data-keyboard-nav] .f16hf5f2:focus-within:after{border-right-width:2px;}", "[data-keyboard-nav] .f1qhqcal:focus-within:after{border-left-width:2px;}", "[data-keyboard-nav] .fyyqeim:focus-within:after{border-bottom-width:2px;}", "[data-keyboard-nav] .f1aneyfs:focus-within:after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f15nmyc0:focus-within:after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f3cpy5b:focus-within:after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f13v6kgv:focus-within:after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .filx0we:focus-within:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1horip2:focus-within:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgnx9ah:focus-within:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fkii2tb:focus-within:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}"],
51
73
  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
52
74
  });
53
75
 
@@ -116,14 +138,18 @@ const useInputStyles = /*#__PURE__*/react_1.__styles({
116
138
  "B0rx68v": "f8c3d4w",
117
139
  "ezr58z": "fvxnmui",
118
140
  "Bdfu378": "f1ceq7vh",
141
+ "Bhmh25c": "f2zvonr",
119
142
  "fvfg5q": "f4ohyq5",
120
143
  "Bbnnodr": ["f1kakd2g", "f3ulah5"],
121
144
  "B7y28oj": "f5fda5m",
122
145
  "Dpxclb": ["f3ulah5", "f1kakd2g"],
123
- "E1kcat": "f1c3drxw"
146
+ "E1kcat": "f1c3drxw",
147
+ "Bt6osj6": "f8cdtmm",
148
+ "Jop56w": "f8701xt"
124
149
  }
125
150
  }, {
126
- "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;}}"]
127
153
  });
128
154
 
129
155
  const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
@@ -200,19 +226,19 @@ const useLabelStyles = /*#__PURE__*/react_1.__styles({
200
226
 
201
227
  const useCheckboxStyles_unstable = state => {
202
228
  const rootStyles = useRootStyles();
203
- state.root.className = react_1.mergeClasses(exports.checkboxClassName, rootStyles.base, state.root.className);
229
+ state.root.className = react_1.mergeClasses(exports.checkboxClassNames.root, rootStyles.base, state.root.className);
204
230
  const inputStyles = useInputStyles();
205
- state.input.className = react_1.mergeClasses(inputStyles.base, state.input.className);
231
+ state.input.className = react_1.mergeClasses(exports.checkboxClassNames.input, inputStyles.base, state.input.className);
206
232
  const indicatorStyles = useIndicatorStyles();
207
233
 
208
234
  if (state.indicator) {
209
- state.indicator.className = react_1.mergeClasses(indicatorClassName, indicatorStyles.base, indicatorStyles[state.size], state.shape === 'circular' && indicatorStyles.circular, state.indicator.className);
235
+ state.indicator.className = react_1.mergeClasses(exports.checkboxClassNames.indicator, indicatorStyles.base, indicatorStyles[state.size], state.shape === 'circular' && indicatorStyles.circular, state.indicator.className);
210
236
  }
211
237
 
212
238
  const labelStyles = useLabelStyles();
213
239
 
214
240
  if (state.label) {
215
- state.label.className = react_1.mergeClasses(labelClassName, labelStyles.base, labelStyles[state.size], state.label.className);
241
+ state.label.className = react_1.mergeClasses(exports.checkboxClassNames.label, labelStyles.base, labelStyles[state.size], state.label.className);
216
242
  }
217
243
 
218
244
  return state;
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 { CheckboxState } from './Checkbox.types';\n\nexport const checkboxClassName = 'fui-Checkbox';\nconst indicatorClassName = 'fui-Checkbox__indicator';\nconst labelClassName = 'fui-Checkbox__label';\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) ~ .${indicatorClassName} > *`]: {\n opacity: 0,\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked):not(:indeterminate)': {\n [`& ~ .${labelClassName}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${indicatorClassName}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${labelClassName}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${indicatorClassName}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':active:hover': {\n [`& ~ .${labelClassName}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${indicatorClassName}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked:not(:indeterminate)': {\n [`& ~ .${labelClassName}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${indicatorClassName}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n },\n\n ':hover': {\n [`& ~ .${indicatorClassName}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),\n },\n },\n\n ':active:hover': {\n [`& ~ .${indicatorClassName}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),\n },\n },\n },\n\n // Colors for the mixed state\n ':enabled:indeterminate': {\n [`& ~ .${labelClassName}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${indicatorClassName}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${indicatorClassName}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${indicatorClassName}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${labelClassName}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n [`& ~ .${indicatorClassName}`]: {\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(checkboxClassName, rootStyles.base, state.root.className);\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(inputStyles.base, state.input.className);\n\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(\n indicatorClassName,\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 labelClassName,\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/index.d.ts CHANGED
@@ -1 +1,2 @@
1
- export * from './Checkbox';
1
+ export { Checkbox, checkboxClassName, checkboxClassNames, renderCheckbox_unstable, useCheckboxStyles_unstable, useCheckbox_unstable, } from './Checkbox';
2
+ export type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox';
package/lib-commonjs/index.js CHANGED
@@ -3,8 +3,45 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ exports.useCheckbox_unstable = exports.useCheckboxStyles_unstable = exports.renderCheckbox_unstable = exports.checkboxClassNames = exports.checkboxClassName = exports.Checkbox = void 0;
6
7
 
7
- const tslib_1 = /*#__PURE__*/require("tslib");
8
+ var Checkbox_1 = /*#__PURE__*/require("./Checkbox");
8
9
 
9
- tslib_1.__exportStar(require("./Checkbox"), exports);
10
+ Object.defineProperty(exports, "Checkbox", {
11
+ enumerable: true,
12
+ get: function () {
13
+ return Checkbox_1.Checkbox;
14
+ }
15
+ }); // eslint-disable-next-line deprecation/deprecation
16
+
17
+ Object.defineProperty(exports, "checkboxClassName", {
18
+ enumerable: true,
19
+ get: function () {
20
+ return Checkbox_1.checkboxClassName;
21
+ }
22
+ });
23
+ Object.defineProperty(exports, "checkboxClassNames", {
24
+ enumerable: true,
25
+ get: function () {
26
+ return Checkbox_1.checkboxClassNames;
27
+ }
28
+ });
29
+ Object.defineProperty(exports, "renderCheckbox_unstable", {
30
+ enumerable: true,
31
+ get: function () {
32
+ return Checkbox_1.renderCheckbox_unstable;
33
+ }
34
+ });
35
+ Object.defineProperty(exports, "useCheckboxStyles_unstable", {
36
+ enumerable: true,
37
+ get: function () {
38
+ return Checkbox_1.useCheckboxStyles_unstable;
39
+ }
40
+ });
41
+ Object.defineProperty(exports, "useCheckbox_unstable", {
42
+ enumerable: true,
43
+ get: function () {
44
+ return Checkbox_1.useCheckbox_unstable;
45
+ }
46
+ });
10
47
  //# sourceMappingURL=index.js.map
package/lib-commonjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Checkbox';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,UAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,UAAA,CAAA,QAAA;AAAQ;AAAR,CAAA,E,CACA;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,UAAA,CAAA,iBAAA;AAAiB;AAAjB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,UAAA,CAAA,kBAAA;AAAkB;AAAlB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,UAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,UAAA,CAAA,0BAAA;AAA0B;AAA1B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,UAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA","sourcesContent":["export {\n Checkbox,\n // eslint-disable-next-line deprecation/deprecation\n checkboxClassName,\n checkboxClassNames,\n renderCheckbox_unstable,\n useCheckboxStyles_unstable,\n useCheckbox_unstable,\n} from './Checkbox';\nexport type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox';\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.10",
3
+ "version": "9.0.0-beta.13",
4
4
  "description": "Fluent UI checkbox component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -20,33 +20,23 @@
20
20
  "start": "yarn storybook",
21
21
  "test": "jest --passWithNoTests",
22
22
  "docs": "api-extractor run --config=config/api-extractor.local.json --local",
23
- "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-checkbox/src && yarn docs",
24
- "storybook": "node ../../scripts/storybook/runner",
23
+ "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-checkbox/src && yarn docs",
24
+ "storybook": "node ../../../scripts/storybook/runner",
25
25
  "type-check": "tsc -b tsconfig.json"
26
26
  },
27
27
  "devDependencies": {
28
28
  "@fluentui/eslint-plugin": "*",
29
29
  "@fluentui/react-conformance": "*",
30
- "@fluentui/react-conformance-griffel": "9.0.0-beta.3",
31
- "@fluentui/scripts": "^1.0.0",
32
- "@types/enzyme": "3.10.3",
33
- "@types/enzyme-adapter-react-16": "1.0.3",
34
- "@types/react": "16.9.42",
35
- "@types/react-dom": "16.9.10",
36
- "@types/react-test-renderer": "^16.0.0",
37
- "enzyme": "~3.10.0",
38
- "enzyme-adapter-react-16": "^1.15.0",
39
- "react": "16.8.6",
40
- "react-dom": "16.8.6",
41
- "react-test-renderer": "^16.3.0"
30
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.4",
31
+ "@fluentui/scripts": "^1.0.0"
42
32
  },
43
33
  "dependencies": {
44
- "@fluentui/react-icons": "^2.0.159-beta.10",
45
- "@fluentui/react-label": "9.0.0-beta.9",
46
- "@fluentui/react-tabster": "9.0.0-rc.5",
47
- "@fluentui/react-theme": "9.0.0-rc.4",
48
- "@fluentui/react-utilities": "9.0.0-rc.5",
49
- "@griffel/react": "1.0.0",
34
+ "@fluentui/react-icons": "^2.0.166-rc.3",
35
+ "@fluentui/react-label": "9.0.0-beta.11",
36
+ "@fluentui/react-tabster": "9.0.0-rc.8",
37
+ "@fluentui/react-theme": "9.0.0-rc.6",
38
+ "@fluentui/react-utilities": "9.0.0-rc.7",
39
+ "@griffel/react": "1.0.3",
50
40
  "tslib": "^2.1.0"
51
41
  },
52
42
  "peerDependencies": {