npm - @fluentui/react-drawer - Versions diffs - 9.5.13 → 9.5.15 - Mend

@fluentui/react-drawer 9.5.13 → 9.5.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,39 @@
 # Change Log - @fluentui/react-drawer
-This log was last generated on Tue, 10 Sep 2024 10:15:06 GMT and should not be manually modified.
+This log was last generated on Mon, 23 Sep 2024 12:36:00 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.5.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.5.15)
+Mon, 23 Sep 2024 12:36:00 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.5.14..@fluentui/react-drawer_v9.5.15)
+### Patches
+- fix: add correct direction of animations when RTL ([PR #32813](https://github.com/microsoft/fluentui/pull/32813) by marcosvmmoura@gmail.com)
+- Bump @fluentui/react-dialog to v9.11.15 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.44 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
+- Bump @fluentui/react-motion to v9.5.2 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.20.1 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
+- Bump @fluentui/react-tabster to v9.22.7 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
+- Bump @fluentui/react-theme to v9.1.20 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
+- Bump @fluentui/react-utilities to v9.18.15 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
+## [9.5.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.5.14)
+Fri, 13 Sep 2024 00:49:24 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.5.13..@fluentui/react-drawer_v9.5.14)
+### Patches
+- fix: update scroll state when children changes ([PR #32818](https://github.com/microsoft/fluentui/pull/32818) by marcosvmmoura@gmail.com)
+- fix: apply position: absolute when mountNode is passed ([PR #32816](https://github.com/microsoft/fluentui/pull/32816) by marcosvmmoura@gmail.com)
+- Bump @fluentui/react-dialog to v9.11.14 ([PR #32371](https://github.com/microsoft/fluentui/pull/32371) by beachball)
 ## [9.5.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.5.13)
-Tue, 10 Sep 2024 10:15:06 GMT
+Tue, 10 Sep 2024 10:19:06 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.5.12..@fluentui/react-drawer_v9.5.13)
 ### Patches

package/dist/index.d.ts CHANGED Viewed

@@ -7,6 +7,7 @@ import type { DialogSurfaceProps } from '@fluentui/react-dialog';
 import type { DialogSurfaceSlots } from '@fluentui/react-dialog';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
+import { ProviderContextValue_unstable } from '@fluentui/react-shared-contexts';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -178,7 +179,7 @@ export declare type DrawerHeaderTitleSlots = {
  */
 export declare type DrawerHeaderTitleState = ComponentState<DrawerHeaderTitleSlots>;
-declare type DrawerMotionParams = Required<Pick<DrawerBaseProps, 'size' | 'position'>>;
+declare type DrawerMotionParams = Required<Pick<DrawerBaseProps, 'size' | 'position'> & Pick<ProviderContextValue_unstable, 'dir'>>;
 /**
  * Drawer Props
@@ -309,7 +310,7 @@ export declare type OverlayDrawerSlots = {
 /**
  * State used in rendering OverlayDrawer
  */
-export declare type OverlayDrawerState = ComponentState<OverlayDrawerInternalSlots> & Required<DrawerBaseState>;
+export declare type OverlayDrawerState = ComponentState<OverlayDrawerInternalSlots> & Required<DrawerBaseState> & Pick<OverlayDrawerProps, 'mountNode'>;
 declare type OverlayDrawerSurfaceMotionParams = Required<Pick<DrawerBaseProps, 'size'>>;

package/lib/components/DrawerBody/useDrawerBody.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { useDrawerContext_unstable } from '../../contexts/drawerContext';
  *
  * Get the current scroll state of the DrawerBody.
  *
- * @param param0 - HTMLElement to check scroll state of
+ * @param element - HTMLElement to check scroll state of
  */ const getScrollState = ({ scrollTop, scrollHeight, clientHeight })=>{
     if (scrollHeight <= clientHeight) {
         return 'none';
@@ -31,28 +31,34 @@ import { useDrawerContext_unstable } from '../../contexts/drawerContext';
     const { setScrollState } = useDrawerContext_unstable();
     const scrollRef = React.useRef(null);
     const [setAnimationFrame, cancelAnimationFrame] = useAnimationFrame();
+    const updateScrollState = React.useCallback(()=>{
+        if (!scrollRef.current) {
+            return;
+        }
+        setScrollState(getScrollState(scrollRef.current));
+    }, [
+        setScrollState
+    ]);
     const onScroll = React.useCallback(()=>{
         cancelAnimationFrame();
-        setAnimationFrame(()=>{
-            if (!scrollRef.current) {
-                return;
-            }
-            setScrollState(getScrollState(scrollRef.current));
-        });
+        setAnimationFrame(()=>updateScrollState());
     }, [
         cancelAnimationFrame,
         setAnimationFrame,
-        setScrollState
+        updateScrollState
     ]);
     useIsomorphicLayoutEffect(()=>{
-        if (!scrollRef.current) {
-            return;
-        }
-        setScrollState(getScrollState(scrollRef.current));
+        updateScrollState();
+    /* update scroll state when children changes */ }, [
+        props.children,
+        updateScrollState
+    ]);
+    useIsomorphicLayoutEffect(()=>{
+        updateScrollState();
         return ()=>cancelAnimationFrame();
     }, [
         cancelAnimationFrame,
-        setScrollState
+        updateScrollState
     ]);
     return {
         components: {

package/lib/components/DrawerBody/useDrawerBody.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDrawerBody.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n mergeCallbacks,\n slot,\n useAnimationFrame,\n useMergedRefs,\n useIsomorphicLayoutEffect,\n getIntrinsicElementProps,\n} from '@fluentui/react-utilities';\n\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\nimport { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\n\n/*\n @internal\n \n Get the current scroll state of the DrawerBody.\n \n @param ~~param0~~ - HTMLElement to check scroll state of\n /\nconst getScrollState = ({ scrollTop, scrollHeight, clientHeight }: HTMLElement): DrawerScrollState => {\n if (scrollHeight <= clientHeight) {\n return 'none';\n }\n\n if (scrollTop === 0) {\n return 'top';\n }\n\n if (scrollTop + clientHeight === scrollHeight) {\n return 'bottom';\n }\n\n return 'middle';\n};\n\n/\n Create the state required to render DrawerBody.\n \n The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,\n * before being passed to renderDrawerBody_unstable.\n \n @param props - props from this instance of DrawerBody\n * @param ref - reference to root HTMLElement of DrawerBody\n */\nexport const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HTMLElement>): DrawerBodyState => {\n const { setScrollState } = useDrawerContext_unstable();\n\n const scrollRef = React.useRef<HTMLDivElement \| null>(null);\n const [setAnimationFrame, cancelAnimationFrame] = useAnimationFrame();\n\n const ~~onScroll~~ = React.useCallback(() => {\n ~~cancelAnimationFrame();\n setAnimationFrame(() => {\n~~ if (!scrollRef.current) {\n return;\n }\n\n setScrollState(getScrollState(scrollRef.current));\n });\n }, [cancelAnimationFrame, setAnimationFrame, ~~setScrollState~~]);\n\n useIsomorphicLayoutEffect(() => {\n if (~~!scrollRef.current~~) {\n ~~return~~;\n }\n\n ~~setScrollState~~(~~getScrollState(scrollRef.current~~));\n\n return () => cancelAnimationFrame();\n }, [cancelAnimationFrame, ~~setScrollState~~]);\n\n return {\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps<DrawerBodyProps>('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs<HTMLDivElement>(ref as React.Ref<HTMLDivElement>, scrollRef),\n ...props,\n onScroll: mergeCallbacks(props.onScroll, onScroll),\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","mergeCallbacks","slot","useAnimationFrame","useMergedRefs","useIsomorphicLayoutEffect","getIntrinsicElementProps","useDrawerContext_unstable","getScrollState","scrollTop","scrollHeight","clientHeight","useDrawerBody_unstable","props","ref","setScrollState","scrollRef","useRef","setAnimationFrame","cancelAnimationFrame","~~onScroll~~","useCallback","current","components","root","always","elementType"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,cAAc,EACdC,IAAI,EACJC,iBAAiB,EACjBC,aAAa,EACbC,yBAAyB,EACzBC,wBAAwB,QACnB,4BAA4B;AAEnC,SAASC,yBAAyB,QAAQ,+BAA+B;AAKzE;;;;;;CAMC,GACD,MAAMC,iBAAiB,CAAC,EAAEC,SAAS,EAAEC,YAAY,EAAEC,YAAY,EAAe;IAC5E,IAAID,gBAAgBC,cAAc;QAChC,OAAO;IACT;IAEA,IAAIF,cAAc,GAAG;QACnB,OAAO;IACT;IAEA,IAAIA,YAAYE,iBAAiBD,cAAc;QAC7C,OAAO;IACT;IAEA,OAAO;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAME,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,cAAc,EAAE,GAAGR;IAE3B,MAAMS,YAAYhB,MAAMiB,MAAM,CAAwB;IACtD,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGhB;IAElD,MAAMiB,~~WAAWpB~~,MAAMqB,WAAW,CAAC;~~QACjCF;QACAD~~,~~kBAAkB;YAChB,~~IAAI,~~CAACF~~,UAAUM,OAAO,EAAE;~~gBACtB~~;~~YACF~~;~~YAEAP~~,eAAeP,eAAeQ,UAAUM,OAAO;~~QACjD~~;~~IACF~~,GAAG;~~QAACH~~;QAAsBD;~~QAAmBH~~;~~KAAe~~;~~IAE5DV~~,0BAA0B;~~QACxB~~,~~IAAI~~,~~CAACW~~,~~UAAUM~~,~~OAAO~~,~~EAAE~~;~~YACtB~~;~~QACF~~;~~QAEAP~~,~~eAAeP,eAAeQ,UAAUM,OAAO~~;~~QAE/C~~,OAAO,~~IAAMH~~;IACf,GAAG;QAACA;~~QAAsBJ~~;~~KAAe~~;~~IAEzC~~,OAAO;~~QACLQ~~,YAAY;YACVC,MAAM;QACR;QAEAA,~~MAAMtB~~,~~KAAKuB~~,MAAM,~~CACfnB~~,yBAA0C,OAAO;YAC/C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FQ,KAAKV,cAA8BU,KAAkCE;YACrE,GAAGH,KAAK;~~YACRO~~,~~UAAUnB~~,eAAeY,~~MAAMO~~,QAAQ,EAAEA;QAC3C,IACA;~~YAAEM~~,aAAa;QAAM;IAEzB;AACF,EAAE"}
1	+ {"version":3,"sources":["useDrawerBody.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n mergeCallbacks,\n slot,\n useAnimationFrame,\n useMergedRefs,\n useIsomorphicLayoutEffect,\n getIntrinsicElementProps,\n} from '@fluentui/react-utilities';\n\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\nimport { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\n\n/*\n @internal\n \n Get the current scroll state of the DrawerBody.\n \n @param element - HTMLElement to check scroll state of\n /\nconst getScrollState = ({ scrollTop, scrollHeight, clientHeight }: HTMLElement): DrawerScrollState => {\n if (scrollHeight <= clientHeight) {\n return 'none';\n }\n\n if (scrollTop === 0) {\n return 'top';\n }\n\n if (scrollTop + clientHeight === scrollHeight) {\n return 'bottom';\n }\n\n return 'middle';\n};\n\n/\n Create the state required to render DrawerBody.\n \n The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,\n * before being passed to renderDrawerBody_unstable.\n \n @param props - props from this instance of DrawerBody\n * @param ref - reference to root HTMLElement of DrawerBody\n /\nexport const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HTMLElement>): DrawerBodyState => {\n const { setScrollState } = useDrawerContext_unstable();\n\n const scrollRef = React.useRef<HTMLDivElement \| null>(null);\n const [setAnimationFrame, cancelAnimationFrame] = useAnimationFrame();\n\n const updateScrollState = React.useCallback(() => {\n if (!scrollRef.current) {\n return;\n }\n\n setScrollState(getScrollState(scrollRef.current));\n }, [setScrollState]);\n\n const onScroll = React.useCallback(() => {\n cancelAnimationFrame();\n setAnimationFrame(() => updateScrollState());\n }, [cancelAnimationFrame, setAnimationFrame, updateScrollState]);\n\n useIsomorphicLayoutEffect(() => {\n updateScrollState();\n / update scroll state when children changes */\n }, [props.children, updateScrollState]);\n\n useIsomorphicLayoutEffect(() => {\n updateScrollState();\n\n return () => cancelAnimationFrame();\n }, [cancelAnimationFrame, updateScrollState]);\n\n return {\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps<DrawerBodyProps>('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs<HTMLDivElement>(ref as React.Ref<HTMLDivElement>, scrollRef),\n ...props,\n onScroll: mergeCallbacks(props.onScroll, onScroll),\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","mergeCallbacks","slot","useAnimationFrame","useMergedRefs","useIsomorphicLayoutEffect","getIntrinsicElementProps","useDrawerContext_unstable","getScrollState","scrollTop","scrollHeight","clientHeight","useDrawerBody_unstable","props","ref","setScrollState","scrollRef","useRef","setAnimationFrame","cancelAnimationFrame","updateScrollState","useCallback","current","onScroll","children","components","root","always","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,cAAc,EACdC,IAAI,EACJC,iBAAiB,EACjBC,aAAa,EACbC,yBAAyB,EACzBC,wBAAwB,QACnB,4BAA4B;AAEnC,SAASC,yBAAyB,QAAQ,+BAA+B;AAKzE;;;;;;CAMC,GACD,MAAMC,iBAAiB,CAAC,EAAEC,SAAS,EAAEC,YAAY,EAAEC,YAAY,EAAe;IAC5E,IAAID,gBAAgBC,cAAc;QAChC,OAAO;IACT;IAEA,IAAIF,cAAc,GAAG;QACnB,OAAO;IACT;IAEA,IAAIA,YAAYE,iBAAiBD,cAAc;QAC7C,OAAO;IACT;IAEA,OAAO;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAME,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,cAAc,EAAE,GAAGR;IAE3B,MAAMS,YAAYhB,MAAMiB,MAAM,CAAwB;IACtD,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGhB;IAElD,MAAMiB,oBAAoBpB,MAAMqB,WAAW,CAAC;QAC1C,IAAI,CAACL,UAAUM,OAAO,EAAE;YACtB;QACF;QAEAP,eAAeP,eAAeQ,UAAUM,OAAO;IACjD,GAAG;QAACP;KAAe;IAEnB,MAAMQ,WAAWvB,MAAMqB,WAAW,CAAC;QACjCF;QACAD,kBAAkB,IAAME;IAC1B,GAAG;QAACD;QAAsBD;QAAmBE;KAAkB;IAE/Df,0BAA0B;QACxBe;IACA,6CAA6C,GAC/C,GAAG;QAACP,MAAMW,QAAQ;QAAEJ;KAAkB;IAEtCf,0BAA0B;QACxBe;QAEA,OAAO,IAAMD;IACf,GAAG;QAACA;QAAsBC;KAAkB;IAE5C,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMxB,KAAKyB,MAAM,CACfrB,yBAA0C,OAAO;YAC/C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FQ,KAAKV,cAA8BU,KAAkCE;YACrE,GAAGH,KAAK;YACRU,UAAUtB,eAAeY,MAAMU,QAAQ,EAAEA;QAC3C,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/InlineDrawer/useInlineDrawer.js CHANGED Viewed

@@ -1,6 +1,7 @@
+import * as React from 'react';
 import { presenceMotionSlot } from '@fluentui/react-motion';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
-import * as React from 'react';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { InlineDrawerMotion } from '../../shared/drawerMotions';
 import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
 const STATIC_MOTION = {
@@ -20,6 +21,7 @@ const STATIC_MOTION = {
  */ export const useInlineDrawer_unstable = (props, ref)=>{
     const { size, position, open } = useDrawerDefaultProps(props);
     const { separator = false, surfaceMotion } = props;
+    const { dir } = useFluent();
     const state = {
         components: {
             root: 'div',
@@ -43,6 +45,7 @@ const STATIC_MOTION = {
             defaultProps: {
                 position,
                 size,
+                dir,
                 visible: open,
                 unmountOnExit: true
             }

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

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

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

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

package/lib/components/OverlayDrawer/useOverlayDrawer.js CHANGED Viewed

@@ -1,6 +1,7 @@
+import * as React from 'react';
 import { Dialog } from '@fluentui/react-dialog';
 import { slot } from '@fluentui/react-utilities';
-import * as React from 'react';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { OverlayDrawerMotion, OverlaySurfaceBackdropMotion } from '../../shared/drawerMotions';
 import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
 import { OverlayDrawerSurface } from './OverlayDrawerSurface';
@@ -21,7 +22,8 @@ const STATIC_MOTION = {
  * @param ref - reference to root HTMLElement of OverlayDrawer
  */ export const useOverlayDrawer_unstable = (props, ref)=>{
     const { open, size, position } = useDrawerDefaultProps(props);
-    const { backdropMotion, modalType = 'modal', inertTrapFocus, onOpenChange, surfaceMotion } = props;
+    const { backdropMotion, modalType = 'modal', inertTrapFocus, onOpenChange, surfaceMotion, mountNode } = props;
+    const { dir } = useFluent();
     const backdropProps = slot.resolveShorthand(props.backdrop);
     const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;
     const root = slot.always({
@@ -46,7 +48,8 @@ const STATIC_MOTION = {
         modalType,
         surfaceMotion: mergePresenceSlots(surfaceMotion, OverlayDrawerMotion, {
             position,
-            size
+            size,
+            dir
         }),
         /**
        * children is not needed here because we construct the children in the render function,
@@ -65,6 +68,7 @@ const STATIC_MOTION = {
         open,
         size,
         position,
+        mountNode,
         motion: STATIC_MOTION
     };
 };

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useOverlayDrawer.tsx"],"sourcesContent":["import { Dialog } from '@fluentui/react-dialog';\nimport { slot } from '@fluentui/react-utilities';\nimport * as ~~React~~ from 'react';\n\nimport { OverlayDrawerMotion, OverlaySurfaceBackdropMotion } from '../../shared/drawerMotions';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { OverlayDrawerProps, OverlayDrawerState } from './OverlayDrawer.types';\nimport { OverlayDrawerSurface } from './OverlayDrawerSurface';\nimport { mergePresenceSlots } from '../../shared/drawerMotionUtils';\n\nconst STATIC_MOTION = {\n active: true,\n canRender: true,\n ref: React.createRef<HTMLDivElement>(),\n type: 'idle' as const,\n};\n\n/*\n Create the state required to render OverlayDrawer.\n \n The returned state can be modified with hooks such as useOverlayDrawerStyles_unstable,\n * before being passed to renderOverlayDrawer_unstable.\n \n @param props - props from this instance of OverlayDrawer\n * @param ref - reference to root HTMLElement of OverlayDrawer\n /\nexport const useOverlayDrawer_unstable = (\n props: OverlayDrawerProps,\n ref: React.Ref<HTMLElement>,\n): OverlayDrawerState => {\n const { open, size, position } = useDrawerDefaultProps(props);\n const { backdropMotion, modalType = 'modal', inertTrapFocus, onOpenChange, surfaceMotion } = props;\n\n const backdropProps = slot.resolveShorthand(props.backdrop);\n const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;\n\n const root = slot.always(\n {\n ...props,\n ref,\n backdrop: hasCustomBackdrop ? { ...backdropProps } : null,\n backdropMotion: mergePresenceSlots(backdropMotion, OverlaySurfaceBackdropMotion, { size }),\n },\n {\n /\n Drawer accepts a `div` or `aside` element type, but Dialog only accepts a `div` element type.\n * We need to cast the ref to a `div` element type to not break Dialog's ref type.\n /\n elementType: OverlayDrawerSurface as unknown as 'div',\n },\n );\n\n const dialog = slot.always(\n {\n open,\n onOpenChange,\n inertTrapFocus,\n modalType,\n surfaceMotion: mergePresenceSlots(surfaceMotion, OverlayDrawerMotion, { position, size }),\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 open,\n size,\n position,\n motion: STATIC_MOTION,\n };\n};\n"],"names":["Dialog","slot","~~React~~","OverlayDrawerMotion","OverlaySurfaceBackdropMotion","useDrawerDefaultProps","OverlayDrawerSurface","mergePresenceSlots","STATIC_MOTION","active","canRender","ref","createRef","type","useOverlayDrawer_unstable","props","open","size","position","backdropMotion","modalType","inertTrapFocus","onOpenChange","surfaceMotion","backdropProps","resolveShorthand","backdrop","hasCustomBackdrop","root","always","elementType","dialog","children","components","motion"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":"AAAA,~~SAASA~~,MAAM,QAAQ,yBAAyB;AAChD,SAASC,IAAI,QAAQ,4BAA4B;AACjD,~~YAAYC~~,~~WAAW~~,QAAQ;~~AAE/B~~,SAASC,mBAAmB,EAAEC,4BAA4B,QAAQ,6BAA6B;AAC/F,SAASC,qBAAqB,QAAQ,qCAAqC;AAE3E,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,~~mBAAKT~~,~~MAAMU~~,SAAS;IACpBC,MAAM;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAJ;IAEA,MAAM,EAAEK,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGb,sBAAsBU;IACvD,MAAM,EAAEI,cAAc,EAAEC,YAAY,OAAO,EAAEC,cAAc,EAAEC,YAAY,EAAEC,aAAa,EAAE,~~GAAGR~~;~~IAE7F~~,~~MAAMS~~,~~gBAAgBvB~~,~~KAAKwB~~,gBAAgB,~~CAACV~~,~~MAAMW~~,QAAQ;IAC1D,MAAMC,~~oBAAoBP~~,cAAc,~~eAAeI~~,kBAAkB;IAEzE,MAAMI,~~OAAO3B~~,~~KAAK4B~~,MAAM,CACtB;QACE,~~GAAGd~~,KAAK;QACRJ;~~QACAe~~,UAAUC,oBAAoB;YAAE,GAAGH,aAAa;QAAC,IAAI;~~QACrDL~~,gBAAgBZ,mBAAmBY,gBAAgBf,8BAA8B;YAAEa;QAAK;IAC1F,GACA;QACE;;;OAGC,~~GACDa~~,~~aAAaxB~~;IACf;IAGF,~~MAAMyB~~,~~SAAS9B~~,~~KAAK4B~~,MAAM,CACxB;~~QACEb~~;QACAM;QACAD;QACAD;QACAG,eAAehB,mBAAmBgB,eAAepB,qBAAqB;YAAEe;YAAUD;~~QAAK~~;~~QACvF~~;;;OAGC,~~GACDe~~,UAAU;IACZ,GACA;QACEF,~~aAAa9B~~;IACf;IAGF,OAAO;~~QACLiC~~,YAAY;YACVL,~~MAAMtB~~;~~YACNyB~~,~~QAAQ/B~~;QACV;~~QAEA4B~~;QACAG;~~QAEAf~~;QACAC;QACAC;~~QACAgB~~,~~QAAQ1B~~;IACV;AACF,EAAE"}
1	+ {"version":3,"sources":["useOverlayDrawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Dialog } from '@fluentui/react-dialog';\nimport { slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { OverlayDrawerMotion, OverlaySurfaceBackdropMotion } from '../../shared/drawerMotions';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { OverlayDrawerProps, OverlayDrawerState } from './OverlayDrawer.types';\nimport { OverlayDrawerSurface } from './OverlayDrawerSurface';\nimport { mergePresenceSlots } from '../../shared/drawerMotionUtils';\n\nconst STATIC_MOTION = {\n active: true,\n canRender: true,\n ref: React.createRef<HTMLDivElement>(),\n type: 'idle' as const,\n};\n\n/*\n Create the state required to render OverlayDrawer.\n \n The returned state can be modified with hooks such as useOverlayDrawerStyles_unstable,\n * before being passed to renderOverlayDrawer_unstable.\n \n @param props - props from this instance of OverlayDrawer\n * @param ref - reference to root HTMLElement of OverlayDrawer\n /\nexport const useOverlayDrawer_unstable = (\n props: OverlayDrawerProps,\n ref: React.Ref<HTMLElement>,\n): OverlayDrawerState => {\n const { open, size, position } = useDrawerDefaultProps(props);\n const { backdropMotion, modalType = 'modal', inertTrapFocus, onOpenChange, surfaceMotion, mountNode } = props;\n const { dir } = useFluent();\n\n const backdropProps = slot.resolveShorthand(props.backdrop);\n const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;\n\n const root = slot.always(\n {\n ...props,\n ref,\n backdrop: hasCustomBackdrop ? { ...backdropProps } : null,\n backdropMotion: mergePresenceSlots(backdropMotion, OverlaySurfaceBackdropMotion, { size }),\n },\n {\n /\n Drawer accepts a `div` or `aside` element type, but Dialog only accepts a `div` element type.\n * We need to cast the ref to a `div` element type to not break Dialog's ref type.\n /\n elementType: OverlayDrawerSurface as unknown as 'div',\n },\n );\n\n const dialog = slot.always(\n {\n open,\n onOpenChange,\n inertTrapFocus,\n modalType,\n surfaceMotion: mergePresenceSlots(surfaceMotion, OverlayDrawerMotion, { position, size, dir }),\n /\n children is not needed here because we construct the children in the render function,\n * but it's required by DialogProps\n */\n children: null as unknown as JSX.Element,\n },\n {\n elementType: Dialog,\n },\n );\n\n return {\n components: {\n root: OverlayDrawerSurface,\n dialog: Dialog,\n },\n\n root,\n dialog,\n\n open,\n size,\n position,\n mountNode,\n motion: STATIC_MOTION,\n };\n};\n"],"names":["React","Dialog","slot","useFluent_unstable","useFluent","OverlayDrawerMotion","OverlaySurfaceBackdropMotion","useDrawerDefaultProps","OverlayDrawerSurface","mergePresenceSlots","STATIC_MOTION","active","canRender","ref","createRef","type","useOverlayDrawer_unstable","props","open","size","position","backdropMotion","modalType","inertTrapFocus","onOpenChange","surfaceMotion","mountNode","dir","backdropProps","resolveShorthand","backdrop","hasCustomBackdrop","root","always","elementType","dialog","children","components","motion"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,mBAAmB,EAAEC,4BAA4B,QAAQ,6BAA6B;AAC/F,SAASC,qBAAqB,QAAQ,qCAAqC;AAE3E,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,mBAAKb,MAAMc,SAAS;IACpBC,MAAM;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAJ;IAEA,MAAM,EAAEK,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGb,sBAAsBU;IACvD,MAAM,EAAEI,cAAc,EAAEC,YAAY,OAAO,EAAEC,cAAc,EAAEC,YAAY,EAAEC,aAAa,EAAEC,SAAS,EAAE,GAAGT;IACxG,MAAM,EAAEU,GAAG,EAAE,GAAGvB;IAEhB,MAAMwB,gBAAgB1B,KAAK2B,gBAAgB,CAACZ,MAAMa,QAAQ;IAC1D,MAAMC,oBAAoBT,cAAc,eAAeM,kBAAkB;IAEzE,MAAMI,OAAO9B,KAAK+B,MAAM,CACtB;QACE,GAAGhB,KAAK;QACRJ;QACAiB,UAAUC,oBAAoB;YAAE,GAAGH,aAAa;QAAC,IAAI;QACrDP,gBAAgBZ,mBAAmBY,gBAAgBf,8BAA8B;YAAEa;QAAK;IAC1F,GACA;QACE;;;OAGC,GACDe,aAAa1B;IACf;IAGF,MAAM2B,SAASjC,KAAK+B,MAAM,CACxB;QACEf;QACAM;QACAD;QACAD;QACAG,eAAehB,mBAAmBgB,eAAepB,qBAAqB;YAAEe;YAAUD;YAAMQ;QAAI;QAC5F;;;OAGC,GACDS,UAAU;IACZ,GACA;QACEF,aAAajC;IACf;IAGF,OAAO;QACLoC,YAAY;YACVL,MAAMxB;YACN2B,QAAQlC;QACV;QAEA+B;QACAG;QAEAjB;QACAC;QACAC;QACAM;QACAY,QAAQ5B;IACV;AACF,EAAE"}

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

@@ -20,9 +20,12 @@ const useDrawerRootStyles = /*#__PURE__*/__styles({
     Bhzewxz: "f198g47y",
     Bqenvij: "fub80nq",
     a9b677: "fr97h3j"
+  },
+  absolute: {
+    qhf8xq: "f1euv43f"
   }
 }, {
-  d: [".f198g47y{top:auto;}", ".fub80nq{height:var(--fui-Drawer--size);}", ".fr97h3j{width:100vw;}"]
+  d: [".f198g47y{top:auto;}", ".fub80nq{height:var(--fui-Drawer--size);}", ".fr97h3j{width:100vw;}", ".f1euv43f{position:absolute;}"]
 });
 /**
  * Apply styling to the OverlayDrawer slots based on the state
@@ -33,10 +36,11 @@ export const useOverlayDrawerStyles_unstable = state => {
   const baseClassNames = useDrawerBaseClassNames(state);
   const resetStyles = useDrawerResetStyles();
   const rootStyles = useDrawerRootStyles();
+  const absoluteStyles = !!state.mountNode && rootStyles.absolute;
   const backdrop = state.root.backdrop;
-  state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], state.root.className);
+  state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], absoluteStyles, state.root.className);
   if (backdrop) {
-    backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, backdrop.className);
+    backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, absoluteStyles, backdrop.className);
   }
   return state;
 };

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

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

package/lib/shared/drawerMotions.js CHANGED Viewed

@@ -9,18 +9,30 @@ const durations = {
 };
 /**
  * @internal
- */ export const InlineDrawerMotion = createPresenceComponent(({ position, size })=>{
+ */ export function getPositionTransform(position, sizeVar, dir) {
+    const leftToRightTransform = `translate3d(var(${sizeVar}), 0, 0)`;
+    const rightToLeftTransform = `translate3d(calc(var(${sizeVar}) * -1), 0, 0)`;
+    const bottomToTopTransform = `translate3d(0, var(${sizeVar}), 0)`;
+    if (position === 'start') {
+        return dir === 'rtl' ? rightToLeftTransform : leftToRightTransform;
+    }
+    if (position === 'end') {
+        return dir === 'rtl' ? leftToRightTransform : rightToLeftTransform;
+    }
+    if (position === 'bottom') {
+        return bottomToTopTransform;
+    }
+    return 'translate3d(0, 0, 0)';
+}
+/**
+ * @internal
+ */ export const InlineDrawerMotion = createPresenceComponent(({ position, size, dir })=>{
     const keyframes = [
         {
-            ...position === 'start' && {
-                transform: `translate3d(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`
-            },
-            ...position === 'end' && {
-                transform: `translate3d(var(${drawerCSSVars.drawerSizeVar}), 0, 0)`
-            },
-            ...position === 'bottom' && {
-                transform: `translate3d(0, var(${drawerCSSVars.drawerSizeVar}), 0)`
-            },
+            /**
+       * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs
+       * The work will be done in the #32817
+       */ transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),
             opacity: 0
         },
         {
@@ -46,18 +58,13 @@ const durations = {
 });
 /**
  * @internal
- */ export const OverlayDrawerMotion = createPresenceComponent(({ position, size })=>{
+ */ export const OverlayDrawerMotion = createPresenceComponent(({ position, size, dir })=>{
     const keyframes = [
         {
-            ...position === 'start' && {
-                transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`
-            },
-            ...position === 'end' && {
-                transform: `translate3d(calc(var(${drawerCSSVars.drawerSizeVar}) * 1), 0, 0)`
-            },
-            ...position === 'bottom' && {
-                transform: `translate3d(0, calc(var(${drawerCSSVars.drawerSizeVar}) * 1), 0)`
-            },
+            /**
+       * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs
+       * The work will be done in the #32817
+       */ transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),
             boxShadow: `0px ${tokens.colorTransparentBackground}`,
             opacity: 0
         },

package/lib/shared/drawerMotions.js.map CHANGED Viewed

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

package/lib-commonjs/components/DrawerBody/useDrawerBody.js CHANGED Viewed

@@ -17,7 +17,7 @@ const _drawerContext = require("../../contexts/drawerContext");
  *
  * Get the current scroll state of the DrawerBody.
  *
- * @param param0 - HTMLElement to check scroll state of
+ * @param element - HTMLElement to check scroll state of
  */ const getScrollState = ({ scrollTop, scrollHeight, clientHeight })=>{
     if (scrollHeight <= clientHeight) {
         return 'none';
@@ -34,28 +34,34 @@ const useDrawerBody_unstable = (props, ref)=>{
     const { setScrollState } = (0, _drawerContext.useDrawerContext_unstable)();
     const scrollRef = _react.useRef(null);
     const [setAnimationFrame, cancelAnimationFrame] = (0, _reactutilities.useAnimationFrame)();
+    const updateScrollState = _react.useCallback(()=>{
+        if (!scrollRef.current) {
+            return;
+        }
+        setScrollState(getScrollState(scrollRef.current));
+    }, [
+        setScrollState
+    ]);
     const onScroll = _react.useCallback(()=>{
         cancelAnimationFrame();
-        setAnimationFrame(()=>{
-            if (!scrollRef.current) {
-                return;
-            }
-            setScrollState(getScrollState(scrollRef.current));
-        });
+        setAnimationFrame(()=>updateScrollState());
     }, [
         cancelAnimationFrame,
         setAnimationFrame,
-        setScrollState
+        updateScrollState
     ]);
     (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
-        if (!scrollRef.current) {
-            return;
-        }
-        setScrollState(getScrollState(scrollRef.current));
+        updateScrollState();
+    /* update scroll state when children changes */ }, [
+        props.children,
+        updateScrollState
+    ]);
+    (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+        updateScrollState();
         return ()=>cancelAnimationFrame();
     }, [
         cancelAnimationFrame,
-        setScrollState
+        updateScrollState
     ]);
     return {
         components: {

package/lib-commonjs/components/DrawerBody/useDrawerBody.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDrawerBody.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n mergeCallbacks,\n slot,\n useAnimationFrame,\n useMergedRefs,\n useIsomorphicLayoutEffect,\n getIntrinsicElementProps,\n} from '@fluentui/react-utilities';\n\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\nimport { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\n\n/*\n @internal\n \n Get the current scroll state of the DrawerBody.\n \n @param ~~param0~~ - HTMLElement to check scroll state of\n /\nconst getScrollState = ({ scrollTop, scrollHeight, clientHeight }: HTMLElement): DrawerScrollState => {\n if (scrollHeight <= clientHeight) {\n return 'none';\n }\n\n if (scrollTop === 0) {\n return 'top';\n }\n\n if (scrollTop + clientHeight === scrollHeight) {\n return 'bottom';\n }\n\n return 'middle';\n};\n\n/\n Create the state required to render DrawerBody.\n \n The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,\n * before being passed to renderDrawerBody_unstable.\n \n @param props - props from this instance of DrawerBody\n * @param ref - reference to root HTMLElement of DrawerBody\n */\nexport const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HTMLElement>): DrawerBodyState => {\n const { setScrollState } = useDrawerContext_unstable();\n\n const scrollRef = React.useRef<HTMLDivElement \| null>(null);\n const [setAnimationFrame, cancelAnimationFrame] = useAnimationFrame();\n\n const ~~onScroll~~ = React.useCallback(() => {\n ~~cancelAnimationFrame();\n setAnimationFrame(() => {\n~~ if (!scrollRef.current) {\n return;\n }\n\n setScrollState(getScrollState(scrollRef.current));\n });\n }, [cancelAnimationFrame, setAnimationFrame, ~~setScrollState~~]);\n\n useIsomorphicLayoutEffect(() => {\n if (~~!scrollRef.current~~) {\n ~~return~~;\n }\n\n ~~setScrollState~~(~~getScrollState(scrollRef.current~~));\n\n return () => cancelAnimationFrame();\n }, [cancelAnimationFrame, ~~setScrollState~~]);\n\n return {\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps<DrawerBodyProps>('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs<HTMLDivElement>(ref as React.Ref<HTMLDivElement>, scrollRef),\n ...props,\n onScroll: mergeCallbacks(props.onScroll, onScroll),\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["useDrawerBody_unstable","getScrollState","scrollTop","scrollHeight","clientHeight","props","ref","setScrollState","useDrawerContext_unstable","scrollRef","React","useRef","setAnimationFrame","cancelAnimationFrame","useAnimationFrame","~~onScroll~~","useCallback","current","useIsomorphicLayoutEffect","components","root","slot","always","getIntrinsicElementProps","useMergedRefs","mergeCallbacks","elementType"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+BA+CaA;;;eAAAA;;;;iEA/CU;gCAQhB;+BAEmC;AAK1C;;;;;;CAMC,GACD,MAAMC,iBAAiB,CAAC,EAAEC,SAAS,EAAEC,YAAY,EAAEC,YAAY,EAAe;IAC5E,IAAID,gBAAgBC,cAAc;QAChC,OAAO;IACT;IAEA,IAAIF,cAAc,GAAG;QACnB,OAAO;IACT;IAEA,IAAIA,YAAYE,iBAAiBD,cAAc;QAC7C,OAAO;IACT;IAEA,OAAO;AACT;AAWO,MAAMH,yBAAyB,CAACK,OAAwBC;IAC7D,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,wCAAAA;IAE3B,MAAMC,YAAYC,OAAMC,MAAM,CAAwB;IACtD,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGC,IAAAA,iCAAAA;IAElD,MAAMC,~~WAAWL~~,OAAMM,WAAW,CAAC;~~QACjCH;QACAD~~,~~kBAAkB;YAChB,~~IAAI,~~CAACH~~,UAAUQ,OAAO,EAAE;~~gBACtB~~;~~YACF~~;~~YAEAV~~,eAAeN,eAAeQ,UAAUQ,OAAO;~~QACjD~~;~~IACF~~,GAAG;~~QAACJ~~;QAAsBD;~~QAAmBL~~;~~KAAe~~;~~IAE5DW~~,IAAAA,yCAAAA,EAA0B;~~QACxB~~,~~IAAI~~,~~CAACT~~,~~UAAUQ~~,~~OAAO~~,~~EAAE~~;~~YACtB~~;~~QACF~~;~~QAEAV~~,~~eAAeN~~,~~eAAeQ~~,~~UAAUQ,OAAO~~;~~QAE/C~~,OAAO,~~IAAMJ~~;IACf,GAAG;QAACA;~~QAAsBN~~;~~KAAe~~;~~IAEzC~~,OAAO;~~QACLY~~,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAA0C,OAAO;YAC/C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;~~YAC5FjB~~,~~KAAKkB~~,IAAAA,6BAAAA,~~EAA8BlB~~,KAAkCG;YACrE,GAAGJ,KAAK;~~YACRU~~,~~UAAUU~~,IAAAA,8BAAAA,~~EAAepB~~,~~MAAMU~~,QAAQ,EAAEA;QAC3C,IACA;~~YAAEW~~,aAAa;QAAM;IAEzB;AACF"}
1	+ {"version":3,"sources":["useDrawerBody.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n mergeCallbacks,\n slot,\n useAnimationFrame,\n useMergedRefs,\n useIsomorphicLayoutEffect,\n getIntrinsicElementProps,\n} from '@fluentui/react-utilities';\n\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\nimport { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\n\n/*\n @internal\n \n Get the current scroll state of the DrawerBody.\n \n @param element - HTMLElement to check scroll state of\n /\nconst getScrollState = ({ scrollTop, scrollHeight, clientHeight }: HTMLElement): DrawerScrollState => {\n if (scrollHeight <= clientHeight) {\n return 'none';\n }\n\n if (scrollTop === 0) {\n return 'top';\n }\n\n if (scrollTop + clientHeight === scrollHeight) {\n return 'bottom';\n }\n\n return 'middle';\n};\n\n/\n Create the state required to render DrawerBody.\n \n The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,\n * before being passed to renderDrawerBody_unstable.\n \n @param props - props from this instance of DrawerBody\n * @param ref - reference to root HTMLElement of DrawerBody\n /\nexport const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HTMLElement>): DrawerBodyState => {\n const { setScrollState } = useDrawerContext_unstable();\n\n const scrollRef = React.useRef<HTMLDivElement \| null>(null);\n const [setAnimationFrame, cancelAnimationFrame] = useAnimationFrame();\n\n const updateScrollState = React.useCallback(() => {\n if (!scrollRef.current) {\n return;\n }\n\n setScrollState(getScrollState(scrollRef.current));\n }, [setScrollState]);\n\n const onScroll = React.useCallback(() => {\n cancelAnimationFrame();\n setAnimationFrame(() => updateScrollState());\n }, [cancelAnimationFrame, setAnimationFrame, updateScrollState]);\n\n useIsomorphicLayoutEffect(() => {\n updateScrollState();\n / update scroll state when children changes */\n }, [props.children, updateScrollState]);\n\n useIsomorphicLayoutEffect(() => {\n updateScrollState();\n\n return () => cancelAnimationFrame();\n }, [cancelAnimationFrame, updateScrollState]);\n\n return {\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps<DrawerBodyProps>('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs<HTMLDivElement>(ref as React.Ref<HTMLDivElement>, scrollRef),\n ...props,\n onScroll: mergeCallbacks(props.onScroll, onScroll),\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["useDrawerBody_unstable","getScrollState","scrollTop","scrollHeight","clientHeight","props","ref","setScrollState","useDrawerContext_unstable","scrollRef","React","useRef","setAnimationFrame","cancelAnimationFrame","useAnimationFrame","updateScrollState","useCallback","current","onScroll","useIsomorphicLayoutEffect","children","components","root","slot","always","getIntrinsicElementProps","useMergedRefs","mergeCallbacks","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA+CaA;;;eAAAA;;;;iEA/CU;gCAQhB;+BAEmC;AAK1C;;;;;;CAMC,GACD,MAAMC,iBAAiB,CAAC,EAAEC,SAAS,EAAEC,YAAY,EAAEC,YAAY,EAAe;IAC5E,IAAID,gBAAgBC,cAAc;QAChC,OAAO;IACT;IAEA,IAAIF,cAAc,GAAG;QACnB,OAAO;IACT;IAEA,IAAIA,YAAYE,iBAAiBD,cAAc;QAC7C,OAAO;IACT;IAEA,OAAO;AACT;AAWO,MAAMH,yBAAyB,CAACK,OAAwBC;IAC7D,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,wCAAAA;IAE3B,MAAMC,YAAYC,OAAMC,MAAM,CAAwB;IACtD,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGC,IAAAA,iCAAAA;IAElD,MAAMC,oBAAoBL,OAAMM,WAAW,CAAC;QAC1C,IAAI,CAACP,UAAUQ,OAAO,EAAE;YACtB;QACF;QAEAV,eAAeN,eAAeQ,UAAUQ,OAAO;IACjD,GAAG;QAACV;KAAe;IAEnB,MAAMW,WAAWR,OAAMM,WAAW,CAAC;QACjCH;QACAD,kBAAkB,IAAMG;IAC1B,GAAG;QAACF;QAAsBD;QAAmBG;KAAkB;IAE/DI,IAAAA,yCAAAA,EAA0B;QACxBJ;IACA,6CAA6C,GAC/C,GAAG;QAACV,MAAMe,QAAQ;QAAEL;KAAkB;IAEtCI,IAAAA,yCAAAA,EAA0B;QACxBJ;QAEA,OAAO,IAAMF;IACf,GAAG;QAACA;QAAsBE;KAAkB;IAE5C,OAAO;QACLM,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAA0C,OAAO;YAC/C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FnB,KAAKoB,IAAAA,6BAAAA,EAA8BpB,KAAkCG;YACrE,GAAGJ,KAAK;YACRa,UAAUS,IAAAA,8BAAAA,EAAetB,MAAMa,QAAQ,EAAEA;QAC3C,IACA;YAAEU,aAAa;QAAM;IAEzB;AACF"}

package/lib-commonjs/components/InlineDrawer/useInlineDrawer.js CHANGED Viewed

@@ -9,9 +9,10 @@ Object.defineProperty(exports, "useInlineDrawer_unstable", {
     }
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactmotion = require("@fluentui/react-motion");
 const _reactutilities = require("@fluentui/react-utilities");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _drawerMotions = require("../../shared/drawerMotions");
 const _useDrawerDefaultProps = require("../../shared/useDrawerDefaultProps");
 const STATIC_MOTION = {
@@ -23,6 +24,7 @@ const STATIC_MOTION = {
 const useInlineDrawer_unstable = (props, ref)=>{
     const { size, position, open } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
     const { separator = false, surfaceMotion } = props;
+    const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
     const state = {
         components: {
             root: 'div',
@@ -46,6 +48,7 @@ const useInlineDrawer_unstable = (props, ref)=>{
             defaultProps: {
                 position,
                 size,
+                dir,
                 visible: open,
                 unmountOnExit: true
             }

package/lib-commonjs/components/InlineDrawer/useInlineDrawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useInlineDrawer.ts"],"sourcesContent":["import { presenceMotionSlot } from '@fluentui/react-motion';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as ~~React~~ from 'react';\n\nimport { type DrawerMotionParams, InlineDrawerMotion } from '../../shared/drawerMotions';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { InlineDrawerProps, InlineDrawerState, SurfaceMotionSlotProps } from './InlineDrawer.types';\n\nconst STATIC_MOTION = {\n active: true,\n canRender: true,\n ref: React.createRef<HTMLDivElement>(),\n type: 'idle' as const,\n};\n\n/*\n Create the state required to render InlineDrawer.\n \n The returned state can be modified with hooks such as useInlineDrawerStyles_unstable,\n * before being passed to renderInlineDrawer_unstable.\n \n @param props - props from this instance of InlineDrawer\n * @param ref - reference to root HTMLElement of InlineDrawer\n */\nexport const useInlineDrawer_unstable = (props: InlineDrawerProps, ref: React.Ref<HTMLElement>): InlineDrawerState => {\n const { size, position, open } = useDrawerDefaultProps(props);\n const { separator = false, surfaceMotion } = props;\n\n const state: InlineDrawerState = {\n components: {\n root: 'div',\n // casting from internal type that has required properties\n // to external type that only has optional properties\n // converting to unknown first as both Function component signatures are not compatible\n surfaceMotion: InlineDrawerMotion as unknown as React.FC<SurfaceMotionSlotProps>,\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ...props,\n ref,\n }),\n { elementType: 'div' },\n ),\n\n open,\n position,\n size,\n separator,\n surfaceMotion: presenceMotionSlot<DrawerMotionParams>(surfaceMotion, {\n elementType: InlineDrawerMotion,\n defaultProps: {\n position,\n size,\n visible: open,\n unmountOnExit: true,\n },\n }),\n\n // Deprecated props\n motion: STATIC_MOTION,\n };\n\n return state;\n};\n"],"names":["useInlineDrawer_unstable","STATIC_MOTION","active","canRender","ref","React","createRef","type","props","size","position","open","useDrawerDefaultProps","separator","surfaceMotion","state","components","root","InlineDrawerMotion","slot","always","getIntrinsicElementProps","elementType","presenceMotionSlot","defaultProps","visible","unmountOnExit","motion"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+~~BAwBaA~~;;;eAAAA;;;;~~6BAxBsB~~;gCACY;~~iEACxB~~;+~~BAEqC~~;uCACtB;AAGtC,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,mBAAKC,OAAMC,SAAS;IACpBC,MAAM;AACR;AAWO,MAAMP,2BAA2B,CAACQ,OAA0BJ;IACjE,MAAM,EAAEK,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGC,IAAAA,4CAAAA,EAAsBJ;IACvD,MAAM,EAAEK,YAAY,KAAK,EAAEC,aAAa,EAAE,GAAGN;~~IAE7C~~,~~MAAMO~~,QAA2B;QAC/BC,YAAY;YACVC,MAAM;YACN,0DAA0D;YAC1D,qDAAqD;YACrD,uFAAuF;~~YACvFH~~,~~eAAeI~~,iCAAAA;QACjB;QAEAD,MAAME,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,~~GAAGb~~,KAAK;YACRJ;QACF,IACA;~~YAAEkB~~,aAAa;QAAM;~~QAGvBX~~;QACAD;QACAD;QACAI;QACAC,~~eAAeS~~,IAAAA,+BAAAA,~~EAAuCT~~,eAAe;~~YACnEQ~~,aAAaJ,iCAAAA;YACbM,cAAc;~~gBACZd~~;gBACAD;~~gBACAgB~~,~~SAASd~~;~~gBACTe~~,eAAe;YACjB;QACF;QAEA,mBAAmB;QACnBC,~~QAAQ1B~~;IACV;IAEA,~~OAAOc~~;AACT"}
1	+ {"version":3,"sources":["useInlineDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { type DrawerMotionParams, InlineDrawerMotion } from '../../shared/drawerMotions';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { InlineDrawerProps, InlineDrawerState, SurfaceMotionSlotProps } from './InlineDrawer.types';\n\nconst STATIC_MOTION = {\n active: true,\n canRender: true,\n ref: React.createRef<HTMLDivElement>(),\n type: 'idle' as const,\n};\n\n/*\n Create the state required to render InlineDrawer.\n \n The returned state can be modified with hooks such as useInlineDrawerStyles_unstable,\n * before being passed to renderInlineDrawer_unstable.\n \n @param props - props from this instance of InlineDrawer\n * @param ref - reference to root HTMLElement of InlineDrawer\n */\nexport const useInlineDrawer_unstable = (props: InlineDrawerProps, ref: React.Ref<HTMLElement>): InlineDrawerState => {\n const { size, position, open } = useDrawerDefaultProps(props);\n const { separator = false, surfaceMotion } = props;\n const { dir } = useFluent();\n\n const state: InlineDrawerState = {\n components: {\n root: 'div',\n // casting from internal type that has required properties\n // to external type that only has optional properties\n // converting to unknown first as both Function component signatures are not compatible\n surfaceMotion: InlineDrawerMotion as unknown as React.FC<SurfaceMotionSlotProps>,\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ...props,\n ref,\n }),\n { elementType: 'div' },\n ),\n\n open,\n position,\n size,\n separator,\n surfaceMotion: presenceMotionSlot<DrawerMotionParams>(surfaceMotion, {\n elementType: InlineDrawerMotion,\n defaultProps: {\n position,\n size,\n dir,\n visible: open,\n unmountOnExit: true,\n },\n }),\n\n // Deprecated props\n motion: STATIC_MOTION,\n };\n\n return state;\n};\n"],"names":["useInlineDrawer_unstable","STATIC_MOTION","active","canRender","ref","React","createRef","type","props","size","position","open","useDrawerDefaultProps","separator","surfaceMotion","dir","useFluent","state","components","root","InlineDrawerMotion","slot","always","getIntrinsicElementProps","elementType","presenceMotionSlot","defaultProps","visible","unmountOnExit","motion"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAyBaA;;;eAAAA;;;;iEAzBU;6BACY;gCACY;qCACC;+BAEY;uCACtB;AAGtC,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,mBAAKC,OAAMC,SAAS;IACpBC,MAAM;AACR;AAWO,MAAMP,2BAA2B,CAACQ,OAA0BJ;IACjE,MAAM,EAAEK,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGC,IAAAA,4CAAAA,EAAsBJ;IACvD,MAAM,EAAEK,YAAY,KAAK,EAAEC,aAAa,EAAE,GAAGN;IAC7C,MAAM,EAAEO,GAAG,EAAE,GAAGC,IAAAA,uCAAAA;IAEhB,MAAMC,QAA2B;QAC/BC,YAAY;YACVC,MAAM;YACN,0DAA0D;YAC1D,qDAAqD;YACrD,uFAAuF;YACvFL,eAAeM,iCAAAA;QACjB;QAEAD,MAAME,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,GAAGf,KAAK;YACRJ;QACF,IACA;YAAEoB,aAAa;QAAM;QAGvBb;QACAD;QACAD;QACAI;QACAC,eAAeW,IAAAA,+BAAAA,EAAuCX,eAAe;YACnEU,aAAaJ,iCAAAA;YACbM,cAAc;gBACZhB;gBACAD;gBACAM;gBACAY,SAAShB;gBACTiB,eAAe;YACjB;QACF;QAEA,mBAAmB;QACnBC,QAAQ5B;IACV;IAEA,OAAOgB;AACT"}

package/lib-commonjs/components/OverlayDrawer/OverlayDrawer.types.js.map CHANGED Viewed

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

package/lib-commonjs/components/OverlayDrawer/useOverlayDrawer.js CHANGED Viewed

@@ -9,9 +9,10 @@ Object.defineProperty(exports, "useOverlayDrawer_unstable", {
     }
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactdialog = require("@fluentui/react-dialog");
 const _reactutilities = require("@fluentui/react-utilities");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _drawerMotions = require("../../shared/drawerMotions");
 const _useDrawerDefaultProps = require("../../shared/useDrawerDefaultProps");
 const _OverlayDrawerSurface = require("./OverlayDrawerSurface");
@@ -24,7 +25,8 @@ const STATIC_MOTION = {
 };
 const useOverlayDrawer_unstable = (props, ref)=>{
     const { open, size, position } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
-    const { backdropMotion, modalType = 'modal', inertTrapFocus, onOpenChange, surfaceMotion } = props;
+    const { backdropMotion, modalType = 'modal', inertTrapFocus, onOpenChange, surfaceMotion, mountNode } = props;
+    const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
     const backdropProps = _reactutilities.slot.resolveShorthand(props.backdrop);
     const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;
     const root = _reactutilities.slot.always({
@@ -49,7 +51,8 @@ const useOverlayDrawer_unstable = (props, ref)=>{
         modalType,
         surfaceMotion: (0, _drawerMotionUtils.mergePresenceSlots)(surfaceMotion, _drawerMotions.OverlayDrawerMotion, {
             position,
-            size
+            size,
+            dir
         }),
         /**
        * children is not needed here because we construct the children in the render function,
@@ -68,6 +71,7 @@ const useOverlayDrawer_unstable = (props, ref)=>{
         open,
         size,
         position,
+        mountNode,
         motion: STATIC_MOTION
     };
 };

package/lib-commonjs/components/OverlayDrawer/useOverlayDrawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useOverlayDrawer.tsx"],"sourcesContent":["import { Dialog } from '@fluentui/react-dialog';\nimport { slot } from '@fluentui/react-utilities';\nimport * as ~~React~~ from 'react';\n\nimport { OverlayDrawerMotion, OverlaySurfaceBackdropMotion } from '../../shared/drawerMotions';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { OverlayDrawerProps, OverlayDrawerState } from './OverlayDrawer.types';\nimport { OverlayDrawerSurface } from './OverlayDrawerSurface';\nimport { mergePresenceSlots } from '../../shared/drawerMotionUtils';\n\nconst STATIC_MOTION = {\n active: true,\n canRender: true,\n ref: React.createRef<HTMLDivElement>(),\n type: 'idle' as const,\n};\n\n/*\n Create the state required to render OverlayDrawer.\n \n The returned state can be modified with hooks such as useOverlayDrawerStyles_unstable,\n * before being passed to renderOverlayDrawer_unstable.\n \n @param props - props from this instance of OverlayDrawer\n * @param ref - reference to root HTMLElement of OverlayDrawer\n /\nexport const useOverlayDrawer_unstable = (\n props: OverlayDrawerProps,\n ref: React.Ref<HTMLElement>,\n): OverlayDrawerState => {\n const { open, size, position } = useDrawerDefaultProps(props);\n const { backdropMotion, modalType = 'modal', inertTrapFocus, onOpenChange, surfaceMotion } = props;\n\n const backdropProps = slot.resolveShorthand(props.backdrop);\n const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;\n\n const root = slot.always(\n {\n ...props,\n ref,\n backdrop: hasCustomBackdrop ? { ...backdropProps } : null,\n backdropMotion: mergePresenceSlots(backdropMotion, OverlaySurfaceBackdropMotion, { size }),\n },\n {\n /\n Drawer accepts a `div` or `aside` element type, but Dialog only accepts a `div` element type.\n * We need to cast the ref to a `div` element type to not break Dialog's ref type.\n /\n elementType: OverlayDrawerSurface as unknown as 'div',\n },\n );\n\n const dialog = slot.always(\n {\n open,\n onOpenChange,\n inertTrapFocus,\n modalType,\n surfaceMotion: mergePresenceSlots(surfaceMotion, OverlayDrawerMotion, { position, size }),\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 open,\n size,\n position,\n motion: STATIC_MOTION,\n };\n};\n"],"names":["useOverlayDrawer_unstable","STATIC_MOTION","active","canRender","ref","React","createRef","type","props","open","size","position","useDrawerDefaultProps","backdropMotion","modalType","inertTrapFocus","onOpenChange","surfaceMotion","backdropProps","slot","resolveShorthand","backdrop","hasCustomBackdrop","root","always","mergePresenceSlots","OverlaySurfaceBackdropMotion","elementType","OverlayDrawerSurface","dialog","OverlayDrawerMotion","children","Dialog","components","motion"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+~~BA0BaA~~;;;eAAAA;;;;~~6BA1BU~~;gCACF;~~iEACE~~;+~~BAE2C~~;uCAC5B;sCAED;mCACF;AAEnC,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,KAAAA,WAAAA,GAAKC,OAAMC,SAAS;IACpBC,MAAM;AACR;AAWO,MAAMP,4BAA4B,CACvCQ,OACAJ;IAEA,MAAM,EAAEK,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,IAAAA,4CAAAA,EAAsBJ;IACvD,MAAM,EAAEK,cAAc,EAAEC,YAAY,OAAO,EAAEC,cAAc,EAAEC,YAAY,EAAEC,aAAa,EAAE,~~GAAGT~~;~~IAE7F~~,~~MAAMU~~,gBAAgBC,oBAAAA,CAAKC,gBAAgB,~~CAACZ~~,~~MAAMa~~,QAAQ;IAC1D,MAAMC,~~oBAAoBR~~,cAAc,~~eAAeI~~,kBAAkB;IAEzE,MAAMK,OAAOJ,oBAAAA,CAAKK,MAAM,CACtB;QACE,~~GAAGhB~~,KAAK;QACRJ;~~QACAiB~~,UAAUC,oBAAoB;YAAE,GAAGJ,aAAa;QAAC,IAAI;~~QACrDL~~,~~gBAAgBY~~,IAAAA,qCAAAA,~~EAAmBZ~~,~~gBAAgBa~~,2CAAAA,EAA8B;~~YAAEhB~~;QAAK;IAC1F,GACA;QACE;;;OAGC,~~GACDiB~~,aAAaC,0CAAAA;IACf;IAGF,MAAMC,SAASV,oBAAAA,CAAKK,MAAM,CACxB;~~QACEf~~;QACAO;QACAD;QACAD;QACAG,~~eAAeQ~~,IAAAA,qCAAAA,~~EAAmBR~~,~~eAAea~~,kCAAAA,EAAqB;~~YAAEnB~~;YAAUD;~~QAAK~~;~~QACvF~~;;;OAGC,~~GACDqB~~,UAAU;IACZ,GACA;QACEJ,aAAaK,mBAAAA;IACf;IAGF,OAAO;QACLC,YAAY;YACVV,MAAMK,0CAAAA;YACNC,QAAQG,mBAAAA;QACV;QAEAT;QACAM;~~QAEApB~~;QACAC;QACAC;~~QACAuB~~,~~QAAQjC~~;IACV;AACF"}
1	+ {"version":3,"sources":["useOverlayDrawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Dialog } from '@fluentui/react-dialog';\nimport { slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { OverlayDrawerMotion, OverlaySurfaceBackdropMotion } from '../../shared/drawerMotions';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { OverlayDrawerProps, OverlayDrawerState } from './OverlayDrawer.types';\nimport { OverlayDrawerSurface } from './OverlayDrawerSurface';\nimport { mergePresenceSlots } from '../../shared/drawerMotionUtils';\n\nconst STATIC_MOTION = {\n active: true,\n canRender: true,\n ref: React.createRef<HTMLDivElement>(),\n type: 'idle' as const,\n};\n\n/*\n Create the state required to render OverlayDrawer.\n \n The returned state can be modified with hooks such as useOverlayDrawerStyles_unstable,\n * before being passed to renderOverlayDrawer_unstable.\n \n @param props - props from this instance of OverlayDrawer\n * @param ref - reference to root HTMLElement of OverlayDrawer\n /\nexport const useOverlayDrawer_unstable = (\n props: OverlayDrawerProps,\n ref: React.Ref<HTMLElement>,\n): OverlayDrawerState => {\n const { open, size, position } = useDrawerDefaultProps(props);\n const { backdropMotion, modalType = 'modal', inertTrapFocus, onOpenChange, surfaceMotion, mountNode } = props;\n const { dir } = useFluent();\n\n const backdropProps = slot.resolveShorthand(props.backdrop);\n const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;\n\n const root = slot.always(\n {\n ...props,\n ref,\n backdrop: hasCustomBackdrop ? { ...backdropProps } : null,\n backdropMotion: mergePresenceSlots(backdropMotion, OverlaySurfaceBackdropMotion, { size }),\n },\n {\n /\n Drawer accepts a `div` or `aside` element type, but Dialog only accepts a `div` element type.\n * We need to cast the ref to a `div` element type to not break Dialog's ref type.\n /\n elementType: OverlayDrawerSurface as unknown as 'div',\n },\n );\n\n const dialog = slot.always(\n {\n open,\n onOpenChange,\n inertTrapFocus,\n modalType,\n surfaceMotion: mergePresenceSlots(surfaceMotion, OverlayDrawerMotion, { position, size, dir }),\n /\n children is not needed here because we construct the children in the render function,\n * but it's required by DialogProps\n */\n children: null as unknown as JSX.Element,\n },\n {\n elementType: Dialog,\n },\n );\n\n return {\n components: {\n root: OverlayDrawerSurface,\n dialog: Dialog,\n },\n\n root,\n dialog,\n\n open,\n size,\n position,\n mountNode,\n motion: STATIC_MOTION,\n };\n};\n"],"names":["useOverlayDrawer_unstable","STATIC_MOTION","active","canRender","ref","React","createRef","type","props","open","size","position","useDrawerDefaultProps","backdropMotion","modalType","inertTrapFocus","onOpenChange","surfaceMotion","mountNode","dir","useFluent","backdropProps","slot","resolveShorthand","backdrop","hasCustomBackdrop","root","always","mergePresenceSlots","OverlaySurfaceBackdropMotion","elementType","OverlayDrawerSurface","dialog","OverlayDrawerMotion","children","Dialog","components","motion"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA2BaA;;;eAAAA;;;;iEA3BU;6BACA;gCACF;qCAC2B;+BAEkB;uCAC5B;sCAED;mCACF;AAEnC,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,KAAAA,WAAAA,GAAKC,OAAMC,SAAS;IACpBC,MAAM;AACR;AAWO,MAAMP,4BAA4B,CACvCQ,OACAJ;IAEA,MAAM,EAAEK,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,IAAAA,4CAAAA,EAAsBJ;IACvD,MAAM,EAAEK,cAAc,EAAEC,YAAY,OAAO,EAAEC,cAAc,EAAEC,YAAY,EAAEC,aAAa,EAAEC,SAAS,EAAE,GAAGV;IACxG,MAAM,EAAEW,GAAG,EAAE,GAAGC,IAAAA,uCAAAA;IAEhB,MAAMC,gBAAgBC,oBAAAA,CAAKC,gBAAgB,CAACf,MAAMgB,QAAQ;IAC1D,MAAMC,oBAAoBX,cAAc,eAAeO,kBAAkB;IAEzE,MAAMK,OAAOJ,oBAAAA,CAAKK,MAAM,CACtB;QACE,GAAGnB,KAAK;QACRJ;QACAoB,UAAUC,oBAAoB;YAAE,GAAGJ,aAAa;QAAC,IAAI;QACrDR,gBAAgBe,IAAAA,qCAAAA,EAAmBf,gBAAgBgB,2CAAAA,EAA8B;YAAEnB;QAAK;IAC1F,GACA;QACE;;;OAGC,GACDoB,aAAaC,0CAAAA;IACf;IAGF,MAAMC,SAASV,oBAAAA,CAAKK,MAAM,CACxB;QACElB;QACAO;QACAD;QACAD;QACAG,eAAeW,IAAAA,qCAAAA,EAAmBX,eAAegB,kCAAAA,EAAqB;YAAEtB;YAAUD;YAAMS;QAAI;QAC5F;;;OAGC,GACDe,UAAU;IACZ,GACA;QACEJ,aAAaK,mBAAAA;IACf;IAGF,OAAO;QACLC,YAAY;YACVV,MAAMK,0CAAAA;YACNC,QAAQG,mBAAAA;QACV;QAEAT;QACAM;QAEAvB;QACAC;QACAC;QACAO;QACAmB,QAAQpC;IACV;AACF"}

package/lib-commonjs/components/OverlayDrawer/useOverlayDrawerStyles.styles.js CHANGED Viewed

@@ -51,12 +51,16 @@ const useDrawerRootStyles = /*#__PURE__*/ (0, _react1.__styles)({
         Bhzewxz: "f198g47y",
         Bqenvij: "fub80nq",
         a9b677: "fr97h3j"
+    },
+    absolute: {
+        qhf8xq: "f1euv43f"
     }
 }, {
     d: [
         ".f198g47y{top:auto;}",
         ".fub80nq{height:var(--fui-Drawer--size);}",
-        ".fr97h3j{width:100vw;}"
+        ".fr97h3j{width:100vw;}",
+        ".f1euv43f{position:absolute;}"
     ]
 });
 const useOverlayDrawerStyles_unstable = (state)=>{
@@ -64,10 +68,11 @@ const useOverlayDrawerStyles_unstable = (state)=>{
     const baseClassNames = (0, _useDrawerBaseStylesstyles.useDrawerBaseClassNames)(state);
     const resetStyles = useDrawerResetStyles();
     const rootStyles = useDrawerRootStyles();
+    const absoluteStyles = !!state.mountNode && rootStyles.absolute;
     const backdrop = state.root.backdrop;
-    state.root.className = (0, _react1.mergeClasses)(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], state.root.className);
+    state.root.className = (0, _react1.mergeClasses)(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], absoluteStyles, state.root.className);
     if (backdrop) {
-        backdrop.className = (0, _react1.mergeClasses)(overlayDrawerClassNames.backdrop, backdrop.className);
+        backdrop.className = (0, _react1.mergeClasses)(overlayDrawerClassNames.backdrop, absoluteStyles, backdrop.className);
     }
     return state;
 }; //# sourceMappingURL=useOverlayDrawerStyles.styles.js.map

package/lib-commonjs/components/OverlayDrawer/useOverlayDrawerStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const overlayDrawerClassNames = {\n root: 'fui-OverlayDrawer',\n backdrop: 'fui-OverlayDrawer__backdrop'\n};\n/*\n Styles for the root slot\n / const useDrawerResetStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n ...drawerDefaultStyles,\n position: 'fixed',\n top: 0,\n bottom: 0\n});\nconst useDrawerRootStyles = makeStyles({\n / Positioning / start: {},\n end: {},\n bottom: {\n top: 'auto',\n height: `var(${drawerCSSVars.drawerSizeVar})`,\n width: '100vw'\n }\n});\n/\n Apply styling to the OverlayDrawer slots based on the state\n */ export const useOverlayDrawerStyles_unstable = (state)=>{\n 'use no memo';\n const baseClassNames = useDrawerBaseClassNames(state);\n const resetStyles = useDrawerResetStyles();\n const rootStyles = useDrawerRootStyles();\n const backdrop = state.root.backdrop;\n state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], state.root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, backdrop.className);\n }\n return state;\n};\n"],"names":["overlayDrawerClassNames","useOverlayDrawerStyles_unstable","root","backdrop","useDrawerResetStyles","__resetStyles","r","s","useDrawerRootStyles","__styles","start","end","bottom","Bhzewxz","Bqenvij","a9b677","d","state","baseClassNames","useDrawerBaseClassNames","resetStyles","rootStyles","className","mergeClasses","position"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;;;;;;;;IAIaA,uBAAuB;eAAvBA;;~~IAwBIC~~,+BAA+B;eAA/BA;;;;~~iEA5BM~~;wBACmC;2CAEkB;AACrE,MAAMD,0BAA0B;IACnCE,MAAM;IACNC,UAAU;AACd;AACA;;CAEA,GAAI,MAAMC,uBAAoB,WAAA,GAAGC,IAAAA,qBAAA,EAAA,WAAA,WAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;KAAA;AAAA;AAOjC,MAAMC,sBAAmB,WAAA,GAAGC,IAAAA,gBAAA,EAAA;IAAAC,OAAA,CAAA;IAAAC,KAAA,CAAA;IAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;KAAA;AAAA;~~AAWjB~~,~~MAAMf~~,~~kCAAmCgB~~,CAAAA;IAChD;IACA,MAAMC,iBAAiBC,IAAAA,kDAAuB,EAACF;IAC/C,MAAMG,~~cAAchB~~;IACpB,~~MAAMiB~~,~~aAAab~~;IACnB,~~MAAML~~,~~WAAWc~~,~~MAAMf~~,IAAI,CAACC,QAAQ;~~IACpCc~~,~~MAAMf~~,IAAI,~~CAACoB~~,SAAS,GAAGC,IAAAA,oBAAY,~~EAACvB~~,wBAAwBE,IAAI,~~EAAEgB~~,gBAAgBE,aAAaC,UAAU,CAACJ,~~MAAMO~~,QAAQ,CAAC,~~EAAEP~~,~~MAAMf~~,IAAI,~~CAACoB~~,SAAS;IAC/I,~~IAAInB~~,UAAU;QACVA,~~SAASmB~~,SAAS,GAAGC,IAAAA,oBAAY,~~EAACvB~~,wBAAwBG,QAAQ,~~EAAEA~~,~~SAASmB~~,SAAS;~~IAC1F~~;IACA,~~OAAOL~~;AACX"}
1	+ {"version":3,"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const overlayDrawerClassNames = {\n root: 'fui-OverlayDrawer',\n backdrop: 'fui-OverlayDrawer__backdrop'\n};\n/*\n Styles for the root slot\n / const useDrawerResetStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n ...drawerDefaultStyles,\n position: 'fixed',\n top: 0,\n bottom: 0\n});\nconst useDrawerRootStyles = makeStyles({\n / Positioning / start: {},\n end: {},\n bottom: {\n top: 'auto',\n height: `var(${drawerCSSVars.drawerSizeVar})`,\n width: '100vw'\n },\n absolute: {\n position: 'absolute'\n }\n});\n/\n Apply styling to the OverlayDrawer slots based on the state\n */ export const useOverlayDrawerStyles_unstable = (state)=>{\n 'use no memo';\n const baseClassNames = useDrawerBaseClassNames(state);\n const resetStyles = useDrawerResetStyles();\n const rootStyles = useDrawerRootStyles();\n const absoluteStyles = !!state.mountNode && rootStyles.absolute;\n const backdrop = state.root.backdrop;\n state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], absoluteStyles, state.root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, absoluteStyles, backdrop.className);\n }\n return state;\n};\n"],"names":["overlayDrawerClassNames","useOverlayDrawerStyles_unstable","root","backdrop","useDrawerResetStyles","__resetStyles","r","s","useDrawerRootStyles","__styles","start","end","bottom","Bhzewxz","Bqenvij","a9b677","absolute","qhf8xq","d","state","baseClassNames","useDrawerBaseClassNames","resetStyles","rootStyles","absoluteStyles","mountNode","className","mergeClasses","position"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,uBAAuB;eAAvBA;;IA2BIC,+BAA+B;eAA/BA;;;;iEA/BM;wBACmC;2CAEkB;AACrE,MAAMD,0BAA0B;IACnCE,MAAM;IACNC,UAAU;AACd;AACA;;CAEA,GAAI,MAAMC,uBAAoB,WAAA,GAAGC,IAAAA,qBAAA,EAAA,WAAA,WAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;KAAA;AAAA;AAOjC,MAAMC,sBAAmB,WAAA,GAAGC,IAAAA,gBAAA,EAAA;IAAAC,OAAA,CAAA;IAAAC,KAAA,CAAA;IAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAC,UAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAcjB,MAAMjB,kCAAmCkB,CAAAA;IAChD;IACA,MAAMC,iBAAiBC,IAAAA,kDAAuB,EAACF;IAC/C,MAAMG,cAAclB;IACpB,MAAMmB,aAAaf;IACnB,MAAMgB,iBAAiB,CAAC,CAACL,MAAMM,SAAS,IAAIF,WAAWP,QAAQ;IAC/D,MAAMb,WAAWgB,MAAMjB,IAAI,CAACC,QAAQ;IACpCgB,MAAMjB,IAAI,CAACwB,SAAS,GAAGC,IAAAA,oBAAY,EAAC3B,wBAAwBE,IAAI,EAAEkB,gBAAgBE,aAAaC,UAAU,CAACJ,MAAMS,QAAQ,CAAC,EAAEJ,gBAAgBL,MAAMjB,IAAI,CAACwB,SAAS;IAC/J,IAAIvB,UAAU;QACVA,SAASuB,SAAS,GAAGC,IAAAA,oBAAY,EAAC3B,wBAAwBG,QAAQ,EAAEqB,gBAAgBrB,SAASuB,SAAS;IAC1G;IACA,OAAOP;AACX"}

package/lib-commonjs/shared/drawerMotions.js CHANGED Viewed

@@ -17,6 +17,9 @@ _export(exports, {
     },
     OverlaySurfaceBackdropMotion: function() {
         return OverlaySurfaceBackdropMotion;
+    },
+    getPositionTransform: function() {
+        return getPositionTransform;
     }
 });
 const _reactmotion = require("@fluentui/react-motion");
@@ -28,18 +31,28 @@ const durations = {
     large: _reactmotion.motionTokens.durationSlower,
     full: _reactmotion.motionTokens.durationUltraSlow
 };
-const InlineDrawerMotion = (0, _reactmotion.createPresenceComponent)(({ position, size })=>{
+function getPositionTransform(position, sizeVar, dir) {
+    const leftToRightTransform = `translate3d(var(${sizeVar}), 0, 0)`;
+    const rightToLeftTransform = `translate3d(calc(var(${sizeVar}) * -1), 0, 0)`;
+    const bottomToTopTransform = `translate3d(0, var(${sizeVar}), 0)`;
+    if (position === 'start') {
+        return dir === 'rtl' ? rightToLeftTransform : leftToRightTransform;
+    }
+    if (position === 'end') {
+        return dir === 'rtl' ? leftToRightTransform : rightToLeftTransform;
+    }
+    if (position === 'bottom') {
+        return bottomToTopTransform;
+    }
+    return 'translate3d(0, 0, 0)';
+}
+const InlineDrawerMotion = (0, _reactmotion.createPresenceComponent)(({ position, size, dir })=>{
     const keyframes = [
         {
-            ...position === 'start' && {
-                transform: `translate3d(calc(var(${_useDrawerBaseStylesstyles.drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`
-            },
-            ...position === 'end' && {
-                transform: `translate3d(var(${_useDrawerBaseStylesstyles.drawerCSSVars.drawerSizeVar}), 0, 0)`
-            },
-            ...position === 'bottom' && {
-                transform: `translate3d(0, var(${_useDrawerBaseStylesstyles.drawerCSSVars.drawerSizeVar}), 0)`
-            },
+            /**
+       * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs
+       * The work will be done in the #32817
+       */ transform: getPositionTransform(position, _useDrawerBaseStylesstyles.drawerCSSVars.drawerSizeVar, dir),
             opacity: 0
         },
         {
@@ -63,18 +76,13 @@ const InlineDrawerMotion = (0, _reactmotion.createPresenceComponent)(({ position
         }
     };
 });
-const OverlayDrawerMotion = (0, _reactmotion.createPresenceComponent)(({ position, size })=>{
+const OverlayDrawerMotion = (0, _reactmotion.createPresenceComponent)(({ position, size, dir })=>{
     const keyframes = [
         {
-            ...position === 'start' && {
-                transform: `translate3D(calc(var(${_useDrawerBaseStylesstyles.drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`
-            },
-            ...position === 'end' && {
-                transform: `translate3d(calc(var(${_useDrawerBaseStylesstyles.drawerCSSVars.drawerSizeVar}) * 1), 0, 0)`
-            },
-            ...position === 'bottom' && {
-                transform: `translate3d(0, calc(var(${_useDrawerBaseStylesstyles.drawerCSSVars.drawerSizeVar}) * 1), 0)`
-            },
+            /**
+       * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs
+       * The work will be done in the #32817
+       */ transform: getPositionTransform(position, _useDrawerBaseStylesstyles.drawerCSSVars.drawerSizeVar, dir),
             boxShadow: `0px ${_reacttheme.tokens.colorTransparentBackground}`,
             opacity: 0
         },

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"sources":["drawerMotions.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';\nimport { tokens } from '@fluentui/react-theme';\nimport { ProviderContextValue_unstable as FluentProviderContextValue } from '@fluentui/react-shared-contexts';\n\nimport type { DrawerBaseProps } from './DrawerBase.types';\nimport { drawerCSSVars } from './useDrawerBaseStyles.styles';\n\nexport type DrawerMotionParams = Required<\n Pick<DrawerBaseProps, 'size' \| 'position'> & Pick<FluentProviderContextValue, 'dir'>\n>;\nexport type OverlayDrawerSurfaceMotionParams = Required<Pick<DrawerBaseProps, 'size'>>;\n\nconst durations: Record<NonNullable<DrawerBaseProps['size']>, number> = {\n small: motionTokens.durationGentle,\n medium: motionTokens.durationSlow,\n large: motionTokens.durationSlower,\n full: motionTokens.durationUltraSlow,\n};\n\n/*\n @internal\n /\nexport function getPositionTransform(\n position: DrawerBaseProps['position'],\n sizeVar: string,\n dir: FluentProviderContextValue['dir'],\n) {\n const leftToRightTransform = `translate3d(var(${sizeVar}), 0, 0)`;\n const rightToLeftTransform = `translate3d(calc(var(${sizeVar}) -1), 0, 0)`;\n const bottomToTopTransform = `translate3d(0, var(${sizeVar}), 0)`;\n\n if (position === 'start') {\n return dir === 'rtl' ? rightToLeftTransform : leftToRightTransform;\n }\n\n if (position === 'end') {\n return dir === 'rtl' ? leftToRightTransform : rightToLeftTransform;\n }\n\n if (position === 'bottom') {\n return bottomToTopTransform;\n }\n\n return 'translate3d(0, 0, 0)';\n}\n\n/*\n @internal\n /\nexport const InlineDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n const keyframes: Keyframe[] = [\n {\n /\n TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n * The work will be done in the #32817\n /\n transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n opacity: 0,\n },\n { transform: 'translate3d(0, 0, 0)', opacity: 1 },\n ];\n const duration = durations[size];\n\n return {\n enter: {\n keyframes,\n duration,\n easing: motionTokens.curveDecelerateMid,\n },\n exit: {\n keyframes: [...keyframes].reverse(),\n duration,\n easing: motionTokens.curveAccelerateMin,\n },\n };\n});\n\n/\n @internal\n /\nexport const OverlayDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n const keyframes: Keyframe[] = [\n {\n /\n TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n * The work will be done in the #32817\n /\n transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n boxShadow: `0px ${tokens.colorTransparentBackground}`,\n opacity: 0,\n },\n {\n transform: 'translate3d(0, 0, 0)',\n boxShadow: tokens.shadow64,\n opacity: 1,\n },\n ];\n const duration = durations[size];\n\n return {\n enter: {\n keyframes,\n duration,\n easing: motionTokens.curveDecelerateMid,\n },\n exit: {\n keyframes: [...keyframes].reverse(),\n duration,\n easing: motionTokens.curveAccelerateMin,\n },\n };\n});\n\n/\n @internal\n */\nexport const OverlaySurfaceBackdropMotion = createPresenceComponent(({ size }: OverlayDrawerSurfaceMotionParams) => {\n const keyframes = [{ opacity: 0 }, { opacity: 1 }];\n const duration = durations[size];\n\n return {\n enter: {\n keyframes,\n easing: motionTokens.curveLinear,\n duration,\n },\n exit: {\n keyframes: [...keyframes].reverse(),\n easing: motionTokens.curveLinear,\n duration,\n },\n };\n});\n"],"names":["InlineDrawerMotion","OverlayDrawerMotion","OverlaySurfaceBackdropMotion","getPositionTransform","durations","small","motionTokens","durationGentle","medium","durationSlow","large","durationSlower","full","durationUltraSlow","position","sizeVar","dir","leftToRightTransform","rightToLeftTransform","bottomToTopTransform","createPresenceComponent","size","keyframes","transform","drawerCSSVars","drawerSizeVar","opacity","duration","enter","easing","curveDecelerateMid","exit","reverse","curveAccelerateMin","boxShadow","tokens","colorTransparentBackground","shadow64","curveLinear"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAiDaA,kBAAAA;eAAAA;;IA+BAC,mBAAAA;eAAAA;;IAoCAC,4BAAAA;eAAAA;;IA9FGC,oBAAAA;eAAAA;;;6BAtBsC;4BAC/B;2CAIO;AAO9B,MAAMC,YAAkE;IACtEC,OAAOC,yBAAAA,CAAaC,cAAc;IAClCC,QAAQF,yBAAAA,CAAaG,YAAY;IACjCC,OAAOJ,yBAAAA,CAAaK,cAAc;IAClCC,MAAMN,yBAAAA,CAAaO,iBAAiB;AACtC;AAKO,SAASV,qBACdW,QAAqC,EACrCC,OAAe,EACfC,GAAsC;IAEtC,MAAMC,uBAAuB,CAAC,gBAAgB,EAAEF,QAAQ,QAAQ,CAAC;IACjE,MAAMG,uBAAuB,CAAC,qBAAqB,EAAEH,QAAQ,cAAc,CAAC;IAC5E,MAAMI,uBAAuB,CAAC,mBAAmB,EAAEJ,QAAQ,KAAK,CAAC;IAEjE,IAAID,aAAa,SAAS;QACxB,OAAOE,QAAQ,QAAQE,uBAAuBD;IAChD;IAEA,IAAIH,aAAa,OAAO;QACtB,OAAOE,QAAQ,QAAQC,uBAAuBC;IAChD;IAEA,IAAIJ,aAAa,UAAU;QACzB,OAAOK;IACT;IAEA,OAAO;AACT;AAKO,MAAMnB,qBAAqBoB,IAAAA,oCAAAA,EAA4C,CAAC,EAAEN,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACpG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWpB,qBAAqBW,UAAUU,wCAAAA,CAAcC,aAAa,EAAET;YACvEU,SAAS;QACX;QACA;YAAEH,WAAW;YAAwBG,SAAS;QAAE;KACjD;IACD,MAAMC,WAAWvB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLO,OAAO;YACLN;YACAK;YACAE,QAAQvB,yBAAAA,CAAawB,kBAAkB;QACzC;QACAC,MAAM;YACJT,WAAW;mBAAIA;aAAU,CAACU,OAAO;YACjCL;YACAE,QAAQvB,yBAAAA,CAAa2B,kBAAkB;QACzC;IACF;AACF;AAKO,MAAMhC,sBAAsBmB,IAAAA,oCAAAA,EAA4C,CAAC,EAAEN,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACrG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWpB,qBAAqBW,UAAUU,wCAAAA,CAAcC,aAAa,EAAET;YACvEkB,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,WAAWvB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLO,OAAO;YACLN;YACAK;YACAE,QAAQvB,yBAAAA,CAAawB,kBAAkB;QACzC;QACAC,MAAM;YACJT,WAAW;mBAAIA;aAAU,CAACU,OAAO;YACjCL;YACAE,QAAQvB,yBAAAA,CAAa2B,kBAAkB;QACzC;IACF;AACF;AAKO,MAAM/B,+BAA+BkB,IAAAA,oCAAAA,EAAwB,CAAC,EAAEC,IAAI,EAAoC;IAC7G,MAAMC,YAAY;QAAC;YAAEI,SAAS;QAAE;QAAG;YAAEA,SAAS;QAAE;KAAE;IAClD,MAAMC,WAAWvB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLO,OAAO;YACLN;YACAO,QAAQvB,yBAAAA,CAAagC,WAAW;YAChCX;QACF;QACAI,MAAM;YACJT,WAAW;mBAAIA;aAAU,CAACU,OAAO;YACjCH,QAAQvB,yBAAAA,CAAagC,WAAW;YAChCX;QACF;IACF;AACF"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-drawer",
-  "version": "9.5.13",
+  "version": "9.5.15",
   "description": "Drawer components for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,13 +35,13 @@
     "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/react-dialog": "^9.11.13",
-    "@fluentui/react-jsx-runtime": "^9.0.43",
-    "@fluentui/react-motion": "^9.5.1",
-    "@fluentui/react-shared-contexts": "^9.20.0",
-    "@fluentui/react-tabster": "^9.22.6",
-    "@fluentui/react-theme": "^9.1.19",
-    "@fluentui/react-utilities": "^9.18.14",
+    "@fluentui/react-dialog": "^9.11.15",
+    "@fluentui/react-jsx-runtime": "^9.0.44",
+    "@fluentui/react-motion": "^9.5.2",
+    "@fluentui/react-shared-contexts": "^9.20.1",
+    "@fluentui/react-tabster": "^9.22.7",
+    "@fluentui/react-theme": "^9.1.20",
+    "@fluentui/react-utilities": "^9.18.15",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },