@fluentui/react-drawer 9.0.0-beta.3 → 9.0.0-beta.31

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

@@ -1 +1 @@
-{"version":3,"sources":["DrawerHeaderTitle.types.ts"],"sourcesContent":["import { DialogTitleSlots } from '@fluentui/react-dialog';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type DrawerHeaderTitleSlots = {\n  root: Slot<'div'>;\n\n  /**\n   * By default this is a h2, but can be any heading or div.\n   * If `div` is provided do not forget to also provide proper `role=\"heading\"` and `aria-level` attributes\n   */\n  heading?: DialogTitleSlots['root'];\n\n  /**\n   * Action slot for the close button\n   */\n  action?: DialogTitleSlots['action'];\n};\n\n/**\n * DrawerHeaderTitle Props\n */\nexport type DrawerHeaderTitleProps = ComponentProps<DrawerHeaderTitleSlots> & {\n  /**\n   * Content of the DrawerHeaderTitle\n   * Children is mandatory because DrawerHeaderTitle is a wrapper component\n   */\n  children: React.ReactNode | undefined;\n};\n\n/**\n * State used in rendering DrawerHeaderTitle\n */\nexport type DrawerHeaderTitleState = ComponentState<DrawerHeaderTitleSlots>;\n"],"names":["React"],"mappings":"AAEA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["DrawerHeaderTitle.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DrawerHeaderTitleSlots = {\n  root: Slot<'div'>;\n\n  /**\n   * By default this is a h2, but can be any heading or div.\n   * If `div` is provided do not forget to also provide proper `role=\"heading\"` and `aria-level` attributes\n   */\n  heading?: Slot<'h2', 'h1' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'>;\n\n  /**\n   * Action slot for the close button\n   */\n  action?: Slot<'div'>;\n};\n\n/**\n * DrawerHeaderTitle Props\n */\nexport type DrawerHeaderTitleProps = ComponentProps<DrawerHeaderTitleSlots>;\n\n/**\n * State used in rendering DrawerHeaderTitle\n */\nexport type DrawerHeaderTitleState = ComponentState<DrawerHeaderTitleSlots>;\n"],"names":[],"mappings":"AAAA,WAyB4E"}

package/lib/components/DrawerHeaderTitle/renderDrawerHeaderTitle.js

@@ -1,8 +1,13 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of DrawerHeaderTitle
  */ export const renderDrawerHeaderTitle_unstable = (state)=>{
-    const { slots , slotProps  } = getSlots(state);
-    return /*#__PURE__*/ React.createElement(slots.root, slotProps.root, slots.heading && /*#__PURE__*/ React.createElement(slots.heading, slotProps.heading), slots.action && /*#__PURE__*/ React.createElement(slots.action, slotProps.action));
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.heading && /*#__PURE__*/ _jsx(state.heading, {}),
+            state.action && /*#__PURE__*/ _jsx(state.action, {})
+        ]
+    });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerHeaderTitle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DrawerHeaderTitleState, DrawerHeaderTitleSlots } from './DrawerHeaderTitle.types';\n\n/**\n * Render the final JSX of DrawerHeaderTitle\n */\nexport const renderDrawerHeaderTitle_unstable = (state: DrawerHeaderTitleState) => {\n  const { slots, slotProps } = getSlots<DrawerHeaderTitleSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.heading && <slots.heading {...slotProps.heading} />}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"],"names":["React","getSlots","renderDrawerHeaderTitle_unstable","state","slots","slotProps","root","heading","action"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,QAAQ,4BAA4B;AAGrD;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC,QAAkC;IACjF,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,SAAiCE;IAE9D,qBACE,oBAACC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,OAAO,kBAAI,oBAACH,MAAMG,OAAO,EAAKF,UAAUE,OAAO,GACrDH,MAAMI,MAAM,kBAAI,oBAACJ,MAAMI,MAAM,EAAKH,UAAUG,MAAM;AAGzD,EAAE"}
+{"version":3,"sources":["renderDrawerHeaderTitle.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderTitleState, DrawerHeaderTitleSlots } from './DrawerHeaderTitle.types';\n\n/**\n * Render the final JSX of DrawerHeaderTitle\n */\nexport const renderDrawerHeaderTitle_unstable = (state: DrawerHeaderTitleState) => {\n  assertSlots<DrawerHeaderTitleSlots>(state);\n\n  return (\n    <state.root>\n      {state.heading && <state.heading />}\n      {state.action && <state.action />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderDrawerHeaderTitle_unstable","state","root","heading","action"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/CF,YAAoCE;IAEpC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,OAAO,kBAAI,KAACF,MAAME,OAAO;YAC/BF,MAAMG,MAAM,kBAAI,KAACH,MAAMG,MAAM;;;AAGpC,EAAE"}

package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitle.js

@@ -1,6 +1,21 @@
 import * as React from 'react';
-import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
-import { useDialogTitle_unstable } from '@fluentui/react-dialog';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { useDialogContext_unstable } from '@fluentui/react-dialog';
+/**
+ * @internal
+ * Create the shorthand for the heading element.
+ * @param props - props from this instance of DrawerHeaderTitle
+ */ const useHeadingProps = ({ children, heading })=>{
+    const id = useDialogContext_unstable((ctx)=>ctx.dialogTitleId);
+    return slot.optional(heading, {
+        defaultProps: {
+            id,
+            children
+        },
+        renderByDefault: true,
+        elementType: 'h2'
+    });
+};
 /**
  * Create the state required to render DrawerHeaderTitle.
  *
@@ -10,26 +25,22 @@ import { useDialogTitle_unstable } from '@fluentui/react-dialog';
  * @param props - props from this instance of DrawerHeaderTitle
  * @param ref - reference to root HTMLElement of DrawerHeaderTitle
  */ export const useDrawerHeaderTitle_unstable = (props, ref)=>{
-    const { root: heading , action , components: titleComponents  } = useDialogTitle_unstable(props, ref);
+    const headingProps = useHeadingProps(props);
     return {
         components: {
             root: 'div',
-            heading: titleComponents.root,
-            action: titleComponents.action
+            heading: 'h2',
+            action: 'div'
         },
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref,
             ...props
+        }), {
+            elementType: 'div'
         }),
-        heading: resolveShorthand(props.heading, {
-            required: true,
-            defaultProps: {
-                ...heading,
-                className: undefined
-            }
-        }),
-        action: resolveShorthand(props.action, {
-            defaultProps: action
+        heading: headingProps,
+        action: slot.optional(props.action, {
+            elementType: 'div'
         })
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerHeaderTitle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } 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: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    heading: resolveShorthand(props.heading, {\n      required: true,\n      defaultProps: {\n        ...heading,\n        className: undefined, // remove className from heading\n      },\n    }),\n    action: resolveShorthand(props.action, {\n      defaultProps: action,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","resolveShorthand","useDialogTitle_unstable","useDrawerHeaderTitle_unstable","props","ref","root","heading","action","components","titleComponents","required","defaultProps","className","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAEpF,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,MAAMN,sBAAsB,OAAO;YACjCK;YACA,GAAGD,KAAK;QACV;QACAG,SAASN,iBAAiBG,MAAMG,OAAO,EAAE;YACvCI,UAAU,IAAI;YACdC,cAAc;gBACZ,GAAGL,OAAO;gBACVM,WAAWC;YACb;QACF;QACAN,QAAQP,iBAAiBG,MAAMI,MAAM,EAAE;YACrCI,cAAcJ;QAChB;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawerHeaderTitle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '@fluentui/react-dialog';\n\nimport type { DrawerHeaderTitleProps, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\n\n/**\n * @internal\n * Create the shorthand for the heading element.\n * @param props - props from this instance of DrawerHeaderTitle\n */\nconst useHeadingProps = ({ children, heading }: DrawerHeaderTitleProps) => {\n  const id = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n\n  return slot.optional(heading, {\n    defaultProps: {\n      id,\n      children,\n    },\n    renderByDefault: true,\n    elementType: 'h2',\n  });\n};\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 headingProps = useHeadingProps(props);\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: headingProps,\n    action: slot.optional(props.action, {\n      elementType: 'div',\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useDialogContext_unstable","useHeadingProps","children","heading","id","ctx","dialogTitleId","optional","defaultProps","renderByDefault","elementType","useDrawerHeaderTitle_unstable","props","ref","headingProps","components","root","action","always"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AACxE,SAASC,yBAAyB,QAAQ,yBAAyB;AAInE;;;;CAIC,GACD,MAAMC,kBAAkB,CAAC,EAAEC,QAAQ,EAAEC,OAAO,EAA0B;IACpE,MAAMC,KAAKJ,0BAA0BK,CAAAA,MAAOA,IAAIC,aAAa;IAE7D,OAAOP,KAAKQ,QAAQ,CAACJ,SAAS;QAC5BK,cAAc;YACZJ;YACAF;QACF;QACAO,iBAAiB;QACjBC,aAAa;IACf;AACF;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAMC,eAAeb,gBAAgBW;IAErC,OAAO;QACLG,YAAY;YACVC,MAAM;YACNb,SAAS;YACTc,QAAQ;QACV;QAEAD,MAAMjB,KAAKmB,MAAM,CACfpB,sBAAsB,OAAO;YAC3Be;YACA,GAAGD,KAAK;QACV,IACA;YAAEF,aAAa;QAAM;QAEvBP,SAASW;QACTG,QAAQlB,KAAKQ,QAAQ,CAACK,MAAMK,MAAM,EAAE;YAClCP,aAAa;QACf;IACF;AACF,EAAE"}

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

@@ -20,7 +20,7 @@ const useStyles = /*#__PURE__*/__styles({
     t21cq0: ["faqnl2i", "fd75udd"]
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fsnqrgy{-webkit-column-gap:var(--spacingHorizontalS);column-gap:var(--spacingHorizontalS);}", ".faqnl2i{margin-right:calc(var(--spacingHorizontalS) * -1);}", ".fd75udd{margin-left:calc(var(--spacingHorizontalS) * -1);}"]
+  d: [".f22iagw{display:flex;}", ".f1869bpl{justify-content:space-between;}", ".f122n59{align-items:center;}", ".fsnqrgy{column-gap:var(--spacingHorizontalS);}", ".faqnl2i{margin-right:calc(var(--spacingHorizontalS) * -1);}", ".fd75udd{margin-left:calc(var(--spacingHorizontalS) * -1);}"]
 });
 /**
  * Apply styling to the DrawerHeaderTitle slots based on the state

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

@@ -1,13 +1,15 @@
 import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 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);
     useDrawerInlineStyles_unstable(state);
+    useCustomStyleHook_unstable('useDrawerInlineStyles_unstable')(state);
     return renderDrawerInline_unstable(state);
 });
 DrawerInline.displayName = 'DrawerInline';

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 type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport type { DrawerInlineProps } from './DrawerInline.types';\nimport { useDrawerInline_unstable } from './useDrawerInline';\nimport { renderDrawerInline_unstable } from './renderDrawerInline';\nimport { useDrawerInlineStyles_unstable } from './useDrawerInlineStyles.styles';\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  useCustomStyleHook_unstable('useDrawerInlineStyles_unstable')(state);\n\n  return renderDrawerInline_unstable(state);\n});\n\nDrawerInline.displayName = 'DrawerInline';\n"],"names":["React","useCustomStyleHook_unstable","useDrawerInline_unstable","renderDrawerInline_unstable","useDrawerInlineStyles_unstable","DrawerInline","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAG9E,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAEhF;;;CAGC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CJ,+BAA+BK;IAC/BR,4BAA4B,kCAAkCQ;IAE9D,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';\n\nimport { DrawerBaseProps, DrawerBaseState } from '../../shared/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,WA0BE"}

package/lib/components/DrawerInline/renderDrawerInline.js

@@ -1,11 +1,11 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+  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)=>{
-    const { slots , slotProps  } = getSlots(state);
-    if (!state.open) {
+    if (!state.motion.canRender) {
         return null;
     }
-    return /*#__PURE__*/ React.createElement(slots.root, slotProps.root);
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerInline.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } 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  const { slots, slotProps } = getSlots<DrawerInlineSlots>(state);\n\n  if (!state.open) {\n    return null;\n  }\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"names":["React","getSlots","renderDrawerInline_unstable","state","slots","slotProps","open","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,QAAQ,4BAA4B;AAGrD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,QAA6B;IACvE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,SAA4BE;IAEzD,IAAI,CAACA,MAAMG,IAAI,EAAE;QACf,OAAO,IAAI;IACb,CAAC;IAED,qBAAO,oBAACF,MAAMG,IAAI,EAAKF,UAAUE,IAAI;AACvC,EAAE"}
+{"version":3,"sources":["renderDrawerInline.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\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;AAIxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C,IAAI,CAACA,MAAMC,MAAM,CAACC,SAAS,EAAE;QAC3B,OAAO;IACT;IAEAJ,YAA+BE;IAE/B,qBAAO,KAACA,MAAMG,IAAI;AACpB,EAAE"}

package/lib/components/DrawerInline/useDrawerInline.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { getNativeElementProps, useControllableState } from '@fluentui/react-utilities';
-import { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';
+import { getNativeElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';
+import { useMotion } from '@fluentui/react-motion-preview';
+import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
 /**
  * Create the state required to render DrawerInline.
  *
@@ -10,24 +11,22 @@ 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 [open] = useControllableState({
-        state: initialOpen,
-        defaultState: defaultOpen,
-        initialState: false
-    });
+    const { size, position, open } = useDrawerDefaultProps(props);
+    const { separator = false } = props;
+    const motion = useMotion(open);
     return {
         components: {
             root: 'div'
         },
-        root: getNativeElementProps('div', {
-            ref,
-            ...props
+        root: slot.always(getNativeElementProps('div', {
+            ...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 } 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: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n\n    size,\n    position,\n    open,\n    separator,\n  };\n};\n"],"names":["React","getNativeElementProps","useControllableState","getDefaultDrawerProps","useDrawerInline_unstable","props","ref","open","initialOpen","defaultOpen","size","position","separator","state","defaultState","initialState","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,oBAAoB,QAAQ,4BAA4B;AAExF,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,GAAGL,qBAAqB;QAClCW,OAAOL;QACPM,cAAcL;QACdM,cAAc,KAAK;IACrB;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMhB,sBAAsB,OAAO;YACjCK;YACA,GAAGD,KAAK;QACV;QAEAK;QACAC;QACAJ;QACAK;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawerInline.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useMotion } from '@fluentui/react-motion-preview';\n\nimport type { DrawerInlineProps, DrawerInlineState } from './DrawerInline.types';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\n\n/**\n * Create the state required to render DrawerInline.\n *\n * The returned state can be modified with hooks such as useDrawerInlineStyles_unstable,\n * before being passed to renderDrawerInline_unstable.\n *\n * @param props - props from this instance of DrawerInline\n * @param ref - reference to root HTMLElement of DrawerInline\n */\nexport const useDrawerInline_unstable = (\n  props: DrawerInlineProps,\n  ref: React.Ref<HTMLDivElement>,\n): DrawerInlineState => {\n  const { size, position, open } = useDrawerDefaultProps(props);\n  const { separator = false } = props;\n\n  const motion = useMotion<HTMLDivElement>(open);\n\n  return {\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      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","slot","useMergedRefs","useMotion","useDrawerDefaultProps","useDrawerInline_unstable","props","ref","size","position","open","separator","motion","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AACvF,SAASC,SAAS,QAAQ,iCAAiC;AAG3D,SAASC,qBAAqB,QAAQ,qCAAqC;AAE3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGN,sBAAsBE;IACvD,MAAM,EAAEK,YAAY,KAAK,EAAE,GAAGL;IAE9B,MAAMM,SAAST,UAA0BO;IAEzC,OAAO;QACLG,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMb,KAAKc,MAAM,CACff,sBAAsB,OAAO;YAC3B,GAAGM,KAAK;YACRC,KAAKL,cAAcK,KAAKK,OAAOL,GAAG;QACpC,IACA;YAAES,aAAa;QAAM;QAGvBR;QACAC;QACAE;QACAC;IACF;AACF,EAAE"}

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

@@ -1,43 +1,53 @@
 import * as React from 'react';
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
-import { useDrawerBaseStyles } from '../../util/useDrawerBaseStyles.styles';
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
+import { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';
 export const drawerInlineClassNames = {
   root: 'fui-DrawerInline'
 };
+const useDrawerResetStyles = /*#__PURE__*/__resetStyles("r1aiwccr", "rzg5lxf", [".r1aiwccr{padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;overflow-x:hidden;overflow-y:hidden;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:0;border-top-left-radius:0;border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;width:var(--fui-Drawer--size);max-width:100vw;height:auto;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);position:relative;opacity:0;transition-property:opacity,transform;will-change:opacity,transform;}", ".rzg5lxf{padding-top:0;padding-left:0;padding-bottom:0;padding-right:0;overflow-x:hidden;overflow-y:hidden;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:0;border-top-width:0;border-left-width:0;border-bottom-width:0;border-right-width:0;width:var(--fui-Drawer--size);max-width:100vw;height:auto;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);position:relative;opacity:0;transition-property:opacity,transform;will-change:opacity,transform;}"]);
 /**
  * Styles for the root slot
  */
-const useStyles = /*#__PURE__*/__styles({
-  root: {
-    qhf8xq: "f10pi13n"
-  },
-  separatorLeft: {
+const separatorValues = ['1px', 'solid', tokens.colorNeutralBackground3];
+const useDrawerRootStyles = /*#__PURE__*/__styles({
+  separatorStart: {
     Bekrc4i: ["f1hqa2wf", "finvdd3"],
     vrafjx: ["fcdblym", "fjik90z"],
     h3c5rm: ["fa8zu9y", "f17e9lqh"]
   },
-  separatorRight: {
+  separatorEnd: {
     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: [".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 resetStyles = useDrawerResetStyles();
+  const baseClassNames = useDrawerBaseClassNames(state);
+  const rootStyles = useDrawerRootStyles();
   const separatorClass = React.useMemo(() => {
     if (!state.separator) {
       return undefined;
     }
-    return state.position === 'left' ? styles.separatorLeft : styles.separatorRight;
-  }, [state.position, state.separator, styles.separatorRight, styles.separatorLeft]);
-  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, resetStyles, baseClassNames, 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","separatorLeft","Bekrc4i","vrafjx","h3c5rm","separatorRight","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 */ separatorLeft: {\n        ...shorthands.borderRight('1px', 'solid', tokens.colorNeutralBackground3)\n    },\n    separatorRight: {\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 === 'left' ? styles.separatorLeft : styles.separatorRight;\n    }, [\n        state.position,\n        state.separator,\n        styles.separatorRight,\n        styles.separatorLeft\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,aAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,cAAA;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,MAAM,GAAGL,MAAM,CAACZ,aAAa,GAAGY,MAAM,CAACR,cAAc;EACnF,CAAC,EAAE,CACCM,KAAK,CAACO,QAAQ,EACdP,KAAK,CAACK,SAAS,EACfH,MAAM,CAACR,cAAc,EACrBQ,MAAM,CAACZ,aAAa,CACvB,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","__resetStyles","__styles","mergeClasses","shorthands","tokens","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","drawerInlineClassNames","root","useDrawerResetStyles","separatorValues","colorNeutralBackground3","useDrawerRootStyles","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","start","Bz10aip","end","visible","abs64n","d","useDrawerInlineStyles_unstable","state","resetStyles","baseClassNames","rootStyles","separatorClass","useMemo","separator","undefined","position","className","motion","active"],"sources":["useDrawerInlineStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const drawerInlineClassNames = {\n    root: 'fui-DrawerInline'\n};\nconst useDrawerResetStyles = makeResetStyles({\n    ...drawerDefaultStyles,\n    position: 'relative',\n    opacity: 0,\n    transitionProperty: 'opacity, transform',\n    willChange: 'opacity, transform'\n});\n/**\n * Styles for the root slot\n */ const separatorValues = [\n    '1px',\n    'solid',\n    tokens.colorNeutralBackground3\n];\nconst useDrawerRootStyles = makeStyles({\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 resetStyles = useDrawerResetStyles();\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, resetStyles, baseClassNames, 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,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,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,gBAAGV,aAAA,+tCAM5B,CAAC;AACF;AACA;AACA;AAAI,MAAMW,eAAe,GAAG,CACxB,KAAK,EACL,OAAO,EACPP,MAAM,CAACQ,uBAAuB,CACjC;AACD,MAAMC,mBAAmB,gBAAGZ,QAAA;EAAAa,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;IAAAC,MAAA;IAAAH,OAAA;EAAA;AAAA;EAAAI,CAAA;AAAA,CAiB3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,WAAW,GAAGpB,oBAAoB,CAAC,CAAC;EAC1C,MAAMqB,cAAc,GAAGxB,uBAAuB,CAACsB,KAAK,CAAC;EACrD,MAAMG,UAAU,GAAGnB,mBAAmB,CAAC,CAAC;EACxC,MAAMoB,cAAc,GAAGlC,KAAK,CAACmC,OAAO,CAAC,MAAI;IACrC,IAAI,CAACL,KAAK,CAACM,SAAS,EAAE;MAClB,OAAOC,SAAS;IACpB;IACA,OAAOP,KAAK,CAACQ,QAAQ,KAAK,OAAO,GAAGL,UAAU,CAAClB,cAAc,GAAGkB,UAAU,CAACd,YAAY;EAC3F,CAAC,EAAE,CACCW,KAAK,CAACQ,QAAQ,EACdR,KAAK,CAACM,SAAS,EACfH,UAAU,CAACd,YAAY,EACvBc,UAAU,CAAClB,cAAc,CAC5B,CAAC;EACFe,KAAK,CAACpB,IAAI,CAAC6B,SAAS,GAAGpC,YAAY,CAACM,sBAAsB,CAACC,IAAI,EAAEqB,WAAW,EAAEC,cAAc,EAAEE,cAAc,EAAED,UAAU,CAACH,KAAK,CAACQ,QAAQ,CAAC,EAAER,KAAK,CAACU,MAAM,CAACC,MAAM,IAAIR,UAAU,CAACP,OAAO,EAAEI,KAAK,CAACpB,IAAI,CAAC6B,SAAS,CAAC;EAC1M,OAAOT,KAAK;AAChB,CAAC"}

package/lib/components/DrawerOverlay/DrawerOverlay.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useDrawerOverlay_unstable } from './useDrawerOverlay';
 import { renderDrawerOverlay_unstable } from './renderDrawerOverlay';
 import { useDrawerOverlayStyles_unstable } from './useDrawerOverlayStyles.styles';
@@ -7,6 +8,7 @@ import { useDrawerOverlayStyles_unstable } from './useDrawerOverlayStyles.styles
  */ export const DrawerOverlay = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useDrawerOverlay_unstable(props, ref);
     useDrawerOverlayStyles_unstable(state);
+    useCustomStyleHook_unstable('useDrawerOverlayStyles_unstable')(state);
     return renderDrawerOverlay_unstable(state);
 });
 DrawerOverlay.displayName = 'DrawerOverlay';

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 type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useDrawerOverlay_unstable } from './useDrawerOverlay';\nimport { renderDrawerOverlay_unstable } from './renderDrawerOverlay';\nimport { useDrawerOverlayStyles_unstable } from './useDrawerOverlayStyles.styles';\nimport type { DrawerOverlayProps } from './DrawerOverlay.types';\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  useCustomStyleHook_unstable('useDrawerOverlayStyles_unstable')(state);\n\n  return renderDrawerOverlay_unstable(state);\n});\n\nDrawerOverlay.displayName = 'DrawerOverlay';\n"],"names":["React","useCustomStyleHook_unstable","useDrawerOverlay_unstable","renderDrawerOverlay_unstable","useDrawerOverlayStyles_unstable","DrawerOverlay","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAGlF;;CAEC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQP,0BAA0BK,OAAOC;IAE/CJ,gCAAgCK;IAChCR,4BAA4B,mCAAmCQ;IAE/D,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';\n\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\n\nexport type DrawerOverlaySlots = DialogSurfaceSlots & {\n  root: Slot<DialogSurfaceProps>;\n\n  /**\n   * Slot for the dialog component that wraps the drawer.\n   */\n  dialog?: Slot<DialogProps>;\n};\n\n/**\n * DrawerOverlay Props\n */\nexport type DrawerOverlayProps = ComponentProps<DrawerOverlaySlots> &\n  Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus' | 'defaultOpen'> &\n  DrawerBaseProps;\n\n/**\n * State used in rendering DrawerOverlay\n */\nexport type DrawerOverlayState = Omit<ComponentState<DrawerOverlaySlots>, 'backdrop'> &\n  Required<\n    DrawerBaseState & {\n      backdropMotion: MotionState<HTMLDivElement>;\n    }\n  >;\n"],"names":[],"mappings":"AAAA,WA8BI"}

package/lib/components/DrawerOverlay/renderDrawerOverlay.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } 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  const { slots, slotProps } = getSlots<DrawerOverlaySlots>(state);\n\n  return (\n    <Dialog {...state.dialog}>\n      <slots.root {...slotProps.root} />\n    </Dialog>\n  );\n};\n"],"names":["React","getSlots","Dialog","renderDrawerOverlay_unstable","state","slots","slotProps","dialog","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,QAAQ,4BAA4B;AAErD,SAASC,MAAM,QAAQ,yBAAyB;AAEhD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,QAA8B;IACzE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGL,SAA6BG;IAE1D,qBACE,oBAACF,QAAWE,MAAMG,MAAM,gBACtB,oBAACF,MAAMG,IAAI,EAAKF,UAAUE,IAAI;AAGpC,EAAE"}
+{"version":3,"sources":["renderDrawerOverlay.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { DrawerOverlayState, DrawerOverlaySlots } from './DrawerOverlay.types';\n\n/**\n * Render the final JSX of DrawerOverlay\n */\nexport const renderDrawerOverlay_unstable = (state: DrawerOverlayState) => {\n  if (!state.dialog || !state.motion.canRender) {\n    return null;\n  }\n\n  assertSlots<DrawerOverlaySlots>(state);\n\n  return (\n    <state.dialog>\n      <state.root />\n    </state.dialog>\n  );\n};\n"],"names":["assertSlots","renderDrawerOverlay_unstable","state","dialog","motion","canRender","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C,IAAI,CAACA,MAAMC,MAAM,IAAI,CAACD,MAAME,MAAM,CAACC,SAAS,EAAE;QAC5C,OAAO;IACT;IAEAL,YAAgCE;IAEhC,qBACE,KAACA,MAAMC,MAAM;kBACX,cAAA,KAACD,MAAMI,IAAI;;AAGjB,EAAE"}

package/lib/components/DrawerOverlay/useDrawerOverlay.js

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
-import { DialogSurface } from '@fluentui/react-dialog';
-import { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';
+import { slot, useMergedRefs } from '@fluentui/react-utilities';
+import { Dialog, DialogSurface } from '@fluentui/react-dialog';
+import { useMotion } from '@fluentui/react-motion-preview';
+import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
 /**
  * Create the state required to render DrawerOverlay.
  *
@@ -9,27 +10,50 @@ 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;
-    return {
-        components: {
-            root: DialogSurface,
-            backdrop: 'div'
-        },
-        root: getNativeElementProps('div', {
-            ref,
-            ...props
-        }),
-        dialog: {
-            open,
+    const { open, size, position } = useDrawerDefaultProps(props);
+    const { modalType = 'modal', inertTrapFocus, defaultOpen = false, onOpenChange } = props;
+    const drawerMotion = useMotion(open);
+    const backdropMotion = useMotion(open);
+    const hasCustomBackdrop = modalType !== 'non-modal' && props.backdrop !== null;
+    const root = slot.always({
+        ...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.optional(props.dialog, {
+        elementType: Dialog,
+        renderByDefault: true,
+        defaultProps: {
+            open: true,
             defaultOpen,
             onOpenChange,
             inertTrapFocus,
             modalType
+        }
+    });
+    return {
+        components: {
+            root: DialogSurface,
+            dialog: Dialog,
+            backdrop: 'div'
         },
+        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 } 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: getNativeElementProps('div', {\n      ref,\n      ...props,\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","DialogSurface","getDefaultDrawerProps","useDrawerOverlay_unstable","props","ref","open","defaultOpen","size","position","modalType","inertTrapFocus","onOpenChange","components","root","backdrop","dialog"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAElE,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,sBAAsB,OAAO;YACjCK;YACA,GAAGD,KAAK;QACV;QACAY,QAAQ;YACNV;YACAC;YACAK;YACAD;YACAD;QACF;QAEAF;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawerOverlay.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { Dialog, DialogSurface } from '@fluentui/react-dialog';\nimport { useMotion } from '@fluentui/react-motion-preview';\n\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { DrawerOverlayProps, DrawerOverlayState } from './DrawerOverlay.types';\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, size, position } = useDrawerDefaultProps(props);\n  const { modalType = 'modal', inertTrapFocus, defaultOpen = false, 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(\n    {\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.optional(props.dialog, {\n    elementType: Dialog,\n    renderByDefault: true,\n    defaultProps: {\n      open: true,\n      defaultOpen,\n      onOpenChange,\n      inertTrapFocus,\n      modalType,\n    },\n  });\n\n  return {\n    components: {\n      root: DialogSurface,\n      dialog: Dialog,\n      backdrop: 'div',\n    },\n\n    root,\n    dialog,\n\n    size,\n    position,\n    motion: drawerMotion,\n    backdropMotion,\n  };\n};\n"],"names":["React","slot","useMergedRefs","Dialog","DialogSurface","useMotion","useDrawerDefaultProps","useDrawerOverlay_unstable","props","ref","open","size","position","modalType","inertTrapFocus","defaultOpen","onOpenChange","drawerMotion","backdropMotion","hasCustomBackdrop","backdrop","root","always","elementType","defaultProps","optional","renderByDefault","dialog","components","motion"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAChE,SAASC,MAAM,EAAEC,aAAa,QAAQ,yBAAyB;AAC/D,SAASC,SAAS,QAAQ,iCAAiC;AAE3D,SAASC,qBAAqB,QAAQ,qCAAqC;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGN,sBAAsBE;IACvD,MAAM,EAAEK,YAAY,OAAO,EAAEC,cAAc,EAAEC,cAAc,KAAK,EAAEC,YAAY,EAAE,GAAGR;IAEnF,MAAMS,eAAeZ,UAA0BK;IAC/C,MAAMQ,iBAAiBb,UAA0BK;IAEjD,MAAMS,oBAAoBN,cAAc,eAAeL,MAAMY,QAAQ,KAAK;IAE1E,MAAMC,OAAOpB,KAAKqB,MAAM,CACtB;QACE,GAAGd,KAAK;QACRC,KAAKP,cAAcO,KAAKQ,aAAaR,GAAG;IAC1C,GACA;QACEc,aAAanB;QACboB,cAAc;YACZJ,UAAUnB,KAAKwB,QAAQ,CAACjB,MAAMY,QAAQ,EAAE;gBACtCG,aAAa;gBACbG,iBAAiBP;gBACjBK,cAAc;oBACZf,KAAKS,eAAeT,GAAG;gBACzB;YACF;QACF;IACF;IAGF,MAAMkB,SAAS1B,KAAKwB,QAAQ,CAACjB,MAAMmB,MAAM,EAAE;QACzCJ,aAAapB;QACbuB,iBAAiB;QACjBF,cAAc;YACZd,MAAM;YACNK;YACAC;YACAF;YACAD;QACF;IACF;IAEA,OAAO;QACLe,YAAY;YACVP,MAAMjB;YACNuB,QAAQxB;YACRiB,UAAU;QACZ;QAEAC;QACAM;QAEAhB;QACAC;QACAiB,QAAQZ;QACRC;IACF;AACF,EAAE"}