@fluentui/react-drawer 9.0.0-beta.9 → 9.0.1

package/lib/components/InlineDrawer/renderInlineDrawer.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["renderInlineDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { InlineDrawerState, InlineDrawerSlots } from './InlineDrawer.types';\n\n/**\n * Render the final JSX of InlineDrawer\n */\nexport const renderInlineDrawer_unstable = (state: InlineDrawerState) => {\n  if (!state.motion.canRender) {\n    return null;\n  }\n\n  assertSlots<InlineDrawerSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderInlineDrawer_unstable","state","motion","canRender","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C,IAAI,CAACA,MAAMC,MAAM,CAACC,SAAS,EAAE;QAC3B,OAAO;IACT;IAEAJ,YAA+BE;IAE/B,qBAAO,KAACA,MAAMG,IAAI;AACpB,EAAE"}

package/lib/components/InlineDrawer/useInlineDrawer.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';
+import { useMotion } from '@fluentui/react-motion-preview';
+import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
+/**
+ * Create the state required to render InlineDrawer.
+ *
+ * The returned state can be modified with hooks such as useInlineDrawerStyles_unstable,
+ * before being passed to renderInlineDrawer_unstable.
+ *
+ * @param props - props from this instance of InlineDrawer
+ * @param ref - reference to root HTMLElement of InlineDrawer
+ */ export const useInlineDrawer_unstable = (props, ref)=>{
+    const { size, position, open } = useDrawerDefaultProps(props);
+    const { separator = false } = props;
+    const motion = useMotion(open);
+    return {
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ...props,
+            ref: useMergedRefs(ref, motion.ref)
+        }), {
+            elementType: 'div'
+        }),
+        size,
+        position,
+        separator,
+        motion
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useInlineDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useMotion } from '@fluentui/react-motion-preview';\n\nimport type { InlineDrawerProps, InlineDrawerState } from './InlineDrawer.types';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\n\n/**\n * Create the state required to render InlineDrawer.\n *\n * The returned state can be modified with hooks such as useInlineDrawerStyles_unstable,\n * before being passed to renderInlineDrawer_unstable.\n *\n * @param props - props from this instance of InlineDrawer\n * @param ref - reference to root HTMLElement of InlineDrawer\n */\nexport const useInlineDrawer_unstable = (\n  props: InlineDrawerProps,\n  ref: React.Ref<HTMLDivElement>,\n): InlineDrawerState => {\n  const { size, position, open } = useDrawerDefaultProps(props);\n  const { separator = false } = props;\n\n  const motion = useMotion<HTMLDivElement>(open);\n\n  return {\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ...props,\n        ref: useMergedRefs(ref, motion.ref),\n      }),\n      { elementType: 'div' },\n    ),\n\n    size,\n    position,\n    separator,\n    motion,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMergedRefs","useMotion","useDrawerDefaultProps","useInlineDrawer_unstable","props","ref","size","position","open","separator","motion","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAC1F,SAASC,SAAS,QAAQ,iCAAiC;AAG3D,SAASC,qBAAqB,QAAQ,qCAAqC;AAE3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGN,sBAAsBE;IACvD,MAAM,EAAEK,YAAY,KAAK,EAAE,GAAGL;IAE9B,MAAMM,SAAST,UAA0BO;IAEzC,OAAO;QACLG,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMb,KAAKc,MAAM,CACff,yBAAyB,OAAO;YAC9B,GAAGM,KAAK;YACRC,KAAKL,cAAcK,KAAKK,OAAOL,GAAG;QACpC,IACA;YAAES,aAAa;QAAM;QAGvBR;QACAC;QACAE;QACAC;IACF;AACF,EAAE"}

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

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';
+import { useMotionClassNames } from '@fluentui/react-motion-preview';
+export const inlineDrawerClassNames = {
+  root: 'fui-InlineDrawer'
+};
+const useDrawerResetStyles = /*#__PURE__*/__resetStyles("r46ju4x", null, [".r46ju4x{overflow-x:hidden;overflow-y: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:relative;}"]);
+/**
+ * Styles for the root slot
+ */
+const separatorValues = ['1px', 'solid', tokens.colorNeutralBackground3];
+const useDrawerRootStyles = /*#__PURE__*/__styles({
+  separatorStart: {
+    Bekrc4i: ["f1hqa2wf", "finvdd3"],
+    vrafjx: ["fcdblym", "fjik90z"],
+    h3c5rm: ["fa8zu9y", "f17e9lqh"]
+  },
+  separatorEnd: {
+    ibv6hh: ["finvdd3", "f1hqa2wf"],
+    wvpqe5: ["fjik90z", "fcdblym"],
+    zhjwy3: ["f17e9lqh", "fa8zu9y"]
+  },
+  start: {
+    Bz10aip: "f1d8gkik"
+  },
+  end: {
+    Bz10aip: "f1h1g6jt"
+  }
+}, {
+  d: [".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fa8zu9y{border-right-color:var(--colorNeutralBackground3);}", ".f17e9lqh{border-left-color:var(--colorNeutralBackground3);}", ".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}", ".f1h1g6jt{transform:translate3D(var(--fui-Drawer--size), 0, 0);}"]
+});
+const useDrawerMotionStyles = /*#__PURE__*/__styles({
+  "default": {
+    abs64n: "fk73vx1",
+    Bmy1vo4: "f15rjlgw",
+    Es3by: "f1blt7p"
+  },
+  enter: {
+    abs64n: "f5p0z4x",
+    Bz10aip: "f87uvqx"
+  }
+}, {
+  d: [".fk73vx1{opacity:0;}", ".f15rjlgw{transition-property:opacity,transform;}", ".f1blt7p{will-change:opacity,transform;}", ".f5p0z4x{opacity:1;}", ".f87uvqx{transform:translate3D(0, 0, 0);}"]
+});
+/**
+ * Apply styling to the InlineDrawer slots based on the state
+ */
+export const useInlineDrawerStyles_unstable = state => {
+  const resetStyles = useDrawerResetStyles();
+  const baseClassNames = useDrawerBaseClassNames(state);
+  const rootStyles = useDrawerRootStyles();
+  const motionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());
+  const separatorClass = React.useMemo(() => {
+    if (!state.separator) {
+      return undefined;
+    }
+    return state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd;
+  }, [state.position, state.separator, rootStyles.separatorEnd, rootStyles.separatorStart]);
+  state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, separatorClass, rootStyles[state.position], motionClassNames, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useInlineDrawerStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","__resetStyles","__styles","mergeClasses","shorthands","tokens","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","useMotionClassNames","inlineDrawerClassNames","root","useDrawerResetStyles","separatorValues","colorNeutralBackground3","useDrawerRootStyles","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","start","Bz10aip","end","d","useDrawerMotionStyles","abs64n","Bmy1vo4","Es3by","enter","useInlineDrawerStyles_unstable","state","resetStyles","baseClassNames","rootStyles","motionClassNames","motion","separatorClass","useMemo","separator","undefined","position","className"],"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nimport { useMotionClassNames } from '@fluentui/react-motion-preview';\nexport const inlineDrawerClassNames = {\n    root: 'fui-InlineDrawer'\n};\nconst useDrawerResetStyles = makeResetStyles({\n    ...drawerDefaultStyles,\n    position: 'relative'\n});\n/**\n * Styles for the root slot\n */ const separatorValues = [\n    '1px',\n    'solid',\n    tokens.colorNeutralBackground3\n];\nconst useDrawerRootStyles = makeStyles({\n    /* Separator */ separatorStart: {\n        ...shorthands.borderRight(...separatorValues)\n    },\n    separatorEnd: {\n        ...shorthands.borderLeft(...separatorValues)\n    },\n    /* Positioning */ start: {\n        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`\n    },\n    end: {\n        transform: `translate3D(var(${drawerCSSVars.drawerSizeVar}), 0, 0)`\n    }\n});\nconst useDrawerMotionStyles = makeStyles({\n    default: {\n        opacity: 0,\n        transitionProperty: 'opacity, transform',\n        willChange: 'opacity, transform'\n    },\n    enter: {\n        opacity: 1,\n        transform: 'translate3D(0, 0, 0)'\n    }\n});\n/**\n * Apply styling to the InlineDrawer slots based on the state\n */ export const useInlineDrawerStyles_unstable = (state)=>{\n    const resetStyles = useDrawerResetStyles();\n    const baseClassNames = useDrawerBaseClassNames(state);\n    const rootStyles = useDrawerRootStyles();\n    const motionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());\n    const separatorClass = React.useMemo(()=>{\n        if (!state.separator) {\n            return undefined;\n        }\n        return state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd;\n    }, [\n        state.position,\n        state.separator,\n        rootStyles.separatorEnd,\n        rootStyles.separatorStart\n    ]);\n    state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, separatorClass, rootStyles[state.position], motionClassNames, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,yCAAyC;AACrH,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGX,aAAA,iWAG5B,CAAC;AACF;AACA;AACA;AAAI,MAAMY,eAAe,GAAG,CACxB,KAAK,EACL,OAAO,EACPR,MAAM,CAACS,uBAAuB,CACjC;AACD,MAAMC,mBAAmB,gBAAGb,QAAA;EAAAc,cAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAa3B,CAAC;AACF,MAAMC,qBAAqB,gBAAG1B,QAAA;EAAA;IAAA2B,MAAA;IAAAC,OAAA;IAAAC,KAAA;EAAA;EAAAC,KAAA;IAAAH,MAAA;IAAAJ,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAU7B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,WAAW,GAAGvB,oBAAoB,CAAC,CAAC;EAC1C,MAAMwB,cAAc,GAAG5B,uBAAuB,CAAC0B,KAAK,CAAC;EACrD,MAAMG,UAAU,GAAGtB,mBAAmB,CAAC,CAAC;EACxC,MAAMuB,gBAAgB,GAAG7B,mBAAmB,CAACyB,KAAK,CAACK,MAAM,EAAEX,qBAAqB,CAAC,CAAC,CAAC;EACnF,MAAMY,cAAc,GAAGxC,KAAK,CAACyC,OAAO,CAAC,MAAI;IACrC,IAAI,CAACP,KAAK,CAACQ,SAAS,EAAE;MAClB,OAAOC,SAAS;IACpB;IACA,OAAOT,KAAK,CAACU,QAAQ,KAAK,OAAO,GAAGP,UAAU,CAACrB,cAAc,GAAGqB,UAAU,CAACjB,YAAY;EAC3F,CAAC,EAAE,CACCc,KAAK,CAACU,QAAQ,EACdV,KAAK,CAACQ,SAAS,EACfL,UAAU,CAACjB,YAAY,EACvBiB,UAAU,CAACrB,cAAc,CAC5B,CAAC;EACFkB,KAAK,CAACvB,IAAI,CAACkC,SAAS,GAAG1C,YAAY,CAACO,sBAAsB,CAACC,IAAI,EAAEwB,WAAW,EAAEC,cAAc,EAAEI,cAAc,EAAEH,UAAU,CAACH,KAAK,CAACU,QAAQ,CAAC,EAAEN,gBAAgB,EAAEJ,KAAK,CAACvB,IAAI,CAACkC,SAAS,CAAC;EACjL,OAAOX,KAAK;AAChB,CAAC"}

package/lib/components/OverlayDrawer/OverlayDrawer.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+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);
+    useOverlayDrawerStyles_unstable(state);
+    useCustomStyleHook_unstable('useDrawerOverlayStyles_unstable')(state);
+    useCustomStyleHook_unstable('useOverlayDrawerStyles_unstable')(state);
+    return renderOverlayDrawer_unstable(state);
+});
+OverlayDrawer.displayName = 'OverlayDrawer';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["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 { 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\n  useOverlayDrawerStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerOverlayStyles_unstable')(state);\n  useCustomStyleHook_unstable('useOverlayDrawerStyles_unstable')(state);\n\n  return renderOverlayDrawer_unstable(state);\n});\n\nOverlayDrawer.displayName = 'OverlayDrawer';\n"],"names":["React","useCustomStyleHook_unstable","useOverlayDrawer_unstable","renderOverlayDrawer_unstable","useOverlayDrawerStyles_unstable","OverlayDrawer","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAGlF;;CAEC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQP,0BAA0BK,OAAOC;IAE/CJ,gCAAgCK;IAChCR,4BAA4B,mCAAmCQ;IAC/DR,4BAA4B,mCAAmCQ;IAE/D,OAAON,6BAA6BM;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["OverlayDrawer.types.ts"],"sourcesContent":["import type { DialogProps } from '@fluentui/react-dialog';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\nimport { OverlayDrawerSurfaceProps } from './OverlayDrawerSurface';\n\n/**\n * OverlayDrawer slots\n */\nexport type OverlayDrawerSlots = {\n  /**\n   * Slot for the root element.\n   */\n  root: Slot<OverlayDrawerSurfaceProps>;\n};\n\n/**\n * OverlayDrawer internal slots for when using with composition API\n */\nexport type OverlayDrawerInternalSlots = OverlayDrawerSlots & {\n  /**\n   * Slot for the dialog component that wraps the drawer.\n   */\n  dialog: Slot<DialogProps>;\n};\n\n/**\n * OverlayDrawer Props\n */\nexport type OverlayDrawerProps = ComponentProps<OverlayDrawerSlots> &\n  Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus' | 'defaultOpen'> &\n  DrawerBaseProps;\n\n/**\n * State used in rendering OverlayDrawer\n */\nexport type OverlayDrawerState = Omit<ComponentState<OverlayDrawerInternalSlots>, 'backdrop'> &\n  Required<DrawerBaseState>;\n"],"names":[],"mappings":"AAAA,WAqC4B"}

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

@@ -0,0 +1,13 @@
+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, ref);
+    const dialogSurfaceContextValues = useDialogSurfaceContextValues_unstable(dialogSurfaceState);
+    useOverlayDrawerSurfaceStyles_unstable(dialogSurfaceState);
+    return renderDialogSurface_unstable(dialogSurfaceState, dialogSurfaceContextValues);
+});
+OverlayDrawerSurface.displayName = 'OverlayDrawerSurface';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["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(props, ref);\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","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,0BAA0BM,OAAOC;IAC5D,MAAME,6BAA6BR,uCAAuCO;IAE1EL,uCAAuCK;IAEvC,OAAON,6BAA6BM,oBAAoBC;AAC1D,GAAG;AAEHL,qBAAqBM,WAAW,GAAG"}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["OverlayDrawerSurface.types.ts"],"sourcesContent":["import type { DialogSurfaceSlots, DialogSurfaceState } from '@fluentui/react-dialog';\nimport type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\n\n/**\n * OverlayDrawerSurface slots\n */\nexport type OverlayDrawerSurfaceSlots = DialogSurfaceSlots;\n\n/**\n * OverlayDrawerSurface Props\n */\nexport type OverlayDrawerSurfaceProps = ComponentProps<OverlayDrawerSurfaceSlots>;\n\n/**\n * State used in rendering OverlayDrawerSurface\n */\nexport type OverlayDrawerSurfaceState = ComponentState<OverlayDrawerSurfaceSlots> & DialogSurfaceState;\n"],"names":[],"mappings":"AAAA,WAgBuG"}

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

@@ -0,0 +1,2 @@
+export * from './OverlayDrawerSurface';
+export * from './OverlayDrawerSurface.types';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './OverlayDrawerSurface';\nexport * from './OverlayDrawerSurface.types';\n"],"names":[],"mappings":"AAAA,cAAc,yBAAyB;AACvC,cAAc,+BAA+B"}

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

@@ -0,0 +1,29 @@
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const OverlayDrawerSurfaceClassNames = {
+  root: 'fui-OverlayDrawerSurface',
+  backdrop: 'fui-OverlayDrawerSurface__backdrop'
+};
+/**
+ * Styles for the backdrop slot
+ */
+const useBackdropResetStyles = /*#__PURE__*/__resetStyles("rivxbo", "r1trjn1z", [".rivxbo{top:0px;right:0px;bottom:0px;left:0px;position:fixed;background-color:rgba(0, 0, 0, 0.4);}", ".r1trjn1z{top:0px;left:0px;bottom:0px;right: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 => {
+  const backdropResetStyles = useBackdropResetStyles();
+  const backdropStyles = useBackdropStyles();
+  if (state.backdrop) {
+    state.backdrop.className = mergeClasses(backdropResetStyles, state.isNestedDialog && backdropStyles.nested, state.backdrop.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useOverlayDrawerSurfaceStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","OverlayDrawerSurfaceClassNames","root","backdrop","useBackdropResetStyles","useBackdropStyles","nested","De3pzq","d","useOverlayDrawerSurfaceStyles_unstable","state","backdropResetStyles","backdropStyles","className","isNestedDialog"],"sources":["useOverlayDrawerSurfaceStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const OverlayDrawerSurfaceClassNames = {\n    root: 'fui-OverlayDrawerSurface',\n    backdrop: 'fui-OverlayDrawerSurface__backdrop'\n};\n/**\n * Styles for the backdrop slot\n */ const useBackdropResetStyles = makeResetStyles({\n    ...shorthands.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    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,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,8BAA8B,GAAG;EAC1CC,IAAI,EAAE,0BAA0B;EAChCC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,sBAAsB,gBAAGR,aAAA,qOAIlC,CAAC;AACF,MAAMS,iBAAiB,gBAAGR,QAAA;EAAAS,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,sCAAsC,GAAIC,KAAK,IAAG;EAC/D,MAAMC,mBAAmB,GAAGP,sBAAsB,CAAC,CAAC;EACpD,MAAMQ,cAAc,GAAGP,iBAAiB,CAAC,CAAC;EAC1C,IAAIK,KAAK,CAACP,QAAQ,EAAE;IAChBO,KAAK,CAACP,QAAQ,CAACU,SAAS,GAAGf,YAAY,CAACa,mBAAmB,EAAED,KAAK,CAACI,cAAc,IAAIF,cAAc,CAACN,MAAM,EAAEI,KAAK,CAACP,QAAQ,CAACU,SAAS,CAAC;EACzI;EACA,OAAOH,KAAK;AAChB,CAAC"}

package/lib/components/OverlayDrawer/index.js

@@ -0,0 +1,5 @@
+export * from './OverlayDrawer';
+export * from './OverlayDrawer.types';
+export * from './renderOverlayDrawer';
+export * from './useOverlayDrawer';
+export * from './useOverlayDrawerStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './OverlayDrawer';\nexport * from './OverlayDrawer.types';\nexport * from './renderOverlayDrawer';\nexport * from './useOverlayDrawer';\nexport * from './useOverlayDrawerStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,kBAAkB;AAChC,cAAc,wBAAwB;AACtC,cAAc,wBAAwB;AACtC,cAAc,qBAAqB;AACnC,cAAc,kCAAkC"}

package/lib/components/OverlayDrawer/renderOverlayDrawer.js

@@ -0,0 +1,13 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of OverlayDrawer
+ */ export const renderOverlayDrawer_unstable = (state)=>{
+    if (!state.motion.canRender) {
+        return null;
+    }
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.dialog, {
+        children: /*#__PURE__*/ _jsx(state.root, {})
+    });
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["renderOverlayDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { OverlayDrawerState, OverlayDrawerInternalSlots } from './OverlayDrawer.types';\n\n/**\n * Render the final JSX of OverlayDrawer\n */\nexport const renderOverlayDrawer_unstable = (state: OverlayDrawerState) => {\n  if (!state.motion.canRender) {\n    return null;\n  }\n\n  assertSlots<OverlayDrawerInternalSlots>(state);\n\n  return (\n    <state.dialog>\n      <state.root />\n    </state.dialog>\n  );\n};\n"],"names":["assertSlots","renderOverlayDrawer_unstable","state","motion","canRender","dialog","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C,IAAI,CAACA,MAAMC,MAAM,CAACC,SAAS,EAAE;QAC3B,OAAO;IACT;IAEAJ,YAAwCE;IAExC,qBACE,KAACA,MAAMG,MAAM;kBACX,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

package/lib/components/OverlayDrawer/useOverlayDrawer.js

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { slot, useMergedRefs } from '@fluentui/react-utilities';
+import { Dialog } from '@fluentui/react-dialog';
+import { useMotion } from '@fluentui/react-motion-preview';
+import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
+import { OverlayDrawerSurface } from './OverlayDrawerSurface';
+/**
+ * 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 HTMLDivElement of OverlayDrawer
+ */ export const useOverlayDrawer_unstable = (props, ref)=>{
+    const { open, size, position } = useDrawerDefaultProps(props);
+    const { modalType = 'modal', inertTrapFocus, defaultOpen = false, onOpenChange } = props;
+    const motion = useMotion(open);
+    const backdropProps = slot.resolveShorthand(props.backdrop);
+    const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;
+    const root = slot.always({
+        ...props,
+        backdrop: hasCustomBackdrop ? {
+            ...backdropProps
+        } : null
+    }, {
+        elementType: OverlayDrawerSurface,
+        defaultProps: {
+            ref: useMergedRefs(ref, motion.ref)
+        }
+    });
+    const dialog = slot.always({
+        open: true,
+        defaultOpen,
+        onOpenChange,
+        inertTrapFocus,
+        modalType,
+        /**
+       * 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,
+        size,
+        position,
+        motion
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useOverlayDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { Dialog } from '@fluentui/react-dialog';\nimport { useMotion } from '@fluentui/react-motion-preview';\n\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { OverlayDrawerProps, OverlayDrawerState } from './OverlayDrawer.types';\nimport { OverlayDrawerSurface } from './OverlayDrawerSurface';\n\n/**\n * Create the state required to render OverlayDrawer.\n *\n * The returned state can be modified with hooks such as useOverlayDrawerStyles_unstable,\n * before being passed to renderOverlayDrawer_unstable.\n *\n * @param props - props from this instance of OverlayDrawer\n * @param ref - reference to root HTMLDivElement of OverlayDrawer\n */\nexport const useOverlayDrawer_unstable = (\n  props: OverlayDrawerProps,\n  ref: React.Ref<HTMLDivElement>,\n): OverlayDrawerState => {\n  const { open, size, position } = useDrawerDefaultProps(props);\n  const { modalType = 'modal', inertTrapFocus, defaultOpen = false, onOpenChange } = props;\n\n  const motion = useMotion<HTMLDivElement>(open);\n\n  const backdropProps = slot.resolveShorthand(props.backdrop);\n  const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;\n\n  const root = slot.always(\n    {\n      ...props,\n      backdrop: hasCustomBackdrop ? { ...backdropProps } : null,\n    },\n    {\n      elementType: OverlayDrawerSurface,\n      defaultProps: {\n        ref: useMergedRefs(ref, motion.ref),\n      },\n    },\n  );\n\n  const dialog = slot.always(\n    {\n      open: true,\n      defaultOpen,\n      onOpenChange,\n      inertTrapFocus,\n      modalType,\n      /**\n       * children is not needed here because we construct the children in the render function,\n       * but it's required by DialogProps\n       */\n      children: null as unknown as JSX.Element,\n    },\n    {\n      elementType: Dialog,\n    },\n  );\n\n  return {\n    components: {\n      root: OverlayDrawerSurface,\n      dialog: Dialog,\n    },\n\n    root,\n    dialog,\n\n    size,\n    position,\n    motion,\n  };\n};\n"],"names":["React","slot","useMergedRefs","Dialog","useMotion","useDrawerDefaultProps","OverlayDrawerSurface","useOverlayDrawer_unstable","props","ref","open","size","position","modalType","inertTrapFocus","defaultOpen","onOpenChange","motion","backdropProps","resolveShorthand","backdrop","hasCustomBackdrop","root","always","elementType","defaultProps","dialog","children","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAChE,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,SAAS,QAAQ,iCAAiC;AAE3D,SAASC,qBAAqB,QAAQ,qCAAqC;AAE3E,SAASC,oBAAoB,QAAQ,yBAAyB;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGP,sBAAsBG;IACvD,MAAM,EAAEK,YAAY,OAAO,EAAEC,cAAc,EAAEC,cAAc,KAAK,EAAEC,YAAY,EAAE,GAAGR;IAEnF,MAAMS,SAASb,UAA0BM;IAEzC,MAAMQ,gBAAgBjB,KAAKkB,gBAAgB,CAACX,MAAMY,QAAQ;IAC1D,MAAMC,oBAAoBR,cAAc,eAAeK,kBAAkB;IAEzE,MAAMI,OAAOrB,KAAKsB,MAAM,CACtB;QACE,GAAGf,KAAK;QACRY,UAAUC,oBAAoB;YAAE,GAAGH,aAAa;QAAC,IAAI;IACvD,GACA;QACEM,aAAalB;QACbmB,cAAc;YACZhB,KAAKP,cAAcO,KAAKQ,OAAOR,GAAG;QACpC;IACF;IAGF,MAAMiB,SAASzB,KAAKsB,MAAM,CACxB;QACEb,MAAM;QACNK;QACAC;QACAF;QACAD;QACA;;;OAGC,GACDc,UAAU;IACZ,GACA;QACEH,aAAarB;IACf;IAGF,OAAO;QACLyB,YAAY;YACVN,MAAMhB;YACNoB,QAAQvB;QACV;QAEAmB;QACAI;QAEAf;QACAC;QACAK;IACF;AACF,EAAE"}

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

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames, useDrawerDurationStyles } from '../../shared/useDrawerBaseStyles.styles';
+import { useMotionClassNames } from '@fluentui/react-motion-preview';
+export const overlayDrawerClassNames = {
+  root: 'fui-OverlayDrawer',
+  backdrop: 'fui-OverlayDrawer__backdrop'
+};
+/**
+ * Styles for the root slot
+ */
+const useDrawerResetStyles = /*#__PURE__*/__resetStyles("rx0pfxe", "r1hp8xng", [".rx0pfxe{overflow-x:hidden;overflow-y: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;}", ".rx0pfxe:focus{outline-style:none;}", ".rx0pfxe:focus-visible{outline-style:none;}", ".rx0pfxe[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".rx0pfxe[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".r1hp8xng{overflow-x:hidden;overflow-y: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;}", ".r1hp8xng:focus{outline-style:none;}", ".r1hp8xng:focus-visible{outline-style:none;}", ".r1hp8xng[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1hp8xng[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"]);
+const useDrawerRootStyles = /*#__PURE__*/__styles({
+  start: {
+    Bz10aip: "f1d8gkik"
+  },
+  end: {
+    Bz10aip: "f1g0pcr8"
+  }
+}, {
+  d: [".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}", ".f1g0pcr8{transform:translate3D(calc(var(--fui-Drawer--size) * 1), 0, 0);}"]
+});
+const useDrawerMotionStyles = /*#__PURE__*/__styles({
+  "default": {
+    abs64n: "fk73vx1",
+    E5pizo: "ff88big",
+    Bmy1vo4: "f1neo61",
+    Es3by: "f1ytgekk"
+  },
+  enter: {
+    abs64n: "f5p0z4x",
+    Bz10aip: "f87uvqx",
+    E5pizo: "f10nrhrw"
+  }
+}, {
+  d: [".fk73vx1{opacity:0;}", ".ff88big{box-shadow:0px var(--colorTransparentBackground);}", ".f1neo61{transition-property:transform,box-shadow,opacity;}", ".f1ytgekk{will-change:transform,box-shadow,opacity;}", ".f5p0z4x{opacity:1;}", ".f87uvqx{transform:translate3D(0, 0, 0);}", ".f10nrhrw{box-shadow:var(--shadow64);}"]
+});
+/**
+ * Styles for the backdrop slot
+ */
+const useBackdropMotionStyles = /*#__PURE__*/__styles({
+  "default": {
+    abs64n: "fk73vx1",
+    Bmy1vo4: "f13u1uyl",
+    Bkqvd7p: "f17wnm97",
+    Es3by: "f1gqqdtu"
+  },
+  enter: {
+    abs64n: "f5p0z4x"
+  }
+}, {
+  d: [".fk73vx1{opacity:0;}", ".f13u1uyl{transition-property:opacity;}", ".f17wnm97{transition-timing-function:var(--curveEasyEase);}", ".f1gqqdtu{will-change:opacity;}", ".f5p0z4x{opacity:1;}"]
+});
+/**
+ * Apply styling to the OverlayDrawer slots based on the state
+ */
+export const useOverlayDrawerStyles_unstable = state => {
+  const baseClassNames = useDrawerBaseClassNames(state);
+  const resetStyles = useDrawerResetStyles();
+  const rootStyles = useDrawerRootStyles();
+  const durationStyles = useDrawerDurationStyles();
+  const drawerMotionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());
+  const backdropMotionClassNames = useMotionClassNames(state.motion, useBackdropMotionStyles());
+  const backdrop = state.root.backdrop;
+  state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], drawerMotionClassNames, state.root.className);
+  if (backdrop) {
+    backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, backdropMotionClassNames, durationStyles[state.size], backdrop.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useOverlayDrawerStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","useDrawerDurationStyles","useMotionClassNames","overlayDrawerClassNames","root","backdrop","useDrawerResetStyles","useDrawerRootStyles","start","Bz10aip","end","d","useDrawerMotionStyles","abs64n","E5pizo","Bmy1vo4","Es3by","enter","useBackdropMotionStyles","Bkqvd7p","useOverlayDrawerStyles_unstable","state","baseClassNames","resetStyles","rootStyles","durationStyles","drawerMotionClassNames","motion","backdropMotionClassNames","className","position","size"],"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames, useDrawerDurationStyles } from '../../shared/useDrawerBaseStyles.styles';\nimport { useMotionClassNames } from '@fluentui/react-motion-preview';\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        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`\n    },\n    end: {\n        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * 1), 0, 0)`\n    }\n});\nconst useDrawerMotionStyles = makeStyles({\n    default: {\n        opacity: 0,\n        boxShadow: `0px ${tokens.colorTransparentBackground}`,\n        transitionProperty: 'transform, box-shadow, opacity',\n        willChange: 'transform, box-shadow, opacity'\n    },\n    enter: {\n        opacity: 1,\n        transform: 'translate3D(0, 0, 0)',\n        boxShadow: tokens.shadow64\n    }\n});\n/**\n * Styles for the backdrop slot\n */ const useBackdropMotionStyles = makeStyles({\n    default: {\n        opacity: 0,\n        transitionProperty: 'opacity',\n        transitionTimingFunction: tokens.curveEasyEase,\n        willChange: 'opacity'\n    },\n    enter: {\n        opacity: 1\n    }\n});\n/**\n * Apply styling to the OverlayDrawer slots based on the state\n */ export const useOverlayDrawerStyles_unstable = (state)=>{\n    const baseClassNames = useDrawerBaseClassNames(state);\n    const resetStyles = useDrawerResetStyles();\n    const rootStyles = useDrawerRootStyles();\n    const durationStyles = useDrawerDurationStyles();\n    const drawerMotionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());\n    const backdropMotionClassNames = useMotionClassNames(state.motion, useBackdropMotionStyles());\n    const backdrop = state.root.backdrop;\n    state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], drawerMotionClassNames, state.root.className);\n    if (backdrop) {\n        backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, backdropMotionClassNames, durationStyles[state.size], 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,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ,yCAAyC;AAC9I,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAGb,aAAA,mqFAMhC,CAAC;AACF,MAAMc,mBAAmB,gBAAGb,QAAA;EAAAc,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAO3B,CAAC;AACF,MAAMC,qBAAqB,gBAAGlB,QAAA;EAAA;IAAAmB,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,KAAA;EAAA;EAAAC,KAAA;IAAAJ,MAAA;IAAAJ,OAAA;IAAAK,MAAA;EAAA;AAAA;EAAAH,CAAA;AAAA,CAY7B,CAAC;AACF;AACA;AACA;AAAI,MAAMO,uBAAuB,gBAAGxB,QAAA;EAAA;IAAAmB,MAAA;IAAAE,OAAA;IAAAI,OAAA;IAAAH,KAAA;EAAA;EAAAC,KAAA;IAAAJ,MAAA;EAAA;AAAA;EAAAF,CAAA;AAAA,CAUnC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMS,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,cAAc,GAAGtB,uBAAuB,CAACqB,KAAK,CAAC;EACrD,MAAME,WAAW,GAAGjB,oBAAoB,CAAC,CAAC;EAC1C,MAAMkB,UAAU,GAAGjB,mBAAmB,CAAC,CAAC;EACxC,MAAMkB,cAAc,GAAGxB,uBAAuB,CAAC,CAAC;EAChD,MAAMyB,sBAAsB,GAAGxB,mBAAmB,CAACmB,KAAK,CAACM,MAAM,EAAEf,qBAAqB,CAAC,CAAC,CAAC;EACzF,MAAMgB,wBAAwB,GAAG1B,mBAAmB,CAACmB,KAAK,CAACM,MAAM,EAAET,uBAAuB,CAAC,CAAC,CAAC;EAC7F,MAAMb,QAAQ,GAAGgB,KAAK,CAACjB,IAAI,CAACC,QAAQ;EACpCgB,KAAK,CAACjB,IAAI,CAACyB,SAAS,GAAGlC,YAAY,CAACQ,uBAAuB,CAACC,IAAI,EAAEkB,cAAc,EAAEC,WAAW,EAAEC,UAAU,CAACH,KAAK,CAACS,QAAQ,CAAC,EAAEJ,sBAAsB,EAAEL,KAAK,CAACjB,IAAI,CAACyB,SAAS,CAAC;EACxK,IAAIxB,QAAQ,EAAE;IACVA,QAAQ,CAACwB,SAAS,GAAGlC,YAAY,CAACQ,uBAAuB,CAACE,QAAQ,EAAEuB,wBAAwB,EAAEH,cAAc,CAACJ,KAAK,CAACU,IAAI,CAAC,EAAE1B,QAAQ,CAACwB,SAAS,CAAC;EACjJ;EACA,OAAOR,KAAK;AAChB,CAAC"}

package/lib/e2e/DrawerShared.js

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { mount } from '@cypress/react';
+import { FluentProvider } from '@fluentui/react-provider';
+import { webLightTheme } from '@fluentui/react-theme';
+const mountFluent = (element)=>{
+    mount(/*#__PURE__*/ React.createElement(FluentProvider, {
+        theme: webLightTheme
+    }, element));
+};
+export function testDrawerBaseScenarios(Component) {
+    describe('basic functionality', ()=>{
+        it('should not render any element when closed', ()=>{
+            mountFluent(/*#__PURE__*/ React.createElement(Component, {
+                id: "drawer"
+            }));
+            cy.get('#drawer').should('not.exist');
+        });
+        it('should render an element when opened', ()=>{
+            mountFluent(/*#__PURE__*/ React.createElement(Component, {
+                id: "drawer",
+                open: true
+            }));
+            cy.get('#drawer').should('exist');
+        });
+        it('should render children content', ()=>{
+            const content = 'Test the renderization';
+            mountFluent(/*#__PURE__*/ React.createElement(Component, {
+                id: "drawer",
+                open: true
+            }, content));
+            cy.get('#drawer').contains(content);
+        });
+        it('should toggle visibility on open prop change', ()=>{
+            const ExampleDrawer = ()=>{
+                const [open, setOpen] = React.useState(false);
+                return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Component, {
+                    id: "drawer",
+                    open: open
+                }), /*#__PURE__*/ React.createElement("button", {
+                    id: "button",
+                    onClick: ()=>setOpen(true)
+                }, "Open"));
+            };
+            mountFluent(/*#__PURE__*/ React.createElement(ExampleDrawer, null));
+            cy.get('#drawer').should('not.exist');
+            cy.get('#button').click();
+            cy.get('#drawer').should('exist');
+        });
+    });
+    describe('size prop', ()=>{
+        const sizes = {
+            small: 320,
+            medium: 592,
+            large: 940,
+            full: 1000
+        };
+        Object.entries(sizes).forEach(([size, width])=>{
+            const sizeProp = size;
+            it(`should have correct size when size is ${size}`, ()=>{
+                mountFluent(/*#__PURE__*/ React.createElement(Component, {
+                    size: sizeProp,
+                    id: "drawer",
+                    open: true
+                }));
+                cy.viewport(1000, 1000);
+                cy.get('#drawer').should('have.css', 'width', width + 'px');
+                cy.get('#drawer').invoke('outerWidth').should('equal', width);
+            });
+        });
+        it('width should not be bigger than viewport', ()=>{
+            mountFluent(/*#__PURE__*/ React.createElement(Component, {
+                id: "drawer",
+                open: true
+            }));
+            cy.viewport(319, 319);
+            cy.get('#drawer').should('have.css', 'width', '319px');
+            cy.get('#drawer').invoke('outerWidth').should('equal', 319);
+        });
+        it('should have custom size', ()=>{
+            mountFluent(/*#__PURE__*/ React.createElement(Component, {
+                id: "drawer",
+                open: true,
+                style: {
+                    width: '200px'
+                }
+            }));
+            cy.get('#drawer').should('have.css', 'width', '200px');
+            cy.get('#drawer').invoke('outerWidth').should('equal', 200);
+        });
+    });
+    describe('position prop', ()=>{
+        const positions = {
+            start: 'left',
+            end: 'right'
+        };
+        Object.entries(positions).forEach(([position, side])=>{
+            const positionProp = position;
+            it(`should have correct position when position is ${position}`, ()=>{
+                mountFluent(/*#__PURE__*/ React.createElement(Component, {
+                    position: positionProp,
+                    id: "drawer",
+                    open: true
+                }));
+                cy.get('#drawer').should('have.css', side, '0px');
+            });
+        });
+    });
+}

package/lib/e2e/DrawerShared.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["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';\nimport { DrawerProps } from '@fluentui/react-components';\n\nconst mountFluent = (element: JSX.Element) => {\n  mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);\n};\n\nexport function testDrawerBaseScenarios(Component: React.ComponentType<DrawerProps>) {\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    };\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","position","side","positionProp"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,iBAAiB;AACvC,SAASC,cAAc,QAAQ,2BAA2B;AAC1D,SAASC,aAAa,QAAQ,wBAAwB;AAGtD,MAAMC,cAAc,CAACC;IACnBJ,oBAAM,oBAACC;QAAeI,OAAOH;OAAgBE;AAC/C;AAEA,OAAO,SAASE,wBAAwBC,SAA2C;IACjFC,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;QACP;QAEAX,OAAOC,OAAO,CAACQ,WAAWP,OAAO,CAAC,CAAC,CAACU,UAAUC,KAAK;YACjD,MAAMC,eAAeF;YAErB/B,GAAG,CAAC,8CAA8C,EAAE+B,SAAS,CAAC,EAAE;gBAC9DrC,0BAAY,oBAACI;oBAAUiC,UAAUE;oBAAchC,IAAG;oBAASI,MAAAA;;gBAE3DH,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,YAAY4B,MAAM;YAC7C;QACF;IACF;AACF"}

package/lib/index.js

@@ -1,6 +1,6 @@
-export { Drawer, renderDrawer_unstable, useDrawer_unstable } from './Drawer';
-export { DrawerOverlay, drawerOverlayClassNames, renderDrawerOverlay_unstable, useDrawerOverlayStyles_unstable, useDrawerOverlay_unstable } from './DrawerOverlay';
-export { DrawerInline, drawerInlineClassNames, renderDrawerInline_unstable, useDrawerInlineStyles_unstable, useDrawerInline_unstable } from './DrawerInline';
+export { Drawer, renderDrawer_unstable, useDrawerStyles_unstable, useDrawer_unstable } from './Drawer';
+export { OverlayDrawer, overlayDrawerClassNames, renderOverlayDrawer_unstable, useOverlayDrawerStyles_unstable, useOverlayDrawer_unstable } from './OverlayDrawer';
+export { InlineDrawer, inlineDrawerClassNames, renderInlineDrawer_unstable, useInlineDrawerStyles_unstable, useInlineDrawer_unstable } from './InlineDrawer';
 export { DrawerBody, drawerBodyClassNames, renderDrawerBody_unstable, useDrawerBodyStyles_unstable, useDrawerBody_unstable } from './DrawerBody';
 export { DrawerHeader, drawerHeaderClassNames, renderDrawerHeader_unstable, useDrawerHeaderStyles_unstable, useDrawerHeader_unstable } from './DrawerHeader';
 export { DrawerHeaderTitle, drawerHeaderTitleClassNames, renderDrawerHeaderTitle_unstable, useDrawerHeaderTitleStyles_unstable, useDrawerHeaderTitle_unstable } from './DrawerHeaderTitle';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export { Drawer, renderDrawer_unstable, useDrawer_unstable } from './Drawer';\nexport type { DrawerProps, DrawerSlots, DrawerState } from './Drawer';\n\nexport {\n  DrawerOverlay,\n  drawerOverlayClassNames,\n  renderDrawerOverlay_unstable,\n  useDrawerOverlayStyles_unstable,\n  useDrawerOverlay_unstable,\n} from './DrawerOverlay';\nexport type { DrawerOverlayProps, DrawerOverlaySlots, DrawerOverlayState } from './DrawerOverlay';\n\nexport {\n  DrawerInline,\n  drawerInlineClassNames,\n  renderDrawerInline_unstable,\n  useDrawerInlineStyles_unstable,\n  useDrawerInline_unstable,\n} from './DrawerInline';\nexport type { DrawerInlineProps, DrawerInlineSlots, DrawerInlineState } from './DrawerInline';\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":["Drawer","renderDrawer_unstable","useDrawer_unstable","DrawerOverlay","drawerOverlayClassNames","renderDrawerOverlay_unstable","useDrawerOverlayStyles_unstable","useDrawerOverlay_unstable","DrawerInline","drawerInlineClassNames","renderDrawerInline_unstable","useDrawerInlineStyles_unstable","useDrawerInline_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,MAAM,EAAEC,qBAAqB,EAAEC,kBAAkB,QAAQ,WAAW;AAG7E,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":["index.ts"],"sourcesContent":["export { 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":["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,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

@@ -0,0 +1 @@
+import * as React from 'react';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["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   * @default 'start'\n   */\n  position?: 'start' | 'end';\n\n  /**\n   * Size of the drawer.\n   *\n   * - 'small' - Drawer is 320px wide.\n   * - 'medium' - Drawer is 592px wide.\n   * - 'large' - Drawer is 940px wide.\n   * - 'full' - Drawer is 100vw wide.\n   *\n   * @default 'small'\n   */\n  size?: 'small' | 'medium' | 'large' | 'full';\n\n  /**\n   * Controls the open state of the Drawer\n   *\n   * @default false\n   */\n  open?: boolean;\n};\n\nexport type DrawerBaseState = Required<Pick<DrawerBaseProps, 'position' | 'size'>> & {\n  motion: MotionState<HTMLDivElement>;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}