@fluentui/react-checkbox 9.0.16 → 9.0.18

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 (34) hide show
  1. package/CHANGELOG.json +93 -1
  2. package/CHANGELOG.md +28 -2
  3. package/lib/components/Checkbox/Checkbox.js +0 -1
  4. package/lib/components/Checkbox/Checkbox.js.map +1 -1
  5. package/lib/components/Checkbox/renderCheckbox.js +10 -5
  6. package/lib/components/Checkbox/renderCheckbox.js.map +1 -1
  7. package/lib/components/Checkbox/useCheckbox.js +5 -8
  8. package/lib/components/Checkbox/useCheckbox.js.map +1 -1
  9. package/lib/components/Checkbox/useCheckboxStyles.js +39 -51
  10. package/lib/components/Checkbox/useCheckboxStyles.js.map +1 -1
  11. package/lib/components/CheckboxField/CheckboxField.js.map +1 -1
  12. package/lib/index.js.map +1 -1
  13. package/lib-commonjs/Checkbox.js +0 -2
  14. package/lib-commonjs/Checkbox.js.map +1 -1
  15. package/lib-commonjs/CheckboxField.js +0 -2
  16. package/lib-commonjs/CheckboxField.js.map +1 -1
  17. package/lib-commonjs/components/Checkbox/Checkbox.js +0 -6
  18. package/lib-commonjs/components/Checkbox/Checkbox.js.map +1 -1
  19. package/lib-commonjs/components/Checkbox/Checkbox.types.js.map +1 -1
  20. package/lib-commonjs/components/Checkbox/index.js +0 -6
  21. package/lib-commonjs/components/Checkbox/index.js.map +1 -1
  22. package/lib-commonjs/components/Checkbox/renderCheckbox.js +10 -9
  23. package/lib-commonjs/components/Checkbox/renderCheckbox.js.map +1 -1
  24. package/lib-commonjs/components/Checkbox/useCheckbox.js +5 -15
  25. package/lib-commonjs/components/Checkbox/useCheckbox.js.map +1 -1
  26. package/lib-commonjs/components/Checkbox/useCheckboxStyles.js +39 -56
  27. package/lib-commonjs/components/Checkbox/useCheckboxStyles.js.map +1 -1
  28. package/lib-commonjs/components/CheckboxField/CheckboxField.js +0 -4
  29. package/lib-commonjs/components/CheckboxField/CheckboxField.js.map +1 -1
  30. package/lib-commonjs/components/CheckboxField/index.js +0 -2
  31. package/lib-commonjs/components/CheckboxField/index.js.map +1 -1
  32. package/lib-commonjs/index.js +0 -4
  33. package/lib-commonjs/index.js.map +1 -1
  34. package/package.json +8 -8
package/CHANGELOG.json CHANGED
@@ -2,7 +2,99 @@
2
2
  "name": "@fluentui/react-checkbox",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 21 Dec 2022 10:17:10 GMT",
5
+ "date": "Mon, 09 Jan 2023 14:31:49 GMT",
6
+ "tag": "@fluentui/react-checkbox_v9.0.18",
7
+ "version": "9.0.18",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "beachball",
12
+ "package": "@fluentui/react-checkbox",
13
+ "comment": "Bump @fluentui/react-field to v9.0.0-alpha.14",
14
+ "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-checkbox",
19
+ "comment": "Bump @fluentui/react-label to v9.0.16",
20
+ "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-checkbox",
25
+ "comment": "Bump @fluentui/react-tabster to v9.3.6",
26
+ "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-checkbox",
31
+ "comment": "Bump @fluentui/react-utilities to v9.4.0",
32
+ "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
33
+ }
34
+ ]
35
+ }
36
+ },
37
+ {
38
+ "date": "Wed, 04 Jan 2023 01:40:55 GMT",
39
+ "tag": "@fluentui/react-checkbox_v9.0.17",
40
+ "version": "9.0.17",
41
+ "comments": {
42
+ "patch": [
43
+ {
44
+ "author": "olfedias@microsoft.com",
45
+ "package": "@fluentui/react-checkbox",
46
+ "commit": "2c38f1e4ae07b2b60df596efe11015a68f166dbf",
47
+ "comment": "chore: Update Griffel to latest version"
48
+ },
49
+ {
50
+ "author": "beachball",
51
+ "package": "@fluentui/react-checkbox",
52
+ "comment": "Bump @fluentui/react-field to v9.0.0-alpha.13",
53
+ "commit": "3e322d15529451be153e97298873253e21af4082"
54
+ },
55
+ {
56
+ "author": "beachball",
57
+ "package": "@fluentui/react-checkbox",
58
+ "comment": "Bump @fluentui/react-label to v9.0.15",
59
+ "commit": "3e322d15529451be153e97298873253e21af4082"
60
+ },
61
+ {
62
+ "author": "beachball",
63
+ "package": "@fluentui/react-checkbox",
64
+ "comment": "Bump @fluentui/react-tabster to v9.3.5",
65
+ "commit": "3e322d15529451be153e97298873253e21af4082"
66
+ },
67
+ {
68
+ "author": "beachball",
69
+ "package": "@fluentui/react-checkbox",
70
+ "comment": "Bump @fluentui/react-utilities to v9.3.1",
71
+ "commit": "3e322d15529451be153e97298873253e21af4082"
72
+ },
73
+ {
74
+ "author": "beachball",
75
+ "package": "@fluentui/react-checkbox",
76
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19",
77
+ "commit": "3e322d15529451be153e97298873253e21af4082"
78
+ }
79
+ ],
80
+ "none": [
81
+ {
82
+ "author": "martinhochel@microsoft.com",
83
+ "package": "@fluentui/react-checkbox",
84
+ "commit": "194b0cf0cc27c1c1233aa945f09b3ad29778d8ca",
85
+ "comment": "chore(scripts): use for @fluentui/scripts version within all package.json"
86
+ },
87
+ {
88
+ "author": "martinhochel@microsoft.com",
89
+ "package": "@fluentui/react-checkbox",
90
+ "commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105",
91
+ "comment": "chore(scripts): move index.ts to to follow sub-folder domain packaging"
92
+ }
93
+ ]
94
+ }
95
+ },
96
+ {
97
+ "date": "Wed, 21 Dec 2022 10:20:28 GMT",
6
98
  "tag": "@fluentui/react-checkbox_v9.0.16",
7
99
  "version": "9.0.16",
8
100
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,38 @@
1
1
  # Change Log - @fluentui/react-checkbox
2
2
 
3
- This log was last generated on Wed, 21 Dec 2022 10:17:10 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 09 Jan 2023 14:31:49 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.18)
8
+
9
+ Mon, 09 Jan 2023 14:31:49 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.0.17..@fluentui/react-checkbox_v9.0.18)
11
+
12
+ ### Patches
13
+
14
+ - Bump @fluentui/react-field to v9.0.0-alpha.14 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
15
+ - Bump @fluentui/react-label to v9.0.16 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
16
+ - Bump @fluentui/react-tabster to v9.3.6 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
17
+ - Bump @fluentui/react-utilities to v9.4.0 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
18
+
19
+ ## [9.0.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.17)
20
+
21
+ Wed, 04 Jan 2023 01:40:55 GMT
22
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.0.16..@fluentui/react-checkbox_v9.0.17)
23
+
24
+ ### Patches
25
+
26
+ - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
27
+ - Bump @fluentui/react-field to v9.0.0-alpha.13 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
28
+ - Bump @fluentui/react-label to v9.0.15 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
29
+ - Bump @fluentui/react-tabster to v9.3.5 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
30
+ - Bump @fluentui/react-utilities to v9.3.1 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
31
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
32
+
7
33
  ## [9.0.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.16)
8
34
 
9
- Wed, 21 Dec 2022 10:17:10 GMT
35
+ Wed, 21 Dec 2022 10:20:28 GMT
10
36
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.0.15..@fluentui/react-checkbox_v9.0.16)
11
37
 
12
38
  ### Patches
package/lib/components/Checkbox/Checkbox.js CHANGED
@@ -6,7 +6,6 @@ import { useCheckboxStyles_unstable } from './useCheckboxStyles';
6
6
  * Checkboxes give people a way to select one or more items from a group,
7
7
  * or switch between two mutually exclusive options (checked or unchecked).
8
8
  */
9
-
10
9
  export const Checkbox = /*#__PURE__*/React.forwardRef((props, ref) => {
11
10
  const state = useCheckbox_unstable(props, ref);
12
11
  useCheckboxStyles_unstable(state);
package/lib/components/Checkbox/Checkbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AAIA;;;AAGG;;AACH,OAAO,MAAM,QAAQ,gBAAuC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,oBAAoB,CAAC,KAAD,EAAQ,GAAR,CAAlC;EAEA,0BAA0B,CAAC,KAAD,CAA1B;EACA,OAAO,uBAAuB,CAAC,KAAD,CAA9B;AACD,CAL2D,CAArD;AAOP,QAAQ,CAAC,WAAT,GAAuB,UAAvB","sourcesContent":["import * as React from 'react';\nimport { useCheckbox_unstable } from './useCheckbox';\nimport { renderCheckbox_unstable } from './renderCheckbox';\nimport { useCheckboxStyles_unstable } from './useCheckboxStyles';\nimport type { CheckboxProps } from './Checkbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Checkboxes give people a way to select one or more items from a group,\n * or switch between two mutually exclusive options (checked or unchecked).\n */\nexport const Checkbox: ForwardRefComponent<CheckboxProps> = React.forwardRef((props, ref) => {\n const state = useCheckbox_unstable(props, ref);\n\n useCheckboxStyles_unstable(state);\n return renderCheckbox_unstable(state);\n});\n\nCheckbox.displayName = 'Checkbox';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAIhE;;;;AAIA,OAAO,MAAMC,QAAQ,gBAAuCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC1F,MAAMC,KAAK,GAAGP,oBAAoB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAE9CJ,0BAA0B,CAACK,KAAK,CAAC;EACjC,OAAON,uBAAuB,CAACM,KAAK,CAAC;AACvC,CAAC,CAAC;AAEFJ,QAAQ,CAACK,WAAW,GAAG,UAAU","names":["React","useCheckbox_unstable","renderCheckbox_unstable","useCheckboxStyles_unstable","Checkbox","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCheckbox_unstable } from './useCheckbox';\nimport { renderCheckbox_unstable } from './renderCheckbox';\nimport { useCheckboxStyles_unstable } from './useCheckboxStyles';\nimport type { CheckboxProps } from './Checkbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Checkboxes give people a way to select one or more items from a group,\n * or switch between two mutually exclusive options (checked or unchecked).\n */\nexport const Checkbox: ForwardRefComponent<CheckboxProps> = React.forwardRef((props, ref) => {\n const state = useCheckbox_unstable(props, ref);\n\n useCheckboxStyles_unstable(state);\n return renderCheckbox_unstable(state);\n});\n\nCheckbox.displayName = 'Checkbox';\n"]}
package/lib/components/Checkbox/renderCheckbox.js CHANGED
@@ -5,11 +5,16 @@ export const renderCheckbox_unstable = state => {
5
5
  slots,
6
6
  slotProps
7
7
  } = getSlots(state);
8
- return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
9
- }, /*#__PURE__*/React.createElement(slots.input, { ...slotProps.input
10
- }), state.labelPosition === 'before' && slots.label && /*#__PURE__*/React.createElement(slots.label, { ...slotProps.label
11
- }), /*#__PURE__*/React.createElement(slots.indicator, { ...slotProps.indicator
12
- }), state.labelPosition === 'after' && slots.label && /*#__PURE__*/React.createElement(slots.label, { ...slotProps.label
8
+ return /*#__PURE__*/React.createElement(slots.root, {
9
+ ...slotProps.root
10
+ }, /*#__PURE__*/React.createElement(slots.input, {
11
+ ...slotProps.input
12
+ }), state.labelPosition === 'before' && slots.label && /*#__PURE__*/React.createElement(slots.label, {
13
+ ...slotProps.label
14
+ }), /*#__PURE__*/React.createElement(slots.indicator, {
15
+ ...slotProps.indicator
16
+ }), state.labelPosition === 'after' && slots.label && /*#__PURE__*/React.createElement(slots.label, {
17
+ ...slotProps.label
13
18
  }));
14
19
  };
15
20
  //# sourceMappingURL=renderCheckbox.js.map
package/lib/components/Checkbox/renderCheckbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/renderCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAyB;EAC9D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAgB,KAAhB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,EAEG,KAAK,CAAC,aAAN,KAAwB,QAAxB,IAAoC,KAAK,CAAC,KAA1C,iBAAmD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAFtD,eAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAhB,CAHF,EAIG,KAAK,CAAC,aAAN,KAAwB,OAAxB,IAAmC,KAAK,CAAC,KAAzC,iBAAkD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAJrD,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { CheckboxState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxState) => {\n const { slots, slotProps } = getSlots<CheckboxSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.input {...slotProps.input} />\n {state.labelPosition === 'before' && slots.label && <slots.label {...slotProps.label} />}\n <slots.indicator {...slotProps.indicator} />\n {state.labelPosition === 'after' && slots.label && <slots.label {...slotProps.label} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD,OAAO,MAAMC,uBAAuB,GAAIC,KAAoB,IAAI;EAC9D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAgBE,KAAK,CAAC;EAE3D,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,gBAC5BN,oBAACI,KAAK,CAACG,KAAK;IAAA,GAAKF,SAAS,CAACE;EAAK,EAAI,EACnCJ,KAAK,CAACK,aAAa,KAAK,QAAQ,IAAIJ,KAAK,CAACK,KAAK,iBAAIT,oBAACI,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,eACxFT,oBAACI,KAAK,CAACM,SAAS;IAAA,GAAKL,SAAS,CAACK;EAAS,EAAI,EAC3CP,KAAK,CAACK,aAAa,KAAK,OAAO,IAAIJ,KAAK,CAACK,KAAK,iBAAIT,oBAACI,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,CAC5E;AAEjB,CAAC","names":["React","getSlots","renderCheckbox_unstable","state","slots","slotProps","root","input","labelPosition","label","indicator"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/components/Checkbox/renderCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { CheckboxState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxState) => {\n const { slots, slotProps } = getSlots<CheckboxSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.input {...slotProps.input} />\n {state.labelPosition === 'before' && slots.label && <slots.label {...slotProps.label} />}\n <slots.indicator {...slotProps.indicator} />\n {state.labelPosition === 'after' && slots.label && <slots.label {...slotProps.label} />}\n </slots.root>\n );\n};\n"]}
package/lib/components/Checkbox/useCheckbox.js CHANGED
@@ -12,7 +12,6 @@ import { useFocusWithin } from '@fluentui/react-tabster';
12
12
  * @param props - props from this instance of Checkbox
13
13
  * @param ref - reference to `<input>` element of Checkbox
14
14
  */
15
-
16
15
  export const useCheckbox_unstable = (props, ref) => {
17
16
  const {
18
17
  disabled,
@@ -35,7 +34,6 @@ export const useCheckbox_unstable = (props, ref) => {
35
34
  const mixed = checked === 'mixed';
36
35
  const id = useId('checkbox-', nativeProps.primary.id);
37
36
  let checkmarkIcon;
38
-
39
37
  if (mixed) {
40
38
  if (shape === 'circular') {
41
39
  checkmarkIcon = /*#__PURE__*/React.createElement(CircleFilled, null);
@@ -45,7 +43,6 @@ export const useCheckbox_unstable = (props, ref) => {
45
43
  } else {
46
44
  checkmarkIcon = size === 'large' ? /*#__PURE__*/React.createElement(Checkmark16Filled, null) : /*#__PURE__*/React.createElement(Checkmark12Filled, null);
47
45
  }
48
-
49
46
  const state = {
50
47
  shape,
51
48
  checked,
@@ -81,9 +78,9 @@ export const useCheckbox_unstable = (props, ref) => {
81
78
  disabled,
82
79
  required,
83
80
  size: 'medium' // Even if the checkbox itself is large
84
-
85
81
  }
86
82
  }),
83
+
87
84
  indicator: resolveShorthand(props.indicator, {
88
85
  required: true,
89
86
  defaultProps: {
@@ -98,13 +95,13 @@ export const useCheckbox_unstable = (props, ref) => {
98
95
  checked: val
99
96
  });
100
97
  setChecked(val);
101
- }); // Create a ref object for the input element so we can use it to set the indeterminate prop.
98
+ });
99
+ // Create a ref object for the input element so we can use it to set the indeterminate prop.
102
100
  // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)
103
-
104
101
  const inputRef = useMergedRefs(state.input.ref);
105
- state.input.ref = inputRef; // Set the <input> element's checked and indeterminate properties based on our tri-state property.
102
+ state.input.ref = inputRef;
103
+ // Set the <input> element's checked and indeterminate properties based on our tri-state property.
106
104
  // Since indeterminate can only be set via javascript, it has to be done in a layout effect.
107
-
108
105
  useIsomorphicLayoutEffect(() => {
109
106
  if (inputRef.current) {
110
107
  inputRef.current.indeterminate = mixed;
package/lib/components/Checkbox/useCheckbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/useCheckbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n useControllableState,\n useEventCallback,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { CheckboxProps, CheckboxState } from './Checkbox.types';\nimport {\n Checkmark12Filled,\n Checkmark16Filled,\n Square12Filled,\n Square16Filled,\n CircleFilled,\n} from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Checkbox.\n *\n * The returned state can be modified with hooks such as useCheckboxStyles_unstable,\n * before being passed to renderCheckbox_unstable.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLInputElement>): CheckboxState => {\n const { disabled, required, shape = 'square', size = 'medium', labelPosition = 'after', onChange } = props;\n\n const [checked, setChecked] = useControllableState({\n defaultState: props.defaultChecked,\n state: props.checked,\n initialState: false,\n });\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'size', 'onChange'],\n });\n\n const mixed = checked === 'mixed';\n const id = useId('checkbox-', nativeProps.primary.id);\n\n let checkmarkIcon;\n if (mixed) {\n if (shape === 'circular') {\n checkmarkIcon = <CircleFilled />;\n } else {\n checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;\n }\n } else {\n checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n }\n\n const state: CheckboxState = {\n shape,\n checked,\n size,\n labelPosition,\n components: {\n root: 'span',\n input: 'input',\n indicator: 'div',\n label: Label,\n },\n root: resolveShorthand(props.root, {\n required: true,\n defaultProps: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\n }),\n input: resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n type: 'checkbox',\n id,\n ref,\n checked: checked === true,\n ...nativeProps.primary,\n },\n }),\n label: resolveShorthand(props.label, {\n required: false,\n defaultProps: {\n htmlFor: id,\n disabled,\n required,\n size: 'medium', // Even if the checkbox itself is large\n },\n }),\n indicator: resolveShorthand(props.indicator, {\n required: true,\n defaultProps: {\n 'aria-hidden': true,\n children: checkmarkIcon,\n },\n }),\n };\n\n state.input.onChange = useEventCallback(ev => {\n const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;\n onChange?.(ev, { checked: val });\n setChecked(val);\n });\n\n // Create a ref object for the input element so we can use it to set the indeterminate prop.\n // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)\n const inputRef = useMergedRefs(state.input.ref);\n state.input.ref = inputRef;\n\n // Set the <input> element's checked and indeterminate properties based on our tri-state property.\n // Since indeterminate can only be set via javascript, it has to be done in a layout effect.\n useIsomorphicLayoutEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = mixed;\n }\n }, [inputRef, mixed]);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"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","names":["React","getPartitionedNativeProps","resolveShorthand","useControllableState","useEventCallback","useId","useIsomorphicLayoutEffect","useMergedRefs","Checkmark12Filled","Checkmark16Filled","Square12Filled","Square16Filled","CircleFilled","Label","useFocusWithin","useCheckbox_unstable","props","ref","disabled","required","shape","size","labelPosition","onChange","checked","setChecked","defaultState","defaultChecked","state","initialState","nativeProps","primarySlotTagName","excludedPropNames","mixed","id","primary","checkmarkIcon","components","root","input","indicator","label","defaultProps","type","htmlFor","children","ev","val","currentTarget","indeterminate","inputRef","current"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n useControllableState,\n useEventCallback,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { CheckboxProps, CheckboxState } from './Checkbox.types';\nimport {\n Checkmark12Filled,\n Checkmark16Filled,\n Square12Filled,\n Square16Filled,\n CircleFilled,\n} from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Checkbox.\n *\n * The returned state can be modified with hooks such as useCheckboxStyles_unstable,\n * before being passed to renderCheckbox_unstable.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLInputElement>): CheckboxState => {\n const { disabled, required, shape = 'square', size = 'medium', labelPosition = 'after', onChange } = props;\n\n const [checked, setChecked] = useControllableState({\n defaultState: props.defaultChecked,\n state: props.checked,\n initialState: false,\n });\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'size', 'onChange'],\n });\n\n const mixed = checked === 'mixed';\n const id = useId('checkbox-', nativeProps.primary.id);\n\n let checkmarkIcon;\n if (mixed) {\n if (shape === 'circular') {\n checkmarkIcon = <CircleFilled />;\n } else {\n checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;\n }\n } else {\n checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n }\n\n const state: CheckboxState = {\n shape,\n checked,\n size,\n labelPosition,\n components: {\n root: 'span',\n input: 'input',\n indicator: 'div',\n label: Label,\n },\n root: resolveShorthand(props.root, {\n required: true,\n defaultProps: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\n }),\n input: resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n type: 'checkbox',\n id,\n ref,\n checked: checked === true,\n ...nativeProps.primary,\n },\n }),\n label: resolveShorthand(props.label, {\n required: false,\n defaultProps: {\n htmlFor: id,\n disabled,\n required,\n size: 'medium', // Even if the checkbox itself is large\n },\n }),\n indicator: resolveShorthand(props.indicator, {\n required: true,\n defaultProps: {\n 'aria-hidden': true,\n children: checkmarkIcon,\n },\n }),\n };\n\n state.input.onChange = useEventCallback(ev => {\n const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;\n onChange?.(ev, { checked: val });\n setChecked(val);\n });\n\n // Create a ref object for the input element so we can use it to set the indeterminate prop.\n // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)\n const inputRef = useMergedRefs(state.input.ref);\n state.input.ref = inputRef;\n\n // Set the <input> element's checked and indeterminate properties based on our tri-state property.\n // Since indeterminate can only be set via javascript, it has to be done in a layout effect.\n useIsomorphicLayoutEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = mixed;\n }\n }, [inputRef, mixed]);\n\n return state;\n};\n"]}
package/lib/components/Checkbox/useCheckboxStyles.js CHANGED
@@ -6,79 +6,71 @@ export const checkboxClassNames = {
6
6
  label: 'fui-Checkbox__label',
7
7
  input: 'fui-Checkbox__input',
8
8
  indicator: 'fui-Checkbox__indicator'
9
- }; // The indicator size is used by the indicator and label styles
10
-
9
+ };
10
+ // The indicator size is used by the indicator and label styles
11
11
  const indicatorSizeMedium = '16px';
12
12
  const indicatorSizeLarge = '20px';
13
-
14
13
  const useRootBaseClassName = /*#__PURE__*/__resetStyles("r1o1qdo1", "r1niodl4", [".r1o1qdo1{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".r1o1qdo1:focus{outline-style:none;}", ".r1o1qdo1:focus-visible{outline-style:none;}", ".r1o1qdo1[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1o1qdo1[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;left:-2px;right:-2px;}", ".r1niodl4{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".r1niodl4:focus{outline-style:none;}", ".r1niodl4:focus-visible{outline-style:none;}", ".r1niodl4[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1niodl4[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;right:-2px;left:-2px;}"]);
15
-
16
14
  const useInputBaseClassName = /*#__PURE__*/__resetStyles("rfcvz6l", null, [".rfcvz6l{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));}", ".rfcvz6l:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator>*{opacity:0;}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground3);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessible);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__label{color:var(--colorNeutralForeground2);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".rfcvz6l:enabled:checked:not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".rfcvz6l:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorCompoundBrandBackground);}", ".rfcvz6l:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorCompoundBrandBackgroundHover);}", ".rfcvz6l:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorCompoundBrandBackgroundPressed);}", ".rfcvz6l:enabled:indeterminate~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".rfcvz6l:enabled:indeterminate~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}", ".rfcvz6l:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}", ".rfcvz6l:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}", ".rfcvz6l:disabled{cursor:default;}", ".rfcvz6l:disabled~.fui-Checkbox__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", "@media (forced-colors: active){.rfcvz6l:disabled~.fui-Checkbox__label{color:GrayText;}}", ".rfcvz6l:disabled~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}", "@media (forced-colors: active){.rfcvz6l:disabled~.fui-Checkbox__indicator{color:GrayText;}}", "@media (forced-colors: active){.rfcvz6l:disabled~.fui-Checkbox__indicator svg{color:GrayText;}}"]);
17
-
18
15
  const useInputStyles = /*#__PURE__*/__styles({
19
- "before": {
20
- "j35jbq": ["f1e31b4d", "f1vgc2s3"]
16
+ before: {
17
+ j35jbq: ["f1e31b4d", "f1vgc2s3"]
21
18
  },
22
- "after": {
23
- "oyh7mz": ["f1vgc2s3", "f1e31b4d"]
19
+ after: {
20
+ oyh7mz: ["f1vgc2s3", "f1e31b4d"]
24
21
  },
25
- "large": {
26
- "a9b677": "f1mq5jt6"
22
+ large: {
23
+ a9b677: "f1mq5jt6"
27
24
  }
28
25
  }, {
29
- "d": [".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f1mq5jt6{width:calc(20px + 2 * var(--spacingHorizontalS));}"]
26
+ d: [".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f1mq5jt6{width:calc(20px + 2 * var(--spacingHorizontalS));}"]
30
27
  });
31
-
32
28
  const useIndicatorBaseClassName = /*#__PURE__*/__resetStyles("r1jvlehe", null, [".r1jvlehe{-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid;border-radius:var(--borderRadiusSmall);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;font-size:12px;height:16px;width:16px;}"]);
33
-
34
29
  const useIndicatorStyles = /*#__PURE__*/__styles({
35
- "large": {
36
- "Be2twd7": "f4ybsrx",
37
- "Bqenvij": "fjamq6b",
38
- "a9b677": "f64fuq3"
30
+ large: {
31
+ Be2twd7: "f4ybsrx",
32
+ Bqenvij: "fjamq6b",
33
+ a9b677: "f64fuq3"
39
34
  },
40
- "circular": {
41
- "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
42
- "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
43
- "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
44
- "Btl43ni": ["f1s8kh49", "f1djnp8u"]
35
+ circular: {
36
+ Bbmb7ep: ["f8fbkgy", "f1nfllo7"],
37
+ Beyfa6y: ["f1nfllo7", "f8fbkgy"],
38
+ B7oj6ja: ["f1djnp8u", "f1s8kh49"],
39
+ Btl43ni: ["f1s8kh49", "f1djnp8u"]
45
40
  }
46
41
  }, {
47
- "d": [".f4ybsrx{font-size:16px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}"]
48
- }); // Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
49
-
50
-
42
+ d: [".f4ybsrx{font-size:16px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}"]
43
+ });
44
+ // Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
51
45
  const useLabelStyles = /*#__PURE__*/__styles({
52
- "base": {
53
- "qb2dma": "f7nlbp4",
54
- "Bceei9c": "f1k6fduh",
55
- "z8tnut": "f1kwiid1",
56
- "z189sj": ["f1vdfbxk", "f1f5gg8d"],
57
- "Byoj8tv": "f5b47ha",
58
- "uwmqm3": ["f1f5gg8d", "f1vdfbxk"]
46
+ base: {
47
+ qb2dma: "f7nlbp4",
48
+ Bceei9c: "f1k6fduh",
49
+ z8tnut: "f1kwiid1",
50
+ z189sj: ["f1vdfbxk", "f1f5gg8d"],
51
+ Byoj8tv: "f5b47ha",
52
+ uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
59
53
  },
60
- "before": {
61
- "z189sj": ["f7x41pl", "fruq291"]
54
+ before: {
55
+ z189sj: ["f7x41pl", "fruq291"]
62
56
  },
63
- "after": {
64
- "uwmqm3": ["fruq291", "f7x41pl"]
57
+ after: {
58
+ uwmqm3: ["fruq291", "f7x41pl"]
65
59
  },
66
- "medium": {
67
- "B6of3ja": "fjzwpt6",
68
- "jrapky": "fh6j2fo"
60
+ medium: {
61
+ B6of3ja: "fjzwpt6",
62
+ jrapky: "fh6j2fo"
69
63
  },
70
- "large": {
71
- "B6of3ja": "f1xlvstr",
72
- "jrapky": "f49ad5g"
64
+ large: {
65
+ B6of3ja: "f1xlvstr",
66
+ jrapky: "f49ad5g"
73
67
  }
74
68
  }, {
75
- "d": [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1k6fduh{cursor:pointer;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}", ".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}", ".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}", ".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}"]
69
+ d: [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1k6fduh{cursor:pointer;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}", ".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}", ".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}", ".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}"]
76
70
  });
77
71
  /**
78
72
  * Apply styling to the Checkbox slots based on the state
79
73
  */
80
-
81
-
82
74
  export const useCheckboxStyles_unstable = state => {
83
75
  const {
84
76
  labelPosition,
@@ -92,17 +84,13 @@ export const useCheckboxStyles_unstable = state => {
92
84
  state.input.className = mergeClasses(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);
93
85
  const indicatorBaseClassName = useIndicatorBaseClassName();
94
86
  const indicatorStyles = useIndicatorStyles();
95
-
96
87
  if (state.indicator) {
97
88
  state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);
98
89
  }
99
-
100
90
  const labelStyles = useLabelStyles();
101
-
102
91
  if (state.label) {
103
92
  state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);
104
93
  }
105
-
106
94
  return state;
107
95
  };
108
96
  //# sourceMappingURL=useCheckboxStyles.js.map
package/lib/components/Checkbox/useCheckboxStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"AAAA,kCAAsC,YAAtC,EAAoD,UAApD,QAAsE,gBAAtE;AACA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,kBAAkB,GAAkC;EAC/D,IAAI,EAAE,cADyD;EAE/D,KAAK,EAAE,qBAFwD;EAG/D,KAAK,EAAE,qBAHwD;EAI/D,SAAS,EAAE;AAJoD,CAA1D,C,CAOP;;AACA,MAAM,mBAAmB,GAAG,MAA5B;AACA,MAAM,kBAAkB,GAAG,MAA3B;;AAEA,MAAM,oBAAoB,gBAAG,6uEAA7B;;AAMA,MAAM,qBAAqB,gBAAG,i3FAA9B;;AAyHA,MAAM,cAAc,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;;AAaA,MAAM,yBAAyB,gBAAG,2rBAAlC;;AAqBA,MAAM,kBAAkB,gBAAG;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA3B,C,CAYA;;;AACA,MAAM,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;AA0BA;;AAEG;;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,MAAM;IAAE,aAAF;IAAiB,KAAjB;IAAwB;EAAxB,IAAiC,KAAvC;EAEA,MAAM,iBAAiB,GAAG,oBAAoB,EAA9C;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,kBAAkB,CAAC,IAApB,EAA0B,iBAA1B,EAA6C,KAAK,CAAC,IAAN,CAAW,SAAxD,CAAnC;EAEA,MAAM,kBAAkB,GAAG,qBAAqB,EAAhD;EACA,MAAM,WAAW,GAAG,cAAc,EAAlC;EACA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAClC,kBAAkB,CAAC,KADe,EAElC,kBAFkC,EAGlC,IAAI,KAAK,OAAT,IAAoB,WAAW,CAAC,KAHE,EAIlC,WAAW,CAAC,aAAD,CAJuB,EAKlC,KAAK,CAAC,KAAN,CAAY,SALsB,CAApC;EAQA,MAAM,sBAAsB,GAAG,yBAAyB,EAAxD;EACA,MAAM,eAAe,GAAG,kBAAkB,EAA1C;;EACA,IAAI,KAAK,CAAC,SAAV,EAAqB;IACnB,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CACtC,kBAAkB,CAAC,SADmB,EAEtC,sBAFsC,EAGtC,IAAI,KAAK,OAAT,IAAoB,eAAe,CAAC,KAHE,EAItC,KAAK,KAAK,UAAV,IAAwB,eAAe,CAAC,QAJF,EAKtC,KAAK,CAAC,SAAN,CAAgB,SALsB,CAAxC;EAOD;;EAED,MAAM,WAAW,GAAG,cAAc,EAAlC;;EACA,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAClC,kBAAkB,CAAC,KADe,EAElC,WAAW,CAAC,IAFsB,EAGlC,WAAW,CAAC,IAAD,CAHuB,EAIlC,WAAW,CAAC,aAAD,CAJuB,EAKlC,KAAK,CAAC,KAAN,CAAY,SALsB,CAApC;EAOD;;EAED,OAAO,KAAP;AACD,CAxCM","sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } 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\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// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n position: 'relative',\n display: 'inline-flex',\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n top: 0,\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`,\n\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 borderColor: tokens.colorNeutralStrokeAccessible,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n 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.colorNeutralForegroundInverted,\n borderColor: tokens.colorCompoundBrandBackground,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorCompoundBrandBackgroundHover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n 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 borderColor: tokens.colorCompoundBrandStroke,\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokeHover,\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokePressed,\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${checkboxClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n 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\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n },\n after: {\n left: 0,\n },\n\n large: {\n width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`,\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n\n border: tokens.strokeWidthThin + ' solid',\n borderRadius: tokens.borderRadiusSmall,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n\n fontSize: '12px',\n height: indicatorSizeMedium,\n width: indicatorSizeMedium,\n});\n\nconst useIndicatorStyles = makeStyles({\n large: {\n fontSize: '16px',\n height: indicatorSizeLarge,\n width: indicatorSizeLarge,\n },\n\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n cursor: 'pointer',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n before: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\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 marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n },\n large: {\n marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n },\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n const { labelPosition, shape, size } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, state.root.className);\n\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n checkboxClassNames.input,\n inputBaseClassName,\n size === 'large' && inputStyles.large,\n inputStyles[labelPosition],\n state.input.className,\n );\n\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(\n checkboxClassNames.indicator,\n indicatorBaseClassName,\n size === 'large' && indicatorStyles.large,\n 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[size],\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,kCAAsCA,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAI9C,OAAO,MAAMC,kBAAkB,GAAkC;EAC/DC,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,qBAAqB;EAC5BC,KAAK,EAAE,qBAAqB;EAC5BC,SAAS,EAAE;CACZ;AAED;AACA,MAAMC,mBAAmB,GAAG,MAAM;AAClC,MAAMC,kBAAkB,GAAG,MAAM;AAEjC,MAAMC,oBAAoB,gBAAG,6uEAI3B;AAEF,MAAMC,qBAAqB,gBAAG,i3FAuH5B;AAEF,MAAMC,cAAc,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAWrB;AAEF,MAAMC,yBAAyB,gBAAG,2rBAmBhC;AAEF,MAAMC,kBAAkB,gBAAG;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAUzB;AAEF;AACA,MAAMC,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAwBrB;AAEF;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAoB,IAAmB;EAChF,MAAM;IAAEC,aAAa;IAAEC,KAAK;IAAEC;EAAI,CAAE,GAAGH,KAAK;EAE5C,MAAMI,iBAAiB,GAAGX,oBAAoB,EAAE;EAChDO,KAAK,CAACb,IAAI,CAACkB,SAAS,GAAGvB,YAAY,CAACI,kBAAkB,CAACC,IAAI,EAAEiB,iBAAiB,EAAEJ,KAAK,CAACb,IAAI,CAACkB,SAAS,CAAC;EAErG,MAAMC,kBAAkB,GAAGZ,qBAAqB,EAAE;EAClD,MAAMa,WAAW,GAAGZ,cAAc,EAAE;EACpCK,KAAK,CAACX,KAAK,CAACgB,SAAS,GAAGvB,YAAY,CAClCI,kBAAkB,CAACG,KAAK,EACxBiB,kBAAkB,EAClBH,IAAI,KAAK,OAAO,IAAII,WAAW,CAACC,KAAK,EACrCD,WAAW,CAACN,aAAa,CAAC,EAC1BD,KAAK,CAACX,KAAK,CAACgB,SAAS,CACtB;EAED,MAAMI,sBAAsB,GAAGb,yBAAyB,EAAE;EAC1D,MAAMc,eAAe,GAAGb,kBAAkB,EAAE;EAC5C,IAAIG,KAAK,CAACV,SAAS,EAAE;IACnBU,KAAK,CAACV,SAAS,CAACe,SAAS,GAAGvB,YAAY,CACtCI,kBAAkB,CAACI,SAAS,EAC5BmB,sBAAsB,EACtBN,IAAI,KAAK,OAAO,IAAIO,eAAe,CAACF,KAAK,EACzCN,KAAK,KAAK,UAAU,IAAIQ,eAAe,CAACC,QAAQ,EAChDX,KAAK,CAACV,SAAS,CAACe,SAAS,CAC1B;;EAGH,MAAMO,WAAW,GAAGd,cAAc,EAAE;EACpC,IAAIE,KAAK,CAACZ,KAAK,EAAE;IACfY,KAAK,CAACZ,KAAK,CAACiB,SAAS,GAAGvB,YAAY,CAClCI,kBAAkB,CAACE,KAAK,EACxBwB,WAAW,CAACC,IAAI,EAChBD,WAAW,CAACT,IAAI,CAAC,EACjBS,WAAW,CAACX,aAAa,CAAC,EAC1BD,KAAK,CAACZ,KAAK,CAACiB,SAAS,CACtB;;EAGH,OAAOL,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","useInputBaseClassName","useInputStyles","useIndicatorBaseClassName","useIndicatorStyles","useLabelStyles","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","className","inputBaseClassName","inputStyles","large","indicatorBaseClassName","indicatorStyles","circular","labelStyles","base"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } 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\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// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n position: 'relative',\n display: 'inline-flex',\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n top: 0,\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`,\n\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 borderColor: tokens.colorNeutralStrokeAccessible,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n 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.colorNeutralForegroundInverted,\n borderColor: tokens.colorCompoundBrandBackground,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorCompoundBrandBackgroundHover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n 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 borderColor: tokens.colorCompoundBrandStroke,\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokeHover,\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokePressed,\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${checkboxClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n 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\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n },\n after: {\n left: 0,\n },\n\n large: {\n width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`,\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n\n border: tokens.strokeWidthThin + ' solid',\n borderRadius: tokens.borderRadiusSmall,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n\n fontSize: '12px',\n height: indicatorSizeMedium,\n width: indicatorSizeMedium,\n});\n\nconst useIndicatorStyles = makeStyles({\n large: {\n fontSize: '16px',\n height: indicatorSizeLarge,\n width: indicatorSizeLarge,\n },\n\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n cursor: 'pointer',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n before: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\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 marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n },\n large: {\n marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n },\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n const { labelPosition, shape, size } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, state.root.className);\n\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n checkboxClassNames.input,\n inputBaseClassName,\n size === 'large' && inputStyles.large,\n inputStyles[labelPosition],\n state.input.className,\n );\n\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(\n checkboxClassNames.indicator,\n indicatorBaseClassName,\n size === 'large' && indicatorStyles.large,\n 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[size],\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n\n return state;\n};\n"]}
package/lib/components/CheckboxField/CheckboxField.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-checkbox/src/components/CheckboxField/CheckboxField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SACE,kBADF,EAEE,oBAFF,EAGE,uBAHF,EAIE,iBAJF,QAKO,uBALP;AAQA,SAAS,QAAT,QAAyB,gBAAzB;AAeA,OAAO,MAAM,uBAAuB,gBAAG,kBAAkB,CAAC,eAAD,CAAlD;AAEP,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM;IAAE,UAAF;IAAc,QAAd;IAAwB,KAAxB;IAA+B,OAA/B;IAAwC,GAAG;EAA3C,IAA2D,KAAjE;EAEA,KAAK,GAAG;IACN;IACA,KAAK,EAAE,UAFD;IAGN;IACA,OAAO,EAAE;MAAE,KAAF;MAAS,QAAT;MAAmB,GAAG;IAAtB,CAJH;IAKN,GAAG;EALG,CAAR;EAQA,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,EAAa;IAAE,SAAS,EAAE,QAAb;IAAuB,UAAU,EAAE;EAAnC,CAAb,CAA/B;EACA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CAdqE,CAA/D;AAgBP,aAAa,CAAC,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n getFieldClassNames,\n renderField_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-field';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CheckboxProps } from '../../Checkbox';\nimport { Checkbox } from '../../Checkbox';\n\nexport type CheckboxFieldProps = Omit<FieldProps<typeof Checkbox>, 'label'> & {\n /**\n * The Checkbox's label.\n */\n label?: CheckboxProps['label'];\n\n /**\n * The label for the CheckboxField, which appears above or before the Checkbox, depending on the `orientation` prop.\n * It is recommended to only set the `label` prop, and not `fieldLabel`.\n */\n fieldLabel?: FieldProps<typeof Checkbox>['label'];\n};\n\nexport const checkboxFieldClassNames = getFieldClassNames('CheckboxField');\n\nexport const CheckboxField: ForwardRefComponent<CheckboxFieldProps> = React.forwardRef((props, ref) => {\n const { fieldLabel, required, label, control, ...restOfProps } = props;\n\n props = {\n // Use the fieldLabel prop as the Field's label\n label: fieldLabel,\n // Use the label prop as the Checkbox's label\n control: { label, required, ...control },\n ...restOfProps,\n };\n\n const state = useField_unstable(props, ref, { component: Checkbox, classNames: checkboxFieldClassNames });\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nCheckboxField.displayName = 'CheckboxField';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SACEC,kBAAkB,EAClBC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,QACZ,uBAAuB;AAG9B,SAASC,QAAQ,QAAQ,gBAAgB;AAezC,OAAO,MAAMC,uBAAuB,gBAAGL,kBAAkB,CAAC,eAAe,CAAC;AAE1E,OAAO,MAAMM,aAAa,gBAA4CP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpG,MAAM;IAAEC,UAAU;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,OAAO;IAAE,GAAGC;EAAW,CAAE,GAAGN,KAAK;EAEtEA,KAAK,GAAG;IACN;IACAI,KAAK,EAAEF,UAAU;IACjB;IACAG,OAAO,EAAE;MAAED,KAAK;MAAED,QAAQ;MAAE,GAAGE;IAAO,CAAE;IACxC,GAAGC;GACJ;EAED,MAAMC,KAAK,GAAGZ,iBAAiB,CAACK,KAAK,EAAEC,GAAG,EAAE;IAAEO,SAAS,EAAEZ,QAAQ;IAAEa,UAAU,EAAEZ;EAAuB,CAAE,CAAC;EACzGH,uBAAuB,CAACa,KAAK,CAAC;EAC9B,OAAOd,oBAAoB,CAACc,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFT,aAAa,CAACY,WAAW,GAAG,eAAe","names":["React","getFieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","Checkbox","checkboxFieldClassNames","CheckboxField","forwardRef","props","ref","fieldLabel","required","label","control","restOfProps","state","component","classNames","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/components/CheckboxField/CheckboxField.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n getFieldClassNames,\n renderField_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-field';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CheckboxProps } from '../../Checkbox';\nimport { Checkbox } from '../../Checkbox';\n\nexport type CheckboxFieldProps = Omit<FieldProps<typeof Checkbox>, 'label'> & {\n /**\n * The Checkbox's label.\n */\n label?: CheckboxProps['label'];\n\n /**\n * The label for the CheckboxField, which appears above or before the Checkbox, depending on the `orientation` prop.\n * It is recommended to only set the `label` prop, and not `fieldLabel`.\n */\n fieldLabel?: FieldProps<typeof Checkbox>['label'];\n};\n\nexport const checkboxFieldClassNames = getFieldClassNames('CheckboxField');\n\nexport const CheckboxField: ForwardRefComponent<CheckboxFieldProps> = React.forwardRef((props, ref) => {\n const { fieldLabel, required, label, control, ...restOfProps } = props;\n\n props = {\n // Use the fieldLabel prop as the Field's label\n label: fieldLabel,\n // Use the label prop as the Checkbox's label\n control: { label, required, ...control },\n ...restOfProps,\n };\n\n const state = useField_unstable(props, ref, { component: Checkbox, classNames: checkboxFieldClassNames });\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nCheckboxField.displayName = 'CheckboxField';\n"]}
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-checkbox/src/index.ts"],"names":[],"mappings":"AAAA,SACE,QADF,EAEE,kBAFF,EAGE,uBAHF,EAIE,0BAJF,EAKE,oBALF,QAMO,YANP;AASA,SAAS,aAAa,IAAI,sBAA1B,EAAkD,uBAAlD,QAAiF,iBAAjF","sourcesContent":["export {\n Checkbox,\n checkboxClassNames,\n renderCheckbox_unstable,\n useCheckboxStyles_unstable,\n useCheckbox_unstable,\n} from './Checkbox';\nexport type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox';\n\nexport { CheckboxField as CheckboxField_unstable, checkboxFieldClassNames } from './CheckboxField';\nexport type { CheckboxFieldProps as CheckboxFieldProps_unstable } from './CheckboxField';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,YAAY;AAGnB,SAASC,aAAa,IAAIC,sBAAsB,EAAEC,uBAAuB,QAAQ,iBAAiB","names":["Checkbox","checkboxClassNames","renderCheckbox_unstable","useCheckboxStyles_unstable","useCheckbox_unstable","CheckboxField","CheckboxField_unstable","checkboxFieldClassNames"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/index.ts"],"sourcesContent":["export {\n Checkbox,\n checkboxClassNames,\n renderCheckbox_unstable,\n useCheckboxStyles_unstable,\n useCheckbox_unstable,\n} from './Checkbox';\nexport type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox';\n\nexport { CheckboxField as CheckboxField_unstable, checkboxFieldClassNames } from './CheckboxField';\nexport type { CheckboxFieldProps as CheckboxFieldProps_unstable } from './CheckboxField';\n"]}
package/lib-commonjs/Checkbox.js CHANGED
@@ -3,8 +3,6 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
-
7
6
  const tslib_1 = /*#__PURE__*/require("tslib");
8
-
9
7
  tslib_1.__exportStar(require("./components/Checkbox/index"), exports);
10
8
  //# sourceMappingURL=Checkbox.js.map
package/lib-commonjs/Checkbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-checkbox/src/Checkbox.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Checkbox/index';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/Checkbox.ts"],"sourcesContent":["export * from './components/Checkbox/index';\n"]}
package/lib-commonjs/CheckboxField.js CHANGED
@@ -3,8 +3,6 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
-
7
6
  const tslib_1 = /*#__PURE__*/require("tslib");
8
-
9
7
  tslib_1.__exportStar(require("./components/CheckboxField/index"), exports);
10
8
  //# sourceMappingURL=CheckboxField.js.map
package/lib-commonjs/CheckboxField.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-checkbox/src/CheckboxField.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/CheckboxField/index';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/CheckboxField.ts"],"sourcesContent":["export * from './components/CheckboxField/index';\n"]}
package/lib-commonjs/components/Checkbox/Checkbox.js CHANGED
@@ -4,20 +4,14 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.Checkbox = void 0;
7
-
8
7
  const React = /*#__PURE__*/require("react");
9
-
10
8
  const useCheckbox_1 = /*#__PURE__*/require("./useCheckbox");
11
-
12
9
  const renderCheckbox_1 = /*#__PURE__*/require("./renderCheckbox");
13
-
14
10
  const useCheckboxStyles_1 = /*#__PURE__*/require("./useCheckboxStyles");
15
11
  /**
16
12
  * Checkboxes give people a way to select one or more items from a group,
17
13
  * or switch between two mutually exclusive options (checked or unchecked).
18
14
  */
19
-
20
-
21
15
  exports.Checkbox = /*#__PURE__*/React.forwardRef((props, ref) => {
22
16
  const state = useCheckbox_1.useCheckbox_unstable(props, ref);
23
17
  useCheckboxStyles_1.useCheckboxStyles_unstable(state);
package/lib-commonjs/components/Checkbox/Checkbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAIA;;;AAGG;;;AACU,OAAA,CAAA,QAAA,gBAA+C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,aAAA,CAAA,oBAAA,CAAqB,KAArB,EAA4B,GAA5B,CAAd;EAEA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;EACA,OAAO,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,CAAP;AACD,CAL2D,CAA/C;AAOb,OAAA,CAAA,QAAA,CAAS,WAAT,GAAuB,UAAvB","sourcesContent":["import * as React from 'react';\nimport { useCheckbox_unstable } from './useCheckbox';\nimport { renderCheckbox_unstable } from './renderCheckbox';\nimport { useCheckboxStyles_unstable } from './useCheckboxStyles';\nimport type { CheckboxProps } from './Checkbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Checkboxes give people a way to select one or more items from a group,\n * or switch between two mutually exclusive options (checked or unchecked).\n */\nexport const Checkbox: ForwardRefComponent<CheckboxProps> = React.forwardRef((props, ref) => {\n const state = useCheckbox_unstable(props, ref);\n\n useCheckboxStyles_unstable(state);\n return renderCheckbox_unstable(state);\n});\n\nCheckbox.displayName = 'Checkbox';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;;AAIaA,gBAAQ,gBAAuCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC1F,MAAMC,KAAK,GAAGC,kCAAoB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAE9CG,8CAA0B,CAACF,KAAK,CAAC;EACjC,OAAOG,wCAAuB,CAACH,KAAK,CAAC;AACvC,CAAC,CAAC;AAEFL,gBAAQ,CAACS,WAAW,GAAG,UAAU","names":["exports","React","forwardRef","props","ref","state","useCheckbox_1","useCheckboxStyles_1","renderCheckbox_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCheckbox_unstable } from './useCheckbox';\nimport { renderCheckbox_unstable } from './renderCheckbox';\nimport { useCheckboxStyles_unstable } from './useCheckboxStyles';\nimport type { CheckboxProps } from './Checkbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Checkboxes give people a way to select one or more items from a group,\n * or switch between two mutually exclusive options (checked or unchecked).\n */\nexport const Checkbox: ForwardRefComponent<CheckboxProps> = React.forwardRef((props, ref) => {\n const state = useCheckbox_unstable(props, ref);\n\n useCheckboxStyles_unstable(state);\n return renderCheckbox_unstable(state);\n});\n\nCheckbox.displayName = 'Checkbox';\n"]}
package/lib-commonjs/components/Checkbox/Checkbox.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
package/lib-commonjs/components/Checkbox/index.js CHANGED
@@ -3,16 +3,10 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
-
7
6
  const tslib_1 = /*#__PURE__*/require("tslib");
8
-
9
7
  tslib_1.__exportStar(require("./Checkbox"), exports);
10
-
11
8
  tslib_1.__exportStar(require("./Checkbox.types"), exports);
12
-
13
9
  tslib_1.__exportStar(require("./renderCheckbox"), exports);
14
-
15
10
  tslib_1.__exportStar(require("./useCheckbox"), exports);
16
-
17
11
  tslib_1.__exportStar(require("./useCheckboxStyles"), exports);
18
12
  //# sourceMappingURL=index.js.map
package/lib-commonjs/components/Checkbox/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Checkbox';\nexport * from './Checkbox.types';\nexport * from './renderCheckbox';\nexport * from './useCheckbox';\nexport * from './useCheckboxStyles';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/components/Checkbox/index.ts"],"sourcesContent":["export * from './Checkbox';\nexport * from './Checkbox.types';\nexport * from './renderCheckbox';\nexport * from './useCheckbox';\nexport * from './useCheckboxStyles';\n"]}
package/lib-commonjs/components/Checkbox/renderCheckbox.js CHANGED
@@ -4,23 +4,24 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.renderCheckbox_unstable = void 0;
7
-
8
7
  const React = /*#__PURE__*/require("react");
9
-
10
8
  const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
11
-
12
9
  const renderCheckbox_unstable = state => {
13
10
  const {
14
11
  slots,
15
12
  slotProps
16
13
  } = react_utilities_1.getSlots(state);
17
- return React.createElement(slots.root, { ...slotProps.root
18
- }, React.createElement(slots.input, { ...slotProps.input
19
- }), state.labelPosition === 'before' && slots.label && React.createElement(slots.label, { ...slotProps.label
20
- }), React.createElement(slots.indicator, { ...slotProps.indicator
21
- }), state.labelPosition === 'after' && slots.label && React.createElement(slots.label, { ...slotProps.label
14
+ return React.createElement(slots.root, {
15
+ ...slotProps.root
16
+ }, React.createElement(slots.input, {
17
+ ...slotProps.input
18
+ }), state.labelPosition === 'before' && slots.label && React.createElement(slots.label, {
19
+ ...slotProps.label
20
+ }), React.createElement(slots.indicator, {
21
+ ...slotProps.indicator
22
+ }), state.labelPosition === 'after' && slots.label && React.createElement(slots.label, {
23
+ ...slotProps.label
22
24
  }));
23
25
  };
24
-
25
26
  exports.renderCheckbox_unstable = renderCheckbox_unstable;
26
27
  //# sourceMappingURL=renderCheckbox.js.map
package/lib-commonjs/components/Checkbox/renderCheckbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/renderCheckbox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGO,MAAM,uBAAuB,GAAI,KAAD,IAAyB;EAC9D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,EAEG,KAAK,CAAC,aAAN,KAAwB,QAAxB,IAAoC,KAAK,CAAC,KAA1C,IAAmD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAFtD,EAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAhB,CAHF,EAIG,KAAK,CAAC,aAAN,KAAwB,OAAxB,IAAmC,KAAK,CAAC,KAAzC,IAAkD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAJrD,CADF;AAQD,CAXM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { CheckboxState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxState) => {\n const { slots, slotProps } = getSlots<CheckboxSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.input {...slotProps.input} />\n {state.labelPosition === 'before' && slots.label && <slots.label {...slotProps.label} />}\n <slots.indicator {...slotProps.indicator} />\n {state.labelPosition === 'after' && slots.label && <slots.label {...slotProps.label} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAA;AACA;AAGO,MAAMA,uBAAuB,GAAIC,KAAoB,IAAI;EAC9D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAgBH,KAAK,CAAC;EAE3D,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC5BD,oBAACH,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,EACnCN,KAAK,CAACO,aAAa,KAAK,QAAQ,IAAIN,KAAK,CAACO,KAAK,IAAIJ,oBAACH,KAAK,CAACO,KAAK;IAAA,GAAKN,SAAS,CAACM;EAAK,EAAI,EACxFJ,oBAACH,KAAK,CAACQ,SAAS;IAAA,GAAKP,SAAS,CAACO;EAAS,EAAI,EAC3CT,KAAK,CAACO,aAAa,KAAK,OAAO,IAAIN,KAAK,CAACO,KAAK,IAAIJ,oBAACH,KAAK,CAACO,KAAK;IAAA,GAAKN,SAAS,CAACM;EAAK,EAAI,CAC5E;AAEjB,CAAC;AAXYE,+BAAuB","names":["renderCheckbox_unstable","state","slots","slotProps","react_utilities_1","React","root","input","labelPosition","label","indicator","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/components/Checkbox/renderCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { CheckboxState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxState) => {\n const { slots, slotProps } = getSlots<CheckboxSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.input {...slotProps.input} />\n {state.labelPosition === 'before' && slots.label && <slots.label {...slotProps.label} />}\n <slots.indicator {...slotProps.indicator} />\n {state.labelPosition === 'after' && slots.label && <slots.label {...slotProps.label} />}\n </slots.root>\n );\n};\n"]}
package/lib-commonjs/components/Checkbox/useCheckbox.js CHANGED
@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.useCheckbox_unstable = void 0;
7
-
8
7
  const React = /*#__PURE__*/require("react");
9
-
10
8
  const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
11
-
12
9
  const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
13
-
14
10
  const react_label_1 = /*#__PURE__*/require("@fluentui/react-label");
15
-
16
11
  const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
17
12
  /**
18
13
  * Create the state required to render Checkbox.
@@ -23,8 +18,6 @@ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
23
18
  * @param props - props from this instance of Checkbox
24
19
  * @param ref - reference to `<input>` element of Checkbox
25
20
  */
26
-
27
-
28
21
  const useCheckbox_unstable = (props, ref) => {
29
22
  const {
30
23
  disabled,
@@ -47,7 +40,6 @@ const useCheckbox_unstable = (props, ref) => {
47
40
  const mixed = checked === 'mixed';
48
41
  const id = react_utilities_1.useId('checkbox-', nativeProps.primary.id);
49
42
  let checkmarkIcon;
50
-
51
43
  if (mixed) {
52
44
  if (shape === 'circular') {
53
45
  checkmarkIcon = React.createElement(react_icons_1.CircleFilled, null);
@@ -57,7 +49,6 @@ const useCheckbox_unstable = (props, ref) => {
57
49
  } else {
58
50
  checkmarkIcon = size === 'large' ? React.createElement(react_icons_1.Checkmark16Filled, null) : React.createElement(react_icons_1.Checkmark12Filled, null);
59
51
  }
60
-
61
52
  const state = {
62
53
  shape,
63
54
  checked,
@@ -93,9 +84,9 @@ const useCheckbox_unstable = (props, ref) => {
93
84
  disabled,
94
85
  required,
95
86
  size: 'medium' // Even if the checkbox itself is large
96
-
97
87
  }
98
88
  }),
89
+
99
90
  indicator: react_utilities_1.resolveShorthand(props.indicator, {
100
91
  required: true,
101
92
  defaultProps: {
@@ -110,13 +101,13 @@ const useCheckbox_unstable = (props, ref) => {
110
101
  checked: val
111
102
  });
112
103
  setChecked(val);
113
- }); // Create a ref object for the input element so we can use it to set the indeterminate prop.
104
+ });
105
+ // Create a ref object for the input element so we can use it to set the indeterminate prop.
114
106
  // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)
115
-
116
107
  const inputRef = react_utilities_1.useMergedRefs(state.input.ref);
117
- state.input.ref = inputRef; // Set the <input> element's checked and indeterminate properties based on our tri-state property.
108
+ state.input.ref = inputRef;
109
+ // Set the <input> element's checked and indeterminate properties based on our tri-state property.
118
110
  // Since indeterminate can only be set via javascript, it has to be done in a layout effect.
119
-
120
111
  react_utilities_1.useIsomorphicLayoutEffect(() => {
121
112
  if (inputRef.current) {
122
113
  inputRef.current.indeterminate = mixed;
@@ -124,6 +115,5 @@ const useCheckbox_unstable = (props, ref) => {
124
115
  }, [inputRef, mixed]);
125
116
  return state;
126
117
  };
127
-
128
118
  exports.useCheckbox_unstable = useCheckbox_unstable;
129
119
  //# sourceMappingURL=useCheckbox.js.map
package/lib-commonjs/components/Checkbox/useCheckbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/useCheckbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n useControllableState,\n useEventCallback,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { CheckboxProps, CheckboxState } from './Checkbox.types';\nimport {\n Checkmark12Filled,\n Checkmark16Filled,\n Square12Filled,\n Square16Filled,\n CircleFilled,\n} from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Checkbox.\n *\n * The returned state can be modified with hooks such as useCheckboxStyles_unstable,\n * before being passed to renderCheckbox_unstable.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLInputElement>): CheckboxState => {\n const { disabled, required, shape = 'square', size = 'medium', labelPosition = 'after', onChange } = props;\n\n const [checked, setChecked] = useControllableState({\n defaultState: props.defaultChecked,\n state: props.checked,\n initialState: false,\n });\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'size', 'onChange'],\n });\n\n const mixed = checked === 'mixed';\n const id = useId('checkbox-', nativeProps.primary.id);\n\n let checkmarkIcon;\n if (mixed) {\n if (shape === 'circular') {\n checkmarkIcon = <CircleFilled />;\n } else {\n checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;\n }\n } else {\n checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n }\n\n const state: CheckboxState = {\n shape,\n checked,\n size,\n labelPosition,\n components: {\n root: 'span',\n input: 'input',\n indicator: 'div',\n label: Label,\n },\n root: resolveShorthand(props.root, {\n required: true,\n defaultProps: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\n }),\n input: resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n type: 'checkbox',\n id,\n ref,\n checked: checked === true,\n ...nativeProps.primary,\n },\n }),\n label: resolveShorthand(props.label, {\n required: false,\n defaultProps: {\n htmlFor: id,\n disabled,\n required,\n size: 'medium', // Even if the checkbox itself is large\n },\n }),\n indicator: resolveShorthand(props.indicator, {\n required: true,\n defaultProps: {\n 'aria-hidden': true,\n children: checkmarkIcon,\n },\n }),\n };\n\n state.input.onChange = useEventCallback(ev => {\n const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;\n onChange?.(ev, { checked: val });\n setChecked(val);\n });\n\n // Create a ref object for the input element so we can use it to set the indeterminate prop.\n // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)\n const inputRef = useMergedRefs(state.input.ref);\n state.input.ref = inputRef;\n\n // Set the <input> element's checked and indeterminate properties based on our tri-state property.\n // Since indeterminate can only be set via javascript, it has to be done in a layout effect.\n useIsomorphicLayoutEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = mixed;\n }\n }, [inputRef, mixed]);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"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","names":["useCheckbox_unstable","props","ref","disabled","required","shape","size","labelPosition","onChange","checked","setChecked","react_utilities_1","defaultState","defaultChecked","state","initialState","nativeProps","primarySlotTagName","excludedPropNames","mixed","id","primary","checkmarkIcon","React","react_icons_1","components","root","input","indicator","label","react_label_1","defaultProps","react_tabster_1","type","htmlFor","children","ev","val","currentTarget","indeterminate","inputRef","current","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n useControllableState,\n useEventCallback,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { CheckboxProps, CheckboxState } from './Checkbox.types';\nimport {\n Checkmark12Filled,\n Checkmark16Filled,\n Square12Filled,\n Square16Filled,\n CircleFilled,\n} from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Checkbox.\n *\n * The returned state can be modified with hooks such as useCheckboxStyles_unstable,\n * before being passed to renderCheckbox_unstable.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLInputElement>): CheckboxState => {\n const { disabled, required, shape = 'square', size = 'medium', labelPosition = 'after', onChange } = props;\n\n const [checked, setChecked] = useControllableState({\n defaultState: props.defaultChecked,\n state: props.checked,\n initialState: false,\n });\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'size', 'onChange'],\n });\n\n const mixed = checked === 'mixed';\n const id = useId('checkbox-', nativeProps.primary.id);\n\n let checkmarkIcon;\n if (mixed) {\n if (shape === 'circular') {\n checkmarkIcon = <CircleFilled />;\n } else {\n checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;\n }\n } else {\n checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n }\n\n const state: CheckboxState = {\n shape,\n checked,\n size,\n labelPosition,\n components: {\n root: 'span',\n input: 'input',\n indicator: 'div',\n label: Label,\n },\n root: resolveShorthand(props.root, {\n required: true,\n defaultProps: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\n }),\n input: resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n type: 'checkbox',\n id,\n ref,\n checked: checked === true,\n ...nativeProps.primary,\n },\n }),\n label: resolveShorthand(props.label, {\n required: false,\n defaultProps: {\n htmlFor: id,\n disabled,\n required,\n size: 'medium', // Even if the checkbox itself is large\n },\n }),\n indicator: resolveShorthand(props.indicator, {\n required: true,\n defaultProps: {\n 'aria-hidden': true,\n children: checkmarkIcon,\n },\n }),\n };\n\n state.input.onChange = useEventCallback(ev => {\n const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;\n onChange?.(ev, { checked: val });\n setChecked(val);\n });\n\n // Create a ref object for the input element so we can use it to set the indeterminate prop.\n // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)\n const inputRef = useMergedRefs(state.input.ref);\n state.input.ref = inputRef;\n\n // Set the <input> element's checked and indeterminate properties based on our tri-state property.\n // Since indeterminate can only be set via javascript, it has to be done in a layout effect.\n useIsomorphicLayoutEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = mixed;\n }\n }, [inputRef, mixed]);\n\n return state;\n};\n"]}
package/lib-commonjs/components/Checkbox/useCheckboxStyles.js CHANGED
@@ -4,91 +4,79 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.useCheckboxStyles_unstable = exports.checkboxClassNames = void 0;
7
-
8
7
  const react_1 = /*#__PURE__*/require("@griffel/react");
9
-
10
8
  const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
11
-
12
9
  const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
13
-
14
10
  exports.checkboxClassNames = {
15
11
  root: 'fui-Checkbox',
16
12
  label: 'fui-Checkbox__label',
17
13
  input: 'fui-Checkbox__input',
18
14
  indicator: 'fui-Checkbox__indicator'
19
- }; // The indicator size is used by the indicator and label styles
20
-
15
+ };
16
+ // The indicator size is used by the indicator and label styles
21
17
  const indicatorSizeMedium = '16px';
22
18
  const indicatorSizeLarge = '20px';
23
-
24
19
  const useRootBaseClassName = /*#__PURE__*/react_1.__resetStyles("r1o1qdo1", "r1niodl4", [".r1o1qdo1{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".r1o1qdo1:focus{outline-style:none;}", ".r1o1qdo1:focus-visible{outline-style:none;}", ".r1o1qdo1[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1o1qdo1[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;left:-2px;right:-2px;}", ".r1niodl4{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".r1niodl4:focus{outline-style:none;}", ".r1niodl4:focus-visible{outline-style:none;}", ".r1niodl4[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1niodl4[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;right:-2px;left:-2px;}"]);
25
-
26
20
  const useInputBaseClassName = /*#__PURE__*/react_1.__resetStyles("rfcvz6l", null, [".rfcvz6l{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));}", ".rfcvz6l:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator>*{opacity:0;}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground3);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessible);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__label{color:var(--colorNeutralForeground2);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".rfcvz6l:enabled:checked:not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".rfcvz6l:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorCompoundBrandBackground);}", ".rfcvz6l:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorCompoundBrandBackgroundHover);}", ".rfcvz6l:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorCompoundBrandBackgroundPressed);}", ".rfcvz6l:enabled:indeterminate~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".rfcvz6l:enabled:indeterminate~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}", ".rfcvz6l:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}", ".rfcvz6l:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}", ".rfcvz6l:disabled{cursor:default;}", ".rfcvz6l:disabled~.fui-Checkbox__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", "@media (forced-colors: active){.rfcvz6l:disabled~.fui-Checkbox__label{color:GrayText;}}", ".rfcvz6l:disabled~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}", "@media (forced-colors: active){.rfcvz6l:disabled~.fui-Checkbox__indicator{color:GrayText;}}", "@media (forced-colors: active){.rfcvz6l:disabled~.fui-Checkbox__indicator svg{color:GrayText;}}"]);
27
-
28
21
  const useInputStyles = /*#__PURE__*/react_1.__styles({
29
- "before": {
30
- "j35jbq": ["f1e31b4d", "f1vgc2s3"]
22
+ before: {
23
+ j35jbq: ["f1e31b4d", "f1vgc2s3"]
31
24
  },
32
- "after": {
33
- "oyh7mz": ["f1vgc2s3", "f1e31b4d"]
25
+ after: {
26
+ oyh7mz: ["f1vgc2s3", "f1e31b4d"]
34
27
  },
35
- "large": {
36
- "a9b677": "f1mq5jt6"
28
+ large: {
29
+ a9b677: "f1mq5jt6"
37
30
  }
38
31
  }, {
39
- "d": [".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f1mq5jt6{width:calc(20px + 2 * var(--spacingHorizontalS));}"]
32
+ d: [".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f1mq5jt6{width:calc(20px + 2 * var(--spacingHorizontalS));}"]
40
33
  });
41
-
42
34
  const useIndicatorBaseClassName = /*#__PURE__*/react_1.__resetStyles("r1jvlehe", null, [".r1jvlehe{-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid;border-radius:var(--borderRadiusSmall);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;font-size:12px;height:16px;width:16px;}"]);
43
-
44
35
  const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
45
- "large": {
46
- "Be2twd7": "f4ybsrx",
47
- "Bqenvij": "fjamq6b",
48
- "a9b677": "f64fuq3"
36
+ large: {
37
+ Be2twd7: "f4ybsrx",
38
+ Bqenvij: "fjamq6b",
39
+ a9b677: "f64fuq3"
49
40
  },
50
- "circular": {
51
- "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
52
- "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
53
- "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
54
- "Btl43ni": ["f1s8kh49", "f1djnp8u"]
41
+ circular: {
42
+ Bbmb7ep: ["f8fbkgy", "f1nfllo7"],
43
+ Beyfa6y: ["f1nfllo7", "f8fbkgy"],
44
+ B7oj6ja: ["f1djnp8u", "f1s8kh49"],
45
+ Btl43ni: ["f1s8kh49", "f1djnp8u"]
55
46
  }
56
47
  }, {
57
- "d": [".f4ybsrx{font-size:16px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}"]
58
- }); // Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
59
-
60
-
48
+ d: [".f4ybsrx{font-size:16px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}"]
49
+ });
50
+ // Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
61
51
  const useLabelStyles = /*#__PURE__*/react_1.__styles({
62
- "base": {
63
- "qb2dma": "f7nlbp4",
64
- "Bceei9c": "f1k6fduh",
65
- "z8tnut": "f1kwiid1",
66
- "z189sj": ["f1vdfbxk", "f1f5gg8d"],
67
- "Byoj8tv": "f5b47ha",
68
- "uwmqm3": ["f1f5gg8d", "f1vdfbxk"]
52
+ base: {
53
+ qb2dma: "f7nlbp4",
54
+ Bceei9c: "f1k6fduh",
55
+ z8tnut: "f1kwiid1",
56
+ z189sj: ["f1vdfbxk", "f1f5gg8d"],
57
+ Byoj8tv: "f5b47ha",
58
+ uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
69
59
  },
70
- "before": {
71
- "z189sj": ["f7x41pl", "fruq291"]
60
+ before: {
61
+ z189sj: ["f7x41pl", "fruq291"]
72
62
  },
73
- "after": {
74
- "uwmqm3": ["fruq291", "f7x41pl"]
63
+ after: {
64
+ uwmqm3: ["fruq291", "f7x41pl"]
75
65
  },
76
- "medium": {
77
- "B6of3ja": "fjzwpt6",
78
- "jrapky": "fh6j2fo"
66
+ medium: {
67
+ B6of3ja: "fjzwpt6",
68
+ jrapky: "fh6j2fo"
79
69
  },
80
- "large": {
81
- "B6of3ja": "f1xlvstr",
82
- "jrapky": "f49ad5g"
70
+ large: {
71
+ B6of3ja: "f1xlvstr",
72
+ jrapky: "f49ad5g"
83
73
  }
84
74
  }, {
85
- "d": [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1k6fduh{cursor:pointer;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}", ".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}", ".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}", ".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}"]
75
+ d: [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1k6fduh{cursor:pointer;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}", ".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}", ".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}", ".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}"]
86
76
  });
87
77
  /**
88
78
  * Apply styling to the Checkbox slots based on the state
89
79
  */
90
-
91
-
92
80
  const useCheckboxStyles_unstable = state => {
93
81
  const {
94
82
  labelPosition,
@@ -102,19 +90,14 @@ const useCheckboxStyles_unstable = state => {
102
90
  state.input.className = react_1.mergeClasses(exports.checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);
103
91
  const indicatorBaseClassName = useIndicatorBaseClassName();
104
92
  const indicatorStyles = useIndicatorStyles();
105
-
106
93
  if (state.indicator) {
107
94
  state.indicator.className = react_1.mergeClasses(exports.checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);
108
95
  }
109
-
110
96
  const labelStyles = useLabelStyles();
111
-
112
97
  if (state.label) {
113
98
  state.label.className = react_1.mergeClasses(exports.checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);
114
99
  }
115
-
116
100
  return state;
117
101
  };
118
-
119
102
  exports.useCheckboxStyles_unstable = useCheckboxStyles_unstable;
120
103
  //# sourceMappingURL=useCheckboxStyles.js.map
package/lib-commonjs/components/Checkbox/useCheckboxStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } 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\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// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n position: 'relative',\n display: 'inline-flex',\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n top: 0,\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`,\n\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 borderColor: tokens.colorNeutralStrokeAccessible,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n 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.colorNeutralForegroundInverted,\n borderColor: tokens.colorCompoundBrandBackground,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorCompoundBrandBackgroundHover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n 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 borderColor: tokens.colorCompoundBrandStroke,\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokeHover,\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokePressed,\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${checkboxClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n 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\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n },\n after: {\n left: 0,\n },\n\n large: {\n width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`,\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n\n border: tokens.strokeWidthThin + ' solid',\n borderRadius: tokens.borderRadiusSmall,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n\n fontSize: '12px',\n height: indicatorSizeMedium,\n width: indicatorSizeMedium,\n});\n\nconst useIndicatorStyles = makeStyles({\n large: {\n fontSize: '16px',\n height: indicatorSizeLarge,\n width: indicatorSizeLarge,\n },\n\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n cursor: 'pointer',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n before: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\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 marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n },\n large: {\n marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n },\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n const { labelPosition, shape, size } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, state.root.className);\n\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n checkboxClassNames.input,\n inputBaseClassName,\n size === 'large' && inputStyles.large,\n inputStyles[labelPosition],\n state.input.className,\n );\n\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(\n checkboxClassNames.indicator,\n indicatorBaseClassName,\n size === 'large' && indicatorStyles.large,\n 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[size],\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAIaA,0BAAkB,GAAkC;EAC/DC,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,qBAAqB;EAC5BC,KAAK,EAAE,qBAAqB;EAC5BC,SAAS,EAAE;CACZ;AAED;AACA,MAAMC,mBAAmB,GAAG,MAAM;AAClC,MAAMC,kBAAkB,GAAG,MAAM;AAEjC,MAAMC,oBAAoB,gBAAGC,qBAAe,guEAI1C;AAEF,MAAMC,qBAAqB,gBAAGD,qBAAe,o2FAuH3C;AAEF,MAAME,cAAc,gBAAGF,gBAAU;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAW/B;AAEF,MAAMG,yBAAyB,gBAAGH,qBAAe,8qBAmB/C;AAEF,MAAMI,kBAAkB,gBAAGJ,gBAAU;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAUnC;AAEF;AACA,MAAMK,cAAc,gBAAGL,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAwB/B;AAEF;;;AAGO,MAAMM,0BAA0B,GAAIC,KAAoB,IAAmB;EAChF,MAAM;IAAEC,aAAa;IAAEC,KAAK;IAAEC;EAAI,CAAE,GAAGH,KAAK;EAE5C,MAAMI,iBAAiB,GAAGZ,oBAAoB,EAAE;EAChDQ,KAAK,CAACd,IAAI,CAACmB,SAAS,GAAGZ,oBAAY,CAACR,0BAAkB,CAACC,IAAI,EAAEkB,iBAAiB,EAAEJ,KAAK,CAACd,IAAI,CAACmB,SAAS,CAAC;EAErG,MAAMC,kBAAkB,GAAGZ,qBAAqB,EAAE;EAClD,MAAMa,WAAW,GAAGZ,cAAc,EAAE;EACpCK,KAAK,CAACZ,KAAK,CAACiB,SAAS,GAAGZ,oBAAY,CAClCR,0BAAkB,CAACG,KAAK,EACxBkB,kBAAkB,EAClBH,IAAI,KAAK,OAAO,IAAII,WAAW,CAACC,KAAK,EACrCD,WAAW,CAACN,aAAa,CAAC,EAC1BD,KAAK,CAACZ,KAAK,CAACiB,SAAS,CACtB;EAED,MAAMI,sBAAsB,GAAGb,yBAAyB,EAAE;EAC1D,MAAMc,eAAe,GAAGb,kBAAkB,EAAE;EAC5C,IAAIG,KAAK,CAACX,SAAS,EAAE;IACnBW,KAAK,CAACX,SAAS,CAACgB,SAAS,GAAGZ,oBAAY,CACtCR,0BAAkB,CAACI,SAAS,EAC5BoB,sBAAsB,EACtBN,IAAI,KAAK,OAAO,IAAIO,eAAe,CAACF,KAAK,EACzCN,KAAK,KAAK,UAAU,IAAIQ,eAAe,CAACC,QAAQ,EAChDX,KAAK,CAACX,SAAS,CAACgB,SAAS,CAC1B;;EAGH,MAAMO,WAAW,GAAGd,cAAc,EAAE;EACpC,IAAIE,KAAK,CAACb,KAAK,EAAE;IACfa,KAAK,CAACb,KAAK,CAACkB,SAAS,GAAGZ,oBAAY,CAClCR,0BAAkB,CAACE,KAAK,EACxByB,WAAW,CAACC,IAAI,EAChBD,WAAW,CAACT,IAAI,CAAC,EACjBS,WAAW,CAACX,aAAa,CAAC,EAC1BD,KAAK,CAACb,KAAK,CAACkB,SAAS,CACtB;;EAGH,OAAOL,KAAK;AACd,CAAC;AAxCYf,kCAA0B","names":["exports","root","label","input","indicator","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","react_1","useInputBaseClassName","useInputStyles","useIndicatorBaseClassName","useIndicatorStyles","useLabelStyles","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","className","inputBaseClassName","inputStyles","large","indicatorBaseClassName","indicatorStyles","circular","labelStyles","base"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } 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\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// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n position: 'relative',\n display: 'inline-flex',\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n top: 0,\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`,\n\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 borderColor: tokens.colorNeutralStrokeAccessible,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n 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.colorNeutralForegroundInverted,\n borderColor: tokens.colorCompoundBrandBackground,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorCompoundBrandBackgroundHover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n 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 borderColor: tokens.colorCompoundBrandStroke,\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokeHover,\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':active:hover': {\n [`& ~ .${checkboxClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokePressed,\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${checkboxClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n [`& ~ .${checkboxClassNames.indicator}`]: {\n 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\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n },\n after: {\n left: 0,\n },\n\n large: {\n width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`,\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n alignSelf: 'flex-start',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n\n border: tokens.strokeWidthThin + ' solid',\n borderRadius: tokens.borderRadiusSmall,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n\n fontSize: '12px',\n height: indicatorSizeMedium,\n width: indicatorSizeMedium,\n});\n\nconst useIndicatorStyles = makeStyles({\n large: {\n fontSize: '16px',\n height: indicatorSizeLarge,\n width: indicatorSizeLarge,\n },\n\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n cursor: 'pointer',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n before: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\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 marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n },\n large: {\n marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n },\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n const { labelPosition, shape, size } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, state.root.className);\n\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n checkboxClassNames.input,\n inputBaseClassName,\n size === 'large' && inputStyles.large,\n inputStyles[labelPosition],\n state.input.className,\n );\n\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n if (state.indicator) {\n state.indicator.className = mergeClasses(\n checkboxClassNames.indicator,\n indicatorBaseClassName,\n size === 'large' && indicatorStyles.large,\n 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[size],\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n\n return state;\n};\n"]}
package/lib-commonjs/components/CheckboxField/CheckboxField.js CHANGED
@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.CheckboxField = exports.checkboxFieldClassNames = void 0;
7
-
8
7
  const React = /*#__PURE__*/require("react");
9
-
10
8
  const react_field_1 = /*#__PURE__*/require("@fluentui/react-field");
11
-
12
9
  const Checkbox_1 = /*#__PURE__*/require("../../Checkbox");
13
-
14
10
  exports.checkboxFieldClassNames = /*#__PURE__*/react_field_1.getFieldClassNames('CheckboxField');
15
11
  exports.CheckboxField = /*#__PURE__*/React.forwardRef((props, ref) => {
16
12
  const {
package/lib-commonjs/components/CheckboxField/CheckboxField.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-checkbox/src/components/CheckboxField/CheckboxField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAQA,MAAA,UAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAea,OAAA,CAAA,uBAAA,gBAA0B,aAAA,CAAA,kBAAA,CAAmB,eAAnB,CAA1B;AAEA,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM;IAAE,UAAF;IAAc,QAAd;IAAwB,KAAxB;IAA+B,OAA/B;IAAwC,GAAG;EAA3C,IAA2D,KAAjE;EAEA,KAAK,GAAG;IACN;IACA,KAAK,EAAE,UAFD;IAGN;IACA,OAAO,EAAE;MAAE,KAAF;MAAS,QAAT;MAAmB,GAAG;IAAtB,CAJH;IAKN,GAAG;EALG,CAAR;EAQA,MAAM,KAAK,GAAG,aAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAAE,SAAS,EAAE,UAAA,CAAA,QAAb;IAAuB,UAAU,EAAE,OAAA,CAAA;EAAnC,CAA9B,CAAd;EACA,aAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CAdqE,CAAzD;AAgBb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n getFieldClassNames,\n renderField_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-field';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CheckboxProps } from '../../Checkbox';\nimport { Checkbox } from '../../Checkbox';\n\nexport type CheckboxFieldProps = Omit<FieldProps<typeof Checkbox>, 'label'> & {\n /**\n * The Checkbox's label.\n */\n label?: CheckboxProps['label'];\n\n /**\n * The label for the CheckboxField, which appears above or before the Checkbox, depending on the `orientation` prop.\n * It is recommended to only set the `label` prop, and not `fieldLabel`.\n */\n fieldLabel?: FieldProps<typeof Checkbox>['label'];\n};\n\nexport const checkboxFieldClassNames = getFieldClassNames('CheckboxField');\n\nexport const CheckboxField: ForwardRefComponent<CheckboxFieldProps> = React.forwardRef((props, ref) => {\n const { fieldLabel, required, label, control, ...restOfProps } = props;\n\n props = {\n // Use the fieldLabel prop as the Field's label\n label: fieldLabel,\n // Use the label prop as the Checkbox's label\n control: { label, required, ...control },\n ...restOfProps,\n };\n\n const state = useField_unstable(props, ref, { component: Checkbox, classNames: checkboxFieldClassNames });\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nCheckboxField.displayName = 'CheckboxField';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAA;AAEA;AAQA;AAeaA,+BAAuB,gBAAGC,gCAAkB,CAAC,eAAe,CAAC;AAE7DD,qBAAa,gBAA4CE,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpG,MAAM;IAAEC,UAAU;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,OAAO;IAAE,GAAGC;EAAW,CAAE,GAAGN,KAAK;EAEtEA,KAAK,GAAG;IACN;IACAI,KAAK,EAAEF,UAAU;IACjB;IACAG,OAAO,EAAE;MAAED,KAAK;MAAED,QAAQ;MAAE,GAAGE;IAAO,CAAE;IACxC,GAAGC;GACJ;EAED,MAAMC,KAAK,GAAGV,+BAAiB,CAACG,KAAK,EAAEC,GAAG,EAAE;IAAEO,SAAS,EAAEC,mBAAQ;IAAEC,UAAU,EAAEd;EAAuB,CAAE,CAAC;EACzGC,qCAAuB,CAACU,KAAK,CAAC;EAC9B,OAAOV,kCAAoB,CAACU,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFX,qBAAa,CAACe,WAAW,GAAG,eAAe","names":["exports","react_field_1","React","forwardRef","props","ref","fieldLabel","required","label","control","restOfProps","state","component","Checkbox_1","classNames","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/components/CheckboxField/CheckboxField.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n getFieldClassNames,\n renderField_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-field';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CheckboxProps } from '../../Checkbox';\nimport { Checkbox } from '../../Checkbox';\n\nexport type CheckboxFieldProps = Omit<FieldProps<typeof Checkbox>, 'label'> & {\n /**\n * The Checkbox's label.\n */\n label?: CheckboxProps['label'];\n\n /**\n * The label for the CheckboxField, which appears above or before the Checkbox, depending on the `orientation` prop.\n * It is recommended to only set the `label` prop, and not `fieldLabel`.\n */\n fieldLabel?: FieldProps<typeof Checkbox>['label'];\n};\n\nexport const checkboxFieldClassNames = getFieldClassNames('CheckboxField');\n\nexport const CheckboxField: ForwardRefComponent<CheckboxFieldProps> = React.forwardRef((props, ref) => {\n const { fieldLabel, required, label, control, ...restOfProps } = props;\n\n props = {\n // Use the fieldLabel prop as the Field's label\n label: fieldLabel,\n // Use the label prop as the Checkbox's label\n control: { label, required, ...control },\n ...restOfProps,\n };\n\n const state = useField_unstable(props, ref, { component: Checkbox, classNames: checkboxFieldClassNames });\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nCheckboxField.displayName = 'CheckboxField';\n"]}
package/lib-commonjs/components/CheckboxField/index.js CHANGED
@@ -3,8 +3,6 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
-
7
6
  const tslib_1 = /*#__PURE__*/require("tslib");
8
-
9
7
  tslib_1.__exportStar(require("./CheckboxField"), exports);
10
8
  //# sourceMappingURL=index.js.map
package/lib-commonjs/components/CheckboxField/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-checkbox/src/components/CheckboxField/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './CheckboxField';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/components/CheckboxField/index.ts"],"sourcesContent":["export * from './CheckboxField';\n"]}
package/lib-commonjs/index.js CHANGED
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.checkboxFieldClassNames = exports.CheckboxField_unstable = exports.useCheckbox_unstable = exports.useCheckboxStyles_unstable = exports.renderCheckbox_unstable = exports.checkboxClassNames = exports.Checkbox = void 0;
7
-
8
7
  var Checkbox_1 = /*#__PURE__*/require("./Checkbox");
9
-
10
8
  Object.defineProperty(exports, "Checkbox", {
11
9
  enumerable: true,
12
10
  get: function () {
@@ -37,9 +35,7 @@ Object.defineProperty(exports, "useCheckbox_unstable", {
37
35
  return Checkbox_1.useCheckbox_unstable;
38
36
  }
39
37
  });
40
-
41
38
  var CheckboxField_1 = /*#__PURE__*/require("./CheckboxField");
42
-
43
39
  Object.defineProperty(exports, "CheckboxField_unstable", {
44
40
  enumerable: true,
45
41
  get: function () {
package/lib-commonjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-checkbox/src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,UAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,QAAA;EAAQ;AAAR,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,0BAAA;EAA0B;AAA1B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;;AAIF,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,aAAA;EAAa;AAAb,CAAA;AAAyC,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA","sourcesContent":["export {\n Checkbox,\n checkboxClassNames,\n renderCheckbox_unstable,\n useCheckboxStyles_unstable,\n useCheckbox_unstable,\n} from './Checkbox';\nexport type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox';\n\nexport { CheckboxField as CheckboxField_unstable, checkboxFieldClassNames } from './CheckboxField';\nexport type { CheckboxFieldProps as CheckboxFieldProps_unstable } from './CheckboxField';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAA;AACEA;EAAAC;EAAAC;IAAA,0BAAQ;EAAA;AAAA;AACRF;EAAAC;EAAAC;IAAA,oCAAkB;EAAA;AAAA;AAClBF;EAAAC;EAAAC;IAAA,yCAAuB;EAAA;AAAA;AACvBF;EAAAC;EAAAC;IAAA,4CAA0B;EAAA;AAAA;AAC1BF;EAAAC;EAAAC;IAAA,sCAAoB;EAAA;AAAA;AAItB;AAASF;EAAAC;EAAAC;IAAA,oCAAa;EAAA;AAAA;AAA4BF;EAAAC;EAAAC;IAAA,8CAAuB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/index.ts"],"sourcesContent":["export {\n Checkbox,\n checkboxClassNames,\n renderCheckbox_unstable,\n useCheckboxStyles_unstable,\n useCheckbox_unstable,\n} from './Checkbox';\nexport type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox';\n\nexport { CheckboxField as CheckboxField_unstable, checkboxFieldClassNames } from './CheckboxField';\nexport type { CheckboxFieldProps as CheckboxFieldProps_unstable } from './CheckboxField';\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-checkbox",
3
- "version": "9.0.16",
3
+ "version": "9.0.18",
4
4
  "description": "Fluent UI checkbox component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -27,17 +27,17 @@
27
27
  "devDependencies": {
28
28
  "@fluentui/eslint-plugin": "*",
29
29
  "@fluentui/react-conformance": "*",
30
- "@fluentui/react-conformance-griffel": "9.0.0-beta.18",
31
- "@fluentui/scripts": "^1.0.0"
30
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.19",
31
+ "@fluentui/scripts": "*"
32
32
  },
33
33
  "dependencies": {
34
- "@fluentui/react-field": "9.0.0-alpha.12",
34
+ "@fluentui/react-field": "9.0.0-alpha.14",
35
35
  "@fluentui/react-icons": "^2.0.175",
36
- "@fluentui/react-label": "^9.0.14",
37
- "@fluentui/react-tabster": "^9.3.4",
36
+ "@fluentui/react-label": "^9.0.16",
37
+ "@fluentui/react-tabster": "^9.3.6",
38
38
  "@fluentui/react-theme": "^9.1.5",
39
- "@fluentui/react-utilities": "^9.3.0",
40
- "@griffel/react": "^1.4.2",
39
+ "@fluentui/react-utilities": "^9.4.0",
40
+ "@griffel/react": "^1.5.2",
41
41
  "tslib": "^2.1.0"
42
42
  },
43
43
  "peerDependencies": {