@fluentui/react-drawer 9.10.9 → 9.11.1

package/lib/shared/drawerMotions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/shared/drawerMotions.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';\nimport { tokens } from '@fluentui/react-theme';\nimport { ProviderContextValue_unstable as FluentProviderContextValue } from '@fluentui/react-shared-contexts';\n\nimport type { DrawerBaseProps } from './DrawerBase.types';\nimport { drawerCSSVars } from './useDrawerBaseStyles.styles';\nimport { fadeAtom } from '@fluentui/react-motion-components-preview';\n\nexport type DrawerMotionParams = Required<\n  Pick<DrawerBaseProps, 'size' | 'position'> & Pick<FluentProviderContextValue, 'dir'>\n>;\nexport type OverlayDrawerSurfaceMotionParams = Required<Pick<DrawerBaseProps, 'size'>>;\n\nconst durations: Record<NonNullable<DrawerBaseProps['size']>, number> = {\n  small: motionTokens.durationGentle,\n  medium: motionTokens.durationSlow,\n  large: motionTokens.durationSlower,\n  full: motionTokens.durationUltraSlow,\n};\n\n/**\n * @internal\n */\nexport function getPositionTransform(\n  position: DrawerBaseProps['position'],\n  sizeVar: string,\n  dir: FluentProviderContextValue['dir'],\n): string {\n  const leftToRightTransform = `translate3d(var(${sizeVar}), 0, 0)`;\n  const rightToLeftTransform = `translate3d(calc(var(${sizeVar}) * -1), 0, 0)`;\n  const bottomToTopTransform = `translate3d(0, var(${sizeVar}), 0)`;\n\n  if (position === 'start') {\n    return dir === 'ltr' ? rightToLeftTransform : leftToRightTransform;\n  }\n\n  if (position === 'end') {\n    return dir === 'ltr' ? leftToRightTransform : rightToLeftTransform;\n  }\n\n  if (position === 'bottom') {\n    return bottomToTopTransform;\n  }\n\n  return 'translate3d(0, 0, 0)';\n}\n\n/**\n * @internal\n */\nexport const InlineDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n  const keyframes: Keyframe[] = [\n    {\n      /**\n       * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n       * The work will be done in the #32817\n       */\n      transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n      opacity: 0,\n    },\n    { transform: 'translate3d(0, 0, 0)', opacity: 1 },\n  ];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing: motionTokens.curveDecelerateMid,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing: motionTokens.curveAccelerateMin,\n    },\n  };\n});\n\n/**\n * @internal\n */\nexport const OverlayDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n  const keyframes: Keyframe[] = [\n    {\n      /**\n       * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n       * The work will be done in the #32817\n       */\n      transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n      boxShadow: `0px ${tokens.colorTransparentBackground}`,\n      opacity: 0,\n    },\n    {\n      transform: 'translate3d(0, 0, 0)',\n      boxShadow: tokens.shadow64,\n      opacity: 1,\n    },\n  ];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing: motionTokens.curveDecelerateMid,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing: motionTokens.curveAccelerateMin,\n    },\n  };\n});\n\n/**\n * @internal\n */\nexport const OverlaySurfaceBackdropMotion = createPresenceComponent(({ size }: OverlayDrawerSurfaceMotionParams) => {\n  const duration = durations[size];\n  const easing = motionTokens.curveLinear;\n\n  return {\n    enter: fadeAtom({ direction: 'enter', duration, easing }),\n    exit: fadeAtom({ direction: 'exit', duration, easing }),\n  };\n});\n"],"names":["createPresenceComponent","motionTokens","tokens","drawerCSSVars","fadeAtom","durations","small","durationGentle","medium","durationSlow","large","durationSlower","full","durationUltraSlow","getPositionTransform","position","sizeVar","dir","leftToRightTransform","rightToLeftTransform","bottomToTopTransform","InlineDrawerMotion","size","keyframes","transform","drawerSizeVar","opacity","duration","enter","easing","curveDecelerateMid","exit","reverse","curveAccelerateMin","OverlayDrawerMotion","boxShadow","colorTransparentBackground","shadow64","OverlaySurfaceBackdropMotion","curveLinear","direction"],"mappings":"AAAA,SAASA,uBAAuB,EAAEC,YAAY,QAAQ,yBAAyB;AAC/E,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,QAAQ,QAAQ,4CAA4C;AAOrE,MAAMC,YAAkE;IACtEC,OAAOL,aAAaM,cAAc;IAClCC,QAAQP,aAAaQ,YAAY;IACjCC,OAAOT,aAAaU,cAAc;IAClCC,MAAMX,aAAaY,iBAAiB;AACtC;AAEA;;CAEC,GACD,OAAO,SAASC,qBACdC,QAAqC,EACrCC,OAAe,EACfC,GAAsC;IAEtC,MAAMC,uBAAuB,CAAC,gBAAgB,EAAEF,QAAQ,QAAQ,CAAC;IACjE,MAAMG,uBAAuB,CAAC,qBAAqB,EAAEH,QAAQ,cAAc,CAAC;IAC5E,MAAMI,uBAAuB,CAAC,mBAAmB,EAAEJ,QAAQ,KAAK,CAAC;IAEjE,IAAID,aAAa,SAAS;QACxB,OAAOE,QAAQ,QAAQE,uBAAuBD;IAChD;IAEA,IAAIH,aAAa,OAAO;QACtB,OAAOE,QAAQ,QAAQC,uBAAuBC;IAChD;IAEA,IAAIJ,aAAa,UAAU;QACzB,OAAOK;IACT;IAEA,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,MAAMC,qBAAqBrB,wBAA4C,CAAC,EAAEe,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACpG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUZ,cAAcsB,aAAa,EAAER;YACvES,SAAS;QACX;QACA;YAAEF,WAAW;YAAwBE,SAAS;QAAE;KACjD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ5B,aAAa6B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ5B,aAAagC,kBAAkB;QACzC;IACF;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMC,sBAAsBlC,wBAA4C,CAAC,EAAEe,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACrG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUZ,cAAcsB,aAAa,EAAER;YACvEkB,WAAW,CAAC,IAAI,EAAEjC,OAAOkC,0BAA0B,EAAE;YACrDV,SAAS;QACX;QACA;YACEF,WAAW;YACXW,WAAWjC,OAAOmC,QAAQ;YAC1BX,SAAS;QACX;KACD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ5B,aAAa6B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ5B,aAAagC,kBAAkB;QACzC;IACF;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMK,+BAA+BtC,wBAAwB,CAAC,EAAEsB,IAAI,EAAoC;IAC7G,MAAMK,WAAWtB,SAAS,CAACiB,KAAK;IAChC,MAAMO,SAAS5B,aAAasC,WAAW;IAEvC,OAAO;QACLX,OAAOxB,SAAS;YAAEoC,WAAW;YAASb;YAAUE;QAAO;QACvDE,MAAM3B,SAAS;YAAEoC,WAAW;YAAQb;YAAUE;QAAO;IACvD;AACF,GAAG"}
+{"version":3,"sources":["../src/shared/drawerMotions.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';\nimport { tokens } from '@fluentui/react-theme';\nimport { ProviderContextValue_unstable as FluentProviderContextValue } from '@fluentui/react-shared-contexts';\n\nimport type { DrawerBaseProps } from './DrawerBase.types';\nimport { drawerCSSVars } from './useDrawerBaseStyles.styles';\nimport { fadeAtom } from '@fluentui/react-motion-components-preview';\n\nexport type DrawerMotionParams = Required<\n  Pick<DrawerBaseProps, 'size' | 'position'> & Pick<FluentProviderContextValue, 'dir'>\n>;\nexport type OverlayDrawerSurfaceMotionParams = Required<Pick<DrawerBaseProps, 'size'>>;\n\nconst durations: Record<NonNullable<DrawerBaseProps['size']>, number> = {\n  small: motionTokens.durationGentle,\n  medium: motionTokens.durationSlow,\n  large: motionTokens.durationSlower,\n  full: motionTokens.durationUltraSlow,\n};\n\n/**\n * @internal\n */\nexport function getPositionTransform(\n  position: DrawerBaseProps['position'],\n  sizeVar: string,\n  dir: FluentProviderContextValue['dir'],\n): string {\n  const leftToRightTransform = `translate3d(var(${sizeVar}), 0, 0)`;\n  const rightToLeftTransform = `translate3d(calc(var(${sizeVar}) * -1), 0, 0)`;\n  const bottomToTopTransform = `translate3d(0, var(${sizeVar}), 0)`;\n\n  if (position === 'start') {\n    return dir === 'ltr' ? rightToLeftTransform : leftToRightTransform;\n  }\n\n  if (position === 'end') {\n    return dir === 'ltr' ? leftToRightTransform : rightToLeftTransform;\n  }\n\n  if (position === 'bottom') {\n    return bottomToTopTransform;\n  }\n\n  return 'translate3d(0, 0, 0)';\n}\n\n/**\n * @internal\n */\nexport const InlineDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n  const keyframes: Keyframe[] = [\n    {\n      /**\n       * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n       * The work will be done in the #32817\n       */\n      transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n      opacity: 0,\n    },\n    {\n      transform: 'translate3d(0, 0, 0)',\n      opacity: 1,\n    },\n  ];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing: motionTokens.curveDecelerateMid,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing: motionTokens.curveAccelerateMin,\n    },\n  };\n});\n\n/**\n * @internal\n */\nexport const OverlayDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n  const keyframes: Keyframe[] = [\n    {\n      /**\n       * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n       * The work will be done in the #32817\n       */\n      transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n      boxShadow: `0px ${tokens.colorTransparentBackground}`,\n      opacity: 0,\n    },\n    {\n      transform: 'translate3d(0, 0, 0)',\n      boxShadow: tokens.shadow64,\n      opacity: 1,\n    },\n  ];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing: motionTokens.curveDecelerateMid,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing: motionTokens.curveAccelerateMin,\n    },\n  };\n});\n\n/**\n * @internal\n */\nexport const OverlaySurfaceBackdropMotion = createPresenceComponent(({ size }: OverlayDrawerSurfaceMotionParams) => {\n  const duration = durations[size];\n  const easing = motionTokens.curveLinear;\n\n  return {\n    enter: fadeAtom({ direction: 'enter', duration, easing }),\n    exit: fadeAtom({ direction: 'exit', duration, easing }),\n  };\n});\n"],"names":["createPresenceComponent","motionTokens","tokens","drawerCSSVars","fadeAtom","durations","small","durationGentle","medium","durationSlow","large","durationSlower","full","durationUltraSlow","getPositionTransform","position","sizeVar","dir","leftToRightTransform","rightToLeftTransform","bottomToTopTransform","InlineDrawerMotion","size","keyframes","transform","drawerSizeVar","opacity","duration","enter","easing","curveDecelerateMid","exit","reverse","curveAccelerateMin","OverlayDrawerMotion","boxShadow","colorTransparentBackground","shadow64","OverlaySurfaceBackdropMotion","curveLinear","direction"],"mappings":"AAAA,SAASA,uBAAuB,EAAEC,YAAY,QAAQ,yBAAyB;AAC/E,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,QAAQ,QAAQ,4CAA4C;AAOrE,MAAMC,YAAkE;IACtEC,OAAOL,aAAaM,cAAc;IAClCC,QAAQP,aAAaQ,YAAY;IACjCC,OAAOT,aAAaU,cAAc;IAClCC,MAAMX,aAAaY,iBAAiB;AACtC;AAEA;;CAEC,GACD,OAAO,SAASC,qBACdC,QAAqC,EACrCC,OAAe,EACfC,GAAsC;IAEtC,MAAMC,uBAAuB,CAAC,gBAAgB,EAAEF,QAAQ,QAAQ,CAAC;IACjE,MAAMG,uBAAuB,CAAC,qBAAqB,EAAEH,QAAQ,cAAc,CAAC;IAC5E,MAAMI,uBAAuB,CAAC,mBAAmB,EAAEJ,QAAQ,KAAK,CAAC;IAEjE,IAAID,aAAa,SAAS;QACxB,OAAOE,QAAQ,QAAQE,uBAAuBD;IAChD;IAEA,IAAIH,aAAa,OAAO;QACtB,OAAOE,QAAQ,QAAQC,uBAAuBC;IAChD;IAEA,IAAIJ,aAAa,UAAU;QACzB,OAAOK;IACT;IAEA,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,MAAMC,qBAAqBrB,wBAA4C,CAAC,EAAEe,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACpG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUZ,cAAcsB,aAAa,EAAER;YACvES,SAAS;QACX;QACA;YACEF,WAAW;YACXE,SAAS;QACX;KACD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ5B,aAAa6B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ5B,aAAagC,kBAAkB;QACzC;IACF;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMC,sBAAsBlC,wBAA4C,CAAC,EAAEe,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACrG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUZ,cAAcsB,aAAa,EAAER;YACvEkB,WAAW,CAAC,IAAI,EAAEjC,OAAOkC,0BAA0B,EAAE;YACrDV,SAAS;QACX;QACA;YACEF,WAAW;YACXW,WAAWjC,OAAOmC,QAAQ;YAC1BX,SAAS;QACX;KACD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ5B,aAAa6B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ5B,aAAagC,kBAAkB;QACzC;IACF;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMK,+BAA+BtC,wBAAwB,CAAC,EAAEsB,IAAI,EAAoC;IAC7G,MAAMK,WAAWtB,SAAS,CAACiB,KAAK;IAChC,MAAMO,SAAS5B,aAAasC,WAAW;IAEvC,OAAO;QACLX,OAAOxB,SAAS;YAAEoC,WAAW;YAASb;YAAUE;QAAO;QACvDE,MAAM3B,SAAS;YAAEoC,WAAW;YAAQb;YAAUE;QAAO;IACvD;AACF,GAAG"}

package/lib/shared/useDrawerDefaultProps.js

@@ -1,8 +1,9 @@
 export function useDrawerDefaultProps(props) {
-    const { open = false, size = 'small', position = 'start' } = props;
+    const { open = false, size = 'small', position = 'start', unmountOnClose = true } = props;
     return {
         size,
         position,
-        open
+        open,
+        unmountOnClose
     };
 }

package/lib/shared/useDrawerDefaultProps.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/shared/useDrawerDefaultProps.ts"],"sourcesContent":["import { DrawerBaseProps } from './DrawerBase.types';\n\nexport function useDrawerDefaultProps(props: DrawerBaseProps): {\n  size: NonNullable<DrawerBaseProps['size']>;\n  position: NonNullable<DrawerBaseProps['position']>;\n  open: boolean;\n} {\n  const { open = false, size = 'small', position = 'start' } = props;\n\n  return {\n    size,\n    position,\n    open,\n  };\n}\n"],"names":["useDrawerDefaultProps","props","open","size","position"],"mappings":"AAEA,OAAO,SAASA,sBAAsBC,KAAsB;IAK1D,MAAM,EAAEC,OAAO,KAAK,EAAEC,OAAO,OAAO,EAAEC,WAAW,OAAO,EAAE,GAAGH;IAE7D,OAAO;QACLE;QACAC;QACAF;IACF;AACF"}
+{"version":3,"sources":["../src/shared/useDrawerDefaultProps.ts"],"sourcesContent":["import { DrawerBaseProps } from './DrawerBase.types';\n\nexport function useDrawerDefaultProps(props: DrawerBaseProps): {\n  size: NonNullable<DrawerBaseProps['size']>;\n  position: NonNullable<DrawerBaseProps['position']>;\n  open: boolean;\n  unmountOnClose: boolean;\n} {\n  const { open = false, size = 'small', position = 'start', unmountOnClose = true } = props;\n\n  return {\n    size,\n    position,\n    open,\n    unmountOnClose,\n  };\n}\n"],"names":["useDrawerDefaultProps","props","open","size","position","unmountOnClose"],"mappings":"AAEA,OAAO,SAASA,sBAAsBC,KAAsB;IAM1D,MAAM,EAAEC,OAAO,KAAK,EAAEC,OAAO,OAAO,EAAEC,WAAW,OAAO,EAAEC,iBAAiB,IAAI,EAAE,GAAGJ;IAEpF,OAAO;QACLE;QACAC;QACAF;QACAG;IACF;AACF"}

package/lib-commonjs/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-commonjs/components/InlineDrawer/useInlineDrawer.js

@@ -23,10 +23,11 @@ const STATIC_MOTION = {
     type: 'idle'
 };
 const useInlineDrawer_unstable = (props, ref)=>{
-    const { size, position, open } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
+    const { size, position, open, unmountOnClose } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
     const { separator = false, surfaceMotion } = props;
     const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
-    const state = {
+    const [animationDirection, setAnimationDirection] = _react.useState(open ? 'enter' : 'exit');
+    return {
         components: {
             root: 'div',
             // casting from internal type that has required properties
@@ -36,7 +37,8 @@ const useInlineDrawer_unstable = (props, ref)=>{
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
             ...props,
-            ref
+            ref,
+            'aria-hidden': !unmountOnClose && !open ? true : undefined
         }), {
             elementType: 'div'
         }),
@@ -44,6 +46,8 @@ const useInlineDrawer_unstable = (props, ref)=>{
         position,
         size,
         separator,
+        unmountOnClose,
+        animationDirection,
         surfaceMotion: (0, _reactmotion.presenceMotionSlot)(surfaceMotion, {
             elementType: _drawerMotions.InlineDrawerMotion,
             defaultProps: {
@@ -51,11 +55,17 @@ const useInlineDrawer_unstable = (props, ref)=>{
                 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-commonjs/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;;;;;;;;;;;;iEAEuB,QAAQ;6BACI,yBAAyB;gCACb,4BAA4B;qCAC3B,kCAAkC;+BAEtB,6BAA6B;uCACnD,qCAAqC;AAG3E,MAAMQ,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,mBAAKX,OAAMY,SAAS;IACpBC,MAAM;AACR;AAWO,MAAMC,2BAA2B,CAACC,OAA0BJ;IACjE,MAAM,EAAEK,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAE,OAAGX,4CAAAA,EAAsBQ;IACvD,MAAM,EAAEI,YAAY,KAAK,EAAEC,aAAa,EAAE,GAAGL;IAC7C,MAAM,EAAEM,GAAG,EAAE,OAAGhB,uCAAAA;IAEhB,MAAMiB,QAA2B;QAC/BC,YAAY;YACVC,MAAM;YACN,0DAA0D;YAC1D,qDAAqD;YACrD,uFAAuF;YACvFJ,eAAed,iCAAAA;QACjB;QAEAkB,MAAMrB,oBAAAA,CAAKsB,MAAM,KACfvB,wCAAAA,EAAyB,OAAO;YAC9B,GAAGa,KAAK;YACRJ;QACF,IACA;YAAEe,aAAa;QAAM;QAGvBR;QACAD;QACAD;QACAG;QACAC,mBAAenB,+BAAAA,EAAuCmB,eAAe;YACnEM,aAAapB,iCAAAA;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;;;;;+BA2Bac;;;;;;;iEAzBU,QAAQ;6BACuB,yBAAyB;gCAChC,4BAA4B;qCAC3B,kCAAkC;+BAEtB,6BAA6B;uCACnD,qCAAqC;AAG3E,MAAMN,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,mBAAKX,OAAMY,SAAS;IACpBC,MAAM;AACR;AAWO,iCAAiC,CAACE,OAA0BJ;IACjE,MAAM,EAAEK,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,cAAc,EAAE,OAAGZ,4CAAAA,EAAsBQ;IACvE,MAAM,EAAEK,YAAY,KAAK,EAAEC,aAAa,EAAE,GAAGN;IAC7C,MAAM,EAAEO,GAAG,EAAE,OAAGjB,uCAAAA;IAChB,MAAM,CAACkB,oBAAoBC,sBAAsB,GAAGxB,OAAMyB,QAAQ,CAAoBP,OAAO,UAAU;IAEvG,OAAO;QACLQ,YAAY;YACVC,MAAM;YACN,0DAA0D;YAC1D,qDAAqD;YACrD,uFAAuF;YACvFN,eAAef,iCAAAA;QACjB;QAEAqB,MAAMxB,oBAAAA,CAAKyB,MAAM,KACf1B,wCAAAA,EAAyB,OAAO;YAC9B,GAAGa,KAAK;YACRJ;YACA,eAAe,CAACQ,kBAAkB,CAACD,OAAO,OAAOW;QACnD,IACA;YAAEC,aAAa;QAAM;QAGvBZ;QACAD;QACAD;QACAI;QACAD;QACAI;QACAF,mBAAepB,+BAAAA,EAAuCoB,eAAe;YACnES,aAAaxB,iCAAAA;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-commonjs/components/InlineDrawer/useInlineDrawerStyles.styles.js

@@ -59,6 +59,66 @@ const useDrawerRootStyles = /*#__PURE__*/ (0, _react.__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: [
@@ -93,7 +153,27 @@ const useDrawerRootStyles = /*#__PURE__*/ (0, _react.__styles)({
             }
         ],
         ".fly5x3f{width:100%;}",
-        ".fub80nq{height:var(--fui-Drawer--size);}"
+        ".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) {
@@ -111,11 +191,23 @@ 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;
+    }
+}
 const useInlineDrawerStyles_unstable = (state)=>{
     'use no memo';
     const resetStyles = useDrawerResetStyles();
     const baseClassNames = (0, _useDrawerBaseStylesstyles.useDrawerBaseClassNames)(state);
     const rootStyles = useDrawerRootStyles();
-    state.root.className = (0, _react.mergeClasses)(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], state.root.className);
+    state.root.className = (0, _react.mergeClasses)(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], state.animationDirection === 'exit' && getAnimationExitClass(state, rootStyles), state.root.className);
     return state;
 };

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

@@ -1 +1 @@
-{"version":3,"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"],"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"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICO,sBAAsB;;;IA4ClBkC,8BAA8B;;;;uBA/CW,gBAAgB;4BACnD,uBAAuB;2CAC8B,yCAAyC;AAC9G,+BAA+B;IAClCjC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,GAAA,WAAA,OAAGT,oBAAA,EAAA,WAAA,MAAA;IAAA;CAG5B,CAAC;AACF;;CAEA,GAAI,MAAMU,WAAW,GAAG,CAAA,UAAA,EAAaP,kBAAM,CAACQ,uBAAuB,EAAE;AACrE,MAAMC,mBAAmB,GAAA,WAAA,OAAGX,eAAA,EAAA;IAAAY,cAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,eAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,KAAA,EAAA,CAAA;IAAAC,GAAA,EAAA,CAAA;IAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;AAAA,CAgB3B,CAAC;AACF,SAASC,iBAAiBA,CAACC,KAAK,EAAEC,UAAU,EAAE;IAC1C,IAAI,CAACD,KAAK,CAACE,SAAS,EAAE;QAClB,OAAOC,SAAS;IACpB;IACA,OAAOH,KAAK,CAACI,QAAQ;QACjB,KAAK,OAAO;YACR,OAAOH,UAAU,CAACxB,cAAc;QACpC,KAAK,KAAK;YACN,OAAOwB,UAAU,CAACnB,YAAY;QAClC,KAAK,QAAQ;YACT,OAAOmB,UAAU,CAACd,eAAe;QACrC;YACI,OAAOgB,SAAS;IACxB;AACJ;AAGW,wCAAwCH,KAAK,IAAG;IACvD,aAAa;IACb,MAAMM,WAAW,GAAGjC,oBAAoB,CAAC,CAAC;IAC1C,MAAMkC,cAAc,OAAGrC,kDAAuB,EAAC8B,KAAK,CAAC;IACrD,MAAMQ,UAAU,GAAGhC,mBAAmB,CAAC,CAAC;IACxCwB,KAAK,CAAC5B,IAAI,CAACqC,SAAS,OAAG3C,mBAAY,EAACK,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;IACrL,OAAOT,KAAK;AAChB,CAAC"}
+{"version":3,"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"],"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"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICO,sBAAsB;;;kCAoEY;eAA9B2C;;;uBAvEyC,gBAAgB;4BACnD,uBAAuB;2CAC8B,yCAAyC;AAC9G,+BAA+B;IAClC1C,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,GAAA,WAAA,OAAGT,oBAAA,EAAA,WAAA,MAAA;IAAA;CAG5B,CAAC;AACF;;CAEA,GAAI,MAAMU,WAAW,GAAG,CAAA,UAAA,EAAaP,kBAAM,CAACQ,uBAAuB,EAAE;AACrE,MAAMC,mBAAmB,GAAA,WAAA,OAAGX,eAAA,EAAA;IAAAY,cAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,eAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,KAAA,EAAA,CAAA;IAAAC,GAAA,EAAA,CAAA;IAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,kBAAA,EAAA;QAAAF,MAAA,EAAA;QAAAG,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAf,OAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAJ,MAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAW,MAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAY,MAAA,EAAA;IAAA;IAAAC,gBAAA,EAAA;QAAAR,MAAA,EAAA;QAAAG,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAf,OAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAJ,MAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAW,MAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAY,MAAA,EAAA;IAAA;IAAAE,mBAAA,EAAA;QAAAR,OAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAf,OAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAJ,MAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAW,MAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAY,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAG,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CA4B3B,CAAC;AACF,SAASC,iBAAiBA,CAACC,KAAK,EAAEC,UAAU,EAAE;IAC1C,IAAI,CAACD,KAAK,CAACE,SAAS,EAAE;QAClB,OAAOC,SAAS;IACpB;IACA,OAAOH,KAAK,CAACI,QAAQ;QACjB,KAAK,OAAO;YACR,OAAOH,UAAU,CAAChC,cAAc;QACpC,KAAK,KAAK;YACN,OAAOgC,UAAU,CAAC3B,YAAY;QAClC,KAAK,QAAQ;YACT,OAAO2B,UAAU,CAACtB,eAAe;QACrC;YACI,OAAOwB,SAAS;IACxB;AACJ;AACA,SAASE,qBAAqBA,CAACL,KAAK,EAAEC,UAAU,EAAE;IAC9C,OAAOD,KAAK,CAACI,QAAQ;QACjB,KAAK,OAAO;YACR,OAAOH,UAAU,CAACZ,kBAAkB;QACxC,KAAK,KAAK;YACN,OAAOY,UAAU,CAACN,gBAAgB;QACtC,KAAK,QAAQ;YACT,OAAOM,UAAU,CAACL,mBAAmB;QACzC;YACI,OAAOO,SAAS;IACxB;AACJ;AAGW,wCAAwCH,KAAK,IAAG;IACvD,aAAa;IACb,MAAMO,WAAW,GAAG1C,oBAAoB,CAAC,CAAC;IAC1C,MAAM2C,cAAc,OAAG9C,kDAAuB,EAACsC,KAAK,CAAC;IACrD,MAAMS,UAAU,GAAGzC,mBAAmB,CAAC,CAAC;IACxCgC,KAAK,CAACpC,IAAI,CAAC8C,SAAS,OAAGpD,mBAAY,EAACK,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;IACtQ,OAAOV,KAAK;AAChB,CAAC"}

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

@@ -45,6 +45,18 @@ const useDrawerRootStyles = (0, _react.makeStyles)({
     bottom: {
         width: '100%',
         height: `var(${_useDrawerBaseStylesstyles.drawerCSSVars.drawerSizeVar})`
+    },
+    /* Animation exit states */ animationExitStart: {
+        width: '0',
+        border: 'none'
+    },
+    animationExitEnd: {
+        width: '0',
+        border: 'none'
+    },
+    animationExitBottom: {
+        height: '0',
+        border: 'none'
     }
 });
 function getSeparatorClass(state, classNames) {
@@ -62,11 +74,23 @@ 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;
+    }
+}
 const useInlineDrawerStyles_unstable = (state)=>{
     'use no memo';
     const resetStyles = useDrawerResetStyles();
     const baseClassNames = (0, _useDrawerBaseStylesstyles.useDrawerBaseClassNames)(state);
     const rootStyles = useDrawerRootStyles();
-    state.root.className = (0, _react.mergeClasses)(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], state.root.className);
+    state.root.className = (0, _react.mergeClasses)(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], state.animationDirection === 'exit' && getAnimationExitClass(state, rootStyles), state.root.className);
     return state;
 };

package/lib-commonjs/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;;;;;;;;;;;;IASaO,sBAAAA;;;IAmDAwB,8BAAAA;;;;uBA1D6C,iBAAiB;4BAEpD,wBAAwB;2CAG6B,0CAA0C;AAE/G,+BAAyF;IAC9FvB,MAAM;AACR,EAAE;AAEF,MAAMC,2BAAuBT,sBAAAA,EAAgB;IAC3C,GAAGK,8CAAmB;IACtBK,UAAU;AACZ;AAEA;;CAEC,GACD,MAAMC,cAAc,CAAC,UAAU,EAAER,kBAAAA,CAAOS,uBAAuB,EAAE;AACjE,MAAMC,0BAAsBZ,iBAAAA,EAAW;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,wCAAAA,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;AAKO,uCAAuC,CAACH;IAC7C;IAEA,MAAMK,cAAcvB;IACpB,MAAMwB,qBAAiB3B,kDAAAA,EAAwBqB;IAC/C,MAAMO,aAAarB;IAEnBc,MAAMnB,IAAI,CAAC2B,SAAS,OAAGjC,mBAAAA,EACrBK,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;;;;;;;;;;;;IASaO,sBAAAA;;;kCAiFA6B;;;;uBAxF6C,iBAAiB;4BAEpD,wBAAwB;2CAG6B,0CAA0C;AAE/G,+BAAyF;IAC9F5B,MAAM;AACR,EAAE;AAEF,MAAMC,2BAAuBT,sBAAAA,EAAgB;IAC3C,GAAGK,8CAAmB;IACtBK,UAAU;AACZ;AAEA;;CAEC,GACD,MAAMC,cAAc,CAAC,UAAU,EAAER,kBAAAA,CAAOS,uBAAuB,EAAE;AACjE,MAAMC,0BAAsBZ,iBAAAA,EAAW;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,wCAAAA,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;AAKO,MAAME,iCAAiC,CAACL;IAC7C;IAEA,MAAMM,cAAc5B;IACpB,MAAM6B,qBAAiBhC,kDAAAA,EAAwByB;IAC/C,MAAMQ,aAAa1B;IAEnBkB,MAAMvB,IAAI,CAACgC,SAAS,OAAGtC,mBAAAA,EACrBK,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-commonjs/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-commonjs/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js

@@ -18,18 +18,24 @@ const _react = require("@griffel/react");
 const useBackdropStyles = /*#__PURE__*/ (0, _react.__styles)({
     nested: {
         De3pzq: "f1c21dwh"
+    },
+    drawerHidden: {
+        Bkecrkj: "f1aehjj5"
     }
 }, {
     d: [
-        ".f1c21dwh{background-color:var(--colorTransparentBackground);}"
+        ".f1c21dwh{background-color:var(--colorTransparentBackground);}",
+        ".f1aehjj5{pointer-events:none;}"
     ]
 });
 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 = (0, _react.mergeClasses)(backdropResetStyles, state.isNestedDialog && backdropStyles.nested, state.backdrop.className);
+    const mountedAndClosed = !unmountOnClose && !open;
+    if (backdrop) {
+        backdrop.className = (0, _react.mergeClasses)(backdropResetStyles, isNestedDialog && backdropStyles.nested, mountedAndClosed && backdropStyles.drawerHidden, backdrop.className);
     }
     return state;
 };

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

@@ -1 +1 @@
-{"version":3,"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"],"names":["__resetStyles","__styles","mergeClasses","tokens","useBackdropResetStyles","useBackdropStyles","nested","De3pzq","d","useOverlayDrawerSurfaceStyles_unstable","state","backdropResetStyles","backdropStyles","backdrop","className","isNestedDialog"],"mappings":"AAAA,YAAY;;;;;+BAiBKS,sCAAsC;;;;;;uBAhBG,gBAAgB;AAE1E;;CAEA,GAAI,MAAML,sBAAsB,GAAA,WAAA,OAAGJ,oBAAA,EAAA,WAAA,MAAA;IAAA;CAIlC,CAAC;AACF,MAAMK,iBAAiB,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAK,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAIzB,CAAC;AAGS,gDAAgDE,KAAK,IAAG;IAC/D,aAAa;IACb,MAAMC,mBAAmB,GAAGP,sBAAsB,CAAC,CAAC;IACpD,MAAMQ,cAAc,GAAGP,iBAAiB,CAAC,CAAC;IAC1C,IAAIK,KAAK,CAACG,QAAQ,EAAE;QAChBH,KAAK,CAACG,QAAQ,CAACC,SAAS,OAAGZ,mBAAY,EAACS,mBAAmB,EAAED,KAAK,CAACK,cAAc,IAAIH,cAAc,CAACN,MAAM,EAAEI,KAAK,CAACG,QAAQ,CAACC,SAAS,CAAC;IACzI;IACA,OAAOJ,KAAK;AAChB,CAAC"}
+{"version":3,"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"],"names":["__resetStyles","__styles","mergeClasses","tokens","useBackdropResetStyles","useBackdropStyles","nested","De3pzq","drawerHidden","Bkecrkj","d","useOverlayDrawerSurfaceStyles_unstable","state","isNestedDialog","backdrop","open","unmountOnClose","backdropResetStyles","backdropStyles","mountedAndClosed","className"],"mappings":"AAAA,YAAY;;;;;+BAoBKW,sCAAsC;;;;;;uBAnBG,gBAAgB;AAE1E;;CAEA,GAAI,MAAMP,sBAAsB,GAAA,WAAA,OAAGJ,oBAAA,EAAA,WAAA,MAAA;IAAA;CAIlC,CAAC;AACF,MAAMK,iBAAiB,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAK,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAOzB,CAAC;AAGS,gDAAgDE,KAAK,IAAG;IAC/D,aAAa;IACb,MAAM,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,cAAAA,EAAgB,GAAGJ,KAAK;IAChE,MAAMK,mBAAmB,GAAGb,sBAAsB,CAAC,CAAC;IACpD,MAAMc,cAAc,GAAGb,iBAAiB,CAAC,CAAC;IAC1C,MAAMc,gBAAgB,GAAG,CAACH,cAAc,IAAI,CAACD,IAAI;IACjD,IAAID,QAAQ,EAAE;QACVA,QAAQ,CAACM,SAAS,OAAGlB,mBAAY,EAACe,mBAAmB,EAAEJ,cAAc,IAAIK,cAAc,CAACZ,MAAM,EAAEa,gBAAgB,IAAID,cAAc,CAACV,YAAY,EAAEM,QAAQ,CAACM,SAAS,CAAC;IACxK;IACA,OAAOR,KAAK;AAChB,CAAC"}

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

@@ -21,14 +21,19 @@ const _reacttheme = require("@fluentui/react-theme");
 const useBackdropStyles = (0, _react.makeStyles)({
     nested: {
         backgroundColor: _reacttheme.tokens.colorTransparentBackground
+    },
+    drawerHidden: {
+        pointerEvents: 'none'
     }
 });
 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 = (0, _react.mergeClasses)(backdropResetStyles, state.isNestedDialog && backdropStyles.nested, state.backdrop.className);
+    const mountedAndClosed = !unmountOnClose && !open;
+    if (backdrop) {
+        backdrop.className = (0, _react.mergeClasses)(backdropResetStyles, isNestedDialog && backdropStyles.nested, mountedAndClosed && backdropStyles.drawerHidden, backdrop.className);
     }
     return state;
 };

package/lib-commonjs/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;;;;;+BAwBaY;;;;;;uBAtB6C,iBAAiB;4BACpD,wBAAwB;AAG/C;;CAEC,GACD,MAAMR,6BAAyBJ,sBAAAA,EAAgB;IAC7CK,OAAO;IACPC,UAAU;IACVC,iBAAiBJ,kBAAAA,CAAOK,sBAAsB;AAChD;AAEA,MAAMC,wBAAoBR,iBAAAA,EAAW;IACnCS,QAAQ;QACNH,iBAAiBJ,kBAAAA,CAAOQ,0BAA0B;IACpD;AACF;AAKO,+CAA+C,CAACE;IACrD;IAEA,MAAMC,sBAAsBV;IAC5B,MAAMW,iBAAiBN;IAEvB,IAAII,MAAMG,QAAQ,EAAE;QAClBH,MAAMG,QAAQ,CAACC,SAAS,OAAGf,mBAAAA,EACzBY,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;;;;;+BA4Bac;;;;;;uBA1B6C,iBAAiB;4BACpD,wBAAwB;AAG/C;;CAEC,GACD,MAAMV,6BAAyBJ,sBAAAA,EAAgB;IAC7CK,OAAO;IACPC,UAAU;IACVC,iBAAiBJ,kBAAAA,CAAOK,sBAAsB;AAChD;AAEA,MAAMC,wBAAoBR,iBAAAA,EAAW;IACnCS,QAAQ;QACNH,iBAAiBJ,kBAAAA,CAAOQ,0BAA0B;IACpD;IAEAC,cAAc;QACZC,eAAe;IACjB;AACF;AAKO,+CAA+C,CAACE;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,OAAGrB,mBAAAA,EACnBkB,qBACAJ,kBAAkBK,eAAeX,MAAM,EACvCY,oBAAoBD,eAAeT,YAAY,EAC/CK,SAASM,SAAS;IAEtB;IAEA,OAAOR;AACT,EAAE"}

package/lib-commonjs/components/OverlayDrawer/useOverlayDrawer.js

@@ -26,8 +26,8 @@ const STATIC_MOTION = {
     type: 'idle'
 };
 const useOverlayDrawer_unstable = (props, ref)=>{
-    const { open, size, position } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
-    const { backdropMotion, modalType = 'modal', inertTrapFocus, onOpenChange, surfaceMotion, mountNode } = props;
+    const { open, size, position, unmountOnClose } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
+    const { modalType = 'modal', inertTrapFocus, onOpenChange, backdropMotion, surfaceMotion, mountNode } = props;
     const { dir, targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
     const { element: mountNodeElement } = (0, _reactportal.toMountNodeProps)(mountNode);
     const hasMountNodeElement = Boolean(mountNodeElement && (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body) !== mountNodeElement);
@@ -36,6 +36,7 @@ const useOverlayDrawer_unstable = (props, ref)=>{
     const root = _reactutilities.slot.always({
         ...props,
         ref,
+        unmountOnClose,
         backdrop: hasCustomBackdrop ? {
             ...backdropProps
         } : null,
@@ -43,16 +44,14 @@ const useOverlayDrawer_unstable = (props, ref)=>{
             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.OverlayDrawerSurface
+        elementType: _OverlayDrawerSurface.OverlayDrawerSurface
     });
     const dialog = _reactutilities.slot.always({
         open,
         onOpenChange,
         inertTrapFocus,
         modalType,
+        unmountOnClose,
         surfaceMotion: (0, _drawerMotionUtils.mergePresenceSlots)(surfaceMotion, _drawerMotions.OverlayDrawerMotion, {
             position,
             size,
@@ -76,6 +75,7 @@ const useOverlayDrawer_unstable = (props, ref)=>{
         size,
         position,
         hasMountNodeElement,
+        unmountOnClose,
         // Deprecated props
         mountNode,
         motion: STATIC_MOTION

package/lib-commonjs/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;;;;;+BA+BaiB;;;;;;;iEA7BU,QAAQ;6BACR,yBAAyB;gCAC3B,4BAA4B;qCAED,kCAAkC;6BACjD,yBAAyB;+BAEQ,6BAA6B;uCACzD,qCAAqC;sCAEtC,yBAAyB;mCAC3B,iCAAiC;AAEpE,MAAMN,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,KAAAA,WAAAA,GAAKd,OAAMe,SAAS;IACpBC,MAAM;AACR;AAWO,kCAAkC,CACvCE,OACAJ;IAEA,MAAM,EAAEK,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,OAAGb,4CAAAA,EAAsBU;IACvD,MAAM,EAAEI,cAAc,EAAEC,YAAY,OAAO,EAAEC,cAAc,EAAEC,YAAY,EAAEC,aAAa,EAAEC,SAAS,EAAE,GAAGT;IACxG,MAAM,EAAEU,GAAG,EAAEC,cAAc,EAAE,OAAGzB,uCAAAA;IAChC,MAAM,EAAE0B,SAASC,gBAAgB,EAAE,OAAG1B,6BAAAA,EAAiBsB;IACvD,MAAMK,sBAAsBC,QAAQF,oBAAoBF,oBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBK,IAAAA,AAAI,MAAKH;IAEjF,MAAMI,gBAAgBjC,oBAAAA,CAAKkC,gBAAgB,CAAClB,MAAMmB,QAAQ;IAC1D,MAAMC,oBAAoBf,cAAc,eAAeY,kBAAkB;IAEzE,MAAMI,OAAOrC,oBAAAA,CAAKsC,MAAM,CACtB;QACE,GAAGtB,KAAK;QACRJ;QACAuB,UAAUC,oBAAoB;YAAE,GAAGH,aAAa;QAAC,IAAI;QACrDb,oBAAgBZ,qCAAAA,EAAmBY,gBAAgBf,2CAAAA,EAA8B;YAAEa;QAAK;IAC1F,GACA;QACE;;;OAGC,GACDqB,aAAahC,0CAAAA;IACf;IAGF,MAAMiC,SAASxC,oBAAAA,CAAKsC,MAAM,CACxB;QACErB;QACAM;QACAD;QACAD;QACAG,mBAAehB,qCAAAA,EAAmBgB,eAAepB,kCAAAA,EAAqB;YAAEe;YAAUD;YAAMQ;QAAI;QAC5F;;;OAGC,GACDe,UAAU;IACZ,GACA;QACEF,aAAaxC,mBAAAA;IACf;IAGF,OAAO;QACL2C,YAAY;YACVL,MAAM9B,0CAAAA;YACNiC,QAAQzC,mBAAAA;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;;;;;+BA+BaiB;;;;;;;iEA7BU,QAAQ;6BACR,yBAAyB;gCAC3B,4BAA4B;qCAED,kCAAkC;6BACjD,yBAAyB;+BAEQ,6BAA6B;uCACzD,qCAAqC;sCAEtC,yBAAyB;mCAC3B,iCAAiC;AAEpE,MAAMN,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,KAAAA,WAAAA,GAAKd,OAAMe,SAAS;IACpBC,MAAM;AACR;AAWO,kCAAkC,CACvCE,OACAJ;IAEA,MAAM,EAAEK,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,cAAc,EAAE,OAAGd,4CAAAA,EAAsBU;IACvE,MAAM,EAAEK,YAAY,OAAO,EAAEC,cAAc,EAAEC,YAAY,EAAEC,cAAc,EAAEC,aAAa,EAAEC,SAAS,EAAE,GAAGV;IACxG,MAAM,EAAEW,GAAG,EAAEC,cAAc,EAAE,OAAG1B,uCAAAA;IAChC,MAAM,EAAE2B,SAASC,gBAAgB,EAAE,OAAG3B,6BAAAA,EAAiBuB;IACvD,MAAMK,sBAAsBC,QAAQF,oBAAoBF,CAAAA,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBK,IAAAA,AAAI,MAAKH;IAEjF,MAAMI,gBAAgBlC,oBAAAA,CAAKmC,gBAAgB,CAACnB,MAAMoB,QAAQ;IAC1D,MAAMC,oBAAoBhB,cAAc,eAAea,kBAAkB;IAEzE,MAAMI,OAAOtC,oBAAAA,CAAKuC,MAAM,CACtB;QACE,GAAGvB,KAAK;QACRJ;QACAQ;QACAgB,UAAUC,oBAAoB;YAAE,GAAGH,aAAa;QAAC,IAAI;QACrDV,oBAAgBhB,qCAAAA,EAAmBgB,gBAAgBnB,2CAAAA,EAA8B;YAAEa;QAAK;IAC1F,GACA;QACEsB,aAAajC,0CAAAA;IACf;IAGF,MAAMkC,SAASzC,oBAAAA,CAAKuC,MAAM,CACxB;QACEtB;QACAM;QACAD;QACAD;QACAD;QACAK,mBAAejB,qCAAAA,EAAmBiB,eAAerB,kCAAAA,EAAqB;YAAEe;YAAUD;YAAMS;QAAI;QAC5F;;;OAGC,GACDe,UAAU;IACZ,GACA;QACEF,aAAazC,mBAAAA;IACf;IAGF,OAAO;QACL4C,YAAY;YACVL,MAAM/B,0CAAAA;YACNkC,QAAQ1C,mBAAAA;QACV;QAEAuC;QACAG;QAEAxB;QACAC;QACAC;QACAY;QACAX;QAEA,mBAAmB;QACnBM;QACAkB,QAAQnC;IACV;AACF,EAAE"}

package/lib-commonjs/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":";;;;;iEAAuB,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":";;;;;iEAAuB,QAAQ"}

package/lib-commonjs/shared/drawerMotions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/shared/drawerMotions.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';\nimport { tokens } from '@fluentui/react-theme';\nimport { ProviderContextValue_unstable as FluentProviderContextValue } from '@fluentui/react-shared-contexts';\n\nimport type { DrawerBaseProps } from './DrawerBase.types';\nimport { drawerCSSVars } from './useDrawerBaseStyles.styles';\nimport { fadeAtom } from '@fluentui/react-motion-components-preview';\n\nexport type DrawerMotionParams = Required<\n  Pick<DrawerBaseProps, 'size' | 'position'> & Pick<FluentProviderContextValue, 'dir'>\n>;\nexport type OverlayDrawerSurfaceMotionParams = Required<Pick<DrawerBaseProps, 'size'>>;\n\nconst durations: Record<NonNullable<DrawerBaseProps['size']>, number> = {\n  small: motionTokens.durationGentle,\n  medium: motionTokens.durationSlow,\n  large: motionTokens.durationSlower,\n  full: motionTokens.durationUltraSlow,\n};\n\n/**\n * @internal\n */\nexport function getPositionTransform(\n  position: DrawerBaseProps['position'],\n  sizeVar: string,\n  dir: FluentProviderContextValue['dir'],\n): string {\n  const leftToRightTransform = `translate3d(var(${sizeVar}), 0, 0)`;\n  const rightToLeftTransform = `translate3d(calc(var(${sizeVar}) * -1), 0, 0)`;\n  const bottomToTopTransform = `translate3d(0, var(${sizeVar}), 0)`;\n\n  if (position === 'start') {\n    return dir === 'ltr' ? rightToLeftTransform : leftToRightTransform;\n  }\n\n  if (position === 'end') {\n    return dir === 'ltr' ? leftToRightTransform : rightToLeftTransform;\n  }\n\n  if (position === 'bottom') {\n    return bottomToTopTransform;\n  }\n\n  return 'translate3d(0, 0, 0)';\n}\n\n/**\n * @internal\n */\nexport const InlineDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n  const keyframes: Keyframe[] = [\n    {\n      /**\n       * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n       * The work will be done in the #32817\n       */\n      transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n      opacity: 0,\n    },\n    { transform: 'translate3d(0, 0, 0)', opacity: 1 },\n  ];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing: motionTokens.curveDecelerateMid,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing: motionTokens.curveAccelerateMin,\n    },\n  };\n});\n\n/**\n * @internal\n */\nexport const OverlayDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n  const keyframes: Keyframe[] = [\n    {\n      /**\n       * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n       * The work will be done in the #32817\n       */\n      transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n      boxShadow: `0px ${tokens.colorTransparentBackground}`,\n      opacity: 0,\n    },\n    {\n      transform: 'translate3d(0, 0, 0)',\n      boxShadow: tokens.shadow64,\n      opacity: 1,\n    },\n  ];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing: motionTokens.curveDecelerateMid,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing: motionTokens.curveAccelerateMin,\n    },\n  };\n});\n\n/**\n * @internal\n */\nexport const OverlaySurfaceBackdropMotion = createPresenceComponent(({ size }: OverlayDrawerSurfaceMotionParams) => {\n  const duration = durations[size];\n  const easing = motionTokens.curveLinear;\n\n  return {\n    enter: fadeAtom({ direction: 'enter', duration, easing }),\n    exit: fadeAtom({ direction: 'exit', duration, easing }),\n  };\n});\n"],"names":["createPresenceComponent","motionTokens","tokens","drawerCSSVars","fadeAtom","durations","small","durationGentle","medium","durationSlow","large","durationSlower","full","durationUltraSlow","getPositionTransform","position","sizeVar","dir","leftToRightTransform","rightToLeftTransform","bottomToTopTransform","InlineDrawerMotion","size","keyframes","transform","drawerSizeVar","opacity","duration","enter","easing","curveDecelerateMid","exit","reverse","curveAccelerateMin","OverlayDrawerMotion","boxShadow","colorTransparentBackground","shadow64","OverlaySurfaceBackdropMotion","curveLinear","direction"],"mappings":";;;;;;;;;;;IAkDaqB,kBAAAA;;;IA+BAa,mBAAAA;;;gCAoCAI;eAAAA;;wBA9FGxB;;;;6BAvBsC,yBAAyB;4BACxD,wBAAwB;2CAIjB,+BAA+B;8CACpC,4CAA4C;AAOrE,MAAMT,YAAkE;IACtEC,OAAOL,yBAAAA,CAAaM,cAAc;IAClCC,QAAQP,yBAAAA,CAAaQ,YAAY;IACjCC,OAAOT,yBAAAA,CAAaU,cAAc;IAClCC,MAAMX,yBAAAA,CAAaY,iBAAiB;AACtC;AAKO,SAASC,qBACdC,QAAqC,EACrCC,OAAe,EACfC,GAAsC;IAEtC,MAAMC,uBAAuB,CAAC,gBAAgB,EAAEF,QAAQ,QAAQ,CAAC;IACjE,MAAMG,uBAAuB,CAAC,qBAAqB,EAAEH,QAAQ,cAAc,CAAC;IAC5E,MAAMI,uBAAuB,CAAC,mBAAmB,EAAEJ,QAAQ,KAAK,CAAC;IAEjE,IAAID,aAAa,SAAS;QACxB,OAAOE,QAAQ,QAAQE,uBAAuBD;IAChD;IAEA,IAAIH,aAAa,OAAO;QACtB,OAAOE,QAAQ,QAAQC,uBAAuBC;IAChD;IAEA,IAAIJ,aAAa,UAAU;QACzB,OAAOK;IACT;IAEA,OAAO;AACT;AAKO,+BAA2BpB,oCAAAA,EAA4C,CAAC,EAAEe,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACpG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUZ,wCAAAA,CAAcsB,aAAa,EAAER;YACvES,SAAS;QACX;QACA;YAAEF,WAAW;YAAwBE,SAAS;QAAE;KACjD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ5B,yBAAAA,CAAa6B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ5B,yBAAAA,CAAagC,kBAAkB;QACzC;IACF;AACF,GAAG;AAKI,gCAA4BjC,oCAAAA,EAA4C,CAAC,EAAEe,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACrG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUZ,wCAAAA,CAAcsB,aAAa,EAAER;YACvEkB,WAAW,CAAC,IAAI,EAAEjC,kBAAAA,CAAOkC,0BAA0B,EAAE;YACrDV,SAAS;QACX;QACA;YACEF,WAAW;YACXW,WAAWjC,kBAAAA,CAAOmC,QAAQ;YAC1BX,SAAS;QACX;KACD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ5B,yBAAAA,CAAa6B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ5B,yBAAAA,CAAagC,kBAAkB;QACzC;IACF;AACF,GAAG;AAKI,yCAAqCjC,oCAAAA,EAAwB,CAAC,EAAEsB,IAAI,EAAoC;IAC7G,MAAMK,WAAWtB,SAAS,CAACiB,KAAK;IAChC,MAAMO,SAAS5B,yBAAAA,CAAasC,WAAW;IAEvC,OAAO;QACLX,WAAOxB,sCAAAA,EAAS;YAAEoC,WAAW;YAASb;YAAUE;QAAO;QACvDE,UAAM3B,sCAAAA,EAAS;YAAEoC,WAAW;YAAQb;YAAUE;QAAO;IACvD;AACF,GAAG"}
+{"version":3,"sources":["../src/shared/drawerMotions.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';\nimport { tokens } from '@fluentui/react-theme';\nimport { ProviderContextValue_unstable as FluentProviderContextValue } from '@fluentui/react-shared-contexts';\n\nimport type { DrawerBaseProps } from './DrawerBase.types';\nimport { drawerCSSVars } from './useDrawerBaseStyles.styles';\nimport { fadeAtom } from '@fluentui/react-motion-components-preview';\n\nexport type DrawerMotionParams = Required<\n  Pick<DrawerBaseProps, 'size' | 'position'> & Pick<FluentProviderContextValue, 'dir'>\n>;\nexport type OverlayDrawerSurfaceMotionParams = Required<Pick<DrawerBaseProps, 'size'>>;\n\nconst durations: Record<NonNullable<DrawerBaseProps['size']>, number> = {\n  small: motionTokens.durationGentle,\n  medium: motionTokens.durationSlow,\n  large: motionTokens.durationSlower,\n  full: motionTokens.durationUltraSlow,\n};\n\n/**\n * @internal\n */\nexport function getPositionTransform(\n  position: DrawerBaseProps['position'],\n  sizeVar: string,\n  dir: FluentProviderContextValue['dir'],\n): string {\n  const leftToRightTransform = `translate3d(var(${sizeVar}), 0, 0)`;\n  const rightToLeftTransform = `translate3d(calc(var(${sizeVar}) * -1), 0, 0)`;\n  const bottomToTopTransform = `translate3d(0, var(${sizeVar}), 0)`;\n\n  if (position === 'start') {\n    return dir === 'ltr' ? rightToLeftTransform : leftToRightTransform;\n  }\n\n  if (position === 'end') {\n    return dir === 'ltr' ? leftToRightTransform : rightToLeftTransform;\n  }\n\n  if (position === 'bottom') {\n    return bottomToTopTransform;\n  }\n\n  return 'translate3d(0, 0, 0)';\n}\n\n/**\n * @internal\n */\nexport const InlineDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n  const keyframes: Keyframe[] = [\n    {\n      /**\n       * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n       * The work will be done in the #32817\n       */\n      transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n      opacity: 0,\n    },\n    {\n      transform: 'translate3d(0, 0, 0)',\n      opacity: 1,\n    },\n  ];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing: motionTokens.curveDecelerateMid,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing: motionTokens.curveAccelerateMin,\n    },\n  };\n});\n\n/**\n * @internal\n */\nexport const OverlayDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n  const keyframes: Keyframe[] = [\n    {\n      /**\n       * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n       * The work will be done in the #32817\n       */\n      transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n      boxShadow: `0px ${tokens.colorTransparentBackground}`,\n      opacity: 0,\n    },\n    {\n      transform: 'translate3d(0, 0, 0)',\n      boxShadow: tokens.shadow64,\n      opacity: 1,\n    },\n  ];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing: motionTokens.curveDecelerateMid,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing: motionTokens.curveAccelerateMin,\n    },\n  };\n});\n\n/**\n * @internal\n */\nexport const OverlaySurfaceBackdropMotion = createPresenceComponent(({ size }: OverlayDrawerSurfaceMotionParams) => {\n  const duration = durations[size];\n  const easing = motionTokens.curveLinear;\n\n  return {\n    enter: fadeAtom({ direction: 'enter', duration, easing }),\n    exit: fadeAtom({ direction: 'exit', duration, easing }),\n  };\n});\n"],"names":["createPresenceComponent","motionTokens","tokens","drawerCSSVars","fadeAtom","durations","small","durationGentle","medium","durationSlow","large","durationSlower","full","durationUltraSlow","getPositionTransform","position","sizeVar","dir","leftToRightTransform","rightToLeftTransform","bottomToTopTransform","InlineDrawerMotion","size","keyframes","transform","drawerSizeVar","opacity","duration","enter","easing","curveDecelerateMid","exit","reverse","curveAccelerateMin","OverlayDrawerMotion","boxShadow","colorTransparentBackground","shadow64","OverlaySurfaceBackdropMotion","curveLinear","direction"],"mappings":";;;;;;;;;;;IAkDaqB,kBAAAA;;;IAkCAa,mBAAAA;;;gCAoCAI;eAAAA;;wBAjGGxB;;;;6BAvBsC,yBAAyB;4BACxD,wBAAwB;2CAIjB,+BAA+B;8CACpC,4CAA4C;AAOrE,MAAMT,YAAkE;IACtEC,OAAOL,yBAAAA,CAAaM,cAAc;IAClCC,QAAQP,yBAAAA,CAAaQ,YAAY;IACjCC,OAAOT,yBAAAA,CAAaU,cAAc;IAClCC,MAAMX,yBAAAA,CAAaY,iBAAiB;AACtC;AAKO,SAASC,qBACdC,QAAqC,EACrCC,OAAe,EACfC,GAAsC;IAEtC,MAAMC,uBAAuB,CAAC,gBAAgB,EAAEF,QAAQ,QAAQ,CAAC;IACjE,MAAMG,uBAAuB,CAAC,qBAAqB,EAAEH,QAAQ,cAAc,CAAC;IAC5E,MAAMI,uBAAuB,CAAC,mBAAmB,EAAEJ,QAAQ,KAAK,CAAC;IAEjE,IAAID,aAAa,SAAS;QACxB,OAAOE,QAAQ,QAAQE,uBAAuBD;IAChD;IAEA,IAAIH,aAAa,OAAO;QACtB,OAAOE,QAAQ,QAAQC,uBAAuBC;IAChD;IAEA,IAAIJ,aAAa,UAAU;QACzB,OAAOK;IACT;IAEA,OAAO;AACT;AAKO,+BAA2BpB,oCAAAA,EAA4C,CAAC,EAAEe,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACpG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUZ,wCAAAA,CAAcsB,aAAa,EAAER;YACvES,SAAS;QACX;QACA;YACEF,WAAW;YACXE,SAAS;QACX;KACD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ5B,yBAAAA,CAAa6B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ5B,yBAAAA,CAAagC,kBAAkB;QACzC;IACF;AACF,GAAG;AAKI,gCAA4BjC,oCAAAA,EAA4C,CAAC,EAAEe,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACrG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUZ,wCAAAA,CAAcsB,aAAa,EAAER;YACvEkB,WAAW,CAAC,IAAI,EAAEjC,kBAAAA,CAAOkC,0BAA0B,EAAE;YACrDV,SAAS;QACX;QACA;YACEF,WAAW;YACXW,WAAWjC,kBAAAA,CAAOmC,QAAQ;YAC1BX,SAAS;QACX;KACD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ5B,yBAAAA,CAAa6B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ5B,yBAAAA,CAAagC,kBAAkB;QACzC;IACF;AACF,GAAG;AAKI,yCAAqCjC,oCAAAA,EAAwB,CAAC,EAAEsB,IAAI,EAAoC;IAC7G,MAAMK,WAAWtB,SAAS,CAACiB,KAAK;IAChC,MAAMO,SAAS5B,yBAAAA,CAAasC,WAAW;IAEvC,OAAO;QACLX,WAAOxB,sCAAAA,EAAS;YAAEoC,WAAW;YAASb;YAAUE;QAAO;QACvDE,UAAM3B,sCAAAA,EAAS;YAAEoC,WAAW;YAAQb;YAAUE;QAAO;IACvD;AACF,GAAG"}

package/lib-commonjs/shared/useDrawerDefaultProps.js

@@ -9,10 +9,11 @@ Object.defineProperty(exports, "useDrawerDefaultProps", {
     }
 });
 function useDrawerDefaultProps(props) {
-    const { open = false, size = 'small', position = 'start' } = props;
+    const { open = false, size = 'small', position = 'start', unmountOnClose = true } = props;
     return {
         size,
         position,
-        open
+        open,
+        unmountOnClose
     };
 }