@fluentui/react-drawer 9.5.6 → 9.5.8

package/lib-commonjs/shared/drawerMotions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["drawerMotions.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';\nimport { tokens } from '@fluentui/react-theme';\n\nimport type { DrawerBaseProps } from './DrawerBase.types';\nimport { drawerCSSVars } from './useDrawerBaseStyles.styles';\n\nexport type DrawerMotionParams = Required<Pick<DrawerBaseProps, 'size' | 'position'>>;\nexport type OverlayDrawerSurfaceMotionParams = Required<Pick<DrawerBaseProps, 'size'>>;\n\nconst durations: Record<NonNullable<DrawerBaseProps['size']>, number> = {\n  small: motionTokens.durationGentle,\n  medium: motionTokens.durationSlow,\n  large: motionTokens.durationSlower,\n  full: motionTokens.durationUltraSlow,\n};\n\n/**\n * @internal\n */\nexport const InlineDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size }) => {\n  const keyframes: Keyframe[] = [\n    {\n      ...(position === 'start' && {\n        transform: `translate3d(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`,\n      }),\n      ...(position === 'end' && {\n        transform: `translate3d(var(${drawerCSSVars.drawerSizeVar}), 0, 0)`,\n      }),\n      ...(position === 'bottom' && {\n        transform: `translate3d(0, var(${drawerCSSVars.drawerSizeVar}), 0)`,\n      }),\n\n      opacity: 0,\n    },\n    { transform: 'translate3d(0, 0, 0)', opacity: 1 },\n  ];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing: motionTokens.curveDecelerateMid,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing: motionTokens.curveAccelerateMin,\n    },\n  };\n});\n\n/**\n * @internal\n */\nexport const OverlayDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size }) => {\n  const keyframes: Keyframe[] = [\n    {\n      ...(position === 'start' && {\n        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`,\n      }),\n      ...(position === 'end' && {\n        transform: `translate3d(calc(var(${drawerCSSVars.drawerSizeVar}) * 1), 0, 0)`,\n      }),\n      ...(position === 'bottom' && {\n        transform: `translate3d(0, calc(var(${drawerCSSVars.drawerSizeVar}) * 1), 0)`,\n      }),\n\n      boxShadow: `0px ${tokens.colorTransparentBackground}`,\n      opacity: 0,\n    },\n    {\n      transform: 'translate3d(0, 0, 0)',\n      boxShadow: tokens.shadow64,\n      opacity: 1,\n    },\n  ];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing: motionTokens.curveDecelerateMid,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing: motionTokens.curveAccelerateMin,\n    },\n  };\n});\n\n/**\n * @internal\n */\nexport const OverlaySurfaceBackdropMotion = createPresenceComponent(({ size }: OverlayDrawerSurfaceMotionParams) => {\n  const keyframes = [{ opacity: 0 }, { opacity: 1 }];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      easing: motionTokens.curveLinear,\n      duration,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      easing: motionTokens.curveLinear,\n      duration,\n    },\n  };\n});\n"],"names":["InlineDrawerMotion","OverlayDrawerMotion","OverlaySurfaceBackdropMotion","durations","small","motionTokens","durationGentle","medium","durationSlow","large","durationSlower","full","durationUltraSlow","createPresenceComponent","position","size","keyframes","transform","drawerCSSVars","drawerSizeVar","opacity","duration","enter","easing","curveDecelerateMid","exit","reverse","curveAccelerateMin","boxShadow","tokens","colorTransparentBackground","shadow64","curveLinear"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAmBaA,kBAAAA;eAAAA;;IAoCAC,mBAAAA;eAAAA;;IAyCAC,4BAAAA;eAAAA;;;6BAhGyC;4BAC/B;2CAGO;AAK9B,MAAMC,YAAkE;IACtEC,OAAOC,yBAAAA,CAAaC,cAAc;IAClCC,QAAQF,yBAAAA,CAAaG,YAAY;IACjCC,OAAOJ,yBAAAA,CAAaK,cAAc;IAClCC,MAAMN,yBAAAA,CAAaO,iBAAiB;AACtC;AAKO,MAAMZ,qBAAqBa,IAAAA,oCAAAA,EAA4C,CAAC,EAAEC,QAAQ,EAAEC,IAAI,EAAE;IAC/F,MAAMC,YAAwB;QAC5B;YACE,GAAIF,aAAa,WAAW;gBAC1BG,WAAW,CAAC,qBAAqB,EAAEC,wCAAAA,CAAcC,aAAa,CAAC,cAAc,CAAC;YAChF,CAAC;YACD,GAAIL,aAAa,SAAS;gBACxBG,WAAW,CAAC,gBAAgB,EAAEC,wCAAAA,CAAcC,aAAa,CAAC,QAAQ,CAAC;YACrE,CAAC;YACD,GAAIL,aAAa,YAAY;gBAC3BG,WAAW,CAAC,mBAAmB,EAAEC,wCAAAA,CAAcC,aAAa,CAAC,KAAK,CAAC;YACrE,CAAC;YAEDC,SAAS;QACX;QACA;YAAEH,WAAW;YAAwBG,SAAS;QAAE;KACjD;IACD,MAAMC,WAAWlB,SAAS,CAACY,KAAK;IAEhC,OAAO;QACLO,OAAO;YACLN;YACAK;YACAE,QAAQlB,yBAAAA,CAAamB,kBAAkB;QACzC;QACAC,MAAM;YACJT,WAAW;mBAAIA;aAAU,CAACU,OAAO;YACjCL;YACAE,QAAQlB,yBAAAA,CAAasB,kBAAkB;QACzC;IACF;AACF;AAKO,MAAM1B,sBAAsBY,IAAAA,oCAAAA,EAA4C,CAAC,EAAEC,QAAQ,EAAEC,IAAI,EAAE;IAChG,MAAMC,YAAwB;QAC5B;YACE,GAAIF,aAAa,WAAW;gBAC1BG,WAAW,CAAC,qBAAqB,EAAEC,wCAAAA,CAAcC,aAAa,CAAC,cAAc,CAAC;YAChF,CAAC;YACD,GAAIL,aAAa,SAAS;gBACxBG,WAAW,CAAC,qBAAqB,EAAEC,wCAAAA,CAAcC,aAAa,CAAC,aAAa,CAAC;YAC/E,CAAC;YACD,GAAIL,aAAa,YAAY;gBAC3BG,WAAW,CAAC,wBAAwB,EAAEC,wCAAAA,CAAcC,aAAa,CAAC,UAAU,CAAC;YAC/E,CAAC;YAEDS,WAAW,CAAC,IAAI,EAAEC,kBAAAA,CAAOC,0BAA0B,CAAC,CAAC;YACrDV,SAAS;QACX;QACA;YACEH,WAAW;YACXW,WAAWC,kBAAAA,CAAOE,QAAQ;YAC1BX,SAAS;QACX;KACD;IACD,MAAMC,WAAWlB,SAAS,CAACY,KAAK;IAEhC,OAAO;QACLO,OAAO;YACLN;YACAK;YACAE,QAAQlB,yBAAAA,CAAamB,kBAAkB;QACzC;QACAC,MAAM;YACJT,WAAW;mBAAIA;aAAU,CAACU,OAAO;YACjCL;YACAE,QAAQlB,yBAAAA,CAAasB,kBAAkB;QACzC;IACF;AACF;AAKO,MAAMzB,+BAA+BW,IAAAA,oCAAAA,EAAwB,CAAC,EAAEE,IAAI,EAAoC;IAC7G,MAAMC,YAAY;QAAC;YAAEI,SAAS;QAAE;QAAG;YAAEA,SAAS;QAAE;KAAE;IAClD,MAAMC,WAAWlB,SAAS,CAACY,KAAK;IAEhC,OAAO;QACLO,OAAO;YACLN;YACAO,QAAQlB,yBAAAA,CAAa2B,WAAW;YAChCX;QACF;QACAI,MAAM;YACJT,WAAW;mBAAIA;aAAU,CAACU,OAAO;YACjCH,QAAQlB,yBAAAA,CAAa2B,WAAW;YAChCX;QACF;IACF;AACF"}

package/lib-commonjs/shared/useDrawerBaseStyles.styles.js

@@ -20,9 +20,6 @@ _export(exports, {
     },
     useDrawerBottomBaseStyles: function() {
         return useDrawerBottomBaseStyles;
-    },
-    useDrawerDurationStyles: function() {
-        return useDrawerDurationStyles;
     }
 });
 const _react = require("@griffel/react");
@@ -47,15 +44,6 @@ const drawerDefaultStyles = {
 /**
  * Shared dynamic styles for the Drawer component
  */ const useDrawerStyles = /*#__PURE__*/ (0, _react.__styles)({
-    entering: {
-        Bkqvd7p: "f18ad807"
-    },
-    exiting: {
-        Bkqvd7p: "f1mfizis"
-    },
-    reducedMotion: {
-        Hwfdqs: "f5e8c63"
-    },
     start: {
         h3c5rm: 0,
         vrafjx: 0,
@@ -108,8 +96,6 @@ const drawerDefaultStyles = {
     }
 }, {
     d: [
-        ".f18ad807{transition-timing-function:var(--curveDecelerateMid);}",
-        ".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}",
         [
             ".f1xteiwb{border-right:var(--strokeWidthThin) solid var(--colorTransparentStroke);}",
             {
@@ -144,14 +130,6 @@ const drawerDefaultStyles = {
         ".fqofjzu{--fui-Drawer--size:592px;}",
         ".fce6y3m{--fui-Drawer--size:940px;}",
         ".fsdmzs6{--fui-Drawer--size:100vw;}"
-    ],
-    m: [
-        [
-            "@media screen and (prefers-reduced-motion: reduce){.f5e8c63{transition-duration:0.001ms;}}",
-            {
-                m: "screen and (prefers-reduced-motion: reduce)"
-            }
-        ]
     ]
 });
 const useDrawerBottomBaseStyles = /*#__PURE__*/ (0, _react.__styles)({
@@ -175,30 +153,8 @@ const useDrawerBottomBaseStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".fno8cgj{--fui-Drawer--size:100vh;}"
     ]
 });
-const useDrawerDurationStyles = /*#__PURE__*/ (0, _react.__styles)({
-    small: {
-        B3o57yi: "fc397y7"
-    },
-    medium: {
-        B3o57yi: "f78771"
-    },
-    large: {
-        B3o57yi: "f9ymmep"
-    },
-    full: {
-        B3o57yi: "f1loko9l"
-    }
-}, {
-    d: [
-        ".fc397y7{transition-duration:var(--durationGentle);}",
-        ".f78771{transition-duration:var(--durationSlow);}",
-        ".f9ymmep{transition-duration:var(--durationSlower);}",
-        ".f1loko9l{transition-duration:var(--durationUltraSlow);}"
-    ]
-});
-const useDrawerBaseClassNames = ({ position, size, motion })=>{
+const useDrawerBaseClassNames = ({ position, size })=>{
     const baseStyles = useDrawerStyles();
     const bottomBaseStyles = useDrawerBottomBaseStyles();
-    const durationStyles = useDrawerDurationStyles();
-    return (0, _react.mergeClasses)(baseStyles[position], position === 'bottom' && bottomBaseStyles[size], durationStyles[size], position !== 'bottom' && baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);
+    return (0, _react.mergeClasses)(baseStyles[position], position === 'bottom' && bottomBaseStyles[size], position !== 'bottom' && baseStyles[size]);
 }; //# sourceMappingURL=useDrawerBaseStyles.styles.js.map

package/lib-commonjs/shared/useDrawerBaseStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * CSS variable names used internally for uniform styling in Drawer.\n */ export const drawerCSSVars = {\n    drawerSizeVar: '--fui-Drawer--size'\n};\n/**\n * Default shared styles for the Drawer component\n */ export const drawerDefaultStyles = {\n    overflow: 'hidden',\n    width: `var(${drawerCSSVars.drawerSizeVar})`,\n    maxWidth: '100vw',\n    height: 'auto',\n    maxHeight: '100vh',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    justifyContent: 'flex-start',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1\n};\n/**\n * Shared dynamic styles for the Drawer component\n */ const useDrawerStyles = makeStyles({\n    /* Motion */ entering: {\n        transitionTimingFunction: tokens.curveDecelerateMid\n    },\n    exiting: {\n        transitionTimingFunction: tokens.curveAccelerateMin\n    },\n    reducedMotion: {\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.001ms'\n        }\n    },\n    /* Positioning */ start: {\n        borderRight: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n        left: 0,\n        right: 'auto'\n    },\n    end: {\n        borderLeft: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n        right: 0,\n        left: 'auto'\n    },\n    bottom: {\n        bottom: 0,\n        top: 'auto'\n    },\n    /* Sizes */ small: {\n        [drawerCSSVars.drawerSizeVar]: '320px'\n    },\n    medium: {\n        [drawerCSSVars.drawerSizeVar]: '592px'\n    },\n    large: {\n        [drawerCSSVars.drawerSizeVar]: '940px'\n    },\n    full: {\n        [drawerCSSVars.drawerSizeVar]: '100vw'\n    }\n});\nexport const useDrawerBottomBaseStyles = makeStyles({\n    /* Sizes for position bottom */ small: {\n        [drawerCSSVars.drawerSizeVar]: '320px'\n    },\n    medium: {\n        [drawerCSSVars.drawerSizeVar]: '592px'\n    },\n    large: {\n        [drawerCSSVars.drawerSizeVar]: '940px'\n    },\n    full: {\n        [drawerCSSVars.drawerSizeVar]: '100vh'\n    }\n});\nexport const useDrawerDurationStyles = makeStyles({\n    small: {\n        transitionDuration: tokens.durationGentle\n    },\n    medium: {\n        transitionDuration: tokens.durationSlow\n    },\n    large: {\n        transitionDuration: tokens.durationSlower\n    },\n    full: {\n        transitionDuration: tokens.durationUltraSlow\n    }\n});\nexport const useDrawerBaseClassNames = ({ position, size, motion })=>{\n    const baseStyles = useDrawerStyles();\n    const bottomBaseStyles = useDrawerBottomBaseStyles();\n    const durationStyles = useDrawerDurationStyles();\n    return mergeClasses(baseStyles[position], position === 'bottom' && bottomBaseStyles[size], durationStyles[size], position !== 'bottom' && baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);\n};\n"],"names":["drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","useDrawerBottomBaseStyles","useDrawerDurationStyles","drawerSizeVar","overflow","width","maxWidth","height","maxHeight","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","tokens","colorNeutralBackground1","color","colorNeutralForeground1","useDrawerStyles","__styles","entering","Bkqvd7p","exiting","reducedMotion","Hwfdqs","start","h3c5rm","vrafjx","Bekrc4i","u1mtju","oyh7mz","j35jbq","end","zhjwy3","wvpqe5","ibv6hh","B4g9neb","bottom","B5kzvoi","Bhzewxz","small","Bjr0ffy","medium","large","full","d","p","m","B3o57yi","position","size","motion","baseStyles","bottomBaseStyles","durationStyles","mergeClasses","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIiBA,aAAa;eAAbA;;IAKAC,mBAAmB;eAAnBA;;IAmFJC,uBAAuB;eAAvBA;;IA5BAC,yBAAyB;eAAzBA;;IAcAC,uBAAuB;eAAvBA;;;uBA9E4B;4BAClB;AAGZ,MAAMJ,gBAAgB;IAC7BK,eAAe;AACnB;AAGW,MAAMJ,sBAAsB;IACnCK,UAAU;IACVC,OAAO,CAAA,IAAA,EAAOP,cAAcK,aAAa,CAAA,CAAA,CAAG;IAC5CG,UAAU;IACVC,QAAQ;IACRC,WAAW;IACXC,WAAW;IACXC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,gBAAgB;IAChBC,iBAAiBC,kBAAM,CAACC,uBAAuB;IAC/CC,OAAOF,kBAAM,CAACG,uBAAAA;AAClB;AACA;;CAEA,GAAI,MAAMC,kBAAe,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,UAAA;QAAAC,SAAA;IAAA;IAAAC,SAAA;QAAAD,SAAA;IAAA;IAAAE,eAAA;QAAAC,QAAA;IAAA;IAAAC,OAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,KAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAL,QAAA;YAAA;YAAA;SAAA;QAAAD,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAO,QAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAC,OAAA;QAAAC,SAAA;IAAA;IAAAC,QAAA;QAAAD,SAAA;IAAA;IAAAE,OAAA;QAAAF,SAAA;IAAA;IAAAG,MAAA;QAAAH,SAAA;IAAA;AAAA,GAAA;IAAAI,GAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;KAAA;AAAA;AAuCrB,MAAM/C,4BAAyB,WAAA,GAAGmB,IAAAA,eAAA,EAAA;IAAAqB,OAAA;QAAAC,SAAA;IAAA;IAAAC,QAAA;QAAAD,SAAA;IAAA;IAAAE,OAAA;QAAAF,SAAA;IAAA;IAAAG,MAAA;QAAAH,SAAA;IAAA;AAAA,GAAA;IAAAI,GAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAclC,MAAM5C,0BAAuB,WAAA,GAAGkB,IAAAA,eAAA,EAAA;IAAAqB,OAAA;QAAAQ,SAAA;IAAA;IAAAN,QAAA;QAAAM,SAAA;IAAA;IAAAL,OAAA;QAAAK,SAAA;IAAA;IAAAJ,MAAA;QAAAI,SAAA;IAAA;AAAA,GAAA;IAAAH,GAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAchC,MAAM9C,0BAA0BA,CAAC,EAAEkD,QAAQ,EAAEC,IAAI,EAAEC,MAAAA,EAAQ;IAC9D,MAAMC,aAAalC;IACnB,MAAMmC,mBAAmBrD;IACzB,MAAMsD,iBAAiBrD;IACvB,OAAOsD,IAAAA,mBAAY,EAACH,UAAU,CAACH,SAAS,EAAEA,aAAa,YAAYI,gBAAgB,CAACH,KAAK,EAAEI,cAAc,CAACJ,KAAK,EAAED,aAAa,YAAYG,UAAU,CAACF,KAAK,EAAEE,WAAW7B,aAAa,EAAE4B,OAAOK,IAAI,KAAK,cAAcJ,WAAWhC,QAAQ,EAAE+B,OAAOK,IAAI,KAAK,aAAaJ,WAAW9B,OAAO;AAC5R"}
+{"version":3,"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * CSS variable names used internally for uniform styling in Drawer.\n */ export const drawerCSSVars = {\n    drawerSizeVar: '--fui-Drawer--size'\n};\n/**\n * Default shared styles for the Drawer component\n */ export const drawerDefaultStyles = {\n    overflow: 'hidden',\n    width: `var(${drawerCSSVars.drawerSizeVar})`,\n    maxWidth: '100vw',\n    height: 'auto',\n    maxHeight: '100vh',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    justifyContent: 'flex-start',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1\n};\n/**\n * Shared dynamic styles for the Drawer component\n */ const useDrawerStyles = makeStyles({\n    /* Positioning */ start: {\n        borderRight: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n        left: 0,\n        right: 'auto'\n    },\n    end: {\n        borderLeft: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n        right: 0,\n        left: 'auto'\n    },\n    bottom: {\n        bottom: 0,\n        top: 'auto'\n    },\n    /* Sizes */ small: {\n        [drawerCSSVars.drawerSizeVar]: '320px'\n    },\n    medium: {\n        [drawerCSSVars.drawerSizeVar]: '592px'\n    },\n    large: {\n        [drawerCSSVars.drawerSizeVar]: '940px'\n    },\n    full: {\n        [drawerCSSVars.drawerSizeVar]: '100vw'\n    }\n});\nexport const useDrawerBottomBaseStyles = makeStyles({\n    /* Sizes for position bottom */ small: {\n        [drawerCSSVars.drawerSizeVar]: '320px'\n    },\n    medium: {\n        [drawerCSSVars.drawerSizeVar]: '592px'\n    },\n    large: {\n        [drawerCSSVars.drawerSizeVar]: '940px'\n    },\n    full: {\n        [drawerCSSVars.drawerSizeVar]: '100vh'\n    }\n});\nexport const useDrawerBaseClassNames = ({ position, size })=>{\n    const baseStyles = useDrawerStyles();\n    const bottomBaseStyles = useDrawerBottomBaseStyles();\n    return mergeClasses(baseStyles[position], position === 'bottom' && bottomBaseStyles[size], position !== 'bottom' && baseStyles[size]);\n};\n"],"names":["drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","useDrawerBottomBaseStyles","drawerSizeVar","overflow","width","maxWidth","height","maxHeight","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","tokens","colorNeutralBackground1","color","colorNeutralForeground1","useDrawerStyles","__styles","start","h3c5rm","vrafjx","Bekrc4i","u1mtju","oyh7mz","j35jbq","end","zhjwy3","wvpqe5","ibv6hh","B4g9neb","bottom","B5kzvoi","Bhzewxz","small","Bjr0ffy","medium","large","full","d","p","position","size","baseStyles","bottomBaseStyles","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIiBA,aAAa;eAAbA;;IAKAC,mBAAmB;eAAnBA;;IA0DJC,uBAAuB;eAAvBA;;IAdAC,yBAAyB;eAAzBA;;;uBArD4B;4BAClB;AAGZ,MAAMH,gBAAgB;IAC7BI,eAAe;AACnB;AAGW,MAAMH,sBAAsB;IACnCI,UAAU;IACVC,OAAO,CAAA,IAAA,EAAON,cAAcI,aAAa,CAAA,CAAA,CAAG;IAC5CG,UAAU;IACVC,QAAQ;IACRC,WAAW;IACXC,WAAW;IACXC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,gBAAgB;IAChBC,iBAAiBC,kBAAM,CAACC,uBAAuB;IAC/CC,OAAOF,kBAAM,CAACG,uBAAAA;AAClB;AACA;;CAEA,GAAI,MAAMC,kBAAe,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,OAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,KAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAL,QAAA;YAAA;YAAA;SAAA;QAAAD,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAO,QAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAC,OAAA;QAAAC,SAAA;IAAA;IAAAC,QAAA;QAAAD,SAAA;IAAA;IAAAE,OAAA;QAAAF,SAAA;IAAA;IAAAG,MAAA;QAAAH,SAAA;IAAA;AAAA,GAAA;IAAAI,GAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AA4BrB,MAAMxC,4BAAyB,WAAA,GAAGkB,IAAAA,eAAA,EAAA;IAAAgB,OAAA;QAAAC,SAAA;IAAA;IAAAC,QAAA;QAAAD,SAAA;IAAA;IAAAE,OAAA;QAAAF,SAAA;IAAA;IAAAG,MAAA;QAAAH,SAAA;IAAA;AAAA,GAAA;IAAAI,GAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAclC,MAAMxC,0BAA0BA,CAAC,EAAE0C,QAAQ,EAAEC,IAAAA,EAAM;IACtD,MAAMC,aAAa1B;IACnB,MAAM2B,mBAAmB5C;IACzB,OAAO6C,IAAAA,mBAAY,EAACF,UAAU,CAACF,SAAS,EAAEA,aAAa,YAAYG,gBAAgB,CAACF,KAAK,EAAED,aAAa,YAAYE,UAAU,CAACD,KAAK;AACxI"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-drawer",
-  "version": "9.5.6",
+  "version": "9.5.8",
   "description": "Drawer components for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,9 +35,9 @@
     "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/react-dialog": "^9.11.6",
+    "@fluentui/react-dialog": "^9.11.8",
     "@fluentui/react-jsx-runtime": "^9.0.42",
-    "@fluentui/react-motion-preview": "^0.5.25",
+    "@fluentui/react-motion": "^9.4.0",
     "@fluentui/react-shared-contexts": "^9.20.0",
     "@fluentui/react-tabster": "^9.22.3",
     "@fluentui/react-theme": "^9.1.19",

package/lib/components/OverlayDrawer/OverlayDrawerDialog.js

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { DialogProvider, DialogSurfaceProvider, useDialog_unstable, useDialogContextValues_unstable } from '@fluentui/react-dialog';
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const renderOverlayDrawerDialog_unstable = (state, contextValues)=>{
-    const { content, trigger } = state;
-    return /*#__PURE__*/ React.createElement(DialogProvider, {
-        value: contextValues.dialog
-    }, /*#__PURE__*/ React.createElement(DialogSurfaceProvider, {
-        value: contextValues.dialogSurface
-    }, trigger, content));
-};
-/**
- * Temporary component to render Dialog without built-in motion as Drawer has own motion implementation.
- *
- * @todo Remove after https://github.com/microsoft/fluentui/issues/30700.
- * @internal
- */ export const OverlayDrawerDialog = /*#__PURE__*/ React.memo((props)=>{
-    const state = useDialog_unstable(props);
-    const contextValues = useDialogContextValues_unstable(state);
-    return renderOverlayDrawerDialog_unstable(state, contextValues);
-});
-OverlayDrawerDialog.displayName = 'OverlayDrawerDialog';

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

@@ -1 +0,0 @@
-{"version":3,"sources":["OverlayDrawerDialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  type DialogContextValues,\n  type DialogProps,\n  DialogProvider,\n  type DialogState,\n  DialogSurfaceProvider,\n  useDialog_unstable,\n  useDialogContextValues_unstable,\n} from '@fluentui/react-dialog';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst renderOverlayDrawerDialog_unstable = (state: DialogState, contextValues: DialogContextValues) => {\n  const { content, trigger } = state;\n\n  return (\n    <DialogProvider value={contextValues.dialog}>\n      <DialogSurfaceProvider value={contextValues.dialogSurface}>\n        {trigger}\n        {content}\n      </DialogSurfaceProvider>\n    </DialogProvider>\n  );\n};\n\n/**\n * Temporary component to render Dialog without built-in motion as Drawer has own motion implementation.\n *\n * @todo Remove after https://github.com/microsoft/fluentui/issues/30700.\n * @internal\n */\nexport const OverlayDrawerDialog: React.FC<DialogProps> = React.memo(props => {\n  const state = useDialog_unstable(props);\n  const contextValues = useDialogContextValues_unstable(state);\n\n  return renderOverlayDrawerDialog_unstable(state, contextValues);\n});\n\nOverlayDrawerDialog.displayName = 'OverlayDrawerDialog';\n"],"names":["React","DialogProvider","DialogSurfaceProvider","useDialog_unstable","useDialogContextValues_unstable","renderOverlayDrawerDialog_unstable","state","contextValues","content","trigger","value","dialog","dialogSurface","OverlayDrawerDialog","memo","props","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAGEC,cAAc,EAEdC,qBAAqB,EACrBC,kBAAkB,EAClBC,+BAA+B,QAC1B,yBAAyB;AAEhC,gEAAgE;AAChE,MAAMC,qCAAqC,CAACC,OAAoBC;IAC9D,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGH;IAE7B,qBACE,oBAACL;QAAeS,OAAOH,cAAcI,MAAM;qBACzC,oBAACT;QAAsBQ,OAAOH,cAAcK,aAAa;OACtDH,SACAD;AAIT;AAEA;;;;;CAKC,GACD,OAAO,MAAMK,oCAA6Cb,MAAMc,IAAI,CAACC,CAAAA;IACnE,MAAMT,QAAQH,mBAAmBY;IACjC,MAAMR,gBAAgBH,gCAAgCE;IAEtD,OAAOD,mCAAmCC,OAAOC;AACnD,GAAG;AAEHM,oBAAoBG,WAAW,GAAG"}

package/lib-commonjs/components/OverlayDrawer/OverlayDrawerDialog.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "OverlayDrawerDialog", {
-    enumerable: true,
-    get: function() {
-        return OverlayDrawerDialog;
-    }
-});
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _reactdialog = require("@fluentui/react-dialog");
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const renderOverlayDrawerDialog_unstable = (state, contextValues)=>{
-    const { content, trigger } = state;
-    return /*#__PURE__*/ _react.createElement(_reactdialog.DialogProvider, {
-        value: contextValues.dialog
-    }, /*#__PURE__*/ _react.createElement(_reactdialog.DialogSurfaceProvider, {
-        value: contextValues.dialogSurface
-    }, trigger, content));
-};
-const OverlayDrawerDialog = /*#__PURE__*/ _react.memo((props)=>{
-    const state = (0, _reactdialog.useDialog_unstable)(props);
-    const contextValues = (0, _reactdialog.useDialogContextValues_unstable)(state);
-    return renderOverlayDrawerDialog_unstable(state, contextValues);
-});
-OverlayDrawerDialog.displayName = 'OverlayDrawerDialog';

package/lib-commonjs/components/OverlayDrawer/OverlayDrawerDialog.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["OverlayDrawerDialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  type DialogContextValues,\n  type DialogProps,\n  DialogProvider,\n  type DialogState,\n  DialogSurfaceProvider,\n  useDialog_unstable,\n  useDialogContextValues_unstable,\n} from '@fluentui/react-dialog';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst renderOverlayDrawerDialog_unstable = (state: DialogState, contextValues: DialogContextValues) => {\n  const { content, trigger } = state;\n\n  return (\n    <DialogProvider value={contextValues.dialog}>\n      <DialogSurfaceProvider value={contextValues.dialogSurface}>\n        {trigger}\n        {content}\n      </DialogSurfaceProvider>\n    </DialogProvider>\n  );\n};\n\n/**\n * Temporary component to render Dialog without built-in motion as Drawer has own motion implementation.\n *\n * @todo Remove after https://github.com/microsoft/fluentui/issues/30700.\n * @internal\n */\nexport const OverlayDrawerDialog: React.FC<DialogProps> = React.memo(props => {\n  const state = useDialog_unstable(props);\n  const contextValues = useDialogContextValues_unstable(state);\n\n  return renderOverlayDrawerDialog_unstable(state, contextValues);\n});\n\nOverlayDrawerDialog.displayName = 'OverlayDrawerDialog';\n"],"names":["OverlayDrawerDialog","renderOverlayDrawerDialog_unstable","state","contextValues","content","trigger","React","createElement","DialogProvider","value","dialog","DialogSurfaceProvider","dialogSurface","memo","props","useDialog_unstable","useDialogContextValues_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA+BaA;;;eAAAA;;;;iEA/BU;6BAShB;AAEP,gEAAgE;AAChE,MAAMC,qCAAqC,CAACC,OAAoBC;IAC9D,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGH;IAE7B,OAAA,WAAA,GACEI,OAAAC,aAAA,CAACC,2BAAAA,EAAAA;QAAeC,OAAON,cAAcO,MAAM;qBACzCJ,OAAAC,aAAA,CAACI,kCAAAA,EAAAA;QAAsBF,OAAON,cAAcS,aAAa;OACtDP,SACAD;AAIT;AAQO,MAAMJ,sBAAAA,WAAAA,GAA6CM,OAAMO,IAAI,CAACC,CAAAA;IACnE,MAAMZ,QAAQa,IAAAA,+BAAAA,EAAmBD;IACjC,MAAMX,gBAAgBa,IAAAA,4CAAAA,EAAgCd;IAEtD,OAAOD,mCAAmCC,OAAOC;AACnD;AAEAH,oBAAoBiB,WAAW,GAAG"}