feat(react-utilities): add composeComponent helper to simplify the component composition

[dmytrokirpa]

Summary

Adds a composeComponent helper to @fluentui/react-utilities that encapsulates the standard Fluent UI v9 component wiring pattern (useState → useContextValues → useStyles → render) into a single, strongly-typed factory call.

Previous Behavior

Every Fluent UI v9 component had to manually write a React.forwardRef wrapper that:

1. Called a useState hook to derive internal state from props and the forwarded ref.
2. Optionally called a useContextValues hook to derive context values from state.
3. Optionally called a useStyles hook to apply CSS-in-JS class names by mutating state.
4. Called a render function with state (and context values) to produce JSX.

This boilerplate was repeated across every component with no enforced structure or shared abstraction:

const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
  const state = useBadge_unstable(props, ref);
  useBadgeStyles_unstable(state);
  return renderBadge_unstable(state);
});
Badge.displayName = 'Badge';

New Behavior

composeComponent captures the four-step lifecycle as named options and produces a correctly typed ForwardRefComponent:

const Badge = composeComponent({
  displayName: 'Badge',
  useState: useBadge_unstable,
  useStyles: useBadgeStyles_unstable,
  render: renderBadge_unstable,
});

Key properties:

• Enforced call order — useState → useContextValues → useStyles → render is guaranteed by the implementation; consumers cannot reorder hooks by mistake.
• Styled / unstyled split — because useStyles is optional, an unstyled variant can share the same useState and render without any extra wiring:

  const BadgeUnstyled = composeComponent({
    displayName: 'BadgeUnstyled',
    useState: useBadgeBase_unstable, // no variant-specific props
    render: renderBadge_unstable,    // same render function
  });

• Full generic type support — explicit Element, Props, State, and ContextValues type parameters are supported for consumers that need precise ref types or context shapes.
• displayName always set — the returned component has displayName assigned, so DevTools and error messages are always readable.

Files changed

File	Change
packages/react-components/react-utilities/src/compose/composeComponent.tsx	New composeComponent function and ComposeComponentOptions type
packages/react-components/react-utilities/src/compose/index.ts	Export composeComponent and ComposeComponentOptions
packages/react-components/react-utilities/src/compose/composeComponent.test.tsx	Unit tests (hook pipeline, ref forwarding, useStyles, useContextValues, generic types) + integration tests for styled/unstyled variant pattern

Related Issue(s)

• Fixes #

[github-actions]

📊 Bundle size report

✅ No changes found

[github-actions]

Pull request demo site: URL