feat(react-toolbar): add base hooks for Toolbar components

[dmytrokirpa]

Previous Behavior

New Behavior

Added use${Component}Base__unstable hook for every component that contains state for logic, slots (but not default implementations), but not design-related props as per #35623. Exports are commented out intentionally, as we'll uncomment them in experimental branch for experimental release.

Example how to compose a custom Toolbar component:

import * as React from 'react';
import { renderButton_unstable } from '@fluentui/react-button';
import { renderDivider_unstable } from '@fluentui/react-divider';
import type {
  ToolbarBaseProps,
  ToolbarButtonBaseProps,
  ToolbarButtonState,
  ToolbarDividerBaseProps,
  ToolbarDividerState,
  ToolbarState,
} from '@fluentui/react-toolbar';
import {
  renderToolbar_unstable,
  useToolbarBase_unstable,
  useToolbarButtonBase_unstable,
  useToolbarContext_unstable,
  useToolbarContextValues_unstable,
  useToolbarDividerBase_unstable,
} from '@fluentui/react-toolbar';

type ToolbarSize = 'small' | 'large';

type ToolbarProps = ToolbarBaseProps & {
  size?: ToolbarSize;
};

const Toolbar = React.forwardRef<HTMLDivElement, ToolbarProps>(({ size = 'small', ...props }, ref) => {
  const state = useToolbarBase_unstable(props, ref);
  const contextValues = useToolbarContextValues_unstable({ size, ...state });

  state.root.className = ['toolbar', state.root.className].filter(Boolean).join(' ');

  return renderToolbar_unstable(state as ToolbarState, contextValues);
});

const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonBaseProps>((props, ref) => {
  const state = useToolbarButtonBase_unstable(props, ref);

  const size = useToolbarContext_unstable(ctx => ctx.size as ToolbarSize);

  state.root.className = ['toolbar__button', `toolbar__button--${size}`, state.root.className]
    .filter(Boolean)
    .join(' ');

  return renderButton_unstable(state as ToolbarButtonState);
});

const ToolbarDivider = React.forwardRef<HTMLElement, ToolbarDividerBaseProps>((props, ref) => {
  const state = useToolbarDividerBase_unstable(props, ref);

  state.root.className = ['toolbar__divider', state.root.className].filter(Boolean).join(' ');

  return renderDivider_unstable(state as ToolbarDividerState);
});

const Example = (): React.ReactNode => (
  <Toolbar size="small" aria-label="Toolbar example with buttons and divider">
    <ToolbarButton aria-label="First" icon={1} />
    <ToolbarButton aria-label="Second" icon={1} />
    <ToolbarDivider />
    <ToolbarButton aria-label="Third" icon={1}>
      3
    </ToolbarButton>
  </Toolbar>
);

Note: There are no public API changes or modifications to the behavior of existing components, and all unit and VR tests are passing. The two existing hooks, useToolbarContextValues_unstable and useToolbarContext_unstable now exported for composing custom components.

Related Issue(s)

• Partially implements [Feature]: Headless core components in v9 #35562

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-components react-components: entire library	1.286 MB 322.184 kB	1.287 MB 322.322 kB	335 B 138 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	70.309 kB 20.074 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	237.447 kB 68.609 kB
react-components react-components: FluentProvider & webLightTheme	43.608 kB 14.165 kB
react-portal-compat PortalCompatProvider	8.386 kB 2.624 kB
react-timepicker-compat TimePicker	109.023 kB 36.011 kB

_{🤖 This report was generated against aa4c072a894b8d9e70c3e749ee7851e3c18ce63c}

[github-actions]

Pull request demo site: URL