@fluentui/react-drawer 9.0.0-beta.20 → 9.0.0-beta.21

package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerHeaderTitle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { DrawerHeaderTitleProps, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\nimport { useDialogTitle_unstable } from '@fluentui/react-dialog';\n\n/**\n * Create the state required to render DrawerHeaderTitle.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderTitleStyles_unstable,\n * before being passed to renderDrawerHeaderTitle_unstable.\n *\n * @param props - props from this instance of DrawerHeaderTitle\n * @param ref - reference to root HTMLElement of DrawerHeaderTitle\n */\nexport const useDrawerHeaderTitle_unstable = (\n  props: DrawerHeaderTitleProps,\n  ref: React.Ref<HTMLDivElement>,\n): DrawerHeaderTitleState => {\n  const { root: heading, action, components: titleComponents } = useDialogTitle_unstable(props, ref);\n\n  return {\n    components: {\n      root: 'div',\n      heading: titleComponents.root,\n      action: titleComponents.action,\n    },\n\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    heading: slot.optional(props.heading, {\n      renderByDefault: true,\n      defaultProps: {\n        ...heading,\n        className: undefined, // remove className from heading\n      },\n      elementType: titleComponents.root,\n    }),\n    action: slot.optional(props.action, {\n      defaultProps: action,\n      elementType: titleComponents.action,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useDialogTitle_unstable","useDrawerHeaderTitle_unstable","props","ref","root","heading","action","components","titleComponents","always","elementType","optional","renderByDefault","defaultProps","className","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAExE,SAASC,uBAAuB,QAAQ,yBAAyB;AAEjE;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC,MAC2B;IAC3B,MAAM,EAAEC,MAAMC,QAAO,EAAEC,OAAM,EAAEC,YAAYC,gBAAe,EAAE,GAAGR,wBAAwBE,OAAOC;IAE9F,OAAO;QACLI,YAAY;YACVH,MAAM;YACNC,SAASG,gBAAgBJ,IAAI;YAC7BE,QAAQE,gBAAgBF,MAAM;QAChC;QAEAF,MAAML,KAAKU,MAAM,CACfX,sBAAsB,OAAO;YAC3BK;YACA,GAAGD,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;QAEvBL,SAASN,KAAKY,QAAQ,CAACT,MAAMG,OAAO,EAAE;YACpCO,iBAAiB,IAAI;YACrBC,cAAc;gBACZ,GAAGR,OAAO;gBACVS,WAAWC;YACb;YACAL,aAAaF,gBAAgBJ,IAAI;QACnC;QACAE,QAAQP,KAAKY,QAAQ,CAACT,MAAMI,MAAM,EAAE;YAClCO,cAAcP;YACdI,aAAaF,gBAAgBF,MAAM;QACrC;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawerHeaderTitle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { DrawerHeaderTitleProps, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\n\n/**\n * Create the state required to render DrawerHeaderTitle.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderTitleStyles_unstable,\n * before being passed to renderDrawerHeaderTitle_unstable.\n *\n * @param props - props from this instance of DrawerHeaderTitle\n * @param ref - reference to root HTMLElement of DrawerHeaderTitle\n */\nexport const useDrawerHeaderTitle_unstable = (\n  props: DrawerHeaderTitleProps,\n  ref: React.Ref<HTMLDivElement>,\n): DrawerHeaderTitleState => {\n  let heading = slot.resolveShorthand(props.heading);\n\n  if (!heading) {\n    heading = {\n      children: props.children,\n    };\n  }\n\n  return {\n    components: {\n      root: 'div',\n      heading: 'h2',\n      action: 'div',\n    },\n\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    heading: slot.optional(getNativeElementProps(heading.as ?? 'h2', heading), {\n      defaultProps: {\n        children: props.children,\n      },\n      renderByDefault: true,\n      elementType: 'h2',\n    }),\n    action: slot.optional(props.action, {\n      elementType: 'div',\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useDrawerHeaderTitle_unstable","props","ref","heading","resolveShorthand","children","components","root","action","always","elementType","optional","as","defaultProps","renderByDefault"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAGxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,IAAIC,UAAUJ,KAAKK,gBAAgB,CAACH,MAAME,OAAO;IAEjD,IAAI,CAACA,SAAS;QACZA,UAAU;YACRE,UAAUJ,MAAMI,QAAQ;QAC1B;IACF;QAgB+CF;IAd/C,OAAO;QACLG,YAAY;YACVC,MAAM;YACNJ,SAAS;YACTK,QAAQ;QACV;QAEAD,MAAMR,KAAKU,MAAM,CACfX,sBAAsB,OAAO;YAC3BI;YACA,GAAGD,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBP,SAASJ,KAAKY,QAAQ,CAACb,sBAAsBK,CAAAA,cAAAA,QAAQS,EAAE,cAAVT,yBAAAA,cAAc,MAAMA,UAAU;YACzEU,cAAc;gBACZR,UAAUJ,MAAMI,QAAQ;YAC1B;YACAS,iBAAiB;YACjBJ,aAAa;QACf;QACAF,QAAQT,KAAKY,QAAQ,CAACV,MAAMO,MAAM,EAAE;YAClCE,aAAa;QACf;IACF;AACF,EAAE"}

package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","useDialogTitleStyles_unstable","tokens","drawerHeaderTitleClassNames","root","heading","action","useStyles","mc9l5x","Brf1p80","Bt984gj","i8kkvl","t21cq0","d","useDrawerHeaderTitleStyles_unstable","state","styles","components","className"],"sources":["useDrawerHeaderTitleStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderTitleClassNames = {\n    root: 'fui-DrawerHeaderTitle',\n    heading: 'fui-DrawerHeaderTitle__heading',\n    action: 'fui-DrawerHeaderTitle__action'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        columnGap: tokens.spacingHorizontalS\n    },\n    action: {\n        marginRight: `calc(${tokens.spacingHorizontalS} * -1)`\n    }\n});\n/**\n * Apply styling to the DrawerHeaderTitle slots based on the state\n */ export const useDrawerHeaderTitleStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const { heading: root = {} , action , components  } = state;\n    useDialogTitleStyles_unstable({\n        components: {\n            root: components.heading,\n            action: components.action\n        },\n        root,\n        action\n    });\n    state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);\n    if (state.heading) {\n        state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);\n    }\n    if (state.action) {\n        state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,2BAA2B,GAAG;EACvCC,IAAI,EAAE,uBAAuB;EAC7BC,OAAO,EAAE,gCAAgC;EACzCC,MAAM,EAAE;AACZ,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGR,QAAA;EAAAK,IAAA;IAAAI,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAL,MAAA;IAAAM,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEF,OAAO,EAAED,IAAI,GAAG,CAAC,CAAC;IAAGE,MAAM;IAAGW;EAAY,CAAC,GAAGF,KAAK;EAC3Dd,6BAA6B,CAAC;IAC1BgB,UAAU,EAAE;MACRb,IAAI,EAAEa,UAAU,CAACZ,OAAO;MACxBC,MAAM,EAAEW,UAAU,CAACX;IACvB,CAAC;IACDF,IAAI;IACJE;EACJ,CAAC,CAAC;EACFS,KAAK,CAACX,IAAI,CAACc,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACC,IAAI,EAAEY,MAAM,CAACZ,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACc,SAAS,CAAC;EACxG,IAAIH,KAAK,CAACV,OAAO,EAAE;IACfU,KAAK,CAACV,OAAO,CAACa,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACE,OAAO,EAAEU,KAAK,CAACV,OAAO,CAACa,SAAS,CAAC;EACxG;EACA,IAAIH,KAAK,CAACT,MAAM,EAAE;IACdS,KAAK,CAACT,MAAM,CAACY,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACG,MAAM,EAAEU,MAAM,CAACV,MAAM,EAAES,KAAK,CAACT,MAAM,CAACY,SAAS,CAAC;EACpH;EACA,OAAOH,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__styles","mergeClasses","useDialogTitleStyles_unstable","tokens","drawerHeaderTitleClassNames","root","heading","action","useStyles","mc9l5x","Brf1p80","Bt984gj","i8kkvl","t21cq0","d","useDrawerHeaderTitleStyles_unstable","state","styles","components","className"],"sources":["useDrawerHeaderTitleStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderTitleClassNames = {\n    root: 'fui-DrawerHeaderTitle',\n    heading: 'fui-DrawerHeaderTitle__heading',\n    action: 'fui-DrawerHeaderTitle__action'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        columnGap: tokens.spacingHorizontalS\n    },\n    action: {\n        marginRight: `calc(${tokens.spacingHorizontalS} * -1)`\n    }\n});\n/**\n * Apply styling to the DrawerHeaderTitle slots based on the state\n */ export const useDrawerHeaderTitleStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const { heading: root = {}, action, components } = state;\n    useDialogTitleStyles_unstable({\n        components: {\n            root: components.heading,\n            action: components.action\n        },\n        root,\n        action\n    });\n    state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);\n    if (state.heading) {\n        state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);\n    }\n    if (state.action) {\n        state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,2BAA2B,GAAG;EACvCC,IAAI,EAAE,uBAAuB;EAC7BC,OAAO,EAAE,gCAAgC;EACzCC,MAAM,EAAE;AACZ,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGR,QAAA;EAAAK,IAAA;IAAAI,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAL,MAAA;IAAAM,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEF,OAAO,EAAED,IAAI,GAAG,CAAC,CAAC;IAAEE,MAAM;IAAEW;EAAW,CAAC,GAAGF,KAAK;EACxDd,6BAA6B,CAAC;IAC1BgB,UAAU,EAAE;MACRb,IAAI,EAAEa,UAAU,CAACZ,OAAO;MACxBC,MAAM,EAAEW,UAAU,CAACX;IACvB,CAAC;IACDF,IAAI;IACJE;EACJ,CAAC,CAAC;EACFS,KAAK,CAACX,IAAI,CAACc,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACC,IAAI,EAAEY,MAAM,CAACZ,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACc,SAAS,CAAC;EACxG,IAAIH,KAAK,CAACV,OAAO,EAAE;IACfU,KAAK,CAACV,OAAO,CAACa,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACE,OAAO,EAAEU,KAAK,CAACV,OAAO,CAACa,SAAS,CAAC;EACxG;EACA,IAAIH,KAAK,CAACT,MAAM,EAAE;IACdS,KAAK,CAACT,MAAM,CAACY,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACG,MAAM,EAAEU,MAAM,CAACV,MAAM,EAAES,KAAK,CAACT,MAAM,CAACY,SAAS,CAAC;EACpH;EACA,OAAOH,KAAK;AAChB,CAAC"}

package/lib/components/DrawerInline/DrawerInline.js

@@ -3,7 +3,7 @@ import { useDrawerInline_unstable } from './useDrawerInline';
 import { renderDrawerInline_unstable } from './renderDrawerInline';
 import { useDrawerInlineStyles_unstable } from './useDrawerInlineStyles.styles';
 /**
- * DrawerInline is often used for navigation that is not dissmissable. As it is on the same level as
+ * DrawerInline is often used for navigation that is not dismissible. As it is on the same level as
  * the main surface, users can still interact with other UI elements.
  */ export const DrawerInline = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useDrawerInline_unstable(props, ref);

package/lib/components/DrawerInline/DrawerInline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DrawerInline.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDrawerInline_unstable } from './useDrawerInline';\nimport { renderDrawerInline_unstable } from './renderDrawerInline';\nimport { useDrawerInlineStyles_unstable } from './useDrawerInlineStyles.styles';\nimport type { DrawerInlineProps } from './DrawerInline.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * DrawerInline is often used for navigation that is not dissmissable. As it is on the same level as\n * the main surface, users can still interact with other UI elements.\n */\nexport const DrawerInline: ForwardRefComponent<DrawerInlineProps> = React.forwardRef((props, ref) => {\n  const state = useDrawerInline_unstable(props, ref);\n\n  useDrawerInlineStyles_unstable(state);\n  return renderDrawerInline_unstable(state);\n});\n\nDrawerInline.displayName = 'DrawerInline';\n"],"names":["React","useDrawerInline_unstable","renderDrawerInline_unstable","useDrawerInlineStyles_unstable","DrawerInline","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAIhF;;;CAGC,GACD,OAAO,MAAMC,6BAAuDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACnG,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CJ,+BAA+BK;IAC/B,OAAON,4BAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}
+{"version":3,"sources":["DrawerInline.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDrawerInline_unstable } from './useDrawerInline';\nimport { renderDrawerInline_unstable } from './renderDrawerInline';\nimport { useDrawerInlineStyles_unstable } from './useDrawerInlineStyles.styles';\nimport type { DrawerInlineProps } from './DrawerInline.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * DrawerInline is often used for navigation that is not dismissible. As it is on the same level as\n * the main surface, users can still interact with other UI elements.\n */\nexport const DrawerInline: ForwardRefComponent<DrawerInlineProps> = React.forwardRef((props, ref) => {\n  const state = useDrawerInline_unstable(props, ref);\n\n  useDrawerInlineStyles_unstable(state);\n  return renderDrawerInline_unstable(state);\n});\n\nDrawerInline.displayName = 'DrawerInline';\n"],"names":["React","useDrawerInline_unstable","renderDrawerInline_unstable","useDrawerInlineStyles_unstable","DrawerInline","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAIhF;;;CAGC,GACD,OAAO,MAAMC,6BAAuDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CJ,+BAA+BK;IAC/B,OAAON,4BAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["DrawerInline.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { DrawerBaseProps } from '../../util/DrawerBase.types';\n\nexport type DrawerInlineSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * DrawerInline Props\n */\nexport type DrawerInlineProps = ComponentProps<DrawerInlineSlots> &\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 DrawerInline\n */\nexport type DrawerInlineState = ComponentState<DrawerInlineSlots> & DrawerInlineProps;\n"],"names":[],"mappings":"AAAA,WAuBsF"}
+{"version":3,"sources":["DrawerInline.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { DrawerBaseProps, DrawerBaseState } from '../../util/DrawerBase.types';\n\nexport type DrawerInlineSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * DrawerInline Props\n */\nexport type DrawerInlineProps = ComponentProps<DrawerInlineSlots> &\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 DrawerInline\n */\nexport type DrawerInlineState = Required<\n  ComponentState<DrawerInlineSlots> & DrawerBaseState & Pick<DrawerInlineProps, 'separator'>\n>;\n"],"names":[],"mappings":"AAAA,WAyBE"}

package/lib/components/DrawerInline/renderDrawerInline.js

@@ -1,11 +1,11 @@
-/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of DrawerInline
  */ export const renderDrawerInline_unstable = (state)=>{
-    assertSlots(state);
-    if (!state.open) {
+    if (!state.motion.canRender) {
         return null;
     }
-    return /*#__PURE__*/ createElement(state.root, null);
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
 };

package/lib/components/DrawerInline/renderDrawerInline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerInline.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DrawerInlineState, DrawerInlineSlots } from './DrawerInline.types';\n\n/**\n * Render the final JSX of DrawerInline\n */\nexport const renderDrawerInline_unstable = (state: DrawerInlineState) => {\n  assertSlots<DrawerInlineSlots>(state);\n\n  if (!state.open) {\n    return null;\n  }\n  return <state.root />;\n};\n"],"names":["createElement","assertSlots","renderDrawerInline_unstable","state","open","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,QAA6B;IACvEF,YAA+BE;IAE/B,IAAI,CAACA,MAAMC,IAAI,EAAE;QACf,OAAO,IAAI;IACb,CAAC;IACD,qBAAO,AAfT,cAeUD,MAAME,IAAI;AACpB,EAAE"}
+{"version":3,"sources":["renderDrawerInline.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DrawerInlineState, DrawerInlineSlots } from './DrawerInline.types';\n\n/**\n * Render the final JSX of DrawerInline\n */\nexport const renderDrawerInline_unstable = (state: DrawerInlineState) => {\n  if (!state.motion.canRender) {\n    return null;\n  }\n\n  assertSlots<DrawerInlineSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderDrawerInline_unstable","state","motion","canRender","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C,IAAI,CAACA,MAAMC,MAAM,CAACC,SAAS,EAAE;QAC3B,OAAO;IACT;IAEAJ,YAA+BE;IAE/B,qBAAO,KAACA,MAAMG,IAAI;AACpB,EAAE"}

package/lib/components/DrawerInline/useDrawerInline.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { getNativeElementProps, useControllableState, slot } from '@fluentui/react-utilities';
-import { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';
+import { getNativeElementProps, useControllableState, slot, useMergedRefs } from '@fluentui/react-utilities';
+import { useMotion } from '@fluentui/react-motion-preview';
+import { useDrawerDefaultProps } from '../../util/useDrawerDefaultProps';
 /**
  * Create the state required to render DrawerInline.
  *
@@ -10,26 +11,27 @@ import { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';
  * @param props - props from this instance of DrawerInline
  * @param ref - reference to root HTMLElement of DrawerInline
  */ export const useDrawerInline_unstable = (props, ref)=>{
-    const { open: initialOpen , defaultOpen , size , position  } = getDefaultDrawerProps(props);
-    const { separator =false  } = props;
+    const { size, position, ...defaultProps } = useDrawerDefaultProps(props);
+    const { separator = false } = props;
     const [open] = useControllableState({
-        state: initialOpen,
-        defaultState: defaultOpen,
+        state: defaultProps.open,
+        defaultState: defaultProps.defaultOpen,
         initialState: false
     });
+    const motion = useMotion(open);
     return {
         components: {
             root: 'div'
         },
         root: slot.always(getNativeElementProps('div', {
-            ref,
-            ...props
+            ...props,
+            ref: useMergedRefs(ref, motion.ref)
         }), {
             elementType: 'div'
         }),
         size,
         position,
-        open,
-        separator
+        separator,
+        motion
     };
 };

package/lib/components/DrawerInline/useDrawerInline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerInline.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useControllableState, slot } from '@fluentui/react-utilities';\nimport type { DrawerInlineProps, DrawerInlineState } from './DrawerInline.types';\nimport { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';\n\n/**\n * Create the state required to render DrawerInline.\n *\n * The returned state can be modified with hooks such as useDrawerInlineStyles_unstable,\n * before being passed to renderDrawerInline_unstable.\n *\n * @param props - props from this instance of DrawerInline\n * @param ref - reference to root HTMLElement of DrawerInline\n */\nexport const useDrawerInline_unstable = (props: DrawerInlineProps, ref: React.Ref<HTMLElement>): DrawerInlineState => {\n  const { open: initialOpen, defaultOpen, size, position } = getDefaultDrawerProps(props);\n  const { separator = false } = props;\n\n  const [open] = useControllableState({\n    state: initialOpen,\n    defaultState: defaultOpen,\n    initialState: false,\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n\n    size,\n    position,\n    open,\n    separator,\n  };\n};\n"],"names":["React","getNativeElementProps","useControllableState","slot","getDefaultDrawerProps","useDrawerInline_unstable","props","ref","open","initialOpen","defaultOpen","size","position","separator","state","defaultState","initialState","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,oBAAoB,EAAEC,IAAI,QAAQ,4BAA4B;AAE9F,SAASC,qBAAqB,QAAQ,mCAAmC;AAEzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC,MAAmD;IACpH,MAAM,EAAEC,MAAMC,YAAW,EAAEC,YAAW,EAAEC,KAAI,EAAEC,SAAQ,EAAE,GAAGR,sBAAsBE;IACjF,MAAM,EAAEO,WAAY,KAAK,CAAA,EAAE,GAAGP;IAE9B,MAAM,CAACE,KAAK,GAAGN,qBAAqB;QAClCY,OAAOL;QACPM,cAAcL;QACdM,cAAc,KAAK;IACrB;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMf,KAAKgB,MAAM,CACflB,sBAAsB,OAAO;YAC3BM;YACA,GAAGD,KAAK;QACV,IACA;YAAEc,aAAa;QAAM;QAGvBT;QACAC;QACAJ;QACAK;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawerInline.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useControllableState, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useMotion } from '@fluentui/react-motion-preview';\n\nimport type { DrawerInlineProps, DrawerInlineState } from './DrawerInline.types';\nimport { useDrawerDefaultProps } from '../../util/useDrawerDefaultProps';\n\n/**\n * Create the state required to render DrawerInline.\n *\n * The returned state can be modified with hooks such as useDrawerInlineStyles_unstable,\n * before being passed to renderDrawerInline_unstable.\n *\n * @param props - props from this instance of DrawerInline\n * @param ref - reference to root HTMLElement of DrawerInline\n */\nexport const useDrawerInline_unstable = (\n  props: DrawerInlineProps,\n  ref: React.Ref<HTMLDivElement>,\n): DrawerInlineState => {\n  const { size, position, ...defaultProps } = useDrawerDefaultProps(props);\n  const { separator = false } = props;\n\n  const [open] = useControllableState({\n    state: defaultProps.open,\n    defaultState: defaultProps.defaultOpen,\n    initialState: false,\n  });\n\n  const motion = useMotion<HTMLDivElement>(open);\n\n  return {\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getNativeElementProps('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","getNativeElementProps","useControllableState","slot","useMergedRefs","useMotion","useDrawerDefaultProps","useDrawerInline_unstable","props","ref","size","position","defaultProps","separator","open","state","defaultState","defaultOpen","initialState","motion","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,oBAAoB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAC7G,SAASC,SAAS,QAAQ,iCAAiC;AAG3D,SAASC,qBAAqB,QAAQ,mCAAmC;AAEzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,cAAc,GAAGN,sBAAsBE;IAClE,MAAM,EAAEK,YAAY,KAAK,EAAE,GAAGL;IAE9B,MAAM,CAACM,KAAK,GAAGZ,qBAAqB;QAClCa,OAAOH,aAAaE,IAAI;QACxBE,cAAcJ,aAAaK,WAAW;QACtCC,cAAc;IAChB;IAEA,MAAMC,SAASd,UAA0BS;IAEzC,OAAO;QACLM,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMlB,KAAKmB,MAAM,CACfrB,sBAAsB,OAAO;YAC3B,GAAGO,KAAK;YACRC,KAAKL,cAAcK,KAAKU,OAAOV,GAAG;QACpC,IACA;YAAEc,aAAa;QAAM;QAGvBb;QACAC;QACAE;QACAM;IACF;AACF,EAAE"}

package/lib/components/DrawerInline/useDrawerInlineStyles.styles.js

@@ -1,16 +1,20 @@
 import * as React from 'react';
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
-import { useDrawerBaseStyles } from '../../util/useDrawerBaseStyles.styles';
 import { tokens } from '@fluentui/react-theme';
+import { drawerCSSVars, useDrawerBaseClassNames } from '../../util/useDrawerBaseStyles.styles';
 export const drawerInlineClassNames = {
   root: 'fui-DrawerInline'
 };
 /**
  * Styles for the root slot
  */
-const useStyles = /*#__PURE__*/__styles({
+const separatorValues = ['1px', 'solid', tokens.colorNeutralBackground3];
+const useDrawerRootStyles = /*#__PURE__*/__styles({
   root: {
-    qhf8xq: "f10pi13n"
+    qhf8xq: "f10pi13n",
+    abs64n: "fk73vx1",
+    Bmy1vo4: "f15rjlgw",
+    Es3by: "f1blt7p"
   },
   separatorStart: {
     Bekrc4i: ["f1hqa2wf", "finvdd3"],
@@ -21,23 +25,33 @@ const useStyles = /*#__PURE__*/__styles({
     ibv6hh: ["finvdd3", "f1hqa2wf"],
     wvpqe5: ["fjik90z", "fcdblym"],
     zhjwy3: ["f17e9lqh", "fa8zu9y"]
+  },
+  start: {
+    Bz10aip: "f1d8gkik"
+  },
+  end: {
+    Bz10aip: "f1h1g6jt"
+  },
+  visible: {
+    abs64n: "f5p0z4x",
+    Bz10aip: "f87uvqx"
   }
 }, {
-  d: [".f10pi13n{position:relative;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fa8zu9y{border-right-color:var(--colorNeutralBackground3);}", ".f17e9lqh{border-left-color:var(--colorNeutralBackground3);}"]
+  d: [".f10pi13n{position:relative;}", ".fk73vx1{opacity:0;}", ".f15rjlgw{transition-property:opacity,transform;}", ".f1blt7p{will-change:opacity,transform;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fa8zu9y{border-right-color:var(--colorNeutralBackground3);}", ".f17e9lqh{border-left-color:var(--colorNeutralBackground3);}", ".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}", ".f1h1g6jt{transform:translate3D(var(--fui-Drawer--size), 0, 0);}", ".f5p0z4x{opacity:1;}", ".f87uvqx{transform:translate3D(0, 0, 0);}"]
 });
 /**
  * Apply styling to the DrawerInline slots based on the state
  */
 export const useDrawerInlineStyles_unstable = state => {
-  const baseStyles = useDrawerBaseStyles();
-  const styles = useStyles();
+  const baseClassNames = useDrawerBaseClassNames(state);
+  const rootStyles = useDrawerRootStyles();
   const separatorClass = React.useMemo(() => {
     if (!state.separator) {
       return undefined;
     }
-    return state.position === 'start' ? styles.separatorStart : styles.separatorEnd;
-  }, [state.position, state.separator, styles.separatorEnd, styles.separatorStart]);
-  state.root.className = mergeClasses(drawerInlineClassNames.root, baseStyles.root, styles.root, state.size && baseStyles[state.size], state.position && baseStyles[state.position], separatorClass, state.root.className);
+    return state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd;
+  }, [state.position, state.separator, rootStyles.separatorEnd, rootStyles.separatorStart]);
+  state.root.className = mergeClasses(drawerInlineClassNames.root, baseClassNames, rootStyles.root, separatorClass, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);
   return state;
 };
 //# sourceMappingURL=useDrawerInlineStyles.styles.js.map

package/lib/components/DrawerInline/useDrawerInlineStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","__styles","mergeClasses","shorthands","useDrawerBaseStyles","tokens","drawerInlineClassNames","root","useStyles","qhf8xq","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","d","useDrawerInlineStyles_unstable","state","baseStyles","styles","separatorClass","useMemo","separator","undefined","position","className","size"],"sources":["useDrawerInlineStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useDrawerBaseStyles } from '../../util/useDrawerBaseStyles.styles';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerInlineClassNames = {\n    root: 'fui-DrawerInline'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        position: 'relative'\n    },\n    /* Separator */ separatorStart: {\n        ...shorthands.borderRight('1px', 'solid', tokens.colorNeutralBackground3)\n    },\n    separatorEnd: {\n        ...shorthands.borderLeft('1px', 'solid', tokens.colorNeutralBackground3)\n    }\n});\n/**\n * Apply styling to the DrawerInline slots based on the state\n */ export const useDrawerInlineStyles_unstable = (state)=>{\n    const baseStyles = useDrawerBaseStyles();\n    const styles = useStyles();\n    const separatorClass = React.useMemo(()=>{\n        if (!state.separator) {\n            return undefined;\n        }\n        return state.position === 'start' ? styles.separatorStart : styles.separatorEnd;\n    }, [\n        state.position,\n        state.separator,\n        styles.separatorEnd,\n        styles.separatorStart\n    ]);\n    state.root.className = mergeClasses(drawerInlineClassNames.root, baseStyles.root, styles.root, state.size && baseStyles[state.size], state.position && baseStyles[state.position], separatorClass, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,mBAAmB,QAAQ,uCAAuC;AAC3E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;EAAA;EAAAC,cAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,UAAU,GAAGjB,mBAAmB,CAAC,CAAC;EACxC,MAAMkB,MAAM,GAAGd,SAAS,CAAC,CAAC;EAC1B,MAAMe,cAAc,GAAGvB,KAAK,CAACwB,OAAO,CAAC,MAAI;IACrC,IAAI,CAACJ,KAAK,CAACK,SAAS,EAAE;MAClB,OAAOC,SAAS;IACpB;IACA,OAAON,KAAK,CAACO,QAAQ,KAAK,OAAO,GAAGL,MAAM,CAACZ,cAAc,GAAGY,MAAM,CAACR,YAAY;EACnF,CAAC,EAAE,CACCM,KAAK,CAACO,QAAQ,EACdP,KAAK,CAACK,SAAS,EACfH,MAAM,CAACR,YAAY,EACnBQ,MAAM,CAACZ,cAAc,CACxB,CAAC;EACFU,KAAK,CAACb,IAAI,CAACqB,SAAS,GAAG1B,YAAY,CAACI,sBAAsB,CAACC,IAAI,EAAEc,UAAU,CAACd,IAAI,EAAEe,MAAM,CAACf,IAAI,EAAEa,KAAK,CAACS,IAAI,IAAIR,UAAU,CAACD,KAAK,CAACS,IAAI,CAAC,EAAET,KAAK,CAACO,QAAQ,IAAIN,UAAU,CAACD,KAAK,CAACO,QAAQ,CAAC,EAAEJ,cAAc,EAAEH,KAAK,CAACb,IAAI,CAACqB,SAAS,CAAC;EACxN,OAAOR,KAAK;AAChB,CAAC"}
+{"version":3,"names":["React","__styles","mergeClasses","shorthands","tokens","drawerCSSVars","useDrawerBaseClassNames","drawerInlineClassNames","root","separatorValues","colorNeutralBackground3","useDrawerRootStyles","qhf8xq","abs64n","Bmy1vo4","Es3by","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","start","Bz10aip","end","visible","d","useDrawerInlineStyles_unstable","state","baseClassNames","rootStyles","separatorClass","useMemo","separator","undefined","position","className","motion","active"],"sources":["useDrawerInlineStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, useDrawerBaseClassNames } from '../../util/useDrawerBaseStyles.styles';\nexport const drawerInlineClassNames = {\n    root: 'fui-DrawerInline'\n};\n/**\n * Styles for the root slot\n */ const separatorValues = [\n    '1px',\n    'solid',\n    tokens.colorNeutralBackground3\n];\nconst useDrawerRootStyles = makeStyles({\n    root: {\n        position: 'relative',\n        opacity: 0,\n        transitionProperty: 'opacity, transform',\n        willChange: 'opacity, transform'\n    },\n    /* Separator */ separatorStart: {\n        ...shorthands.borderRight(...separatorValues)\n    },\n    separatorEnd: {\n        ...shorthands.borderLeft(...separatorValues)\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    /* Visible */ visible: {\n        opacity: 1,\n        transform: `translate3D(0, 0, 0)`\n    }\n});\n/**\n * Apply styling to the DrawerInline slots based on the state\n */ export const useDrawerInlineStyles_unstable = (state)=>{\n    const baseClassNames = useDrawerBaseClassNames(state);\n    const rootStyles = useDrawerRootStyles();\n    const separatorClass = React.useMemo(()=>{\n        if (!state.separator) {\n            return undefined;\n        }\n        return state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd;\n    }, [\n        state.position,\n        state.separator,\n        rootStyles.separatorEnd,\n        rootStyles.separatorStart\n    ]);\n    state.root.className = mergeClasses(drawerInlineClassNames.root, baseClassNames, rootStyles.root, separatorClass, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,EAAEC,uBAAuB,QAAQ,uCAAuC;AAC9F,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,eAAe,GAAG,CACxB,KAAK,EACL,OAAO,EACPL,MAAM,CAACM,uBAAuB,CACjC;AACD,MAAMC,mBAAmB,gBAAGV,QAAA;EAAAO,IAAA;IAAAI,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,KAAA;EAAA;EAAAC,cAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;EAAAE,OAAA;IAAAd,MAAA;IAAAY,OAAA;EAAA;AAAA;EAAAG,CAAA;AAAA,CAuB3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,cAAc,GAAGzB,uBAAuB,CAACwB,KAAK,CAAC;EACrD,MAAME,UAAU,GAAGrB,mBAAmB,CAAC,CAAC;EACxC,MAAMsB,cAAc,GAAGjC,KAAK,CAACkC,OAAO,CAAC,MAAI;IACrC,IAAI,CAACJ,KAAK,CAACK,SAAS,EAAE;MAClB,OAAOC,SAAS;IACpB;IACA,OAAON,KAAK,CAACO,QAAQ,KAAK,OAAO,GAAGL,UAAU,CAAChB,cAAc,GAAGgB,UAAU,CAACZ,YAAY;EAC3F,CAAC,EAAE,CACCU,KAAK,CAACO,QAAQ,EACdP,KAAK,CAACK,SAAS,EACfH,UAAU,CAACZ,YAAY,EACvBY,UAAU,CAAChB,cAAc,CAC5B,CAAC;EACFc,KAAK,CAACtB,IAAI,CAAC8B,SAAS,GAAGpC,YAAY,CAACK,sBAAsB,CAACC,IAAI,EAAEuB,cAAc,EAAEC,UAAU,CAACxB,IAAI,EAAEyB,cAAc,EAAED,UAAU,CAACF,KAAK,CAACO,QAAQ,CAAC,EAAEP,KAAK,CAACS,MAAM,CAACC,MAAM,IAAIR,UAAU,CAACL,OAAO,EAAEG,KAAK,CAACtB,IAAI,CAAC8B,SAAS,CAAC;EAC9M,OAAOR,KAAK;AAChB,CAAC"}

package/lib/components/DrawerOverlay/DrawerOverlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DrawerOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDrawerOverlay_unstable } from './useDrawerOverlay';\nimport { renderDrawerOverlay_unstable } from './renderDrawerOverlay';\nimport { useDrawerOverlayStyles_unstable } from './useDrawerOverlayStyles.styles';\nimport type { DrawerOverlayProps } from './DrawerOverlay.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * DrawerOverlay contains supplementary content and are used for complex creation, edit, or management experiences.\n */\nexport const DrawerOverlay: ForwardRefComponent<DrawerOverlayProps> = React.forwardRef((props, ref) => {\n  const state = useDrawerOverlay_unstable(props, ref);\n\n  useDrawerOverlayStyles_unstable(state);\n\n  return renderDrawerOverlay_unstable(state);\n});\n\nDrawerOverlay.displayName = 'DrawerOverlay';\n"],"names":["React","useDrawerOverlay_unstable","renderDrawerOverlay_unstable","useDrawerOverlayStyles_unstable","DrawerOverlay","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAIlF;;CAEC,GACD,OAAO,MAAMC,8BAAyDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACrG,MAAMC,QAAQP,0BAA0BK,OAAOC;IAE/CJ,gCAAgCK;IAEhC,OAAON,6BAA6BM;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}
+{"version":3,"sources":["DrawerOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDrawerOverlay_unstable } from './useDrawerOverlay';\nimport { renderDrawerOverlay_unstable } from './renderDrawerOverlay';\nimport { useDrawerOverlayStyles_unstable } from './useDrawerOverlayStyles.styles';\nimport type { DrawerOverlayProps } from './DrawerOverlay.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * DrawerOverlay contains supplementary content and are used for complex creation, edit, or management experiences.\n */\nexport const DrawerOverlay: ForwardRefComponent<DrawerOverlayProps> = React.forwardRef((props, ref) => {\n  const state = useDrawerOverlay_unstable(props, ref);\n\n  useDrawerOverlayStyles_unstable(state);\n\n  return renderDrawerOverlay_unstable(state);\n});\n\nDrawerOverlay.displayName = 'DrawerOverlay';\n"],"names":["React","useDrawerOverlay_unstable","renderDrawerOverlay_unstable","useDrawerOverlayStyles_unstable","DrawerOverlay","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAIlF;;CAEC,GACD,OAAO,MAAMC,8BAAyDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQP,0BAA0BK,OAAOC;IAE/CJ,gCAAgCK;IAEhC,OAAON,6BAA6BM;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["DrawerOverlay.types.ts"],"sourcesContent":["import { DialogProps, DialogSurfaceProps, DialogSurfaceSlots } from '@fluentui/react-dialog';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { DrawerBaseProps } from '../../util/DrawerBase.types';\n\nexport type DrawerOverlaySlots = DialogSurfaceSlots & {\n  root: Slot<DialogSurfaceProps>;\n};\n\n/**\n * DrawerOverlay Props\n */\nexport type DrawerOverlayProps = ComponentProps<DrawerOverlaySlots> &\n  DrawerBaseProps &\n  Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus'>;\n\n/**\n * State used in rendering DrawerOverlay\n */\nexport type DrawerOverlayState = ComponentState<DrawerOverlaySlots> &\n  DrawerBaseProps & {\n    dialog: DialogProps;\n  };\n"],"names":[],"mappings":"AAAA,WAqBI"}
+{"version":3,"sources":["DrawerOverlay.types.ts"],"sourcesContent":["import { DialogProps, DialogSurfaceProps, DialogSurfaceSlots } from '@fluentui/react-dialog';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MotionState } from '@fluentui/react-motion-preview';\nimport type { DrawerBaseProps, DrawerBaseState } from '../../util/DrawerBase.types';\n\nexport type DrawerOverlaySlots = DialogSurfaceSlots & {\n  root: Slot<DialogSurfaceProps>;\n};\n\n/**\n * DrawerOverlay Props\n */\nexport type DrawerOverlayProps = ComponentProps<DrawerOverlaySlots> &\n  DrawerBaseProps &\n  Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus'>;\n\n/**\n * State used in rendering DrawerOverlay\n */\nexport type DrawerOverlayState = Required<\n  Omit<ComponentState<DrawerOverlaySlots>, 'backdrop'> &\n    DrawerBaseState & {\n      dialog: DialogProps;\n      backdropMotion: MotionState<HTMLDivElement>;\n    }\n>;\n"],"names":[],"mappings":"AAAA,WAyBE"}

package/lib/components/DrawerOverlay/renderDrawerOverlay.js

@@ -1,9 +1,15 @@
-/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
 import { Dialog } from '@fluentui/react-dialog';
 /**
  * Render the final JSX of DrawerOverlay
  */ export const renderDrawerOverlay_unstable = (state)=>{
+    if (!state.motion.canRender) {
+        return null;
+    }
     assertSlots(state);
-    return /*#__PURE__*/ createElement(Dialog, state.dialog, /*#__PURE__*/ createElement(state.root, null));
+    return /*#__PURE__*/ _jsx(Dialog, {
+        ...state.dialog,
+        children: /*#__PURE__*/ _jsx(state.root, {})
+    });
 };

package/lib/components/DrawerOverlay/renderDrawerOverlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerOverlay.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DrawerOverlayState, DrawerOverlaySlots } from './DrawerOverlay.types';\nimport { Dialog } from '@fluentui/react-dialog';\n\n/**\n * Render the final JSX of DrawerOverlay\n */\nexport const renderDrawerOverlay_unstable = (state: DrawerOverlayState) => {\n  assertSlots<DrawerOverlaySlots>(state);\n\n  return (\n    <Dialog {...state.dialog}>\n      <state.root />\n    </Dialog>\n  );\n};\n"],"names":["createElement","assertSlots","Dialog","renderDrawerOverlay_unstable","state","dialog","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,MAAM,QAAQ,yBAAyB;AAEhD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,QAA8B;IACzEH,YAAgCG;IAEhC,qBACE,AAdJ,cAcKF,QAAWE,MAAMC,MAAM,gBACtB,AAfN,cAeOD,MAAME,IAAI;AAGjB,EAAE"}
+{"version":3,"sources":["renderDrawerOverlay.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DrawerOverlayState, DrawerOverlaySlots } from './DrawerOverlay.types';\nimport { Dialog } from '@fluentui/react-dialog';\n\n/**\n * Render the final JSX of DrawerOverlay\n */\nexport const renderDrawerOverlay_unstable = (state: DrawerOverlayState) => {\n  if (!state.motion.canRender) {\n    return null;\n  }\n\n  assertSlots<DrawerOverlaySlots>(state);\n\n  return (\n    <Dialog {...state.dialog}>\n      <state.root />\n    </Dialog>\n  );\n};\n"],"names":["assertSlots","Dialog","renderDrawerOverlay_unstable","state","motion","canRender","dialog","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,MAAM,QAAQ,yBAAyB;AAEhD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C,IAAI,CAACA,MAAMC,MAAM,CAACC,SAAS,EAAE;QAC3B,OAAO;IACT;IAEAL,YAAgCG;IAEhC,qBACE,KAACF;QAAQ,GAAGE,MAAMG,MAAM;kBACtB,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

package/lib/components/DrawerOverlay/useDrawerOverlay.js

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';
 import { DialogSurface } from '@fluentui/react-dialog';
-import { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';
+import { useDrawerDefaultProps } from '../../util/useDrawerDefaultProps';
+import { useMotion } from '@fluentui/react-motion-preview';
 /**
  * Create the state required to render DrawerOverlay.
  *
@@ -9,29 +10,47 @@ import { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';
  * before being passed to renderDrawerOverlay_unstable.
  *
  * @param props - props from this instance of DrawerOverlay
- * @param ref - reference to root HTMLElement of DrawerOverlay
+ * @param ref - reference to root HTMLDivElement of DrawerOverlay
  */ export const useDrawerOverlay_unstable = (props, ref)=>{
-    const { open , defaultOpen , size , position  } = getDefaultDrawerProps(props);
-    const { modalType ='modal' , inertTrapFocus , onOpenChange  } = props;
+    const { open, defaultOpen, size, position } = useDrawerDefaultProps(props);
+    const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;
+    const drawerMotion = useMotion(open);
+    const backdropMotion = useMotion(open);
+    const hasCustomBackdrop = modalType !== 'non-modal' && props.backdrop !== null;
+    const root = slot.always(getNativeElementProps('div', {
+        ...props,
+        ref: useMergedRefs(ref, drawerMotion.ref)
+    }), {
+        elementType: DialogSurface,
+        defaultProps: {
+            backdrop: slot.optional(props.backdrop, {
+                elementType: 'div',
+                renderByDefault: hasCustomBackdrop,
+                defaultProps: {
+                    ref: backdropMotion.ref
+                }
+            })
+        }
+    });
+    const dialog = slot.always({
+        open: true,
+        defaultOpen,
+        onOpenChange,
+        inertTrapFocus,
+        modalType
+    }, {
+        elementType: 'div'
+    });
     return {
         components: {
             root: DialogSurface,
             backdrop: 'div'
         },
-        root: slot.always(getNativeElementProps('div', {
-            ref,
-            ...props
-        }), {
-            elementType: DialogSurface
-        }),
-        dialog: {
-            open,
-            defaultOpen,
-            onOpenChange,
-            inertTrapFocus,
-            modalType
-        },
+        root,
+        dialog,
         size,
-        position
+        position,
+        motion: drawerMotion,
+        backdropMotion
     };
 };

package/lib/components/DrawerOverlay/useDrawerOverlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerOverlay.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { DrawerOverlayProps, DrawerOverlayState } from './DrawerOverlay.types';\nimport { DialogProps, DialogSurface } from '@fluentui/react-dialog';\nimport { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';\n\n/**\n * Create the state required to render DrawerOverlay.\n *\n * The returned state can be modified with hooks such as useDrawerOverlayStyles_unstable,\n * before being passed to renderDrawerOverlay_unstable.\n *\n * @param props - props from this instance of DrawerOverlay\n * @param ref - reference to root HTMLElement of DrawerOverlay\n */\nexport const useDrawerOverlay_unstable = (\n  props: DrawerOverlayProps,\n  ref: React.Ref<HTMLElement>,\n): DrawerOverlayState => {\n  const { open, defaultOpen, size, position } = getDefaultDrawerProps(props);\n  const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;\n\n  return {\n    components: {\n      root: DialogSurface,\n      backdrop: 'div',\n    },\n\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: DialogSurface },\n    ),\n    dialog: {\n      open,\n      defaultOpen,\n      onOpenChange,\n      inertTrapFocus,\n      modalType,\n    } as DialogProps,\n\n    size,\n    position,\n  };\n};\n"],"names":["React","getNativeElementProps","slot","DialogSurface","getDefaultDrawerProps","useDrawerOverlay_unstable","props","ref","open","defaultOpen","size","position","modalType","inertTrapFocus","onOpenChange","components","root","backdrop","always","elementType","dialog"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAExE,SAAsBC,aAAa,QAAQ,yBAAyB;AACpE,SAASC,qBAAqB,QAAQ,mCAAmC;AAEzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC,MACuB;IACvB,MAAM,EAAEC,KAAI,EAAEC,YAAW,EAAEC,KAAI,EAAEC,SAAQ,EAAE,GAAGP,sBAAsBE;IACpE,MAAM,EAAEM,WAAY,QAAO,EAAEC,eAAc,EAAEC,aAAY,EAAE,GAAGR;IAE9D,OAAO;QACLS,YAAY;YACVC,MAAMb;YACNc,UAAU;QACZ;QAEAD,MAAMd,KAAKgB,MAAM,CACfjB,sBAAsB,OAAO;YAC3BM;YACA,GAAGD,KAAK;QACV,IACA;YAAEa,aAAahB;QAAc;QAE/BiB,QAAQ;YACNZ;YACAC;YACAK;YACAD;YACAD;QACF;QAEAF;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawerOverlay.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport type { DrawerOverlayProps, DrawerOverlayState } from './DrawerOverlay.types';\nimport { DialogProps, DialogSurface, DialogSurfaceProps } from '@fluentui/react-dialog';\nimport { useDrawerDefaultProps } from '../../util/useDrawerDefaultProps';\nimport { useMotion } from '@fluentui/react-motion-preview';\n\n/**\n * Create the state required to render DrawerOverlay.\n *\n * The returned state can be modified with hooks such as useDrawerOverlayStyles_unstable,\n * before being passed to renderDrawerOverlay_unstable.\n *\n * @param props - props from this instance of DrawerOverlay\n * @param ref - reference to root HTMLDivElement of DrawerOverlay\n */\nexport const useDrawerOverlay_unstable = (\n  props: DrawerOverlayProps,\n  ref: React.Ref<HTMLDivElement>,\n): DrawerOverlayState => {\n  const { open, defaultOpen, size, position } = useDrawerDefaultProps(props);\n  const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;\n\n  const drawerMotion = useMotion<HTMLDivElement>(open);\n  const backdropMotion = useMotion<HTMLDivElement>(open);\n\n  const hasCustomBackdrop = modalType !== 'non-modal' && props.backdrop !== null;\n\n  const root = slot.always<DialogSurfaceProps>(\n    getNativeElementProps('div', {\n      ...props,\n      ref: useMergedRefs(ref, drawerMotion.ref),\n    }),\n    {\n      elementType: DialogSurface,\n      defaultProps: {\n        backdrop: slot.optional(props.backdrop, {\n          elementType: 'div',\n          renderByDefault: hasCustomBackdrop,\n          defaultProps: {\n            ref: backdropMotion.ref,\n          },\n        }),\n      },\n    },\n  );\n\n  const dialog = slot.always(\n    {\n      open: true,\n      defaultOpen,\n      onOpenChange,\n      inertTrapFocus,\n      modalType,\n    } as DialogProps,\n    {\n      elementType: 'div',\n    },\n  );\n\n  return {\n    components: {\n      root: DialogSurface,\n      backdrop: 'div',\n    },\n\n    root,\n\n    dialog,\n    size,\n    position,\n    motion: drawerMotion,\n    backdropMotion,\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useMergedRefs","DialogSurface","useDrawerDefaultProps","useMotion","useDrawerOverlay_unstable","props","ref","open","defaultOpen","size","position","modalType","inertTrapFocus","onOpenChange","drawerMotion","backdropMotion","hasCustomBackdrop","backdrop","root","always","elementType","defaultProps","optional","renderByDefault","dialog","components","motion"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAEvF,SAAsBC,aAAa,QAA4B,yBAAyB;AACxF,SAASC,qBAAqB,QAAQ,mCAAmC;AACzE,SAASC,SAAS,QAAQ,iCAAiC;AAE3D;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,WAAW,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGR,sBAAsBG;IACpE,MAAM,EAAEM,YAAY,OAAO,EAAEC,cAAc,EAAEC,YAAY,EAAE,GAAGR;IAE9D,MAAMS,eAAeX,UAA0BI;IAC/C,MAAMQ,iBAAiBZ,UAA0BI;IAEjD,MAAMS,oBAAoBL,cAAc,eAAeN,MAAMY,QAAQ,KAAK;IAE1E,MAAMC,OAAOnB,KAAKoB,MAAM,CACtBrB,sBAAsB,OAAO;QAC3B,GAAGO,KAAK;QACRC,KAAKN,cAAcM,KAAKQ,aAAaR,GAAG;IAC1C,IACA;QACEc,aAAanB;QACboB,cAAc;YACZJ,UAAUlB,KAAKuB,QAAQ,CAACjB,MAAMY,QAAQ,EAAE;gBACtCG,aAAa;gBACbG,iBAAiBP;gBACjBK,cAAc;oBACZf,KAAKS,eAAeT,GAAG;gBACzB;YACF;QACF;IACF;IAGF,MAAMkB,SAASzB,KAAKoB,MAAM,CACxB;QACEZ,MAAM;QACNC;QACAK;QACAD;QACAD;IACF,GACA;QACES,aAAa;IACf;IAGF,OAAO;QACLK,YAAY;YACVP,MAAMjB;YACNgB,UAAU;QACZ;QAEAC;QAEAM;QACAf;QACAC;QACAgB,QAAQZ;QACRC;IACF;AACF,EAAE"}

package/lib/components/DrawerOverlay/useDrawerOverlayStyles.styles.js

@@ -1,6 +1,7 @@
-import { __styles, mergeClasses } from '@griffel/react';
-import { useDrawerBaseStyles } from '../../util/useDrawerBaseStyles.styles';
 import * as React from 'react';
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { useDrawerBaseClassNames, drawerCSSVars, useDrawerDurationStyles } from '../../util/useDrawerBaseStyles.styles';
 export const drawerOverlayClassNames = {
   root: 'fui-DrawerOverlay',
   backdrop: 'fui-DrawerOverlay__backdrop'
@@ -8,25 +9,58 @@ export const drawerOverlayClassNames = {
 /**
  * Styles for the root slot
  */
-const useStyles = /*#__PURE__*/__styles({
+const useDrawerRootStyles = /*#__PURE__*/__styles({
   root: {
     qhf8xq: "f19dog8a",
     Bhzewxz: "f15twtuk",
-    B5kzvoi: "f1yab3r1"
+    B5kzvoi: "f1yab3r1",
+    abs64n: "fk73vx1",
+    E5pizo: "fliqkoi",
+    Bmy1vo4: "f1neo61",
+    Es3by: "f1ytgekk"
+  },
+  start: {
+    Bz10aip: "f1d8gkik"
+  },
+  end: {
+    Bz10aip: "f1g0pcr8"
+  },
+  visible: {
+    abs64n: "f5p0z4x",
+    Bz10aip: "f87uvqx",
+    E5pizo: "f10nrhrw"
+  }
+}, {
+  d: [".f19dog8a{position:fixed;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".fk73vx1{opacity:0;}", ".fliqkoi{box-shadow:0px transparent;}", ".f1neo61{transition-property:transform,box-shadow,opacity;}", ".f1ytgekk{will-change:transform,box-shadow,opacity;}", ".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}", ".f1g0pcr8{transform:translate3D(calc(var(--fui-Drawer--size) * 1), 0, 0);}", ".f5p0z4x{opacity:1;}", ".f87uvqx{transform:translate3D(0, 0, 0);}", ".f10nrhrw{box-shadow:var(--shadow64);}"]
+});
+/**
+ * Styles for the backdrop slot
+ */
+const useBackdropMotionStyles = /*#__PURE__*/__styles({
+  backdrop: {
+    abs64n: "fk73vx1",
+    Bmy1vo4: "f13u1uyl",
+    Bkqvd7p: "f17wnm97",
+    Es3by: "f1gqqdtu"
+  },
+  visible: {
+    abs64n: "f5p0z4x"
   }
 }, {
-  d: [".f19dog8a{position:fixed;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}"]
+  d: [".fk73vx1{opacity:0;}", ".f13u1uyl{transition-property:opacity;}", ".f17wnm97{transition-timing-function:var(--curveEasyEase);}", ".f1gqqdtu{will-change:opacity;}", ".f5p0z4x{opacity:1;}"]
 });
 /**
  * Apply styling to the DrawerOverlay slots based on the state
  */
 export const useDrawerOverlayStyles_unstable = state => {
-  const baseStyles = useDrawerBaseStyles();
-  const styles = useStyles();
+  const baseClassNames = useDrawerBaseClassNames(state);
+  const rootStyles = useDrawerRootStyles();
+  const backdropMotionStyles = useBackdropMotionStyles();
+  const durationStyles = useDrawerDurationStyles();
   const backdrop = state.root.backdrop;
-  state.root.className = mergeClasses(drawerOverlayClassNames.root, baseStyles.root, styles.root, state.size && baseStyles[state.size], state.position && baseStyles[state.position], state.root.className);
+  state.root.className = mergeClasses(drawerOverlayClassNames.root, baseClassNames, rootStyles.root, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);
   if (backdrop) {
-    backdrop.className = mergeClasses(drawerOverlayClassNames.backdrop, backdrop.className);
+    backdrop.className = mergeClasses(drawerOverlayClassNames.backdrop, backdropMotionStyles.backdrop, durationStyles[state.size], state.backdropMotion.active && backdropMotionStyles.visible, backdrop.className);
   }
   return state;
 };

package/lib/components/DrawerOverlay/useDrawerOverlayStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","useDrawerBaseStyles","React","drawerOverlayClassNames","root","backdrop","useStyles","qhf8xq","Bhzewxz","B5kzvoi","d","useDrawerOverlayStyles_unstable","state","baseStyles","styles","className","size","position"],"sources":["useDrawerOverlayStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDrawerBaseStyles } from '../../util/useDrawerBaseStyles.styles';\nimport * as React from 'react';\nexport const drawerOverlayClassNames = {\n    root: 'fui-DrawerOverlay',\n    backdrop: 'fui-DrawerOverlay__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        position: 'fixed',\n        top: 0,\n        bottom: 0\n    }\n});\n/**\n * Apply styling to the DrawerOverlay slots based on the state\n */ export const useDrawerOverlayStyles_unstable = (state)=>{\n    const baseStyles = useDrawerBaseStyles();\n    const styles = useStyles();\n    const backdrop = state.root.backdrop;\n    state.root.className = mergeClasses(drawerOverlayClassNames.root, baseStyles.root, styles.root, state.size && baseStyles[state.size], state.position && baseStyles[state.position], state.root.className);\n    if (backdrop) {\n        backdrop.className = mergeClasses(drawerOverlayClassNames.backdrop, backdrop.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,mBAAmB,QAAQ,uCAAuC;AAC3E,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAK,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,UAAU,GAAGZ,mBAAmB,CAAC,CAAC;EACxC,MAAMa,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1B,MAAMD,QAAQ,GAAGO,KAAK,CAACR,IAAI,CAACC,QAAQ;EACpCO,KAAK,CAACR,IAAI,CAACW,SAAS,GAAGf,YAAY,CAACG,uBAAuB,CAACC,IAAI,EAAES,UAAU,CAACT,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAEQ,KAAK,CAACI,IAAI,IAAIH,UAAU,CAACD,KAAK,CAACI,IAAI,CAAC,EAAEJ,KAAK,CAACK,QAAQ,IAAIJ,UAAU,CAACD,KAAK,CAACK,QAAQ,CAAC,EAAEL,KAAK,CAACR,IAAI,CAACW,SAAS,CAAC;EACzM,IAAIV,QAAQ,EAAE;IACVA,QAAQ,CAACU,SAAS,GAAGf,YAAY,CAACG,uBAAuB,CAACE,QAAQ,EAAEA,QAAQ,CAACU,SAAS,CAAC;EAC3F;EACA,OAAOH,KAAK;AAChB,CAAC"}
+{"version":3,"names":["React","__styles","mergeClasses","tokens","useDrawerBaseClassNames","drawerCSSVars","useDrawerDurationStyles","drawerOverlayClassNames","root","backdrop","useDrawerRootStyles","qhf8xq","Bhzewxz","B5kzvoi","abs64n","E5pizo","Bmy1vo4","Es3by","start","Bz10aip","end","visible","d","useBackdropMotionStyles","Bkqvd7p","useDrawerOverlayStyles_unstable","state","baseClassNames","rootStyles","backdropMotionStyles","durationStyles","className","position","motion","active","size","backdropMotion"],"sources":["useDrawerOverlayStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useDrawerBaseClassNames, drawerCSSVars, useDrawerDurationStyles } from '../../util/useDrawerBaseStyles.styles';\nexport const drawerOverlayClassNames = {\n    root: 'fui-DrawerOverlay',\n    backdrop: 'fui-DrawerOverlay__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useDrawerRootStyles = makeStyles({\n    root: {\n        position: 'fixed',\n        top: 0,\n        bottom: 0,\n        opacity: 0,\n        boxShadow: '0px transparent',\n        transitionProperty: 'transform, box-shadow, opacity',\n        willChange: 'transform, box-shadow, opacity'\n    },\n    /* Positioning */ start: {\n        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`\n    },\n    end: {\n        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * 1), 0, 0)`\n    },\n    /* Visible */ visible: {\n        opacity: 1,\n        transform: 'translate3D(0, 0, 0)',\n        boxShadow: tokens.shadow64\n    }\n});\n/**\n * Styles for the backdrop slot\n */ const useBackdropMotionStyles = makeStyles({\n    backdrop: {\n        opacity: 0,\n        transitionProperty: 'opacity',\n        transitionTimingFunction: tokens.curveEasyEase,\n        willChange: 'opacity'\n    },\n    visible: {\n        opacity: 1\n    }\n});\n/**\n * Apply styling to the DrawerOverlay slots based on the state\n */ export const useDrawerOverlayStyles_unstable = (state)=>{\n    const baseClassNames = useDrawerBaseClassNames(state);\n    const rootStyles = useDrawerRootStyles();\n    const backdropMotionStyles = useBackdropMotionStyles();\n    const durationStyles = useDrawerDurationStyles();\n    const backdrop = state.root.backdrop;\n    state.root.className = mergeClasses(drawerOverlayClassNames.root, baseClassNames, rootStyles.root, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);\n    if (backdrop) {\n        backdrop.className = mergeClasses(drawerOverlayClassNames.backdrop, backdropMotionStyles.backdrop, durationStyles[state.size], state.backdropMotion.active && backdropMotionStyles.visible, backdrop.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,EAAEC,aAAa,EAAEC,uBAAuB,QAAQ,uCAAuC;AACvH,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,mBAAmB,gBAAGT,QAAA;EAAAO,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,KAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;EAAAE,OAAA;IAAAP,MAAA;IAAAK,OAAA;IAAAJ,MAAA;EAAA;AAAA;EAAAO,CAAA;AAAA,CAqB/B,CAAC;AACF;AACA;AACA;AAAI,MAAMC,uBAAuB,gBAAGtB,QAAA;EAAAQ,QAAA;IAAAK,MAAA;IAAAE,OAAA;IAAAQ,OAAA;IAAAP,KAAA;EAAA;EAAAI,OAAA;IAAAP,MAAA;EAAA;AAAA;EAAAQ,CAAA;AAAA,CAUnC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMG,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,cAAc,GAAGvB,uBAAuB,CAACsB,KAAK,CAAC;EACrD,MAAME,UAAU,GAAGlB,mBAAmB,CAAC,CAAC;EACxC,MAAMmB,oBAAoB,GAAGN,uBAAuB,CAAC,CAAC;EACtD,MAAMO,cAAc,GAAGxB,uBAAuB,CAAC,CAAC;EAChD,MAAMG,QAAQ,GAAGiB,KAAK,CAAClB,IAAI,CAACC,QAAQ;EACpCiB,KAAK,CAAClB,IAAI,CAACuB,SAAS,GAAG7B,YAAY,CAACK,uBAAuB,CAACC,IAAI,EAAEmB,cAAc,EAAEC,UAAU,CAACpB,IAAI,EAAEoB,UAAU,CAACF,KAAK,CAACM,QAAQ,CAAC,EAAEN,KAAK,CAACO,MAAM,CAACC,MAAM,IAAIN,UAAU,CAACP,OAAO,EAAEK,KAAK,CAAClB,IAAI,CAACuB,SAAS,CAAC;EAC/L,IAAItB,QAAQ,EAAE;IACVA,QAAQ,CAACsB,SAAS,GAAG7B,YAAY,CAACK,uBAAuB,CAACE,QAAQ,EAAEoB,oBAAoB,CAACpB,QAAQ,EAAEqB,cAAc,CAACJ,KAAK,CAACS,IAAI,CAAC,EAAET,KAAK,CAACU,cAAc,CAACF,MAAM,IAAIL,oBAAoB,CAACR,OAAO,EAAEZ,QAAQ,CAACsB,SAAS,CAAC;EACnN;EACA,OAAOL,KAAK;AAChB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["DrawerBase.types.ts"],"sourcesContent":["export type DrawerBaseProps = {\n  /**\n   * Position of the drawer.\n   *\n   * @default 'start'\n   */\n  position?: 'start' | 'end';\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   * Default value for the uncontrolled open state of the Drawer.\n   *\n   * @default false\n   */\n  defaultOpen?: boolean;\n};\n"],"names":[],"mappings":"AAAA,WAiCE"}
+{"version":3,"sources":["DrawerBase.types.ts"],"sourcesContent":["import { MotionShorthand, MotionState } from '@fluentui/react-motion-preview';\n\nexport type DrawerBaseProps = {\n  /**\n   * Position of the drawer.\n   *\n   * @default 'start'\n   */\n  position?: 'start' | 'end';\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?: MotionShorthand<HTMLDivElement>;\n\n  /**\n   * Default value for the uncontrolled open state of the Drawer.\n   *\n   * @default false\n   */\n  defaultOpen?: boolean;\n};\n\nexport type DrawerBaseState = Required<Pick<DrawerBaseProps, 'position' | 'size'>> & {\n  motion: MotionState<HTMLDivElement>;\n};\n"],"names":[],"mappings":"AAAA,WAuCE"}

package/lib/util/useDrawerBaseStyles.styles.js

@@ -1,5 +1,11 @@
-import { __styles, shorthands } from '@griffel/react';
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
+/**
+ * CSS variable names used internally for uniform styling in Drawer.
+ */
+export const drawerCSSVars = {
+  drawerSizeVar: '--fui-Drawer--size'
+};
 /**
  * Styles for the root slot
  */
@@ -19,6 +25,7 @@ export const useDrawerBaseStyles = /*#__PURE__*/__styles({
     Bekrc4i: ["f1358rze", "f1rvrf73"],
     Bn0qgzm: "fqdk4by",
     ibv6hh: ["f1rvrf73", "f1358rze"],
+    a9b677: "f3rx6dk",
     B2u0y6b: "f1w39fev",
     Bqenvij: "f11ysow2",
     B7ck84d: "f1ewtqcl",
@@ -28,6 +35,15 @@ export const useDrawerBaseStyles = /*#__PURE__*/__styles({
     Brf1p80: "fbhxue7",
     De3pzq: "fxugw4r"
   },
+  entering: {
+    Bkqvd7p: "f18ad807"
+  },
+  exiting: {
+    Bkqvd7p: "f1mfizis"
+  },
+  reducedMotion: {
+    Hwfdqs: "f5e8c63"
+  },
   start: {
     oyh7mz: ["f1vgc2s3", "f1e31b4d"],
     j35jbq: ["fvfyk4", "frppm18"]
@@ -37,19 +53,46 @@ export const useDrawerBaseStyles = /*#__PURE__*/__styles({
     oyh7mz: ["frppm18", "fvfyk4"]
   },
   small: {
-    a9b677: "f1nfxovz"
+    Bjr0ffy: "f1exhnwo"
+  },
+  medium: {
+    Bjr0ffy: "fqofjzu"
+  },
+  large: {
+    Bjr0ffy: "fce6y3m"
+  },
+  full: {
+    Bjr0ffy: "fsdmzs6"
+  }
+}, {
+  d: [".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f3rx6dk{width:var(--fui-Drawer--size);}", ".f1w39fev{max-width:100vw;}", ".f11ysow2{height:auto;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f6jr5hl{align-items:flex-start;}", ".fbhxue7{justify-content:flex-start;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f18ad807{transition-timing-function:var(--curveDecelerateMid);}", ".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".fvfyk4{right:auto;}", ".frppm18{left:auto;}", ".f1exhnwo{--fui-Drawer--size:320px;}", ".fqofjzu{--fui-Drawer--size:592px;}", ".fce6y3m{--fui-Drawer--size:940px;}", ".fsdmzs6{--fui-Drawer--size:100vw;}"],
+  m: [["@media screen and (prefers-reduced-motion: reduce){.f5e8c63{transition-duration:0.001ms;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }]]
+});
+export const useDrawerDurationStyles = /*#__PURE__*/__styles({
+  small: {
+    B3o57yi: "fc397y7"
   },
   medium: {
-    a9b677: "fb8d3vz"
+    B3o57yi: "f78771"
   },
   large: {
-    a9b677: "fi96w9z"
+    B3o57yi: "f9ymmep"
   },
   full: {
-    a9b677: "fr97h3j",
-    B2u0y6b: "f1w39fev"
+    B3o57yi: "f1loko9l"
   }
 }, {
-  d: [".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f1w39fev{max-width:100vw;}", ".f11ysow2{height:auto;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f6jr5hl{align-items:flex-start;}", ".fbhxue7{justify-content:flex-start;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".fvfyk4{right:auto;}", ".frppm18{left:auto;}", ".f1nfxovz{width:320px;}", ".fb8d3vz{width:592px;}", ".fi96w9z{width:940px;}", ".fr97h3j{width:100vw;}"]
+  d: [".fc397y7{transition-duration:var(--durationGentle);}", ".f78771{transition-duration:var(--durationSlow);}", ".f9ymmep{transition-duration:var(--durationSlower);}", ".f1loko9l{transition-duration:var(--durationUltraSlow);}"]
 });
+export const useDrawerBaseClassNames = ({
+  position,
+  size,
+  motion
+}) => {
+  const baseStyles = useDrawerBaseStyles();
+  const durationStyles = useDrawerDurationStyles();
+  return mergeClasses(baseStyles.root, baseStyles[position], durationStyles[size], baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);
+};
 //# sourceMappingURL=useDrawerBaseStyles.styles.js.map