Initial commit

node_modules/@fluentui/react-drawer/lib/components/OverlayDrawer/OverlayDrawer.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useDrawerContextValue } from '../../contexts/drawerContext';
+import { useOverlayDrawer_unstable } from './useOverlayDrawer';
+import { renderOverlayDrawer_unstable } from './renderOverlayDrawer';
+import { useOverlayDrawerStyles_unstable } from './useOverlayDrawerStyles.styles';
+/**
+ * OverlayDrawer contains supplementary content and are used for complex creation, edit, or management experiences.
+ */ export const OverlayDrawer = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useOverlayDrawer_unstable(props, ref);
+    const contextValue = useDrawerContextValue();
+    useOverlayDrawerStyles_unstable(state);
+    useCustomStyleHook_unstable('useDrawerOverlayStyles_unstable')(state);
+    useCustomStyleHook_unstable('useOverlayDrawerStyles_unstable')(state);
+    return renderOverlayDrawer_unstable(state, contextValue);
+});
+OverlayDrawer.displayName = 'OverlayDrawer';

node_modules/@fluentui/react-drawer/lib/components/OverlayDrawer/OverlayDrawer.js.map

@@ -0,0 +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"}

node_modules/@fluentui/react-drawer/lib/components/OverlayDrawer/OverlayDrawer.types.js

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering OverlayDrawer
+ */ export { };

node_modules/@fluentui/react-drawer/lib/components/OverlayDrawer/OverlayDrawer.types.js.map

@@ -0,0 +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"}

node_modules/@fluentui/react-drawer/lib/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { useDialogSurface_unstable, useDialogSurfaceContextValues_unstable, renderDialogSurface_unstable } from '@fluentui/react-dialog';
+import { useOverlayDrawerSurfaceStyles_unstable } from './useOverlayDrawerSurfaceStyles.styles';
+/**
+ * @internal
+ * OverlayDrawerSurface is a proxy for DialogSurface as is only meant to be used internally for Drawer.
+ */ export const OverlayDrawerSurface = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const dialogSurfaceState = useDialogSurface_unstable({
+        ...props,
+        /**
+       * Drawer accepts a `div` or `aside` element type, but Dialog only accepts a `div` element type.
+       * We need to cast the ref to a `div` element type to not break Dialog's ref type.
+       *
+       * FIXME: Evaluate the possibility to remove this cast when Dialog is refactored to accept `aside` elements.
+       */ as: props.as
+    }, ref);
+    const dialogSurfaceContextValues = useDialogSurfaceContextValues_unstable(dialogSurfaceState);
+    useOverlayDrawerSurfaceStyles_unstable(dialogSurfaceState);
+    return renderDialogSurface_unstable(dialogSurfaceState, dialogSurfaceContextValues);
+});
+OverlayDrawerSurface.displayName = 'OverlayDrawerSurface';

node_modules/@fluentui/react-drawer/lib/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.js.map

@@ -0,0 +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"}

node_modules/@fluentui/react-drawer/lib/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.types.js

@@ -0,0 +1,3 @@
+/**
+ * OverlayDrawerSurface Props
+ */ export { };

node_modules/@fluentui/react-drawer/lib/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.types.js.map

@@ -0,0 +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"}

node_modules/@fluentui/react-drawer/lib/components/OverlayDrawer/OverlayDrawerSurface/index.js

@@ -0,0 +1 @@
+export { OverlayDrawerSurface } from './OverlayDrawerSurface';

node_modules/@fluentui/react-drawer/lib/components/OverlayDrawer/OverlayDrawerSurface/index.js.map

@@ -0,0 +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"}

node_modules/@fluentui/react-drawer/lib/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js

@@ -0,0 +1,26 @@
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+/**
+ * Styles for the backdrop slot
+ */
+const useBackdropResetStyles = /*#__PURE__*/__resetStyles("rmnljus", null, [".rmnljus{inset:0px;position:fixed;background-color:rgba(0, 0, 0, 0.4);}"]);
+const useBackdropStyles = /*#__PURE__*/__styles({
+  nested: {
+    De3pzq: "f1c21dwh"
+  }
+}, {
+  d: [".f1c21dwh{background-color:var(--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;
+};

node_modules/@fluentui/react-drawer/lib/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js.map

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

node_modules/@fluentui/react-drawer/lib/components/OverlayDrawer/index.js

@@ -0,0 +1,4 @@
+export { OverlayDrawer } from './OverlayDrawer';
+export { renderOverlayDrawer_unstable } from './renderOverlayDrawer';
+export { useOverlayDrawer_unstable } from './useOverlayDrawer';
+export { overlayDrawerClassNames, useOverlayDrawerStyles_unstable } from './useOverlayDrawerStyles.styles';

node_modules/@fluentui/react-drawer/lib/components/OverlayDrawer/index.js.map

@@ -0,0 +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"}

node_modules/@fluentui/react-drawer/lib/components/OverlayDrawer/renderOverlayDrawer.js

@@ -0,0 +1,14 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { DrawerProvider } from '../../contexts/drawerContext';
+/**
+ * Render the final JSX of OverlayDrawer
+ */ export const renderOverlayDrawer_unstable = (state, contextValue)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(DrawerProvider, {
+        value: contextValue,
+        children: /*#__PURE__*/ _jsx(state.dialog, {
+            children: /*#__PURE__*/ _jsx(state.root, {})
+        })
+    });
+};

node_modules/@fluentui/react-drawer/lib/components/OverlayDrawer/renderOverlayDrawer.js.map

@@ -0,0 +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"}

node_modules/@fluentui/react-drawer/lib/components/OverlayDrawer/useOverlayDrawer.js

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { Dialog } from '@fluentui/react-dialog';
+import { slot } from '@fluentui/react-utilities';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { toMountNodeProps } from '@fluentui/react-portal';
+import { OverlayDrawerMotion, OverlaySurfaceBackdropMotion } from '../../shared/drawerMotions';
+import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
+import { OverlayDrawerSurface } from './OverlayDrawerSurface';
+import { mergePresenceSlots } from '../../shared/drawerMotionUtils';
+const STATIC_MOTION = {
+    active: true,
+    canRender: true,
+    ref: /*#__PURE__*/ React.createRef(),
+    type: 'idle'
+};
+/**
+ * Create the state required to render OverlayDrawer.
+ *
+ * The returned state can be modified with hooks such as useOverlayDrawerStyles_unstable,
+ * before being passed to renderOverlayDrawer_unstable.
+ *
+ * @param props - props from this instance of OverlayDrawer
+ * @param ref - reference to root HTMLElement of OverlayDrawer
+ */ export const useOverlayDrawer_unstable = (props, ref)=>{
+    const { open, size, position } = useDrawerDefaultProps(props);
+    const { backdropMotion, modalType = 'modal', inertTrapFocus, onOpenChange, surfaceMotion, mountNode } = props;
+    const { dir, targetDocument } = useFluent();
+    const { element: mountNodeElement } = toMountNodeProps(mountNode);
+    const hasMountNodeElement = Boolean(mountNodeElement && (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body) !== mountNodeElement);
+    const backdropProps = slot.resolveShorthand(props.backdrop);
+    const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;
+    const root = slot.always({
+        ...props,
+        ref,
+        backdrop: hasCustomBackdrop ? {
+            ...backdropProps
+        } : null,
+        backdropMotion: mergePresenceSlots(backdropMotion, OverlaySurfaceBackdropMotion, {
+            size
+        })
+    }, {
+        /**
+       * Drawer accepts a `div` or `aside` element type, but Dialog only accepts a `div` element type.
+       * We need to cast the ref to a `div` element type to not break Dialog's ref type.
+       */ elementType: OverlayDrawerSurface
+    });
+    const dialog = slot.always({
+        open,
+        onOpenChange,
+        inertTrapFocus,
+        modalType,
+        surfaceMotion: mergePresenceSlots(surfaceMotion, OverlayDrawerMotion, {
+            position,
+            size,
+            dir
+        }),
+        /**
+       * children is not needed here because we construct the children in the render function,
+       * but it's required by DialogProps
+       */ children: null
+    }, {
+        elementType: Dialog
+    });
+    return {
+        components: {
+            root: OverlayDrawerSurface,
+            dialog: Dialog
+        },
+        root,
+        dialog,
+        open,
+        size,
+        position,
+        hasMountNodeElement,
+        // Deprecated props
+        mountNode,
+        motion: STATIC_MOTION
+    };
+};

node_modules/@fluentui/react-drawer/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.js

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { __resetStyles, __styles, 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 = /*#__PURE__*/__resetStyles("r7dfyj8", "rmx02j7", {
+  r: [".r7dfyj8{overflow:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:fixed;top:0;bottom:0;}", ".r7dfyj8:focus{outline-style:none;}", ".r7dfyj8:focus-visible{outline-style:none;}", ".r7dfyj8[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r7dfyj8[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".rmx02j7{overflow:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:fixed;top:0;bottom:0;}", ".rmx02j7:focus{outline-style:none;}", ".rmx02j7:focus-visible{outline-style:none;}", ".rmx02j7[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".rmx02j7[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
+  s: ["@media (forced-colors: active){.r7dfyj8[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media (forced-colors: active){.rmx02j7[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"]
+});
+const useDrawerRootStyles = /*#__PURE__*/__styles({
+  start: {},
+  end: {},
+  bottom: {
+    Bhzewxz: "f198g47y",
+    Bqenvij: "fub80nq",
+    a9b677: "fr97h3j"
+  },
+  absolute: {
+    qhf8xq: "f1euv43f"
+  }
+}, {
+  d: [".f198g47y{top:auto;}", ".fub80nq{height:var(--fui-Drawer--size);}", ".fr97h3j{width:100vw;}", ".f1euv43f{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;
+};

node_modules/@fluentui/react-drawer/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","__resetStyles","__styles","mergeClasses","createFocusOutlineStyle","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","overlayDrawerClassNames","root","backdrop","useDrawerResetStyles","r","s","useDrawerRootStyles","start","end","bottom","Bhzewxz","Bqenvij","a9b677","absolute","qhf8xq","d","useOverlayDrawerStyles_unstable","state","baseClassNames","resetStyles","rootStyles","absoluteStyles","hasMountNodeElement","className","position"],"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const overlayDrawerClassNames = {\n    root: 'fui-OverlayDrawer',\n    backdrop: 'fui-OverlayDrawer__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useDrawerResetStyles = makeResetStyles({\n    ...createFocusOutlineStyle(),\n    ...drawerDefaultStyles,\n    position: 'fixed',\n    top: 0,\n    bottom: 0\n});\nconst useDrawerRootStyles = makeStyles({\n    /* Positioning */ 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 * Apply styling to the OverlayDrawer slots based on the state\n */ export const useOverlayDrawerStyles_unstable = (state)=>{\n    'use no memo';\n    const baseClassNames = useDrawerBaseClassNames(state);\n    const resetStyles = useDrawerResetStyles();\n    const rootStyles = useDrawerRootStyles();\n    const absoluteStyles = state.hasMountNodeElement && rootStyles.absolute;\n    const backdrop = state.root.backdrop;\n    state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], absoluteStyles, state.root.className);\n    if (backdrop) {\n        backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, absoluteStyles, backdrop.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,yCAAyC;AACrH,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAGV,aAAA;EAAAW,CAAA;EAAAC,CAAA;AAAA,CAMhC,CAAC;AACF,MAAMC,mBAAmB,gBAAGZ,QAAA;EAAAa,KAAA;EAAAC,GAAA;EAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAW3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACb,MAAMC,cAAc,GAAGnB,uBAAuB,CAACkB,KAAK,CAAC;EACrD,MAAME,WAAW,GAAGhB,oBAAoB,CAAC,CAAC;EAC1C,MAAMiB,UAAU,GAAGd,mBAAmB,CAAC,CAAC;EACxC,MAAMe,cAAc,GAAGJ,KAAK,CAACK,mBAAmB,IAAIF,UAAU,CAACP,QAAQ;EACvE,MAAMX,QAAQ,GAAGe,KAAK,CAAChB,IAAI,CAACC,QAAQ;EACpCe,KAAK,CAAChB,IAAI,CAACsB,SAAS,GAAG5B,YAAY,CAACK,uBAAuB,CAACC,IAAI,EAAEiB,cAAc,EAAEC,WAAW,EAAEC,UAAU,CAACH,KAAK,CAACO,QAAQ,CAAC,EAAEH,cAAc,EAAEJ,KAAK,CAAChB,IAAI,CAACsB,SAAS,CAAC;EAChK,IAAIrB,QAAQ,EAAE;IACVA,QAAQ,CAACqB,SAAS,GAAG5B,YAAY,CAACK,uBAAuB,CAACE,QAAQ,EAAEmB,cAAc,EAAEnB,QAAQ,CAACqB,SAAS,CAAC;EAC3G;EACA,OAAON,KAAK;AAChB,CAAC","ignoreList":[]}