@fluentui/react-drawer 9.10.4 → 9.10.5

package/CHANGELOG.md

@@ -1,12 +1,24 @@
 # Change Log - @fluentui/react-drawer
 
-This log was last generated on Wed, 08 Oct 2025 12:00:20 GMT and should not be manually modified.
+This log was last generated on Tue, 21 Oct 2025 14:13:11 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.10.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.10.5)
+
+Tue, 21 Oct 2025 14:13:11 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.10.4..@fluentui/react-drawer_v9.10.5)
+
+### Patches
+
+- fix: update drawer scroll state when content changes ([PR #35210](https://github.com/microsoft/fluentui/pull/35210) by marcosvmmoura@gmail.com)
+- Bump @fluentui/react-dialog to v9.15.5 ([PR #35307](https://github.com/microsoft/fluentui/pull/35307) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.3.0 ([PR #35307](https://github.com/microsoft/fluentui/pull/35307) by beachball)
+- Bump @fluentui/react-portal to v9.8.5 ([PR #35307](https://github.com/microsoft/fluentui/pull/35307) by beachball)
+
 ## [9.10.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.10.4)
 
-Wed, 08 Oct 2025 12:00:20 GMT 
+Wed, 08 Oct 2025 12:04:53 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.10.3..@fluentui/react-drawer_v9.10.4)
 
 ### Patches

package/lib/components/DrawerBody/useDrawerBody.js

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { mergeCallbacks, slot, useAnimationFrame, useMergedRefs, useIsomorphicLayoutEffect, getIntrinsicElementProps } from '@fluentui/react-utilities';
 import { useDrawerContext_unstable } from '../../contexts/drawerContext';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 /**
  * @internal
  *
@@ -29,9 +30,13 @@ import { useDrawerContext_unstable } from '../../contexts/drawerContext';
  * @param props - props from this instance of DrawerBody
  * @param ref - reference to root HTMLElement of DrawerBody
  */ export const useDrawerBody_unstable = (props, ref)=>{
+    const { targetDocument } = useFluent();
+    const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
     const { setScrollState } = useDrawerContext_unstable();
     const scrollRef = React.useRef(null);
-    const [setAnimationFrame, cancelAnimationFrame] = useAnimationFrame();
+    const mergedRef = useMergedRefs(ref, scrollRef);
+    const [setScrollAnimationFrame, cancelScrollAnimationFrame] = useAnimationFrame();
+    const [setResizeAnimationFrame, cancelResizeAnimationFrame] = useAnimationFrame();
     const updateScrollState = React.useCallback(()=>{
         if (!scrollRef.current) {
             return;
@@ -41,41 +46,41 @@ import { useDrawerContext_unstable } from '../../contexts/drawerContext';
         setScrollState
     ]);
     const onScroll = React.useCallback(()=>{
-        cancelAnimationFrame();
-        setAnimationFrame(()=>updateScrollState());
+        cancelScrollAnimationFrame();
+        setScrollAnimationFrame(updateScrollState);
     }, [
-        cancelAnimationFrame,
-        setAnimationFrame,
+        cancelScrollAnimationFrame,
+        setScrollAnimationFrame,
         updateScrollState
     ]);
-    useIsomorphicLayoutEffect(()=>{
-        cancelAnimationFrame();
-        setAnimationFrame(()=>updateScrollState());
-        /* update scroll state when children changes */ return ()=>cancelAnimationFrame();
-    }, [
+    // Update scroll state on children change
+    useIsomorphicLayoutEffect(updateScrollState, [
         props.children,
-        cancelAnimationFrame,
-        updateScrollState,
-        setAnimationFrame
+        updateScrollState
     ]);
+    // Update scroll state on mount and when resize occurs
     useIsomorphicLayoutEffect(()=>{
-        cancelAnimationFrame();
-        setAnimationFrame(()=>updateScrollState());
-        return ()=>cancelAnimationFrame();
+        if (!scrollRef.current || !(win === null || win === void 0 ? void 0 : win.ResizeObserver)) {
+            return;
+        }
+        const observer = new win.ResizeObserver(()=>setResizeAnimationFrame(updateScrollState));
+        observer.observe(scrollRef.current);
+        return ()=>{
+            observer.disconnect();
+            cancelResizeAnimationFrame();
+        };
     }, [
-        cancelAnimationFrame,
+        setResizeAnimationFrame,
+        cancelResizeAnimationFrame,
         updateScrollState,
-        setAnimationFrame
+        win
     ]);
     return {
         components: {
             root: 'div'
         },
         root: slot.always(getIntrinsicElementProps('div', {
-            // FIXME:
-            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
-            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
-            ref: useMergedRefs(ref, scrollRef),
+            ref: mergedRef,
             ...props,
             onScroll: mergeCallbacks(props.onScroll, onScroll)
         }), {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DrawerBody/useDrawerBody.ts"],"sourcesContent":["'use client';\n\nimport * 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    cancelAnimationFrame();\n    setAnimationFrame(() => updateScrollState());\n    /* update scroll state when children changes */\n    return () => cancelAnimationFrame();\n  }, [props.children, cancelAnimationFrame, updateScrollState, setAnimationFrame]);\n\n  useIsomorphicLayoutEffect(() => {\n    cancelAnimationFrame();\n    setAnimationFrame(() => updateScrollState());\n\n    return () => cancelAnimationFrame();\n  }, [cancelAnimationFrame, updateScrollState, setAnimationFrame]);\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"],"mappings":"AAAA;AAEA,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;QACxBc;QACAD,kBAAkB,IAAME;QACxB,6CAA6C,GAC7C,OAAO,IAAMD;IACf,GAAG;QAACN,MAAMW,QAAQ;QAAEL;QAAsBC;QAAmBF;KAAkB;IAE/Eb,0BAA0B;QACxBc;QACAD,kBAAkB,IAAME;QAExB,OAAO,IAAMD;IACf,GAAG;QAACA;QAAsBC;QAAmBF;KAAkB;IAE/D,OAAO;QACLO,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"}
+{"version":3,"sources":["../src/components/DrawerBody/useDrawerBody.ts"],"sourcesContent":["'use client';\n\nimport * 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';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\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 { targetDocument } = useFluent();\n  const win = targetDocument?.defaultView;\n\n  const { setScrollState } = useDrawerContext_unstable();\n\n  const scrollRef = React.useRef<HTMLDivElement | null>(null);\n  const mergedRef = useMergedRefs(ref, scrollRef);\n\n  const [setScrollAnimationFrame, cancelScrollAnimationFrame] = useAnimationFrame();\n  const [setResizeAnimationFrame, cancelResizeAnimationFrame] = 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    cancelScrollAnimationFrame();\n    setScrollAnimationFrame(updateScrollState);\n  }, [cancelScrollAnimationFrame, setScrollAnimationFrame, updateScrollState]);\n\n  // Update scroll state on children change\n  useIsomorphicLayoutEffect(updateScrollState, [props.children, updateScrollState]);\n\n  // Update scroll state on mount and when resize occurs\n  useIsomorphicLayoutEffect(() => {\n    if (!scrollRef.current || !win?.ResizeObserver) {\n      return;\n    }\n\n    const observer = new win.ResizeObserver(() => setResizeAnimationFrame(updateScrollState));\n\n    observer.observe(scrollRef.current);\n\n    return () => {\n      observer.disconnect();\n      cancelResizeAnimationFrame();\n    };\n  }, [setResizeAnimationFrame, cancelResizeAnimationFrame, updateScrollState, win]);\n\n  return {\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps<DrawerBodyProps>('div', {\n        ref: mergedRef,\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","useFluent_unstable","useFluent","getScrollState","scrollTop","scrollHeight","clientHeight","useDrawerBody_unstable","props","ref","targetDocument","win","defaultView","setScrollState","scrollRef","useRef","mergedRef","setScrollAnimationFrame","cancelScrollAnimationFrame","setResizeAnimationFrame","cancelResizeAnimationFrame","updateScrollState","useCallback","current","onScroll","children","ResizeObserver","observer","observe","disconnect","components","root","always","elementType"],"mappings":"AAAA;AAEA,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;AAIzE,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;;;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;IAC3B,MAAMS,MAAMD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAEvC,MAAM,EAAEC,cAAc,EAAE,GAAGb;IAE3B,MAAMc,YAAYrB,MAAMsB,MAAM,CAAwB;IACtD,MAAMC,YAAYnB,cAAcY,KAAKK;IAErC,MAAM,CAACG,yBAAyBC,2BAA2B,GAAGtB;IAC9D,MAAM,CAACuB,yBAAyBC,2BAA2B,GAAGxB;IAE9D,MAAMyB,oBAAoB5B,MAAM6B,WAAW,CAAC;QAC1C,IAAI,CAACR,UAAUS,OAAO,EAAE;YACtB;QACF;QAEAV,eAAeV,eAAeW,UAAUS,OAAO;IACjD,GAAG;QAACV;KAAe;IAEnB,MAAMW,WAAW/B,MAAM6B,WAAW,CAAC;QACjCJ;QACAD,wBAAwBI;IAC1B,GAAG;QAACH;QAA4BD;QAAyBI;KAAkB;IAE3E,yCAAyC;IACzCvB,0BAA0BuB,mBAAmB;QAACb,MAAMiB,QAAQ;QAAEJ;KAAkB;IAEhF,sDAAsD;IACtDvB,0BAA0B;QACxB,IAAI,CAACgB,UAAUS,OAAO,IAAI,EAACZ,gBAAAA,0BAAAA,IAAKe,cAAc,GAAE;YAC9C;QACF;QAEA,MAAMC,WAAW,IAAIhB,IAAIe,cAAc,CAAC,IAAMP,wBAAwBE;QAEtEM,SAASC,OAAO,CAACd,UAAUS,OAAO;QAElC,OAAO;YACLI,SAASE,UAAU;YACnBT;QACF;IACF,GAAG;QAACD;QAAyBC;QAA4BC;QAAmBV;KAAI;IAEhF,OAAO;QACLmB,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMpC,KAAKqC,MAAM,CACfjC,yBAA0C,OAAO;YAC/CU,KAAKO;YACL,GAAGR,KAAK;YACRgB,UAAU9B,eAAec,MAAMgB,QAAQ,EAAEA;QAC3C,IACA;YAAES,aAAa;QAAM;IAEzB;AACF,EAAE"}

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

@@ -13,6 +13,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _drawerContext = require("../../contexts/drawerContext");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 /**
  * @internal
  *
@@ -32,9 +33,13 @@ const _drawerContext = require("../../contexts/drawerContext");
     return 'middle';
 };
 const useDrawerBody_unstable = (props, ref)=>{
+    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
     const { setScrollState } = (0, _drawerContext.useDrawerContext_unstable)();
     const scrollRef = _react.useRef(null);
-    const [setAnimationFrame, cancelAnimationFrame] = (0, _reactutilities.useAnimationFrame)();
+    const mergedRef = (0, _reactutilities.useMergedRefs)(ref, scrollRef);
+    const [setScrollAnimationFrame, cancelScrollAnimationFrame] = (0, _reactutilities.useAnimationFrame)();
+    const [setResizeAnimationFrame, cancelResizeAnimationFrame] = (0, _reactutilities.useAnimationFrame)();
     const updateScrollState = _react.useCallback(()=>{
         if (!scrollRef.current) {
             return;
@@ -44,41 +49,41 @@ const useDrawerBody_unstable = (props, ref)=>{
         setScrollState
     ]);
     const onScroll = _react.useCallback(()=>{
-        cancelAnimationFrame();
-        setAnimationFrame(()=>updateScrollState());
+        cancelScrollAnimationFrame();
+        setScrollAnimationFrame(updateScrollState);
     }, [
-        cancelAnimationFrame,
-        setAnimationFrame,
+        cancelScrollAnimationFrame,
+        setScrollAnimationFrame,
         updateScrollState
     ]);
-    (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
-        cancelAnimationFrame();
-        setAnimationFrame(()=>updateScrollState());
-        /* update scroll state when children changes */ return ()=>cancelAnimationFrame();
-    }, [
+    // Update scroll state on children change
+    (0, _reactutilities.useIsomorphicLayoutEffect)(updateScrollState, [
         props.children,
-        cancelAnimationFrame,
-        updateScrollState,
-        setAnimationFrame
+        updateScrollState
     ]);
+    // Update scroll state on mount and when resize occurs
     (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
-        cancelAnimationFrame();
-        setAnimationFrame(()=>updateScrollState());
-        return ()=>cancelAnimationFrame();
+        if (!scrollRef.current || !(win === null || win === void 0 ? void 0 : win.ResizeObserver)) {
+            return;
+        }
+        const observer = new win.ResizeObserver(()=>setResizeAnimationFrame(updateScrollState));
+        observer.observe(scrollRef.current);
+        return ()=>{
+            observer.disconnect();
+            cancelResizeAnimationFrame();
+        };
     }, [
-        cancelAnimationFrame,
+        setResizeAnimationFrame,
+        cancelResizeAnimationFrame,
         updateScrollState,
-        setAnimationFrame
+        win
     ]);
     return {
         components: {
             root: 'div'
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
-            // FIXME:
-            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
-            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
-            ref: (0, _reactutilities.useMergedRefs)(ref, scrollRef),
+            ref: mergedRef,
             ...props,
             onScroll: (0, _reactutilities.mergeCallbacks)(props.onScroll, onScroll)
         }), {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DrawerBody/useDrawerBody.ts"],"sourcesContent":["'use client';\n\nimport * 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    cancelAnimationFrame();\n    setAnimationFrame(() => updateScrollState());\n    /* update scroll state when children changes */\n    return () => cancelAnimationFrame();\n  }, [props.children, cancelAnimationFrame, updateScrollState, setAnimationFrame]);\n\n  useIsomorphicLayoutEffect(() => {\n    cancelAnimationFrame();\n    setAnimationFrame(() => updateScrollState());\n\n    return () => cancelAnimationFrame();\n  }, [cancelAnimationFrame, updateScrollState, setAnimationFrame]);\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"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAQxB,4BAA4B;+BAEO,+BAA+B;AAKzE;;;;;;CAMC,GACD,MAAMQ,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,MAAME,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,cAAc,EAAE,OAAGR,wCAAAA;IAE3B,MAAMS,YAAYhB,OAAMiB,MAAM,CAAwB;IACtD,MAAM,CAACC,mBAAmBC,qBAAqB,OAAGhB,iCAAAA;IAElD,MAAMiB,oBAAoBpB,OAAMqB,WAAW,CAAC;QAC1C,IAAI,CAACL,UAAUM,OAAO,EAAE;YACtB;QACF;QAEAP,eAAeP,eAAeQ,UAAUM,OAAO;IACjD,GAAG;QAACP;KAAe;IAEnB,MAAMQ,WAAWvB,OAAMqB,WAAW,CAAC;QACjCF;QACAD,kBAAkB,IAAME;IAC1B,GAAG;QAACD;QAAsBD;QAAmBE;KAAkB;IAE/Df,6CAAAA,EAA0B;QACxBc;QACAD,kBAAkB,IAAME;QACxB,6CAA6C,GAC7C,OAAO,IAAMD;IACf,GAAG;QAACN,MAAMW,QAAQ;QAAEL;QAAsBC;QAAmBF;KAAkB;QAE/Eb,yCAAAA,EAA0B;QACxBc;QACAD,kBAAkB,IAAME;QAExB,OAAO,IAAMD;IACf,GAAG;QAACA;QAAsBC;QAAmBF;KAAkB;IAE/D,OAAO;QACLO,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMxB,oBAAAA,CAAKyB,MAAM,KACfrB,wCAAAA,EAA0C,OAAO;YAC/C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FQ,KAAKV,iCAAAA,EAA8BU,KAAkCE;YACrE,GAAGH,KAAK;YACRU,cAAUtB,8BAAAA,EAAeY,MAAMU,QAAQ,EAAEA;QAC3C,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/DrawerBody/useDrawerBody.ts"],"sourcesContent":["'use client';\n\nimport * 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';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\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 { targetDocument } = useFluent();\n  const win = targetDocument?.defaultView;\n\n  const { setScrollState } = useDrawerContext_unstable();\n\n  const scrollRef = React.useRef<HTMLDivElement | null>(null);\n  const mergedRef = useMergedRefs(ref, scrollRef);\n\n  const [setScrollAnimationFrame, cancelScrollAnimationFrame] = useAnimationFrame();\n  const [setResizeAnimationFrame, cancelResizeAnimationFrame] = 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    cancelScrollAnimationFrame();\n    setScrollAnimationFrame(updateScrollState);\n  }, [cancelScrollAnimationFrame, setScrollAnimationFrame, updateScrollState]);\n\n  // Update scroll state on children change\n  useIsomorphicLayoutEffect(updateScrollState, [props.children, updateScrollState]);\n\n  // Update scroll state on mount and when resize occurs\n  useIsomorphicLayoutEffect(() => {\n    if (!scrollRef.current || !win?.ResizeObserver) {\n      return;\n    }\n\n    const observer = new win.ResizeObserver(() => setResizeAnimationFrame(updateScrollState));\n\n    observer.observe(scrollRef.current);\n\n    return () => {\n      observer.disconnect();\n      cancelResizeAnimationFrame();\n    };\n  }, [setResizeAnimationFrame, cancelResizeAnimationFrame, updateScrollState, win]);\n\n  return {\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps<DrawerBodyProps>('div', {\n        ref: mergedRef,\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","useFluent_unstable","useFluent","getScrollState","scrollTop","scrollHeight","clientHeight","useDrawerBody_unstable","props","ref","targetDocument","win","defaultView","setScrollState","scrollRef","useRef","mergedRef","setScrollAnimationFrame","cancelScrollAnimationFrame","setResizeAnimationFrame","cancelResizeAnimationFrame","updateScrollState","useCallback","current","onScroll","children","ResizeObserver","observer","observe","disconnect","components","root","always","elementType"],"mappings":"AAAA;;;;;;;;eAkDac;;;;iEAhDU,QAAQ;gCAQxB,4BAA4B;+BAEO,+BAA+B;qCAIzB,kCAAkC;AAElF;;;;;;CAMC,GACD,MAAMJ,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,+BAA+B,CAACG,OAAwBC;IAC7D,MAAM,EAAEC,cAAc,EAAE,OAAGR,uCAAAA;IAC3B,MAAMS,MAAMD,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBE,WAAW;IAEvC,MAAM,EAAEC,cAAc,EAAE,OAAGb,wCAAAA;IAE3B,MAAMc,YAAYrB,OAAMsB,MAAM,CAAwB;IACtD,MAAMC,gBAAYnB,6BAAAA,EAAcY,KAAKK;IAErC,MAAM,CAACG,yBAAyBC,2BAA2B,OAAGtB,iCAAAA;IAC9D,MAAM,CAACuB,yBAAyBC,2BAA2B,OAAGxB,iCAAAA;IAE9D,MAAMyB,oBAAoB5B,OAAM6B,WAAW,CAAC;QAC1C,IAAI,CAACR,UAAUS,OAAO,EAAE;YACtB;QACF;QAEAV,eAAeV,eAAeW,UAAUS,OAAO;IACjD,GAAG;QAACV;KAAe;IAEnB,MAAMW,WAAW/B,OAAM6B,WAAW,CAAC;QACjCJ;QACAD,wBAAwBI;IAC1B,GAAG;QAACH;QAA4BD;QAAyBI;KAAkB;IAE3E,yCAAyC;QACzCvB,yCAAAA,EAA0BuB,mBAAmB;QAACb,MAAMiB,QAAQ;QAAEJ;KAAkB;IAEhF,sDAAsD;QACtDvB,yCAAAA,EAA0B;QACxB,IAAI,CAACgB,UAAUS,OAAO,IAAI,EAACZ,QAAAA,QAAAA,QAAAA,KAAAA,IAAAA,KAAAA,IAAAA,IAAKe,cAAAA,AAAc,GAAE;YAC9C;QACF;QAEA,MAAMC,WAAW,IAAIhB,IAAIe,cAAc,CAAC,IAAMP,wBAAwBE;QAEtEM,SAASC,OAAO,CAACd,UAAUS,OAAO;QAElC,OAAO;YACLI,SAASE,UAAU;YACnBT;QACF;IACF,GAAG;QAACD;QAAyBC;QAA4BC;QAAmBV;KAAI;IAEhF,OAAO;QACLmB,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMpC,oBAAAA,CAAKqC,MAAM,KACfjC,wCAAAA,EAA0C,OAAO;YAC/CU,KAAKO;YACL,GAAGR,KAAK;YACRgB,cAAU9B,8BAAAA,EAAec,MAAMgB,QAAQ,EAAEA;QAC3C,IACA;YAAES,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-drawer",
-  "version": "9.10.4",
+  "version": "9.10.5",
   "description": "Drawer components for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -20,10 +20,10 @@
     "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/react-dialog": "^9.15.4",
-    "@fluentui/react-jsx-runtime": "^9.2.2",
+    "@fluentui/react-dialog": "^9.15.5",
+    "@fluentui/react-jsx-runtime": "^9.3.0",
     "@fluentui/react-motion": "^9.11.1",
-    "@fluentui/react-portal": "^9.8.4",
+    "@fluentui/react-portal": "^9.8.5",
     "@fluentui/react-shared-contexts": "^9.25.2",
     "@fluentui/react-tabster": "^9.26.7",
     "@fluentui/react-theme": "^9.2.0",