@fluentui/react-drawer 9.8.8 → 9.9.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DrawerHeaderTitle/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":[],"rangeMappings":";;","mappings":"AAsBA;;CAEC,GACD,WAA4E"}
+{"version":3,"sources":["../src/components/DrawerHeaderTitle/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":"AAsBA;;CAEC,GACD,WAA4E"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DrawerHeaderTitle/index.ts"],"sourcesContent":["export { DrawerHeaderTitle } from './DrawerHeaderTitle';\nexport type { DrawerHeaderTitleProps, DrawerHeaderTitleSlots, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\nexport { renderDrawerHeaderTitle_unstable } from './renderDrawerHeaderTitle';\nexport { useDrawerHeaderTitle_unstable } from './useDrawerHeaderTitle';\nexport { drawerHeaderTitleClassNames, useDrawerHeaderTitleStyles_unstable } from './useDrawerHeaderTitleStyles.styles';\n"],"names":["DrawerHeaderTitle","renderDrawerHeaderTitle_unstable","useDrawerHeaderTitle_unstable","drawerHeaderTitleClassNames","useDrawerHeaderTitleStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,iBAAiB,QAAQ,sBAAsB;AAExD,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,2BAA2B,EAAEC,mCAAmC,QAAQ,sCAAsC"}
+{"version":3,"sources":["../src/components/DrawerHeaderTitle/index.ts"],"sourcesContent":["export { DrawerHeaderTitle } from './DrawerHeaderTitle';\nexport type { DrawerHeaderTitleProps, DrawerHeaderTitleSlots, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\nexport { renderDrawerHeaderTitle_unstable } from './renderDrawerHeaderTitle';\nexport { useDrawerHeaderTitle_unstable } from './useDrawerHeaderTitle';\nexport { drawerHeaderTitleClassNames, useDrawerHeaderTitleStyles_unstable } from './useDrawerHeaderTitleStyles.styles';\n"],"names":["DrawerHeaderTitle","renderDrawerHeaderTitle_unstable","useDrawerHeaderTitle_unstable","drawerHeaderTitleClassNames","useDrawerHeaderTitleStyles_unstable"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,sBAAsB;AAExD,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,2BAA2B,EAAEC,mCAAmC,QAAQ,sCAAsC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DrawerHeaderTitle/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"],"rangeMappings":";;;;;;;;;;;;","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"}
+{"version":3,"sources":["../src/components/DrawerHeaderTitle/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.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DrawerHeaderTitle/useDrawerHeaderTitle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '@fluentui/react-dialog';\n\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  const { children, heading } = props;\n  const headingId = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n\n  return {\n    components: {\n      root: 'div',\n      heading: 'h2',\n      action: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    heading: slot.optional(heading, {\n      defaultProps: {\n        id: headingId,\n        children,\n      },\n      renderByDefault: true,\n      elementType: 'h2',\n    }),\n    action: slot.optional(props.action, {\n      elementType: 'div',\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDialogContext_unstable","useDrawerHeaderTitle_unstable","props","ref","children","heading","headingId","ctx","dialogTitleId","components","root","action","always","elementType","optional","defaultProps","id","renderByDefault"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,yBAAyB,QAAQ,yBAAyB;AAInE;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGH;IAC9B,MAAMI,YAAYN,0BAA0BO,CAAAA,MAAOA,IAAIC,aAAa;IAEpE,OAAO;QACLC,YAAY;YACVC,MAAM;YACNL,SAAS;YACTM,QAAQ;QACV;QAEAD,MAAMX,KAAKa,MAAM,CACfd,yBAAyB,OAAO;YAC9BK;YACA,GAAGD,KAAK;QACV,IACA;YAAEW,aAAa;QAAM;QAEvBR,SAASN,KAAKe,QAAQ,CAACT,SAAS;YAC9BU,cAAc;gBACZC,IAAIV;gBACJF;YACF;YACAa,iBAAiB;YACjBJ,aAAa;QACf;QACAF,QAAQZ,KAAKe,QAAQ,CAACZ,MAAMS,MAAM,EAAE;YAClCE,aAAa;QACf;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/DrawerHeaderTitle/useDrawerHeaderTitle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '@fluentui/react-dialog';\n\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  const { children, heading } = props;\n  const headingId = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n\n  return {\n    components: {\n      root: 'div',\n      heading: 'h2',\n      action: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    heading: slot.optional(heading, {\n      defaultProps: {\n        id: headingId,\n        children,\n      },\n      renderByDefault: true,\n      elementType: 'h2',\n    }),\n    action: slot.optional(props.action, {\n      elementType: 'div',\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDialogContext_unstable","useDrawerHeaderTitle_unstable","props","ref","children","heading","headingId","ctx","dialogTitleId","components","root","action","always","elementType","optional","defaultProps","id","renderByDefault"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,yBAAyB,QAAQ,yBAAyB;AAInE;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGH;IAC9B,MAAMI,YAAYN,0BAA0BO,CAAAA,MAAOA,IAAIC,aAAa;IAEpE,OAAO;QACLC,YAAY;YACVC,MAAM;YACNL,SAAS;YACTM,QAAQ;QACV;QAEAD,MAAMX,KAAKa,MAAM,CACfd,yBAAyB,OAAO;YAC9BK;YACA,GAAGD,KAAK;QACV,IACA;YAAEW,aAAa;QAAM;QAEvBR,SAASN,KAAKe,QAAQ,CAACT,SAAS;YAC9BU,cAAc;gBACZC,IAAIV;gBACJF;YACF;YACAa,iBAAiB;YACjBJ,aAAa;QACf;QACAF,QAAQZ,KAAKe,QAAQ,CAACZ,MAAMS,MAAM,EAAE;YAClCE,aAAa;QACf;IACF;AACF,EAAE"}

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

@@ -0,0 +1,49 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';
+import { tokens } from '@fluentui/react-theme';
+export const drawerHeaderTitleClassNames = {
+    root: 'fui-DrawerHeaderTitle',
+    heading: 'fui-DrawerHeaderTitle__heading',
+    action: 'fui-DrawerHeaderTitle__action'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        columnGap: tokens.spacingHorizontalS
+    },
+    action: {
+        marginRight: `calc(${tokens.spacingHorizontalS} * -1)`
+    }
+});
+/**
+ * Apply styling to the DrawerHeaderTitle slots based on the state
+ */ export const useDrawerHeaderTitleStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { heading: root = {}, action, // We should not use components to pass along the base element type of a slot
+    // but there's no way to retrieve the element type of a slot from the slot definition
+    // right now without using SLOT_ELEMENT_TYPE_SYMBOL
+    // TODO: create a method to retrieve the element type of a slot
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    components } = state;
+    useDialogTitleStyles_unstable({
+        components: {
+            root: components.heading,
+            action: components.action
+        },
+        root,
+        action
+    });
+    state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);
+    if (state.heading) {
+        state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);
+    }
+    if (state.action) {
+        state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';\nimport { tokens } from '@fluentui/react-theme';\n\nimport type { DrawerHeaderTitleSlots, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\n\nexport const drawerHeaderTitleClassNames: SlotClassNames<DrawerHeaderTitleSlots> = {\n  root: 'fui-DrawerHeaderTitle',\n  heading: 'fui-DrawerHeaderTitle__heading',\n  action: 'fui-DrawerHeaderTitle__action',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    columnGap: tokens.spacingHorizontalS,\n  },\n\n  action: {\n    marginRight: `calc(${tokens.spacingHorizontalS} * -1)`,\n  },\n});\n\n/**\n * Apply styling to the DrawerHeaderTitle slots based on the state\n */\nexport const useDrawerHeaderTitleStyles_unstable = (state: DrawerHeaderTitleState): DrawerHeaderTitleState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  const {\n    heading: root = {},\n    action,\n    // We should not use components to pass along the base element type of a slot\n    // but there's no way to retrieve the element type of a slot from the slot definition\n    // right now without using SLOT_ELEMENT_TYPE_SYMBOL\n    // TODO: create a method to retrieve the element type of a slot\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    components,\n  } = state;\n\n  useDialogTitleStyles_unstable({\n    components: {\n      root: components.heading,\n      action: components.action,\n    },\n    root,\n    action,\n  });\n\n  state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);\n\n  if (state.heading) {\n    state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);\n  }\n\n  if (state.action) {\n    state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useDialogTitleStyles_unstable","tokens","drawerHeaderTitleClassNames","root","heading","action","useStyles","display","justifyContent","alignItems","columnGap","spacingHorizontalS","marginRight","useDrawerHeaderTitleStyles_unstable","state","styles","components","className"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,8BAAsE;IACjFC,MAAM;IACNC,SAAS;IACTC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYR,WAAW;IAC3BK,MAAM;QACJI,SAAS;QACTC,gBAAgB;QAChBC,YAAY;QACZC,WAAWT,OAAOU,kBAAkB;IACtC;IAEAN,QAAQ;QACNO,aAAa,CAAC,KAAK,EAAEX,OAAOU,kBAAkB,CAAC,MAAM,CAAC;IACxD;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,sCAAsC,CAACC;IAClD;IAEA,MAAMC,SAAST;IAEf,MAAM,EACJF,SAASD,OAAO,CAAC,CAAC,EAClBE,MAAM,EACN,6EAA6E;IAC7E,qFAAqF;IACrF,mDAAmD;IACnD,+DAA+D;IAC/D,4DAA4D;IAC5DW,UAAU,EACX,GAAGF;IAEJd,8BAA8B;QAC5BgB,YAAY;YACVb,MAAMa,WAAWZ,OAAO;YACxBC,QAAQW,WAAWX,MAAM;QAC3B;QACAF;QACAE;IACF;IAEAS,MAAMX,IAAI,CAACc,SAAS,GAAGlB,aAAaG,4BAA4BC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACc,SAAS;IAEvG,IAAIH,MAAMV,OAAO,EAAE;QACjBU,MAAMV,OAAO,CAACa,SAAS,GAAGlB,aAAaG,4BAA4BE,OAAO,EAAEU,MAAMV,OAAO,CAACa,SAAS;IACrG;IAEA,IAAIH,MAAMT,MAAM,EAAE;QAChBS,MAAMT,MAAM,CAACY,SAAS,GAAGlB,aAAaG,4BAA4BG,MAAM,EAAEU,OAAOV,MAAM,EAAES,MAAMT,MAAM,CAACY,SAAS;IACjH;IAEA,OAAOH;AACT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InlineDrawer/InlineDrawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useDrawerContextValue } from '../../contexts/drawerContext';\n\nimport type { InlineDrawerProps } from './InlineDrawer.types';\nimport { useInlineDrawer_unstable } from './useInlineDrawer';\nimport { renderInlineDrawer_unstable } from './renderInlineDrawer';\nimport { useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';\n\n/**\n * InlineDrawer 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 InlineDrawer: ForwardRefComponent<InlineDrawerProps> = React.forwardRef((props, ref) => {\n  const state = useInlineDrawer_unstable(props, ref);\n  const contextValue = useDrawerContextValue();\n\n  useInlineDrawerStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerInlineStyles_unstable')(state);\n  useCustomStyleHook_unstable('useInlineDrawerStyles_unstable')(state);\n\n  return renderInlineDrawer_unstable(state, contextValue);\n});\n\nInlineDrawer.displayName = 'InlineDrawer';\n"],"names":["React","useCustomStyleHook_unstable","useDrawerContextValue","useInlineDrawer_unstable","renderInlineDrawer_unstable","useInlineDrawerStyles_unstable","InlineDrawer","forwardRef","props","ref","state","contextValue","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,qBAAqB,QAAQ,+BAA+B;AAGrE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAEhF;;;CAGC,GACD,OAAO,MAAMC,6BAAuDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAC9C,MAAME,eAAeT;IAErBG,+BAA+BK;IAC/BT,4BAA4B,kCAAkCS;IAC9DT,4BAA4B,kCAAkCS;IAE9D,OAAON,4BAA4BM,OAAOC;AAC5C,GAAG;AAEHL,aAAaM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/InlineDrawer/InlineDrawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useDrawerContextValue } from '../../contexts/drawerContext';\n\nimport type { InlineDrawerProps } from './InlineDrawer.types';\nimport { useInlineDrawer_unstable } from './useInlineDrawer';\nimport { renderInlineDrawer_unstable } from './renderInlineDrawer';\nimport { useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';\n\n/**\n * InlineDrawer 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 InlineDrawer: ForwardRefComponent<InlineDrawerProps> = React.forwardRef((props, ref) => {\n  const state = useInlineDrawer_unstable(props, ref);\n  const contextValue = useDrawerContextValue();\n\n  useInlineDrawerStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerInlineStyles_unstable')(state);\n  useCustomStyleHook_unstable('useInlineDrawerStyles_unstable')(state);\n\n  return renderInlineDrawer_unstable(state, contextValue);\n});\n\nInlineDrawer.displayName = 'InlineDrawer';\n"],"names":["React","useCustomStyleHook_unstable","useDrawerContextValue","useInlineDrawer_unstable","renderInlineDrawer_unstable","useInlineDrawerStyles_unstable","InlineDrawer","forwardRef","props","ref","state","contextValue","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,qBAAqB,QAAQ,+BAA+B;AAGrE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAEhF;;;CAGC,GACD,OAAO,MAAMC,6BAAuDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAC9C,MAAME,eAAeT;IAErBG,+BAA+BK;IAC/BT,4BAA4B,kCAAkCS;IAC9DT,4BAA4B,kCAAkCS;IAE9D,OAAON,4BAA4BM,OAAOC;AAC5C,GAAG;AAEHL,aAAaM,WAAW,GAAG"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InlineDrawer/index.ts"],"sourcesContent":["export { InlineDrawer } from './InlineDrawer';\nexport type {\n  InlineDrawerProps,\n  InlineDrawerSlots,\n  InlineDrawerState,\n  SurfaceMotionSlotProps,\n} from './InlineDrawer.types';\nexport { renderInlineDrawer_unstable } from './renderInlineDrawer';\nexport { useInlineDrawer_unstable } from './useInlineDrawer';\nexport { inlineDrawerClassNames, useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';\n"],"names":["InlineDrawer","renderInlineDrawer_unstable","useInlineDrawer_unstable","inlineDrawerClassNames","useInlineDrawerStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAO9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}
+{"version":3,"sources":["../src/components/InlineDrawer/index.ts"],"sourcesContent":["export { InlineDrawer } from './InlineDrawer';\nexport type {\n  InlineDrawerProps,\n  InlineDrawerSlots,\n  InlineDrawerState,\n  SurfaceMotionSlotProps,\n} from './InlineDrawer.types';\nexport { renderInlineDrawer_unstable } from './renderInlineDrawer';\nexport { useInlineDrawer_unstable } from './useInlineDrawer';\nexport { inlineDrawerClassNames, useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';\n"],"names":["InlineDrawer","renderInlineDrawer_unstable","useInlineDrawer_unstable","inlineDrawerClassNames","useInlineDrawerStyles_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAO9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InlineDrawer/useInlineDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { type DrawerMotionParams, InlineDrawerMotion } from '../../shared/drawerMotions';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { InlineDrawerProps, InlineDrawerState, SurfaceMotionSlotProps } from './InlineDrawer.types';\n\nconst STATIC_MOTION = {\n  active: true,\n  canRender: true,\n  ref: React.createRef<HTMLDivElement>(),\n  type: 'idle' as const,\n};\n\n/**\n * Create the state required to render InlineDrawer.\n *\n * The returned state can be modified with hooks such as useInlineDrawerStyles_unstable,\n * before being passed to renderInlineDrawer_unstable.\n *\n * @param props - props from this instance of InlineDrawer\n * @param ref - reference to root HTMLElement of InlineDrawer\n */\nexport const useInlineDrawer_unstable = (props: InlineDrawerProps, ref: React.Ref<HTMLElement>): InlineDrawerState => {\n  const { size, position, open } = useDrawerDefaultProps(props);\n  const { separator = false, surfaceMotion } = props;\n  const { dir } = useFluent();\n\n  const state: InlineDrawerState = {\n    components: {\n      root: 'div',\n      // casting from internal type that has required properties\n      // to external type that only has optional properties\n      // converting to unknown first as both Function component signatures are not compatible\n      surfaceMotion: InlineDrawerMotion as unknown as React.FC<SurfaceMotionSlotProps>,\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ...props,\n        ref,\n      }),\n      { elementType: 'div' },\n    ),\n\n    open,\n    position,\n    size,\n    separator,\n    surfaceMotion: presenceMotionSlot<DrawerMotionParams>(surfaceMotion, {\n      elementType: InlineDrawerMotion,\n      defaultProps: {\n        position,\n        size,\n        dir,\n        visible: open,\n        unmountOnExit: true,\n      },\n    }),\n\n    // Deprecated props\n    motion: STATIC_MOTION,\n  };\n\n  return state;\n};\n"],"names":["React","presenceMotionSlot","getIntrinsicElementProps","slot","useFluent_unstable","useFluent","InlineDrawerMotion","useDrawerDefaultProps","STATIC_MOTION","active","canRender","ref","createRef","type","useInlineDrawer_unstable","props","size","position","open","separator","surfaceMotion","dir","state","components","root","always","elementType","defaultProps","visible","unmountOnExit","motion"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAAkCC,kBAAkB,QAAQ,6BAA6B;AACzF,SAASC,qBAAqB,QAAQ,qCAAqC;AAG3E,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,KAAKX,MAAMY,SAAS;IACpBC,MAAM;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BJ;IACjE,MAAM,EAAEK,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGX,sBAAsBQ;IACvD,MAAM,EAAEI,YAAY,KAAK,EAAEC,aAAa,EAAE,GAAGL;IAC7C,MAAM,EAAEM,GAAG,EAAE,GAAGhB;IAEhB,MAAMiB,QAA2B;QAC/BC,YAAY;YACVC,MAAM;YACN,0DAA0D;YAC1D,qDAAqD;YACrD,uFAAuF;YACvFJ,eAAed;QACjB;QAEAkB,MAAMrB,KAAKsB,MAAM,CACfvB,yBAAyB,OAAO;YAC9B,GAAGa,KAAK;YACRJ;QACF,IACA;YAAEe,aAAa;QAAM;QAGvBR;QACAD;QACAD;QACAG;QACAC,eAAenB,mBAAuCmB,eAAe;YACnEM,aAAapB;YACbqB,cAAc;gBACZV;gBACAD;gBACAK;gBACAO,SAASV;gBACTW,eAAe;YACjB;QACF;QAEA,mBAAmB;QACnBC,QAAQtB;IACV;IAEA,OAAOc;AACT,EAAE"}
+{"version":3,"sources":["../src/components/InlineDrawer/useInlineDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { type DrawerMotionParams, InlineDrawerMotion } from '../../shared/drawerMotions';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { InlineDrawerProps, InlineDrawerState, SurfaceMotionSlotProps } from './InlineDrawer.types';\n\nconst STATIC_MOTION = {\n  active: true,\n  canRender: true,\n  ref: React.createRef<HTMLDivElement>(),\n  type: 'idle' as const,\n};\n\n/**\n * Create the state required to render InlineDrawer.\n *\n * The returned state can be modified with hooks such as useInlineDrawerStyles_unstable,\n * before being passed to renderInlineDrawer_unstable.\n *\n * @param props - props from this instance of InlineDrawer\n * @param ref - reference to root HTMLElement of InlineDrawer\n */\nexport const useInlineDrawer_unstable = (props: InlineDrawerProps, ref: React.Ref<HTMLElement>): InlineDrawerState => {\n  const { size, position, open } = useDrawerDefaultProps(props);\n  const { separator = false, surfaceMotion } = props;\n  const { dir } = useFluent();\n\n  const state: InlineDrawerState = {\n    components: {\n      root: 'div',\n      // casting from internal type that has required properties\n      // to external type that only has optional properties\n      // converting to unknown first as both Function component signatures are not compatible\n      surfaceMotion: InlineDrawerMotion as unknown as React.FC<SurfaceMotionSlotProps>,\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ...props,\n        ref,\n      }),\n      { elementType: 'div' },\n    ),\n\n    open,\n    position,\n    size,\n    separator,\n    surfaceMotion: presenceMotionSlot<DrawerMotionParams>(surfaceMotion, {\n      elementType: InlineDrawerMotion,\n      defaultProps: {\n        position,\n        size,\n        dir,\n        visible: open,\n        unmountOnExit: true,\n      },\n    }),\n\n    // Deprecated props\n    motion: STATIC_MOTION,\n  };\n\n  return state;\n};\n"],"names":["React","presenceMotionSlot","getIntrinsicElementProps","slot","useFluent_unstable","useFluent","InlineDrawerMotion","useDrawerDefaultProps","STATIC_MOTION","active","canRender","ref","createRef","type","useInlineDrawer_unstable","props","size","position","open","separator","surfaceMotion","dir","state","components","root","always","elementType","defaultProps","visible","unmountOnExit","motion"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAAkCC,kBAAkB,QAAQ,6BAA6B;AACzF,SAASC,qBAAqB,QAAQ,qCAAqC;AAG3E,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,KAAKX,MAAMY,SAAS;IACpBC,MAAM;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BJ;IACjE,MAAM,EAAEK,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGX,sBAAsBQ;IACvD,MAAM,EAAEI,YAAY,KAAK,EAAEC,aAAa,EAAE,GAAGL;IAC7C,MAAM,EAAEM,GAAG,EAAE,GAAGhB;IAEhB,MAAMiB,QAA2B;QAC/BC,YAAY;YACVC,MAAM;YACN,0DAA0D;YAC1D,qDAAqD;YACrD,uFAAuF;YACvFJ,eAAed;QACjB;QAEAkB,MAAMrB,KAAKsB,MAAM,CACfvB,yBAAyB,OAAO;YAC9B,GAAGa,KAAK;YACRJ;QACF,IACA;YAAEe,aAAa;QAAM;QAGvBR;QACAD;QACAD;QACAG;QACAC,eAAenB,mBAAuCmB,eAAe;YACnEM,aAAapB;YACbqB,cAAc;gBACZV;gBACAD;gBACAK;gBACAO,SAASV;gBACTW,eAAe;YACjB;QACF;QAEA,mBAAmB;QACnBC,QAAQtB;IACV;IAEA,OAAOc;AACT,EAAE"}

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

@@ -0,0 +1,55 @@
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';
+export const inlineDrawerClassNames = {
+    root: 'fui-InlineDrawer'
+};
+const useDrawerResetStyles = makeResetStyles({
+    ...drawerDefaultStyles,
+    position: 'relative'
+});
+/**
+ * Styles for the root slot
+ */ const borderValue = `1px solid ${tokens.colorNeutralBackground3}`;
+const useDrawerRootStyles = makeStyles({
+    /* Separator */ separatorStart: {
+        borderRight: borderValue
+    },
+    separatorEnd: {
+        borderLeft: borderValue
+    },
+    separatorBottom: {
+        borderTop: borderValue
+    },
+    /* Positioning */ start: {},
+    end: {},
+    bottom: {
+        width: '100%',
+        height: `var(${drawerCSSVars.drawerSizeVar})`
+    }
+});
+function getSeparatorClass(state, classNames) {
+    if (!state.separator) {
+        return undefined;
+    }
+    switch(state.position){
+        case 'start':
+            return classNames.separatorStart;
+        case 'end':
+            return classNames.separatorEnd;
+        case 'bottom':
+            return classNames.separatorBottom;
+        default:
+            return undefined;
+    }
+}
+/**
+ * Apply styling to the InlineDrawer slots based on the state
+ */ export const useInlineDrawerStyles_unstable = (state)=>{
+    'use no memo';
+    const resetStyles = useDrawerResetStyles();
+    const baseClassNames = useDrawerBaseClassNames(state);
+    const rootStyles = useDrawerRootStyles();
+    state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/InlineDrawer/useInlineDrawerStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nimport type { InlineDrawerSlots, InlineDrawerState } from './InlineDrawer.types';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\n\nexport const inlineDrawerClassNames: SlotClassNames<Omit<InlineDrawerSlots, 'surfaceMotion'>> = {\n  root: 'fui-InlineDrawer',\n};\n\nconst useDrawerResetStyles = makeResetStyles({\n  ...drawerDefaultStyles,\n  position: 'relative',\n});\n\n/**\n * Styles for the root slot\n */\nconst borderValue = `1px solid ${tokens.colorNeutralBackground3}`;\nconst useDrawerRootStyles = makeStyles({\n  /* Separator */\n  separatorStart: { borderRight: borderValue },\n  separatorEnd: { borderLeft: borderValue },\n  separatorBottom: { borderTop: borderValue },\n\n  /* Positioning */\n  start: {},\n  end: {},\n  bottom: {\n    width: '100%',\n    height: `var(${drawerCSSVars.drawerSizeVar})`,\n  },\n});\n\nfunction getSeparatorClass(state: InlineDrawerState, classNames: ReturnType<typeof useDrawerRootStyles>) {\n  if (!state.separator) {\n    return undefined;\n  }\n\n  switch (state.position) {\n    case 'start':\n      return classNames.separatorStart;\n\n    case 'end':\n      return classNames.separatorEnd;\n\n    case 'bottom':\n      return classNames.separatorBottom;\n\n    default:\n      return undefined;\n  }\n}\n\n/**\n * Apply styling to the InlineDrawer slots based on the state\n */\nexport const useInlineDrawerStyles_unstable = (state: InlineDrawerState): InlineDrawerState => {\n  'use no memo';\n\n  const resetStyles = useDrawerResetStyles();\n  const baseClassNames = useDrawerBaseClassNames(state);\n  const rootStyles = useDrawerRootStyles();\n\n  state.root.className = mergeClasses(\n    inlineDrawerClassNames.root,\n    resetStyles,\n    baseClassNames,\n    getSeparatorClass(state, rootStyles),\n    rootStyles[state.position],\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","inlineDrawerClassNames","root","useDrawerResetStyles","position","borderValue","colorNeutralBackground3","useDrawerRootStyles","separatorStart","borderRight","separatorEnd","borderLeft","separatorBottom","borderTop","start","end","bottom","width","height","drawerSizeVar","getSeparatorClass","state","classNames","separator","undefined","useInlineDrawerStyles_unstable","resetStyles","baseClassNames","rootStyles","className"],"mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE3E,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,0CAA0C;AAEtH,OAAO,MAAMC,yBAAmF;IAC9FC,MAAM;AACR,EAAE;AAEF,MAAMC,uBAAuBT,gBAAgB;IAC3C,GAAGK,mBAAmB;IACtBK,UAAU;AACZ;AAEA;;CAEC,GACD,MAAMC,cAAc,CAAC,UAAU,EAAER,OAAOS,uBAAuB,EAAE;AACjE,MAAMC,sBAAsBZ,WAAW;IACrC,aAAa,GACba,gBAAgB;QAAEC,aAAaJ;IAAY;IAC3CK,cAAc;QAAEC,YAAYN;IAAY;IACxCO,iBAAiB;QAAEC,WAAWR;IAAY;IAE1C,eAAe,GACfS,OAAO,CAAC;IACRC,KAAK,CAAC;IACNC,QAAQ;QACNC,OAAO;QACPC,QAAQ,CAAC,IAAI,EAAEpB,cAAcqB,aAAa,CAAC,CAAC,CAAC;IAC/C;AACF;AAEA,SAASC,kBAAkBC,KAAwB,EAAEC,UAAkD;IACrG,IAAI,CAACD,MAAME,SAAS,EAAE;QACpB,OAAOC;IACT;IAEA,OAAQH,MAAMjB,QAAQ;QACpB,KAAK;YACH,OAAOkB,WAAWd,cAAc;QAElC,KAAK;YACH,OAAOc,WAAWZ,YAAY;QAEhC,KAAK;YACH,OAAOY,WAAWV,eAAe;QAEnC;YACE,OAAOY;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACJ;IAC7C;IAEA,MAAMK,cAAcvB;IACpB,MAAMwB,iBAAiB3B,wBAAwBqB;IAC/C,MAAMO,aAAarB;IAEnBc,MAAMnB,IAAI,CAAC2B,SAAS,GAAGjC,aACrBK,uBAAuBC,IAAI,EAC3BwB,aACAC,gBACAP,kBAAkBC,OAAOO,aACzBA,UAAU,CAACP,MAAMjB,QAAQ,CAAC,EAC1BiB,MAAMnB,IAAI,CAAC2B,SAAS;IAGtB,OAAOR;AACT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useDrawerContextValue } from '../../contexts/drawerContext';\n\nimport { useOverlayDrawer_unstable } from './useOverlayDrawer';\nimport { renderOverlayDrawer_unstable } from './renderOverlayDrawer';\nimport { useOverlayDrawerStyles_unstable } from './useOverlayDrawerStyles.styles';\nimport type { OverlayDrawerProps } from './OverlayDrawer.types';\n\n/**\n * OverlayDrawer contains supplementary content and are used for complex creation, edit, or management experiences.\n */\nexport const OverlayDrawer: ForwardRefComponent<OverlayDrawerProps> = React.forwardRef((props, ref) => {\n  const state = useOverlayDrawer_unstable(props, ref);\n  const contextValue = useDrawerContextValue();\n\n  useOverlayDrawerStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerOverlayStyles_unstable')(state);\n  useCustomStyleHook_unstable('useOverlayDrawerStyles_unstable')(state);\n\n  return renderOverlayDrawer_unstable(state, contextValue);\n});\n\nOverlayDrawer.displayName = 'OverlayDrawer';\n"],"names":["React","useCustomStyleHook_unstable","useDrawerContextValue","useOverlayDrawer_unstable","renderOverlayDrawer_unstable","useOverlayDrawerStyles_unstable","OverlayDrawer","forwardRef","props","ref","state","contextValue","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,qBAAqB,QAAQ,+BAA+B;AAErE,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAGlF;;CAEC,GACD,OAAO,MAAMC,8BAAyDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQP,0BAA0BK,OAAOC;IAC/C,MAAME,eAAeT;IAErBG,gCAAgCK;IAChCT,4BAA4B,mCAAmCS;IAC/DT,4BAA4B,mCAAmCS;IAE/D,OAAON,6BAA6BM,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useDrawerContextValue } from '../../contexts/drawerContext';\n\nimport { useOverlayDrawer_unstable } from './useOverlayDrawer';\nimport { renderOverlayDrawer_unstable } from './renderOverlayDrawer';\nimport { useOverlayDrawerStyles_unstable } from './useOverlayDrawerStyles.styles';\nimport type { OverlayDrawerProps } from './OverlayDrawer.types';\n\n/**\n * OverlayDrawer contains supplementary content and are used for complex creation, edit, or management experiences.\n */\nexport const OverlayDrawer: ForwardRefComponent<OverlayDrawerProps> = React.forwardRef((props, ref) => {\n  const state = useOverlayDrawer_unstable(props, ref);\n  const contextValue = useDrawerContextValue();\n\n  useOverlayDrawerStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerOverlayStyles_unstable')(state);\n  useCustomStyleHook_unstable('useOverlayDrawerStyles_unstable')(state);\n\n  return renderOverlayDrawer_unstable(state, contextValue);\n});\n\nOverlayDrawer.displayName = 'OverlayDrawer';\n"],"names":["React","useCustomStyleHook_unstable","useDrawerContextValue","useOverlayDrawer_unstable","renderOverlayDrawer_unstable","useOverlayDrawerStyles_unstable","OverlayDrawer","forwardRef","props","ref","state","contextValue","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,qBAAqB,QAAQ,+BAA+B;AAErE,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAGlF;;CAEC,GACD,OAAO,MAAMC,8BAAyDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQP,0BAA0BK,OAAOC;IAC/C,MAAME,eAAeT;IAErBG,gCAAgCK;IAChCT,4BAA4B,mCAAmCS;IAC/DT,4BAA4B,mCAAmCS;IAE/D,OAAON,6BAA6BM,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport {\n  useDialogSurface_unstable,\n  useDialogSurfaceContextValues_unstable,\n  renderDialogSurface_unstable,\n} from '@fluentui/react-dialog';\n\nimport { useOverlayDrawerSurfaceStyles_unstable } from './useOverlayDrawerSurfaceStyles.styles';\nimport type { OverlayDrawerSurfaceProps } from './OverlayDrawerSurface.types';\n\n/**\n * @internal\n * OverlayDrawerSurface is a proxy for DialogSurface as is only meant to be used internally for Drawer.\n */\nexport const OverlayDrawerSurface: ForwardRefComponent<OverlayDrawerSurfaceProps> = React.forwardRef((props, ref) => {\n  const dialogSurfaceState = useDialogSurface_unstable(\n    {\n      ...props,\n      /**\n       * Drawer accepts a `div` or `aside` element type, but Dialog only accepts a `div` element type.\n       * We need to cast the ref to a `div` element type to not break Dialog's ref type.\n       *\n       * FIXME: Evaluate the possibility to remove this cast when Dialog is refactored to accept `aside` elements.\n       */\n      as: props.as as 'div',\n    },\n    ref,\n  );\n  const dialogSurfaceContextValues = useDialogSurfaceContextValues_unstable(dialogSurfaceState);\n\n  useOverlayDrawerSurfaceStyles_unstable(dialogSurfaceState);\n\n  return renderDialogSurface_unstable(dialogSurfaceState, dialogSurfaceContextValues);\n});\n\nOverlayDrawerSurface.displayName = 'OverlayDrawerSurface';\n"],"names":["React","useDialogSurface_unstable","useDialogSurfaceContextValues_unstable","renderDialogSurface_unstable","useOverlayDrawerSurfaceStyles_unstable","OverlayDrawerSurface","forwardRef","props","ref","dialogSurfaceState","as","dialogSurfaceContextValues","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SACEC,yBAAyB,EACzBC,sCAAsC,EACtCC,4BAA4B,QACvB,yBAAyB;AAEhC,SAASC,sCAAsC,QAAQ,yCAAyC;AAGhG;;;CAGC,GACD,OAAO,MAAMC,qCAAuEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3G,MAAMC,qBAAqBR,0BACzB;QACE,GAAGM,KAAK;QACR;;;;;OAKC,GACDG,IAAIH,MAAMG,EAAE;IACd,GACAF;IAEF,MAAMG,6BAA6BT,uCAAuCO;IAE1EL,uCAAuCK;IAEvC,OAAON,6BAA6BM,oBAAoBE;AAC1D,GAAG;AAEHN,qBAAqBO,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport {\n  useDialogSurface_unstable,\n  useDialogSurfaceContextValues_unstable,\n  renderDialogSurface_unstable,\n} from '@fluentui/react-dialog';\n\nimport { useOverlayDrawerSurfaceStyles_unstable } from './useOverlayDrawerSurfaceStyles.styles';\nimport type { OverlayDrawerSurfaceProps } from './OverlayDrawerSurface.types';\n\n/**\n * @internal\n * OverlayDrawerSurface is a proxy for DialogSurface as is only meant to be used internally for Drawer.\n */\nexport const OverlayDrawerSurface: ForwardRefComponent<OverlayDrawerSurfaceProps> = React.forwardRef((props, ref) => {\n  const dialogSurfaceState = useDialogSurface_unstable(\n    {\n      ...props,\n      /**\n       * Drawer accepts a `div` or `aside` element type, but Dialog only accepts a `div` element type.\n       * We need to cast the ref to a `div` element type to not break Dialog's ref type.\n       *\n       * FIXME: Evaluate the possibility to remove this cast when Dialog is refactored to accept `aside` elements.\n       */\n      as: props.as as 'div',\n    },\n    ref,\n  );\n  const dialogSurfaceContextValues = useDialogSurfaceContextValues_unstable(dialogSurfaceState);\n\n  useOverlayDrawerSurfaceStyles_unstable(dialogSurfaceState);\n\n  return renderDialogSurface_unstable(dialogSurfaceState, dialogSurfaceContextValues);\n});\n\nOverlayDrawerSurface.displayName = 'OverlayDrawerSurface';\n"],"names":["React","useDialogSurface_unstable","useDialogSurfaceContextValues_unstable","renderDialogSurface_unstable","useOverlayDrawerSurfaceStyles_unstable","OverlayDrawerSurface","forwardRef","props","ref","dialogSurfaceState","as","dialogSurfaceContextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SACEC,yBAAyB,EACzBC,sCAAsC,EACtCC,4BAA4B,QACvB,yBAAyB;AAEhC,SAASC,sCAAsC,QAAQ,yCAAyC;AAGhG;;;CAGC,GACD,OAAO,MAAMC,qCAAuEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3G,MAAMC,qBAAqBR,0BACzB;QACE,GAAGM,KAAK;QACR;;;;;OAKC,GACDG,IAAIH,MAAMG,EAAE;IACd,GACAF;IAEF,MAAMG,6BAA6BT,uCAAuCO;IAE1EL,uCAAuCK;IAEvC,OAAON,6BAA6BM,oBAAoBE;AAC1D,GAAG;AAEHN,qBAAqBO,WAAW,GAAG"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawerSurface/index.ts"],"sourcesContent":["export { OverlayDrawerSurface } from './OverlayDrawerSurface';\nexport type { OverlayDrawerSurfaceProps, OverlayDrawerSurfaceSlots } from './OverlayDrawerSurface.types';\n"],"names":["OverlayDrawerSurface"],"rangeMappings":"","mappings":"AAAA,SAASA,oBAAoB,QAAQ,yBAAyB"}
+{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawerSurface/index.ts"],"sourcesContent":["export { OverlayDrawerSurface } from './OverlayDrawerSurface';\nexport type { OverlayDrawerSurfaceProps, OverlayDrawerSurfaceSlots } from './OverlayDrawerSurface.types';\n"],"names":["OverlayDrawerSurface"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,yBAAyB"}

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

@@ -0,0 +1,25 @@
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+/**
+ * Styles for the backdrop slot
+ */ const useBackdropResetStyles = makeResetStyles({
+    inset: '0px',
+    position: 'fixed',
+    backgroundColor: tokens.colorBackgroundOverlay
+});
+const useBackdropStyles = makeStyles({
+    nested: {
+        backgroundColor: tokens.colorTransparentBackground
+    }
+});
+/**
+ * Apply styling to the OverlayDrawerSurface slots based on the state
+ */ export const useOverlayDrawerSurfaceStyles_unstable = (state)=>{
+    'use no memo';
+    const backdropResetStyles = useBackdropResetStyles();
+    const backdropStyles = useBackdropStyles();
+    if (state.backdrop) {
+        state.backdrop.className = mergeClasses(backdropResetStyles, state.isNestedDialog && backdropStyles.nested, state.backdrop.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { DialogSurfaceState } from '@fluentui/react-dialog';\n\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropResetStyles = makeResetStyles({\n  inset: '0px',\n  position: 'fixed',\n  backgroundColor: tokens.colorBackgroundOverlay,\n});\n\nconst useBackdropStyles = makeStyles({\n  nested: {\n    backgroundColor: tokens.colorTransparentBackground,\n  },\n});\n\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */\nexport const useOverlayDrawerSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n  'use no memo';\n\n  const backdropResetStyles = useBackdropResetStyles();\n  const backdropStyles = useBackdropStyles();\n\n  if (state.backdrop) {\n    state.backdrop.className = mergeClasses(\n      backdropResetStyles,\n      state.isNestedDialog && backdropStyles.nested,\n      state.backdrop.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","useBackdropResetStyles","inset","position","backgroundColor","colorBackgroundOverlay","useBackdropStyles","nested","colorTransparentBackground","useOverlayDrawerSurfaceStyles_unstable","state","backdropResetStyles","backdropStyles","backdrop","className","isNestedDialog"],"mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAG/C;;CAEC,GACD,MAAMC,yBAAyBJ,gBAAgB;IAC7CK,OAAO;IACPC,UAAU;IACVC,iBAAiBJ,OAAOK,sBAAsB;AAChD;AAEA,MAAMC,oBAAoBR,WAAW;IACnCS,QAAQ;QACNH,iBAAiBJ,OAAOQ,0BAA0B;IACpD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,yCAAyC,CAACC;IACrD;IAEA,MAAMC,sBAAsBV;IAC5B,MAAMW,iBAAiBN;IAEvB,IAAII,MAAMG,QAAQ,EAAE;QAClBH,MAAMG,QAAQ,CAACC,SAAS,GAAGf,aACzBY,qBACAD,MAAMK,cAAc,IAAIH,eAAeL,MAAM,EAC7CG,MAAMG,QAAQ,CAACC,SAAS;IAE5B;IAEA,OAAOJ;AACT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/OverlayDrawer/index.ts"],"sourcesContent":["export { OverlayDrawer } from './OverlayDrawer';\nexport type {\n  OverlayDrawerInternalSlots,\n  OverlayDrawerProps,\n  OverlayDrawerSlots,\n  OverlayDrawerState,\n} from './OverlayDrawer.types';\nexport { renderOverlayDrawer_unstable } from './renderOverlayDrawer';\nexport { useOverlayDrawer_unstable } from './useOverlayDrawer';\nexport { overlayDrawerClassNames, useOverlayDrawerStyles_unstable } from './useOverlayDrawerStyles.styles';\n"],"names":["OverlayDrawer","renderOverlayDrawer_unstable","useOverlayDrawer_unstable","overlayDrawerClassNames","useOverlayDrawerStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,aAAa,QAAQ,kBAAkB;AAOhD,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,uBAAuB,EAAEC,+BAA+B,QAAQ,kCAAkC"}
+{"version":3,"sources":["../src/components/OverlayDrawer/index.ts"],"sourcesContent":["export { OverlayDrawer } from './OverlayDrawer';\nexport type {\n  OverlayDrawerInternalSlots,\n  OverlayDrawerProps,\n  OverlayDrawerSlots,\n  OverlayDrawerState,\n} from './OverlayDrawer.types';\nexport { renderOverlayDrawer_unstable } from './renderOverlayDrawer';\nexport { useOverlayDrawer_unstable } from './useOverlayDrawer';\nexport { overlayDrawerClassNames, useOverlayDrawerStyles_unstable } from './useOverlayDrawerStyles.styles';\n"],"names":["OverlayDrawer","renderOverlayDrawer_unstable","useOverlayDrawer_unstable","overlayDrawerClassNames","useOverlayDrawerStyles_unstable"],"mappings":"AAAA,SAASA,aAAa,QAAQ,kBAAkB;AAOhD,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,uBAAuB,EAAEC,+BAA+B,QAAQ,kCAAkC"}

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

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

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

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

package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.raw.js

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';
+export const overlayDrawerClassNames = {
+    root: 'fui-OverlayDrawer',
+    backdrop: 'fui-OverlayDrawer__backdrop'
+};
+/**
+ * Styles for the root slot
+ */ const useDrawerResetStyles = makeResetStyles({
+    ...createFocusOutlineStyle(),
+    ...drawerDefaultStyles,
+    position: 'fixed',
+    top: 0,
+    bottom: 0
+});
+const useDrawerRootStyles = makeStyles({
+    /* Positioning */ start: {},
+    end: {},
+    bottom: {
+        top: 'auto',
+        height: `var(${drawerCSSVars.drawerSizeVar})`,
+        width: '100vw'
+    },
+    absolute: {
+        position: 'absolute'
+    }
+});
+/**
+ * Apply styling to the OverlayDrawer slots based on the state
+ */ export const useOverlayDrawerStyles_unstable = (state)=>{
+    'use no memo';
+    const baseClassNames = useDrawerBaseClassNames(state);
+    const resetStyles = useDrawerResetStyles();
+    const rootStyles = useDrawerRootStyles();
+    const absoluteStyles = state.hasMountNodeElement && rootStyles.absolute;
+    const backdrop = state.root.backdrop;
+    state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], absoluteStyles, state.root.className);
+    if (backdrop) {
+        backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, absoluteStyles, backdrop.className);
+    }
+    return state;
+};

package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nimport type { OverlayDrawerState } from './OverlayDrawer.types';\nimport { OverlayDrawerSurfaceSlots } from './OverlayDrawerSurface/OverlayDrawerSurface.types';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\n\nexport const overlayDrawerClassNames: SlotClassNames<Omit<OverlayDrawerSurfaceSlots, 'backdropMotion'>> = {\n  root: 'fui-OverlayDrawer',\n  backdrop: 'fui-OverlayDrawer__backdrop',\n};\n\n/**\n * Styles for the root slot\n */\nconst useDrawerResetStyles = makeResetStyles({\n  ...createFocusOutlineStyle(),\n  ...drawerDefaultStyles,\n  position: 'fixed',\n  top: 0,\n  bottom: 0,\n});\n\nconst useDrawerRootStyles = makeStyles({\n  /* Positioning */\n  start: {},\n  end: {},\n  bottom: {\n    top: 'auto',\n    height: `var(${drawerCSSVars.drawerSizeVar})`,\n    width: '100vw',\n  },\n  absolute: {\n    position: 'absolute',\n  },\n});\n\n/**\n * Apply styling to the OverlayDrawer slots based on the state\n */\nexport const useOverlayDrawerStyles_unstable = (state: OverlayDrawerState): OverlayDrawerState => {\n  'use no memo';\n\n  const baseClassNames = useDrawerBaseClassNames(state);\n  const resetStyles = useDrawerResetStyles();\n  const rootStyles = useDrawerRootStyles();\n\n  const absoluteStyles = state.hasMountNodeElement && rootStyles.absolute;\n  const backdrop = state.root.backdrop as React.HTMLAttributes<HTMLDivElement> | undefined;\n\n  state.root.className = mergeClasses(\n    overlayDrawerClassNames.root,\n    baseClassNames,\n    resetStyles,\n    rootStyles[state.position],\n    absoluteStyles,\n    state.root.className,\n  );\n\n  if (backdrop) {\n    backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, absoluteStyles, backdrop.className);\n  }\n\n  return state;\n};\n"],"names":["React","makeResetStyles","makeStyles","mergeClasses","createFocusOutlineStyle","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","overlayDrawerClassNames","root","backdrop","useDrawerResetStyles","position","top","bottom","useDrawerRootStyles","start","end","height","drawerSizeVar","width","absolute","useOverlayDrawerStyles_unstable","state","baseClassNames","resetStyles","rootStyles","absoluteStyles","hasMountNodeElement","className"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE3E,SAASC,uBAAuB,QAAQ,0BAA0B;AAIlE,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,0CAA0C;AAEtH,OAAO,MAAMC,0BAA6F;IACxGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuBV,gBAAgB;IAC3C,GAAGG,yBAAyB;IAC5B,GAAGE,mBAAmB;IACtBM,UAAU;IACVC,KAAK;IACLC,QAAQ;AACV;AAEA,MAAMC,sBAAsBb,WAAW;IACrC,eAAe,GACfc,OAAO,CAAC;IACRC,KAAK,CAAC;IACNH,QAAQ;QACND,KAAK;QACLK,QAAQ,CAAC,IAAI,EAAEb,cAAcc,aAAa,CAAC,CAAC,CAAC;QAC7CC,OAAO;IACT;IACAC,UAAU;QACRT,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMU,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,iBAAiBjB,wBAAwBgB;IAC/C,MAAME,cAAcd;IACpB,MAAMe,aAAaX;IAEnB,MAAMY,iBAAiBJ,MAAMK,mBAAmB,IAAIF,WAAWL,QAAQ;IACvE,MAAMX,WAAWa,MAAMd,IAAI,CAACC,QAAQ;IAEpCa,MAAMd,IAAI,CAACoB,SAAS,GAAG1B,aACrBK,wBAAwBC,IAAI,EAC5Be,gBACAC,aACAC,UAAU,CAACH,MAAMX,QAAQ,CAAC,EAC1Be,gBACAJ,MAAMd,IAAI,CAACoB,SAAS;IAGtB,IAAInB,UAAU;QACZA,SAASmB,SAAS,GAAG1B,aAAaK,wBAAwBE,QAAQ,EAAEiB,gBAAgBjB,SAASmB,SAAS;IACxG;IAEA,OAAON;AACT,EAAE"}

package/lib/contexts/drawerContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/drawerContext.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { DrawerScrollState } from '../shared/DrawerBase.types';\n\nexport type DrawerContextValue = {\n  scrollState: DrawerScrollState;\n  setScrollState: (scrollState: DrawerScrollState) => void;\n};\n\nconst defaultContextValue: DrawerContextValue = {\n  scrollState: 'none',\n  setScrollState: () => ({}),\n};\n\nexport const drawerContext = React.createContext<DrawerContextValue | undefined>(undefined);\nexport const DrawerProvider = drawerContext.Provider;\nexport const useDrawerContext_unstable = () => React.useContext(drawerContext) ?? defaultContextValue;\n\nexport const useDrawerContextValue = (): DrawerContextValue => {\n  const [scrollState, setScrollState] = React.useState<DrawerScrollState>('none');\n\n  return {\n    setScrollState,\n    scrollState,\n  };\n};\n"],"names":["React","defaultContextValue","scrollState","setScrollState","drawerContext","createContext","undefined","DrawerProvider","Provider","useDrawerContext_unstable","useContext","useDrawerContextValue","useState"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAS/B,MAAMC,sBAA0C;IAC9CC,aAAa;IACbC,gBAAgB,IAAO,CAAA,CAAC,CAAA;AAC1B;AAEA,OAAO,MAAMC,gBAAgBJ,MAAMK,aAAa,CAAiCC,WAAW;AAC5F,OAAO,MAAMC,iBAAiBH,cAAcI,QAAQ,CAAC;AACrD,OAAO,MAAMC,4BAA4B;QAAMT;WAAAA,CAAAA,oBAAAA,MAAMU,UAAU,CAACN,4BAAjBJ,+BAAAA,oBAAmCC;AAAkB,EAAE;AAEtG,OAAO,MAAMU,wBAAwB;IACnC,MAAM,CAACT,aAAaC,eAAe,GAAGH,MAAMY,QAAQ,CAAoB;IAExE,OAAO;QACLT;QACAD;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/contexts/drawerContext.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { DrawerScrollState } from '../shared/DrawerBase.types';\n\nexport type DrawerContextValue = {\n  scrollState: DrawerScrollState;\n  setScrollState: (scrollState: DrawerScrollState) => void;\n};\n\nconst defaultContextValue: DrawerContextValue = {\n  scrollState: 'none',\n  setScrollState: () => ({}),\n};\n\nexport const drawerContext = React.createContext<DrawerContextValue | undefined>(undefined);\nexport const DrawerProvider = drawerContext.Provider;\nexport const useDrawerContext_unstable = () => React.useContext(drawerContext) ?? defaultContextValue;\n\nexport const useDrawerContextValue = (): DrawerContextValue => {\n  const [scrollState, setScrollState] = React.useState<DrawerScrollState>('none');\n\n  return {\n    setScrollState,\n    scrollState,\n  };\n};\n"],"names":["React","defaultContextValue","scrollState","setScrollState","drawerContext","createContext","undefined","DrawerProvider","Provider","useDrawerContext_unstable","useContext","useDrawerContextValue","useState"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAS/B,MAAMC,sBAA0C;IAC9CC,aAAa;IACbC,gBAAgB,IAAO,CAAA,CAAC,CAAA;AAC1B;AAEA,OAAO,MAAMC,gBAAgBJ,MAAMK,aAAa,CAAiCC,WAAW;AAC5F,OAAO,MAAMC,iBAAiBH,cAAcI,QAAQ,CAAC;AACrD,OAAO,MAAMC,4BAA4B;QAAMT;WAAAA,CAAAA,oBAAAA,MAAMU,UAAU,CAACN,4BAAjBJ,+BAAAA,oBAAmCC;EAAoB;AAEtG,OAAO,MAAMU,wBAAwB;IACnC,MAAM,CAACT,aAAaC,eAAe,GAAGH,MAAMY,QAAQ,CAAoB;IAExE,OAAO;QACLT;QACAD;IACF;AACF,EAAE"}

package/lib/contexts/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { DrawerContextValue } from './drawerContext';\nexport { DrawerProvider, drawerContext, useDrawerContextValue, useDrawerContext_unstable } from './drawerContext';\n"],"names":["DrawerProvider","drawerContext","useDrawerContextValue","useDrawerContext_unstable"],"rangeMappings":"","mappings":"AACA,SAASA,cAAc,EAAEC,aAAa,EAAEC,qBAAqB,EAAEC,yBAAyB,QAAQ,kBAAkB"}
+{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { DrawerContextValue } from './drawerContext';\nexport { DrawerProvider, drawerContext, useDrawerContextValue, useDrawerContext_unstable } from './drawerContext';\n"],"names":["DrawerProvider","drawerContext","useDrawerContextValue","useDrawerContext_unstable"],"mappings":"AACA,SAASA,cAAc,EAAEC,aAAa,EAAEC,qBAAqB,EAAEC,yBAAyB,QAAQ,kBAAkB"}

package/lib/e2e/DrawerShared.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/e2e/DrawerShared.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mount } from '@cypress/react';\nimport { FluentProvider } from '@fluentui/react-provider';\nimport { webLightTheme } from '@fluentui/react-theme';\n\nimport { InlineDrawer } from '../components/InlineDrawer';\nimport { OverlayDrawer } from '../components/OverlayDrawer';\nimport { Drawer, DrawerProps } from '../Drawer';\n\nconst mountFluent = (\n  element: // eslint-disable-next-line @typescript-eslint/no-deprecated\n  JSX.Element,\n) => {\n  mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);\n};\n\nexport function testDrawerBaseScenarios(Component: typeof Drawer | typeof OverlayDrawer | typeof InlineDrawer) {\n  describe('basic functionality', () => {\n    it('should not render any element when closed', () => {\n      mountFluent(<Component id=\"drawer\" />);\n\n      cy.get('#drawer').should('not.exist');\n    });\n\n    it('should render an element when opened', () => {\n      mountFluent(<Component id=\"drawer\" open />);\n\n      cy.get('#drawer').should('exist');\n    });\n\n    it('should render children content', () => {\n      const content = 'Test the renderization';\n      mountFluent(\n        <Component id=\"drawer\" open>\n          {content}\n        </Component>,\n      );\n\n      cy.get('#drawer').contains(content);\n    });\n\n    it('should toggle visibility on open prop change', () => {\n      const ExampleDrawer = () => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n          <>\n            <Component id=\"drawer\" open={open} />\n            <button id=\"button\" onClick={() => setOpen(true)}>\n              Open\n            </button>\n          </>\n        );\n      };\n\n      mountFluent(<ExampleDrawer />);\n\n      cy.get('#drawer').should('not.exist');\n      cy.get('#button').click();\n      cy.get('#drawer').should('exist');\n    });\n  });\n\n  describe('size prop', () => {\n    const sizes = {\n      small: 320,\n      medium: 592,\n      large: 940,\n      full: 1000,\n    };\n\n    Object.entries(sizes).forEach(([size, width]) => {\n      const sizeProp = size as DrawerProps['size'];\n\n      it(`should have correct size when size is ${size}`, () => {\n        mountFluent(<Component size={sizeProp} id=\"drawer\" open />);\n\n        cy.viewport(1000, 1000);\n        cy.get('#drawer').should('have.css', 'width', width + 'px');\n        cy.get('#drawer').invoke('outerWidth').should('equal', width);\n      });\n    });\n\n    it('width should not be bigger than viewport', () => {\n      mountFluent(<Component id=\"drawer\" open />);\n\n      cy.viewport(319, 319);\n      cy.get('#drawer').should('have.css', 'width', '319px');\n      cy.get('#drawer').invoke('outerWidth').should('equal', 319);\n    });\n\n    it('should have custom size', () => {\n      mountFluent(<Component id=\"drawer\" open style={{ width: '200px' }} />);\n\n      cy.get('#drawer').should('have.css', 'width', '200px');\n      cy.get('#drawer').invoke('outerWidth').should('equal', 200);\n    });\n  });\n\n  describe('position prop', () => {\n    const positions = {\n      start: 'left',\n      end: 'right',\n      bottom: 'bottom',\n    };\n\n    Object.entries(positions).forEach(([position, side]) => {\n      const positionProp = position as DrawerProps['position'];\n\n      it(`should have correct position when position is ${position}`, () => {\n        mountFluent(<Component position={positionProp} id=\"drawer\" open />);\n\n        cy.get('#drawer').should('have.css', side, '0px');\n      });\n    });\n  });\n}\n"],"names":["React","mount","FluentProvider","webLightTheme","mountFluent","element","theme","testDrawerBaseScenarios","Component","describe","it","id","cy","get","should","open","content","contains","ExampleDrawer","setOpen","useState","button","onClick","click","sizes","small","medium","large","full","Object","entries","forEach","size","width","sizeProp","viewport","invoke","style","positions","start","end","bottom","position","side","positionProp"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,iBAAiB;AACvC,SAASC,cAAc,QAAQ,2BAA2B;AAC1D,SAASC,aAAa,QAAQ,wBAAwB;AAMtD,MAAMC,cAAc,CAClBC;IAGAJ,oBAAM,oBAACC;QAAeI,OAAOH;OAAgBE;AAC/C;AAEA,OAAO,SAASE,wBAAwBC,SAAqE;IAC3GC,SAAS,uBAAuB;QAC9BC,GAAG,6CAA6C;YAC9CN,0BAAY,oBAACI;gBAAUG,IAAG;;YAE1BC,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;QAC3B;QAEAJ,GAAG,wCAAwC;YACzCN,0BAAY,oBAACI;gBAAUG,IAAG;gBAASI,MAAAA;;YAEnCH,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;QAC3B;QAEAJ,GAAG,kCAAkC;YACnC,MAAMM,UAAU;YAChBZ,0BACE,oBAACI;gBAAUG,IAAG;gBAASI,MAAAA;eACpBC;YAILJ,GAAGC,GAAG,CAAC,WAAWI,QAAQ,CAACD;QAC7B;QAEAN,GAAG,gDAAgD;YACjD,MAAMQ,gBAAgB;gBACpB,MAAM,CAACH,MAAMI,QAAQ,GAAGnB,MAAMoB,QAAQ,CAAC;gBAEvC,qBACE,wDACE,oBAACZ;oBAAUG,IAAG;oBAASI,MAAMA;kCAC7B,oBAACM;oBAAOV,IAAG;oBAASW,SAAS,IAAMH,QAAQ;mBAAO;YAKxD;YAEAf,0BAAY,oBAACc;YAEbN,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;YACzBF,GAAGC,GAAG,CAAC,WAAWU,KAAK;YACvBX,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;QAC3B;IACF;IAEAL,SAAS,aAAa;QACpB,MAAMe,QAAQ;YACZC,OAAO;YACPC,QAAQ;YACRC,OAAO;YACPC,MAAM;QACR;QAEAC,OAAOC,OAAO,CAACN,OAAOO,OAAO,CAAC,CAAC,CAACC,MAAMC,MAAM;YAC1C,MAAMC,WAAWF;YAEjBtB,GAAG,CAAC,sCAAsC,EAAEsB,KAAK,CAAC,EAAE;gBAClD5B,0BAAY,oBAACI;oBAAUwB,MAAME;oBAAUvB,IAAG;oBAASI,MAAAA;;gBAEnDH,GAAGuB,QAAQ,CAAC,MAAM;gBAClBvB,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,YAAY,SAASmB,QAAQ;gBACtDrB,GAAGC,GAAG,CAAC,WAAWuB,MAAM,CAAC,cAActB,MAAM,CAAC,SAASmB;YACzD;QACF;QAEAvB,GAAG,4CAA4C;YAC7CN,0BAAY,oBAACI;gBAAUG,IAAG;gBAASI,MAAAA;;YAEnCH,GAAGuB,QAAQ,CAAC,KAAK;YACjBvB,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,YAAY,SAAS;YAC9CF,GAAGC,GAAG,CAAC,WAAWuB,MAAM,CAAC,cAActB,MAAM,CAAC,SAAS;QACzD;QAEAJ,GAAG,2BAA2B;YAC5BN,0BAAY,oBAACI;gBAAUG,IAAG;gBAASI,MAAAA;gBAAKsB,OAAO;oBAAEJ,OAAO;gBAAQ;;YAEhErB,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,YAAY,SAAS;YAC9CF,GAAGC,GAAG,CAAC,WAAWuB,MAAM,CAAC,cAActB,MAAM,CAAC,SAAS;QACzD;IACF;IAEAL,SAAS,iBAAiB;QACxB,MAAM6B,YAAY;YAChBC,OAAO;YACPC,KAAK;YACLC,QAAQ;QACV;QAEAZ,OAAOC,OAAO,CAACQ,WAAWP,OAAO,CAAC,CAAC,CAACW,UAAUC,KAAK;YACjD,MAAMC,eAAeF;YAErBhC,GAAG,CAAC,8CAA8C,EAAEgC,SAAS,CAAC,EAAE;gBAC9DtC,0BAAY,oBAACI;oBAAUkC,UAAUE;oBAAcjC,IAAG;oBAASI,MAAAA;;gBAE3DH,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,YAAY6B,MAAM;YAC7C;QACF;IACF;AACF"}
+{"version":3,"sources":["../src/e2e/DrawerShared.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mount } from '@cypress/react';\nimport { FluentProvider } from '@fluentui/react-provider';\nimport { webLightTheme } from '@fluentui/react-theme';\n\nimport { InlineDrawer } from '../components/InlineDrawer';\nimport { OverlayDrawer } from '../components/OverlayDrawer';\nimport { Drawer, DrawerProps } from '../Drawer';\n\nconst mountFluent = (\n  element: // eslint-disable-next-line @typescript-eslint/no-deprecated\n  JSX.Element,\n) => {\n  mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);\n};\n\nexport function testDrawerBaseScenarios(Component: typeof Drawer | typeof OverlayDrawer | typeof InlineDrawer) {\n  describe('basic functionality', () => {\n    it('should not render any element when closed', () => {\n      mountFluent(<Component id=\"drawer\" />);\n\n      cy.get('#drawer').should('not.exist');\n    });\n\n    it('should render an element when opened', () => {\n      mountFluent(<Component id=\"drawer\" open />);\n\n      cy.get('#drawer').should('exist');\n    });\n\n    it('should render children content', () => {\n      const content = 'Test the renderization';\n      mountFluent(\n        <Component id=\"drawer\" open>\n          {content}\n        </Component>,\n      );\n\n      cy.get('#drawer').contains(content);\n    });\n\n    it('should toggle visibility on open prop change', () => {\n      const ExampleDrawer = () => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n          <>\n            <Component id=\"drawer\" open={open} />\n            <button id=\"button\" onClick={() => setOpen(true)}>\n              Open\n            </button>\n          </>\n        );\n      };\n\n      mountFluent(<ExampleDrawer />);\n\n      cy.get('#drawer').should('not.exist');\n      cy.get('#button').click();\n      cy.get('#drawer').should('exist');\n    });\n  });\n\n  describe('size prop', () => {\n    const sizes = {\n      small: 320,\n      medium: 592,\n      large: 940,\n      full: 1000,\n    };\n\n    Object.entries(sizes).forEach(([size, width]) => {\n      const sizeProp = size as DrawerProps['size'];\n\n      it(`should have correct size when size is ${size}`, () => {\n        mountFluent(<Component size={sizeProp} id=\"drawer\" open />);\n\n        cy.viewport(1000, 1000);\n        cy.get('#drawer').should('have.css', 'width', width + 'px');\n        cy.get('#drawer').invoke('outerWidth').should('equal', width);\n      });\n    });\n\n    it('width should not be bigger than viewport', () => {\n      mountFluent(<Component id=\"drawer\" open />);\n\n      cy.viewport(319, 319);\n      cy.get('#drawer').should('have.css', 'width', '319px');\n      cy.get('#drawer').invoke('outerWidth').should('equal', 319);\n    });\n\n    it('should have custom size', () => {\n      mountFluent(<Component id=\"drawer\" open style={{ width: '200px' }} />);\n\n      cy.get('#drawer').should('have.css', 'width', '200px');\n      cy.get('#drawer').invoke('outerWidth').should('equal', 200);\n    });\n  });\n\n  describe('position prop', () => {\n    const positions = {\n      start: 'left',\n      end: 'right',\n      bottom: 'bottom',\n    };\n\n    Object.entries(positions).forEach(([position, side]) => {\n      const positionProp = position as DrawerProps['position'];\n\n      it(`should have correct position when position is ${position}`, () => {\n        mountFluent(<Component position={positionProp} id=\"drawer\" open />);\n\n        cy.get('#drawer').should('have.css', side, '0px');\n      });\n    });\n  });\n}\n"],"names":["React","mount","FluentProvider","webLightTheme","mountFluent","element","theme","testDrawerBaseScenarios","Component","describe","it","id","cy","get","should","open","content","contains","ExampleDrawer","setOpen","useState","button","onClick","click","sizes","small","medium","large","full","Object","entries","forEach","size","width","sizeProp","viewport","invoke","style","positions","start","end","bottom","position","side","positionProp"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,iBAAiB;AACvC,SAASC,cAAc,QAAQ,2BAA2B;AAC1D,SAASC,aAAa,QAAQ,wBAAwB;AAMtD,MAAMC,cAAc,CAClBC;IAGAJ,oBAAM,oBAACC;QAAeI,OAAOH;OAAgBE;AAC/C;AAEA,OAAO,SAASE,wBAAwBC,SAAqE;IAC3GC,SAAS,uBAAuB;QAC9BC,GAAG,6CAA6C;YAC9CN,0BAAY,oBAACI;gBAAUG,IAAG;;YAE1BC,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;QAC3B;QAEAJ,GAAG,wCAAwC;YACzCN,0BAAY,oBAACI;gBAAUG,IAAG;gBAASI,MAAAA;;YAEnCH,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;QAC3B;QAEAJ,GAAG,kCAAkC;YACnC,MAAMM,UAAU;YAChBZ,0BACE,oBAACI;gBAAUG,IAAG;gBAASI,MAAAA;eACpBC;YAILJ,GAAGC,GAAG,CAAC,WAAWI,QAAQ,CAACD;QAC7B;QAEAN,GAAG,gDAAgD;YACjD,MAAMQ,gBAAgB;gBACpB,MAAM,CAACH,MAAMI,QAAQ,GAAGnB,MAAMoB,QAAQ,CAAC;gBAEvC,qBACE,wDACE,oBAACZ;oBAAUG,IAAG;oBAASI,MAAMA;kCAC7B,oBAACM;oBAAOV,IAAG;oBAASW,SAAS,IAAMH,QAAQ;mBAAO;YAKxD;YAEAf,0BAAY,oBAACc;YAEbN,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;YACzBF,GAAGC,GAAG,CAAC,WAAWU,KAAK;YACvBX,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;QAC3B;IACF;IAEAL,SAAS,aAAa;QACpB,MAAMe,QAAQ;YACZC,OAAO;YACPC,QAAQ;YACRC,OAAO;YACPC,MAAM;QACR;QAEAC,OAAOC,OAAO,CAACN,OAAOO,OAAO,CAAC,CAAC,CAACC,MAAMC,MAAM;YAC1C,MAAMC,WAAWF;YAEjBtB,GAAG,CAAC,sCAAsC,EAAEsB,MAAM,EAAE;gBAClD5B,0BAAY,oBAACI;oBAAUwB,MAAME;oBAAUvB,IAAG;oBAASI,MAAAA;;gBAEnDH,GAAGuB,QAAQ,CAAC,MAAM;gBAClBvB,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,YAAY,SAASmB,QAAQ;gBACtDrB,GAAGC,GAAG,CAAC,WAAWuB,MAAM,CAAC,cAActB,MAAM,CAAC,SAASmB;YACzD;QACF;QAEAvB,GAAG,4CAA4C;YAC7CN,0BAAY,oBAACI;gBAAUG,IAAG;gBAASI,MAAAA;;YAEnCH,GAAGuB,QAAQ,CAAC,KAAK;YACjBvB,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,YAAY,SAAS;YAC9CF,GAAGC,GAAG,CAAC,WAAWuB,MAAM,CAAC,cAActB,MAAM,CAAC,SAAS;QACzD;QAEAJ,GAAG,2BAA2B;YAC5BN,0BAAY,oBAACI;gBAAUG,IAAG;gBAASI,MAAAA;gBAAKsB,OAAO;oBAAEJ,OAAO;gBAAQ;;YAEhErB,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,YAAY,SAAS;YAC9CF,GAAGC,GAAG,CAAC,WAAWuB,MAAM,CAAC,cAActB,MAAM,CAAC,SAAS;QACzD;IACF;IAEAL,SAAS,iBAAiB;QACxB,MAAM6B,YAAY;YAChBC,OAAO;YACPC,KAAK;YACLC,QAAQ;QACV;QAEAZ,OAAOC,OAAO,CAACQ,WAAWP,OAAO,CAAC,CAAC,CAACW,UAAUC,KAAK;YACjD,MAAMC,eAAeF;YAErBhC,GAAG,CAAC,8CAA8C,EAAEgC,UAAU,EAAE;gBAC9DtC,0BAAY,oBAACI;oBAAUkC,UAAUE;oBAAcjC,IAAG;oBAASI,MAAAA;;gBAE3DH,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,YAAY6B,MAAM;YAC7C;QACF;IACF;AACF"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { DrawerProvider, useDrawerContextValue, useDrawerContext_unstable } from './contexts';\nexport type { DrawerContextValue } from './contexts';\n\nexport { Drawer, renderDrawer_unstable, useDrawerStyles_unstable, useDrawer_unstable } from './Drawer';\nexport type { DrawerProps, DrawerSlots, DrawerState } from './Drawer';\n\nexport {\n  OverlayDrawer,\n  overlayDrawerClassNames,\n  renderOverlayDrawer_unstable,\n  useOverlayDrawerStyles_unstable,\n  useOverlayDrawer_unstable,\n} from './OverlayDrawer';\nexport type { OverlayDrawerProps, OverlayDrawerSlots, OverlayDrawerState } from './OverlayDrawer';\n\nexport {\n  InlineDrawer,\n  inlineDrawerClassNames,\n  renderInlineDrawer_unstable,\n  useInlineDrawerStyles_unstable,\n  useInlineDrawer_unstable,\n} from './InlineDrawer';\nexport type { InlineDrawerProps, InlineDrawerSlots, InlineDrawerState } from './InlineDrawer';\n\nexport {\n  DrawerBody,\n  drawerBodyClassNames,\n  renderDrawerBody_unstable,\n  useDrawerBodyStyles_unstable,\n  useDrawerBody_unstable,\n} from './DrawerBody';\nexport type { DrawerBodyProps, DrawerBodySlots, DrawerBodyState } from './DrawerBody';\n\nexport {\n  DrawerHeader,\n  drawerHeaderClassNames,\n  renderDrawerHeader_unstable,\n  useDrawerHeaderStyles_unstable,\n  useDrawerHeader_unstable,\n} from './DrawerHeader';\nexport type { DrawerHeaderProps, DrawerHeaderSlots, DrawerHeaderState } from './DrawerHeader';\n\nexport {\n  DrawerHeaderTitle,\n  drawerHeaderTitleClassNames,\n  renderDrawerHeaderTitle_unstable,\n  useDrawerHeaderTitleStyles_unstable,\n  useDrawerHeaderTitle_unstable,\n} from './DrawerHeaderTitle';\nexport type { DrawerHeaderTitleProps, DrawerHeaderTitleSlots, DrawerHeaderTitleState } from './DrawerHeaderTitle';\n\nexport {\n  DrawerHeaderNavigation,\n  drawerHeaderNavigationClassNames,\n  renderDrawerHeaderNavigation_unstable,\n  useDrawerHeaderNavigationStyles_unstable,\n  useDrawerHeaderNavigation_unstable,\n} from './DrawerHeaderNavigation';\nexport type {\n  DrawerHeaderNavigationProps,\n  DrawerHeaderNavigationSlots,\n  DrawerHeaderNavigationState,\n} from './DrawerHeaderNavigation';\n\nexport {\n  DrawerFooter,\n  drawerFooterClassNames,\n  renderDrawerFooter_unstable,\n  useDrawerFooterStyles_unstable,\n  useDrawerFooter_unstable,\n} from './DrawerFooter';\nexport type { DrawerFooterProps, DrawerFooterSlots, DrawerFooterState } from './DrawerFooter';\n"],"names":["DrawerProvider","useDrawerContextValue","useDrawerContext_unstable","Drawer","renderDrawer_unstable","useDrawerStyles_unstable","useDrawer_unstable","OverlayDrawer","overlayDrawerClassNames","renderOverlayDrawer_unstable","useOverlayDrawerStyles_unstable","useOverlayDrawer_unstable","InlineDrawer","inlineDrawerClassNames","renderInlineDrawer_unstable","useInlineDrawerStyles_unstable","useInlineDrawer_unstable","DrawerBody","drawerBodyClassNames","renderDrawerBody_unstable","useDrawerBodyStyles_unstable","useDrawerBody_unstable","DrawerHeader","drawerHeaderClassNames","renderDrawerHeader_unstable","useDrawerHeaderStyles_unstable","useDrawerHeader_unstable","DrawerHeaderTitle","drawerHeaderTitleClassNames","renderDrawerHeaderTitle_unstable","useDrawerHeaderTitleStyles_unstable","useDrawerHeaderTitle_unstable","DrawerHeaderNavigation","drawerHeaderNavigationClassNames","renderDrawerHeaderNavigation_unstable","useDrawerHeaderNavigationStyles_unstable","useDrawerHeaderNavigation_unstable","DrawerFooter","drawerFooterClassNames","renderDrawerFooter_unstable","useDrawerFooterStyles_unstable","useDrawerFooter_unstable"],"rangeMappings":";;;;;;;;","mappings":"AAAA,SAASA,cAAc,EAAEC,qBAAqB,EAAEC,yBAAyB,QAAQ,aAAa;AAG9F,SAASC,MAAM,EAAEC,qBAAqB,EAAEC,wBAAwB,EAAEC,kBAAkB,QAAQ,WAAW;AAGvG,SACEC,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAGzB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAGxB,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe;AAGtB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAGxB,SACEC,iBAAiB,EACjBC,2BAA2B,EAC3BC,gCAAgC,EAChCC,mCAAmC,EACnCC,6BAA6B,QACxB,sBAAsB;AAG7B,SACEC,sBAAsB,EACtBC,gCAAgC,EAChCC,qCAAqC,EACrCC,wCAAwC,EACxCC,kCAAkC,QAC7B,2BAA2B;AAOlC,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { DrawerProvider, useDrawerContextValue, useDrawerContext_unstable } from './contexts';\nexport type { DrawerContextValue } from './contexts';\n\nexport { Drawer, renderDrawer_unstable, useDrawerStyles_unstable, useDrawer_unstable } from './Drawer';\nexport type { DrawerProps, DrawerSlots, DrawerState } from './Drawer';\n\nexport {\n  OverlayDrawer,\n  overlayDrawerClassNames,\n  renderOverlayDrawer_unstable,\n  useOverlayDrawerStyles_unstable,\n  useOverlayDrawer_unstable,\n} from './OverlayDrawer';\nexport type { OverlayDrawerProps, OverlayDrawerSlots, OverlayDrawerState } from './OverlayDrawer';\n\nexport {\n  InlineDrawer,\n  inlineDrawerClassNames,\n  renderInlineDrawer_unstable,\n  useInlineDrawerStyles_unstable,\n  useInlineDrawer_unstable,\n} from './InlineDrawer';\nexport type { InlineDrawerProps, InlineDrawerSlots, InlineDrawerState } from './InlineDrawer';\n\nexport {\n  DrawerBody,\n  drawerBodyClassNames,\n  renderDrawerBody_unstable,\n  useDrawerBodyStyles_unstable,\n  useDrawerBody_unstable,\n} from './DrawerBody';\nexport type { DrawerBodyProps, DrawerBodySlots, DrawerBodyState } from './DrawerBody';\n\nexport {\n  DrawerHeader,\n  drawerHeaderClassNames,\n  renderDrawerHeader_unstable,\n  useDrawerHeaderStyles_unstable,\n  useDrawerHeader_unstable,\n} from './DrawerHeader';\nexport type { DrawerHeaderProps, DrawerHeaderSlots, DrawerHeaderState } from './DrawerHeader';\n\nexport {\n  DrawerHeaderTitle,\n  drawerHeaderTitleClassNames,\n  renderDrawerHeaderTitle_unstable,\n  useDrawerHeaderTitleStyles_unstable,\n  useDrawerHeaderTitle_unstable,\n} from './DrawerHeaderTitle';\nexport type { DrawerHeaderTitleProps, DrawerHeaderTitleSlots, DrawerHeaderTitleState } from './DrawerHeaderTitle';\n\nexport {\n  DrawerHeaderNavigation,\n  drawerHeaderNavigationClassNames,\n  renderDrawerHeaderNavigation_unstable,\n  useDrawerHeaderNavigationStyles_unstable,\n  useDrawerHeaderNavigation_unstable,\n} from './DrawerHeaderNavigation';\nexport type {\n  DrawerHeaderNavigationProps,\n  DrawerHeaderNavigationSlots,\n  DrawerHeaderNavigationState,\n} from './DrawerHeaderNavigation';\n\nexport {\n  DrawerFooter,\n  drawerFooterClassNames,\n  renderDrawerFooter_unstable,\n  useDrawerFooterStyles_unstable,\n  useDrawerFooter_unstable,\n} from './DrawerFooter';\nexport type { DrawerFooterProps, DrawerFooterSlots, DrawerFooterState } from './DrawerFooter';\n"],"names":["DrawerProvider","useDrawerContextValue","useDrawerContext_unstable","Drawer","renderDrawer_unstable","useDrawerStyles_unstable","useDrawer_unstable","OverlayDrawer","overlayDrawerClassNames","renderOverlayDrawer_unstable","useOverlayDrawerStyles_unstable","useOverlayDrawer_unstable","InlineDrawer","inlineDrawerClassNames","renderInlineDrawer_unstable","useInlineDrawerStyles_unstable","useInlineDrawer_unstable","DrawerBody","drawerBodyClassNames","renderDrawerBody_unstable","useDrawerBodyStyles_unstable","useDrawerBody_unstable","DrawerHeader","drawerHeaderClassNames","renderDrawerHeader_unstable","useDrawerHeaderStyles_unstable","useDrawerHeader_unstable","DrawerHeaderTitle","drawerHeaderTitleClassNames","renderDrawerHeaderTitle_unstable","useDrawerHeaderTitleStyles_unstable","useDrawerHeaderTitle_unstable","DrawerHeaderNavigation","drawerHeaderNavigationClassNames","renderDrawerHeaderNavigation_unstable","useDrawerHeaderNavigationStyles_unstable","useDrawerHeaderNavigation_unstable","DrawerFooter","drawerFooterClassNames","renderDrawerFooter_unstable","useDrawerFooterStyles_unstable","useDrawerFooter_unstable"],"mappings":"AAAA,SAASA,cAAc,EAAEC,qBAAqB,EAAEC,yBAAyB,QAAQ,aAAa;AAG9F,SAASC,MAAM,EAAEC,qBAAqB,EAAEC,wBAAwB,EAAEC,kBAAkB,QAAQ,WAAW;AAGvG,SACEC,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAGzB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAGxB,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe;AAGtB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAGxB,SACEC,iBAAiB,EACjBC,2BAA2B,EAC3BC,gCAAgC,EAChCC,mCAAmC,EACnCC,6BAA6B,QACxB,sBAAsB;AAG7B,SACEC,sBAAsB,EACtBC,gCAAgC,EAChCC,qCAAqC,EACrCC,wCAAwC,EACxCC,kCAAkC,QAC7B,2BAA2B;AAOlC,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB"}

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

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

package/lib/shared/drawerMotionUtils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/shared/drawerMotionUtils.tsx"],"sourcesContent":["import type { PresenceComponent, PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport * as React from 'react';\n\ntype SerializableObject = Record<string, string | boolean | number>;\n\n/**\n * @internal\n * @todo Drawer is a first component to use this pattern, we should move this to a shared package if it will be used in more components\n */\nexport function mergePresenceSlots<\n  BaseMotionParams extends SerializableObject = {},\n  EnhancedMotionParams extends SerializableObject = {},\n>(\n  inputSlot: PresenceMotionSlotProps<EnhancedMotionParams> | null | undefined,\n  Component: PresenceComponent<EnhancedMotionParams>,\n  params: EnhancedMotionParams,\n): PresenceMotionSlotProps<BaseMotionParams> | null {\n  if (inputSlot === null) {\n    return null;\n  }\n\n  return {\n    ...inputSlot,\n    children: (_, props) => {\n      if (inputSlot?.children) {\n        return inputSlot.children(Component, { ...props, ...params });\n      }\n\n      return (\n        <Component {...props} {...params}>\n          {props.children}\n        </Component>\n      );\n    },\n  };\n}\n"],"names":["React","mergePresenceSlots","inputSlot","Component","params","children","_","props"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,YAAYA,WAAW,QAAQ;AAI/B;;;CAGC,GACD,OAAO,SAASC,mBAIdC,SAA2E,EAC3EC,SAAkD,EAClDC,MAA4B;IAE5B,IAAIF,cAAc,MAAM;QACtB,OAAO;IACT;IAEA,OAAO;QACL,GAAGA,SAAS;QACZG,UAAU,CAACC,GAAGC;YACZ,IAAIL,sBAAAA,gCAAAA,UAAWG,QAAQ,EAAE;gBACvB,OAAOH,UAAUG,QAAQ,CAACF,WAAW;oBAAE,GAAGI,KAAK;oBAAE,GAAGH,MAAM;gBAAC;YAC7D;YAEA,qBACE,oBAACD;gBAAW,GAAGI,KAAK;gBAAG,GAAGH,MAAM;eAC7BG,MAAMF,QAAQ;QAGrB;IACF;AACF"}
+{"version":3,"sources":["../src/shared/drawerMotionUtils.tsx"],"sourcesContent":["import type { PresenceComponent, PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport * as React from 'react';\n\ntype SerializableObject = Record<string, string | boolean | number>;\n\n/**\n * @internal\n * @todo Drawer is a first component to use this pattern, we should move this to a shared package if it will be used in more components\n */\nexport function mergePresenceSlots<\n  BaseMotionParams extends SerializableObject = {},\n  EnhancedMotionParams extends SerializableObject = {},\n>(\n  inputSlot: PresenceMotionSlotProps<EnhancedMotionParams> | null | undefined,\n  Component: PresenceComponent<EnhancedMotionParams>,\n  params: EnhancedMotionParams,\n): PresenceMotionSlotProps<BaseMotionParams> | null {\n  if (inputSlot === null) {\n    return null;\n  }\n\n  return {\n    ...inputSlot,\n    children: (_, props) => {\n      if (inputSlot?.children) {\n        return inputSlot.children(Component, { ...props, ...params });\n      }\n\n      return (\n        <Component {...props} {...params}>\n          {props.children}\n        </Component>\n      );\n    },\n  };\n}\n"],"names":["React","mergePresenceSlots","inputSlot","Component","params","children","_","props"],"mappings":"AACA,YAAYA,WAAW,QAAQ;AAI/B;;;CAGC,GACD,OAAO,SAASC,mBAIdC,SAA2E,EAC3EC,SAAkD,EAClDC,MAA4B;IAE5B,IAAIF,cAAc,MAAM;QACtB,OAAO;IACT;IAEA,OAAO;QACL,GAAGA,SAAS;QACZG,UAAU,CAACC,GAAGC;YACZ,IAAIL,sBAAAA,gCAAAA,UAAWG,QAAQ,EAAE;gBACvB,OAAOH,UAAUG,QAAQ,CAACF,WAAW;oBAAE,GAAGI,KAAK;oBAAE,GAAGH,MAAM;gBAAC;YAC7D;YAEA,qBACE,oBAACD;gBAAW,GAAGI,KAAK;gBAAG,GAAGH,MAAM;eAC7BG,MAAMF,QAAQ;QAGrB;IACF;AACF"}

package/lib/shared/drawerMotions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/shared/drawerMotions.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';\nimport { tokens } from '@fluentui/react-theme';\nimport { ProviderContextValue_unstable as FluentProviderContextValue } from '@fluentui/react-shared-contexts';\n\nimport type { DrawerBaseProps } from './DrawerBase.types';\nimport { drawerCSSVars } from './useDrawerBaseStyles.styles';\n\nexport type DrawerMotionParams = Required<\n  Pick<DrawerBaseProps, 'size' | 'position'> & Pick<FluentProviderContextValue, 'dir'>\n>;\nexport type OverlayDrawerSurfaceMotionParams = Required<Pick<DrawerBaseProps, 'size'>>;\n\nconst durations: Record<NonNullable<DrawerBaseProps['size']>, number> = {\n  small: motionTokens.durationGentle,\n  medium: motionTokens.durationSlow,\n  large: motionTokens.durationSlower,\n  full: motionTokens.durationUltraSlow,\n};\n\n/**\n * @internal\n */\nexport function getPositionTransform(\n  position: DrawerBaseProps['position'],\n  sizeVar: string,\n  dir: FluentProviderContextValue['dir'],\n) {\n  const leftToRightTransform = `translate3d(var(${sizeVar}), 0, 0)`;\n  const rightToLeftTransform = `translate3d(calc(var(${sizeVar}) * -1), 0, 0)`;\n  const bottomToTopTransform = `translate3d(0, var(${sizeVar}), 0)`;\n\n  if (position === 'start') {\n    return dir === 'ltr' ? rightToLeftTransform : leftToRightTransform;\n  }\n\n  if (position === 'end') {\n    return dir === 'ltr' ? leftToRightTransform : rightToLeftTransform;\n  }\n\n  if (position === 'bottom') {\n    return bottomToTopTransform;\n  }\n\n  return 'translate3d(0, 0, 0)';\n}\n\n/**\n * @internal\n */\nexport const InlineDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n  const keyframes: Keyframe[] = [\n    {\n      /**\n       * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n       * The work will be done in the #32817\n       */\n      transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n      opacity: 0,\n    },\n    { transform: 'translate3d(0, 0, 0)', opacity: 1 },\n  ];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing: motionTokens.curveDecelerateMid,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing: motionTokens.curveAccelerateMin,\n    },\n  };\n});\n\n/**\n * @internal\n */\nexport const OverlayDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n  const keyframes: Keyframe[] = [\n    {\n      /**\n       * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n       * The work will be done in the #32817\n       */\n      transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n      boxShadow: `0px ${tokens.colorTransparentBackground}`,\n      opacity: 0,\n    },\n    {\n      transform: 'translate3d(0, 0, 0)',\n      boxShadow: tokens.shadow64,\n      opacity: 1,\n    },\n  ];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing: motionTokens.curveDecelerateMid,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing: motionTokens.curveAccelerateMin,\n    },\n  };\n});\n\n/**\n * @internal\n */\nexport const OverlaySurfaceBackdropMotion = createPresenceComponent(({ size }: OverlayDrawerSurfaceMotionParams) => {\n  const keyframes = [{ opacity: 0 }, { opacity: 1 }];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      easing: motionTokens.curveLinear,\n      duration,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      easing: motionTokens.curveLinear,\n      duration,\n    },\n  };\n});\n"],"names":["createPresenceComponent","motionTokens","tokens","drawerCSSVars","durations","small","durationGentle","medium","durationSlow","large","durationSlower","full","durationUltraSlow","getPositionTransform","position","sizeVar","dir","leftToRightTransform","rightToLeftTransform","bottomToTopTransform","InlineDrawerMotion","size","keyframes","transform","drawerSizeVar","opacity","duration","enter","easing","curveDecelerateMid","exit","reverse","curveAccelerateMin","OverlayDrawerMotion","boxShadow","colorTransparentBackground","shadow64","OverlaySurfaceBackdropMotion","curveLinear"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,uBAAuB,EAAEC,YAAY,QAAQ,yBAAyB;AAC/E,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,SAASC,aAAa,QAAQ,+BAA+B;AAO7D,MAAMC,YAAkE;IACtEC,OAAOJ,aAAaK,cAAc;IAClCC,QAAQN,aAAaO,YAAY;IACjCC,OAAOR,aAAaS,cAAc;IAClCC,MAAMV,aAAaW,iBAAiB;AACtC;AAEA;;CAEC,GACD,OAAO,SAASC,qBACdC,QAAqC,EACrCC,OAAe,EACfC,GAAsC;IAEtC,MAAMC,uBAAuB,CAAC,gBAAgB,EAAEF,QAAQ,QAAQ,CAAC;IACjE,MAAMG,uBAAuB,CAAC,qBAAqB,EAAEH,QAAQ,cAAc,CAAC;IAC5E,MAAMI,uBAAuB,CAAC,mBAAmB,EAAEJ,QAAQ,KAAK,CAAC;IAEjE,IAAID,aAAa,SAAS;QACxB,OAAOE,QAAQ,QAAQE,uBAAuBD;IAChD;IAEA,IAAIH,aAAa,OAAO;QACtB,OAAOE,QAAQ,QAAQC,uBAAuBC;IAChD;IAEA,IAAIJ,aAAa,UAAU;QACzB,OAAOK;IACT;IAEA,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,MAAMC,qBAAqBpB,wBAA4C,CAAC,EAAEc,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACpG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUX,cAAcqB,aAAa,EAAER;YACvES,SAAS;QACX;QACA;YAAEF,WAAW;YAAwBE,SAAS;QAAE;KACjD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ3B,aAAa4B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ3B,aAAa+B,kBAAkB;QACzC;IACF;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMC,sBAAsBjC,wBAA4C,CAAC,EAAEc,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACrG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUX,cAAcqB,aAAa,EAAER;YACvEkB,WAAW,CAAC,IAAI,EAAEhC,OAAOiC,0BAA0B,CAAC,CAAC;YACrDV,SAAS;QACX;QACA;YACEF,WAAW;YACXW,WAAWhC,OAAOkC,QAAQ;YAC1BX,SAAS;QACX;KACD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ3B,aAAa4B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ3B,aAAa+B,kBAAkB;QACzC;IACF;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMK,+BAA+BrC,wBAAwB,CAAC,EAAEqB,IAAI,EAAoC;IAC7G,MAAMC,YAAY;QAAC;YAAEG,SAAS;QAAE;QAAG;YAAEA,SAAS;QAAE;KAAE;IAClD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAM,QAAQ3B,aAAaqC,WAAW;YAChCZ;QACF;QACAI,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCH,QAAQ3B,aAAaqC,WAAW;YAChCZ;QACF;IACF;AACF,GAAG"}
+{"version":3,"sources":["../src/shared/drawerMotions.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';\nimport { tokens } from '@fluentui/react-theme';\nimport { ProviderContextValue_unstable as FluentProviderContextValue } from '@fluentui/react-shared-contexts';\n\nimport type { DrawerBaseProps } from './DrawerBase.types';\nimport { drawerCSSVars } from './useDrawerBaseStyles.styles';\n\nexport type DrawerMotionParams = Required<\n  Pick<DrawerBaseProps, 'size' | 'position'> & Pick<FluentProviderContextValue, 'dir'>\n>;\nexport type OverlayDrawerSurfaceMotionParams = Required<Pick<DrawerBaseProps, 'size'>>;\n\nconst durations: Record<NonNullable<DrawerBaseProps['size']>, number> = {\n  small: motionTokens.durationGentle,\n  medium: motionTokens.durationSlow,\n  large: motionTokens.durationSlower,\n  full: motionTokens.durationUltraSlow,\n};\n\n/**\n * @internal\n */\nexport function getPositionTransform(\n  position: DrawerBaseProps['position'],\n  sizeVar: string,\n  dir: FluentProviderContextValue['dir'],\n) {\n  const leftToRightTransform = `translate3d(var(${sizeVar}), 0, 0)`;\n  const rightToLeftTransform = `translate3d(calc(var(${sizeVar}) * -1), 0, 0)`;\n  const bottomToTopTransform = `translate3d(0, var(${sizeVar}), 0)`;\n\n  if (position === 'start') {\n    return dir === 'ltr' ? rightToLeftTransform : leftToRightTransform;\n  }\n\n  if (position === 'end') {\n    return dir === 'ltr' ? leftToRightTransform : rightToLeftTransform;\n  }\n\n  if (position === 'bottom') {\n    return bottomToTopTransform;\n  }\n\n  return 'translate3d(0, 0, 0)';\n}\n\n/**\n * @internal\n */\nexport const InlineDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n  const keyframes: Keyframe[] = [\n    {\n      /**\n       * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n       * The work will be done in the #32817\n       */\n      transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n      opacity: 0,\n    },\n    { transform: 'translate3d(0, 0, 0)', opacity: 1 },\n  ];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing: motionTokens.curveDecelerateMid,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing: motionTokens.curveAccelerateMin,\n    },\n  };\n});\n\n/**\n * @internal\n */\nexport const OverlayDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n  const keyframes: Keyframe[] = [\n    {\n      /**\n       * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n       * The work will be done in the #32817\n       */\n      transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n      boxShadow: `0px ${tokens.colorTransparentBackground}`,\n      opacity: 0,\n    },\n    {\n      transform: 'translate3d(0, 0, 0)',\n      boxShadow: tokens.shadow64,\n      opacity: 1,\n    },\n  ];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing: motionTokens.curveDecelerateMid,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing: motionTokens.curveAccelerateMin,\n    },\n  };\n});\n\n/**\n * @internal\n */\nexport const OverlaySurfaceBackdropMotion = createPresenceComponent(({ size }: OverlayDrawerSurfaceMotionParams) => {\n  const keyframes = [{ opacity: 0 }, { opacity: 1 }];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      easing: motionTokens.curveLinear,\n      duration,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      easing: motionTokens.curveLinear,\n      duration,\n    },\n  };\n});\n"],"names":["createPresenceComponent","motionTokens","tokens","drawerCSSVars","durations","small","durationGentle","medium","durationSlow","large","durationSlower","full","durationUltraSlow","getPositionTransform","position","sizeVar","dir","leftToRightTransform","rightToLeftTransform","bottomToTopTransform","InlineDrawerMotion","size","keyframes","transform","drawerSizeVar","opacity","duration","enter","easing","curveDecelerateMid","exit","reverse","curveAccelerateMin","OverlayDrawerMotion","boxShadow","colorTransparentBackground","shadow64","OverlaySurfaceBackdropMotion","curveLinear"],"mappings":"AAAA,SAASA,uBAAuB,EAAEC,YAAY,QAAQ,yBAAyB;AAC/E,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,SAASC,aAAa,QAAQ,+BAA+B;AAO7D,MAAMC,YAAkE;IACtEC,OAAOJ,aAAaK,cAAc;IAClCC,QAAQN,aAAaO,YAAY;IACjCC,OAAOR,aAAaS,cAAc;IAClCC,MAAMV,aAAaW,iBAAiB;AACtC;AAEA;;CAEC,GACD,OAAO,SAASC,qBACdC,QAAqC,EACrCC,OAAe,EACfC,GAAsC;IAEtC,MAAMC,uBAAuB,CAAC,gBAAgB,EAAEF,QAAQ,QAAQ,CAAC;IACjE,MAAMG,uBAAuB,CAAC,qBAAqB,EAAEH,QAAQ,cAAc,CAAC;IAC5E,MAAMI,uBAAuB,CAAC,mBAAmB,EAAEJ,QAAQ,KAAK,CAAC;IAEjE,IAAID,aAAa,SAAS;QACxB,OAAOE,QAAQ,QAAQE,uBAAuBD;IAChD;IAEA,IAAIH,aAAa,OAAO;QACtB,OAAOE,QAAQ,QAAQC,uBAAuBC;IAChD;IAEA,IAAIJ,aAAa,UAAU;QACzB,OAAOK;IACT;IAEA,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,MAAMC,qBAAqBpB,wBAA4C,CAAC,EAAEc,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACpG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUX,cAAcqB,aAAa,EAAER;YACvES,SAAS;QACX;QACA;YAAEF,WAAW;YAAwBE,SAAS;QAAE;KACjD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ3B,aAAa4B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ3B,aAAa+B,kBAAkB;QACzC;IACF;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMC,sBAAsBjC,wBAA4C,CAAC,EAAEc,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACrG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUX,cAAcqB,aAAa,EAAER;YACvEkB,WAAW,CAAC,IAAI,EAAEhC,OAAOiC,0BAA0B,EAAE;YACrDV,SAAS;QACX;QACA;YACEF,WAAW;YACXW,WAAWhC,OAAOkC,QAAQ;YAC1BX,SAAS;QACX;KACD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ3B,aAAa4B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ3B,aAAa+B,kBAAkB;QACzC;IACF;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMK,+BAA+BrC,wBAAwB,CAAC,EAAEqB,IAAI,EAAoC;IAC7G,MAAMC,YAAY;QAAC;YAAEG,SAAS;QAAE;QAAG;YAAEA,SAAS;QAAE;KAAE;IAClD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAM,QAAQ3B,aAAaqC,WAAW;YAChCZ;QACF;QACAI,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCH,QAAQ3B,aAAaqC,WAAW;YAChCZ;QACF;IACF;AACF,GAAG"}