feat(react-drawer): add useOverlayDrawerBase_unstable and useInlineDrawerBase_unstable hooks

change/@fluentui-react-drawer-base-hooks.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat(react-drawer): add useOverlayDrawerBase_unstable and useInlineDrawerBase_unstable hooks",
+  "packageName": "@fluentui/react-drawer",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-message-bar-4a6b8620-f010-4128-b5a0-4c68e73bc7de.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat(react-message-bar): add useMessageBarBase_unstable hook",
+  "packageName": "@fluentui/react-message-bar",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -9,6 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { DialogProps } from '@fluentui/react-dialog';
 import type { DialogSurfaceProps } from '@fluentui/react-dialog';
 import type { DialogSurfaceSlots } from '@fluentui/react-dialog';
+import type { DistributiveOmit } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 import type { PresenceDirection } from '@fluentui/react-motion';
@@ -135,6 +136,15 @@ export type DrawerState = ComponentState<DrawerSlots>;
 // @public
 export const InlineDrawer: ForwardRefComponent<InlineDrawerProps>;
 
+// @public
+export type InlineDrawerBaseProps = ComponentProps<Omit<InlineDrawerSlots, 'surfaceMotion'>> & Omit<DrawerBaseProps, 'size' | 'position'>;
+
+// @public
+export type InlineDrawerBaseState = ComponentState<Omit<InlineDrawerSlots, 'surfaceMotion'>> & {
+    open: boolean;
+    unmountOnClose: boolean;
+};
+
 // @public (undocumented)
 export const inlineDrawerClassNames: SlotClassNames<Omit<InlineDrawerSlots, 'surfaceMotion'>>;
 
@@ -150,13 +160,21 @@ export type InlineDrawerSlots = {
 };
 
 // @public
-export type InlineDrawerState = Required<ComponentState<NonNullable<InlineDrawerSlots>> & DrawerBaseState & Pick<InlineDrawerProps, 'separator'> & {
+export type InlineDrawerState = ComponentState<InlineDrawerSlots> & Required<DrawerBaseState & Pick<InlineDrawerProps, 'separator'>> & {
     animationDirection: PresenceDirection;
-}>;
+    open: boolean;
+    unmountOnClose: boolean;
+};
 
 // @public
 export const OverlayDrawer: ForwardRefComponent<OverlayDrawerProps>;
 
+// @public
+export type OverlayDrawerBaseProps = DistributiveOmit<OverlayDrawerProps, 'size' | 'position'>;
+
+// @public
+export type OverlayDrawerBaseState = DistributiveOmit<OverlayDrawerState, 'size' | 'position' | 'motion'>;
+
 // @public (undocumented)
 export const overlayDrawerClassNames: SlotClassNames<Omit<OverlayDrawerSurfaceSlots, 'backdropMotion'>>;
 
@@ -199,7 +217,7 @@ export const renderDrawerHeaderTitle_unstable: (state: DrawerHeaderTitleState) =
 export const renderInlineDrawer_unstable: (state: InlineDrawerState, contextValue: DrawerContextValue) => JSXElement;
 
 // @public
-export const renderOverlayDrawer_unstable: (state: OverlayDrawerState, contextValue: DrawerContextValue) => JSXElement;
+export const renderOverlayDrawer_unstable: (state: OverlayDrawerBaseState, contextValue: DrawerContextValue) => JSXElement;
 
 // @public
 export const useDrawer_unstable: (props: DrawerProps, ref: React_2.Ref<HTMLElement>) => DrawerState;
@@ -246,12 +264,18 @@ export const useDrawerStyles_unstable: (state: DrawerState) => DrawerState;
 // @public
 export const useInlineDrawer_unstable: (props: InlineDrawerProps, ref: React_2.Ref<HTMLElement>) => InlineDrawerState;
 
+// @public
+export const useInlineDrawerBase_unstable: (props: InlineDrawerBaseProps, ref: React_2.Ref<HTMLElement>) => InlineDrawerBaseState;
+
 // @public
 export const useInlineDrawerStyles_unstable: (state: InlineDrawerState) => InlineDrawerState;
 
 // @public
 export const useOverlayDrawer_unstable: (props: OverlayDrawerProps, ref: React_2.Ref<HTMLElement>) => OverlayDrawerState;
 
+// @public
+export const useOverlayDrawerBase_unstable: (props: OverlayDrawerBaseProps, ref: React_2.Ref<HTMLElement>) => OverlayDrawerBaseState;
+
 // @public
 export const useOverlayDrawerStyles_unstable: (state: OverlayDrawerState) => OverlayDrawerState;
 

packages/react-components/react-drawer/library/src/InlineDrawer.ts

@@ -1,4 +1,6 @@
 export type {
+  InlineDrawerBaseProps,
+  InlineDrawerBaseState,
   InlineDrawerProps,
   InlineDrawerSlots,
   InlineDrawerState,
@@ -10,4 +12,5 @@ export {
   renderInlineDrawer_unstable,
   useInlineDrawerStyles_unstable,
   useInlineDrawer_unstable,
+  useInlineDrawerBase_unstable,
 } from './components/InlineDrawer/index';

packages/react-components/react-drawer/library/src/OverlayDrawer.ts

@@ -1,4 +1,6 @@
 export type {
+  OverlayDrawerBaseProps,
+  OverlayDrawerBaseState,
   OverlayDrawerInternalSlots,
   OverlayDrawerProps,
   OverlayDrawerSlots,
@@ -10,4 +12,5 @@ export {
   renderOverlayDrawer_unstable,
   useOverlayDrawerStyles_unstable,
   useOverlayDrawer_unstable,
+  useOverlayDrawerBase_unstable,
 } from './components/OverlayDrawer/index';

packages/react-components/react-drawer/library/src/components/InlineDrawer/InlineDrawer.types.ts

@@ -27,10 +27,25 @@ export type InlineDrawerProps = ComponentProps<InlineDrawerSlots> &
 /**
  * State used in rendering InlineDrawer
  */
-export type InlineDrawerState = Required<
-  ComponentState<NonNullable<InlineDrawerSlots>> &
-    DrawerBaseState &
-    Pick<InlineDrawerProps, 'separator'> & {
-      animationDirection: PresenceDirection;
-    }
->;
+export type InlineDrawerState = ComponentState<InlineDrawerSlots> &
+  Required<DrawerBaseState & Pick<InlineDrawerProps, 'separator'>> & {
+    animationDirection: PresenceDirection;
+    open: boolean;
+    unmountOnClose: boolean;
+  };
+
+/**
+ * InlineDrawer props without design-specific props (`size`, `position`, `separator`, and `surfaceMotion`).
+ * Use with `useInlineDrawerBase_unstable` to build custom-styled InlineDrawer variants.
+ */
+export type InlineDrawerBaseProps = ComponentProps<Omit<InlineDrawerSlots, 'surfaceMotion'>> &
+  Omit<DrawerBaseProps, 'size' | 'position'>;
+
+/**
+ * InlineDrawer state without design-specific state fields (no `size`, `position`, `separator`,
+ * `surfaceMotion`, `animationDirection`, or deprecated `motion`).
+ */
+export type InlineDrawerBaseState = ComponentState<Omit<InlineDrawerSlots, 'surfaceMotion'>> & {
+  open: boolean;
+  unmountOnClose: boolean;
+};

packages/react-components/react-drawer/library/src/components/InlineDrawer/index.ts

@@ -1,10 +1,12 @@
 export { InlineDrawer } from './InlineDrawer';
 export type {
+  InlineDrawerBaseProps,
+  InlineDrawerBaseState,
   InlineDrawerProps,
   InlineDrawerSlots,
   InlineDrawerState,
   SurfaceMotionSlotProps,
 } from './InlineDrawer.types';
 export { renderInlineDrawer_unstable } from './renderInlineDrawer';
-export { useInlineDrawer_unstable } from './useInlineDrawer';
+export { useInlineDrawer_unstable, useInlineDrawerBase_unstable } from './useInlineDrawer';
 export { inlineDrawerClassNames, useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';

packages/react-components/react-drawer/library/src/components/InlineDrawer/renderInlineDrawer.tsx

@@ -14,9 +14,13 @@ export const renderInlineDrawer_unstable = (state: InlineDrawerState, contextVal
 
   return (
     <DrawerProvider value={contextValue}>
-      <state.surfaceMotion>
+      {state.surfaceMotion ? (
+        <state.surfaceMotion>
+          <state.root />
+        </state.surfaceMotion>
+      ) : (
         <state.root />
-      </state.surfaceMotion>
+      )}
     </DrawerProvider>
   );
 };

packages/react-components/react-drawer/library/src/components/InlineDrawer/useInlineDrawer.ts

@@ -7,7 +7,13 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
 
 import { type DrawerMotionParams, InlineDrawerMotion } from '../../shared/drawerMotions';
 import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
-import type { InlineDrawerProps, InlineDrawerState, SurfaceMotionSlotProps } from './InlineDrawer.types';
+import type {
+  InlineDrawerBaseProps,
+  InlineDrawerBaseState,
+  InlineDrawerProps,
+  InlineDrawerState,
+  SurfaceMotionSlotProps,
+} from './InlineDrawer.types';
 
 const STATIC_MOTION = {
   active: true,
@@ -16,6 +22,40 @@ const STATIC_MOTION = {
   type: 'idle' as const,
 };
 
+/**
+ * Create the base state required to render InlineDrawer without design-specific props.
+ *
+ * The returned state can be composed with `useInlineDrawer_unstable` or used directly
+ * to build custom-styled InlineDrawer variants.
+ *
+ * @param props - props from this instance of InlineDrawer (without size, position, separator, surfaceMotion)
+ * @param ref - reference to root HTMLElement of InlineDrawer
+ */
+export const useInlineDrawerBase_unstable = (
+  props: InlineDrawerBaseProps,
+  ref: React.Ref<HTMLElement>,
+): InlineDrawerBaseState => {
+  const { open = false, unmountOnClose = true } = props;
+
+  return {
+    components: {
+      root: 'div',
+    },
+
+    root: slot.always(
+      getIntrinsicElementProps('div', {
+        ...props,
+        ref,
+        'aria-hidden': !unmountOnClose && !open ? true : undefined,
+      }),
+      { elementType: 'div' },
+    ),
+
+    open,
+    unmountOnClose,
+  };
+};
+
 /**
  * Create the state required to render InlineDrawer.
  *
@@ -27,11 +67,14 @@ const STATIC_MOTION = {
  */
 export const useInlineDrawer_unstable = (props: InlineDrawerProps, ref: React.Ref<HTMLElement>): InlineDrawerState => {
   const { size, position, open, unmountOnClose } = useDrawerDefaultProps(props);
-  const { separator = false, surfaceMotion } = props;
+  const { separator = false, surfaceMotion, ...baseProps } = props;
   const { dir } = useFluent();
   const [animationDirection, setAnimationDirection] = React.useState<PresenceDirection>(open ? 'enter' : 'exit');
 
+  const state = useInlineDrawerBase_unstable(baseProps as InlineDrawerBaseProps, ref);
+
   return {
+    ...state,
     components: {
       root: 'div',
       // casting from internal type that has required properties
@@ -40,21 +83,13 @@ export const useInlineDrawer_unstable = (props: InlineDrawerProps, ref: React.Re
       surfaceMotion: InlineDrawerMotion as unknown as React.FC<SurfaceMotionSlotProps>,
     },
 
-    root: slot.always(
-      getIntrinsicElementProps('div', {
-        ...props,
-        ref,
-        'aria-hidden': !unmountOnClose && !open ? true : undefined,
-      }),
-      { elementType: 'div' },
-    ),
-
     open,
+    unmountOnClose,
     position,
     size,
     separator,
-    unmountOnClose,
     animationDirection,
+
     surfaceMotion: presenceMotionSlot<DrawerMotionParams>(surfaceMotion, {
       elementType: InlineDrawerMotion,
       defaultProps: {

packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.types.ts

@@ -1,6 +1,6 @@
 import type { DialogProps } from '@fluentui/react-dialog';
 import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';
 
 import type { DrawerMotionParams, OverlayDrawerSurfaceMotionParams } from '../../shared/drawerMotions';
 import type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';
@@ -57,3 +57,14 @@ export type OverlayDrawerState = ComponentState<OverlayDrawerInternalSlots> &
   Pick<OverlayDrawerProps, 'mountNode' | 'unmountOnClose'> & {
     hasMountNodeElement: boolean;
   };
+
+/**
+ * OverlayDrawer props without design-specific props (`size` and `position`).
+ * Use with `useOverlayDrawerBase_unstable` to build custom-styled OverlayDrawer variants.
+ */
+export type OverlayDrawerBaseProps = DistributiveOmit<OverlayDrawerProps, 'size' | 'position'>;
+
+/**
+ * OverlayDrawer state without design-specific state fields (`size`, `position`, and deprecated `motion`).
+ */
+export type OverlayDrawerBaseState = DistributiveOmit<OverlayDrawerState, 'size' | 'position' | 'motion'>;

packages/react-components/react-drawer/library/src/components/OverlayDrawer/index.ts

@@ -1,10 +1,12 @@
 export { OverlayDrawer } from './OverlayDrawer';
 export type {
+  OverlayDrawerBaseProps,
+  OverlayDrawerBaseState,
   OverlayDrawerInternalSlots,
   OverlayDrawerProps,
   OverlayDrawerSlots,
   OverlayDrawerState,
 } from './OverlayDrawer.types';
 export { renderOverlayDrawer_unstable } from './renderOverlayDrawer';
-export { useOverlayDrawer_unstable } from './useOverlayDrawer';
+export { useOverlayDrawer_unstable, useOverlayDrawerBase_unstable } from './useOverlayDrawer';
 export { overlayDrawerClassNames, useOverlayDrawerStyles_unstable } from './useOverlayDrawerStyles.styles';

packages/react-components/react-drawer/library/src/components/OverlayDrawer/renderOverlayDrawer.tsx

@@ -5,13 +5,13 @@ import type { JSXElement } from '@fluentui/react-utilities';
 import { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';
 import { DialogBackdropProvider } from '@fluentui/react-dialog';
 
-import type { OverlayDrawerState, OverlayDrawerInternalSlots } from './OverlayDrawer.types';
+import type { OverlayDrawerBaseState, OverlayDrawerInternalSlots } from './OverlayDrawer.types';
 
 /**
  * Render the final JSX of OverlayDrawer
  */
 export const renderOverlayDrawer_unstable = (
-  state: OverlayDrawerState,
+  state: OverlayDrawerBaseState,
   contextValue: DrawerContextValue,
 ): JSXElement => {
   assertSlots<OverlayDrawerInternalSlots>(state);