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

Author: dmytrokirpa

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

@@ -52,6 +52,9 @@ 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 type { FluentProviderProps } from '@fluentui/react-provider';
+import type { FluentProviderState } from '@fluentui/react-provider';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { InputBaseProps } from '@fluentui/react-input';
 import { InputBaseState } from '@fluentui/react-input';
@@ -382,6 +385,15 @@ export type ProgressBarSlots = ProgressBarSlots_2;
 // @public
 export type ProgressBarState = ProgressBarBaseState;
 
+// @public (undocumented)
+export const Provider: React_2.ForwardRefExoticComponent<ProviderProps & React_2.RefAttributes<HTMLDivElement>>;
+
+// @public
+export type ProviderProps = Omit<FluentProviderProps, 'applyStylesToPortals' | 'theme' | 'customStyleHooks_unstable' | 'overrides_unstable'>;
+
+// @public
+export type ProviderState = Omit<FluentProviderState, 'applyStylesToPortals' | 'theme' | 'themeClassName' | 'customStyleHooks_unstable' | 'overrides_unstable' | 'serverStyleProps'>;
+
 // @public
 export const Radio: React_2.ForwardRefExoticComponent<Omit<ComponentProps<Partial<RadioSlots_2>, "input">, "onChange" | "size"> & {
     value?: string;
@@ -512,6 +524,9 @@ export const renderLink: (state: LinkBaseState) => JSXElement;
 // @public
 export const renderProgressBar: (state: ProgressBarState) => JSXElement;
 
+// @public
+export const renderProvider: (state: ProviderState, contextValues: FluentProviderContextValues) => JSXElement;
+
 // @public
 export const renderRadio: (state: RadioBaseState) => JSXElement;
 
@@ -819,6 +834,9 @@ export const useLink: (props: LinkProps, ref: React_2.Ref<HTMLElement>) => LinkS
 // @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;
+
 // @public
 export const useRadio: (props: RadioProps, ref: React_2.Ref<HTMLInputElement>) => RadioState;
 

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

@@ -34,6 +34,7 @@
     "@fluentui/react-link": "^9.8.0",
     "@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",
@@ -45,6 +46,7 @@
     "@fluentui/react-spinner": "^9.8.0",
     "@fluentui/react-switch": "^9.7.0",
     "@fluentui/react-tabs": "^9.11.2",
+    "@fluentui/react-tabster": "^9.26.13",
     "@fluentui/react-tags": "^9.7.19",
     "@fluentui/react-textarea": "^9.7.0",
     "@fluentui/react-utilities": "^9.26.2",

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

@@ -0,0 +1,2 @@
+export { Provider, renderProvider, useProvider } 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,31 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { isConformant } from '../../testing/isConformant';
+import { Provider } from './Provider';
+
+describe('Provider', () => {
+  isConformant({
+    Component: Provider,
+    displayName: 'Provider',
+  });
+
+  it('renders a default state', () => {
+    const result = render(
+      <Provider>
+        <div>Content</div>
+      </Provider>,
+    );
+    expect(result.container).toHaveTextContent('Content');
+    expect(result.container.firstChild).toHaveAttribute('dir', 'ltr');
+  });
+
+  it('renders with custom dir', () => {
+    const result = render(
+      <Provider dir="rtl">
+        <div>Content</div>
+      </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,31 @@
+import type {
+  FluentProviderContextValues,
+  FluentProviderSlots,
+  FluentProviderProps,
+  FluentProviderState,
+} from '@fluentui/react-provider';
+
+export type ProviderSlots = FluentProviderSlots;
+
+/**
+ * Provider Props
+ */
+export type ProviderProps = Omit<
+  FluentProviderProps,
+  'applyStylesToPortals' | 'theme' | 'customStyleHooks_unstable' | 'overrides_unstable'
+>;
+
+/**
+ * State used in rendering Provider
+ */
+export type ProviderState = Omit<
+  FluentProviderState,
+  | 'applyStylesToPortals'
+  | 'theme'
+  | 'themeClassName'
+  | 'customStyleHooks_unstable'
+  | 'overrides_unstable'
+  | 'serverStyleProps'
+>;
+
+export type ProviderContextValues = FluentProviderContextValues;

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

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

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,30 @@
+'use client';
+
+import type * as React from 'react';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { useFocusVisible } from '@fluentui/react-tabster';
+import { getIntrinsicElementProps, slot, useMergedRefs } 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 { dir = parentContext.dir, targetDocument = parentContext.targetDocument } = props;
+
+  return {
+    dir,
+    targetDocument,
+    components: {
+      root: 'div',
+    },
+    root: slot.always(
+      getIntrinsicElementProps('div', {
+        ...props,
+        dir,
+        ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>({ targetDocument })),
+      }),
+      { elementType: 'div' },
+    ),
+  };
+};

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

@@ -0,0 +1,8 @@
+'use client';
+
+import { useFluentProviderContextValues_unstable as useFluentProviderContextValues } from '@fluentui/react-provider';
+import type { ProviderContextValues, ProviderState } from './Provider.types';
+
+export const useProviderContextValues = useFluentProviderContextValues as (
+  state: ProviderState,
+) => ProviderContextValues;