@fluentui/react-drawer 9.6.8 → 9.6.9

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.
package/CHANGELOG.md CHANGED
@@ -1,12 +1,22 @@
1
1
  # Change Log - @fluentui/react-drawer
2
2
 
3
- This log was last generated on Wed, 22 Jan 2025 13:55:32 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 27 Jan 2025 20:24:41 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.6.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.6.9)
8
+
9
+ Mon, 27 Jan 2025 20:24:41 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.6.8..@fluentui/react-drawer_v9.6.9)
11
+
12
+ ### Patches
13
+
14
+ - fix: remove forced synchronous layout in Drawer ([PR #33665](https://github.com/microsoft/fluentui/pull/33665) by seanmonahan@microsoft.com)
15
+ - Bump @fluentui/react-dialog to v9.11.29 ([PR #33724](https://github.com/microsoft/fluentui/pull/33724) by beachball)
16
+
7
17
  ## [9.6.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.6.8)
8
18
 
9
- Wed, 22 Jan 2025 13:55:32 GMT
19
+ Wed, 22 Jan 2025 14:00:21 GMT
10
20
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.6.7..@fluentui/react-drawer_v9.6.8)
11
21
 
12
22
  ### Patches
@@ -48,17 +48,23 @@ import { useDrawerContext_unstable } from '../../contexts/drawerContext';
48
48
  updateScrollState
49
49
  ]);
50
50
  useIsomorphicLayoutEffect(()=>{
51
- updateScrollState();
52
- /* update scroll state when children changes */ }, [
51
+ cancelAnimationFrame();
52
+ setAnimationFrame(()=>updateScrollState());
53
+ /* update scroll state when children changes */ return ()=>cancelAnimationFrame();
54
+ }, [
53
55
  props.children,
54
- updateScrollState
56
+ cancelAnimationFrame,
57
+ updateScrollState,
58
+ setAnimationFrame
55
59
  ]);
56
60
  useIsomorphicLayoutEffect(()=>{
57
- updateScrollState();
61
+ cancelAnimationFrame();
62
+ setAnimationFrame(()=>updateScrollState());
58
63
  return ()=>cancelAnimationFrame();
59
64
  }, [
60
65
  cancelAnimationFrame,
61
- updateScrollState
66
+ updateScrollState,
67
+ setAnimationFrame
62
68
  ]);
63
69
  return {
64
70
  components: {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/DrawerBody/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"}
1
+ {"version":3,"sources":["../src/components/DrawerBody/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 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"],"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;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"}
@@ -51,17 +51,23 @@ const useDrawerBody_unstable = (props, ref)=>{
51
51
  updateScrollState
52
52
  ]);
53
53
  (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
54
- updateScrollState();
55
- /* update scroll state when children changes */ }, [
54
+ cancelAnimationFrame();
55
+ setAnimationFrame(()=>updateScrollState());
56
+ /* update scroll state when children changes */ return ()=>cancelAnimationFrame();
57
+ }, [
56
58
  props.children,
57
- updateScrollState
59
+ cancelAnimationFrame,
60
+ updateScrollState,
61
+ setAnimationFrame
58
62
  ]);
59
63
  (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
60
- updateScrollState();
64
+ cancelAnimationFrame();
65
+ setAnimationFrame(()=>updateScrollState());
61
66
  return ()=>cancelAnimationFrame();
62
67
  }, [
63
68
  cancelAnimationFrame,
64
- updateScrollState
69
+ updateScrollState,
70
+ setAnimationFrame
65
71
  ]);
66
72
  return {
67
73
  components: {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/DrawerBody/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"}
1
+ {"version":3,"sources":["../src/components/DrawerBody/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 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":["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;QACxBN;QACAD,kBAAkB,IAAMG;QACxB,6CAA6C,GAC7C,OAAO,IAAMF;IACf,GAAG;QAACR,MAAMe,QAAQ;QAAEP;QAAsBE;QAAmBH;KAAkB;IAE/EO,IAAAA,yCAAAA,EAA0B;QACxBN;QACAD,kBAAkB,IAAMG;QAExB,OAAO,IAAMF;IACf,GAAG;QAACA;QAAsBE;QAAmBH;KAAkB;IAE/D,OAAO;QACLS,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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-drawer",
3
- "version": "9.6.8",
3
+ "version": "9.6.9",
4
4
  "description": "Drawer components for Fluent UI React",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -20,7 +20,7 @@
20
20
  "@fluentui/scripts-cypress": "*"
21
21
  },
22
22
  "dependencies": {
23
- "@fluentui/react-dialog": "^9.11.28",
23
+ "@fluentui/react-dialog": "^9.11.29",
24
24
  "@fluentui/react-jsx-runtime": "^9.0.50",
25
25
  "@fluentui/react-motion": "^9.6.7",
26
26
  "@fluentui/react-portal": "^9.4.42",