feat(react-headless-components-preview): add Provider component (microsoft#36000)

Author: dmytrokirpa

packages/react-components/react-headless-components-preview/library/etc/react-headless-components-preview.api.md

@@ -44,6 +44,7 @@ import type { CheckboxBaseProps } from '@fluentui/react-checkbox';
 import { CheckboxBaseState } from '@fluentui/react-checkbox';
 import type { CheckboxSlots as CheckboxSlots_2 } from '@fluentui/react-checkbox';
 import { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
 import { ContextSelector } from '@fluentui/react-context-selector';
 import type { DividerBaseProps } from '@fluentui/react-divider';
 import { DividerBaseState } from '@fluentui/react-divider';
@@ -52,6 +53,8 @@ import type { FieldBaseProps } from '@fluentui/react-field';
 import { FieldBaseState } from '@fluentui/react-field';
 import { FieldContextValues } from '@fluentui/react-field';
 import type { FieldSlots as FieldSlots_2 } from '@fluentui/react-field';
+import type { FluentProviderContextValues } from '@fluentui/react-provider';
+import { FluentProviderProps } from '@fluentui/react-provider';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { InputBaseProps } from '@fluentui/react-input';
 import { InputBaseState } from '@fluentui/react-input';
@@ -116,6 +119,7 @@ import type { SkeletonSlots as SkeletonSlots_2 } from '@fluentui/react-skeleton'
 import type { SliderBaseProps } from '@fluentui/react-slider';
 import { SliderBaseState } from '@fluentui/react-slider';
 import type { SliderSlots as SliderSlots_2 } from '@fluentui/react-slider';
+import type { Slot } from '@fluentui/react-utilities';
 import type { SpinButtonBaseProps } from '@fluentui/react-spinbutton';
 import { SpinButtonBaseState } from '@fluentui/react-spinbutton';
 import type { SpinButtonSlots as SpinButtonSlots_2 } from '@fluentui/react-spinbutton';
@@ -139,6 +143,7 @@ import type { TextareaSlots as TextareaSlots_2 } from '@fluentui/react-textarea'
 import type { ToggleButtonBaseProps } from '@fluentui/react-button';
 import type { ToggleButtonBaseState } from '@fluentui/react-button';
 import { useMessageBarBodyContextValues_unstable } from '@fluentui/react-message-bar';
+import { useFluent_unstable as useProviderContext } from '@fluentui/react-shared-contexts';
 
 // @public
 export const Accordion: ForwardRefComponent<AccordionProps>;
@@ -469,6 +474,15 @@ export type ProgressBarSlots = ProgressBarSlots_2;
 // @public
 export type ProgressBarState = ProgressBarBaseState;
 
+// @public
+export const Provider: React_2.ForwardRefExoticComponent<Omit<ProviderSlots, "root"> & React_2.FragmentProps & Pick<FluentProviderProps, "dir" | "targetDocument"> & React_2.RefAttributes<HTMLDivElement>>;
+
+// @public
+export type ProviderProps = ComponentProps<ProviderSlots> & Pick<FluentProviderProps, 'dir' | 'targetDocument'>;
+
+// @public
+export type ProviderState = ComponentState<ProviderSlots> & Pick<FluentProviderProps, 'dir' | 'targetDocument'>;
+
 // @public
 export const Radio: React_2.ForwardRefExoticComponent<Omit<ComponentProps<Partial<RadioSlots_2>, "input">, "onChange" | "size"> & {
     value?: string;
@@ -611,6 +625,9 @@ export const renderMessageBarTitle: (state: MessageBarTitleState_2) => JSXElemen
 // @public
 export const renderProgressBar: (state: ProgressBarState) => JSXElement;
 
+// @public
+export const renderProvider: (state: ProviderState, contextValues: FluentProviderContextValues) => JSXElement;
+
 // @public
 export const renderRadio: (state: RadioBaseState) => JSXElement;
 
@@ -942,6 +959,11 @@ export const useMessageBarTitle: (props: MessageBarTitleProps, ref: React_2.Ref<
 // @public
 export const useProgressBar: (props: ProgressBarProps, ref: React_2.Ref<HTMLDivElement>) => ProgressBarState;
 
+// @public (undocumented)
+export const useProvider: (props: ProviderProps, ref: React_2.Ref<HTMLDivElement>) => ProviderState;
+
+export { useProviderContext }
+
 // @public
 export const useRadio: (props: RadioProps, ref: React_2.Ref<HTMLInputElement>) => RadioState;
 

packages/react-components/react-headless-components-preview/library/package.json

@@ -35,6 +35,7 @@
     "@fluentui/react-message-bar": "^9.6.23",
     "@fluentui/react-persona": "^9.7.1",
     "@fluentui/react-progress": "^9.4.17",
+    "@fluentui/react-provider": "^9.22.15",
     "@fluentui/react-radio": "^9.6.0",
     "@fluentui/react-rating": "^9.4.0",
     "@fluentui/react-search": "^9.4.0",

packages/react-components/react-headless-components-preview/library/src/Provider.ts

@@ -0,0 +1,2 @@
+export { Provider, renderProvider, useProvider, useProviderContext } from './components/Provider/index';
+export type { ProviderProps, ProviderState } from './components/Provider/index';

packages/react-components/react-headless-components-preview/library/src/components/Provider/Provider.test.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { isConformant } from '../../testing/isConformant';
+import { Provider } from './Provider';
+import { useProviderContext } from './useProviderContext';
+
+describe('Provider', () => {
+  isConformant({
+    Component: Provider,
+    displayName: 'Provider',
+    disabledTests: ['component-handles-classname', 'component-has-root-ref', 'component-handles-ref'],
+  });
+
+  const TestComponent = ({ children }: { children?: React.ReactNode }) => {
+    const context = useProviderContext();
+
+    return <div dir={context.dir}>{children}</div>;
+  };
+
+  it('renders a default state', () => {
+    const result = render(
+      <Provider>
+        <TestComponent>Content</TestComponent>
+      </Provider>,
+    );
+    expect(result.container).toHaveTextContent('Content');
+    expect(result.container.firstChild).toHaveAttribute('dir', 'ltr');
+  });
+
+  it('renders with custom props', () => {
+    const result = render(
+      <Provider dir="rtl">
+        <TestComponent>Content</TestComponent>
+      </Provider>,
+    );
+    expect(result.container).toHaveTextContent('Content');
+    expect(result.container.firstChild).toHaveAttribute('dir', 'rtl');
+  });
+});

packages/react-components/react-headless-components-preview/library/src/components/Provider/Provider.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import * as React from 'react';
+
+import { renderProvider } from './renderProvider';
+import { useProvider } from './useProvider';
+import type { ProviderProps } from './Provider.types';
+import { useProviderContextValues } from './useProviderContextValues';
+
+/**
+ * Renders required context providers for Fluent Headless Components.
+ */
+export const Provider = React.forwardRef<HTMLDivElement, ProviderProps>((props, ref) => {
+  const state = useProvider(props, ref);
+  const contextValues = useProviderContextValues(state);
+
+  return renderProvider(state, contextValues);
+});
+
+Provider.displayName = 'Provider';

packages/react-components/react-headless-components-preview/library/src/components/Provider/Provider.types.ts

@@ -0,0 +1,19 @@
+import type * as React from 'react';
+import type { FluentProviderContextValues, FluentProviderProps } from '@fluentui/react-provider';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+
+export type ProviderSlots = {
+  root: Slot<React.FragmentProps>;
+};
+
+/**
+ * Provider Props
+ */
+export type ProviderProps = ComponentProps<ProviderSlots> & Pick<FluentProviderProps, 'dir' | 'targetDocument'>;
+
+/**
+ * State used in rendering Provider
+ */
+export type ProviderState = ComponentState<ProviderSlots> & Pick<FluentProviderProps, 'dir' | 'targetDocument'>;
+
+export type ProviderContextValues = FluentProviderContextValues;

packages/react-components/react-headless-components-preview/library/src/components/Provider/index.ts

@@ -0,0 +1,5 @@
+export { Provider } from './Provider';
+export type { ProviderProps, ProviderState } from './Provider.types';
+export { renderProvider } from './renderProvider';
+export { useProvider } from './useProvider';
+export { useProviderContext } from './useProviderContext';

packages/react-components/react-headless-components-preview/library/src/components/Provider/renderProvider.tsx

@@ -0,0 +1,26 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource @fluentui/react-jsx-runtime */
+
+import { assertSlots } from '@fluentui/react-utilities';
+import type { JSXElement } from '@fluentui/react-utilities';
+import {
+  Provider_unstable as Provider,
+  TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,
+} from '@fluentui/react-shared-contexts';
+import type { FluentProviderContextValues, FluentProviderSlots } from '@fluentui/react-provider';
+import type { ProviderState } from './Provider.types';
+
+/**
+ * Render the final JSX of Provider
+ */
+export const renderProvider = (state: ProviderState, contextValues: FluentProviderContextValues): JSXElement => {
+  assertSlots<FluentProviderSlots>(state);
+
+  return (
+    <Provider value={contextValues.provider}>
+      <TooltipVisibilityProvider value={contextValues.tooltip}>
+        <state.root />
+      </TooltipVisibilityProvider>
+    </Provider>
+  );
+};

packages/react-components/react-headless-components-preview/library/src/components/Provider/useProvider.ts

@@ -0,0 +1,19 @@
+'use client';
+
+import * as React from 'react';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { slot } from '@fluentui/react-utilities';
+
+import type { ProviderProps, ProviderState } from './Provider.types';
+
+export const useProvider = (props: ProviderProps, ref: React.Ref<HTMLDivElement>): ProviderState => {
+  const parentContext = useFluent();
+  const { children, dir, targetDocument } = props;
+
+  return {
+    dir: dir || parentContext.dir,
+    targetDocument: targetDocument || parentContext.targetDocument,
+    components: { root: React.Fragment },
+    root: slot.always({ children }, { elementType: React.Fragment }),
+  };
+};

packages/react-components/react-headless-components-preview/library/src/components/Provider/useProviderContext.ts

@@ -0,0 +1 @@
+export { useFluent_unstable as useProviderContext } from '@fluentui/react-shared-contexts';