@fluentui/react-checkbox 9.5.16 → 9.6.0

package/CHANGELOG.md

@@ -1,17 +1,37 @@
 # Change Log - @fluentui/react-checkbox
 
-This log was last generated on Wed, 11 Mar 2026 09:20:38 GMT and should not be manually modified.
+This log was last generated on Wed, 01 Apr 2026 15:50:20 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.6.0)
+
+Wed, 01 Apr 2026 15:50:20 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.5.17..@fluentui/react-checkbox_v9.6.0)
+
+### Minor changes
+
+- feat: add base hooks for Checkbox ([PR #35826](https://github.com/microsoft/fluentui/pull/35826) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-field to v9.5.0 ([PR #35912](https://github.com/microsoft/fluentui/pull/35912) by beachball)
+- Bump @fluentui/react-label to v9.4.0 ([PR #35912](https://github.com/microsoft/fluentui/pull/35912) by beachball)
+
+## [9.5.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.5.17)
+
+Thu, 26 Mar 2026 08:12:49 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.5.16..@fluentui/react-checkbox_v9.5.17)
+
+### Patches
+
+- 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)
+
 ## [9.5.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.5.16)
 
-Wed, 11 Mar 2026 09:20:38 GMT 
+Wed, 11 Mar 2026 09:22:22 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.5.15..@fluentui/react-checkbox_v9.5.16)
 
 ### Patches
 
-- Bump @fluentui/react-field to v9.4.16 ([PR #35854](https://github.com/microsoft/fluentui/pull/35854) by beachball)
+- Bump @fluentui/react-field to v9.4.16 ([PR #35859](https://github.com/microsoft/fluentui/pull/35859) by beachball)
 
 ## [9.5.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.5.15)
 

package/dist/index.d.ts

@@ -13,6 +13,10 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
  */
 export declare const Checkbox: ForwardRefComponent<CheckboxProps>;
 
+export declare type CheckboxBaseProps = Omit<CheckboxProps, 'shape' | 'size'>;
+
+export declare type CheckboxBaseState = Omit<CheckboxState, 'shape' | 'size'>;
+
 export declare const checkboxClassNames: SlotClassNames<CheckboxSlots>;
 
 /**
@@ -97,7 +101,7 @@ export declare type CheckboxSlots = {
  */
 export declare type CheckboxState = ComponentState<CheckboxSlots> & Required<Pick<CheckboxProps, 'checked' | 'disabled' | 'labelPosition' | 'shape' | 'size'>>;
 
-export declare const renderCheckbox_unstable: (state: CheckboxState) => JSXElement;
+export declare const renderCheckbox_unstable: (state: CheckboxBaseState) => JSXElement;
 
 /**
  * Create the state required to render Checkbox.
@@ -110,6 +114,15 @@ export declare const renderCheckbox_unstable: (state: CheckboxState) => JSXEleme
  */
 export declare const useCheckbox_unstable: (props: CheckboxProps, ref: React_2.Ref<HTMLInputElement>) => CheckboxState;
 
+/**
+ * Base hook for Checkbox component, which manages state related to checked state, ARIA attributes,
+ * focus management, and slot structure without design props.
+ *
+ * @param props - props from this instance of Checkbox
+ * @param ref - reference to `<input>` element of Checkbox
+ */
+export declare const useCheckboxBase_unstable: (props: CheckboxBaseProps, ref: React_2.Ref<HTMLInputElement>) => CheckboxBaseState;
+
 /**
  * Apply styling to the Checkbox slots based on the state
  */

package/lib/Checkbox.js

@@ -1 +1 @@
-export { Checkbox, checkboxClassNames, renderCheckbox_unstable, useCheckboxStyles_unstable, useCheckbox_unstable } from './components/Checkbox/index';
+export { Checkbox, checkboxClassNames, renderCheckbox_unstable, useCheckboxStyles_unstable, useCheckbox_unstable, useCheckboxBase_unstable } from './components/Checkbox/index';

package/lib/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Checkbox.ts"],"sourcesContent":["export type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './components/Checkbox/index';\nexport {\n  Checkbox,\n  checkboxClassNames,\n  renderCheckbox_unstable,\n  useCheckboxStyles_unstable,\n  useCheckbox_unstable,\n} from './components/Checkbox/index';\n"],"names":["Checkbox","checkboxClassNames","renderCheckbox_unstable","useCheckboxStyles_unstable","useCheckbox_unstable"],"mappings":"AACA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,8BAA8B"}
+{"version":3,"sources":["../src/Checkbox.ts"],"sourcesContent":["export type {\n  CheckboxOnChangeData,\n  CheckboxProps,\n  CheckboxSlots,\n  CheckboxState,\n  CheckboxBaseProps,\n  CheckboxBaseState,\n} from './components/Checkbox/index';\nexport {\n  Checkbox,\n  checkboxClassNames,\n  renderCheckbox_unstable,\n  useCheckboxStyles_unstable,\n  useCheckbox_unstable,\n  useCheckboxBase_unstable,\n} from './components/Checkbox/index';\n"],"names":["Checkbox","checkboxClassNames","renderCheckbox_unstable","useCheckboxStyles_unstable","useCheckbox_unstable","useCheckboxBase_unstable"],"mappings":"AAQA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,EACpBC,wBAAwB,QACnB,8BAA8B"}

package/lib/components/Checkbox/Checkbox.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Checkbox/Checkbox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CheckboxSlots = {\n  /**\n   * The root element of the Checkbox.\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Checkbox>`.\n   * All other native props will be applied to the primary slot: `input`\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The Checkbox's label.\n   */\n  label?: Slot<typeof Label>;\n\n  /**\n   * Hidden input that handles the checkbox's functionality.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on `<Checkbox>` will be applied to this slot,\n   * except `className` and `style`, which remain on the root slot.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * The checkbox, with the checkmark icon as its child when checked.\n   */\n  // FIXME: this should be 'span' by default, because you cannot have a 'div' inside of a 'span'\n  // but changing the signature would be a breaking change\n  // TODO: change the default value to 'span' in the next major\n  indicator: Slot<'div', 'span'>;\n};\n\n/**\n * Checkbox Props\n */\nexport type CheckboxProps = Omit<\n  ComponentProps<Partial<CheckboxSlots>, 'input'>,\n  'checked' | 'defaultChecked' | 'onChange' | 'size'\n> & {\n  /**\n   * The controlled value for the checkbox.\n   *\n   * @default false\n   */\n  checked?: 'mixed' | boolean;\n\n  /**\n   * Checkboxes don't support children. To add a label, use the `label` prop.\n   */\n  children?: never;\n\n  /**\n   * Whether the checkbox should be rendered as checked by default.\n   */\n  defaultChecked?: 'mixed' | boolean;\n\n  /**\n   * The position of the label relative to the checkbox indicator.\n   *\n   * @default after\n   */\n  labelPosition?: 'before' | 'after';\n\n  /**\n   * Callback to be called when the checked state value changes.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;\n\n  /**\n   * The shape of the checkbox indicator.\n   *\n   * The `circular` variant is only recommended to be used in a tasks-style UI (checklist),\n   * since it otherwise could be confused for a `RadioItem`.\n   *\n   * @default square\n   */\n  shape?: 'square' | 'circular';\n\n  /**\n   * The size of the checkbox indicator.\n   *\n   * @default medium\n   */\n  size?: 'medium' | 'large';\n};\n\n/**\n * Data for the onChange event for checkbox.\n */\nexport interface CheckboxOnChangeData {\n  checked: 'mixed' | boolean;\n}\n\n/**\n * State used in rendering Checkbox\n */\nexport type CheckboxState = ComponentState<CheckboxSlots> &\n  Required<Pick<CheckboxProps, 'checked' | 'disabled' | 'labelPosition' | 'shape' | 'size'>>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/Checkbox/Checkbox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CheckboxSlots = {\n  /**\n   * The root element of the Checkbox.\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Checkbox>`.\n   * All other native props will be applied to the primary slot: `input`\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The Checkbox's label.\n   */\n  label?: Slot<typeof Label>;\n\n  /**\n   * Hidden input that handles the checkbox's functionality.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on `<Checkbox>` will be applied to this slot,\n   * except `className` and `style`, which remain on the root slot.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * The checkbox, with the checkmark icon as its child when checked.\n   */\n  // FIXME: this should be 'span' by default, because you cannot have a 'div' inside of a 'span'\n  // but changing the signature would be a breaking change\n  // TODO: change the default value to 'span' in the next major\n  indicator: Slot<'div', 'span'>;\n};\n\n/**\n * Checkbox Props\n */\nexport type CheckboxProps = Omit<\n  ComponentProps<Partial<CheckboxSlots>, 'input'>,\n  'checked' | 'defaultChecked' | 'onChange' | 'size'\n> & {\n  /**\n   * The controlled value for the checkbox.\n   *\n   * @default false\n   */\n  checked?: 'mixed' | boolean;\n\n  /**\n   * Checkboxes don't support children. To add a label, use the `label` prop.\n   */\n  children?: never;\n\n  /**\n   * Whether the checkbox should be rendered as checked by default.\n   */\n  defaultChecked?: 'mixed' | boolean;\n\n  /**\n   * The position of the label relative to the checkbox indicator.\n   *\n   * @default after\n   */\n  labelPosition?: 'before' | 'after';\n\n  /**\n   * Callback to be called when the checked state value changes.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;\n\n  /**\n   * The shape of the checkbox indicator.\n   *\n   * The `circular` variant is only recommended to be used in a tasks-style UI (checklist),\n   * since it otherwise could be confused for a `RadioItem`.\n   *\n   * @default square\n   */\n  shape?: 'square' | 'circular';\n\n  /**\n   * The size of the checkbox indicator.\n   *\n   * @default medium\n   */\n  size?: 'medium' | 'large';\n};\n\n/**\n * Data for the onChange event for checkbox.\n */\nexport interface CheckboxOnChangeData {\n  checked: 'mixed' | boolean;\n}\n\n/**\n * State used in rendering Checkbox\n */\nexport type CheckboxState = ComponentState<CheckboxSlots> &\n  Required<Pick<CheckboxProps, 'checked' | 'disabled' | 'labelPosition' | 'shape' | 'size'>>;\n\nexport type CheckboxBaseProps = Omit<CheckboxProps, 'shape' | 'size'>;\n\nexport type CheckboxBaseState = Omit<CheckboxState, 'shape' | 'size'>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/Checkbox/index.js

@@ -1,4 +1,4 @@
 export { Checkbox } from './Checkbox';
 export { renderCheckbox_unstable } from './renderCheckbox';
-export { useCheckbox_unstable } from './useCheckbox';
+export { useCheckbox_unstable, useCheckboxBase_unstable } from './useCheckbox';
 export { checkboxClassNames, useCheckboxStyles_unstable } from './useCheckboxStyles.styles';

package/lib/components/Checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Checkbox/index.ts"],"sourcesContent":["export { Checkbox } from './Checkbox';\nexport type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox.types';\nexport { renderCheckbox_unstable } from './renderCheckbox';\nexport { useCheckbox_unstable } from './useCheckbox';\nexport { checkboxClassNames, useCheckboxStyles_unstable } from './useCheckboxStyles.styles';\n"],"names":["Checkbox","renderCheckbox_unstable","useCheckbox_unstable","checkboxClassNames","useCheckboxStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAEtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}
+{"version":3,"sources":["../src/components/Checkbox/index.ts"],"sourcesContent":["export { Checkbox } from './Checkbox';\nexport type {\n  CheckboxBaseProps,\n  CheckboxBaseState,\n  CheckboxOnChangeData,\n  CheckboxProps,\n  CheckboxSlots,\n  CheckboxState,\n} from './Checkbox.types';\nexport { renderCheckbox_unstable } from './renderCheckbox';\nexport { useCheckbox_unstable, useCheckboxBase_unstable } from './useCheckbox';\nexport { checkboxClassNames, useCheckboxStyles_unstable } from './useCheckboxStyles.styles';\n"],"names":["Checkbox","renderCheckbox_unstable","useCheckbox_unstable","useCheckboxBase_unstable","checkboxClassNames","useCheckboxStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAStC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,EAAEC,wBAAwB,QAAQ,gBAAgB;AAC/E,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}

package/lib/components/Checkbox/renderCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Checkbox/renderCheckbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { CheckboxState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxState): JSXElement => {\n  assertSlots<CheckboxSlots>(state);\n\n  return (\n    <state.root>\n      <state.input />\n      {state.labelPosition === 'before' && state.label && <state.label />}\n      {state.indicator && <state.indicator />}\n      {state.labelPosition === 'after' && state.label && <state.label />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderCheckbox_unstable","state","root","input","labelPosition","label","indicator"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,KAAK;YACXF,MAAMG,aAAa,KAAK,YAAYH,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;YAC/DJ,MAAMK,SAAS,kBAAI,KAACL,MAAMK,SAAS;YACnCL,MAAMG,aAAa,KAAK,WAAWH,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;;;AAGrE,EAAE"}
+{"version":3,"sources":["../src/components/Checkbox/renderCheckbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { CheckboxBaseState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxBaseState): JSXElement => {\n  assertSlots<CheckboxSlots>(state);\n\n  return (\n    <state.root>\n      <state.input />\n      {state.labelPosition === 'before' && state.label && <state.label />}\n      {state.indicator && <state.indicator />}\n      {state.labelPosition === 'after' && state.label && <state.label />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderCheckbox_unstable","state","root","input","labelPosition","label","indicator"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,KAAK;YACXF,MAAMG,aAAa,KAAK,YAAYH,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;YAC/DJ,MAAMK,SAAS,kBAAI,KAACL,MAAMK,SAAS;YACnCL,MAAMG,aAAa,KAAK,WAAWH,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;;;AAGrE,EAAE"}

package/lib/components/Checkbox/useCheckbox.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useFieldControlProps_unstable } from '@fluentui/react-field';
-import { getPartitionedNativeProps, useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { getPartitionedNativeProps, useControllableState, mergeCallbacks, useId, useIsomorphicLayoutEffect, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { Checkmark12Filled, Checkmark16Filled, Square12Filled, Square16Filled, CircleFilled } from '@fluentui/react-icons';
 import { Label } from '@fluentui/react-label';
 import { useFocusWithin } from '@fluentui/react-tabster';
@@ -20,7 +20,52 @@ import { useFocusWithin } from '@fluentui/react-tabster';
         supportsLabelFor: true,
         supportsRequired: true
     });
-    const { disabled = false, required, shape = 'square', size = 'medium', labelPosition = 'after', onChange } = props;
+    const { shape = 'square', size = 'medium', ...checkboxProps } = props;
+    const state = useCheckboxBase_unstable(checkboxProps, ref);
+    // Override indicator children with size+shape-appropriate icon
+    const mixed = state.checked === 'mixed';
+    let checkmarkIcon;
+    if (mixed) {
+        if (shape === 'circular') {
+            checkmarkIcon = /*#__PURE__*/ React.createElement(CircleFilled, null);
+        } else {
+            checkmarkIcon = size === 'large' ? /*#__PURE__*/ React.createElement(Square16Filled, null) : /*#__PURE__*/ React.createElement(Square12Filled, null);
+        }
+    } else if (state.checked) {
+        checkmarkIcon = size === 'large' ? /*#__PURE__*/ React.createElement(Checkmark16Filled, null) : /*#__PURE__*/ React.createElement(Checkmark12Filled, null);
+    }
+    if (state.indicator) {
+        var _state_indicator;
+        var _children;
+        (_children = (_state_indicator = state.indicator).children) !== null && _children !== void 0 ? _children : _state_indicator.children = checkmarkIcon;
+    }
+    return {
+        shape,
+        size,
+        ...state,
+        components: {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            ...state.components,
+            label: Label
+        },
+        label: slot.optional(props.label, {
+            defaultProps: {
+                ...state.label,
+                size: 'medium'
+            },
+            elementType: Label
+        })
+    };
+};
+/**
+ * Base hook for Checkbox component, which manages state related to checked state, ARIA attributes,
+ * focus management, and slot structure without design props.
+ *
+ * @param props - props from this instance of Checkbox
+ * @param ref - reference to `<input>` element of Checkbox
+ */ export const useCheckboxBase_unstable = (props, ref)=>{
+    'use no memo';
+    const { disabled = false, required, labelPosition = 'after', onChange } = props;
     const [checked, setChecked] = useControllableState({
         defaultState: props.defaultChecked,
         state: props.checked,
@@ -32,33 +77,20 @@ import { useFocusWithin } from '@fluentui/react-tabster';
         excludedPropNames: [
             'checked',
             'defaultChecked',
-            'size',
             'onChange'
         ]
     });
     const mixed = checked === 'mixed';
     const id = useId('checkbox-', nativeProps.primary.id);
-    let checkmarkIcon;
-    if (mixed) {
-        if (shape === 'circular') {
-            checkmarkIcon = /*#__PURE__*/ React.createElement(CircleFilled, null);
-        } else {
-            checkmarkIcon = size === 'large' ? /*#__PURE__*/ React.createElement(Square16Filled, null) : /*#__PURE__*/ React.createElement(Square12Filled, null);
-        }
-    } else if (checked) {
-        checkmarkIcon = size === 'large' ? /*#__PURE__*/ React.createElement(Checkmark16Filled, null) : /*#__PURE__*/ React.createElement(Checkmark12Filled, null);
-    }
     const state = {
-        shape,
         checked,
         disabled,
-        size,
         labelPosition,
         components: {
             root: 'span',
             input: 'input',
             indicator: 'div',
-            label: Label
+            label: 'label'
         },
         root: slot.always(props.root, {
             defaultProps: {
@@ -81,21 +113,19 @@ import { useFocusWithin } from '@fluentui/react-tabster';
             defaultProps: {
                 htmlFor: id,
                 disabled,
-                required,
-                size: 'medium'
+                required
             },
-            elementType: Label
+            elementType: 'label'
         }),
         indicator: slot.optional(props.indicator, {
             renderByDefault: true,
             defaultProps: {
-                'aria-hidden': true,
-                children: checkmarkIcon
+                'aria-hidden': true
             },
             elementType: 'div'
         })
     };
-    state.input.onChange = useEventCallback((ev)=>{
+    state.input.onChange = mergeCallbacks(state.input.onChange, (ev)=>{
         const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;
         onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
             checked: val

package/lib/components/Checkbox/useCheckbox.js.map

@@ -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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"}
+{"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 { CheckboxBaseProps, CheckboxBaseState, 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 { shape = 'square', size = 'medium', ...checkboxProps } = props;\n\n  const state = useCheckboxBase_unstable(checkboxProps, ref);\n\n  // Override indicator children with size+shape-appropriate icon\n  const mixed = state.checked === 'mixed';\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 (state.checked) {\n    checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n  }\n\n  if (state.indicator) {\n    state.indicator.children ??= checkmarkIcon;\n  }\n\n  return {\n    shape,\n    size,\n    ...state,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      label: Label,\n    },\n    label: slot.optional(props.label, {\n      defaultProps: {\n        ...state.label,\n        size: 'medium',\n      },\n      elementType: Label,\n    }),\n  };\n};\n\n/**\n * Base hook for Checkbox component, which manages state related to checked state, ARIA attributes,\n * focus management, and slot structure without design props.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckboxBase_unstable = (\n  props: CheckboxBaseProps,\n  ref: React.Ref<HTMLInputElement>,\n): CheckboxBaseState => {\n  'use no memo';\n\n  const { disabled = false, required, 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', 'onChange'],\n  });\n\n  const mixed = checked === 'mixed';\n  const id = useId('checkbox-', nativeProps.primary.id);\n\n  const state: CheckboxBaseState = {\n    checked,\n    disabled,\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      },\n      elementType: 'label',\n    }),\n    indicator: slot.optional(props.indicator, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': true,\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","shape","size","checkboxProps","state","useCheckboxBase_unstable","mixed","checked","checkmarkIcon","indicator","children","components","label","optional","defaultProps","elementType","disabled","required","labelPosition","onChange","setChecked","defaultState","defaultChecked","initialState","nativeProps","primarySlotTagName","excludedPropNames","id","primary","root","input","always","type","htmlFor","renderByDefault","ev","val","currentTarget","indeterminate","inputRef","current"],"mappings":"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"}

package/lib/index.js

@@ -1 +1 @@
-export { Checkbox, checkboxClassNames, renderCheckbox_unstable, useCheckboxStyles_unstable, useCheckbox_unstable } from './Checkbox';
+export { Checkbox, checkboxClassNames, renderCheckbox_unstable, useCheckboxStyles_unstable, useCheckbox_unstable, useCheckboxBase_unstable } from './Checkbox';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../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"],"names":["Checkbox","checkboxClassNames","renderCheckbox_unstable","useCheckboxStyles_unstable","useCheckbox_unstable"],"mappings":"AAAA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Checkbox,\n  checkboxClassNames,\n  renderCheckbox_unstable,\n  useCheckboxStyles_unstable,\n  useCheckbox_unstable,\n  useCheckboxBase_unstable,\n} from './Checkbox';\nexport type {\n  CheckboxOnChangeData,\n  CheckboxProps,\n  CheckboxSlots,\n  CheckboxState,\n  CheckboxBaseProps,\n  CheckboxBaseState,\n} from './Checkbox';\n"],"names":["Checkbox","checkboxClassNames","renderCheckbox_unstable","useCheckboxStyles_unstable","useCheckbox_unstable","useCheckboxBase_unstable"],"mappings":"AAAA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,EACpBC,wBAAwB,QACnB,aAAa"}

package/lib-commonjs/Checkbox.js

@@ -18,6 +18,9 @@ _export(exports, {
     renderCheckbox_unstable: function() {
         return _index.renderCheckbox_unstable;
     },
+    useCheckboxBase_unstable: function() {
+        return _index.useCheckboxBase_unstable;
+    },
     useCheckboxStyles_unstable: function() {
         return _index.useCheckboxStyles_unstable;
     },

package/lib-commonjs/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Checkbox.ts"],"sourcesContent":["export type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './components/Checkbox/index';\nexport {\n  Checkbox,\n  checkboxClassNames,\n  renderCheckbox_unstable,\n  useCheckboxStyles_unstable,\n  useCheckbox_unstable,\n} from './components/Checkbox/index';\n"],"names":["Checkbox","checkboxClassNames","renderCheckbox_unstable","useCheckboxStyles_unstable","useCheckbox_unstable"],"mappings":";;;;;;;;;;;;eAEEA,eAAQ;;;eACRC,yBAAkB;;;eAClBC,8BAAuB;;;eACvBC,iCAA0B;;;eAC1BC,2BAAoB;;;uBACf,8BAA8B"}
+{"version":3,"sources":["../src/Checkbox.ts"],"sourcesContent":["export type {\n  CheckboxOnChangeData,\n  CheckboxProps,\n  CheckboxSlots,\n  CheckboxState,\n  CheckboxBaseProps,\n  CheckboxBaseState,\n} from './components/Checkbox/index';\nexport {\n  Checkbox,\n  checkboxClassNames,\n  renderCheckbox_unstable,\n  useCheckboxStyles_unstable,\n  useCheckbox_unstable,\n  useCheckboxBase_unstable,\n} from './components/Checkbox/index';\n"],"names":["Checkbox","checkboxClassNames","renderCheckbox_unstable","useCheckboxStyles_unstable","useCheckbox_unstable","useCheckboxBase_unstable"],"mappings":";;;;;;;;;;;;eASEA,eAAQ;;;eACRC,yBAAkB;;;eAClBC,8BAAuB;;;eAGvBG,+BAAwB;;;eAFxBF,iCAA0B;;;eAC1BC,2BAAoB;;;uBAEf,8BAA8B"}

package/lib-commonjs/components/Checkbox/Checkbox.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Checkbox/Checkbox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CheckboxSlots = {\n  /**\n   * The root element of the Checkbox.\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Checkbox>`.\n   * All other native props will be applied to the primary slot: `input`\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The Checkbox's label.\n   */\n  label?: Slot<typeof Label>;\n\n  /**\n   * Hidden input that handles the checkbox's functionality.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on `<Checkbox>` will be applied to this slot,\n   * except `className` and `style`, which remain on the root slot.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * The checkbox, with the checkmark icon as its child when checked.\n   */\n  // FIXME: this should be 'span' by default, because you cannot have a 'div' inside of a 'span'\n  // but changing the signature would be a breaking change\n  // TODO: change the default value to 'span' in the next major\n  indicator: Slot<'div', 'span'>;\n};\n\n/**\n * Checkbox Props\n */\nexport type CheckboxProps = Omit<\n  ComponentProps<Partial<CheckboxSlots>, 'input'>,\n  'checked' | 'defaultChecked' | 'onChange' | 'size'\n> & {\n  /**\n   * The controlled value for the checkbox.\n   *\n   * @default false\n   */\n  checked?: 'mixed' | boolean;\n\n  /**\n   * Checkboxes don't support children. To add a label, use the `label` prop.\n   */\n  children?: never;\n\n  /**\n   * Whether the checkbox should be rendered as checked by default.\n   */\n  defaultChecked?: 'mixed' | boolean;\n\n  /**\n   * The position of the label relative to the checkbox indicator.\n   *\n   * @default after\n   */\n  labelPosition?: 'before' | 'after';\n\n  /**\n   * Callback to be called when the checked state value changes.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;\n\n  /**\n   * The shape of the checkbox indicator.\n   *\n   * The `circular` variant is only recommended to be used in a tasks-style UI (checklist),\n   * since it otherwise could be confused for a `RadioItem`.\n   *\n   * @default square\n   */\n  shape?: 'square' | 'circular';\n\n  /**\n   * The size of the checkbox indicator.\n   *\n   * @default medium\n   */\n  size?: 'medium' | 'large';\n};\n\n/**\n * Data for the onChange event for checkbox.\n */\nexport interface CheckboxOnChangeData {\n  checked: 'mixed' | boolean;\n}\n\n/**\n * State used in rendering Checkbox\n */\nexport type CheckboxState = ComponentState<CheckboxSlots> &\n  Required<Pick<CheckboxProps, 'checked' | 'disabled' | 'labelPosition' | 'shape' | 'size'>>;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
+{"version":3,"sources":["../src/components/Checkbox/Checkbox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CheckboxSlots = {\n  /**\n   * The root element of the Checkbox.\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Checkbox>`.\n   * All other native props will be applied to the primary slot: `input`\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The Checkbox's label.\n   */\n  label?: Slot<typeof Label>;\n\n  /**\n   * Hidden input that handles the checkbox's functionality.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on `<Checkbox>` will be applied to this slot,\n   * except `className` and `style`, which remain on the root slot.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * The checkbox, with the checkmark icon as its child when checked.\n   */\n  // FIXME: this should be 'span' by default, because you cannot have a 'div' inside of a 'span'\n  // but changing the signature would be a breaking change\n  // TODO: change the default value to 'span' in the next major\n  indicator: Slot<'div', 'span'>;\n};\n\n/**\n * Checkbox Props\n */\nexport type CheckboxProps = Omit<\n  ComponentProps<Partial<CheckboxSlots>, 'input'>,\n  'checked' | 'defaultChecked' | 'onChange' | 'size'\n> & {\n  /**\n   * The controlled value for the checkbox.\n   *\n   * @default false\n   */\n  checked?: 'mixed' | boolean;\n\n  /**\n   * Checkboxes don't support children. To add a label, use the `label` prop.\n   */\n  children?: never;\n\n  /**\n   * Whether the checkbox should be rendered as checked by default.\n   */\n  defaultChecked?: 'mixed' | boolean;\n\n  /**\n   * The position of the label relative to the checkbox indicator.\n   *\n   * @default after\n   */\n  labelPosition?: 'before' | 'after';\n\n  /**\n   * Callback to be called when the checked state value changes.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;\n\n  /**\n   * The shape of the checkbox indicator.\n   *\n   * The `circular` variant is only recommended to be used in a tasks-style UI (checklist),\n   * since it otherwise could be confused for a `RadioItem`.\n   *\n   * @default square\n   */\n  shape?: 'square' | 'circular';\n\n  /**\n   * The size of the checkbox indicator.\n   *\n   * @default medium\n   */\n  size?: 'medium' | 'large';\n};\n\n/**\n * Data for the onChange event for checkbox.\n */\nexport interface CheckboxOnChangeData {\n  checked: 'mixed' | boolean;\n}\n\n/**\n * State used in rendering Checkbox\n */\nexport type CheckboxState = ComponentState<CheckboxSlots> &\n  Required<Pick<CheckboxProps, 'checked' | 'disabled' | 'labelPosition' | 'shape' | 'size'>>;\n\nexport type CheckboxBaseProps = Omit<CheckboxProps, 'shape' | 'size'>;\n\nexport type CheckboxBaseState = Omit<CheckboxState, 'shape' | 'size'>;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

package/lib-commonjs/components/Checkbox/index.js

@@ -18,6 +18,9 @@ _export(exports, {
     renderCheckbox_unstable: function() {
         return _renderCheckbox.renderCheckbox_unstable;
     },
+    useCheckboxBase_unstable: function() {
+        return _useCheckbox.useCheckboxBase_unstable;
+    },
     useCheckboxStyles_unstable: function() {
         return _useCheckboxStylesstyles.useCheckboxStyles_unstable;
     },

package/lib-commonjs/components/Checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Checkbox/index.ts"],"sourcesContent":["export { Checkbox } from './Checkbox';\nexport type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox.types';\nexport { renderCheckbox_unstable } from './renderCheckbox';\nexport { useCheckbox_unstable } from './useCheckbox';\nexport { checkboxClassNames, useCheckboxStyles_unstable } from './useCheckboxStyles.styles';\n"],"names":["Checkbox","renderCheckbox_unstable","useCheckbox_unstable","checkboxClassNames","useCheckboxStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAIRG,2CAAkB;;;eAFlBF,uCAAuB;;;eAEHG,mDAA0B;;;eAD9CF,iCAAoB;;;0BAHJ,aAAa;gCAEE,mBAAmB;6BACtB,gBAAgB;yCACU,6BAA6B"}
+{"version":3,"sources":["../src/components/Checkbox/index.ts"],"sourcesContent":["export { Checkbox } from './Checkbox';\nexport type {\n  CheckboxBaseProps,\n  CheckboxBaseState,\n  CheckboxOnChangeData,\n  CheckboxProps,\n  CheckboxSlots,\n  CheckboxState,\n} from './Checkbox.types';\nexport { renderCheckbox_unstable } from './renderCheckbox';\nexport { useCheckbox_unstable, useCheckboxBase_unstable } from './useCheckbox';\nexport { checkboxClassNames, useCheckboxStyles_unstable } from './useCheckboxStyles.styles';\n"],"names":["Checkbox","renderCheckbox_unstable","useCheckbox_unstable","useCheckboxBase_unstable","checkboxClassNames","useCheckboxStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAWRI,2CAAkB;;;eAFlBH,uCAAuB;;;eACDE,qCAAwB;;;eAC1BE,mDAA0B;;;eAD9CH,iCAAoB;;;0BAVJ,aAAa;gCASE,mBAAmB;6BACI,gBAAgB;yCAChB,6BAA6B"}

package/lib-commonjs/components/Checkbox/renderCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Checkbox/renderCheckbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { CheckboxState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxState): JSXElement => {\n  assertSlots<CheckboxSlots>(state);\n\n  return (\n    <state.root>\n      <state.input />\n      {state.labelPosition === 'before' && state.label && <state.label />}\n      {state.indicator && <state.indicator />}\n      {state.labelPosition === 'after' && state.label && <state.label />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderCheckbox_unstable","state","root","input","labelPosition","label","indicator"],"mappings":";;;;+BAOaC;;;;;;4BANb,iCAAiD;gCAErB,4BAA4B;AAIjD,gCAAgC,CAACC;QACtCF,2BAAAA,EAA2BE;IAE3B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,KAAK,EAAA,CAAA;YACXF,MAAMG,aAAa,KAAK,YAAYH,MAAMI,KAAK,IAAA,WAAA,GAAI,mBAAA,EAACJ,MAAMI,KAAK,EAAA,CAAA;YAC/DJ,MAAMK,SAAS,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,SAAS,EAAA,CAAA;YACnCL,MAAMG,aAAa,KAAK,WAAWH,MAAMI,KAAK,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,KAAK,EAAA,CAAA;;;AAGrE,EAAE"}
+{"version":3,"sources":["../src/components/Checkbox/renderCheckbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { CheckboxBaseState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxBaseState): JSXElement => {\n  assertSlots<CheckboxSlots>(state);\n\n  return (\n    <state.root>\n      <state.input />\n      {state.labelPosition === 'before' && state.label && <state.label />}\n      {state.indicator && <state.indicator />}\n      {state.labelPosition === 'after' && state.label && <state.label />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderCheckbox_unstable","state","root","input","labelPosition","label","indicator"],"mappings":";;;;+BAOaC;;;;;;4BANb,iCAAiD;gCAErB,4BAA4B;AAIjD,gCAAgC,CAACC;QACtCF,2BAAAA,EAA2BE;IAE3B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,KAAK,EAAA,CAAA;YACXF,MAAMG,aAAa,KAAK,YAAYH,MAAMI,KAAK,IAAA,WAAA,GAAI,mBAAA,EAACJ,MAAMI,KAAK,EAAA,CAAA;YAC/DJ,MAAMK,SAAS,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,SAAS,EAAA,CAAA;YACnCL,MAAMG,aAAa,KAAK,WAAWH,MAAMI,KAAK,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,KAAK,EAAA,CAAA;;;AAGrE,EAAE"}

package/lib-commonjs/components/Checkbox/useCheckbox.js

@@ -3,9 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useCheckbox_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useCheckboxBase_unstable: function() {
+        return useCheckboxBase_unstable;
+    },
+    useCheckbox_unstable: function() {
         return useCheckbox_unstable;
     }
 });
@@ -23,7 +31,46 @@ const useCheckbox_unstable = (props, ref)=>{
         supportsLabelFor: true,
         supportsRequired: true
     });
-    const { disabled = false, required, shape = 'square', size = 'medium', labelPosition = 'after', onChange } = props;
+    const { shape = 'square', size = 'medium', ...checkboxProps } = props;
+    const state = useCheckboxBase_unstable(checkboxProps, ref);
+    // Override indicator children with size+shape-appropriate icon
+    const mixed = state.checked === 'mixed';
+    let checkmarkIcon;
+    if (mixed) {
+        if (shape === 'circular') {
+            checkmarkIcon = /*#__PURE__*/ _react.createElement(_reacticons.CircleFilled, null);
+        } else {
+            checkmarkIcon = size === 'large' ? /*#__PURE__*/ _react.createElement(_reacticons.Square16Filled, null) : /*#__PURE__*/ _react.createElement(_reacticons.Square12Filled, null);
+        }
+    } else if (state.checked) {
+        checkmarkIcon = size === 'large' ? /*#__PURE__*/ _react.createElement(_reacticons.Checkmark16Filled, null) : /*#__PURE__*/ _react.createElement(_reacticons.Checkmark12Filled, null);
+    }
+    if (state.indicator) {
+        var _state_indicator;
+        var _children;
+        (_children = (_state_indicator = state.indicator).children) !== null && _children !== void 0 ? _children : _state_indicator.children = checkmarkIcon;
+    }
+    return {
+        shape,
+        size,
+        ...state,
+        components: {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            ...state.components,
+            label: _reactlabel.Label
+        },
+        label: _reactutilities.slot.optional(props.label, {
+            defaultProps: {
+                ...state.label,
+                size: 'medium'
+            },
+            elementType: _reactlabel.Label
+        })
+    };
+};
+const useCheckboxBase_unstable = (props, ref)=>{
+    'use no memo';
+    const { disabled = false, required, labelPosition = 'after', onChange } = props;
     const [checked, setChecked] = (0, _reactutilities.useControllableState)({
         defaultState: props.defaultChecked,
         state: props.checked,
@@ -35,33 +82,20 @@ const useCheckbox_unstable = (props, ref)=>{
         excludedPropNames: [
             'checked',
             'defaultChecked',
-            'size',
             'onChange'
         ]
     });
     const mixed = checked === 'mixed';
     const id = (0, _reactutilities.useId)('checkbox-', nativeProps.primary.id);
-    let checkmarkIcon;
-    if (mixed) {
-        if (shape === 'circular') {
-            checkmarkIcon = /*#__PURE__*/ _react.createElement(_reacticons.CircleFilled, null);
-        } else {
-            checkmarkIcon = size === 'large' ? /*#__PURE__*/ _react.createElement(_reacticons.Square16Filled, null) : /*#__PURE__*/ _react.createElement(_reacticons.Square12Filled, null);
-        }
-    } else if (checked) {
-        checkmarkIcon = size === 'large' ? /*#__PURE__*/ _react.createElement(_reacticons.Checkmark16Filled, null) : /*#__PURE__*/ _react.createElement(_reacticons.Checkmark12Filled, null);
-    }
     const state = {
-        shape,
         checked,
         disabled,
-        size,
         labelPosition,
         components: {
             root: 'span',
             input: 'input',
             indicator: 'div',
-            label: _reactlabel.Label
+            label: 'label'
         },
         root: _reactutilities.slot.always(props.root, {
             defaultProps: {
@@ -84,21 +118,19 @@ const useCheckbox_unstable = (props, ref)=>{
             defaultProps: {
                 htmlFor: id,
                 disabled,
-                required,
-                size: 'medium'
+                required
             },
-            elementType: _reactlabel.Label
+            elementType: 'label'
         }),
         indicator: _reactutilities.slot.optional(props.indicator, {
             renderByDefault: true,
             defaultProps: {
-                'aria-hidden': true,
-                children: checkmarkIcon
+                'aria-hidden': true
             },
             elementType: 'div'
         })
     };
-    state.input.onChange = (0, _reactutilities.useEventCallback)((ev)=>{
+    state.input.onChange = (0, _reactutilities.mergeCallbacks)(state.input.onChange, (ev)=>{
         const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;
         onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
             checked: val

package/lib-commonjs/components/Checkbox/useCheckbox.js.map

@@ -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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"}
+{"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 { CheckboxBaseProps, CheckboxBaseState, 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 { shape = 'square', size = 'medium', ...checkboxProps } = props;\n\n  const state = useCheckboxBase_unstable(checkboxProps, ref);\n\n  // Override indicator children with size+shape-appropriate icon\n  const mixed = state.checked === 'mixed';\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 (state.checked) {\n    checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n  }\n\n  if (state.indicator) {\n    state.indicator.children ??= checkmarkIcon;\n  }\n\n  return {\n    shape,\n    size,\n    ...state,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      label: Label,\n    },\n    label: slot.optional(props.label, {\n      defaultProps: {\n        ...state.label,\n        size: 'medium',\n      },\n      elementType: Label,\n    }),\n  };\n};\n\n/**\n * Base hook for Checkbox component, which manages state related to checked state, ARIA attributes,\n * focus management, and slot structure without design props.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckboxBase_unstable = (\n  props: CheckboxBaseProps,\n  ref: React.Ref<HTMLInputElement>,\n): CheckboxBaseState => {\n  'use no memo';\n\n  const { disabled = false, required, 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', 'onChange'],\n  });\n\n  const mixed = checked === 'mixed';\n  const id = useId('checkbox-', nativeProps.primary.id);\n\n  const state: CheckboxBaseState = {\n    checked,\n    disabled,\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      },\n      elementType: 'label',\n    }),\n    indicator: slot.optional(props.indicator, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': true,\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","shape","size","checkboxProps","state","useCheckboxBase_unstable","mixed","checked","checkmarkIcon","indicator","children","components","label","optional","defaultProps","elementType","disabled","required","labelPosition","onChange","setChecked","defaultState","defaultChecked","initialState","nativeProps","primarySlotTagName","excludedPropNames","id","primary","root","input","always","type","htmlFor","renderByDefault","ev","val","currentTarget","indeterminate","inputRef","current"],"mappings":"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"}

package/lib-commonjs/index.js

@@ -18,6 +18,9 @@ _export(exports, {
     renderCheckbox_unstable: function() {
         return _Checkbox.renderCheckbox_unstable;
     },
+    useCheckboxBase_unstable: function() {
+        return _Checkbox.useCheckboxBase_unstable;
+    },
     useCheckboxStyles_unstable: function() {
         return _Checkbox.useCheckboxStyles_unstable;
     },

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../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"],"names":["Checkbox","checkboxClassNames","renderCheckbox_unstable","useCheckboxStyles_unstable","useCheckbox_unstable"],"mappings":";;;;;;;;;;;;eACEA,kBAAQ;;;eACRC,4BAAkB;;;eAClBC,iCAAuB;;;eACvBC,oCAA0B;;;eAC1BC,8BAAoB;;;0BACf,aAAa"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Checkbox,\n  checkboxClassNames,\n  renderCheckbox_unstable,\n  useCheckboxStyles_unstable,\n  useCheckbox_unstable,\n  useCheckboxBase_unstable,\n} from './Checkbox';\nexport type {\n  CheckboxOnChangeData,\n  CheckboxProps,\n  CheckboxSlots,\n  CheckboxState,\n  CheckboxBaseProps,\n  CheckboxBaseState,\n} from './Checkbox';\n"],"names":["Checkbox","checkboxClassNames","renderCheckbox_unstable","useCheckboxStyles_unstable","useCheckbox_unstable","useCheckboxBase_unstable"],"mappings":";;;;;;;;;;;;eACEA,kBAAQ;;;eACRC,4BAAkB;;;eAClBC,iCAAuB;;;eAGvBG,kCAAwB;;;eAFxBF,oCAA0B;;;eAC1BC,8BAAoB;;;0BAEf,aAAa"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-checkbox",
-  "version": "9.5.16",
+  "version": "9.6.0",
   "description": "Fluent UI checkbox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,10 +12,10 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-field": "^9.4.16",
+    "@fluentui/react-field": "^9.5.0",
     "@fluentui/react-icons": "^2.0.245",
     "@fluentui/react-jsx-runtime": "^9.4.1",
-    "@fluentui/react-label": "^9.3.15",
+    "@fluentui/react-label": "^9.4.0",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-tabster": "^9.26.13",
     "@fluentui/react-theme": "^9.2.1",