@fluentui/react-checkbox 9.1.7 → 9.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +32 -5
- package/CHANGELOG.md +17 -6
- package/lib/components/Checkbox/useCheckbox.js +6 -0
- package/lib/components/Checkbox/useCheckbox.js.map +1 -1
- package/lib-commonjs/components/Checkbox/useCheckbox.js +6 -0
- package/lib-commonjs/components/Checkbox/useCheckbox.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,34 @@
|
|
|
2
2
|
"name": "@fluentui/react-checkbox",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Thu, 06 Apr 2023 23:59:45 GMT",
|
|
6
|
+
"tag": "@fluentui/react-checkbox_v9.1.8",
|
|
7
|
+
"version": "9.1.8",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "behowell@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-checkbox",
|
|
13
|
+
"commit": "5a8d7a29645b3b500eb7145d2e42ac34fcafc4c6",
|
|
14
|
+
"comment": "chore: Hook up FieldContext for use inside a Field"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "behowell@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-checkbox",
|
|
19
|
+
"commit": "eee5716e76dc6a5bef9316546a352694bbe5750a",
|
|
20
|
+
"comment": "chore: Update package version of react-field"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-checkbox",
|
|
25
|
+
"comment": "Bump @fluentui/react-field to v9.0.0-beta.1",
|
|
26
|
+
"commit": "7a46cab3d31a233b89b7188e994b24712af5393c"
|
|
27
|
+
}
|
|
28
|
+
]
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"date": "Tue, 04 Apr 2023 18:44:47 GMT",
|
|
6
33
|
"tag": "@fluentui/react-checkbox_v9.1.7",
|
|
7
34
|
"version": "9.1.7",
|
|
8
35
|
"comments": {
|
|
@@ -17,25 +44,25 @@
|
|
|
17
44
|
"author": "beachball",
|
|
18
45
|
"package": "@fluentui/react-checkbox",
|
|
19
46
|
"comment": "Bump @fluentui/react-field to v9.0.0-alpha.29",
|
|
20
|
-
"commit": "
|
|
47
|
+
"commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
|
|
21
48
|
},
|
|
22
49
|
{
|
|
23
50
|
"author": "beachball",
|
|
24
51
|
"package": "@fluentui/react-checkbox",
|
|
25
52
|
"comment": "Bump @fluentui/react-label to v9.1.7",
|
|
26
|
-
"commit": "
|
|
53
|
+
"commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
|
|
27
54
|
},
|
|
28
55
|
{
|
|
29
56
|
"author": "beachball",
|
|
30
57
|
"package": "@fluentui/react-checkbox",
|
|
31
58
|
"comment": "Bump @fluentui/react-tabster to v9.6.3",
|
|
32
|
-
"commit": "
|
|
59
|
+
"commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
|
|
33
60
|
},
|
|
34
61
|
{
|
|
35
62
|
"author": "beachball",
|
|
36
63
|
"package": "@fluentui/react-checkbox",
|
|
37
64
|
"comment": "Bump @fluentui/react-utilities to v9.7.3",
|
|
38
|
-
"commit": "
|
|
65
|
+
"commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
|
|
39
66
|
}
|
|
40
67
|
]
|
|
41
68
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,21 +1,32 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-checkbox
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 06 Apr 2023 23:59:45 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.1.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.1.8)
|
|
8
|
+
|
|
9
|
+
Thu, 06 Apr 2023 23:59:45 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.1.7..@fluentui/react-checkbox_v9.1.8)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: Hook up FieldContext for use inside a Field ([PR #27399](https://github.com/microsoft/fluentui/pull/27399) by behowell@microsoft.com)
|
|
15
|
+
- chore: Update package version of react-field ([PR #27458](https://github.com/microsoft/fluentui/pull/27458) by behowell@microsoft.com)
|
|
16
|
+
- Bump @fluentui/react-field to v9.0.0-beta.1 ([PR #27420](https://github.com/microsoft/fluentui/pull/27420) by beachball)
|
|
17
|
+
|
|
7
18
|
## [9.1.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.1.7)
|
|
8
19
|
|
|
9
|
-
Tue, 04 Apr 2023 18:
|
|
20
|
+
Tue, 04 Apr 2023 18:44:47 GMT
|
|
10
21
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.1.5..@fluentui/react-checkbox_v9.1.7)
|
|
11
22
|
|
|
12
23
|
### Patches
|
|
13
24
|
|
|
14
25
|
- fix: Fix vertical alignment of inline Checkbox when checked vs. unchecked ([PR #27324](https://github.com/microsoft/fluentui/pull/27324) by behowell@microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-field to v9.0.0-alpha.29 ([PR #
|
|
16
|
-
- Bump @fluentui/react-label to v9.1.7 ([PR #
|
|
17
|
-
- Bump @fluentui/react-tabster to v9.6.3 ([PR #
|
|
18
|
-
- Bump @fluentui/react-utilities to v9.7.3 ([PR #
|
|
26
|
+
- Bump @fluentui/react-field to v9.0.0-alpha.29 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
|
|
27
|
+
- Bump @fluentui/react-label to v9.1.7 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
|
|
28
|
+
- Bump @fluentui/react-tabster to v9.6.3 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
|
|
29
|
+
- Bump @fluentui/react-utilities to v9.7.3 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
|
|
19
30
|
|
|
20
31
|
## [9.1.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.1.5)
|
|
21
32
|
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { useFieldControlProps_unstable } from '@fluentui/react-field';
|
|
2
3
|
import { getPartitionedNativeProps, resolveShorthand, useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
|
|
3
4
|
import { Checkmark12Filled, Checkmark16Filled, Square12Filled, Square16Filled, CircleFilled } from '@fluentui/react-icons';
|
|
4
5
|
import { Label } from '@fluentui/react-label';
|
|
@@ -13,6 +14,11 @@ import { useFocusWithin } from '@fluentui/react-tabster';
|
|
|
13
14
|
* @param ref - reference to `<input>` element of Checkbox
|
|
14
15
|
*/
|
|
15
16
|
export const useCheckbox_unstable = (props, ref) => {
|
|
17
|
+
// Merge props from surrounding <Field>, if any
|
|
18
|
+
props = useFieldControlProps_unstable(props, {
|
|
19
|
+
supportsLabelFor: true,
|
|
20
|
+
supportsRequired: true
|
|
21
|
+
});
|
|
16
22
|
const {
|
|
17
23
|
disabled = false,
|
|
18
24
|
required,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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","createElement","components","root","input","indicator","label","defaultProps","type","htmlFor","children","ev","val","currentTarget","indeterminate","inputRef","current"],"sources":["../../../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":"AAAA,YAAYA,KAAA,MAAW;AACvB,SACEC,yBAAyB,EACzBC,gBAAgB,EAChBC,oBAAoB,EACpBC,gBAAgB,EAChBC,KAAK,EACLC,yBAAyB,EACzBC,aAAa,QACR;AAEP,SACEC,iBAAiB,EACjBC,iBAAiB,EACjBC,cAAc,EACdC,cAAc,EACdC,YAAY,QACP;AACP,SAASC,KAAK,QAAQ;AACtB,SAASC,cAAc,QAAQ;AAE/B;;;;;;;;;AASA,OAAO,MAAMC,oBAAA,GAAuBA,CAACC,KAAA,EAAsBC,GAAA,KAAoD;EAC7G,MAAM;IAAEC,QAAA,GAAW,KAAK;IAAEC,QAAA;IAAUC,KAAA,GAAQ;IAAUC,IAAA,GAAO;IAAUC,aAAA,GAAgB;IAASC;EAAQ,CAAE,
|
|
1
|
+
{"version":3,"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","resolveShorthand","useControllableState","useEventCallback","useId","useIsomorphicLayoutEffect","useMergedRefs","Checkmark12Filled","Checkmark16Filled","Square12Filled","Square16Filled","CircleFilled","Label","useFocusWithin","useCheckbox_unstable","props","ref","supportsLabelFor","supportsRequired","disabled","required","shape","size","labelPosition","onChange","checked","setChecked","defaultState","defaultChecked","state","initialState","nativeProps","primarySlotTagName","excludedPropNames","mixed","id","primary","checkmarkIcon","createElement","components","root","input","indicator","label","defaultProps","type","htmlFor","children","ev","val","currentTarget","indeterminate","inputRef","current"],"sources":["../../../src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\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 // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\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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"}
|
|
@@ -8,11 +8,17 @@ Object.defineProperty(exports, "useCheckbox_unstable", {
|
|
|
8
8
|
});
|
|
9
9
|
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
|
10
10
|
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
11
|
+
const _reactField = require("@fluentui/react-field");
|
|
11
12
|
const _reactUtilities = require("@fluentui/react-utilities");
|
|
12
13
|
const _reactIcons = require("@fluentui/react-icons");
|
|
13
14
|
const _reactLabel = require("@fluentui/react-label");
|
|
14
15
|
const _reactTabster = require("@fluentui/react-tabster");
|
|
15
16
|
const useCheckbox_unstable = (props, ref)=>{
|
|
17
|
+
// Merge props from surrounding <Field>, if any
|
|
18
|
+
props = (0, _reactField.useFieldControlProps_unstable)(props, {
|
|
19
|
+
supportsLabelFor: true,
|
|
20
|
+
supportsRequired: true
|
|
21
|
+
});
|
|
16
22
|
const { disabled =false , required , shape ='square' , size ='medium' , labelPosition ='after' , onChange } = props;
|
|
17
23
|
const [checked, setChecked] = (0, _reactUtilities.useControllableState)({
|
|
18
24
|
defaultState: props.defaultChecked,
|
|
@@ -1 +1 @@
|
|
|
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":";;;;+
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Checkbox/useCheckbox.js"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\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 // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, {\n supportsLabelFor: true,\n supportsRequired: true\n });\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","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","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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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-checkbox",
|
|
3
|
-
"version": "9.1.
|
|
3
|
+
"version": "9.1.8",
|
|
4
4
|
"description": "Fluent UI checkbox component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"@fluentui/scripts-tasks": "*"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-field": "9.0.0-
|
|
35
|
+
"@fluentui/react-field": "9.0.0-beta.1",
|
|
36
36
|
"@fluentui/react-icons": "^2.0.196",
|
|
37
37
|
"@fluentui/react-label": "^9.1.7",
|
|
38
38
|
"@fluentui/react-shared-contexts": "^9.3.3",
|