@fluentui/react-drawer 9.0.0-beta.8 → 9.0.0

package/dist/index.d.ts

@@ -2,10 +2,8 @@
 
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
-import { DialogProps } from '@fluentui/react-dialog';
-import { DialogSurfaceProps } from '@fluentui/react-dialog';
-import { DialogSurfaceSlots } from '@fluentui/react-dialog';
-import { DialogTitleSlots } from '@fluentui/react-dialog';
+import type { DialogProps } from '@fluentui/react-dialog';
+import type { DialogSurfaceSlots } from '@fluentui/react-dialog';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
@@ -20,9 +18,9 @@ declare type DrawerBaseProps = {
     /**
      * Position of the drawer.
      *
-     * @default 'left'
+     * @default 'start'
      */
-    position?: 'left' | 'right';
+    position?: 'start' | 'end';
     /**
      * Size of the drawer.
      *
@@ -40,12 +38,10 @@ declare type DrawerBaseProps = {
      * @default false
      */
     open?: boolean;
-    /**
-     * Default value for the uncontrolled open state of the Drawer.
-     *
-     * @default false
-     */
-    defaultOpen?: boolean;
+};
+
+declare type DrawerBaseState = Required<Pick<DrawerBaseProps, 'position' | 'size'>> & {
+    motion: MotionState<HTMLDivElement>;
 };
 
 /**
@@ -70,7 +66,7 @@ export declare type DrawerBodySlots = {
 export declare type DrawerBodyState = ComponentState<DrawerBodySlots>;
 
 /**
- * DrawerFooter component - TODO: add more docs
+ * DrawerFooter provides a structured footer for the drawer component.
  */
 export declare const DrawerFooter: ForwardRefComponent<DrawerFooterProps>;
 
@@ -145,13 +141,7 @@ export declare const drawerHeaderTitleClassNames: SlotClassNames<DrawerHeaderTit
 /**
  * DrawerHeaderTitle Props
  */
-export declare type DrawerHeaderTitleProps = ComponentProps<DrawerHeaderTitleSlots> & {
-    /**
-     * Content of the DrawerHeaderTitle
-     * Children is mandatory because DrawerHeaderTitle is a wrapper component
-     */
-    children: React_2.ReactNode | undefined;
-};
+export declare type DrawerHeaderTitleProps = ComponentProps<DrawerHeaderTitleSlots>;
 
 export declare type DrawerHeaderTitleSlots = {
     root: Slot<'div'>;
@@ -159,11 +149,11 @@ export declare type DrawerHeaderTitleSlots = {
      * By default this is a h2, but can be any heading or div.
      * If `div` is provided do not forget to also provide proper `role="heading"` and `aria-level` attributes
      */
-    heading?: DialogTitleSlots['root'];
+    heading?: Slot<'h2', 'h1' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'>;
     /**
      * Action slot for the close button
      */
-    action?: DialogTitleSlots['action'];
+    action?: Slot<'div'>;
 };
 
 /**
@@ -172,17 +162,44 @@ export declare type DrawerHeaderTitleSlots = {
 export declare type DrawerHeaderTitleState = ComponentState<DrawerHeaderTitleSlots>;
 
 /**
- * DrawerInline is often used for navigation that is not dissmissable. As it is on the same level as
+ * Drawer Props
+ */
+export declare type DrawerProps = ComponentProps<DrawerSlots> & {
+    /**
+     * Type of the drawer.
+     *
+     * - 'overlay' - Drawer is hidden by default and can be opened by clicking on the trigger.
+     * - 'inline' - Drawer is stacked with the content
+     *
+     * @default overlay
+     */
+    type?: 'inline' | 'overlay';
+};
+
+export declare type DrawerSlots = {
+    /**
+     * Root slot of the Drawer.
+     */
+    root: Slot<OverlayDrawerProps | InlineDrawerProps>;
+};
+
+/**
+ * State used in rendering Drawer
+ */
+export declare type DrawerState = ComponentState<DrawerSlots>;
+
+/**
+ * InlineDrawer is often used for navigation that is not dismissible. As it is on the same level as
  * the main surface, users can still interact with other UI elements.
  */
-export declare const DrawerInline: ForwardRefComponent<DrawerInlineProps>;
+export declare const InlineDrawer: ForwardRefComponent<InlineDrawerProps>;
 
-export declare const drawerInlineClassNames: SlotClassNames<DrawerInlineSlots>;
+export declare const inlineDrawerClassNames: SlotClassNames<InlineDrawerSlots>;
 
 /**
- * DrawerInline Props
+ * InlineDrawer Props
  */
-export declare type DrawerInlineProps = ComponentProps<DrawerInlineSlots> & DrawerBaseProps & {
+export declare type InlineDrawerProps = ComponentProps<InlineDrawerSlots> & DrawerBaseProps & {
     /**
      * Whether the drawer has a separator line.
      *
@@ -191,63 +208,91 @@ export declare type DrawerInlineProps = ComponentProps<DrawerInlineSlots> & Draw
     separator?: boolean;
 };
 
-export declare type DrawerInlineSlots = {
+export declare type InlineDrawerSlots = {
     root: Slot<'div'>;
 };
 
 /**
- * State used in rendering DrawerInline
+ * State used in rendering InlineDrawer
  */
-export declare type DrawerInlineState = ComponentState<DrawerInlineSlots> & DrawerInlineProps;
+export declare type InlineDrawerState = Required<ComponentState<InlineDrawerSlots> & DrawerBaseState & Pick<InlineDrawerProps, 'separator'>>;
+
+declare type MotionState<Element extends HTMLElement = HTMLElement> = {
+    /**
+     * Ref to the element.
+     */
+    ref: React_2.Ref<Element>;
+    /**
+     * Current state of the element.
+     *
+     * - `unmounted` - The element is not yet rendered or can be safely removed from the DOM.
+     * - `entering` - The element is performing enter animation.
+     * - `entered` - The element has finished enter animation.
+     * - `idle` - The element is currently not animating, but rendered on screen.
+     * - `exiting` - The element is performing exit animation.
+     * - `exited` - The element has finished exit animation.
+     */
+    type: MotionType;
+    /**
+     * Indicates whether the component can be rendered.
+     * Useful to render the element before animating it or to remove it from the DOM after exit animation.
+     */
+    canRender: boolean;
+    /**
+     * Indicates whether the component is ready to receive a CSS transition className.
+     * Useful to apply CSS transitions when the element is mounted and ready to be animated.
+     */
+    active: boolean;
+};
+
+declare type MotionType = 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';
 
 /**
- * DrawerOverlay contains supplementary content and are used for complex creation, edit, or management experiences.
+ * OverlayDrawer contains supplementary content and are used for complex creation, edit, or management experiences.
  */
-export declare const DrawerOverlay: ForwardRefComponent<DrawerOverlayProps>;
+export declare const OverlayDrawer: ForwardRefComponent<OverlayDrawerProps>;
 
-export declare const drawerOverlayClassNames: SlotClassNames<DrawerOverlaySlots>;
+export declare const overlayDrawerClassNames: SlotClassNames<OverlayDrawerSurfaceSlots>;
 
 /**
- * DrawerOverlay Props
+ * OverlayDrawer internal slots for when using with composition API
  */
-export declare type DrawerOverlayProps = ComponentProps<DrawerOverlaySlots> & DrawerBaseProps & Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus'>;
-
-export declare type DrawerOverlaySlots = DialogSurfaceSlots & {
-    root: Slot<DialogSurfaceProps>;
+declare type OverlayDrawerInternalSlots = OverlayDrawerSlots & {
+    /**
+     * Slot for the dialog component that wraps the drawer.
+     */
+    dialog: Slot<DialogProps>;
 };
 
 /**
- * State used in rendering DrawerOverlay
+ * OverlayDrawer Props
  */
-export declare type DrawerOverlayState = ComponentState<DrawerOverlaySlots> & DrawerBaseProps & {
-    dialog: DialogProps;
-};
+export declare type OverlayDrawerProps = ComponentProps<OverlayDrawerSlots> & Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus' | 'defaultOpen'> & DrawerBaseProps;
 
 /**
- * Drawer Props
+ * OverlayDrawer slots
  */
-export declare type DrawerProps = ComponentProps<Partial<DrawerSlots>> & {
+export declare type OverlayDrawerSlots = {
     /**
-     * Type of the drawer.
-     * @default overlay
-     *
-     * - 'overlay' - Drawer is hidden by default and can be opened by clicking on the trigger.
-     * - 'inline' - Drawer is stacked with the content
+     * Slot for the root element.
      */
-    type?: 'inline' | 'overlay';
+    root: Slot<OverlayDrawerSurfaceProps>;
 };
 
-export declare type DrawerSlots = {
-    /**
-     * Root slot of the Drawer.
-     */
-    root: Slot<DrawerOverlayProps | DrawerInlineProps>;
-};
+/**
+ * State used in rendering OverlayDrawer
+ */
+export declare type OverlayDrawerState = Omit<ComponentState<OverlayDrawerInternalSlots>, 'backdrop'> & Required<DrawerBaseState>;
 
 /**
- * State used in rendering Drawer
+ * OverlayDrawerSurface Props
  */
-export declare type DrawerState = ComponentState<DrawerSlots>;
+declare type OverlayDrawerSurfaceProps = ComponentProps<OverlayDrawerSurfaceSlots>;
+
+/**
+ * OverlayDrawerSurface slots
+ */
+declare type OverlayDrawerSurfaceSlots = DialogSurfaceSlots;
 
 /**
  * Render the final JSX of Drawer
@@ -280,14 +325,14 @@ export declare const renderDrawerHeaderNavigation_unstable: (state: DrawerHeader
 export declare const renderDrawerHeaderTitle_unstable: (state: DrawerHeaderTitleState) => JSX.Element;
 
 /**
- * Render the final JSX of DrawerInline
+ * Render the final JSX of InlineDrawer
  */
-export declare const renderDrawerInline_unstable: (state: DrawerInlineState) => JSX.Element | null;
+export declare const renderInlineDrawer_unstable: (state: InlineDrawerState) => JSX.Element | null;
 
 /**
- * Render the final JSX of DrawerOverlay
+ * Render the final JSX of OverlayDrawer
  */
-export declare const renderDrawerOverlay_unstable: (state: DrawerOverlayState) => JSX.Element;
+export declare const renderOverlayDrawer_unstable: (state: OverlayDrawerState) => JSX.Element | null;
 
 /**
  * Create the state required to render Drawer.
@@ -381,35 +426,40 @@ export declare const useDrawerHeaderTitle_unstable: (props: DrawerHeaderTitlePro
 export declare const useDrawerHeaderTitleStyles_unstable: (state: DrawerHeaderTitleState) => DrawerHeaderTitleState;
 
 /**
- * Create the state required to render DrawerInline.
+ * Apply styling to the Drawer slots based on the state
+ */
+export declare const useDrawerStyles_unstable: (state: DrawerState) => DrawerState;
+
+/**
+ * Create the state required to render InlineDrawer.
  *
- * The returned state can be modified with hooks such as useDrawerInlineStyles_unstable,
- * before being passed to renderDrawerInline_unstable.
+ * The returned state can be modified with hooks such as useInlineDrawerStyles_unstable,
+ * before being passed to renderInlineDrawer_unstable.
  *
- * @param props - props from this instance of DrawerInline
- * @param ref - reference to root HTMLElement of DrawerInline
+ * @param props - props from this instance of InlineDrawer
+ * @param ref - reference to root HTMLElement of InlineDrawer
  */
-export declare const useDrawerInline_unstable: (props: DrawerInlineProps, ref: React_2.Ref<HTMLElement>) => DrawerInlineState;
+export declare const useInlineDrawer_unstable: (props: InlineDrawerProps, ref: React_2.Ref<HTMLDivElement>) => InlineDrawerState;
 
 /**
- * Apply styling to the DrawerInline slots based on the state
+ * Apply styling to the InlineDrawer slots based on the state
  */
-export declare const useDrawerInlineStyles_unstable: (state: DrawerInlineState) => DrawerInlineState;
+export declare const useInlineDrawerStyles_unstable: (state: InlineDrawerState) => InlineDrawerState;
 
 /**
- * Create the state required to render DrawerOverlay.
+ * Create the state required to render OverlayDrawer.
  *
- * The returned state can be modified with hooks such as useDrawerOverlayStyles_unstable,
- * before being passed to renderDrawerOverlay_unstable.
+ * The returned state can be modified with hooks such as useOverlayDrawerStyles_unstable,
+ * before being passed to renderOverlayDrawer_unstable.
  *
- * @param props - props from this instance of DrawerOverlay
- * @param ref - reference to root HTMLElement of DrawerOverlay
+ * @param props - props from this instance of OverlayDrawer
+ * @param ref - reference to root HTMLDivElement of OverlayDrawer
  */
-export declare const useDrawerOverlay_unstable: (props: DrawerOverlayProps, ref: React_2.Ref<HTMLElement>) => DrawerOverlayState;
+export declare const useOverlayDrawer_unstable: (props: OverlayDrawerProps, ref: React_2.Ref<HTMLDivElement>) => OverlayDrawerState;
 
 /**
- * Apply styling to the DrawerOverlay slots based on the state
+ * Apply styling to the OverlayDrawer slots based on the state
  */
-export declare const useDrawerOverlayStyles_unstable: (state: DrawerOverlayState) => DrawerOverlayState;
+export declare const useOverlayDrawerStyles_unstable: (state: OverlayDrawerState) => OverlayDrawerState;
 
 export { }

package/lib/InlineDrawer.js

@@ -0,0 +1 @@
+export * from './components/InlineDrawer/index';

package/lib/InlineDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["InlineDrawer.ts"],"sourcesContent":["export * from './components/InlineDrawer/index';\n"],"names":[],"mappings":"AAAA,cAAc,kCAAkC"}

package/lib/OverlayDrawer.js

@@ -0,0 +1 @@
+export * from './components/OverlayDrawer/index';

package/lib/OverlayDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["OverlayDrawer.ts"],"sourcesContent":["export * from './components/OverlayDrawer/index';\n"],"names":[],"mappings":"AAAA,cAAc,mCAAmC"}

package/lib/components/Drawer/Drawer.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useDrawer_unstable } from './useDrawer';
 import { renderDrawer_unstable } from './renderDrawer';
 import { useDrawerStyles_unstable } from './useDrawerStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * Drawer contains supplementary content and are used for complex creation, edit, or management experiences.
  */ export const Drawer = /*#__PURE__*/ React.forwardRef((props, ref)=>{

package/lib/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDrawer_unstable } from './useDrawer';\nimport { renderDrawer_unstable } from './renderDrawer';\nimport { useDrawerStyles_unstable } from './useDrawerStyles.styles';\nimport type { DrawerProps } from './Drawer.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Drawer contains supplementary content and are used for complex creation, edit, or management experiences.\n */\nexport const Drawer: ForwardRefComponent<DrawerProps> = React.forwardRef((props, ref) => {\n  const state = useDrawer_unstable(props, ref);\n\n  useDrawerStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerStyles_unstable')(state);\n\n  return renderDrawer_unstable(state);\n});\n\nDrawer.displayName = 'Drawer';\n"],"names":["React","useDrawer_unstable","renderDrawer_unstable","useDrawerStyles_unstable","useCustomStyleHook_unstable","Drawer","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,2BAA2B;AAGpE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACvF,MAAMC,QAAQR,mBAAmBM,OAAOC;IAExCL,yBAAyBM;IACzBL,4BAA4B,4BAA4BK;IAExD,OAAOP,sBAAsBO;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}
+{"version":3,"sources":["Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useDrawer_unstable } from './useDrawer';\nimport { renderDrawer_unstable } from './renderDrawer';\nimport { useDrawerStyles_unstable } from './useDrawerStyles.styles';\nimport type { DrawerProps } from './Drawer.types';\n\n/**\n * Drawer contains supplementary content and are used for complex creation, edit, or management experiences.\n */\nexport const Drawer: ForwardRefComponent<DrawerProps> = React.forwardRef((props, ref) => {\n  const state = useDrawer_unstable(props, ref);\n\n  useDrawerStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerStyles_unstable')(state);\n\n  return renderDrawer_unstable(state);\n});\n\nDrawer.displayName = 'Drawer';\n"],"names":["React","useCustomStyleHook_unstable","useDrawer_unstable","renderDrawer_unstable","useDrawerStyles_unstable","Drawer","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,2BAA2B;AAGpE;;CAEC,GACD,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQP,mBAAmBK,OAAOC;IAExCJ,yBAAyBK;IACzBR,4BAA4B,4BAA4BQ;IAExD,OAAON,sBAAsBM;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}

package/lib/components/Drawer/Drawer.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Drawer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { DrawerOverlayProps } from '../DrawerOverlay/DrawerOverlay.types';\nimport { DrawerInlineProps } from '../DrawerInline/DrawerInline.types';\n\nexport type DrawerSlots = {\n  /**\n   * Root slot of the Drawer.\n   */\n  root: Slot<DrawerOverlayProps | DrawerInlineProps>;\n};\n\n/**\n * Drawer Props\n */\nexport type DrawerProps = ComponentProps<Partial<DrawerSlots>> & {\n  /**\n   * Type of the drawer.\n   * @default overlay\n   *\n   * - 'overlay' - Drawer is hidden by default and can be opened by clicking on the trigger.\n   * - 'inline' - Drawer is stacked with the content\n   */\n  type?: 'inline' | 'overlay';\n};\n\n/**\n * State used in rendering Drawer\n */\nexport type DrawerState = ComponentState<DrawerSlots>;\n"],"names":[],"mappings":"AAAA,WA4BsD"}
+{"version":3,"sources":["Drawer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport type { OverlayDrawerProps } from '../OverlayDrawer';\nimport type { InlineDrawerProps } from '../InlineDrawer';\n\nexport type DrawerSlots = {\n  /**\n   * Root slot of the Drawer.\n   */\n  root: Slot<OverlayDrawerProps | InlineDrawerProps>;\n};\n\n/**\n * Drawer Props\n */\nexport type DrawerProps = ComponentProps<DrawerSlots> & {\n  /**\n   * Type of the drawer.\n   *\n   * - 'overlay' - Drawer is hidden by default and can be opened by clicking on the trigger.\n   * - 'inline' - Drawer is stacked with the content\n   *\n   * @default overlay\n   */\n  type?: 'inline' | 'overlay';\n};\n\n/**\n * State used in rendering Drawer\n */\nexport type DrawerState = ComponentState<DrawerSlots>;\n"],"names":[],"mappings":"AAAA,WA8BsD"}

package/lib/components/Drawer/renderDrawer.js

@@ -1,8 +1,8 @@
-/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of Drawer
  */ export const renderDrawer_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root);
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
 };

package/lib/components/Drawer/renderDrawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawer.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { DrawerState, DrawerSlots } from './Drawer.types';\n\n/**\n * Render the final JSX of Drawer\n */\nexport const renderDrawer_unstable = (state: DrawerState) => {\n  const { slots, slotProps } = getSlotsNext<DrawerSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"names":["createElement","getSlotsNext","renderDrawer_unstable","state","slots","slotProps","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,QAAuB;IAC3D,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA0BE;IAEvD,qBAAO,AAbT,cAaUC,MAAME,IAAI,EAAKD,UAAUC,IAAI;AACvC,EAAE"}
+{"version":3,"sources":["renderDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { DrawerState, DrawerSlots } from './Drawer.types';\n\n/**\n * Render the final JSX of Drawer\n */\nexport const renderDrawer_unstable = (state: DrawerState) => {\n  assertSlots<DrawerSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderDrawer_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IAEzB,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/Drawer/useDrawer.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { resolveShorthand } from '@fluentui/react-utilities';
-import { DrawerOverlay } from '../DrawerOverlay/DrawerOverlay';
-import { DrawerInline } from '../DrawerInline/DrawerInline';
+import { slot } from '@fluentui/react-utilities';
+import { OverlayDrawer } from '../OverlayDrawer';
+import { InlineDrawer } from '../InlineDrawer';
 /**
  * Create the state required to render Drawer.
  *
@@ -11,16 +11,16 @@ import { DrawerInline } from '../DrawerInline/DrawerInline';
  * @param props - props from this instance of Drawer
  * @param ref - reference to root HTMLElement of Drawer
  */ export const useDrawer_unstable = (props, ref)=>{
-    const { type ='overlay'  } = props;
+    const elementType = props.type === 'inline' ? InlineDrawer : OverlayDrawer;
     return {
         components: {
-            root: type === 'overlay' ? DrawerOverlay : DrawerInline
+            root: elementType
         },
-        root: resolveShorthand(props, {
-            required: true,
-            defaultProps: {
-                ref
-            }
+        root: slot.always(slot.resolveShorthand({
+            ref,
+            ...props
+        }), {
+            elementType
         })
     };
 };

package/lib/components/Drawer/useDrawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\n\nimport type { DrawerProps, DrawerState } from './Drawer.types';\nimport { DrawerOverlay } from '../DrawerOverlay/DrawerOverlay';\nimport { DrawerInline } from '../DrawerInline/DrawerInline';\n\n/**\n * Create the state required to render Drawer.\n *\n * The returned state can be modified with hooks such as useDrawerStyles_unstable,\n * before being passed to renderDrawer_unstable.\n *\n * @param props - props from this instance of Drawer\n * @param ref - reference to root HTMLElement of Drawer\n */\nexport const useDrawer_unstable = (props: DrawerProps, ref: React.Ref<HTMLElement>): DrawerState => {\n  const { type = 'overlay' } = props;\n\n  return {\n    components: {\n      root: type === 'overlay' ? DrawerOverlay : DrawerInline,\n    },\n\n    root: resolveShorthand(props, {\n      required: true,\n      defaultProps: {\n        ref,\n      } as DrawerProps,\n    }),\n  };\n};\n"],"names":["React","resolveShorthand","DrawerOverlay","DrawerInline","useDrawer_unstable","props","ref","type","components","root","required","defaultProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAG7D,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,YAAY,QAAQ,+BAA+B;AAE5D;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC,MAA6C;IAClG,MAAM,EAAEC,MAAO,UAAS,EAAE,GAAGF;IAE7B,OAAO;QACLG,YAAY;YACVC,MAAMF,SAAS,YAAYL,gBAAgBC,YAAY;QACzD;QAEAM,MAAMR,iBAAiBI,OAAO;YAC5BK,UAAU,IAAI;YACdC,cAAc;gBACZL;YACF;QACF;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\n\nimport type { DrawerProps, DrawerState } from './Drawer.types';\nimport { OverlayDrawer } from '../OverlayDrawer';\nimport { InlineDrawer } from '../InlineDrawer';\n\n/**\n * Create the state required to render Drawer.\n *\n * The returned state can be modified with hooks such as useDrawerStyles_unstable,\n * before being passed to renderDrawer_unstable.\n *\n * @param props - props from this instance of Drawer\n * @param ref - reference to root HTMLElement of Drawer\n */\nexport const useDrawer_unstable = (props: DrawerProps, ref: React.Ref<HTMLElement>): DrawerState => {\n  const elementType = props.type === 'inline' ? InlineDrawer : OverlayDrawer;\n\n  return {\n    components: {\n      root: elementType,\n    },\n\n    root: slot.always<DrawerProps>(\n      slot.resolveShorthand({\n        ref,\n        ...props,\n      }),\n      {\n        elementType,\n      },\n    ),\n  };\n};\n"],"names":["React","slot","OverlayDrawer","InlineDrawer","useDrawer_unstable","props","ref","elementType","type","components","root","always","resolveShorthand"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AAGjD,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,YAAY,QAAQ,kBAAkB;AAE/C;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,MAAMC,cAAcF,MAAMG,IAAI,KAAK,WAAWL,eAAeD;IAE7D,OAAO;QACLO,YAAY;YACVC,MAAMH;QACR;QAEAG,MAAMT,KAAKU,MAAM,CACfV,KAAKW,gBAAgB,CAAC;YACpBN;YACA,GAAGD,KAAK;QACV,IACA;YACEE;QACF;IAEJ;AACF,EAAE"}

package/lib/components/DrawerBody/DrawerBody.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useDrawerBody_unstable } from './useDrawerBody';
 import { renderDrawerBody_unstable } from './renderDrawerBody';
 import { useDrawerBodyStyles_unstable } from './useDrawerBodyStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * DrawerBody provides with a container for the main content of a Drawer.
  */ export const DrawerBody = /*#__PURE__*/ React.forwardRef((props, ref)=>{

package/lib/components/DrawerBody/DrawerBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DrawerBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDrawerBody_unstable } from './useDrawerBody';\nimport { renderDrawerBody_unstable } from './renderDrawerBody';\nimport { useDrawerBodyStyles_unstable } from './useDrawerBodyStyles.styles';\nimport type { DrawerBodyProps } from './DrawerBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * DrawerBody provides with a container for the main content of a Drawer.\n */\nexport const DrawerBody: ForwardRefComponent<DrawerBodyProps> = React.forwardRef((props, ref) => {\n  const state = useDrawerBody_unstable(props, ref);\n\n  useDrawerBodyStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerBodyStyles_unstable')(state);\n\n  return renderDrawerBody_unstable(state);\n});\n\nDrawerBody.displayName = 'DrawerBody';\n"],"names":["React","useDrawerBody_unstable","renderDrawerBody_unstable","useDrawerBodyStyles_unstable","useCustomStyleHook_unstable","DrawerBody","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC/F,MAAMC,QAAQR,uBAAuBM,OAAOC;IAE5CL,6BAA6BM;IAC7BL,4BAA4B,gCAAgCK;IAE5D,OAAOP,0BAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}
+{"version":3,"sources":["DrawerBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useDrawerBody_unstable } from './useDrawerBody';\nimport { renderDrawerBody_unstable } from './renderDrawerBody';\nimport { useDrawerBodyStyles_unstable } from './useDrawerBodyStyles.styles';\nimport type { DrawerBodyProps } from './DrawerBody.types';\n\n/**\n * DrawerBody provides with a container for the main content of a Drawer.\n */\nexport const DrawerBody: ForwardRefComponent<DrawerBodyProps> = React.forwardRef((props, ref) => {\n  const state = useDrawerBody_unstable(props, ref);\n\n  useDrawerBodyStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerBodyStyles_unstable')(state);\n\n  return renderDrawerBody_unstable(state);\n});\n\nDrawerBody.displayName = 'DrawerBody';\n"],"names":["React","useCustomStyleHook_unstable","useDrawerBody_unstable","renderDrawerBody_unstable","useDrawerBodyStyles_unstable","DrawerBody","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQP,uBAAuBK,OAAOC;IAE5CJ,6BAA6BK;IAC7BR,4BAA4B,gCAAgCQ;IAE5D,OAAON,0BAA0BM;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

package/lib/components/DrawerBody/renderDrawerBody.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of DrawerBody
  */ export const renderDrawerBody_unstable = (state)=>{
-    const { slots , slotProps  } = getSlots(state);
-    return /*#__PURE__*/ React.createElement(slots.root, slotProps.root);
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
 };

package/lib/components/DrawerBody/renderDrawerBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DrawerBodyState, DrawerBodySlots } from './DrawerBody.types';\n\n/**\n * Render the final JSX of DrawerBody\n */\nexport const renderDrawerBody_unstable = (state: DrawerBodyState) => {\n  const { slots, slotProps } = getSlots<DrawerBodySlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"names":["React","getSlots","renderDrawerBody_unstable","state","slots","slotProps","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,QAAQ,4BAA4B;AAGrD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,QAA2B;IACnE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,SAA0BE;IAEvD,qBAAO,oBAACC,MAAME,IAAI,EAAKD,UAAUC,IAAI;AACvC,EAAE"}
+{"version":3,"sources":["renderDrawerBody.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { DrawerBodySlots, DrawerBodyState } from './DrawerBody.types';\n\n/**\n * Render the final JSX of DrawerBody\n */\nexport const renderDrawerBody_unstable = (state: DrawerBodyState) => {\n  assertSlots<DrawerBodySlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderDrawerBody_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAE7B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/DrawerBody/useDrawerBody.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render DrawerBody.
  *
@@ -13,9 +13,14 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
         components: {
             root: 'div'
         },
-        root: getNativeElementProps('div', {
-            ref,
+        root: slot.always(getIntrinsicElementProps('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: ref,
             ...props
+        }), {
+            elementType: 'div'
         })
     };
 };

package/lib/components/DrawerBody/useDrawerBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\n\n/**\n * Create the state required to render DrawerBody.\n *\n * The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,\n * before being passed to renderDrawerBody_unstable.\n *\n * @param props - props from this instance of DrawerBody\n * @param ref - reference to root HTMLElement of DrawerBody\n */\nexport const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HTMLElement>): DrawerBodyState => {\n  return {\n    components: {\n      root: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","useDrawerBody_unstable","props","ref","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAGlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC,MAAiD;IAC9G,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,sBAAsB,OAAO;YACjCG;YACA,GAAGD,KAAK;QACV;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawerBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\n\n/**\n * Create the state required to render DrawerBody.\n *\n * The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,\n * before being passed to renderDrawerBody_unstable.\n *\n * @param props - props from this instance of DrawerBody\n * @param ref - reference to root HTMLElement of DrawerBody\n */\nexport const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HTMLElement>): DrawerBodyState => {\n  return {\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDrawerBody_unstable","props","ref","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAI3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,KAAKM,MAAM,CACfP,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FI,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/DrawerBody/useDrawerBodyStyles.styles.js

@@ -1,4 +1,4 @@
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __resetStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const drawerBodyClassNames = {
   root: 'fui-DrawerBody'
@@ -6,40 +6,13 @@ export const drawerBodyClassNames = {
 /**
  * Styles for the root slot
  */
-const useStyles = /*#__PURE__*/__styles({
-  root: {
-    B6of3ja: "fkrn0sh",
-    t21cq0: ["f11qmguv", "f1tyq0we"],
-    jrapky: "fmxx68s",
-    Frg6f3: ["f1tyq0we", "f11qmguv"],
-    z8tnut: "f1sl3k7w",
-    z189sj: ["fnbas0t", "f1mswpri"],
-    Byoj8tv: "f1brlhvm",
-    uwmqm3: ["f1mswpri", "fnbas0t"],
-    B68tc82: "f1oy3dpc",
-    Bmxbyg5: "f5zp4f",
-    Bh6795r: "fqerorx",
-    Bnnss6s: "f1neuvcm",
-    xawz: "f1pztt34",
-    qb2dma: "f1ub7u0d",
-    Bcmaq0h: "f1igvcbx",
-    B676am1: "f1fofb6i",
-    e5kdtc: "fo6xqva",
-    De3pzq: "fxugw4r",
-    Bkjc3bi: "fcre6b6",
-    Bgh53k4: "f1besv5s",
-    Bcx2cba: "f1pqm9hp",
-    gonrqn: "f2c46kh"
-  }
-}, {
-  d: [".fkrn0sh{margin-top:-1px;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".fmxx68s{margin-bottom:-1px;}", ".f1sl3k7w{padding-top:1px;}", ".fnbas0t{padding-right:var(--spacingHorizontalXXL);}", ".f1mswpri{padding-left:var(--spacingHorizontalXXL);}", ".f1brlhvm{padding-bottom:1px;}", ".f1oy3dpc{overflow-x:auto;}", ".f5zp4f{overflow-y:auto;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".f1pztt34{-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}", ".f1ub7u0d{-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;}", ".f1igvcbx{background-image:linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralStroke1), var(--colorNeutralBackground1)),linear-gradient(to bottom, var(--colorNeutralStroke1), var(--colorNeutralBackground1));}", ".f1fofb6i{-webkit-background-position:bottom center,top center,bottom center,top center;background-position:bottom center,top center,bottom center,top center;}", ".fo6xqva{background-repeat:no-repeat;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fcre6b6{-webkit-background-size:100% 2px,100% 2px,100% 1px,100% 1px;background-size:100% 2px,100% 2px,100% 1px,100% 1px;}", ".f1besv5s{background-attachment:local,local,scroll,scroll;}", ".f1pqm9hp:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}", ".f2c46kh:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}"]
-});
+const useStyles = /*#__PURE__*/__resetStyles("r10z3gsy", "r1ppc5ap", [".r10z3gsy{margin-top:-1px;margin-right:0;margin-bottom:-1px;margin-left:0;padding-top:1px;padding-right:var(--spacingHorizontalXXL);padding-bottom:1px;padding-left:var(--spacingHorizontalXXL);overflow-x:auto;overflow-y:auto;flex-grow:1;flex-shrink:1;flex-basis:0;align-self:stretch;background-image:linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralStroke1), var(--colorNeutralBackground1)),linear-gradient(to bottom, var(--colorNeutralStroke1), var(--colorNeutralBackground1));-webkit-background-position:bottom center,top center,bottom center,top center;background-position:bottom center,top center,bottom center,top center;background-repeat:no-repeat;background-color:var(--colorNeutralBackground1);background-size:100% 2px,100% 2px,100% 1px,100% 1px;background-attachment:local,local,scroll,scroll;}", ".r10z3gsy:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}", ".r10z3gsy:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}", ".r1ppc5ap{margin-top:-1px;margin-left:0;margin-bottom:-1px;margin-right:0;padding-top:1px;padding-left:var(--spacingHorizontalXXL);padding-bottom:1px;padding-right:var(--spacingHorizontalXXL);overflow-x:auto;overflow-y:auto;flex-grow:1;flex-shrink:1;flex-basis:0;align-self:stretch;background-image:linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralStroke1), var(--colorNeutralBackground1)),linear-gradient(to bottom, var(--colorNeutralStroke1), var(--colorNeutralBackground1));-webkit-background-position:bottom center,top center,bottom center,top center;background-position:bottom center,top center,bottom center,top center;background-repeat:no-repeat;background-color:var(--colorNeutralBackground1);background-size:100% 2px,100% 2px,100% 1px,100% 1px;background-attachment:local,local,scroll,scroll;}", ".r1ppc5ap:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}", ".r1ppc5ap:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}"]);
 /**
  * Apply styling to the DrawerBody slots based on the state
  */
 export const useDrawerBodyStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(drawerBodyClassNames.root, styles.root, state.root.className);
+  state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);
   return state;
 };
 //# sourceMappingURL=useDrawerBodyStyles.styles.js.map

package/lib/components/DrawerBody/useDrawerBodyStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","drawerBodyClassNames","root","useStyles","B6of3ja","t21cq0","jrapky","Frg6f3","z8tnut","z189sj","Byoj8tv","uwmqm3","B68tc82","Bmxbyg5","Bh6795r","Bnnss6s","xawz","qb2dma","Bcmaq0h","B676am1","e5kdtc","De3pzq","Bkjc3bi","Bgh53k4","Bcx2cba","gonrqn","d","useDrawerBodyStyles_unstable","state","styles","className"],"sources":["useDrawerBodyStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerBodyClassNames = {\n    root: 'fui-DrawerBody'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        ...shorthands.margin('-1px', 0),\n        ...shorthands.padding('1px', tokens.spacingHorizontalXXL),\n        ...shorthands.overflow('auto'),\n        ...shorthands.flex(1),\n        alignSelf: 'stretch',\n        // A \"good hack\" to display top and bottom borders based on the scroll position\n        backgroundImage: `linear-gradient(to top, ${tokens.colorNeutralBackground1}, ${tokens.colorNeutralBackground1}),\n    linear-gradient(to top, ${tokens.colorNeutralBackground1}, ${tokens.colorNeutralBackground1}),\n    linear-gradient(to top, ${tokens.colorNeutralStroke1}, ${tokens.colorNeutralBackground1}),\n    linear-gradient(to bottom, ${tokens.colorNeutralStroke1}, ${tokens.colorNeutralBackground1})`,\n        'background-position': 'bottom center, top center, bottom center, top center',\n        backgroundRepeat: 'no-repeat',\n        backgroundColor: tokens.colorNeutralBackground1,\n        backgroundSize: '100% 2px, 100% 2px, 100% 1px, 100% 1px',\n        backgroundAttachment: 'local, local, scroll, scroll',\n        ':last-child': {\n            paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`\n        },\n        ':first-child': {\n            paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`\n        }\n    }\n});\n/**\n * Apply styling to the DrawerBody slots based on the state\n */ export const useDrawerBodyStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(drawerBodyClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAwBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,MAAM,GAAG1B,SAAS,CAAC,CAAC;EAC1ByB,KAAK,CAAC1B,IAAI,CAAC4B,SAAS,GAAGhC,YAAY,CAACG,oBAAoB,CAACC,IAAI,EAAE2B,MAAM,CAAC3B,IAAI,EAAE0B,KAAK,CAAC1B,IAAI,CAAC4B,SAAS,CAAC;EACjG,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__resetStyles","mergeClasses","shorthands","tokens","drawerBodyClassNames","root","useStyles","useDrawerBodyStyles_unstable","state","styles","className"],"sources":["useDrawerBodyStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerBodyClassNames = {\n    root: 'fui-DrawerBody'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n    ...shorthands.margin('-1px', 0),\n    ...shorthands.padding('1px', tokens.spacingHorizontalXXL),\n    ...shorthands.overflow('auto'),\n    ...shorthands.flex(1),\n    alignSelf: 'stretch',\n    // A \"good hack\" to display top and bottom borders based on the scroll position\n    backgroundImage: `linear-gradient(to top, ${tokens.colorNeutralBackground1}, ${tokens.colorNeutralBackground1}),\n    linear-gradient(to top, ${tokens.colorNeutralBackground1}, ${tokens.colorNeutralBackground1}),\n    linear-gradient(to top, ${tokens.colorNeutralStroke1}, ${tokens.colorNeutralBackground1}),\n    linear-gradient(to bottom, ${tokens.colorNeutralStroke1}, ${tokens.colorNeutralBackground1})`,\n    'background-position': 'bottom center, top center, bottom center, top center',\n    backgroundRepeat: 'no-repeat',\n    backgroundColor: tokens.colorNeutralBackground1,\n    backgroundSize: '100% 2px, 100% 2px, 100% 1px, 100% 1px',\n    backgroundAttachment: 'local, local, scroll, scroll',\n    ':last-child': {\n        paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`\n    },\n    ':first-child': {\n        paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`\n    }\n});\n/**\n * Apply styling to the DrawerBody slots based on the state\n */ export const useDrawerBodyStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,aAAA,uvEAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMO,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGT,YAAY,CAACG,oBAAoB,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC5F,OAAOF,KAAK;AAChB,CAAC"}

package/lib/components/DrawerFooter/DrawerFooter.js

@@ -1,12 +1,14 @@
 import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useDrawerFooter_unstable } from './useDrawerFooter';
 import { renderDrawerFooter_unstable } from './renderDrawerFooter';
 import { useDrawerFooterStyles_unstable } from './useDrawerFooterStyles.styles';
 /**
- * DrawerFooter component - TODO: add more docs
+ * DrawerFooter provides a structured footer for the drawer component.
  */ export const DrawerFooter = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useDrawerFooter_unstable(props, ref);
     useDrawerFooterStyles_unstable(state);
+    useCustomStyleHook_unstable('useDrawerFooterStyles_unstable')(state);
     return renderDrawerFooter_unstable(state);
 });
 DrawerFooter.displayName = 'DrawerFooter';