@fluentui/react-drawer 9.5.5 → 9.5.7

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @fluentui/react-drawer
 
-This log was last generated on Mon, 15 Jul 2024 17:20:12 GMT and should not be manually modified.
+This log was last generated on Tue, 30 Jul 2024 18:45:07 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.5.7)
+
+Tue, 30 Jul 2024 18:45:07 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.5.6..@fluentui/react-drawer_v9.5.7)
+
+### Patches
+
+- chore: migrate to stable motion APIs ([PR #31668](https://github.com/microsoft/fluentui/pull/31668) by olfedias@microsoft.com)
+- Bump @fluentui/react-dialog to v9.11.7 ([PR #32157](https://github.com/microsoft/fluentui/pull/32157) by beachball)
+
+## [9.5.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.5.6)
+
+Tue, 23 Jul 2024 20:13:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.5.5..@fluentui/react-drawer_v9.5.6)
+
+### Patches
+
+- Bump @fluentui/react-dialog to v9.11.6 ([PR #32067](https://github.com/microsoft/fluentui/pull/32067) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.42 ([PR #32067](https://github.com/microsoft/fluentui/pull/32067) by beachball)
+- Bump @fluentui/react-motion-preview to v0.5.25 ([PR #32067](https://github.com/microsoft/fluentui/pull/32067) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.20.0 ([PR #32067](https://github.com/microsoft/fluentui/pull/32067) by beachball)
+- Bump @fluentui/react-tabster to v9.22.3 ([PR #32067](https://github.com/microsoft/fluentui/pull/32067) by beachball)
+- Bump @fluentui/react-utilities to v9.18.13 ([PR #32067](https://github.com/microsoft/fluentui/pull/32067) by beachball)
+
 ## [9.5.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.5.5)
 
-Mon, 15 Jul 2024 17:20:12 GMT 
+Mon, 15 Jul 2024 17:25:28 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.5.4..@fluentui/react-drawer_v9.5.5)
 
 ### Patches

package/dist/index.d.ts

@@ -6,6 +6,7 @@ import type { DialogProps } from '@fluentui/react-dialog';
 import type { DialogSurfaceProps } from '@fluentui/react-dialog';
 import type { DialogSurfaceSlots } from '@fluentui/react-dialog';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -44,7 +45,11 @@ declare type DrawerBaseProps = {
 };
 
 declare type DrawerBaseState = Required<Pick<DrawerBaseProps, 'position' | 'size'>> & {
+    /**
+     * @deprecated Passed values will be static.
+     */
     motion: MotionState<HTMLElement>;
+    open?: boolean;
 };
 
 /**
@@ -173,6 +178,8 @@ export declare type DrawerHeaderTitleSlots = {
  */
 export declare type DrawerHeaderTitleState = ComponentState<DrawerHeaderTitleSlots>;
 
+declare type DrawerMotionParams = Required<Pick<DrawerBaseProps, 'size' | 'position'>>;
+
 /**
  * Drawer Props
  */
@@ -192,7 +199,7 @@ export declare const DrawerProvider: React_2.Provider<DrawerContextValue | undef
 
 declare type DrawerScrollState = 'none' | 'top' | 'middle' | 'bottom';
 
-export declare type DrawerSlots = OverlayDrawerSlots | InlineDrawerSlots;
+export declare type DrawerSlots = Pick<OverlayDrawerSlots, 'root'> | Pick<InlineDrawerSlots, 'root'>;
 
 /**
  * State used in rendering Drawer
@@ -205,7 +212,7 @@ export declare type DrawerState = ComponentState<DrawerSlots>;
  */
 export declare const InlineDrawer: ForwardRefComponent<InlineDrawerProps>;
 
-export declare const inlineDrawerClassNames: SlotClassNames<InlineDrawerSlots>;
+export declare const inlineDrawerClassNames: SlotClassNames<Omit<InlineDrawerSlots, 'surfaceMotion'>>;
 
 /**
  * InlineDrawer Props
@@ -221,12 +228,13 @@ export declare type InlineDrawerProps = ComponentProps<InlineDrawerSlots> & Draw
 
 export declare type InlineDrawerSlots = {
     root: Slot<'div', 'aside'>;
+    surfaceMotion?: Slot<SurfaceMotionSlotProps>;
 };
 
 /**
  * State used in rendering InlineDrawer
  */
-export declare type InlineDrawerState = Required<ComponentState<InlineDrawerSlots> & DrawerBaseState & Pick<InlineDrawerProps, 'separator'>>;
+export declare type InlineDrawerState = Required<ComponentState<NonNullable<InlineDrawerSlots>> & DrawerBaseState & Pick<InlineDrawerProps, 'separator'>>;
 
 declare type MotionState<Element extends HTMLElement = HTMLElement> = {
     /**
@@ -263,12 +271,12 @@ declare type MotionType = 'entering' | 'entered' | 'idle' | 'exiting' | 'exited'
  */
 export declare const OverlayDrawer: ForwardRefComponent<OverlayDrawerProps>;
 
-export declare const overlayDrawerClassNames: SlotClassNames<OverlayDrawerSurfaceSlots>;
+export declare const overlayDrawerClassNames: SlotClassNames<Omit<OverlayDrawerSurfaceSlots, 'backdropMotion'>>;
 
 /**
  * OverlayDrawer internal slots for when using with composition API
  */
-declare type OverlayDrawerInternalSlots = OverlayDrawerSlots & {
+declare type OverlayDrawerInternalSlots = Pick<OverlayDrawerSlots, 'root'> & {
     /**
      * Slot for the dialog component that wraps the drawer.
      */
@@ -294,6 +302,8 @@ export declare type OverlayDrawerSlots = {
      * Slot for the root element.
      */
     root: Slot<OverlayDrawerSurfaceProps>;
+    backdropMotion?: Slot<PresenceMotionSlotProps<OverlayDrawerSurfaceMotionParams>>;
+    surfaceMotion?: Slot<PresenceMotionSlotProps<DrawerMotionParams>>;
 };
 
 /**
@@ -301,6 +311,8 @@ export declare type OverlayDrawerSlots = {
  */
 export declare type OverlayDrawerState = ComponentState<OverlayDrawerInternalSlots> & Required<DrawerBaseState>;
 
+declare type OverlayDrawerSurfaceMotionParams = Required<Pick<DrawerBaseProps, 'size'>>;
+
 /**
  * OverlayDrawerSurface Props
  */
@@ -309,7 +321,7 @@ declare type OverlayDrawerSurfaceProps = ComponentProps<OverlayDrawerSurfaceSlot
 /**
  * OverlayDrawerSurface slots
  */
-declare type OverlayDrawerSurfaceSlots = Pick<DialogSurfaceSlots, 'backdrop'> & {
+declare type OverlayDrawerSurfaceSlots = Partial<Pick<DialogSurfaceSlots, 'backdrop' | 'backdropMotion'>> & {
     root: Slot<'div', 'aside'>;
 };
 
@@ -346,12 +358,14 @@ export declare const renderDrawerHeaderTitle_unstable: (state: DrawerHeaderTitle
 /**
  * Render the final JSX of InlineDrawer
  */
-export declare const renderInlineDrawer_unstable: (state: InlineDrawerState, contextValue: DrawerContextValue) => JSX.Element | null;
+export declare const renderInlineDrawer_unstable: (state: InlineDrawerState, contextValue: DrawerContextValue) => JSX.Element;
 
 /**
  * Render the final JSX of OverlayDrawer
  */
-export declare const renderOverlayDrawer_unstable: (state: OverlayDrawerState, contextValue: DrawerContextValue) => JSX.Element | null;
+export declare const renderOverlayDrawer_unstable: (state: OverlayDrawerState, contextValue: DrawerContextValue) => JSX.Element;
+
+declare type SurfaceMotionSlotProps = PresenceMotionSlotProps<DrawerMotionParams>;
 
 /**
  * Create the state required to render Drawer.

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

@@ -1 +1 @@
-{"version":3,"sources":["Drawer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\n\nimport type { OverlayDrawerProps, OverlayDrawerSlots } from '../OverlayDrawer';\nimport type { InlineDrawerProps, InlineDrawerSlots } from '../InlineDrawer';\n\nexport type DrawerSlots = OverlayDrawerSlots | InlineDrawerSlots;\n\n/**\n * Drawer Props\n */\nexport type DrawerProps = ComponentProps<DrawerSlots> & {\n  /**\n   * Type of the drawer.\n   *\n   * - 'overlay' - Drawer is hidden by default and can be opened by clicking on the trigger.\n   * - 'inline' - Drawer is stacked with the content\n   *\n   * @default overlay\n   */\n  type?: 'inline' | 'overlay';\n} & (OverlayDrawerProps | InlineDrawerProps);\n\n/**\n * State used in rendering Drawer\n */\nexport type DrawerState = ComponentState<DrawerSlots>;\n"],"names":[],"rangeMappings":";;","mappings":"AAsBA;;CAEC,GACD,WAAsD"}
+{"version":3,"sources":["Drawer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\n\nimport type { OverlayDrawerProps, OverlayDrawerSlots } from '../OverlayDrawer';\nimport type { InlineDrawerProps, InlineDrawerSlots } from '../InlineDrawer';\n\nexport type DrawerSlots = Pick<OverlayDrawerSlots, 'root'> | Pick<InlineDrawerSlots, 'root'>;\n\n/**\n * Drawer Props\n */\nexport type DrawerProps = ComponentProps<DrawerSlots> & {\n  /**\n   * Type of the drawer.\n   *\n   * - 'overlay' - Drawer is hidden by default and can be opened by clicking on the trigger.\n   * - 'inline' - Drawer is stacked with the content\n   *\n   * @default overlay\n   */\n  type?: 'inline' | 'overlay';\n} & (OverlayDrawerProps | InlineDrawerProps);\n\n/**\n * State used in rendering Drawer\n */\nexport type DrawerState = ComponentState<DrawerSlots>;\n"],"names":[],"rangeMappings":";;","mappings":"AAsBA;;CAEC,GACD,WAAsD"}

package/lib/components/Drawer/useDrawer.js

@@ -11,16 +11,18 @@ import { InlineDrawer } from '../InlineDrawer';
  * @param props - props from this instance of Drawer
  * @param ref - reference to root HTMLElement of Drawer
  */ export const useDrawer_unstable = (props, ref)=>{
+    // casting here to convert a union of functions to a single function with the union of parameters
     const elementType = props.type === 'inline' ? InlineDrawer : OverlayDrawer;
+    const root = slot.always({
+        ref,
+        ...props
+    }, {
+        elementType
+    });
     return {
         components: {
             root: elementType
         },
-        root: slot.always({
-            ref,
-            ...props
-        }, {
-            elementType
-        })
+        root
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\n\nimport type { DrawerProps, DrawerState } from './Drawer.types';\nimport { OverlayDrawer } from '../OverlayDrawer';\nimport { InlineDrawer } from '../InlineDrawer';\n\n/**\n * Create the state required to render Drawer.\n *\n * The returned state can be modified with hooks such as useDrawerStyles_unstable,\n * before being passed to renderDrawer_unstable.\n *\n * @param props - props from this instance of Drawer\n * @param ref - reference to root HTMLElement of Drawer\n */\nexport const useDrawer_unstable = (props: DrawerProps, ref: React.Ref<HTMLElement>): DrawerState => {\n  const elementType = props.type === 'inline' ? InlineDrawer : OverlayDrawer;\n\n  return {\n    components: {\n      root: elementType,\n    },\n\n    root: slot.always(\n      {\n        ref,\n        ...props,\n      },\n      {\n        elementType,\n      },\n    ),\n  };\n};\n"],"names":["React","slot","OverlayDrawer","InlineDrawer","useDrawer_unstable","props","ref","elementType","type","components","root","always"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AAGjD,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,YAAY,QAAQ,kBAAkB;AAE/C;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,MAAMC,cAAcF,MAAMG,IAAI,KAAK,WAAWL,eAAeD;IAE7D,OAAO;QACLO,YAAY;YACVC,MAAMH;QACR;QAEAG,MAAMT,KAAKU,MAAM,CACf;YACEL;YACA,GAAGD,KAAK;QACV,GACA;YACEE;QACF;IAEJ;AACF,EAAE"}
+{"version":3,"sources":["useDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\n\nimport type { DrawerProps, DrawerState } from './Drawer.types';\nimport { OverlayDrawer, type OverlayDrawerProps } from '../OverlayDrawer';\nimport { InlineDrawer, type InlineDrawerProps } from '../InlineDrawer';\n\n/**\n * Create the state required to render Drawer.\n *\n * The returned state can be modified with hooks such as useDrawerStyles_unstable,\n * before being passed to renderDrawer_unstable.\n *\n * @param props - props from this instance of Drawer\n * @param ref - reference to root HTMLElement of Drawer\n */\nexport const useDrawer_unstable = (props: DrawerProps, ref: React.Ref<HTMLElement>): DrawerState => {\n  // casting here to convert a union of functions to a single function with the union of parameters\n  const elementType = (props.type === 'inline' ? InlineDrawer : OverlayDrawer) as React.FC<\n    InlineDrawerProps | OverlayDrawerProps\n  >;\n  const root: InlineDrawerProps | OverlayDrawerProps = slot.always({ ref, ...props }, { elementType });\n\n  return {\n    components: { root: elementType },\n    root,\n  };\n};\n"],"names":["React","slot","OverlayDrawer","InlineDrawer","useDrawer_unstable","props","ref","elementType","type","root","always","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AAGjD,SAASC,aAAa,QAAiC,mBAAmB;AAC1E,SAASC,YAAY,QAAgC,kBAAkB;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,iGAAiG;IACjG,MAAMC,cAAeF,MAAMG,IAAI,KAAK,WAAWL,eAAeD;IAG9D,MAAMO,OAA+CR,KAAKS,MAAM,CAAC;QAAEJ;QAAK,GAAGD,KAAK;IAAC,GAAG;QAAEE;IAAY;IAElG,OAAO;QACLI,YAAY;YAAEF,MAAMF;QAAY;QAChCE;IACF;AACF,EAAE"}

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

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

package/lib/components/InlineDrawer/renderInlineDrawer.js

@@ -4,12 +4,11 @@ import { DrawerProvider } from '../../contexts/drawerContext';
 /**
  * Render the final JSX of InlineDrawer
  */ export const renderInlineDrawer_unstable = (state, contextValue)=>{
-    if (!state.motion.canRender) {
-        return null;
-    }
     assertSlots(state);
     return /*#__PURE__*/ _jsx(DrawerProvider, {
         value: contextValue,
-        children: /*#__PURE__*/ _jsx(state.root, {})
+        children: /*#__PURE__*/ _jsx(state.surfaceMotion, {
+            children: /*#__PURE__*/ _jsx(state.root, {})
+        })
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderInlineDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { InlineDrawerState, InlineDrawerSlots } from './InlineDrawer.types';\n\n/**\n * Render the final JSX of InlineDrawer\n */\nexport const renderInlineDrawer_unstable = (state: InlineDrawerState, contextValue: DrawerContextValue) => {\n  if (!state.motion.canRender) {\n    return null;\n  }\n\n  assertSlots<InlineDrawerSlots>(state);\n\n  return (\n    <DrawerProvider value={contextValue}>\n      <state.root />\n    </DrawerProvider>\n  );\n};\n"],"names":["assertSlots","DrawerProvider","renderInlineDrawer_unstable","state","contextValue","motion","canRender","value","root"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAA6BC,cAAc,QAAQ,+BAA+B;AAIlF;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,OAA0BC;IACpE,IAAI,CAACD,MAAME,MAAM,CAACC,SAAS,EAAE;QAC3B,OAAO;IACT;IAEAN,YAA+BG;IAE/B,qBACE,KAACF;QAAeM,OAAOH;kBACrB,cAAA,KAACD,MAAMK,IAAI;;AAGjB,EAAE"}
+{"version":3,"sources":["renderInlineDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { InlineDrawerState, InlineDrawerSlots } from './InlineDrawer.types';\n\n/**\n * Render the final JSX of InlineDrawer\n */\nexport const renderInlineDrawer_unstable = (state: InlineDrawerState, contextValue: DrawerContextValue) => {\n  assertSlots<InlineDrawerSlots>(state);\n\n  return (\n    <DrawerProvider value={contextValue}>\n      <state.surfaceMotion>\n        <state.root />\n      </state.surfaceMotion>\n    </DrawerProvider>\n  );\n};\n"],"names":["assertSlots","DrawerProvider","renderInlineDrawer_unstable","state","contextValue","value","surfaceMotion","root"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAA6BC,cAAc,QAAQ,+BAA+B;AAIlF;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,OAA0BC;IACpEJ,YAA+BG;IAE/B,qBACE,KAACF;QAAeI,OAAOD;kBACrB,cAAA,KAACD,MAAMG,aAAa;sBAClB,cAAA,KAACH,MAAMI,IAAI;;;AAInB,EAAE"}

package/lib/components/InlineDrawer/useInlineDrawer.js

@@ -1,7 +1,14 @@
+import { presenceMotionSlot } from '@fluentui/react-motion';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import * as React from 'react';
-import { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';
-import { useMotion } from '@fluentui/react-motion-preview';
+import { InlineDrawerMotion } from '../../shared/drawerMotions';
 import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
+const STATIC_MOTION = {
+    active: true,
+    canRender: true,
+    ref: React.createRef(),
+    type: 'idle'
+};
 /**
  * Create the state required to render InlineDrawer.
  *
@@ -12,21 +19,36 @@ import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
  * @param ref - reference to root HTMLElement of InlineDrawer
  */ export const useInlineDrawer_unstable = (props, ref)=>{
     const { size, position, open } = useDrawerDefaultProps(props);
-    const { separator = false } = props;
-    const motion = useMotion(open);
-    return {
+    const { separator = false, surfaceMotion } = props;
+    const state = {
         components: {
-            root: 'div'
+            root: 'div',
+            // casting from internal type that has required properties
+            // to external type that only has optional properties
+            // converting to unknown first as both Function component signatures are not compatible
+            surfaceMotion: InlineDrawerMotion
         },
         root: slot.always(getIntrinsicElementProps('div', {
             ...props,
-            ref: useMergedRefs(ref, motion.ref)
+            ref
         }), {
             elementType: 'div'
         }),
-        size,
+        open,
         position,
+        size,
         separator,
-        motion
+        surfaceMotion: presenceMotionSlot(surfaceMotion, {
+            elementType: InlineDrawerMotion,
+            defaultProps: {
+                position,
+                size,
+                visible: open,
+                unmountOnExit: true
+            }
+        }),
+        // Deprecated props
+        motion: STATIC_MOTION
     };
+    return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useInlineDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useMotion } from '@fluentui/react-motion-preview';\n\nimport type { InlineDrawerProps, InlineDrawerState } from './InlineDrawer.types';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\n\n/**\n * Create the state required to render InlineDrawer.\n *\n * The returned state can be modified with hooks such as useInlineDrawerStyles_unstable,\n * before being passed to renderInlineDrawer_unstable.\n *\n * @param props - props from this instance of InlineDrawer\n * @param ref - reference to root HTMLElement of InlineDrawer\n */\nexport const useInlineDrawer_unstable = (props: InlineDrawerProps, ref: React.Ref<HTMLElement>): InlineDrawerState => {\n  const { size, position, open } = useDrawerDefaultProps(props);\n  const { separator = false } = props;\n\n  const motion = useMotion<HTMLElement>(open);\n\n  return {\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ...props,\n        ref: useMergedRefs(ref, motion.ref),\n      }),\n      { elementType: 'div' },\n    ),\n\n    size,\n    position,\n    separator,\n    motion,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMergedRefs","useMotion","useDrawerDefaultProps","useInlineDrawer_unstable","props","ref","size","position","open","separator","motion","components","root","always","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAC1F,SAASC,SAAS,QAAQ,iCAAiC;AAG3D,SAASC,qBAAqB,QAAQ,qCAAqC;AAE3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGN,sBAAsBE;IACvD,MAAM,EAAEK,YAAY,KAAK,EAAE,GAAGL;IAE9B,MAAMM,SAAST,UAAuBO;IAEtC,OAAO;QACLG,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMb,KAAKc,MAAM,CACff,yBAAyB,OAAO;YAC9B,GAAGM,KAAK;YACRC,KAAKL,cAAcK,KAAKK,OAAOL,GAAG;QACpC,IACA;YAAES,aAAa;QAAM;QAGvBR;QACAC;QACAE;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["useInlineDrawer.ts"],"sourcesContent":["import { presenceMotionSlot } from '@fluentui/react-motion';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\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\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        visible: open,\n        unmountOnExit: true,\n      },\n    }),\n\n    // Deprecated props\n    motion: STATIC_MOTION,\n  };\n\n  return state;\n};\n"],"names":["presenceMotionSlot","getIntrinsicElementProps","slot","React","InlineDrawerMotion","useDrawerDefaultProps","STATIC_MOTION","active","canRender","ref","createRef","type","useInlineDrawer_unstable","props","size","position","open","separator","surfaceMotion","state","components","root","always","elementType","defaultProps","visible","unmountOnExit","motion"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,YAAYC,WAAW,QAAQ;AAE/B,SAAkCC,kBAAkB,QAAQ,6BAA6B;AACzF,SAASC,qBAAqB,QAAQ,qCAAqC;AAG3E,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,KAAKN,MAAMO,SAAS;IACpBC,MAAM;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BJ;IACjE,MAAM,EAAEK,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGX,sBAAsBQ;IACvD,MAAM,EAAEI,YAAY,KAAK,EAAEC,aAAa,EAAE,GAAGL;IAE7C,MAAMM,QAA2B;QAC/BC,YAAY;YACVC,MAAM;YACN,0DAA0D;YAC1D,qDAAqD;YACrD,uFAAuF;YACvFH,eAAed;QACjB;QAEAiB,MAAMnB,KAAKoB,MAAM,CACfrB,yBAAyB,OAAO;YAC9B,GAAGY,KAAK;YACRJ;QACF,IACA;YAAEc,aAAa;QAAM;QAGvBP;QACAD;QACAD;QACAG;QACAC,eAAelB,mBAAuCkB,eAAe;YACnEK,aAAanB;YACboB,cAAc;gBACZT;gBACAD;gBACAW,SAAST;gBACTU,eAAe;YACjB;QACF;QAEA,mBAAmB;QACnBC,QAAQrB;IACV;IAEA,OAAOa;AACT,EAAE"}

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

@@ -1,7 +1,6 @@
 import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';
-import { useMotionClassNames } from '@fluentui/react-motion-preview';
 export const inlineDrawerClassNames = {
   root: 'fui-InlineDrawer'
 };
@@ -29,14 +28,9 @@ const useDrawerRootStyles = /*#__PURE__*/__styles({
     B4j52fo: 0,
     i8vvqc: "f1n3kblk"
   },
-  start: {
-    Bz10aip: "f1d8gkik"
-  },
-  end: {
-    Bz10aip: "f1h1g6jt"
-  },
+  start: {},
+  end: {},
   bottom: {
-    Bz10aip: "f1rdfgt8",
     a9b677: "fly5x3f",
     Bqenvij: "fub80nq"
   }
@@ -51,20 +45,7 @@ const useDrawerRootStyles = /*#__PURE__*/__styles({
     p: -1
   }], [".f1n3kblk{border-top:1px solid var(--colorNeutralBackground3);}", {
     p: -1
-  }], ".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}", ".f1h1g6jt{transform:translate3D(var(--fui-Drawer--size), 0, 0);}", ".f1rdfgt8{transform:translate3D(0, var(--fui-Drawer--size), 0);}", ".fly5x3f{width:100%;}", ".fub80nq{height:var(--fui-Drawer--size);}"]
-});
-const useDrawerMotionStyles = /*#__PURE__*/__styles({
-  "default": {
-    abs64n: "fk73vx1",
-    Bmy1vo4: "f15rjlgw",
-    Es3by: "f1blt7p"
-  },
-  enter: {
-    abs64n: "f5p0z4x",
-    Bz10aip: "f87uvqx"
-  }
-}, {
-  d: [".fk73vx1{opacity:0;}", ".f15rjlgw{transition-property:opacity,transform;}", ".f1blt7p{will-change:opacity,transform;}", ".f5p0z4x{opacity:1;}", ".f87uvqx{transform:translate3D(0, 0, 0);}"]
+  }], ".fly5x3f{width:100%;}", ".fub80nq{height:var(--fui-Drawer--size);}"]
 });
 function getSeparatorClass(state, classNames) {
   if (!state.separator) {
@@ -90,8 +71,7 @@ export const useInlineDrawerStyles_unstable = state => {
   const resetStyles = useDrawerResetStyles();
   const baseClassNames = useDrawerBaseClassNames(state);
   const rootStyles = useDrawerRootStyles();
-  const motionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());
-  state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], motionClassNames, state.root.className);
+  state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], state.root.className);
   return state;
 };
 //# sourceMappingURL=useInlineDrawerStyles.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","useMotionClassNames","inlineDrawerClassNames","root","useDrawerResetStyles","borderValue","colorNeutralBackground3","useDrawerRootStyles","separatorStart","h3c5rm","vrafjx","Bekrc4i","u1mtju","separatorEnd","zhjwy3","wvpqe5","ibv6hh","B4g9neb","separatorBottom","g2u3we","icvyot","B4j52fo","i8vvqc","start","Bz10aip","end","bottom","a9b677","Bqenvij","d","p","useDrawerMotionStyles","abs64n","Bmy1vo4","Es3by","enter","getSeparatorClass","state","classNames","separator","undefined","position","useInlineDrawerStyles_unstable","resetStyles","baseClassNames","rootStyles","motionClassNames","motion","className"],"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nimport { useMotionClassNames } from '@fluentui/react-motion-preview';\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        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`\n    },\n    end: {\n        transform: `translate3D(var(${drawerCSSVars.drawerSizeVar}), 0, 0)`\n    },\n    bottom: {\n        transform: `translate3D(0, var(${drawerCSSVars.drawerSizeVar}), 0)`,\n        width: '100%',\n        height: `var(${drawerCSSVars.drawerSizeVar})`\n    }\n});\nconst useDrawerMotionStyles = makeStyles({\n    default: {\n        opacity: 0,\n        transitionProperty: 'opacity, transform',\n        willChange: 'opacity, transform'\n    },\n    enter: {\n        opacity: 1,\n        transform: 'translate3D(0, 0, 0)'\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    const motionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());\n    state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], motionClassNames, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,yCAAyC;AACrH,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGV,aAAA,6UAG5B,CAAC;AACF;AACA;AACA;AAAI,MAAMW,WAAW,GAAG,aAAaR,MAAM,CAACS,uBAAuB,EAAE;AACrE,MAAMC,mBAAmB,gBAAGZ,QAAA;EAAAa,cAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,eAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;EAAAE,MAAA;IAAAF,OAAA;IAAAG,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAqB3B,CAAC;AACF,MAAMC,qBAAqB,gBAAGpC,QAAA;EAAA;IAAAqC,MAAA;IAAAC,OAAA;IAAAC,KAAA;EAAA;EAAAC,KAAA;IAAAH,MAAA;IAAAR,OAAA;EAAA;AAAA;EAAAK,CAAA;AAAA,CAU7B,CAAC;AACF,SAASO,iBAAiBA,CAACC,KAAK,EAAEC,UAAU,EAAE;EAC1C,IAAI,CAACD,KAAK,CAACE,SAAS,EAAE;IAClB,OAAOC,SAAS;EACpB;EACA,QAAOH,KAAK,CAACI,QAAQ;IACjB,KAAK,OAAO;MACR,OAAOH,UAAU,CAAC9B,cAAc;IACpC,KAAK,KAAK;MACN,OAAO8B,UAAU,CAACzB,YAAY;IAClC,KAAK,QAAQ;MACT,OAAOyB,UAAU,CAACpB,eAAe;IACrC;MACI,OAAOsB,SAAS;EACxB;AACJ;AACA;AACA;AACA;AAAI,OAAO,MAAME,8BAA8B,GAAIL,KAAK,IAAG;EACvD,aAAa;;EACb,MAAMM,WAAW,GAAGvC,oBAAoB,CAAC,CAAC;EAC1C,MAAMwC,cAAc,GAAG5C,uBAAuB,CAACqC,KAAK,CAAC;EACrD,MAAMQ,UAAU,GAAGtC,mBAAmB,CAAC,CAAC;EACxC,MAAMuC,gBAAgB,GAAG7C,mBAAmB,CAACoC,KAAK,CAACU,MAAM,EAAEhB,qBAAqB,CAAC,CAAC,CAAC;EACnFM,KAAK,CAAClC,IAAI,CAAC6C,SAAS,GAAGpD,YAAY,CAACM,sBAAsB,CAACC,IAAI,EAAEwC,WAAW,EAAEC,cAAc,EAAER,iBAAiB,CAACC,KAAK,EAAEQ,UAAU,CAAC,EAAEA,UAAU,CAACR,KAAK,CAACI,QAAQ,CAAC,EAAEK,gBAAgB,EAAET,KAAK,CAAClC,IAAI,CAAC6C,SAAS,CAAC;EACvM,OAAOX,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","inlineDrawerClassNames","root","useDrawerResetStyles","borderValue","colorNeutralBackground3","useDrawerRootStyles","separatorStart","h3c5rm","vrafjx","Bekrc4i","u1mtju","separatorEnd","zhjwy3","wvpqe5","ibv6hh","B4g9neb","separatorBottom","g2u3we","icvyot","B4j52fo","i8vvqc","start","end","bottom","a9b677","Bqenvij","d","p","getSeparatorClass","state","classNames","separator","undefined","position","useInlineDrawerStyles_unstable","resetStyles","baseClassNames","rootStyles","className"],"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const inlineDrawerClassNames = {\n    root: 'fui-InlineDrawer'\n};\nconst useDrawerResetStyles = makeResetStyles({\n    ...drawerDefaultStyles,\n    position: 'relative'\n});\n/**\n * Styles for the root slot\n */ const borderValue = `1px solid ${tokens.colorNeutralBackground3}`;\nconst useDrawerRootStyles = makeStyles({\n    /* Separator */ separatorStart: {\n        borderRight: borderValue\n    },\n    separatorEnd: {\n        borderLeft: borderValue\n    },\n    separatorBottom: {\n        borderTop: borderValue\n    },\n    /* Positioning */ start: {},\n    end: {},\n    bottom: {\n        width: '100%',\n        height: `var(${drawerCSSVars.drawerSizeVar})`\n    }\n});\nfunction getSeparatorClass(state, classNames) {\n    if (!state.separator) {\n        return undefined;\n    }\n    switch(state.position){\n        case 'start':\n            return classNames.separatorStart;\n        case 'end':\n            return classNames.separatorEnd;\n        case 'bottom':\n            return classNames.separatorBottom;\n        default:\n            return undefined;\n    }\n}\n/**\n * Apply styling to the InlineDrawer slots based on the state\n */ export const useInlineDrawerStyles_unstable = (state)=>{\n    'use no memo';\n    const resetStyles = useDrawerResetStyles();\n    const baseClassNames = useDrawerBaseClassNames(state);\n    const rootStyles = useDrawerRootStyles();\n    state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,yCAAyC;AACrH,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGT,aAAA,6UAG5B,CAAC;AACF;AACA;AACA;AAAI,MAAMU,WAAW,GAAG,aAAaP,MAAM,CAACQ,uBAAuB,EAAE;AACrE,MAAMC,mBAAmB,gBAAGX,QAAA;EAAAY,cAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,eAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;EAAAC,GAAA;EAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAgB3B,CAAC;AACF,SAASC,iBAAiBA,CAACC,KAAK,EAAEC,UAAU,EAAE;EAC1C,IAAI,CAACD,KAAK,CAACE,SAAS,EAAE;IAClB,OAAOC,SAAS;EACpB;EACA,QAAOH,KAAK,CAACI,QAAQ;IACjB,KAAK,OAAO;MACR,OAAOH,UAAU,CAACxB,cAAc;IACpC,KAAK,KAAK;MACN,OAAOwB,UAAU,CAACnB,YAAY;IAClC,KAAK,QAAQ;MACT,OAAOmB,UAAU,CAACd,eAAe;IACrC;MACI,OAAOgB,SAAS;EACxB;AACJ;AACA;AACA;AACA;AAAI,OAAO,MAAME,8BAA8B,GAAIL,KAAK,IAAG;EACvD,aAAa;;EACb,MAAMM,WAAW,GAAGjC,oBAAoB,CAAC,CAAC;EAC1C,MAAMkC,cAAc,GAAGrC,uBAAuB,CAAC8B,KAAK,CAAC;EACrD,MAAMQ,UAAU,GAAGhC,mBAAmB,CAAC,CAAC;EACxCwB,KAAK,CAAC5B,IAAI,CAACqC,SAAS,GAAG3C,YAAY,CAACK,sBAAsB,CAACC,IAAI,EAAEkC,WAAW,EAAEC,cAAc,EAAER,iBAAiB,CAACC,KAAK,EAAEQ,UAAU,CAAC,EAAEA,UAAU,CAACR,KAAK,CAACI,QAAQ,CAAC,EAAEJ,KAAK,CAAC5B,IAAI,CAACqC,SAAS,CAAC;EACrL,OAAOT,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["OverlayDrawer.types.ts"],"sourcesContent":["import type { DialogProps } from '@fluentui/react-dialog';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\nimport { 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\n/**\n * OverlayDrawer internal slots for when using with composition API\n */\nexport type OverlayDrawerInternalSlots = OverlayDrawerSlots & {\n  /**\n   * Slot for the dialog component that wraps the drawer.\n   */\n  dialog: 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> & Required<DrawerBaseState>;\n"],"names":[],"rangeMappings":";;","mappings":"AAuCA;;CAEC,GACD,WAAwG"}
+{"version":3,"sources":["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  backdropMotion?: Slot<PresenceMotionSlotProps<OverlayDrawerSurfaceMotionParams>>;\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: 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> & Required<DrawerBaseState>;\n"],"names":[],"rangeMappings":";;","mappings":"AA4CA;;CAEC,GACD,WAAwG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["OverlayDrawerSurface.types.ts"],"sourcesContent":["import type { DialogSurfaceProps, DialogSurfaceSlots } from '@fluentui/react-dialog';\nimport type { ComponentProps, Slot } from '@fluentui/react-utilities';\n\n/**\n * OverlayDrawerSurface slots\n */\nexport type OverlayDrawerSurfaceSlots = Pick<DialogSurfaceSlots, 'backdrop'> & {\n  root: Slot<'div', 'aside'>;\n};\n\n/**\n * OverlayDrawerSurface Props\n */\nexport type OverlayDrawerSurfaceProps = ComponentProps<OverlayDrawerSurfaceSlots> &\n  Pick<DialogSurfaceProps, 'mountNode'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAUA;;CAEC,GACD,WACwC"}
+{"version":3,"sources":["OverlayDrawerSurface.types.ts"],"sourcesContent":["import type { DialogSurfaceProps, DialogSurfaceSlots } from '@fluentui/react-dialog';\nimport type { ComponentProps, Slot } from '@fluentui/react-utilities';\n\n/**\n * OverlayDrawerSurface slots\n */\nexport type OverlayDrawerSurfaceSlots = Partial<Pick<DialogSurfaceSlots, 'backdrop' | 'backdropMotion'>> & {\n  root: Slot<'div', 'aside'>;\n};\n\n/**\n * OverlayDrawerSurface Props\n */\nexport type OverlayDrawerSurfaceProps = ComponentProps<OverlayDrawerSurfaceSlots> &\n  Pick<DialogSurfaceProps, 'mountNode'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAUA;;CAEC,GACD,WACwC"}

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

@@ -1,9 +1,5 @@
 import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-export const OverlayDrawerSurfaceClassNames = {
-  root: 'fui-OverlayDrawerSurface',
-  backdrop: 'fui-OverlayDrawerSurface__backdrop'
-};
 /**
  * Styles for the backdrop slot
  */

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

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","OverlayDrawerSurfaceClassNames","root","backdrop","useBackdropResetStyles","useBackdropStyles","nested","De3pzq","d","useOverlayDrawerSurfaceStyles_unstable","state","backdropResetStyles","backdropStyles","className","isNestedDialog"],"sources":["useOverlayDrawerSurfaceStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const OverlayDrawerSurfaceClassNames = {\n    root: 'fui-OverlayDrawerSurface',\n    backdrop: 'fui-OverlayDrawerSurface__backdrop'\n};\n/**\n * Styles for the backdrop slot\n */ const useBackdropResetStyles = makeResetStyles({\n    inset: '0px',\n    position: 'fixed',\n    backgroundColor: 'rgba(0, 0, 0, 0.4)'\n});\nconst useBackdropStyles = makeStyles({\n    nested: {\n        backgroundColor: tokens.colorTransparentBackground\n    }\n});\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */ export const useOverlayDrawerSurfaceStyles_unstable = (state)=>{\n    'use no memo';\n    const backdropResetStyles = useBackdropResetStyles();\n    const backdropStyles = useBackdropStyles();\n    if (state.backdrop) {\n        state.backdrop.className = mergeClasses(backdropResetStyles, state.isNestedDialog && backdropStyles.nested, state.backdrop.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,8BAA8B,GAAG;EAC1CC,IAAI,EAAE,0BAA0B;EAChCC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,sBAAsB,gBAAGP,aAAA,6FAIlC,CAAC;AACF,MAAMQ,iBAAiB,gBAAGP,QAAA;EAAAQ,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,sCAAsC,GAAIC,KAAK,IAAG;EAC/D,aAAa;;EACb,MAAMC,mBAAmB,GAAGP,sBAAsB,CAAC,CAAC;EACpD,MAAMQ,cAAc,GAAGP,iBAAiB,CAAC,CAAC;EAC1C,IAAIK,KAAK,CAACP,QAAQ,EAAE;IAChBO,KAAK,CAACP,QAAQ,CAACU,SAAS,GAAGd,YAAY,CAACY,mBAAmB,EAAED,KAAK,CAACI,cAAc,IAAIF,cAAc,CAACN,MAAM,EAAEI,KAAK,CAACP,QAAQ,CAACU,SAAS,CAAC;EACzI;EACA,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","useBackdropResetStyles","useBackdropStyles","nested","De3pzq","d","useOverlayDrawerSurfaceStyles_unstable","state","backdropResetStyles","backdropStyles","backdrop","className","isNestedDialog"],"sources":["useOverlayDrawerSurfaceStyles.styles.js"],"sourcesContent":["import { 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: 'rgba(0, 0, 0, 0.4)'\n});\nconst useBackdropStyles = makeStyles({\n    nested: {\n        backgroundColor: tokens.colorTransparentBackground\n    }\n});\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */ export const useOverlayDrawerSurfaceStyles_unstable = (state)=>{\n    'use no memo';\n    const backdropResetStyles = useBackdropResetStyles();\n    const backdropStyles = useBackdropStyles();\n    if (state.backdrop) {\n        state.backdrop.className = mergeClasses(backdropResetStyles, state.isNestedDialog && backdropStyles.nested, state.backdrop.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C;AACA;AACA;AAAI,MAAMC,sBAAsB,gBAAGJ,aAAA,6FAIlC,CAAC;AACF,MAAMK,iBAAiB,gBAAGJ,QAAA;EAAAK,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,sCAAsC,GAAIC,KAAK,IAAG;EAC/D,aAAa;;EACb,MAAMC,mBAAmB,GAAGP,sBAAsB,CAAC,CAAC;EACpD,MAAMQ,cAAc,GAAGP,iBAAiB,CAAC,CAAC;EAC1C,IAAIK,KAAK,CAACG,QAAQ,EAAE;IAChBH,KAAK,CAACG,QAAQ,CAACC,SAAS,GAAGZ,YAAY,CAACS,mBAAmB,EAAED,KAAK,CAACK,cAAc,IAAIH,cAAc,CAACN,MAAM,EAAEI,KAAK,CAACG,QAAQ,CAACC,SAAS,CAAC;EACzI;EACA,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/OverlayDrawer/renderOverlayDrawer.js

@@ -4,9 +4,6 @@ import { DrawerProvider } from '../../contexts/drawerContext';
 /**
  * Render the final JSX of OverlayDrawer
  */ export const renderOverlayDrawer_unstable = (state, contextValue)=>{
-    if (!state.motion.canRender) {
-        return null;
-    }
     assertSlots(state);
     return /*#__PURE__*/ _jsx(DrawerProvider, {
         value: contextValue,

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

@@ -1 +1 @@
-{"version":3,"sources":["renderOverlayDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { OverlayDrawerState, OverlayDrawerInternalSlots } from './OverlayDrawer.types';\n\n/**\n * Render the final JSX of OverlayDrawer\n */\nexport const renderOverlayDrawer_unstable = (state: OverlayDrawerState, contextValue: DrawerContextValue) => {\n  if (!state.motion.canRender) {\n    return null;\n  }\n\n  assertSlots<OverlayDrawerInternalSlots>(state);\n\n  return (\n    <DrawerProvider value={contextValue}>\n      <state.dialog>\n        <state.root />\n      </state.dialog>\n    </DrawerProvider>\n  );\n};\n"],"names":["assertSlots","DrawerProvider","renderOverlayDrawer_unstable","state","contextValue","motion","canRender","value","dialog","root"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAA6BC,cAAc,QAAQ,+BAA+B;AAIlF;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,OAA2BC;IACtE,IAAI,CAACD,MAAME,MAAM,CAACC,SAAS,EAAE;QAC3B,OAAO;IACT;IAEAN,YAAwCG;IAExC,qBACE,KAACF;QAAeM,OAAOH;kBACrB,cAAA,KAACD,MAAMK,MAAM;sBACX,cAAA,KAACL,MAAMM,IAAI;;;AAInB,EAAE"}
+{"version":3,"sources":["renderOverlayDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { OverlayDrawerState, OverlayDrawerInternalSlots } from './OverlayDrawer.types';\n\n/**\n * Render the final JSX of OverlayDrawer\n */\nexport const renderOverlayDrawer_unstable = (state: OverlayDrawerState, contextValue: DrawerContextValue) => {\n  assertSlots<OverlayDrawerInternalSlots>(state);\n\n  return (\n    <DrawerProvider value={contextValue}>\n      <state.dialog>\n        <state.root />\n      </state.dialog>\n    </DrawerProvider>\n  );\n};\n"],"names":["assertSlots","DrawerProvider","renderOverlayDrawer_unstable","state","contextValue","value","dialog","root"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAA6BC,cAAc,QAAQ,+BAA+B;AAIlF;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,OAA2BC;IACtEJ,YAAwCG;IAExC,qBACE,KAACF;QAAeI,OAAOD;kBACrB,cAAA,KAACD,MAAMG,MAAM;sBACX,cAAA,KAACH,MAAMI,IAAI;;;AAInB,EAAE"}

package/lib/components/OverlayDrawer/useOverlayDrawer.js

@@ -1,9 +1,16 @@
+import { Dialog } from '@fluentui/react-dialog';
+import { slot } from '@fluentui/react-utilities';
 import * as React from 'react';
-import { slot, useMergedRefs } from '@fluentui/react-utilities';
-import { useMotion } from '@fluentui/react-motion-preview';
+import { OverlayDrawerMotion, OverlaySurfaceBackdropMotion } from '../../shared/drawerMotions';
 import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
-import { OverlayDrawerDialog } from './OverlayDrawerDialog';
 import { OverlayDrawerSurface } from './OverlayDrawerSurface';
+import { mergePresenceSlots } from '../../shared/drawerMotionUtils';
+const STATIC_MOTION = {
+    active: true,
+    canRender: true,
+    ref: /*#__PURE__*/ React.createRef(),
+    type: 'idle'
+};
 /**
  * Create the state required to render OverlayDrawer.
  *
@@ -14,16 +21,18 @@ import { OverlayDrawerSurface } from './OverlayDrawerSurface';
  * @param ref - reference to root HTMLElement of OverlayDrawer
  */ export const useOverlayDrawer_unstable = (props, ref)=>{
     const { open, size, position } = useDrawerDefaultProps(props);
-    const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;
-    const motion = useMotion(open);
+    const { backdropMotion, modalType = 'modal', inertTrapFocus, onOpenChange, surfaceMotion } = props;
     const backdropProps = slot.resolveShorthand(props.backdrop);
     const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;
     const root = slot.always({
         ...props,
-        ref: useMergedRefs(ref, motion.ref),
+        ref,
         backdrop: hasCustomBackdrop ? {
             ...backdropProps
-        } : null
+        } : null,
+        backdropMotion: mergePresenceSlots(backdropMotion, OverlaySurfaceBackdropMotion, {
+            size
+        })
     }, {
         /**
        * Drawer accepts a `div` or `aside` element type, but Dialog only accepts a `div` element type.
@@ -35,22 +44,27 @@ import { OverlayDrawerSurface } from './OverlayDrawerSurface';
         onOpenChange,
         inertTrapFocus,
         modalType,
+        surfaceMotion: mergePresenceSlots(surfaceMotion, OverlayDrawerMotion, {
+            position,
+            size
+        }),
         /**
        * children is not needed here because we construct the children in the render function,
        * but it's required by DialogProps
        */ children: null
     }, {
-        elementType: OverlayDrawerDialog
+        elementType: Dialog
     });
     return {
         components: {
             root: OverlayDrawerSurface,
-            dialog: OverlayDrawerDialog
+            dialog: Dialog
         },
         root,
         dialog,
+        open,
         size,
         position,
-        motion
+        motion: STATIC_MOTION
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useOverlayDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useMotion } from '@fluentui/react-motion-preview';\n\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { OverlayDrawerProps, OverlayDrawerState } from './OverlayDrawer.types';\nimport { OverlayDrawerDialog } from './OverlayDrawerDialog';\nimport { OverlayDrawerSurface } from './OverlayDrawerSurface';\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 { modalType = 'modal', inertTrapFocus, onOpenChange } = props;\n\n  const motion = useMotion<HTMLElement>(open);\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: useMergedRefs(ref, motion.ref),\n      backdrop: hasCustomBackdrop ? { ...backdropProps } : null,\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      /**\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 JSX.Element,\n    },\n    {\n      elementType: OverlayDrawerDialog,\n    },\n  );\n\n  return {\n    components: {\n      root: OverlayDrawerSurface,\n      dialog: OverlayDrawerDialog,\n    },\n\n    root,\n    dialog,\n\n    size,\n    position,\n    motion,\n  };\n};\n"],"names":["React","slot","useMergedRefs","useMotion","useDrawerDefaultProps","OverlayDrawerDialog","OverlayDrawerSurface","useOverlayDrawer_unstable","props","ref","open","size","position","modalType","inertTrapFocus","onOpenChange","motion","backdropProps","resolveShorthand","backdrop","hasCustomBackdrop","root","always","elementType","dialog","children","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAChE,SAASC,SAAS,QAAQ,iCAAiC;AAE3D,SAASC,qBAAqB,QAAQ,qCAAqC;AAE3E,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,oBAAoB,QAAQ,yBAAyB;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGR,sBAAsBI;IACvD,MAAM,EAAEK,YAAY,OAAO,EAAEC,cAAc,EAAEC,YAAY,EAAE,GAAGP;IAE9D,MAAMQ,SAASb,UAAuBO;IAEtC,MAAMO,gBAAgBhB,KAAKiB,gBAAgB,CAACV,MAAMW,QAAQ;IAC1D,MAAMC,oBAAoBP,cAAc,eAAeI,kBAAkB;IAEzE,MAAMI,OAAOpB,KAAKqB,MAAM,CACtB;QACE,GAAGd,KAAK;QACRC,KAAKP,cAAcO,KAAKO,OAAOP,GAAG;QAClCU,UAAUC,oBAAoB;YAAE,GAAGH,aAAa;QAAC,IAAI;IACvD,GACA;QACE;;;OAGC,GACDM,aAAajB;IACf;IAGF,MAAMkB,SAASvB,KAAKqB,MAAM,CACxB;QACEZ;QACAK;QACAD;QACAD;QACA;;;OAGC,GACDY,UAAU;IACZ,GACA;QACEF,aAAalB;IACf;IAGF,OAAO;QACLqB,YAAY;YACVL,MAAMf;YACNkB,QAAQnB;QACV;QAEAgB;QACAG;QAEAb;QACAC;QACAI;IACF;AACF,EAAE"}
+{"version":3,"sources":["useOverlayDrawer.tsx"],"sourcesContent":["import { Dialog } from '@fluentui/react-dialog';\nimport { slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\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 } = props;\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 }),\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 JSX.Element,\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    motion: STATIC_MOTION,\n  };\n};\n"],"names":["Dialog","slot","React","OverlayDrawerMotion","OverlaySurfaceBackdropMotion","useDrawerDefaultProps","OverlayDrawerSurface","mergePresenceSlots","STATIC_MOTION","active","canRender","ref","createRef","type","useOverlayDrawer_unstable","props","open","size","position","backdropMotion","modalType","inertTrapFocus","onOpenChange","surfaceMotion","backdropProps","resolveShorthand","backdrop","hasCustomBackdrop","root","always","elementType","dialog","children","components","motion"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,MAAM,QAAQ,yBAAyB;AAChD,SAASC,IAAI,QAAQ,4BAA4B;AACjD,YAAYC,WAAW,QAAQ;AAE/B,SAASC,mBAAmB,EAAEC,4BAA4B,QAAQ,6BAA6B;AAC/F,SAASC,qBAAqB,QAAQ,qCAAqC;AAE3E,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,mBAAKT,MAAMU,SAAS;IACpBC,MAAM;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAJ;IAEA,MAAM,EAAEK,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGb,sBAAsBU;IACvD,MAAM,EAAEI,cAAc,EAAEC,YAAY,OAAO,EAAEC,cAAc,EAAEC,YAAY,EAAEC,aAAa,EAAE,GAAGR;IAE7F,MAAMS,gBAAgBvB,KAAKwB,gBAAgB,CAACV,MAAMW,QAAQ;IAC1D,MAAMC,oBAAoBP,cAAc,eAAeI,kBAAkB;IAEzE,MAAMI,OAAO3B,KAAK4B,MAAM,CACtB;QACE,GAAGd,KAAK;QACRJ;QACAe,UAAUC,oBAAoB;YAAE,GAAGH,aAAa;QAAC,IAAI;QACrDL,gBAAgBZ,mBAAmBY,gBAAgBf,8BAA8B;YAAEa;QAAK;IAC1F,GACA;QACE;;;OAGC,GACDa,aAAaxB;IACf;IAGF,MAAMyB,SAAS9B,KAAK4B,MAAM,CACxB;QACEb;QACAM;QACAD;QACAD;QACAG,eAAehB,mBAAmBgB,eAAepB,qBAAqB;YAAEe;YAAUD;QAAK;QACvF;;;OAGC,GACDe,UAAU;IACZ,GACA;QACEF,aAAa9B;IACf;IAGF,OAAO;QACLiC,YAAY;YACVL,MAAMtB;YACNyB,QAAQ/B;QACV;QAEA4B;QACAG;QAEAf;QACAC;QACAC;QACAgB,QAAQ1B;IACV;AACF,EAAE"}