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/etc/react-checkbox.api.md

@@ -16,6 +16,12 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public
 export const Checkbox: ForwardRefComponent<CheckboxProps>;
 
+// @public (undocumented)
+export type CheckboxBaseProps = Omit<CheckboxProps, 'shape' | 'size'>;
+
+// @public (undocumented)
+export type CheckboxBaseState = Omit<CheckboxState, 'shape' | 'size'>;
+
 // @public (undocumented)
 export const checkboxClassNames: SlotClassNames<CheckboxSlots>;
 
@@ -53,6 +59,9 @@ export const renderCheckbox_unstable: (state: CheckboxState) => JSXElement;
 // @public
 export const useCheckbox_unstable: (props: CheckboxProps, ref: React_2.Ref<HTMLInputElement>) => CheckboxState;
 
+// @public
+export const useCheckboxBase_unstable: (props: CheckboxBaseProps, ref: React_2.Ref<HTMLInputElement>) => CheckboxBaseState;
+
 // @public
 export const useCheckboxStyles_unstable: (state: CheckboxState) => CheckboxState;
 

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

@@ -1,8 +1,16 @@
-export type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './components/Checkbox/index';
+export type {
+  CheckboxOnChangeData,
+  CheckboxProps,
+  CheckboxSlots,
+  CheckboxState,
+  CheckboxBaseProps,
+  CheckboxBaseState,
+} from './components/Checkbox/index';
 export {
   Checkbox,
   checkboxClassNames,
   renderCheckbox_unstable,
   useCheckboxStyles_unstable,
   useCheckbox_unstable,
+  useCheckboxBase_unstable,
 } from './components/Checkbox/index';

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

@@ -100,3 +100,7 @@ export interface CheckboxOnChangeData {
  */
 export type CheckboxState = ComponentState<CheckboxSlots> &
   Required<Pick<CheckboxProps, 'checked' | 'disabled' | 'labelPosition' | 'shape' | 'size'>>;
+
+export type CheckboxBaseProps = Omit<CheckboxProps, 'shape' | 'size'>;
+
+export type CheckboxBaseState = Omit<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,15 @@ 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);
 
-  let checkmarkIcon;
-  if (mixed) {
-    if (shape === 'circular') {
-      checkmarkIcon = <CircleFilled />;
-    } else {
-      checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;
-    }
-  } else if (checked) {
-    checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;
-  }
-
-  const state: CheckboxState = {
-    shape,
+  const state: CheckboxBaseState = {
     checked,
     disabled,
-    size,
     labelPosition,
     components: {
       root: 'span',
@@ -99,15 +127,14 @@ 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,
     }),
     indicator: slot.optional(props.indicator, {
       renderByDefault: true,
       defaultProps: {
         'aria-hidden': true,
-        children: checkmarkIcon,
       },
       elementType: 'div',
     }),

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

@@ -4,5 +4,13 @@ export {
   renderCheckbox_unstable,
   useCheckboxStyles_unstable,
   useCheckbox_unstable,
+  useCheckboxBase_unstable,
+} from './Checkbox';
+export type {
+  CheckboxOnChangeData,
+  CheckboxProps,
+  CheckboxSlots,
+  CheckboxState,
+  CheckboxBaseProps,
+  CheckboxBaseState,
 } from './Checkbox';
-export type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox';