feat(react-checkbox): add useCheckboxBase_unstable hook

change/@fluentui-react-checkbox-4668ccbf-ec09-4f24-88a1-8ea8646eb40a.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add base hooks for Checkbox",
+  "packageName": "@fluentui/react-checkbox",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-checkbox/library/src/components/Checkbox/Checkbox.types.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Label } from '@fluentui/react-label';
-import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';
 
 export type CheckboxSlots = {
   /**
@@ -100,3 +100,7 @@ export interface CheckboxOnChangeData {
  */
 export type CheckboxState = ComponentState<CheckboxSlots> &
   Required<Pick<CheckboxProps, 'checked' | 'disabled' | 'labelPosition' | 'shape' | 'size'>>;
+
+export type CheckboxBaseProps = DistributiveOmit<CheckboxProps, 'shape' | 'size'>;
+
+export type CheckboxBaseState = DistributiveOmit<CheckboxState, 'shape' | 'size'>;

packages/react-components/react-checkbox/library/src/components/Checkbox/index.ts

@@ -1,5 +1,12 @@
 export { Checkbox } from './Checkbox';
-export type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox.types';
+export type {
+  CheckboxBaseProps,
+  CheckboxBaseState,
+  CheckboxOnChangeData,
+  CheckboxProps,
+  CheckboxSlots,
+  CheckboxState,
+} from './Checkbox.types';
 export { renderCheckbox_unstable } from './renderCheckbox';
-export { useCheckbox_unstable } from './useCheckbox';
+export { useCheckbox_unstable, useCheckboxBase_unstable } from './useCheckbox';
 export { checkboxClassNames, useCheckboxStyles_unstable } from './useCheckboxStyles.styles';

packages/react-components/react-checkbox/library/src/components/Checkbox/useCheckbox.tsx

@@ -11,7 +11,7 @@ import {
   useMergedRefs,
   slot,
 } from '@fluentui/react-utilities';
-import { CheckboxProps, CheckboxState } from './Checkbox.types';
+import { CheckboxBaseProps, CheckboxBaseState, CheckboxProps, CheckboxState } from './Checkbox.types';
 import {
   Checkmark12Filled,
   Checkmark16Filled,
@@ -37,7 +37,48 @@ export const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLIn
   // Merge props from surrounding <Field>, if any
   props = useFieldControlProps_unstable(props, { 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 = <CircleFilled />;
+    } else {
+      checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;
+    }
+  } else if (state.checked) {
+    checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;
+  }
+
+  if (state.indicator) {
+    state.indicator.children = checkmarkIcon;
+  }
+
+  return {
+    ...state,
+    shape,
+    size,
+  };
+};
+
+/**
+ * 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: CheckboxBaseProps,
+  ref: React.Ref<HTMLInputElement>,
+): CheckboxBaseState => {
+  'use no memo';
+
+  const { disabled = false, required, labelPosition = 'after', onChange } = props;
 
   const [checked, setChecked] = useControllableState({
     defaultState: props.defaultChecked,
@@ -48,28 +89,23 @@ export const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLIn
   const nativeProps = getPartitionedNativeProps({
     props,
     primarySlotTagName: 'input',
-    excludedPropNames: ['checked', 'defaultChecked', 'size', 'onChange'],
+    excludedPropNames: ['checked', 'defaultChecked', 'onChange'],
   });
 
   const mixed = checked === 'mixed';
   const id = useId('checkbox-', nativeProps.primary.id);
 
+  // Use medium size as default for icon selection in base hook
   let checkmarkIcon;
   if (mixed) {
-    if (shape === 'circular') {
-      checkmarkIcon = <CircleFilled />;
-    } else {
-      checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;
-    }
+    checkmarkIcon = <Square12Filled />;
   } else if (checked) {
-    checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;
+    checkmarkIcon = <Checkmark12Filled />;
   }
 
-  const state: CheckboxState = {
-    shape,
+  const state: CheckboxBaseState = {
     checked,
     disabled,
-    size,
     labelPosition,
     components: {
       root: 'span',
@@ -99,7 +135,7 @@ export const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLIn
         htmlFor: id,
         disabled,
         required,
-        size: 'medium', // Even if the checkbox itself is large
+        size: 'medium',
       },
       elementType: Label,
     }),

packages/react-components/react-checkbox/library/src/index.ts

@@ -6,3 +6,7 @@ export {
   useCheckbox_unstable,
 } from './Checkbox';
 export type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox';
+
+// Experimental APIs - will be uncommented in the experimental release branch
+// export { useCheckboxBase_unstable } from './Checkbox';
+// export type { CheckboxBaseProps, CheckboxBaseState } from './Checkbox';