@fluentui/react-checkbox 9.1.4 → 9.1.6

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 (63) hide show
  1. package/.swcrc +30 -0
  2. package/CHANGELOG.json +103 -1
  3. package/CHANGELOG.md +32 -2
  4. package/lib/Checkbox.js.map +1 -1
  5. package/lib/CheckboxField.js.map +1 -1
  6. package/lib/components/Checkbox/Checkbox.js.map +1 -1
  7. package/lib/components/Checkbox/Checkbox.types.js +1 -1
  8. package/lib/components/Checkbox/Checkbox.types.js.map +1 -1
  9. package/lib/components/Checkbox/index.js.map +1 -1
  10. package/lib/components/Checkbox/renderCheckbox.js +1 -11
  11. package/lib/components/Checkbox/renderCheckbox.js.map +1 -1
  12. package/lib/components/Checkbox/useCheckbox.js +1 -2
  13. package/lib/components/Checkbox/useCheckbox.js.map +1 -1
  14. package/lib/components/Checkbox/useCheckboxStyles.js.map +1 -1
  15. package/lib/components/CheckboxField/CheckboxField.js +1 -2
  16. package/lib/components/CheckboxField/CheckboxField.js.map +1 -1
  17. package/lib/components/CheckboxField/index.js.map +1 -1
  18. package/lib/index.js.map +1 -1
  19. package/lib-commonjs/Checkbox.js +5 -4
  20. package/lib-commonjs/Checkbox.js.map +1 -1
  21. package/lib-commonjs/CheckboxField.js +5 -4
  22. package/lib-commonjs/CheckboxField.js.map +1 -1
  23. package/lib-commonjs/components/Checkbox/Checkbox.js +19 -21
  24. package/lib-commonjs/components/Checkbox/Checkbox.js.map +1 -1
  25. package/lib-commonjs/components/Checkbox/Checkbox.types.js +5 -2
  26. package/lib-commonjs/components/Checkbox/Checkbox.types.js.map +1 -1
  27. package/lib-commonjs/components/Checkbox/index.js +9 -8
  28. package/lib-commonjs/components/Checkbox/index.js.map +1 -1
  29. package/lib-commonjs/components/Checkbox/renderCheckbox.js +13 -23
  30. package/lib-commonjs/components/Checkbox/renderCheckbox.js.map +1 -1
  31. package/lib-commonjs/components/Checkbox/useCheckbox.js +107 -113
  32. package/lib-commonjs/components/Checkbox/useCheckbox.js.map +1 -1
  33. package/lib-commonjs/components/Checkbox/useCheckboxStyles.js +344 -161
  34. package/lib-commonjs/components/Checkbox/useCheckboxStyles.js.map +1 -1
  35. package/lib-commonjs/components/CheckboxField/CheckboxField.js +27 -21
  36. package/lib-commonjs/components/CheckboxField/CheckboxField.js.map +1 -1
  37. package/lib-commonjs/components/CheckboxField/index.js +5 -4
  38. package/lib-commonjs/components/CheckboxField/index.js.map +1 -1
  39. package/lib-commonjs/index.js +21 -49
  40. package/lib-commonjs/index.js.map +1 -1
  41. package/package.json +12 -11
  42. package/lib-amd/Checkbox.js +0 -6
  43. package/lib-amd/Checkbox.js.map +0 -1
  44. package/lib-amd/CheckboxField.js +0 -6
  45. package/lib-amd/CheckboxField.js.map +0 -1
  46. package/lib-amd/components/Checkbox/Checkbox.js +0 -18
  47. package/lib-amd/components/Checkbox/Checkbox.js.map +0 -1
  48. package/lib-amd/components/Checkbox/Checkbox.types.js +0 -5
  49. package/lib-amd/components/Checkbox/Checkbox.types.js.map +0 -1
  50. package/lib-amd/components/Checkbox/index.js +0 -10
  51. package/lib-amd/components/Checkbox/index.js.map +0 -1
  52. package/lib-amd/components/Checkbox/renderCheckbox.js +0 -15
  53. package/lib-amd/components/Checkbox/renderCheckbox.js.map +0 -1
  54. package/lib-amd/components/Checkbox/useCheckbox.js +0 -97
  55. package/lib-amd/components/Checkbox/useCheckbox.js.map +0 -1
  56. package/lib-amd/components/Checkbox/useCheckboxStyles.js +0 -163
  57. package/lib-amd/components/Checkbox/useCheckboxStyles.js.map +0 -1
  58. package/lib-amd/components/CheckboxField/CheckboxField.js +0 -12
  59. package/lib-amd/components/CheckboxField/CheckboxField.js.map +0 -1
  60. package/lib-amd/components/CheckboxField/index.js +0 -6
  61. package/lib-amd/components/CheckboxField/index.js.map +0 -1
  62. package/lib-amd/index.js +0 -13
  63. package/lib-amd/index.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/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"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,gBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,sBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,sBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,mBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,yBAAAC,OAAA"}
1
+ {"version":3,"sources":["../../../lib/components/Checkbox/index.js"],"sourcesContent":["export * from './Checkbox';\nexport * from './Checkbox.types';\nexport * from './renderCheckbox';\nexport * from './useCheckbox';\nexport * from './useCheckboxStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
@@ -1,27 +1,17 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "renderCheckbox_unstable", {
6
+ enumerable: true,
7
+ get: ()=>renderCheckbox_unstable
5
8
  });
6
- exports.renderCheckbox_unstable = void 0;
7
- const React = /*#__PURE__*/require("react");
8
- const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
9
- const renderCheckbox_unstable = state => {
10
- const {
11
- slots,
12
- slotProps
13
- } = react_utilities_1.getSlots(state);
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
24
- }));
25
- };
26
- exports.renderCheckbox_unstable = renderCheckbox_unstable;
9
+ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
10
+ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
11
+ const _reactUtilities = require("@fluentui/react-utilities");
12
+ const renderCheckbox_unstable = (state)=>{
13
+ const { slots , slotProps } = (0, _reactUtilities.getSlots)(state);
14
+ return /*#__PURE__*/ _react.createElement(slots.root, slotProps.root, /*#__PURE__*/ _react.createElement(slots.input, slotProps.input), state.labelPosition === 'before' && slots.label && /*#__PURE__*/ _react.createElement(slots.label, slotProps.label), /*#__PURE__*/ _react.createElement(slots.indicator, slotProps.indicator), state.labelPosition === 'after' && slots.label && /*#__PURE__*/ _react.createElement(slots.label, slotProps.label));
15
+ }; //# sourceMappingURL=renderCheckbox.js.map
16
+
27
17
  //# sourceMappingURL=renderCheckbox.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","require","react_utilities_1","renderCheckbox_unstable","state","slots","slotProps","getSlots","createElement","root","input","labelPosition","label","indicator","exports"],"sources":["../src/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"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAGO,MAAME,uBAAuB,GAAIC,KAAoB,IAAI;EAC9D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,iBAAA,CAAAK,QAAQ,CAAgBH,KAAK,CAAC;EAE3D,OACEJ,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC5BT,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,EACnCN,KAAK,CAACO,aAAa,KAAK,QAAQ,IAAIN,KAAK,CAACO,KAAK,IAAIZ,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACO,KAAK;IAAA,GAAKN,SAAS,CAACM;EAAK,EAAI,EACxFZ,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACQ,SAAS;IAAA,GAAKP,SAAS,CAACO;EAAS,EAAI,EAC3CT,KAAK,CAACO,aAAa,KAAK,OAAO,IAAIN,KAAK,CAACO,KAAK,IAAIZ,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACO,KAAK;IAAA,GAAKN,SAAS,CAACM;EAAK,EAAI,CAC5E;AAEjB,CAAC;AAXYE,OAAA,CAAAX,uBAAuB,GAAAA,uBAAA"}
1
+ {"version":3,"sources":["../../../lib/components/Checkbox/renderCheckbox.js"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nexport const renderCheckbox_unstable = state => {\n const {\n slots,\n slotProps\n } = getSlots(state);\n return /*#__PURE__*/React.createElement(slots.root, slotProps.root, /*#__PURE__*/React.createElement(slots.input, slotProps.input), state.labelPosition === 'before' && slots.label && /*#__PURE__*/React.createElement(slots.label, slotProps.label), /*#__PURE__*/React.createElement(slots.indicator, slotProps.indicator), state.labelPosition === 'after' && slots.label && /*#__PURE__*/React.createElement(slots.label, slotProps.label));\n};\n//# sourceMappingURL=renderCheckbox.js.map"],"names":["renderCheckbox_unstable","state","slots","slotProps","getSlots","React","createElement","root","input","labelPosition","label","indicator"],"mappings":";;;;+BAEaA;;aAAAA;;;6DAFU;gCACE;AAClB,MAAMA,0BAA0BC,CAAAA,QAAS;IAC9C,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACH;IACb,OAAO,WAAW,GAAEI,OAAMC,aAAa,CAACJ,MAAMK,IAAI,EAAEJ,UAAUI,IAAI,EAAE,WAAW,GAAEF,OAAMC,aAAa,CAACJ,MAAMM,KAAK,EAAEL,UAAUK,KAAK,GAAGP,MAAMQ,aAAa,KAAK,YAAYP,MAAMQ,KAAK,IAAI,WAAW,GAAEL,OAAMC,aAAa,CAACJ,MAAMQ,KAAK,EAAEP,UAAUO,KAAK,GAAG,WAAW,GAAEL,OAAMC,aAAa,CAACJ,MAAMS,SAAS,EAAER,UAAUQ,SAAS,GAAGV,MAAMQ,aAAa,KAAK,WAAWP,MAAMQ,KAAK,IAAI,WAAW,GAAEL,OAAMC,aAAa,CAACJ,MAAMQ,KAAK,EAAEP,UAAUO,KAAK;AAChb,GACA,0CAA0C"}
@@ -1,120 +1,114 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "useCheckbox_unstable", {
6
+ enumerable: true,
7
+ get: ()=>useCheckbox_unstable
5
8
  });
6
- exports.useCheckbox_unstable = void 0;
7
- const React = /*#__PURE__*/require("react");
8
- const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
9
- const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
10
- const react_label_1 = /*#__PURE__*/require("@fluentui/react-label");
11
- const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
12
- /**
13
- * Create the state required to render Checkbox.
14
- *
15
- * The returned state can be modified with hooks such as useCheckboxStyles_unstable,
16
- * before being passed to renderCheckbox_unstable.
17
- *
18
- * @param props - props from this instance of Checkbox
19
- * @param ref - reference to `<input>` element of Checkbox
20
- */
21
- const useCheckbox_unstable = (props, ref) => {
22
- const {
23
- disabled = false,
24
- required,
25
- shape = 'square',
26
- size = 'medium',
27
- labelPosition = 'after',
28
- onChange
29
- } = props;
30
- const [checked, setChecked] = react_utilities_1.useControllableState({
31
- defaultState: props.defaultChecked,
32
- state: props.checked,
33
- initialState: false
34
- });
35
- const nativeProps = react_utilities_1.getPartitionedNativeProps({
36
- props,
37
- primarySlotTagName: 'input',
38
- excludedPropNames: ['checked', 'defaultChecked', 'size', 'onChange']
39
- });
40
- const mixed = checked === 'mixed';
41
- const id = react_utilities_1.useId('checkbox-', nativeProps.primary.id);
42
- let checkmarkIcon;
43
- if (mixed) {
44
- if (shape === 'circular') {
45
- checkmarkIcon = React.createElement(react_icons_1.CircleFilled, null);
46
- } else {
47
- checkmarkIcon = size === 'large' ? React.createElement(react_icons_1.Square16Filled, null) : React.createElement(react_icons_1.Square12Filled, null);
9
+ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
10
+ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
11
+ const _reactUtilities = require("@fluentui/react-utilities");
12
+ const _reactIcons = require("@fluentui/react-icons");
13
+ const _reactLabel = require("@fluentui/react-label");
14
+ const _reactTabster = require("@fluentui/react-tabster");
15
+ const useCheckbox_unstable = (props, ref)=>{
16
+ const { disabled =false , required , shape ='square' , size ='medium' , labelPosition ='after' , onChange } = props;
17
+ const [checked, setChecked] = (0, _reactUtilities.useControllableState)({
18
+ defaultState: props.defaultChecked,
19
+ state: props.checked,
20
+ initialState: false
21
+ });
22
+ const nativeProps = (0, _reactUtilities.getPartitionedNativeProps)({
23
+ props,
24
+ primarySlotTagName: 'input',
25
+ excludedPropNames: [
26
+ 'checked',
27
+ 'defaultChecked',
28
+ 'size',
29
+ 'onChange'
30
+ ]
31
+ });
32
+ const mixed = checked === 'mixed';
33
+ const id = (0, _reactUtilities.useId)('checkbox-', nativeProps.primary.id);
34
+ let checkmarkIcon;
35
+ if (mixed) {
36
+ if (shape === 'circular') {
37
+ checkmarkIcon = /*#__PURE__*/ _react.createElement(_reactIcons.CircleFilled, null);
38
+ } else {
39
+ checkmarkIcon = size === 'large' ? /*#__PURE__*/ _react.createElement(_reactIcons.Square16Filled, null) : /*#__PURE__*/ _react.createElement(_reactIcons.Square12Filled, null);
40
+ }
41
+ } else if (checked) {
42
+ checkmarkIcon = size === 'large' ? /*#__PURE__*/ _react.createElement(_reactIcons.Checkmark16Filled, null) : /*#__PURE__*/ _react.createElement(_reactIcons.Checkmark12Filled, null);
48
43
  }
49
- } else if (checked) {
50
- checkmarkIcon = size === 'large' ? React.createElement(react_icons_1.Checkmark16Filled, null) : React.createElement(react_icons_1.Checkmark12Filled, null);
51
- }
52
- const state = {
53
- shape,
54
- checked,
55
- disabled,
56
- size,
57
- labelPosition,
58
- components: {
59
- root: 'span',
60
- input: 'input',
61
- indicator: 'div',
62
- label: react_label_1.Label
63
- },
64
- root: react_utilities_1.resolveShorthand(props.root, {
65
- required: true,
66
- defaultProps: {
67
- ref: react_tabster_1.useFocusWithin(),
68
- ...nativeProps.root
69
- }
70
- }),
71
- input: react_utilities_1.resolveShorthand(props.input, {
72
- required: true,
73
- defaultProps: {
74
- type: 'checkbox',
75
- id,
76
- ref,
77
- checked: checked === true,
78
- ...nativeProps.primary
79
- }
80
- }),
81
- label: react_utilities_1.resolveShorthand(props.label, {
82
- required: false,
83
- defaultProps: {
84
- htmlFor: id,
44
+ const state = {
45
+ shape,
46
+ checked,
85
47
  disabled,
86
- required,
87
- size: 'medium' // Even if the checkbox itself is large
88
- }
89
- }),
90
-
91
- indicator: react_utilities_1.resolveShorthand(props.indicator, {
92
- required: true,
93
- defaultProps: {
94
- 'aria-hidden': true,
95
- children: checkmarkIcon
96
- }
97
- })
98
- };
99
- state.input.onChange = react_utilities_1.useEventCallback(ev => {
100
- const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;
101
- onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
102
- checked: val
48
+ size,
49
+ labelPosition,
50
+ components: {
51
+ root: 'span',
52
+ input: 'input',
53
+ indicator: 'div',
54
+ label: _reactLabel.Label
55
+ },
56
+ root: (0, _reactUtilities.resolveShorthand)(props.root, {
57
+ required: true,
58
+ defaultProps: {
59
+ ref: (0, _reactTabster.useFocusWithin)(),
60
+ ...nativeProps.root
61
+ }
62
+ }),
63
+ input: (0, _reactUtilities.resolveShorthand)(props.input, {
64
+ required: true,
65
+ defaultProps: {
66
+ type: 'checkbox',
67
+ id,
68
+ ref,
69
+ checked: checked === true,
70
+ ...nativeProps.primary
71
+ }
72
+ }),
73
+ label: (0, _reactUtilities.resolveShorthand)(props.label, {
74
+ required: false,
75
+ defaultProps: {
76
+ htmlFor: id,
77
+ disabled,
78
+ required,
79
+ size: 'medium'
80
+ }
81
+ }),
82
+ indicator: (0, _reactUtilities.resolveShorthand)(props.indicator, {
83
+ required: true,
84
+ defaultProps: {
85
+ 'aria-hidden': true,
86
+ children: checkmarkIcon
87
+ }
88
+ })
89
+ };
90
+ state.input.onChange = (0, _reactUtilities.useEventCallback)((ev)=>{
91
+ const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;
92
+ onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
93
+ checked: val
94
+ });
95
+ setChecked(val);
103
96
  });
104
- setChecked(val);
105
- });
106
- // Create a ref object for the input element so we can use it to set the indeterminate prop.
107
- // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)
108
- const inputRef = react_utilities_1.useMergedRefs(state.input.ref);
109
- state.input.ref = inputRef;
110
- // Set the <input> element's checked and indeterminate properties based on our tri-state property.
111
- // Since indeterminate can only be set via javascript, it has to be done in a layout effect.
112
- react_utilities_1.useIsomorphicLayoutEffect(() => {
113
- if (inputRef.current) {
114
- inputRef.current.indeterminate = mixed;
115
- }
116
- }, [inputRef, mixed]);
117
- return state;
118
- };
119
- exports.useCheckbox_unstable = useCheckbox_unstable;
97
+ // Create a ref object for the input element so we can use it to set the indeterminate prop.
98
+ // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)
99
+ const inputRef = (0, _reactUtilities.useMergedRefs)(state.input.ref);
100
+ state.input.ref = inputRef;
101
+ // Set the <input> element's checked and indeterminate properties based on our tri-state property.
102
+ // Since indeterminate can only be set via javascript, it has to be done in a layout effect.
103
+ (0, _reactUtilities.useIsomorphicLayoutEffect)(()=>{
104
+ if (inputRef.current) {
105
+ inputRef.current.indeterminate = mixed;
106
+ }
107
+ }, [
108
+ inputRef,
109
+ mixed
110
+ ]);
111
+ return state;
112
+ }; //# sourceMappingURL=useCheckbox.js.map
113
+
120
114
  //# sourceMappingURL=useCheckbox.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","require","react_utilities_1","react_icons_1","react_label_1","react_tabster_1","useCheckbox_unstable","props","ref","disabled","required","shape","size","labelPosition","onChange","checked","setChecked","useControllableState","defaultState","defaultChecked","state","initialState","nativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","mixed","id","useId","primary","checkmarkIcon","createElement","CircleFilled","Square16Filled","Square12Filled","Checkmark16Filled","Checkmark12Filled","components","root","input","indicator","label","Label","resolveShorthand","defaultProps","useFocusWithin","type","htmlFor","children","useEventCallback","ev","val","currentTarget","indeterminate","inputRef","useMergedRefs","useIsomorphicLayoutEffect","current","exports"],"sources":["../src/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 = false, 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 if (checked) {\n checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n }\n\n const state: CheckboxState = {\n shape,\n checked,\n disabled,\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"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../lib/components/Checkbox/useCheckbox.js"],"sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps, resolveShorthand, useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';\nimport { Checkmark12Filled, Checkmark16Filled, Square12Filled, Square16Filled, CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\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, ref) => {\n const {\n disabled = false,\n required,\n shape = 'square',\n size = 'medium',\n labelPosition = 'after',\n onChange\n } = props;\n const [checked, setChecked] = useControllableState({\n defaultState: props.defaultChecked,\n state: props.checked,\n initialState: false\n });\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'size', 'onChange']\n });\n const mixed = checked === 'mixed';\n const id = useId('checkbox-', nativeProps.primary.id);\n let checkmarkIcon;\n if (mixed) {\n if (shape === 'circular') {\n checkmarkIcon = /*#__PURE__*/React.createElement(CircleFilled, null);\n } else {\n checkmarkIcon = size === 'large' ? /*#__PURE__*/React.createElement(Square16Filled, null) : /*#__PURE__*/React.createElement(Square12Filled, null);\n }\n } else if (checked) {\n checkmarkIcon = size === 'large' ? /*#__PURE__*/React.createElement(Checkmark16Filled, null) : /*#__PURE__*/React.createElement(Checkmark12Filled, null);\n }\n const state = {\n shape,\n checked,\n disabled,\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(),\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'\n }\n }),\n indicator: resolveShorthand(props.indicator, {\n required: true,\n defaultProps: {\n 'aria-hidden': true,\n children: checkmarkIcon\n }\n })\n };\n state.input.onChange = useEventCallback(ev => {\n const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;\n onChange === null || onChange === void 0 ? void 0 : onChange(ev, {\n checked: val\n });\n setChecked(val);\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 // 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 return state;\n};\n//# sourceMappingURL=useCheckbox.js.map"],"names":["useCheckbox_unstable","props","ref","disabled","required","shape","size","labelPosition","onChange","checked","setChecked","useControllableState","defaultState","defaultChecked","state","initialState","nativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","mixed","id","useId","primary","checkmarkIcon","React","createElement","CircleFilled","Square16Filled","Square12Filled","Checkmark16Filled","Checkmark12Filled","components","root","input","indicator","label","Label","resolveShorthand","defaultProps","useFocusWithin","type","htmlFor","children","useEventCallback","ev","val","currentTarget","indeterminate","inputRef","useMergedRefs","useIsomorphicLayoutEffect","current"],"mappings":"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"}