@fluentui/react-checkbox 9.5.15 → 9.5.17

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.md CHANGED
@@ -1,12 +1,30 @@
1
1
  # Change Log - @fluentui/react-checkbox
2
2
 
3
- This log was last generated on Wed, 25 Feb 2026 13:28:23 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 26 Mar 2026 08:10:39 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.5.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.5.17)
8
+
9
+ Thu, 26 Mar 2026 08:10:39 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.5.16..@fluentui/react-checkbox_v9.5.17)
11
+
12
+ ### Patches
13
+
14
+ - fix: preserve slot onChange handler using mergeCallbacks instead of direct assignment ([PR #35877](https://github.com/microsoft/fluentui/pull/35877) by karesansui.u@gmail.com)
15
+
16
+ ## [9.5.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.5.16)
17
+
18
+ Wed, 11 Mar 2026 09:22:22 GMT
19
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.5.15..@fluentui/react-checkbox_v9.5.16)
20
+
21
+ ### Patches
22
+
23
+ - Bump @fluentui/react-field to v9.4.16 ([PR #35859](https://github.com/microsoft/fluentui/pull/35859) by beachball)
24
+
7
25
  ## [9.5.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.5.15)
8
26
 
9
- Wed, 25 Feb 2026 13:28:23 GMT
27
+ Wed, 25 Feb 2026 13:32:28 GMT
10
28
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.5.14..@fluentui/react-checkbox_v9.5.15)
11
29
 
12
30
  ### Patches
@@ -1,7 +1,7 @@
1
1
  'use client';
2
2
  import * as React from 'react';
3
3
  import { useFieldControlProps_unstable } from '@fluentui/react-field';
4
- import { getPartitionedNativeProps, useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect, useMergedRefs, slot } from '@fluentui/react-utilities';
4
+ import { getPartitionedNativeProps, useControllableState, mergeCallbacks, useId, useIsomorphicLayoutEffect, useMergedRefs, slot } from '@fluentui/react-utilities';
5
5
  import { Checkmark12Filled, Checkmark16Filled, Square12Filled, Square16Filled, CircleFilled } from '@fluentui/react-icons';
6
6
  import { Label } from '@fluentui/react-label';
7
7
  import { useFocusWithin } from '@fluentui/react-tabster';
@@ -95,7 +95,7 @@ import { useFocusWithin } from '@fluentui/react-tabster';
95
95
  elementType: 'div'
96
96
  })
97
97
  };
98
- state.input.onChange = useEventCallback((ev)=>{
98
+ state.input.onChange = mergeCallbacks(state.input.onChange, (ev)=>{
99
99
  const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;
100
100
  onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
101
101
  checked: val
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n getPartitionedNativeProps,\n useControllableState,\n useEventCallback,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n slot,\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 'use no memo';\n\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: slot.always(props.root, {\n defaultProps: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\n elementType: 'span',\n }),\n input: slot.always(props.input, {\n defaultProps: {\n type: 'checkbox',\n id,\n ref,\n checked: checked === true,\n ...nativeProps.primary,\n },\n elementType: 'input',\n }),\n label: slot.optional(props.label, {\n defaultProps: {\n htmlFor: id,\n disabled,\n required,\n size: 'medium', // Even if the checkbox itself is large\n },\n elementType: Label,\n }),\n indicator: slot.optional(props.indicator, {\n renderByDefault: true,\n defaultProps: {\n 'aria-hidden': true,\n children: checkmarkIcon,\n },\n elementType: 'div',\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"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","useId","useIsomorphicLayoutEffect","useMergedRefs","slot","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","components","root","input","indicator","label","always","defaultProps","elementType","type","optional","htmlFor","renderByDefault","children","ev","val","currentTarget","indeterminate","inputRef","current"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n getPartitionedNativeProps,\n useControllableState,\n mergeCallbacks,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n slot,\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 'use no memo';\n\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: slot.always(props.root, {\n defaultProps: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\n elementType: 'span',\n }),\n input: slot.always(props.input, {\n defaultProps: {\n type: 'checkbox',\n id,\n ref,\n checked: checked === true,\n ...nativeProps.primary,\n },\n elementType: 'input',\n }),\n label: slot.optional(props.label, {\n defaultProps: {\n htmlFor: id,\n disabled,\n required,\n size: 'medium', // Even if the checkbox itself is large\n },\n elementType: Label,\n }),\n indicator: slot.optional(props.indicator, {\n renderByDefault: true,\n defaultProps: {\n 'aria-hidden': true,\n children: checkmarkIcon,\n },\n elementType: 'div',\n }),\n };\n\n state.input.onChange = mergeCallbacks(state.input.onChange, 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"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","mergeCallbacks","useId","useIsomorphicLayoutEffect","useMergedRefs","slot","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","components","root","input","indicator","label","always","defaultProps","elementType","type","optional","htmlFor","renderByDefault","children","ev","val","currentTarget","indeterminate","inputRef","current"],"mappings":"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"}
@@ -98,7 +98,7 @@ const useCheckbox_unstable = (props, ref)=>{
98
98
  elementType: 'div'
99
99
  })
100
100
  };
101
- state.input.onChange = (0, _reactutilities.useEventCallback)((ev)=>{
101
+ state.input.onChange = (0, _reactutilities.mergeCallbacks)(state.input.onChange, (ev)=>{
102
102
  const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;
103
103
  onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
104
104
  checked: val
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n getPartitionedNativeProps,\n useControllableState,\n useEventCallback,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n slot,\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 'use no memo';\n\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: slot.always(props.root, {\n defaultProps: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\n elementType: 'span',\n }),\n input: slot.always(props.input, {\n defaultProps: {\n type: 'checkbox',\n id,\n ref,\n checked: checked === true,\n ...nativeProps.primary,\n },\n elementType: 'input',\n }),\n label: slot.optional(props.label, {\n defaultProps: {\n htmlFor: id,\n disabled,\n required,\n size: 'medium', // Even if the checkbox itself is large\n },\n elementType: Label,\n }),\n indicator: slot.optional(props.indicator, {\n renderByDefault: true,\n defaultProps: {\n 'aria-hidden': true,\n children: checkmarkIcon,\n },\n elementType: 'div',\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"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","useId","useIsomorphicLayoutEffect","useMergedRefs","slot","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","components","root","input","indicator","label","always","defaultProps","elementType","type","optional","htmlFor","renderByDefault","children","ev","val","currentTarget","indeterminate","inputRef","current"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n getPartitionedNativeProps,\n useControllableState,\n mergeCallbacks,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n slot,\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 'use no memo';\n\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: slot.always(props.root, {\n defaultProps: {\n ref: useFocusWithin<HTMLSpanElement>(),\n ...nativeProps.root,\n },\n elementType: 'span',\n }),\n input: slot.always(props.input, {\n defaultProps: {\n type: 'checkbox',\n id,\n ref,\n checked: checked === true,\n ...nativeProps.primary,\n },\n elementType: 'input',\n }),\n label: slot.optional(props.label, {\n defaultProps: {\n htmlFor: id,\n disabled,\n required,\n size: 'medium', // Even if the checkbox itself is large\n },\n elementType: Label,\n }),\n indicator: slot.optional(props.indicator, {\n renderByDefault: true,\n defaultProps: {\n 'aria-hidden': true,\n children: checkmarkIcon,\n },\n elementType: 'div',\n }),\n };\n\n state.input.onChange = mergeCallbacks(state.input.onChange, 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"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","mergeCallbacks","useId","useIsomorphicLayoutEffect","useMergedRefs","slot","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","components","root","input","indicator","label","always","defaultProps","elementType","type","optional","htmlFor","renderByDefault","children","ev","val","currentTarget","indeterminate","inputRef","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.5.15",
3
+ "version": "9.5.17",
4
4
  "description": "Fluent UI checkbox component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -12,7 +12,7 @@
12
12
  },
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
- "@fluentui/react-field": "^9.4.15",
15
+ "@fluentui/react-field": "^9.4.16",
16
16
  "@fluentui/react-icons": "^2.0.245",
17
17
  "@fluentui/react-jsx-runtime": "^9.4.1",
18
18
  "@fluentui/react-label": "^9.3.15",