feat(react-headless-components-preview): export Drawer context (#36479)

Author: mainframev

change/@fluentui-react-headless-components-preview-5ebdf698-aac9-4476-8d7f-cd19e99f7934.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: export Drawer context utilities",
+  "packageName": "@fluentui/react-headless-components-preview",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "patch"
+}

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

@@ -9,7 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import { DrawerBodyProps } from '@fluentui/react-drawer';
 import { DrawerBodySlots } from '@fluentui/react-drawer';
 import { DrawerBodyState } from '@fluentui/react-drawer';
-import type { DrawerContextValue } from '@fluentui/react-drawer';
+import { DrawerContextValue } from '@fluentui/react-drawer';
 import { DrawerFooterProps } from '@fluentui/react-drawer';
 import { DrawerFooterSlots } from '@fluentui/react-drawer';
 import { DrawerFooterState as DrawerFooterState_2 } from '@fluentui/react-drawer';
@@ -22,6 +22,7 @@ import { DrawerHeaderState as DrawerHeaderState_2 } from '@fluentui/react-drawer
 import { DrawerHeaderTitleProps } from '@fluentui/react-drawer';
 import { DrawerHeaderTitleSlots } from '@fluentui/react-drawer';
 import { DrawerHeaderTitleState } from '@fluentui/react-drawer';
+import { DrawerProvider } from '@fluentui/react-drawer';
 import type { EventHandler } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { InlineDrawerBaseState } from '@fluentui/react-drawer';
@@ -32,6 +33,8 @@ import type { OverlayDrawerProps as OverlayDrawerProps_2 } from '@fluentui/react
 import * as React_2 from 'react';
 import { Ref } from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { useDrawerContext_unstable as useDrawerContext } from '@fluentui/react-drawer';
+import { useDrawerContextValue } from '@fluentui/react-drawer';
 
 // @public
 export const Drawer: ForwardRefComponent<DrawerProps>;
@@ -45,6 +48,8 @@ export { DrawerBodySlots }
 
 export { DrawerBodyState }
 
+export { DrawerContextValue }
+
 // @public
 export const DrawerFooter: ForwardRefComponent<DrawerFooterProps>;
 
@@ -98,6 +103,8 @@ export type DrawerProps = (ComponentProps<DrawerSlots> & {
     type: 'inline';
 } & InlineDrawerProps);
 
+export { DrawerProvider }
+
 // @public (undocumented)
 export type DrawerSlots = Pick<OverlayDrawerSlots, 'root'> | Pick<InlineDrawerSlots, 'root'>;
 
@@ -168,6 +175,10 @@ export const useDrawer: (props: DrawerProps, ref: React_2.Ref<HTMLElement>) => D
 // @public
 export const useDrawerBody: (props: DrawerBodyProps, ref: Ref<HTMLElement>) => DrawerBodyState;
 
+export { useDrawerContext }
+
+export { useDrawerContextValue }
+
 // @public
 export const useDrawerFooter: (props: DrawerFooterProps, ref: React_2.Ref<HTMLElement>) => DrawerFooterState;
 

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

@@ -9,6 +9,7 @@ import { DrawerFooter } from './DrawerFooter';
 import { DrawerHeader } from './DrawerHeader';
 import { DrawerHeaderNavigation } from './DrawerHeaderNavigation';
 import { DrawerHeaderTitle } from './DrawerHeaderTitle';
+import { DrawerProvider, useDrawerContext } from './index';
 
 describe('Drawer', () => {
   isConformant({
@@ -42,6 +43,22 @@ describe('Drawer', () => {
     expect(drawer).toHaveAttribute('data-open');
     expect(drawer).toHaveAttribute('data-position', 'end');
   });
+
+  it('exposes the Drawer context through the headless API', () => {
+    const ContextConsumer = () => {
+      const { scrollState } = useDrawerContext();
+
+      return <div>{scrollState}</div>;
+    };
+
+    const result = render(
+      <DrawerProvider value={{ scrollState: 'middle', setScrollState: jest.fn() }}>
+        <ContextConsumer />
+      </DrawerProvider>,
+    );
+
+    expect(result.getByText('middle')).toBeInTheDocument();
+  });
 });
 
 describe('OverlayDrawer', () => {

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

@@ -2,6 +2,12 @@ export { Drawer } from './Drawer';
 export { renderDrawer } from './renderDrawer';
 export { useDrawer } from './useDrawer';
 export type { DrawerProps, DrawerSlots, DrawerState } from './Drawer.types';
+export {
+  DrawerProvider,
+  useDrawerContext_unstable as useDrawerContext,
+  useDrawerContextValue,
+} from '@fluentui/react-drawer';
+export type { DrawerContextValue } from '@fluentui/react-drawer';
 
 export { OverlayDrawer, renderOverlayDrawer, useOverlayDrawer } from './OverlayDrawer';
 export type { OverlayDrawerProps, OverlayDrawerSlots, OverlayDrawerState } from './OverlayDrawer';

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

@@ -1,5 +1,11 @@
 export { Drawer, renderDrawer, useDrawer } from './components/Drawer';
 export type { DrawerProps, DrawerSlots, DrawerState } from './components/Drawer';
+export {
+  DrawerProvider,
+  useDrawerContext_unstable as useDrawerContext,
+  useDrawerContextValue,
+} from '@fluentui/react-drawer';
+export type { DrawerContextValue } from '@fluentui/react-drawer';
 
 export { OverlayDrawer, renderOverlayDrawer, useOverlayDrawer } from './components/Drawer';
 export type { OverlayDrawerProps, OverlayDrawerSlots, OverlayDrawerState } from './components/Drawer';