@fluentui/react-drawer 9.10.9 → 9.11.1

package/CHANGELOG.md

@@ -1,12 +1,41 @@
 # Change Log - @fluentui/react-drawer
 
-This log was last generated on Tue, 11 Nov 2025 19:13:30 GMT and should not be manually modified.
+This log was last generated on Wed, 17 Dec 2025 18:06:04 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.11.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.11.1)
+
+Wed, 17 Dec 2025 18:06:04 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.11.0..@fluentui/react-drawer_v9.11.1)
+
+### Patches
+
+- Bump @fluentui/react-dialog to v9.16.5 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.3.4 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
+- Bump @fluentui/react-motion to v9.11.5 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
+- Bump @fluentui/react-portal to v9.8.9 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.14.2 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
+- Bump @fluentui/react-tabster to v9.26.11 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
+- Bump @fluentui/react-utilities to v9.26.0 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
+
+## [9.11.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.11.0)
+
+Fri, 05 Dec 2025 22:38:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.10.9..@fluentui/react-drawer_v9.11.0)
+
+### Minor changes
+
+- feat: add support to keep Drawer mounted on clos ([PR #35212](https://github.com/microsoft/fluentui/pull/35212) by marcosvmmoura@gmail.com)
+- Bump @fluentui/react-dialog to v9.16.4 ([PR #35537](https://github.com/microsoft/fluentui/pull/35537) by beachball)
+
+### Patches
+
+- fix: use transition animation instead of margin ([PR #35523](https://github.com/microsoft/fluentui/pull/35523) by marcosvmmoura@gmail.com)
+
 ## [9.10.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.10.9)
 
-Tue, 11 Nov 2025 19:13:30 GMT 
+Tue, 11 Nov 2025 19:18:22 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.10.8..@fluentui/react-drawer_v9.10.9)
 
 ### Patches

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import type { DialogSurfaceProps } from '@fluentui/react-dialog';
 import type { DialogSurfaceSlots } from '@fluentui/react-dialog';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
+import type { PresenceDirection } from '@fluentui/react-motion';
 import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
 import { ProviderContextValue_unstable } from '@fluentui/react-shared-contexts';
 import * as React_2 from 'react';
@@ -42,6 +43,14 @@ declare type DrawerBaseProps = {
      * @default false
      */
     open?: boolean;
+    /**
+     * Decides whether the drawer should be removed from the DOM tree when it is closed.
+     * This can be useful when dealing with components that may contain state that should not
+     * be reset when the drawer is closed.
+     *
+     * @default true
+     */
+    unmountOnClose?: boolean;
 };
 
 declare type DrawerBaseState = Required<Pick<DrawerBaseProps, 'position' | 'size'>> & {
@@ -50,6 +59,7 @@ declare type DrawerBaseState = Required<Pick<DrawerBaseProps, 'position' | 'size
      */
     motion: MotionState<HTMLElement>;
     open?: boolean;
+    unmountOnClose?: boolean;
 };
 
 /**
@@ -234,7 +244,9 @@ export declare type InlineDrawerSlots = {
 /**
  * State used in rendering InlineDrawer
  */
-export declare type InlineDrawerState = Required<ComponentState<NonNullable<InlineDrawerSlots>> & DrawerBaseState & Pick<InlineDrawerProps, 'separator'>>;
+export declare type InlineDrawerState = Required<ComponentState<NonNullable<InlineDrawerSlots>> & DrawerBaseState & Pick<InlineDrawerProps, 'separator'> & {
+    animationDirection: PresenceDirection;
+}>;
 
 declare type MotionState<Element extends HTMLElement = HTMLElement> = {
     /**
@@ -317,7 +329,7 @@ export declare type OverlayDrawerSlots = {
 /**
  * State used in rendering OverlayDrawer
  */
-export declare type OverlayDrawerState = ComponentState<OverlayDrawerInternalSlots> & Required<DrawerBaseState> & Pick<OverlayDrawerProps, 'mountNode'> & {
+export declare type OverlayDrawerState = ComponentState<OverlayDrawerInternalSlots> & Required<DrawerBaseState> & Pick<OverlayDrawerProps, 'mountNode' | 'unmountOnClose'> & {
     hasMountNodeElement: boolean;
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InlineDrawer/InlineDrawer.types.ts"],"sourcesContent":["import type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport type { DrawerMotionParams } from '../../shared/drawerMotions';\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\n\nexport type SurfaceMotionSlotProps = PresenceMotionSlotProps<DrawerMotionParams>;\n\nexport type InlineDrawerSlots = {\n  root: Slot<'div', 'aside'>;\n  surfaceMotion?: Slot<SurfaceMotionSlotProps>;\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<NonNullable<InlineDrawerSlots>> & DrawerBaseState & Pick<InlineDrawerProps, 'separator'>\n>;\n"],"names":[],"mappings":"AA0BA;;CAEC,GACD,WAEE"}
+{"version":3,"sources":["../src/components/InlineDrawer/InlineDrawer.types.ts"],"sourcesContent":["import type { PresenceDirection, PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport type { DrawerMotionParams } from '../../shared/drawerMotions';\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\n\nexport type SurfaceMotionSlotProps = PresenceMotionSlotProps<DrawerMotionParams>;\n\nexport type InlineDrawerSlots = {\n  root: Slot<'div', 'aside'>;\n  surfaceMotion?: Slot<SurfaceMotionSlotProps>;\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<NonNullable<InlineDrawerSlots>> &\n    DrawerBaseState &\n    Pick<InlineDrawerProps, 'separator'> & {\n      animationDirection: PresenceDirection;\n    }\n>;\n"],"names":[],"mappings":"AA0BA;;CAEC,GACD,WAME"}

package/lib/components/InlineDrawer/useInlineDrawer.js

@@ -20,10 +20,11 @@ const STATIC_MOTION = {
  * @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 { size, position, open, unmountOnClose } = useDrawerDefaultProps(props);
     const { separator = false, surfaceMotion } = props;
     const { dir } = useFluent();
-    const state = {
+    const [animationDirection, setAnimationDirection] = React.useState(open ? 'enter' : 'exit');
+    return {
         components: {
             root: 'div',
             // casting from internal type that has required properties
@@ -33,7 +34,8 @@ const STATIC_MOTION = {
         },
         root: slot.always(getIntrinsicElementProps('div', {
             ...props,
-            ref
+            ref,
+            'aria-hidden': !unmountOnClose && !open ? true : undefined
         }), {
             elementType: 'div'
         }),
@@ -41,6 +43,8 @@ const STATIC_MOTION = {
         position,
         size,
         separator,
+        unmountOnClose,
+        animationDirection,
         surfaceMotion: presenceMotionSlot(surfaceMotion, {
             elementType: InlineDrawerMotion,
             defaultProps: {
@@ -48,11 +52,17 @@ const STATIC_MOTION = {
                 size,
                 dir,
                 visible: open,
-                unmountOnExit: true
+                appear: unmountOnClose,
+                unmountOnExit: unmountOnClose,
+                onMotionFinish: (_, { direction })=>setAnimationDirection(direction),
+                onMotionStart: (_, { direction })=>{
+                    if (direction === 'enter') {
+                        setAnimationDirection('enter');
+                    }
+                }
             }
         }),
         // Deprecated props
         motion: STATIC_MOTION
     };
-    return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InlineDrawer/useInlineDrawer.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { type DrawerMotionParams, InlineDrawerMotion } from '../../shared/drawerMotions';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { InlineDrawerProps, InlineDrawerState, SurfaceMotionSlotProps } from './InlineDrawer.types';\n\nconst STATIC_MOTION = {\n  active: true,\n  canRender: true,\n  ref: React.createRef<HTMLDivElement>(),\n  type: 'idle' as const,\n};\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 = (props: InlineDrawerProps, ref: React.Ref<HTMLElement>): InlineDrawerState => {\n  const { size, position, open } = useDrawerDefaultProps(props);\n  const { separator = false, surfaceMotion } = props;\n  const { dir } = useFluent();\n\n  const state: InlineDrawerState = {\n    components: {\n      root: 'div',\n      // casting from internal type that has required properties\n      // to external type that only has optional properties\n      // converting to unknown first as both Function component signatures are not compatible\n      surfaceMotion: InlineDrawerMotion as unknown as React.FC<SurfaceMotionSlotProps>,\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ...props,\n        ref,\n      }),\n      { elementType: 'div' },\n    ),\n\n    open,\n    position,\n    size,\n    separator,\n    surfaceMotion: presenceMotionSlot<DrawerMotionParams>(surfaceMotion, {\n      elementType: InlineDrawerMotion,\n      defaultProps: {\n        position,\n        size,\n        dir,\n        visible: open,\n        unmountOnExit: true,\n      },\n    }),\n\n    // Deprecated props\n    motion: STATIC_MOTION,\n  };\n\n  return state;\n};\n"],"names":["React","presenceMotionSlot","getIntrinsicElementProps","slot","useFluent_unstable","useFluent","InlineDrawerMotion","useDrawerDefaultProps","STATIC_MOTION","active","canRender","ref","createRef","type","useInlineDrawer_unstable","props","size","position","open","separator","surfaceMotion","dir","state","components","root","always","elementType","defaultProps","visible","unmountOnExit","motion"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAAkCC,kBAAkB,QAAQ,6BAA6B;AACzF,SAASC,qBAAqB,QAAQ,qCAAqC;AAG3E,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,KAAKX,MAAMY,SAAS;IACpBC,MAAM;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BJ;IACjE,MAAM,EAAEK,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGX,sBAAsBQ;IACvD,MAAM,EAAEI,YAAY,KAAK,EAAEC,aAAa,EAAE,GAAGL;IAC7C,MAAM,EAAEM,GAAG,EAAE,GAAGhB;IAEhB,MAAMiB,QAA2B;QAC/BC,YAAY;YACVC,MAAM;YACN,0DAA0D;YAC1D,qDAAqD;YACrD,uFAAuF;YACvFJ,eAAed;QACjB;QAEAkB,MAAMrB,KAAKsB,MAAM,CACfvB,yBAAyB,OAAO;YAC9B,GAAGa,KAAK;YACRJ;QACF,IACA;YAAEe,aAAa;QAAM;QAGvBR;QACAD;QACAD;QACAG;QACAC,eAAenB,mBAAuCmB,eAAe;YACnEM,aAAapB;YACbqB,cAAc;gBACZV;gBACAD;gBACAK;gBACAO,SAASV;gBACTW,eAAe;YACjB;QACF;QAEA,mBAAmB;QACnBC,QAAQtB;IACV;IAEA,OAAOc;AACT,EAAE"}
+{"version":3,"sources":["../src/components/InlineDrawer/useInlineDrawer.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { PresenceDirection, presenceMotionSlot } from '@fluentui/react-motion';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { type DrawerMotionParams, InlineDrawerMotion } from '../../shared/drawerMotions';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { InlineDrawerProps, InlineDrawerState, SurfaceMotionSlotProps } from './InlineDrawer.types';\n\nconst STATIC_MOTION = {\n  active: true,\n  canRender: true,\n  ref: React.createRef<HTMLDivElement>(),\n  type: 'idle' as const,\n};\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 = (props: InlineDrawerProps, ref: React.Ref<HTMLElement>): InlineDrawerState => {\n  const { size, position, open, unmountOnClose } = useDrawerDefaultProps(props);\n  const { separator = false, surfaceMotion } = props;\n  const { dir } = useFluent();\n  const [animationDirection, setAnimationDirection] = React.useState<PresenceDirection>(open ? 'enter' : 'exit');\n\n  return {\n    components: {\n      root: 'div',\n      // casting from internal type that has required properties\n      // to external type that only has optional properties\n      // converting to unknown first as both Function component signatures are not compatible\n      surfaceMotion: InlineDrawerMotion as unknown as React.FC<SurfaceMotionSlotProps>,\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ...props,\n        ref,\n        'aria-hidden': !unmountOnClose && !open ? true : undefined,\n      }),\n      { elementType: 'div' },\n    ),\n\n    open,\n    position,\n    size,\n    separator,\n    unmountOnClose,\n    animationDirection,\n    surfaceMotion: presenceMotionSlot<DrawerMotionParams>(surfaceMotion, {\n      elementType: InlineDrawerMotion,\n      defaultProps: {\n        position,\n        size,\n        dir,\n        visible: open,\n        appear: unmountOnClose,\n        unmountOnExit: unmountOnClose,\n        onMotionFinish: (_, { direction }) => setAnimationDirection(direction),\n        onMotionStart: (_, { direction }) => {\n          if (direction === 'enter') {\n            setAnimationDirection('enter');\n          }\n        },\n      },\n    }),\n\n    // Deprecated props\n    motion: STATIC_MOTION,\n  } satisfies InlineDrawerState;\n};\n"],"names":["React","presenceMotionSlot","getIntrinsicElementProps","slot","useFluent_unstable","useFluent","InlineDrawerMotion","useDrawerDefaultProps","STATIC_MOTION","active","canRender","ref","createRef","type","useInlineDrawer_unstable","props","size","position","open","unmountOnClose","separator","surfaceMotion","dir","animationDirection","setAnimationDirection","useState","components","root","always","undefined","elementType","defaultProps","visible","appear","unmountOnExit","onMotionFinish","_","direction","onMotionStart","motion"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAA4BC,kBAAkB,QAAQ,yBAAyB;AAC/E,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAAkCC,kBAAkB,QAAQ,6BAA6B;AACzF,SAASC,qBAAqB,QAAQ,qCAAqC;AAG3E,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,KAAKX,MAAMY,SAAS;IACpBC,MAAM;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BJ;IACjE,MAAM,EAAEK,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,cAAc,EAAE,GAAGZ,sBAAsBQ;IACvE,MAAM,EAAEK,YAAY,KAAK,EAAEC,aAAa,EAAE,GAAGN;IAC7C,MAAM,EAAEO,GAAG,EAAE,GAAGjB;IAChB,MAAM,CAACkB,oBAAoBC,sBAAsB,GAAGxB,MAAMyB,QAAQ,CAAoBP,OAAO,UAAU;IAEvG,OAAO;QACLQ,YAAY;YACVC,MAAM;YACN,0DAA0D;YAC1D,qDAAqD;YACrD,uFAAuF;YACvFN,eAAef;QACjB;QAEAqB,MAAMxB,KAAKyB,MAAM,CACf1B,yBAAyB,OAAO;YAC9B,GAAGa,KAAK;YACRJ;YACA,eAAe,CAACQ,kBAAkB,CAACD,OAAO,OAAOW;QACnD,IACA;YAAEC,aAAa;QAAM;QAGvBZ;QACAD;QACAD;QACAI;QACAD;QACAI;QACAF,eAAepB,mBAAuCoB,eAAe;YACnES,aAAaxB;YACbyB,cAAc;gBACZd;gBACAD;gBACAM;gBACAU,SAASd;gBACTe,QAAQd;gBACRe,eAAef;gBACfgB,gBAAgB,CAACC,GAAG,EAAEC,SAAS,EAAE,GAAKb,sBAAsBa;gBAC5DC,eAAe,CAACF,GAAG,EAAEC,SAAS,EAAE;oBAC9B,IAAIA,cAAc,SAAS;wBACzBb,sBAAsB;oBACxB;gBACF;YACF;QACF;QAEA,mBAAmB;QACnBe,QAAQ/B;IACV;AACF,EAAE"}

package/lib/components/InlineDrawer/useInlineDrawerStyles.styles.js

@@ -35,6 +35,66 @@ const useDrawerRootStyles = /*#__PURE__*/__styles({
   bottom: {
     a9b677: "fly5x3f",
     Bqenvij: "fub80nq"
+  },
+  animationExitStart: {
+    a9b677: "f3tsq5r",
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "f3bhgqh"
+  },
+  animationExitEnd: {
+    a9b677: "f3tsq5r",
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "f3bhgqh"
+  },
+  animationExitBottom: {
+    Bqenvij: "fniina8",
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "f3bhgqh"
   }
 }, {
   d: [[".f1cxmi7i{border-right:1px solid var(--colorNeutralBackground3);}", {
@@ -47,7 +107,13 @@ const useDrawerRootStyles = /*#__PURE__*/__styles({
     p: -1
   }], [".f1n3kblk{border-top:1px solid var(--colorNeutralBackground3);}", {
     p: -1
-  }], ".fly5x3f{width:100%;}", ".fub80nq{height:var(--fui-Drawer--size);}"]
+  }], ".fly5x3f{width:100%;}", ".fub80nq{height:var(--fui-Drawer--size);}", ".f3tsq5r{width:0;}", [".f3bhgqh{border:none;}", {
+    p: -2
+  }], [".f3bhgqh{border:none;}", {
+    p: -2
+  }], ".fniina8{height:0;}", [".f3bhgqh{border:none;}", {
+    p: -2
+  }]]
 });
 function getSeparatorClass(state, classNames) {
   if (!state.separator) {
@@ -64,6 +130,18 @@ function getSeparatorClass(state, classNames) {
       return undefined;
   }
 }
+function getAnimationExitClass(state, classNames) {
+  switch (state.position) {
+    case 'start':
+      return classNames.animationExitStart;
+    case 'end':
+      return classNames.animationExitEnd;
+    case 'bottom':
+      return classNames.animationExitBottom;
+    default:
+      return undefined;
+  }
+}
 /**
  * Apply styling to the InlineDrawer slots based on the state
  */
@@ -73,6 +151,6 @@ export const useInlineDrawerStyles_unstable = state => {
   const resetStyles = useDrawerResetStyles();
   const baseClassNames = useDrawerBaseClassNames(state);
   const rootStyles = useDrawerRootStyles();
-  state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], state.root.className);
+  state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], state.animationDirection === 'exit' && getAnimationExitClass(state, rootStyles), state.root.className);
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","inlineDrawerClassNames","root","useDrawerResetStyles","borderValue","colorNeutralBackground3","useDrawerRootStyles","separatorStart","h3c5rm","vrafjx","Bekrc4i","u1mtju","separatorEnd","zhjwy3","wvpqe5","ibv6hh","B4g9neb","separatorBottom","g2u3we","icvyot","B4j52fo","i8vvqc","start","end","bottom","a9b677","Bqenvij","d","p","getSeparatorClass","state","classNames","separator","undefined","position","useInlineDrawerStyles_unstable","resetStyles","baseClassNames","rootStyles","className"],"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const inlineDrawerClassNames = {\n    root: 'fui-InlineDrawer'\n};\nconst useDrawerResetStyles = makeResetStyles({\n    ...drawerDefaultStyles,\n    position: 'relative'\n});\n/**\n * Styles for the root slot\n */ const borderValue = `1px solid ${tokens.colorNeutralBackground3}`;\nconst useDrawerRootStyles = makeStyles({\n    /* Separator */ separatorStart: {\n        borderRight: borderValue\n    },\n    separatorEnd: {\n        borderLeft: borderValue\n    },\n    separatorBottom: {\n        borderTop: borderValue\n    },\n    /* Positioning */ start: {},\n    end: {},\n    bottom: {\n        width: '100%',\n        height: `var(${drawerCSSVars.drawerSizeVar})`\n    }\n});\nfunction getSeparatorClass(state, classNames) {\n    if (!state.separator) {\n        return undefined;\n    }\n    switch(state.position){\n        case 'start':\n            return classNames.separatorStart;\n        case 'end':\n            return classNames.separatorEnd;\n        case 'bottom':\n            return classNames.separatorBottom;\n        default:\n            return undefined;\n    }\n}\n/**\n * Apply styling to the InlineDrawer slots based on the state\n */ export const useInlineDrawerStyles_unstable = (state)=>{\n    'use no memo';\n    const resetStyles = useDrawerResetStyles();\n    const baseClassNames = useDrawerBaseClassNames(state);\n    const rootStyles = useDrawerRootStyles();\n    state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,yCAAyC;AACrH,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGT,aAAA,6UAG5B,CAAC;AACF;AACA;AACA;AAAI,MAAMU,WAAW,GAAG,aAAaP,MAAM,CAACQ,uBAAuB,EAAE;AACrE,MAAMC,mBAAmB,gBAAGX,QAAA;EAAAY,cAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,eAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;EAAAC,GAAA;EAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAgB3B,CAAC;AACF,SAASC,iBAAiBA,CAACC,KAAK,EAAEC,UAAU,EAAE;EAC1C,IAAI,CAACD,KAAK,CAACE,SAAS,EAAE;IAClB,OAAOC,SAAS;EACpB;EACA,QAAOH,KAAK,CAACI,QAAQ;IACjB,KAAK,OAAO;MACR,OAAOH,UAAU,CAACxB,cAAc;IACpC,KAAK,KAAK;MACN,OAAOwB,UAAU,CAACnB,YAAY;IAClC,KAAK,QAAQ;MACT,OAAOmB,UAAU,CAACd,eAAe;IACrC;MACI,OAAOgB,SAAS;EACxB;AACJ;AACA;AACA;AACA;AAAI,OAAO,MAAME,8BAA8B,GAAIL,KAAK,IAAG;EACvD,aAAa;;EACb,MAAMM,WAAW,GAAGjC,oBAAoB,CAAC,CAAC;EAC1C,MAAMkC,cAAc,GAAGrC,uBAAuB,CAAC8B,KAAK,CAAC;EACrD,MAAMQ,UAAU,GAAGhC,mBAAmB,CAAC,CAAC;EACxCwB,KAAK,CAAC5B,IAAI,CAACqC,SAAS,GAAG3C,YAAY,CAACK,sBAAsB,CAACC,IAAI,EAAEkC,WAAW,EAAEC,cAAc,EAAER,iBAAiB,CAACC,KAAK,EAAEQ,UAAU,CAAC,EAAEA,UAAU,CAACR,KAAK,CAACI,QAAQ,CAAC,EAAEJ,KAAK,CAAC5B,IAAI,CAACqC,SAAS,CAAC;EACrL,OAAOT,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","inlineDrawerClassNames","root","useDrawerResetStyles","borderValue","colorNeutralBackground3","useDrawerRootStyles","separatorStart","h3c5rm","vrafjx","Bekrc4i","u1mtju","separatorEnd","zhjwy3","wvpqe5","ibv6hh","B4g9neb","separatorBottom","g2u3we","icvyot","B4j52fo","i8vvqc","start","end","bottom","a9b677","Bqenvij","animationExitStart","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","irswps","animationExitEnd","animationExitBottom","d","p","getSeparatorClass","state","classNames","separator","undefined","position","getAnimationExitClass","useInlineDrawerStyles_unstable","resetStyles","baseClassNames","rootStyles","className","animationDirection"],"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const inlineDrawerClassNames = {\n    root: 'fui-InlineDrawer'\n};\nconst useDrawerResetStyles = makeResetStyles({\n    ...drawerDefaultStyles,\n    position: 'relative'\n});\n/**\n * Styles for the root slot\n */ const borderValue = `1px solid ${tokens.colorNeutralBackground3}`;\nconst useDrawerRootStyles = makeStyles({\n    /* Separator */ separatorStart: {\n        borderRight: borderValue\n    },\n    separatorEnd: {\n        borderLeft: borderValue\n    },\n    separatorBottom: {\n        borderTop: borderValue\n    },\n    /* Positioning */ start: {},\n    end: {},\n    bottom: {\n        width: '100%',\n        height: `var(${drawerCSSVars.drawerSizeVar})`\n    },\n    /* Animation exit states */ animationExitStart: {\n        width: '0',\n        border: 'none'\n    },\n    animationExitEnd: {\n        width: '0',\n        border: 'none'\n    },\n    animationExitBottom: {\n        height: '0',\n        border: 'none'\n    }\n});\nfunction getSeparatorClass(state, classNames) {\n    if (!state.separator) {\n        return undefined;\n    }\n    switch(state.position){\n        case 'start':\n            return classNames.separatorStart;\n        case 'end':\n            return classNames.separatorEnd;\n        case 'bottom':\n            return classNames.separatorBottom;\n        default:\n            return undefined;\n    }\n}\nfunction getAnimationExitClass(state, classNames) {\n    switch(state.position){\n        case 'start':\n            return classNames.animationExitStart;\n        case 'end':\n            return classNames.animationExitEnd;\n        case 'bottom':\n            return classNames.animationExitBottom;\n        default:\n            return undefined;\n    }\n}\n/**\n * Apply styling to the InlineDrawer slots based on the state\n */ export const useInlineDrawerStyles_unstable = (state)=>{\n    'use no memo';\n    const resetStyles = useDrawerResetStyles();\n    const baseClassNames = useDrawerBaseClassNames(state);\n    const rootStyles = useDrawerRootStyles();\n    state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], state.animationDirection === 'exit' && getAnimationExitClass(state, rootStyles), state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,yCAAyC;AACrH,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGT,aAAA,6UAG5B,CAAC;AACF;AACA;AACA;AAAI,MAAMU,WAAW,GAAG,aAAaP,MAAM,CAACQ,uBAAuB,EAAE;AACrE,MAAMC,mBAAmB,gBAAGX,QAAA;EAAAY,cAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,eAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;EAAAC,GAAA;EAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,kBAAA;IAAAF,MAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAf,OAAA;IAAAH,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAJ,MAAA;IAAAH,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAW,MAAA;IAAAH,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAY,MAAA;EAAA;EAAAC,gBAAA;IAAAR,MAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAf,OAAA;IAAAH,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAJ,MAAA;IAAAH,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAW,MAAA;IAAAH,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAY,MAAA;EAAA;EAAAE,mBAAA;IAAAR,OAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAf,OAAA;IAAAH,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAJ,MAAA;IAAAH,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAW,MAAA;IAAAH,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAY,MAAA;EAAA;AAAA;EAAAG,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA4B3B,CAAC;AACF,SAASC,iBAAiBA,CAACC,KAAK,EAAEC,UAAU,EAAE;EAC1C,IAAI,CAACD,KAAK,CAACE,SAAS,EAAE;IAClB,OAAOC,SAAS;EACpB;EACA,QAAOH,KAAK,CAACI,QAAQ;IACjB,KAAK,OAAO;MACR,OAAOH,UAAU,CAAChC,cAAc;IACpC,KAAK,KAAK;MACN,OAAOgC,UAAU,CAAC3B,YAAY;IAClC,KAAK,QAAQ;MACT,OAAO2B,UAAU,CAACtB,eAAe;IACrC;MACI,OAAOwB,SAAS;EACxB;AACJ;AACA,SAASE,qBAAqBA,CAACL,KAAK,EAAEC,UAAU,EAAE;EAC9C,QAAOD,KAAK,CAACI,QAAQ;IACjB,KAAK,OAAO;MACR,OAAOH,UAAU,CAACZ,kBAAkB;IACxC,KAAK,KAAK;MACN,OAAOY,UAAU,CAACN,gBAAgB;IACtC,KAAK,QAAQ;MACT,OAAOM,UAAU,CAACL,mBAAmB;IACzC;MACI,OAAOO,SAAS;EACxB;AACJ;AACA;AACA;AACA;AAAI,OAAO,MAAMG,8BAA8B,GAAIN,KAAK,IAAG;EACvD,aAAa;;EACb,MAAMO,WAAW,GAAG1C,oBAAoB,CAAC,CAAC;EAC1C,MAAM2C,cAAc,GAAG9C,uBAAuB,CAACsC,KAAK,CAAC;EACrD,MAAMS,UAAU,GAAGzC,mBAAmB,CAAC,CAAC;EACxCgC,KAAK,CAACpC,IAAI,CAAC8C,SAAS,GAAGpD,YAAY,CAACK,sBAAsB,CAACC,IAAI,EAAE2C,WAAW,EAAEC,cAAc,EAAET,iBAAiB,CAACC,KAAK,EAAES,UAAU,CAAC,EAAEA,UAAU,CAACT,KAAK,CAACI,QAAQ,CAAC,EAAEJ,KAAK,CAACW,kBAAkB,KAAK,MAAM,IAAIN,qBAAqB,CAACL,KAAK,EAAES,UAAU,CAAC,EAAET,KAAK,CAACpC,IAAI,CAAC8C,SAAS,CAAC;EACtQ,OAAOV,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/InlineDrawer/useInlineDrawerStyles.styles.raw.js

@@ -27,6 +27,18 @@ const useDrawerRootStyles = makeStyles({
     bottom: {
         width: '100%',
         height: `var(${drawerCSSVars.drawerSizeVar})`
+    },
+    /* Animation exit states */ animationExitStart: {
+        width: '0',
+        border: 'none'
+    },
+    animationExitEnd: {
+        width: '0',
+        border: 'none'
+    },
+    animationExitBottom: {
+        height: '0',
+        border: 'none'
     }
 });
 function getSeparatorClass(state, classNames) {
@@ -44,6 +56,18 @@ function getSeparatorClass(state, classNames) {
             return undefined;
     }
 }
+function getAnimationExitClass(state, classNames) {
+    switch(state.position){
+        case 'start':
+            return classNames.animationExitStart;
+        case 'end':
+            return classNames.animationExitEnd;
+        case 'bottom':
+            return classNames.animationExitBottom;
+        default:
+            return undefined;
+    }
+}
 /**
  * Apply styling to the InlineDrawer slots based on the state
  */ export const useInlineDrawerStyles_unstable = (state)=>{
@@ -51,6 +75,6 @@ function getSeparatorClass(state, classNames) {
     const resetStyles = useDrawerResetStyles();
     const baseClassNames = useDrawerBaseClassNames(state);
     const rootStyles = useDrawerRootStyles();
-    state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], state.root.className);
+    state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], state.animationDirection === 'exit' && getAnimationExitClass(state, rootStyles), state.root.className);
     return state;
 };

package/lib/components/InlineDrawer/useInlineDrawerStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InlineDrawer/useInlineDrawerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nimport type { InlineDrawerSlots, InlineDrawerState } from './InlineDrawer.types';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\n\nexport const inlineDrawerClassNames: SlotClassNames<Omit<InlineDrawerSlots, 'surfaceMotion'>> = {\n  root: 'fui-InlineDrawer',\n};\n\nconst useDrawerResetStyles = makeResetStyles({\n  ...drawerDefaultStyles,\n  position: 'relative',\n});\n\n/**\n * Styles for the root slot\n */\nconst borderValue = `1px solid ${tokens.colorNeutralBackground3}`;\nconst useDrawerRootStyles = makeStyles({\n  /* Separator */\n  separatorStart: { borderRight: borderValue },\n  separatorEnd: { borderLeft: borderValue },\n  separatorBottom: { borderTop: borderValue },\n\n  /* Positioning */\n  start: {},\n  end: {},\n  bottom: {\n    width: '100%',\n    height: `var(${drawerCSSVars.drawerSizeVar})`,\n  },\n});\n\nfunction getSeparatorClass(state: InlineDrawerState, classNames: ReturnType<typeof useDrawerRootStyles>) {\n  if (!state.separator) {\n    return undefined;\n  }\n\n  switch (state.position) {\n    case 'start':\n      return classNames.separatorStart;\n\n    case 'end':\n      return classNames.separatorEnd;\n\n    case 'bottom':\n      return classNames.separatorBottom;\n\n    default:\n      return undefined;\n  }\n}\n\n/**\n * Apply styling to the InlineDrawer slots based on the state\n */\nexport const useInlineDrawerStyles_unstable = (state: InlineDrawerState): InlineDrawerState => {\n  'use no memo';\n\n  const resetStyles = useDrawerResetStyles();\n  const baseClassNames = useDrawerBaseClassNames(state);\n  const rootStyles = useDrawerRootStyles();\n\n  state.root.className = mergeClasses(\n    inlineDrawerClassNames.root,\n    resetStyles,\n    baseClassNames,\n    getSeparatorClass(state, rootStyles),\n    rootStyles[state.position],\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","inlineDrawerClassNames","root","useDrawerResetStyles","position","borderValue","colorNeutralBackground3","useDrawerRootStyles","separatorStart","borderRight","separatorEnd","borderLeft","separatorBottom","borderTop","start","end","bottom","width","height","drawerSizeVar","getSeparatorClass","state","classNames","separator","undefined","useInlineDrawerStyles_unstable","resetStyles","baseClassNames","rootStyles","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE3E,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,0CAA0C;AAEtH,OAAO,MAAMC,yBAAmF;IAC9FC,MAAM;AACR,EAAE;AAEF,MAAMC,uBAAuBT,gBAAgB;IAC3C,GAAGK,mBAAmB;IACtBK,UAAU;AACZ;AAEA;;CAEC,GACD,MAAMC,cAAc,CAAC,UAAU,EAAER,OAAOS,uBAAuB,EAAE;AACjE,MAAMC,sBAAsBZ,WAAW;IACrC,aAAa,GACba,gBAAgB;QAAEC,aAAaJ;IAAY;IAC3CK,cAAc;QAAEC,YAAYN;IAAY;IACxCO,iBAAiB;QAAEC,WAAWR;IAAY;IAE1C,eAAe,GACfS,OAAO,CAAC;IACRC,KAAK,CAAC;IACNC,QAAQ;QACNC,OAAO;QACPC,QAAQ,CAAC,IAAI,EAAEpB,cAAcqB,aAAa,CAAC,CAAC,CAAC;IAC/C;AACF;AAEA,SAASC,kBAAkBC,KAAwB,EAAEC,UAAkD;IACrG,IAAI,CAACD,MAAME,SAAS,EAAE;QACpB,OAAOC;IACT;IAEA,OAAQH,MAAMjB,QAAQ;QACpB,KAAK;YACH,OAAOkB,WAAWd,cAAc;QAElC,KAAK;YACH,OAAOc,WAAWZ,YAAY;QAEhC,KAAK;YACH,OAAOY,WAAWV,eAAe;QAEnC;YACE,OAAOY;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACJ;IAC7C;IAEA,MAAMK,cAAcvB;IACpB,MAAMwB,iBAAiB3B,wBAAwBqB;IAC/C,MAAMO,aAAarB;IAEnBc,MAAMnB,IAAI,CAAC2B,SAAS,GAAGjC,aACrBK,uBAAuBC,IAAI,EAC3BwB,aACAC,gBACAP,kBAAkBC,OAAOO,aACzBA,UAAU,CAACP,MAAMjB,QAAQ,CAAC,EAC1BiB,MAAMnB,IAAI,CAAC2B,SAAS;IAGtB,OAAOR;AACT,EAAE"}
+{"version":3,"sources":["../src/components/InlineDrawer/useInlineDrawerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nimport type { InlineDrawerSlots, InlineDrawerState } from './InlineDrawer.types';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\n\nexport const inlineDrawerClassNames: SlotClassNames<Omit<InlineDrawerSlots, 'surfaceMotion'>> = {\n  root: 'fui-InlineDrawer',\n};\n\nconst useDrawerResetStyles = makeResetStyles({\n  ...drawerDefaultStyles,\n  position: 'relative',\n});\n\n/**\n * Styles for the root slot\n */\nconst borderValue = `1px solid ${tokens.colorNeutralBackground3}`;\nconst useDrawerRootStyles = makeStyles({\n  /* Separator */\n  separatorStart: { borderRight: borderValue },\n  separatorEnd: { borderLeft: borderValue },\n  separatorBottom: { borderTop: borderValue },\n\n  /* Positioning */\n  start: {},\n  end: {},\n  bottom: {\n    width: '100%',\n    height: `var(${drawerCSSVars.drawerSizeVar})`,\n  },\n\n  /* Animation exit states */\n  animationExitStart: {\n    width: '0',\n    border: 'none',\n  },\n  animationExitEnd: {\n    width: '0',\n    border: 'none',\n  },\n  animationExitBottom: {\n    height: '0',\n    border: 'none',\n  },\n});\n\nfunction getSeparatorClass(state: InlineDrawerState, classNames: ReturnType<typeof useDrawerRootStyles>) {\n  if (!state.separator) {\n    return undefined;\n  }\n\n  switch (state.position) {\n    case 'start':\n      return classNames.separatorStart;\n\n    case 'end':\n      return classNames.separatorEnd;\n\n    case 'bottom':\n      return classNames.separatorBottom;\n\n    default:\n      return undefined;\n  }\n}\n\nfunction getAnimationExitClass(state: InlineDrawerState, classNames: ReturnType<typeof useDrawerRootStyles>) {\n  switch (state.position) {\n    case 'start':\n      return classNames.animationExitStart;\n\n    case 'end':\n      return classNames.animationExitEnd;\n\n    case 'bottom':\n      return classNames.animationExitBottom;\n\n    default:\n      return undefined;\n  }\n}\n\n/**\n * Apply styling to the InlineDrawer slots based on the state\n */\nexport const useInlineDrawerStyles_unstable = (state: InlineDrawerState): InlineDrawerState => {\n  'use no memo';\n\n  const resetStyles = useDrawerResetStyles();\n  const baseClassNames = useDrawerBaseClassNames(state);\n  const rootStyles = useDrawerRootStyles();\n\n  state.root.className = mergeClasses(\n    inlineDrawerClassNames.root,\n    resetStyles,\n    baseClassNames,\n    getSeparatorClass(state, rootStyles),\n    rootStyles[state.position],\n    state.animationDirection === 'exit' && getAnimationExitClass(state, rootStyles),\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","inlineDrawerClassNames","root","useDrawerResetStyles","position","borderValue","colorNeutralBackground3","useDrawerRootStyles","separatorStart","borderRight","separatorEnd","borderLeft","separatorBottom","borderTop","start","end","bottom","width","height","drawerSizeVar","animationExitStart","border","animationExitEnd","animationExitBottom","getSeparatorClass","state","classNames","separator","undefined","getAnimationExitClass","useInlineDrawerStyles_unstable","resetStyles","baseClassNames","rootStyles","className","animationDirection"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE3E,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,0CAA0C;AAEtH,OAAO,MAAMC,yBAAmF;IAC9FC,MAAM;AACR,EAAE;AAEF,MAAMC,uBAAuBT,gBAAgB;IAC3C,GAAGK,mBAAmB;IACtBK,UAAU;AACZ;AAEA;;CAEC,GACD,MAAMC,cAAc,CAAC,UAAU,EAAER,OAAOS,uBAAuB,EAAE;AACjE,MAAMC,sBAAsBZ,WAAW;IACrC,aAAa,GACba,gBAAgB;QAAEC,aAAaJ;IAAY;IAC3CK,cAAc;QAAEC,YAAYN;IAAY;IACxCO,iBAAiB;QAAEC,WAAWR;IAAY;IAE1C,eAAe,GACfS,OAAO,CAAC;IACRC,KAAK,CAAC;IACNC,QAAQ;QACNC,OAAO;QACPC,QAAQ,CAAC,IAAI,EAAEpB,cAAcqB,aAAa,CAAC,CAAC,CAAC;IAC/C;IAEA,yBAAyB,GACzBC,oBAAoB;QAClBH,OAAO;QACPI,QAAQ;IACV;IACAC,kBAAkB;QAChBL,OAAO;QACPI,QAAQ;IACV;IACAE,qBAAqB;QACnBL,QAAQ;QACRG,QAAQ;IACV;AACF;AAEA,SAASG,kBAAkBC,KAAwB,EAAEC,UAAkD;IACrG,IAAI,CAACD,MAAME,SAAS,EAAE;QACpB,OAAOC;IACT;IAEA,OAAQH,MAAMrB,QAAQ;QACpB,KAAK;YACH,OAAOsB,WAAWlB,cAAc;QAElC,KAAK;YACH,OAAOkB,WAAWhB,YAAY;QAEhC,KAAK;YACH,OAAOgB,WAAWd,eAAe;QAEnC;YACE,OAAOgB;IACX;AACF;AAEA,SAASC,sBAAsBJ,KAAwB,EAAEC,UAAkD;IACzG,OAAQD,MAAMrB,QAAQ;QACpB,KAAK;YACH,OAAOsB,WAAWN,kBAAkB;QAEtC,KAAK;YACH,OAAOM,WAAWJ,gBAAgB;QAEpC,KAAK;YACH,OAAOI,WAAWH,mBAAmB;QAEvC;YACE,OAAOK;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,iCAAiC,CAACL;IAC7C;IAEA,MAAMM,cAAc5B;IACpB,MAAM6B,iBAAiBhC,wBAAwByB;IAC/C,MAAMQ,aAAa1B;IAEnBkB,MAAMvB,IAAI,CAACgC,SAAS,GAAGtC,aACrBK,uBAAuBC,IAAI,EAC3B6B,aACAC,gBACAR,kBAAkBC,OAAOQ,aACzBA,UAAU,CAACR,MAAMrB,QAAQ,CAAC,EAC1BqB,MAAMU,kBAAkB,KAAK,UAAUN,sBAAsBJ,OAAOQ,aACpER,MAAMvB,IAAI,CAACgC,SAAS;IAGtB,OAAOT;AACT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawer.types.ts"],"sourcesContent":["import type { DialogProps } from '@fluentui/react-dialog';\nimport type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport type { DrawerMotionParams, OverlayDrawerSurfaceMotionParams } from '../../shared/drawerMotions';\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\nimport type { OverlayDrawerSurfaceProps } from './OverlayDrawerSurface';\n\n/**\n * OverlayDrawer slots\n */\nexport type OverlayDrawerSlots = {\n  /**\n   * Slot for the root element.\n   */\n  root: Slot<OverlayDrawerSurfaceProps>;\n  /**\n   * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).\n   *\n   */\n  backdropMotion?: Slot<PresenceMotionSlotProps<OverlayDrawerSurfaceMotionParams>>;\n  /**\n   * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).\n   *\n   */\n  surfaceMotion?: Slot<PresenceMotionSlotProps<DrawerMotionParams>>;\n};\n\n/**\n * OverlayDrawer internal slots for when using with composition API\n */\nexport type OverlayDrawerInternalSlots = Pick<OverlayDrawerSlots, 'root'> & {\n  /**\n   * Slot for the dialog component that wraps the drawer.\n   */\n  dialog: NonNullable<Slot<DialogProps>>;\n};\n\n/**\n * OverlayDrawer Props\n */\nexport type OverlayDrawerProps = ComponentProps<OverlayDrawerSlots> &\n  Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus'> &\n  DrawerBaseProps & {\n    /**\n     * @deprecated OverlayDrawer can work only as a controlled component\n     * and does not support uncontrolled mode i.e. defaultOpen prop\n     */\n    defaultOpen?: boolean;\n  };\n\n/**\n * State used in rendering OverlayDrawer\n */\nexport type OverlayDrawerState = ComponentState<OverlayDrawerInternalSlots> &\n  Required<DrawerBaseState> &\n  Pick<OverlayDrawerProps, 'mountNode'> & {\n    hasMountNodeElement: boolean;\n  };\n"],"names":[],"mappings":"AAmDA;;CAEC,GACD,WAII"}
+{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawer.types.ts"],"sourcesContent":["import type { DialogProps } from '@fluentui/react-dialog';\nimport type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport type { DrawerMotionParams, OverlayDrawerSurfaceMotionParams } from '../../shared/drawerMotions';\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\nimport type { OverlayDrawerSurfaceProps } from './OverlayDrawerSurface';\n\n/**\n * OverlayDrawer slots\n */\nexport type OverlayDrawerSlots = {\n  /**\n   * Slot for the root element.\n   */\n  root: Slot<OverlayDrawerSurfaceProps>;\n  /**\n   * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).\n   *\n   */\n  backdropMotion?: Slot<PresenceMotionSlotProps<OverlayDrawerSurfaceMotionParams>>;\n  /**\n   * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).\n   *\n   */\n  surfaceMotion?: Slot<PresenceMotionSlotProps<DrawerMotionParams>>;\n};\n\n/**\n * OverlayDrawer internal slots for when using with composition API\n */\nexport type OverlayDrawerInternalSlots = Pick<OverlayDrawerSlots, 'root'> & {\n  /**\n   * Slot for the dialog component that wraps the drawer.\n   */\n  dialog: NonNullable<Slot<DialogProps>>;\n};\n\n/**\n * OverlayDrawer Props\n */\nexport type OverlayDrawerProps = ComponentProps<OverlayDrawerSlots> &\n  Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus'> &\n  DrawerBaseProps & {\n    /**\n     * @deprecated OverlayDrawer can work only as a controlled component\n     * and does not support uncontrolled mode i.e. defaultOpen prop\n     */\n    defaultOpen?: boolean;\n  };\n\n/**\n * State used in rendering OverlayDrawer\n */\nexport type OverlayDrawerState = ComponentState<OverlayDrawerInternalSlots> &\n  Required<DrawerBaseState> &\n  Pick<OverlayDrawerProps, 'mountNode' | 'unmountOnClose'> & {\n    hasMountNodeElement: boolean;\n  };\n"],"names":[],"mappings":"AAmDA;;CAEC,GACD,WAII"}

package/lib/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js

@@ -9,9 +9,12 @@ const useBackdropResetStyles = /*#__PURE__*/__resetStyles("rl76ifk", null, [".rl
 const useBackdropStyles = /*#__PURE__*/__styles({
   nested: {
     De3pzq: "f1c21dwh"
+  },
+  drawerHidden: {
+    Bkecrkj: "f1aehjj5"
   }
 }, {
-  d: [".f1c21dwh{background-color:var(--colorTransparentBackground);}"]
+  d: [".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1aehjj5{pointer-events:none;}"]
 });
 /**
  * Apply styling to the OverlayDrawerSurface slots based on the state
@@ -19,10 +22,17 @@ const useBackdropStyles = /*#__PURE__*/__styles({
 export const useOverlayDrawerSurfaceStyles_unstable = state => {
   'use no memo';
 
+  const {
+    isNestedDialog,
+    backdrop,
+    open,
+    unmountOnClose
+  } = state;
   const backdropResetStyles = useBackdropResetStyles();
   const backdropStyles = useBackdropStyles();
-  if (state.backdrop) {
-    state.backdrop.className = mergeClasses(backdropResetStyles, state.isNestedDialog && backdropStyles.nested, state.backdrop.className);
+  const mountedAndClosed = !unmountOnClose && !open;
+  if (backdrop) {
+    backdrop.className = mergeClasses(backdropResetStyles, isNestedDialog && backdropStyles.nested, mountedAndClosed && backdropStyles.drawerHidden, backdrop.className);
   }
   return state;
 };

package/lib/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","useBackdropResetStyles","useBackdropStyles","nested","De3pzq","d","useOverlayDrawerSurfaceStyles_unstable","state","backdropResetStyles","backdropStyles","backdrop","className","isNestedDialog"],"sources":["useOverlayDrawerSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * Styles for the backdrop slot\n */ const useBackdropResetStyles = makeResetStyles({\n    inset: '0px',\n    position: 'fixed',\n    backgroundColor: tokens.colorBackgroundOverlay\n});\nconst useBackdropStyles = makeStyles({\n    nested: {\n        backgroundColor: tokens.colorTransparentBackground\n    }\n});\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */ export const useOverlayDrawerSurfaceStyles_unstable = (state)=>{\n    'use no memo';\n    const backdropResetStyles = useBackdropResetStyles();\n    const backdropStyles = useBackdropStyles();\n    if (state.backdrop) {\n        state.backdrop.className = mergeClasses(backdropResetStyles, state.isNestedDialog && backdropStyles.nested, state.backdrop.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C;AACA;AACA;AAAI,MAAMC,sBAAsB,gBAAGJ,aAAA,wGAIlC,CAAC;AACF,MAAMK,iBAAiB,gBAAGJ,QAAA;EAAAK,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,sCAAsC,GAAIC,KAAK,IAAG;EAC/D,aAAa;;EACb,MAAMC,mBAAmB,GAAGP,sBAAsB,CAAC,CAAC;EACpD,MAAMQ,cAAc,GAAGP,iBAAiB,CAAC,CAAC;EAC1C,IAAIK,KAAK,CAACG,QAAQ,EAAE;IAChBH,KAAK,CAACG,QAAQ,CAACC,SAAS,GAAGZ,YAAY,CAACS,mBAAmB,EAAED,KAAK,CAACK,cAAc,IAAIH,cAAc,CAACN,MAAM,EAAEI,KAAK,CAACG,QAAQ,CAACC,SAAS,CAAC;EACzI;EACA,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","useBackdropResetStyles","useBackdropStyles","nested","De3pzq","drawerHidden","Bkecrkj","d","useOverlayDrawerSurfaceStyles_unstable","state","isNestedDialog","backdrop","open","unmountOnClose","backdropResetStyles","backdropStyles","mountedAndClosed","className"],"sources":["useOverlayDrawerSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * Styles for the backdrop slot\n */ const useBackdropResetStyles = makeResetStyles({\n    inset: '0px',\n    position: 'fixed',\n    backgroundColor: tokens.colorBackgroundOverlay\n});\nconst useBackdropStyles = makeStyles({\n    nested: {\n        backgroundColor: tokens.colorTransparentBackground\n    },\n    drawerHidden: {\n        pointerEvents: 'none'\n    }\n});\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */ export const useOverlayDrawerSurfaceStyles_unstable = (state)=>{\n    'use no memo';\n    const { isNestedDialog, backdrop, open, unmountOnClose } = state;\n    const backdropResetStyles = useBackdropResetStyles();\n    const backdropStyles = useBackdropStyles();\n    const mountedAndClosed = !unmountOnClose && !open;\n    if (backdrop) {\n        backdrop.className = mergeClasses(backdropResetStyles, isNestedDialog && backdropStyles.nested, mountedAndClosed && backdropStyles.drawerHidden, backdrop.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C;AACA;AACA;AAAI,MAAMC,sBAAsB,gBAAGJ,aAAA,wGAIlC,CAAC;AACF,MAAMK,iBAAiB,gBAAGJ,QAAA;EAAAK,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAOzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,sCAAsC,GAAIC,KAAK,IAAG;EAC/D,aAAa;;EACb,MAAM;IAAEC,cAAc;IAAEC,QAAQ;IAAEC,IAAI;IAAEC;EAAe,CAAC,GAAGJ,KAAK;EAChE,MAAMK,mBAAmB,GAAGb,sBAAsB,CAAC,CAAC;EACpD,MAAMc,cAAc,GAAGb,iBAAiB,CAAC,CAAC;EAC1C,MAAMc,gBAAgB,GAAG,CAACH,cAAc,IAAI,CAACD,IAAI;EACjD,IAAID,QAAQ,EAAE;IACVA,QAAQ,CAACM,SAAS,GAAGlB,YAAY,CAACe,mBAAmB,EAAEJ,cAAc,IAAIK,cAAc,CAACZ,MAAM,EAAEa,gBAAgB,IAAID,cAAc,CAACV,YAAY,EAAEM,QAAQ,CAACM,SAAS,CAAC;EACxK;EACA,OAAOR,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.raw.js

@@ -11,16 +11,21 @@ import { tokens } from '@fluentui/react-theme';
 const useBackdropStyles = makeStyles({
     nested: {
         backgroundColor: tokens.colorTransparentBackground
+    },
+    drawerHidden: {
+        pointerEvents: 'none'
     }
 });
 /**
  * Apply styling to the OverlayDrawerSurface slots based on the state
  */ export const useOverlayDrawerSurfaceStyles_unstable = (state)=>{
     'use no memo';
+    const { isNestedDialog, backdrop, open, unmountOnClose } = state;
     const backdropResetStyles = useBackdropResetStyles();
     const backdropStyles = useBackdropStyles();
-    if (state.backdrop) {
-        state.backdrop.className = mergeClasses(backdropResetStyles, state.isNestedDialog && backdropStyles.nested, state.backdrop.className);
+    const mountedAndClosed = !unmountOnClose && !open;
+    if (backdrop) {
+        backdrop.className = mergeClasses(backdropResetStyles, isNestedDialog && backdropStyles.nested, mountedAndClosed && backdropStyles.drawerHidden, backdrop.className);
     }
     return state;
 };

package/lib/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { DialogSurfaceState } from '@fluentui/react-dialog';\n\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropResetStyles = makeResetStyles({\n  inset: '0px',\n  position: 'fixed',\n  backgroundColor: tokens.colorBackgroundOverlay,\n});\n\nconst useBackdropStyles = makeStyles({\n  nested: {\n    backgroundColor: tokens.colorTransparentBackground,\n  },\n});\n\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */\nexport const useOverlayDrawerSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n  'use no memo';\n\n  const backdropResetStyles = useBackdropResetStyles();\n  const backdropStyles = useBackdropStyles();\n\n  if (state.backdrop) {\n    state.backdrop.className = mergeClasses(\n      backdropResetStyles,\n      state.isNestedDialog && backdropStyles.nested,\n      state.backdrop.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","useBackdropResetStyles","inset","position","backgroundColor","colorBackgroundOverlay","useBackdropStyles","nested","colorTransparentBackground","useOverlayDrawerSurfaceStyles_unstable","state","backdropResetStyles","backdropStyles","backdrop","className","isNestedDialog"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAG/C;;CAEC,GACD,MAAMC,yBAAyBJ,gBAAgB;IAC7CK,OAAO;IACPC,UAAU;IACVC,iBAAiBJ,OAAOK,sBAAsB;AAChD;AAEA,MAAMC,oBAAoBR,WAAW;IACnCS,QAAQ;QACNH,iBAAiBJ,OAAOQ,0BAA0B;IACpD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,yCAAyC,CAACC;IACrD;IAEA,MAAMC,sBAAsBV;IAC5B,MAAMW,iBAAiBN;IAEvB,IAAII,MAAMG,QAAQ,EAAE;QAClBH,MAAMG,QAAQ,CAACC,SAAS,GAAGf,aACzBY,qBACAD,MAAMK,cAAc,IAAIH,eAAeL,MAAM,EAC7CG,MAAMG,QAAQ,CAACC,SAAS;IAE5B;IAEA,OAAOJ;AACT,EAAE"}
+{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { DialogSurfaceState } from '@fluentui/react-dialog';\n\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropResetStyles = makeResetStyles({\n  inset: '0px',\n  position: 'fixed',\n  backgroundColor: tokens.colorBackgroundOverlay,\n});\n\nconst useBackdropStyles = makeStyles({\n  nested: {\n    backgroundColor: tokens.colorTransparentBackground,\n  },\n\n  drawerHidden: {\n    pointerEvents: 'none',\n  },\n});\n\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */\nexport const useOverlayDrawerSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n  'use no memo';\n\n  const { isNestedDialog, backdrop, open, unmountOnClose } = state;\n\n  const backdropResetStyles = useBackdropResetStyles();\n  const backdropStyles = useBackdropStyles();\n\n  const mountedAndClosed = !unmountOnClose && !open;\n\n  if (backdrop) {\n    backdrop.className = mergeClasses(\n      backdropResetStyles,\n      isNestedDialog && backdropStyles.nested,\n      mountedAndClosed && backdropStyles.drawerHidden,\n      backdrop.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","useBackdropResetStyles","inset","position","backgroundColor","colorBackgroundOverlay","useBackdropStyles","nested","colorTransparentBackground","drawerHidden","pointerEvents","useOverlayDrawerSurfaceStyles_unstable","state","isNestedDialog","backdrop","open","unmountOnClose","backdropResetStyles","backdropStyles","mountedAndClosed","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAG/C;;CAEC,GACD,MAAMC,yBAAyBJ,gBAAgB;IAC7CK,OAAO;IACPC,UAAU;IACVC,iBAAiBJ,OAAOK,sBAAsB;AAChD;AAEA,MAAMC,oBAAoBR,WAAW;IACnCS,QAAQ;QACNH,iBAAiBJ,OAAOQ,0BAA0B;IACpD;IAEAC,cAAc;QACZC,eAAe;IACjB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,yCAAyC,CAACC;IACrD;IAEA,MAAM,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,cAAc,EAAE,GAAGJ;IAE3D,MAAMK,sBAAsBhB;IAC5B,MAAMiB,iBAAiBZ;IAEvB,MAAMa,mBAAmB,CAACH,kBAAkB,CAACD;IAE7C,IAAID,UAAU;QACZA,SAASM,SAAS,GAAGrB,aACnBkB,qBACAJ,kBAAkBK,eAAeX,MAAM,EACvCY,oBAAoBD,eAAeT,YAAY,EAC/CK,SAASM,SAAS;IAEtB;IAEA,OAAOR;AACT,EAAE"}

package/lib/components/OverlayDrawer/useOverlayDrawer.js

@@ -23,8 +23,8 @@ const STATIC_MOTION = {
  * @param props - props from this instance of OverlayDrawer
  * @param ref - reference to root HTMLElement of OverlayDrawer
  */ export const useOverlayDrawer_unstable = (props, ref)=>{
-    const { open, size, position } = useDrawerDefaultProps(props);
-    const { backdropMotion, modalType = 'modal', inertTrapFocus, onOpenChange, surfaceMotion, mountNode } = props;
+    const { open, size, position, unmountOnClose } = useDrawerDefaultProps(props);
+    const { modalType = 'modal', inertTrapFocus, onOpenChange, backdropMotion, surfaceMotion, mountNode } = props;
     const { dir, targetDocument } = useFluent();
     const { element: mountNodeElement } = toMountNodeProps(mountNode);
     const hasMountNodeElement = Boolean(mountNodeElement && (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body) !== mountNodeElement);
@@ -33,6 +33,7 @@ const STATIC_MOTION = {
     const root = slot.always({
         ...props,
         ref,
+        unmountOnClose,
         backdrop: hasCustomBackdrop ? {
             ...backdropProps
         } : null,
@@ -40,16 +41,14 @@ const STATIC_MOTION = {
             size
         })
     }, {
-        /**
-       * Drawer accepts a `div` or `aside` element type, but Dialog only accepts a `div` element type.
-       * We need to cast the ref to a `div` element type to not break Dialog's ref type.
-       */ elementType: OverlayDrawerSurface
+        elementType: OverlayDrawerSurface
     });
     const dialog = slot.always({
         open,
         onOpenChange,
         inertTrapFocus,
         modalType,
+        unmountOnClose,
         surfaceMotion: mergePresenceSlots(surfaceMotion, OverlayDrawerMotion, {
             position,
             size,
@@ -73,6 +72,7 @@ const STATIC_MOTION = {
         size,
         position,
         hasMountNodeElement,
+        unmountOnClose,
         // Deprecated props
         mountNode,
         motion: STATIC_MOTION

package/lib/components/OverlayDrawer/useOverlayDrawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/OverlayDrawer/useOverlayDrawer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Dialog } from '@fluentui/react-dialog';\nimport { slot } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { toMountNodeProps } from '@fluentui/react-portal';\n\nimport { OverlayDrawerMotion, OverlaySurfaceBackdropMotion } from '../../shared/drawerMotions';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { OverlayDrawerProps, OverlayDrawerState } from './OverlayDrawer.types';\nimport { OverlayDrawerSurface } from './OverlayDrawerSurface';\nimport { mergePresenceSlots } from '../../shared/drawerMotionUtils';\n\nconst STATIC_MOTION = {\n  active: true,\n  canRender: true,\n  ref: React.createRef<HTMLDivElement>(),\n  type: 'idle' as const,\n};\n\n/**\n * Create the state required to render OverlayDrawer.\n *\n * The returned state can be modified with hooks such as useOverlayDrawerStyles_unstable,\n * before being passed to renderOverlayDrawer_unstable.\n *\n * @param props - props from this instance of OverlayDrawer\n * @param ref - reference to root HTMLElement of OverlayDrawer\n */\nexport const useOverlayDrawer_unstable = (\n  props: OverlayDrawerProps,\n  ref: React.Ref<HTMLElement>,\n): OverlayDrawerState => {\n  const { open, size, position } = useDrawerDefaultProps(props);\n  const { backdropMotion, modalType = 'modal', inertTrapFocus, onOpenChange, surfaceMotion, mountNode } = props;\n  const { dir, targetDocument } = useFluent();\n  const { element: mountNodeElement } = toMountNodeProps(mountNode);\n  const hasMountNodeElement = Boolean(mountNodeElement && targetDocument?.body !== mountNodeElement);\n\n  const backdropProps = slot.resolveShorthand(props.backdrop);\n  const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;\n\n  const root = slot.always(\n    {\n      ...props,\n      ref,\n      backdrop: hasCustomBackdrop ? { ...backdropProps } : null,\n      backdropMotion: mergePresenceSlots(backdropMotion, OverlaySurfaceBackdropMotion, { size }),\n    },\n    {\n      /**\n       * Drawer accepts a `div` or `aside` element type, but Dialog only accepts a `div` element type.\n       * We need to cast the ref to a `div` element type to not break Dialog's ref type.\n       */\n      elementType: OverlayDrawerSurface as unknown as 'div',\n    },\n  );\n\n  const dialog = slot.always(\n    {\n      open,\n      onOpenChange,\n      inertTrapFocus,\n      modalType,\n      surfaceMotion: mergePresenceSlots(surfaceMotion, OverlayDrawerMotion, { position, size, dir }),\n      /**\n       * children is not needed here because we construct the children in the render function,\n       * but it's required by DialogProps\n       */\n      children: null as unknown as JSXElement,\n    },\n    {\n      elementType: Dialog,\n    },\n  );\n\n  return {\n    components: {\n      root: OverlayDrawerSurface,\n      dialog: Dialog,\n    },\n\n    root,\n    dialog,\n\n    open,\n    size,\n    position,\n    hasMountNodeElement,\n\n    // Deprecated props\n    mountNode,\n    motion: STATIC_MOTION,\n  };\n};\n"],"names":["React","Dialog","slot","useFluent_unstable","useFluent","toMountNodeProps","OverlayDrawerMotion","OverlaySurfaceBackdropMotion","useDrawerDefaultProps","OverlayDrawerSurface","mergePresenceSlots","STATIC_MOTION","active","canRender","ref","createRef","type","useOverlayDrawer_unstable","props","open","size","position","backdropMotion","modalType","inertTrapFocus","onOpenChange","surfaceMotion","mountNode","dir","targetDocument","element","mountNodeElement","hasMountNodeElement","Boolean","body","backdropProps","resolveShorthand","backdrop","hasCustomBackdrop","root","always","elementType","dialog","children","components","motion"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,IAAI,QAAQ,4BAA4B;AAEjD,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,gBAAgB,QAAQ,yBAAyB;AAE1D,SAASC,mBAAmB,EAAEC,4BAA4B,QAAQ,6BAA6B;AAC/F,SAASC,qBAAqB,QAAQ,qCAAqC;AAE3E,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,mBAAKd,MAAMe,SAAS;IACpBC,MAAM;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAJ;IAEA,MAAM,EAAEK,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGb,sBAAsBU;IACvD,MAAM,EAAEI,cAAc,EAAEC,YAAY,OAAO,EAAEC,cAAc,EAAEC,YAAY,EAAEC,aAAa,EAAEC,SAAS,EAAE,GAAGT;IACxG,MAAM,EAAEU,GAAG,EAAEC,cAAc,EAAE,GAAGzB;IAChC,MAAM,EAAE0B,SAASC,gBAAgB,EAAE,GAAG1B,iBAAiBsB;IACvD,MAAMK,sBAAsBC,QAAQF,oBAAoBF,CAAAA,2BAAAA,qCAAAA,eAAgBK,IAAI,MAAKH;IAEjF,MAAMI,gBAAgBjC,KAAKkC,gBAAgB,CAAClB,MAAMmB,QAAQ;IAC1D,MAAMC,oBAAoBf,cAAc,eAAeY,kBAAkB;IAEzE,MAAMI,OAAOrC,KAAKsC,MAAM,CACtB;QACE,GAAGtB,KAAK;QACRJ;QACAuB,UAAUC,oBAAoB;YAAE,GAAGH,aAAa;QAAC,IAAI;QACrDb,gBAAgBZ,mBAAmBY,gBAAgBf,8BAA8B;YAAEa;QAAK;IAC1F,GACA;QACE;;;OAGC,GACDqB,aAAahC;IACf;IAGF,MAAMiC,SAASxC,KAAKsC,MAAM,CACxB;QACErB;QACAM;QACAD;QACAD;QACAG,eAAehB,mBAAmBgB,eAAepB,qBAAqB;YAAEe;YAAUD;YAAMQ;QAAI;QAC5F;;;OAGC,GACDe,UAAU;IACZ,GACA;QACEF,aAAaxC;IACf;IAGF,OAAO;QACL2C,YAAY;YACVL,MAAM9B;YACNiC,QAAQzC;QACV;QAEAsC;QACAG;QAEAvB;QACAC;QACAC;QACAW;QAEA,mBAAmB;QACnBL;QACAkB,QAAQlC;IACV;AACF,EAAE"}
+{"version":3,"sources":["../src/components/OverlayDrawer/useOverlayDrawer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Dialog } from '@fluentui/react-dialog';\nimport { slot } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { toMountNodeProps } from '@fluentui/react-portal';\n\nimport { OverlayDrawerMotion, OverlaySurfaceBackdropMotion } from '../../shared/drawerMotions';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { OverlayDrawerProps, OverlayDrawerState } from './OverlayDrawer.types';\nimport { OverlayDrawerSurface } from './OverlayDrawerSurface';\nimport { mergePresenceSlots } from '../../shared/drawerMotionUtils';\n\nconst STATIC_MOTION = {\n  active: true,\n  canRender: true,\n  ref: React.createRef<HTMLDivElement>(),\n  type: 'idle' as const,\n};\n\n/**\n * Create the state required to render OverlayDrawer.\n *\n * The returned state can be modified with hooks such as useOverlayDrawerStyles_unstable,\n * before being passed to renderOverlayDrawer_unstable.\n *\n * @param props - props from this instance of OverlayDrawer\n * @param ref - reference to root HTMLElement of OverlayDrawer\n */\nexport const useOverlayDrawer_unstable = (\n  props: OverlayDrawerProps,\n  ref: React.Ref<HTMLElement>,\n): OverlayDrawerState => {\n  const { open, size, position, unmountOnClose } = useDrawerDefaultProps(props);\n  const { modalType = 'modal', inertTrapFocus, onOpenChange, backdropMotion, surfaceMotion, mountNode } = props;\n  const { dir, targetDocument } = useFluent();\n  const { element: mountNodeElement } = toMountNodeProps(mountNode);\n  const hasMountNodeElement = Boolean(mountNodeElement && targetDocument?.body !== mountNodeElement);\n\n  const backdropProps = slot.resolveShorthand(props.backdrop);\n  const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;\n\n  const root = slot.always(\n    {\n      ...props,\n      ref,\n      unmountOnClose,\n      backdrop: hasCustomBackdrop ? { ...backdropProps } : null,\n      backdropMotion: mergePresenceSlots(backdropMotion, OverlaySurfaceBackdropMotion, { size }),\n    },\n    {\n      elementType: OverlayDrawerSurface,\n    },\n  );\n\n  const dialog = slot.always(\n    {\n      open,\n      onOpenChange,\n      inertTrapFocus,\n      modalType,\n      unmountOnClose,\n      surfaceMotion: mergePresenceSlots(surfaceMotion, OverlayDrawerMotion, { position, size, dir }),\n      /**\n       * children is not needed here because we construct the children in the render function,\n       * but it's required by DialogProps\n       */\n      children: null as unknown as JSXElement,\n    },\n    {\n      elementType: Dialog,\n    },\n  );\n\n  return {\n    components: {\n      root: OverlayDrawerSurface,\n      dialog: Dialog,\n    },\n\n    root,\n    dialog,\n\n    open,\n    size,\n    position,\n    hasMountNodeElement,\n    unmountOnClose,\n\n    // Deprecated props\n    mountNode,\n    motion: STATIC_MOTION,\n  };\n};\n"],"names":["React","Dialog","slot","useFluent_unstable","useFluent","toMountNodeProps","OverlayDrawerMotion","OverlaySurfaceBackdropMotion","useDrawerDefaultProps","OverlayDrawerSurface","mergePresenceSlots","STATIC_MOTION","active","canRender","ref","createRef","type","useOverlayDrawer_unstable","props","open","size","position","unmountOnClose","modalType","inertTrapFocus","onOpenChange","backdropMotion","surfaceMotion","mountNode","dir","targetDocument","element","mountNodeElement","hasMountNodeElement","Boolean","body","backdropProps","resolveShorthand","backdrop","hasCustomBackdrop","root","always","elementType","dialog","children","components","motion"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,IAAI,QAAQ,4BAA4B;AAEjD,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,gBAAgB,QAAQ,yBAAyB;AAE1D,SAASC,mBAAmB,EAAEC,4BAA4B,QAAQ,6BAA6B;AAC/F,SAASC,qBAAqB,QAAQ,qCAAqC;AAE3E,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,mBAAKd,MAAMe,SAAS;IACpBC,MAAM;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAJ;IAEA,MAAM,EAAEK,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGd,sBAAsBU;IACvE,MAAM,EAAEK,YAAY,OAAO,EAAEC,cAAc,EAAEC,YAAY,EAAEC,cAAc,EAAEC,aAAa,EAAEC,SAAS,EAAE,GAAGV;IACxG,MAAM,EAAEW,GAAG,EAAEC,cAAc,EAAE,GAAG1B;IAChC,MAAM,EAAE2B,SAASC,gBAAgB,EAAE,GAAG3B,iBAAiBuB;IACvD,MAAMK,sBAAsBC,QAAQF,oBAAoBF,CAAAA,2BAAAA,qCAAAA,eAAgBK,IAAI,MAAKH;IAEjF,MAAMI,gBAAgBlC,KAAKmC,gBAAgB,CAACnB,MAAMoB,QAAQ;IAC1D,MAAMC,oBAAoBhB,cAAc,eAAea,kBAAkB;IAEzE,MAAMI,OAAOtC,KAAKuC,MAAM,CACtB;QACE,GAAGvB,KAAK;QACRJ;QACAQ;QACAgB,UAAUC,oBAAoB;YAAE,GAAGH,aAAa;QAAC,IAAI;QACrDV,gBAAgBhB,mBAAmBgB,gBAAgBnB,8BAA8B;YAAEa;QAAK;IAC1F,GACA;QACEsB,aAAajC;IACf;IAGF,MAAMkC,SAASzC,KAAKuC,MAAM,CACxB;QACEtB;QACAM;QACAD;QACAD;QACAD;QACAK,eAAejB,mBAAmBiB,eAAerB,qBAAqB;YAAEe;YAAUD;YAAMS;QAAI;QAC5F;;;OAGC,GACDe,UAAU;IACZ,GACA;QACEF,aAAazC;IACf;IAGF,OAAO;QACL4C,YAAY;YACVL,MAAM/B;YACNkC,QAAQ1C;QACV;QAEAuC;QACAG;QAEAxB;QACAC;QACAC;QACAY;QACAX;QAEA,mBAAmB;QACnBM;QACAkB,QAAQnC;IACV;AACF,EAAE"}

package/lib/shared/DrawerBase.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/shared/DrawerBase.types.ts"],"sourcesContent":["import * as React from 'react';\n\ntype MotionType = 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';\n\ntype MotionState<Element extends HTMLElement = HTMLElement> = {\n  /**\n   * Ref to the element.\n   */\n  ref: React.Ref<Element>;\n\n  /**\n   * Current state of the element.\n   *\n   * - `unmounted` - The element is not yet rendered or can be safely removed from the DOM.\n   * - `entering` - The element is performing enter animation.\n   * - `entered` - The element has finished enter animation.\n   * - `idle` - The element is currently not animating, but rendered on screen.\n   * - `exiting` - The element is performing exit animation.\n   * - `exited` - The element has finished exit animation.\n   */\n  type: MotionType;\n\n  /**\n   * Indicates whether the component can be rendered.\n   * Useful to render the element before animating it or to remove it from the DOM after exit animation.\n   */\n  canRender: boolean;\n\n  /**\n   * Indicates whether the component is ready to receive a CSS transition className.\n   * Useful to apply CSS transitions when the element is mounted and ready to be animated.\n   */\n  active: boolean;\n};\n\nexport type DrawerBaseProps = {\n  /**\n   * Position of the drawer.\n   *\n   * Note: 'bottom' does not supports size, but it supports customized height.\n   *\n   * @default 'start'\n   */\n  position?: 'start' | 'end' | 'bottom';\n\n  /**\n   * Size of the drawer.\n   *\n   * - 'small' - Drawer is 320px wide.\n   * - 'medium' - Drawer is 592px wide.\n   * - 'large' - Drawer is 940px wide.\n   * - 'full' - Drawer is 100vw wide.\n   *\n   * @default 'small'\n   */\n  size?: 'small' | 'medium' | 'large' | 'full';\n\n  /**\n   * Controls the open state of the Drawer\n   *\n   * @default false\n   */\n  open?: boolean;\n};\n\nexport type DrawerBaseState = Required<Pick<DrawerBaseProps, 'position' | 'size'>> & {\n  /**\n   * @deprecated Passed values will be static.\n   */\n  motion: MotionState<HTMLElement>;\n\n  open?: boolean;\n};\n\nexport type DrawerScrollState = 'none' | 'top' | 'middle' | 'bottom';\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/shared/DrawerBase.types.ts"],"sourcesContent":["import * as React from 'react';\n\ntype MotionType = 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';\n\ntype MotionState<Element extends HTMLElement = HTMLElement> = {\n  /**\n   * Ref to the element.\n   */\n  ref: React.Ref<Element>;\n\n  /**\n   * Current state of the element.\n   *\n   * - `unmounted` - The element is not yet rendered or can be safely removed from the DOM.\n   * - `entering` - The element is performing enter animation.\n   * - `entered` - The element has finished enter animation.\n   * - `idle` - The element is currently not animating, but rendered on screen.\n   * - `exiting` - The element is performing exit animation.\n   * - `exited` - The element has finished exit animation.\n   */\n  type: MotionType;\n\n  /**\n   * Indicates whether the component can be rendered.\n   * Useful to render the element before animating it or to remove it from the DOM after exit animation.\n   */\n  canRender: boolean;\n\n  /**\n   * Indicates whether the component is ready to receive a CSS transition className.\n   * Useful to apply CSS transitions when the element is mounted and ready to be animated.\n   */\n  active: boolean;\n};\n\nexport type DrawerBaseProps = {\n  /**\n   * Position of the drawer.\n   *\n   * Note: 'bottom' does not supports size, but it supports customized height.\n   *\n   * @default 'start'\n   */\n  position?: 'start' | 'end' | 'bottom';\n\n  /**\n   * Size of the drawer.\n   *\n   * - 'small' - Drawer is 320px wide.\n   * - 'medium' - Drawer is 592px wide.\n   * - 'large' - Drawer is 940px wide.\n   * - 'full' - Drawer is 100vw wide.\n   *\n   * @default 'small'\n   */\n  size?: 'small' | 'medium' | 'large' | 'full';\n\n  /**\n   * Controls the open state of the Drawer\n   *\n   * @default false\n   */\n  open?: boolean;\n\n  /**\n   * Decides whether the drawer should be removed from the DOM tree when it is closed.\n   * This can be useful when dealing with components that may contain state that should not\n   * be reset when the drawer is closed.\n   *\n   * @default true\n   */\n  unmountOnClose?: boolean;\n};\n\nexport type DrawerBaseState = Required<Pick<DrawerBaseProps, 'position' | 'size'>> & {\n  /**\n   * @deprecated Passed values will be static.\n   */\n  motion: MotionState<HTMLElement>;\n\n  open?: boolean;\n\n  unmountOnClose?: boolean;\n};\n\nexport type DrawerScrollState = 'none' | 'top' | 'middle' | 'bottom';\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}