@fluentui/react-drawer 9.0.0-beta.36 → 9.0.0-beta.38

package/CHANGELOG.json

@@ -2,7 +2,91 @@
   "name": "@fluentui/react-drawer",
   "entries": [
     {
-      "date": "Wed, 18 Oct 2023 17:47:37 GMT",
+      "date": "Sat, 28 Oct 2023 23:32:02 GMT",
+      "tag": "@fluentui/react-drawer_v9.0.0-beta.38",
+      "version": "9.0.0-beta.38",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "marcosvmmoura@gmail.com",
+            "package": "@fluentui/react-drawer",
+            "commit": "601e93272fe2b51515c9706d1d1ed03b4f9fc765",
+            "comment": "fix: regression with mountNode prop not available after refactor"
+          },
+          {
+            "author": "marcosvmmoura@gmail.com",
+            "package": "@fluentui/react-drawer",
+            "commit": "4611e31dd38799b5e7bd2faa3ff735398e176b03",
+            "comment": "feat: use useMotionClassNames to create drawer motion styles"
+          },
+          {
+            "author": "marcosvmmoura@gmail.com",
+            "package": "@fluentui/react-drawer",
+            "commit": "8381d2c4c7d389b2199398212beccbe1a899d4ea",
+            "comment": "BREAKING CHANGE: rename main DrawerOverlay/DrawerInline components"
+          },
+          {
+            "author": "marcosvmmoura@gmail.com",
+            "package": "@fluentui/react-drawer",
+            "commit": "b77e96763ca6d1ce4ef1ee8482977f908538fbd1",
+            "comment": "fix: improve high contrast mode"
+          },
+          {
+            "author": "marcosvmmoura@gmail.com",
+            "package": "@fluentui/react-drawer",
+            "commit": "d936b79dd82bffe98192bee64b5e0db28905e7df",
+            "comment": "docs: add example on how to implement multiple levels inside one drawer"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-drawer",
+            "comment": "Bump @fluentui/react-dialog to v9.8.1",
+            "commit": "555b0fae3ec7f052e765557ae243c58000514f92"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-drawer",
+            "comment": "Bump @fluentui/react-motion-preview to v0.4.0",
+            "commit": "555b0fae3ec7f052e765557ae243c58000514f92"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-drawer",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.11.0",
+            "commit": "555b0fae3ec7f052e765557ae243c58000514f92"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-drawer",
+            "comment": "Bump @fluentui/react-tabster to v9.14.2",
+            "commit": "555b0fae3ec7f052e765557ae243c58000514f92"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 23 Oct 2023 09:51:57 GMT",
+      "tag": "@fluentui/react-drawer_v9.0.0-beta.37",
+      "version": "9.0.0-beta.37",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-drawer",
+            "comment": "Bump @fluentui/react-dialog to v9.8.0",
+            "commit": "e4ef1febe8a185dddc10f8936944d177d50bc396"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-drawer",
+            "comment": "Bump @fluentui/react-tabster to v9.14.1",
+            "commit": "e4ef1febe8a185dddc10f8936944d177d50bc396"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 18 Oct 2023 17:54:08 GMT",
       "tag": "@fluentui/react-drawer_v9.0.0-beta.36",
       "version": "9.0.0-beta.36",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,39 @@
 # Change Log - @fluentui/react-drawer
 
-This log was last generated on Wed, 18 Oct 2023 17:47:37 GMT and should not be manually modified.
+This log was last generated on Sat, 28 Oct 2023 23:32:02 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.38](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.0-beta.38)
+
+Sat, 28 Oct 2023 23:32:02 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.0-beta.37..@fluentui/react-drawer_v9.0.0-beta.38)
+
+### Changes
+
+- fix: regression with mountNode prop not available after refactor ([PR #29524](https://github.com/microsoft/fluentui/pull/29524) by marcosvmmoura@gmail.com)
+- feat: use useMotionClassNames to create drawer motion styles ([PR #29662](https://github.com/microsoft/fluentui/pull/29662) by marcosvmmoura@gmail.com)
+- BREAKING CHANGE: rename main DrawerOverlay/DrawerInline components ([PR #29523](https://github.com/microsoft/fluentui/pull/29523) by marcosvmmoura@gmail.com)
+- fix: improve high contrast mode ([PR #29627](https://github.com/microsoft/fluentui/pull/29627) by marcosvmmoura@gmail.com)
+- docs: add example on how to implement multiple levels inside one drawer ([PR #29665](https://github.com/microsoft/fluentui/pull/29665) by marcosvmmoura@gmail.com)
+- Bump @fluentui/react-dialog to v9.8.1 ([commit](https://github.com/microsoft/fluentui/commit/555b0fae3ec7f052e765557ae243c58000514f92) by beachball)
+- Bump @fluentui/react-motion-preview to v0.4.0 ([commit](https://github.com/microsoft/fluentui/commit/555b0fae3ec7f052e765557ae243c58000514f92) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.11.0 ([commit](https://github.com/microsoft/fluentui/commit/555b0fae3ec7f052e765557ae243c58000514f92) by beachball)
+- Bump @fluentui/react-tabster to v9.14.2 ([commit](https://github.com/microsoft/fluentui/commit/555b0fae3ec7f052e765557ae243c58000514f92) by beachball)
+
+## [9.0.0-beta.37](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.0-beta.37)
+
+Mon, 23 Oct 2023 09:51:57 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.0-beta.36..@fluentui/react-drawer_v9.0.0-beta.37)
+
+### Changes
+
+- Bump @fluentui/react-dialog to v9.8.0 ([commit](https://github.com/microsoft/fluentui/commit/e4ef1febe8a185dddc10f8936944d177d50bc396) by beachball)
+- Bump @fluentui/react-tabster to v9.14.1 ([commit](https://github.com/microsoft/fluentui/commit/e4ef1febe8a185dddc10f8936944d177d50bc396) by beachball)
+
 ## [9.0.0-beta.36](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.0-beta.36)
 
-Wed, 18 Oct 2023 17:47:37 GMT 
+Wed, 18 Oct 2023 17:54:08 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.0-beta.35..@fluentui/react-drawer_v9.0.0-beta.36)
 
 ### Changes

package/README.md

@@ -12,8 +12,9 @@ To import React Drawer components:
 
 ```tsx
 import {
-  DrawerOverlay,
-  DrawerInline,
+  Drawer,
+  OverlayDrawer,
+  InlineDrawer,
   DrawerHeader,
   DrawerHeaderTitle,
   DrawerHeaderNavigation,

package/dist/index.d.ts

@@ -164,17 +164,44 @@ export declare type DrawerHeaderTitleSlots = {
 export declare type DrawerHeaderTitleState = ComponentState<DrawerHeaderTitleSlots>;
 
 /**
- * DrawerInline is often used for navigation that is not dismissible. 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.
      *
@@ -183,26 +210,26 @@ 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 = Required<ComponentState<DrawerInlineSlots> & DrawerBaseState & Pick<DrawerInlineProps, 'separator'>>;
+export declare type InlineDrawerState = Required<ComponentState<InlineDrawerSlots> & DrawerBaseState & Pick<InlineDrawerProps, 'separator'>>;
 
 /**
- * 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<DrawerOverlaySurfaceSlots>;
+export declare const overlayDrawerClassNames: SlotClassNames<OverlayDrawerSurfaceSlots>;
 
 /**
- * DrawerOverlay internal slots for when using with composition API
+ * OverlayDrawer internal slots for when using with composition API
  */
-declare type DrawerOverlayInternalSlots = DrawerOverlaySlots & {
+declare type OverlayDrawerInternalSlots = OverlayDrawerSlots & {
     /**
      * Slot for the dialog component that wraps the drawer.
      */
@@ -210,66 +237,34 @@ declare type DrawerOverlayInternalSlots = DrawerOverlaySlots & {
 };
 
 /**
- * DrawerOverlay Props
+ * OverlayDrawer Props
  */
-export declare type DrawerOverlayProps = ComponentProps<DrawerOverlaySlots> & Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus' | 'defaultOpen'> & DrawerBaseProps;
+export declare type OverlayDrawerProps = ComponentProps<OverlayDrawerSlots> & Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus' | 'defaultOpen'> & DrawerBaseProps;
 
 /**
- * DrawerOverlay slots
+ * OverlayDrawer slots
  */
-export declare type DrawerOverlaySlots = {
+export declare type OverlayDrawerSlots = {
     /**
      * Slot for the root element.
      */
-    root: Slot<DrawerOverlaySurfaceProps>;
+    root: Slot<OverlayDrawerSurfaceProps>;
 };
 
 /**
- * State used in rendering DrawerOverlay
- */
-export declare type DrawerOverlayState = Omit<ComponentState<DrawerOverlayInternalSlots>, 'backdrop'> & Required<DrawerBaseState & {
-    /**
-     * Motion state for the drawer backdrop.
-     */
-    backdropMotion: MotionState<HTMLDivElement>;
-}>;
-
-/**
- * DrawerOverlaySurface Props
+ * State used in rendering OverlayDrawer
  */
-declare type DrawerOverlaySurfaceProps = ComponentProps<DrawerOverlaySurfaceSlots>;
+export declare type OverlayDrawerState = Omit<ComponentState<OverlayDrawerInternalSlots>, 'backdrop'> & Required<DrawerBaseState>;
 
 /**
- * DrawerOverlaySurface slots
+ * OverlayDrawerSurface Props
  */
-declare type DrawerOverlaySurfaceSlots = DialogSurfaceSlots;
+declare type OverlayDrawerSurfaceProps = ComponentProps<OverlayDrawerSurfaceSlots>;
 
 /**
- * Drawer Props
+ * OverlayDrawerSurface slots
  */
-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<DrawerOverlayProps | DrawerInlineProps>;
-};
-
-/**
- * State used in rendering Drawer
- */
-export declare type DrawerState = ComponentState<DrawerSlots>;
+declare type OverlayDrawerSurfaceSlots = DialogSurfaceSlots;
 
 /**
  * Render the final JSX of Drawer
@@ -302,14 +297,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 | null;
+export declare const renderOverlayDrawer_unstable: (state: OverlayDrawerState) => JSX.Element | null;
 
 /**
  * Create the state required to render Drawer.
@@ -403,35 +398,35 @@ export declare const useDrawerHeaderTitle_unstable: (props: DrawerHeaderTitlePro
 export declare const useDrawerHeaderTitleStyles_unstable: (state: DrawerHeaderTitleState) => DrawerHeaderTitleState;
 
 /**
- * Create the state required to render DrawerInline.
+ * 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<HTMLDivElement>) => 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 HTMLDivElement 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<HTMLDivElement>) => 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.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Drawer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport type { DrawerOverlayProps } from '../DrawerOverlay';\nimport type { DrawerInlineProps } from '../DrawerInline';\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<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"}
+{"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/useDrawer.js

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

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

@@ -1 +1 @@
-{"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 { DrawerOverlay } from '../DrawerOverlay';\nimport { DrawerInline } from '../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 elementType = props.type === 'inline' ? DrawerInline : DrawerOverlay;\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","DrawerOverlay","DrawerInline","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"}
+{"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/DrawerFooter/useDrawerFooterStyles.styles.js

@@ -6,7 +6,7 @@ export const drawerFooterClassNames = {
 /**
  * Styles for the root slot
  */
-const useStyles = /*#__PURE__*/__resetStyles("rli1cm2", "r1xlf3nx", [".rli1cm2{padding-top:var(--spacingVerticalL);padding-right:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalXXL);padding-left:var(--spacingHorizontalXXL);display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);}", ".r1xlf3nx{padding-top:var(--spacingVerticalL);padding-left:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalXXL);padding-right:var(--spacingHorizontalXXL);display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);}"]);
+const useStyles = /*#__PURE__*/__resetStyles("r1nwgn83", "r4bpumq", [".r1nwgn83{padding-top:var(--spacingVerticalL);padding-right:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalXXL);padding-left:var(--spacingHorizontalXXL);width:100%;max-width:100%;display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);box-sizing:border-box;}", ".r4bpumq{padding-top:var(--spacingVerticalL);padding-left:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalXXL);padding-right:var(--spacingHorizontalXXL);width:100%;max-width:100%;display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);box-sizing:border-box;}"]);
 /**
  * Apply styling to the DrawerFooter slots based on the state
  */

package/lib/components/DrawerFooter/useDrawerFooterStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","mergeClasses","shorthands","tokens","drawerFooterClassNames","root","useStyles","useDrawerFooterStyles_unstable","state","styles","className"],"sources":["useDrawerFooterStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerFooterClassNames = {\n    root: 'fui-DrawerFooter'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n    ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalXXL, tokens.spacingVerticalXXL),\n    display: 'flex',\n    justifyContent: 'flex-start',\n    alignItems: 'center',\n    columnGap: tokens.spacingHorizontalS\n});\n/**\n * Apply styling to the DrawerFooter slots based on the state\n */ export const useDrawerFooterStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(drawerFooterClassNames.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,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,aAAA,qjBAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMO,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGT,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__resetStyles","mergeClasses","shorthands","tokens","drawerFooterClassNames","root","useStyles","useDrawerFooterStyles_unstable","state","styles","className"],"sources":["useDrawerFooterStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerFooterClassNames = {\n    root: 'fui-DrawerFooter'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n    ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalXXL, tokens.spacingVerticalXXL),\n    width: '100%',\n    maxWidth: '100%',\n    display: 'flex',\n    justifyContent: 'flex-start',\n    alignItems: 'center',\n    columnGap: tokens.spacingHorizontalS,\n    boxSizing: 'border-box'\n});\n/**\n * Apply styling to the DrawerFooter slots based on the state\n */ export const useDrawerFooterStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(drawerFooterClassNames.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,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,aAAA,qpBASrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMO,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGT,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC"}

package/lib/components/DrawerHeader/useDrawerHeaderStyles.styles.js

@@ -6,7 +6,7 @@ export const drawerHeaderClassNames = {
 /**
  * Styles for the root slot
  */
-const useStyles = /*#__PURE__*/__resetStyles("r10tpwon", "r53n3g6", [".r10tpwon{padding-top:var(--spacingVerticalXXL);padding-right:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalS);padding-left:var(--spacingHorizontalXXL);column-gap:var(--spacingHorizontalS);row-gap:var(--spacingHorizontalS);align-self:stretch;display:flex;flex-direction:column;}", ".r53n3g6{padding-top:var(--spacingVerticalXXL);padding-left:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalS);padding-right:var(--spacingHorizontalXXL);column-gap:var(--spacingHorizontalS);row-gap:var(--spacingHorizontalS);align-self:stretch;display:flex;flex-direction:column;}"]);
+const useStyles = /*#__PURE__*/__resetStyles("rh4hr5f", "r116c7xc", [".rh4hr5f{padding-top:var(--spacingVerticalXXL);padding-right:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalS);padding-left:var(--spacingHorizontalXXL);column-gap:var(--spacingHorizontalS);row-gap:var(--spacingHorizontalS);width:100%;max-width:100%;align-self:stretch;display:flex;flex-direction:column;box-sizing:border-box;}", ".r116c7xc{padding-top:var(--spacingVerticalXXL);padding-left:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalS);padding-right:var(--spacingHorizontalXXL);column-gap:var(--spacingHorizontalS);row-gap:var(--spacingHorizontalS);width:100%;max-width:100%;align-self:stretch;display:flex;flex-direction:column;box-sizing:border-box;}"]);
 /**
  * Apply styling to the DrawerHeader slots based on the state
  */

package/lib/components/DrawerHeader/useDrawerHeaderStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","mergeClasses","shorthands","tokens","drawerHeaderClassNames","root","useStyles","useDrawerHeaderStyles_unstable","state","styles","className"],"sources":["useDrawerHeaderStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderClassNames = {\n    root: 'fui-DrawerHeader'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n    ...shorthands.padding(tokens.spacingVerticalXXL, tokens.spacingHorizontalXXL, tokens.spacingVerticalS),\n    ...shorthands.gap(tokens.spacingHorizontalS),\n    alignSelf: 'stretch',\n    display: 'flex',\n    flexDirection: 'column'\n});\n/**\n * Apply styling to the DrawerHeader slots based on the state\n */ export const useDrawerHeaderStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(drawerHeaderClassNames.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,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,aAAA,+mBAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMO,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGT,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__resetStyles","mergeClasses","shorthands","tokens","drawerHeaderClassNames","root","useStyles","useDrawerHeaderStyles_unstable","state","styles","className"],"sources":["useDrawerHeaderStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderClassNames = {\n    root: 'fui-DrawerHeader'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n    ...shorthands.padding(tokens.spacingVerticalXXL, tokens.spacingHorizontalXXL, tokens.spacingVerticalS),\n    ...shorthands.gap(tokens.spacingHorizontalS),\n    width: '100%',\n    maxWidth: '100%',\n    alignSelf: 'stretch',\n    display: 'flex',\n    flexDirection: 'column',\n    boxSizing: 'border-box'\n});\n/**\n * Apply styling to the DrawerHeader slots based on the state\n */ export const useDrawerHeaderStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(drawerHeaderClassNames.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,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,aAAA,+sBASrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMO,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGT,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC"}

package/lib/components/InlineDrawer/InlineDrawer.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useInlineDrawer_unstable } from './useInlineDrawer';
+import { renderInlineDrawer_unstable } from './renderInlineDrawer';
+import { useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';
+/**
+ * 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 const InlineDrawer = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useInlineDrawer_unstable(props, ref);
+    useInlineDrawerStyles_unstable(state);
+    useCustomStyleHook_unstable('useDrawerInlineStyles_unstable')(state);
+    useCustomStyleHook_unstable('useInlineDrawerStyles_unstable')(state);
+    return renderInlineDrawer_unstable(state);
+});
+InlineDrawer.displayName = 'InlineDrawer';

package/lib/components/InlineDrawer/InlineDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["InlineDrawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport type { InlineDrawerProps } from './InlineDrawer.types';\nimport { useInlineDrawer_unstable } from './useInlineDrawer';\nimport { renderInlineDrawer_unstable } from './renderInlineDrawer';\nimport { useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';\n\n/**\n * InlineDrawer is often used for navigation that is not dismissible. As it is on the same level as\n * the main surface, users can still interact with other UI elements.\n */\nexport const InlineDrawer: ForwardRefComponent<InlineDrawerProps> = React.forwardRef((props, ref) => {\n  const state = useInlineDrawer_unstable(props, ref);\n\n  useInlineDrawerStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerInlineStyles_unstable')(state);\n  useCustomStyleHook_unstable('useInlineDrawerStyles_unstable')(state);\n\n  return renderInlineDrawer_unstable(state);\n});\n\nInlineDrawer.displayName = 'InlineDrawer';\n"],"names":["React","useCustomStyleHook_unstable","useInlineDrawer_unstable","renderInlineDrawer_unstable","useInlineDrawerStyles_unstable","InlineDrawer","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAG9E,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAEhF;;;CAGC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CJ,+BAA+BK;IAC/BR,4BAA4B,kCAAkCQ;IAC9DR,4BAA4B,kCAAkCQ;IAE9D,OAAON,4BAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["InlineDrawer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\n\nexport type InlineDrawerSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * InlineDrawer Props\n */\nexport type InlineDrawerProps = ComponentProps<InlineDrawerSlots> &\n  DrawerBaseProps & {\n    /**\n     * Whether the drawer has a separator line.\n     *\n     * @default false\n     */\n    separator?: boolean;\n  };\n\n/**\n * State used in rendering InlineDrawer\n */\nexport type InlineDrawerState = Required<\n  ComponentState<InlineDrawerSlots> & DrawerBaseState & Pick<InlineDrawerProps, 'separator'>\n>;\n"],"names":[],"mappings":"AAAA,WA0BE"}

package/lib/components/InlineDrawer/index.js

@@ -0,0 +1,5 @@
+export * from './InlineDrawer';
+export * from './InlineDrawer.types';
+export * from './renderInlineDrawer';
+export * from './useInlineDrawer';
+export * from './useInlineDrawerStyles.styles';

package/lib/components/InlineDrawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './InlineDrawer';\nexport * from './InlineDrawer.types';\nexport * from './renderInlineDrawer';\nexport * from './useInlineDrawer';\nexport * from './useInlineDrawerStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,iBAAiB;AAC/B,cAAc,uBAAuB;AACrC,cAAc,uBAAuB;AACrC,cAAc,oBAAoB;AAClC,cAAc,iCAAiC"}

package/lib/components/{DrawerInline/renderDrawerInline.js → InlineDrawer/renderInlineDrawer.js}

@@ -1,8 +1,8 @@
   import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
 /**
- * Render the final JSX of DrawerInline
- */ export const renderDrawerInline_unstable = (state)=>{
+ * Render the final JSX of InlineDrawer
+ */ export const renderInlineDrawer_unstable = (state)=>{
     if (!state.motion.canRender) {
         return null;
     }

package/lib/components/InlineDrawer/renderInlineDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderInlineDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { InlineDrawerState, InlineDrawerSlots } from './InlineDrawer.types';\n\n/**\n * Render the final JSX of InlineDrawer\n */\nexport const renderInlineDrawer_unstable = (state: InlineDrawerState) => {\n  if (!state.motion.canRender) {\n    return null;\n  }\n\n  assertSlots<InlineDrawerSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderInlineDrawer_unstable","state","motion","canRender","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C,IAAI,CAACA,MAAMC,MAAM,CAACC,SAAS,EAAE;QAC3B,OAAO;IACT;IAEAJ,YAA+BE;IAE/B,qBAAO,KAACA,MAAMG,IAAI;AACpB,EAAE"}

package/lib/components/{DrawerInline/useDrawerInline.js → InlineDrawer/useInlineDrawer.js}

@@ -3,14 +3,14 @@ import { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-u
 import { useMotion } from '@fluentui/react-motion-preview';
 import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
 /**
- * Create the state required to render DrawerInline.
+ * 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
- */ export const useDrawerInline_unstable = (props, ref)=>{
+ * @param props - props from this instance of InlineDrawer
+ * @param ref - reference to root HTMLElement of InlineDrawer
+ */ export const useInlineDrawer_unstable = (props, ref)=>{
     const { size, position, open } = useDrawerDefaultProps(props);
     const { separator = false } = props;
     const motion = useMotion(open);

package/lib/components/{DrawerInline/useDrawerInline.js.map → InlineDrawer/useInlineDrawer.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerInline.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useMotion } from '@fluentui/react-motion-preview';\n\nimport type { DrawerInlineProps, DrawerInlineState } from './DrawerInline.types';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\n\n/**\n * Create the state required to render DrawerInline.\n *\n * The returned state can be modified with hooks such as useDrawerInlineStyles_unstable,\n * before being passed to renderDrawerInline_unstable.\n *\n * @param props - props from this instance of DrawerInline\n * @param ref - reference to root HTMLElement of DrawerInline\n */\nexport const useDrawerInline_unstable = (\n  props: DrawerInlineProps,\n  ref: React.Ref<HTMLDivElement>,\n): DrawerInlineState => {\n  const { size, position, open } = useDrawerDefaultProps(props);\n  const { separator = false } = props;\n\n  const motion = useMotion<HTMLDivElement>(open);\n\n  return {\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ...props,\n        ref: useMergedRefs(ref, motion.ref),\n      }),\n      { elementType: 'div' },\n    ),\n\n    size,\n    position,\n    separator,\n    motion,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMergedRefs","useMotion","useDrawerDefaultProps","useDrawerInline_unstable","props","ref","size","position","open","separator","motion","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAC1F,SAASC,SAAS,QAAQ,iCAAiC;AAG3D,SAASC,qBAAqB,QAAQ,qCAAqC;AAE3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGN,sBAAsBE;IACvD,MAAM,EAAEK,YAAY,KAAK,EAAE,GAAGL;IAE9B,MAAMM,SAAST,UAA0BO;IAEzC,OAAO;QACLG,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMb,KAAKc,MAAM,CACff,yBAAyB,OAAO;YAC9B,GAAGM,KAAK;YACRC,KAAKL,cAAcK,KAAKK,OAAOL,GAAG;QACpC,IACA;YAAES,aAAa;QAAM;QAGvBR;QACAC;QACAE;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["useInlineDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useMotion } from '@fluentui/react-motion-preview';\n\nimport type { InlineDrawerProps, InlineDrawerState } from './InlineDrawer.types';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\n\n/**\n * Create the state required to render InlineDrawer.\n *\n * The returned state can be modified with hooks such as useInlineDrawerStyles_unstable,\n * before being passed to renderInlineDrawer_unstable.\n *\n * @param props - props from this instance of InlineDrawer\n * @param ref - reference to root HTMLElement of InlineDrawer\n */\nexport const useInlineDrawer_unstable = (\n  props: InlineDrawerProps,\n  ref: React.Ref<HTMLDivElement>,\n): InlineDrawerState => {\n  const { size, position, open } = useDrawerDefaultProps(props);\n  const { separator = false } = props;\n\n  const motion = useMotion<HTMLDivElement>(open);\n\n  return {\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ...props,\n        ref: useMergedRefs(ref, motion.ref),\n      }),\n      { elementType: 'div' },\n    ),\n\n    size,\n    position,\n    separator,\n    motion,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMergedRefs","useMotion","useDrawerDefaultProps","useInlineDrawer_unstable","props","ref","size","position","open","separator","motion","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAC1F,SAASC,SAAS,QAAQ,iCAAiC;AAG3D,SAASC,qBAAqB,QAAQ,qCAAqC;AAE3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGN,sBAAsBE;IACvD,MAAM,EAAEK,YAAY,KAAK,EAAE,GAAGL;IAE9B,MAAMM,SAAST,UAA0BO;IAEzC,OAAO;QACLG,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMb,KAAKc,MAAM,CACff,yBAAyB,OAAO;YAC9B,GAAGM,KAAK;YACRC,KAAKL,cAAcK,KAAKK,OAAOL,GAAG;QACpC,IACA;YAAES,aAAa;QAAM;QAGvBR;QACAC;QACAE;QACAC;IACF;AACF,EAAE"}