@fluentui/react-aria 9.4.0 → 9.5.0

package/CHANGELOG.md

@@ -1,12 +1,23 @@
 # Change Log - @fluentui/react-aria
 
-This log was last generated on Thu, 30 Nov 2023 13:37:52 GMT and should not be manually modified.
+This log was last generated on Thu, 14 Dec 2023 09:51:32 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.5.0)
+
+Thu, 14 Dec 2023 09:51:32 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.4.0..@fluentui/react-aria_v9.5.0)
+
+### Minor changes
+
+- feat(useActiveDescendant): Changing active descendant scrolls into view ([PR #29992](https://github.com/microsoft/fluentui/pull/29992) by lingfangao@hotmail.com)
+- Bump @fluentui/react-shared-contexts to v9.13.1 ([commit](https://github.com/microsoft/fluentui/commit/80a1b02be2fbbdde916ac87fbf760e442a2295c4) by beachball)
+- Bump @fluentui/react-utilities to v9.15.3 ([commit](https://github.com/microsoft/fluentui/commit/80a1b02be2fbbdde916ac87fbf760e442a2295c4) by beachball)
+
 ## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.4.0)
 
-Thu, 30 Nov 2023 13:37:52 GMT 
+Thu, 30 Nov 2023 13:42:05 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.3.44..@fluentui/react-aria_v9.4.0)
 
 ### Minor changes

package/lib/activedescendant/useActiveDescendant.js

@@ -11,6 +11,25 @@ export function useActiveDescendant(options) {
         var _listboxRef_current;
         return (_listboxRef_current = listboxRef.current) === null || _listboxRef_current === void 0 ? void 0 : _listboxRef_current.querySelector(`[${ACTIVEDESCENDANT_ATTRIBUTE}]`);
     };
+    const scrollActiveIntoView = (active)=>{
+        if (!listboxRef.current) {
+            return;
+        }
+        if (listboxRef.current.offsetHeight >= listboxRef.current.scrollHeight) {
+            return;
+        }
+        const { offsetHeight, offsetTop } = active;
+        const { offsetHeight: parentOffsetHeight, scrollTop } = listboxRef.current;
+        const isAbove = offsetTop < scrollTop;
+        const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
+        const buffer = 2;
+        if (isAbove) {
+            listboxRef.current.scrollTo(0, offsetTop - buffer);
+        }
+        if (isBelow) {
+            listboxRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);
+        }
+    };
     const setActiveDescendant = (nextActive)=>{
         const active = getActiveDescendant();
         if (active) {
@@ -19,6 +38,7 @@ export function useActiveDescendant(options) {
         if (nextActive) {
             var _activeParentRef_current;
             nextActive.setAttribute(ACTIVEDESCENDANT_ATTRIBUTE, '');
+            scrollActiveIntoView(nextActive);
             (_activeParentRef_current = activeParentRef.current) === null || _activeParentRef_current === void 0 ? void 0 : _activeParentRef_current.setAttribute('aria-activedescendant', nextActive.id);
         } else {
             var _activeParentRef_current1;
@@ -30,6 +50,7 @@ export function useActiveDescendant(options) {
                 if (!listboxRef.current || !activeParentRef.current) {
                     return;
                 }
+                optionWalker.setCurrent(listboxRef.current);
                 const first = optionWalker.first();
                 if (first) {
                     setActiveDescendant(first);
@@ -58,13 +79,16 @@ export function useActiveDescendant(options) {
                     return;
                 }
                 optionWalker.setCurrent(active);
+                if (!matchOption(active)) {
+                    optionWalker.prev();
+                }
                 const next = optionWalker.prev();
                 if (next && next !== listboxRef.current) {
                     setActiveDescendant(next);
                 }
             },
             blur: ()=>{
-                if (!listboxRef.current || !activeParentRef.current) {
+                if (!activeParentRef.current) {
                     return;
                 }
                 setActiveDescendant(undefined);

package/lib/activedescendant/useActiveDescendant.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useActiveDescendant.ts"],"sourcesContent":["import * as React from 'react';\nimport { useOptionWalker } from './useOptionWalker';\nimport type { ActiveDescendantOptions } from './types';\nimport { ACTIVEDESCENDANT_ATTRIBUTE } from './constants';\n\nexport function useActiveDescendant<TActiveParentElement extends HTMLElement, TListboxElement extends HTMLElement>(\n  options: ActiveDescendantOptions,\n) {\n  const { imperativeRef, matchOption } = options;\n  const activeParentRef = React.useRef<TActiveParentElement>(null);\n  const { listboxRef, optionWalker } = useOptionWalker<TListboxElement>({ matchOption });\n  const getActiveDescendant = () => {\n    return listboxRef.current?.querySelector<HTMLElement>(`[${ACTIVEDESCENDANT_ATTRIBUTE}]`);\n  };\n\n  const setActiveDescendant = (nextActive: HTMLElement | undefined) => {\n    const active = getActiveDescendant();\n    if (active) {\n      active.removeAttribute(ACTIVEDESCENDANT_ATTRIBUTE);\n    }\n\n    if (nextActive) {\n      nextActive.setAttribute(ACTIVEDESCENDANT_ATTRIBUTE, '');\n      activeParentRef.current?.setAttribute('aria-activedescendant', nextActive.id);\n    } else {\n      activeParentRef.current?.removeAttribute('aria-activedescendant');\n    }\n  };\n\n  React.useImperativeHandle(imperativeRef, () => ({\n    first: () => {\n      if (!listboxRef.current || !activeParentRef.current) {\n        return;\n      }\n\n      const first = optionWalker.first();\n      if (first) {\n        setActiveDescendant(first);\n      }\n    },\n    next: () => {\n      if (!listboxRef.current || !activeParentRef.current) {\n        return;\n      }\n\n      const active = getActiveDescendant();\n      if (!active) {\n        return;\n      }\n\n      optionWalker.setCurrent(active);\n      const next = optionWalker.next();\n      if (next) {\n        setActiveDescendant(next);\n      }\n    },\n    prev: () => {\n      if (!listboxRef.current || !activeParentRef.current) {\n        return;\n      }\n\n      const active = getActiveDescendant();\n      if (!active) {\n        return;\n      }\n\n      optionWalker.setCurrent(active);\n      const next = optionWalker.prev();\n\n      if (next && next !== listboxRef.current) {\n        setActiveDescendant(next);\n      }\n    },\n    blur: () => {\n      if (!listboxRef.current || !activeParentRef.current) {\n        return;\n      }\n\n      setActiveDescendant(undefined);\n    },\n    active: () => {\n      if (listboxRef.current) {\n        return getActiveDescendant()?.id;\n      }\n    },\n\n    focus: (id: string) => {\n      if (!listboxRef.current) {\n        return;\n      }\n\n      optionWalker.setCurrent(listboxRef.current);\n      let cur = optionWalker.next();\n\n      while (cur && cur.id !== id) {\n        cur = optionWalker.next();\n      }\n\n      if (cur) {\n        setActiveDescendant(cur);\n      }\n    },\n  }));\n\n  return { listboxRef, activeParentRef };\n}\n"],"names":["React","useOptionWalker","ACTIVEDESCENDANT_ATTRIBUTE","useActiveDescendant","options","imperativeRef","matchOption","activeParentRef","useRef","listboxRef","optionWalker","getActiveDescendant","current","querySelector","setActiveDescendant","nextActive","active","removeAttribute","setAttribute","id","useImperativeHandle","first","next","setCurrent","prev","blur","undefined","focus","cur"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,QAAQ,oBAAoB;AAEpD,SAASC,0BAA0B,QAAQ,cAAc;AAEzD,OAAO,SAASC,oBACdC,OAAgC;IAEhC,MAAM,EAAEC,aAAa,EAAEC,WAAW,EAAE,GAAGF;IACvC,MAAMG,kBAAkBP,MAAMQ,MAAM,CAAuB;IAC3D,MAAM,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGT,gBAAiC;QAAEK;IAAY;IACpF,MAAMK,sBAAsB;YACnBF;QAAP,QAAOA,sBAAAA,WAAWG,OAAO,cAAlBH,0CAAAA,oBAAoBI,aAAa,CAAc,CAAC,CAAC,EAAEX,2BAA2B,CAAC,CAAC;IACzF;IAEA,MAAMY,sBAAsB,CAACC;QAC3B,MAAMC,SAASL;QACf,IAAIK,QAAQ;YACVA,OAAOC,eAAe,CAACf;QACzB;QAEA,IAAIa,YAAY;gBAEdR;YADAQ,WAAWG,YAAY,CAAChB,4BAA4B;aACpDK,2BAAAA,gBAAgBK,OAAO,cAAvBL,+CAAAA,yBAAyBW,YAAY,CAAC,yBAAyBH,WAAWI,EAAE;QAC9E,OAAO;gBACLZ;aAAAA,4BAAAA,gBAAgBK,OAAO,cAAvBL,gDAAAA,0BAAyBU,eAAe,CAAC;QAC3C;IACF;IAEAjB,MAAMoB,mBAAmB,CAACf,eAAe,IAAO,CAAA;YAC9CgB,OAAO;gBACL,IAAI,CAACZ,WAAWG,OAAO,IAAI,CAACL,gBAAgBK,OAAO,EAAE;oBACnD;gBACF;gBAEA,MAAMS,QAAQX,aAAaW,KAAK;gBAChC,IAAIA,OAAO;oBACTP,oBAAoBO;gBACtB;YACF;YACAC,MAAM;gBACJ,IAAI,CAACb,WAAWG,OAAO,IAAI,CAACL,gBAAgBK,OAAO,EAAE;oBACnD;gBACF;gBAEA,MAAMI,SAASL;gBACf,IAAI,CAACK,QAAQ;oBACX;gBACF;gBAEAN,aAAaa,UAAU,CAACP;gBACxB,MAAMM,OAAOZ,aAAaY,IAAI;gBAC9B,IAAIA,MAAM;oBACRR,oBAAoBQ;gBACtB;YACF;YACAE,MAAM;gBACJ,IAAI,CAACf,WAAWG,OAAO,IAAI,CAACL,gBAAgBK,OAAO,EAAE;oBACnD;gBACF;gBAEA,MAAMI,SAASL;gBACf,IAAI,CAACK,QAAQ;oBACX;gBACF;gBAEAN,aAAaa,UAAU,CAACP;gBACxB,MAAMM,OAAOZ,aAAac,IAAI;gBAE9B,IAAIF,QAAQA,SAASb,WAAWG,OAAO,EAAE;oBACvCE,oBAAoBQ;gBACtB;YACF;YACAG,MAAM;gBACJ,IAAI,CAAChB,WAAWG,OAAO,IAAI,CAACL,gBAAgBK,OAAO,EAAE;oBACnD;gBACF;gBAEAE,oBAAoBY;YACtB;YACAV,QAAQ;gBACN,IAAIP,WAAWG,OAAO,EAAE;wBACfD;oBAAP,QAAOA,uBAAAA,mCAAAA,2CAAAA,qBAAuBQ,EAAE;gBAClC;YACF;YAEAQ,OAAO,CAACR;gBACN,IAAI,CAACV,WAAWG,OAAO,EAAE;oBACvB;gBACF;gBAEAF,aAAaa,UAAU,CAACd,WAAWG,OAAO;gBAC1C,IAAIgB,MAAMlB,aAAaY,IAAI;gBAE3B,MAAOM,OAAOA,IAAIT,EAAE,KAAKA,GAAI;oBAC3BS,MAAMlB,aAAaY,IAAI;gBACzB;gBAEA,IAAIM,KAAK;oBACPd,oBAAoBc;gBACtB;YACF;QACF,CAAA;IAEA,OAAO;QAAEnB;QAAYF;IAAgB;AACvC"}
+{"version":3,"sources":["useActiveDescendant.ts"],"sourcesContent":["import * as React from 'react';\nimport { useOptionWalker } from './useOptionWalker';\nimport type { ActiveDescendantOptions } from './types';\nimport { ACTIVEDESCENDANT_ATTRIBUTE } from './constants';\n\nexport function useActiveDescendant<TActiveParentElement extends HTMLElement, TListboxElement extends HTMLElement>(\n  options: ActiveDescendantOptions,\n) {\n  const { imperativeRef, matchOption } = options;\n  const activeParentRef = React.useRef<TActiveParentElement>(null);\n  const { listboxRef, optionWalker } = useOptionWalker<TListboxElement>({ matchOption });\n  const getActiveDescendant = () => {\n    return listboxRef.current?.querySelector<HTMLElement>(`[${ACTIVEDESCENDANT_ATTRIBUTE}]`);\n  };\n\n  const scrollActiveIntoView = (active: HTMLElement) => {\n    if (!listboxRef.current) {\n      return;\n    }\n\n    if (listboxRef.current.offsetHeight >= listboxRef.current.scrollHeight) {\n      return;\n    }\n\n    const { offsetHeight, offsetTop } = active;\n    const { offsetHeight: parentOffsetHeight, scrollTop } = listboxRef.current;\n\n    const isAbove = offsetTop < scrollTop;\n    const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;\n\n    const buffer = 2;\n\n    if (isAbove) {\n      listboxRef.current.scrollTo(0, offsetTop - buffer);\n    }\n\n    if (isBelow) {\n      listboxRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);\n    }\n  };\n\n  const setActiveDescendant = (nextActive: HTMLElement | undefined) => {\n    const active = getActiveDescendant();\n    if (active) {\n      active.removeAttribute(ACTIVEDESCENDANT_ATTRIBUTE);\n    }\n\n    if (nextActive) {\n      nextActive.setAttribute(ACTIVEDESCENDANT_ATTRIBUTE, '');\n      scrollActiveIntoView(nextActive);\n      activeParentRef.current?.setAttribute('aria-activedescendant', nextActive.id);\n    } else {\n      activeParentRef.current?.removeAttribute('aria-activedescendant');\n    }\n  };\n\n  React.useImperativeHandle(imperativeRef, () => ({\n    first: () => {\n      if (!listboxRef.current || !activeParentRef.current) {\n        return;\n      }\n\n      optionWalker.setCurrent(listboxRef.current);\n      const first = optionWalker.first();\n      if (first) {\n        setActiveDescendant(first);\n      }\n    },\n    next: () => {\n      if (!listboxRef.current || !activeParentRef.current) {\n        return;\n      }\n\n      const active = getActiveDescendant();\n      if (!active) {\n        return;\n      }\n\n      optionWalker.setCurrent(active);\n      const next = optionWalker.next();\n      if (next) {\n        setActiveDescendant(next);\n      }\n    },\n    prev: () => {\n      if (!listboxRef.current || !activeParentRef.current) {\n        return;\n      }\n\n      const active = getActiveDescendant();\n      if (!active) {\n        return;\n      }\n\n      optionWalker.setCurrent(active);\n      if (!matchOption(active)) {\n        optionWalker.prev();\n      }\n\n      const next = optionWalker.prev();\n\n      if (next && next !== listboxRef.current) {\n        setActiveDescendant(next);\n      }\n    },\n    blur: () => {\n      if (!activeParentRef.current) {\n        return;\n      }\n\n      setActiveDescendant(undefined);\n    },\n    active: () => {\n      if (listboxRef.current) {\n        return getActiveDescendant()?.id;\n      }\n    },\n\n    focus: (id: string) => {\n      if (!listboxRef.current) {\n        return;\n      }\n\n      optionWalker.setCurrent(listboxRef.current);\n      let cur = optionWalker.next();\n\n      while (cur && cur.id !== id) {\n        cur = optionWalker.next();\n      }\n\n      if (cur) {\n        setActiveDescendant(cur);\n      }\n    },\n  }));\n\n  return { listboxRef, activeParentRef };\n}\n"],"names":["React","useOptionWalker","ACTIVEDESCENDANT_ATTRIBUTE","useActiveDescendant","options","imperativeRef","matchOption","activeParentRef","useRef","listboxRef","optionWalker","getActiveDescendant","current","querySelector","scrollActiveIntoView","active","offsetHeight","scrollHeight","offsetTop","parentOffsetHeight","scrollTop","isAbove","isBelow","buffer","scrollTo","setActiveDescendant","nextActive","removeAttribute","setAttribute","id","useImperativeHandle","first","setCurrent","next","prev","blur","undefined","focus","cur"],"mappings":"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"}

package/lib-commonjs/activedescendant/useActiveDescendant.js

@@ -22,6 +22,25 @@ function useActiveDescendant(options) {
         var _listboxRef_current;
         return (_listboxRef_current = listboxRef.current) === null || _listboxRef_current === void 0 ? void 0 : _listboxRef_current.querySelector(`[${_constants.ACTIVEDESCENDANT_ATTRIBUTE}]`);
     };
+    const scrollActiveIntoView = (active)=>{
+        if (!listboxRef.current) {
+            return;
+        }
+        if (listboxRef.current.offsetHeight >= listboxRef.current.scrollHeight) {
+            return;
+        }
+        const { offsetHeight, offsetTop } = active;
+        const { offsetHeight: parentOffsetHeight, scrollTop } = listboxRef.current;
+        const isAbove = offsetTop < scrollTop;
+        const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
+        const buffer = 2;
+        if (isAbove) {
+            listboxRef.current.scrollTo(0, offsetTop - buffer);
+        }
+        if (isBelow) {
+            listboxRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);
+        }
+    };
     const setActiveDescendant = (nextActive)=>{
         const active = getActiveDescendant();
         if (active) {
@@ -30,6 +49,7 @@ function useActiveDescendant(options) {
         if (nextActive) {
             var _activeParentRef_current;
             nextActive.setAttribute(_constants.ACTIVEDESCENDANT_ATTRIBUTE, '');
+            scrollActiveIntoView(nextActive);
             (_activeParentRef_current = activeParentRef.current) === null || _activeParentRef_current === void 0 ? void 0 : _activeParentRef_current.setAttribute('aria-activedescendant', nextActive.id);
         } else {
             var _activeParentRef_current1;
@@ -41,6 +61,7 @@ function useActiveDescendant(options) {
                 if (!listboxRef.current || !activeParentRef.current) {
                     return;
                 }
+                optionWalker.setCurrent(listboxRef.current);
                 const first = optionWalker.first();
                 if (first) {
                     setActiveDescendant(first);
@@ -69,13 +90,16 @@ function useActiveDescendant(options) {
                     return;
                 }
                 optionWalker.setCurrent(active);
+                if (!matchOption(active)) {
+                    optionWalker.prev();
+                }
                 const next = optionWalker.prev();
                 if (next && next !== listboxRef.current) {
                     setActiveDescendant(next);
                 }
             },
             blur: ()=>{
-                if (!listboxRef.current || !activeParentRef.current) {
+                if (!activeParentRef.current) {
                     return;
                 }
                 setActiveDescendant(undefined);

package/lib-commonjs/activedescendant/useActiveDescendant.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useActiveDescendant.js"],"sourcesContent":["import * as React from 'react';\nimport { useOptionWalker } from './useOptionWalker';\nimport { ACTIVEDESCENDANT_ATTRIBUTE } from './constants';\nexport function useActiveDescendant(options) {\n    const { imperativeRef, matchOption } = options;\n    const activeParentRef = React.useRef(null);\n    const { listboxRef, optionWalker } = useOptionWalker({\n        matchOption\n    });\n    const getActiveDescendant = ()=>{\n        var _listboxRef_current;\n        return (_listboxRef_current = listboxRef.current) === null || _listboxRef_current === void 0 ? void 0 : _listboxRef_current.querySelector(`[${ACTIVEDESCENDANT_ATTRIBUTE}]`);\n    };\n    const setActiveDescendant = (nextActive)=>{\n        const active = getActiveDescendant();\n        if (active) {\n            active.removeAttribute(ACTIVEDESCENDANT_ATTRIBUTE);\n        }\n        if (nextActive) {\n            var _activeParentRef_current;\n            nextActive.setAttribute(ACTIVEDESCENDANT_ATTRIBUTE, '');\n            (_activeParentRef_current = activeParentRef.current) === null || _activeParentRef_current === void 0 ? void 0 : _activeParentRef_current.setAttribute('aria-activedescendant', nextActive.id);\n        } else {\n            var _activeParentRef_current1;\n            (_activeParentRef_current1 = activeParentRef.current) === null || _activeParentRef_current1 === void 0 ? void 0 : _activeParentRef_current1.removeAttribute('aria-activedescendant');\n        }\n    };\n    React.useImperativeHandle(imperativeRef, ()=>({\n            first: ()=>{\n                if (!listboxRef.current || !activeParentRef.current) {\n                    return;\n                }\n                const first = optionWalker.first();\n                if (first) {\n                    setActiveDescendant(first);\n                }\n            },\n            next: ()=>{\n                if (!listboxRef.current || !activeParentRef.current) {\n                    return;\n                }\n                const active = getActiveDescendant();\n                if (!active) {\n                    return;\n                }\n                optionWalker.setCurrent(active);\n                const next = optionWalker.next();\n                if (next) {\n                    setActiveDescendant(next);\n                }\n            },\n            prev: ()=>{\n                if (!listboxRef.current || !activeParentRef.current) {\n                    return;\n                }\n                const active = getActiveDescendant();\n                if (!active) {\n                    return;\n                }\n                optionWalker.setCurrent(active);\n                const next = optionWalker.prev();\n                if (next && next !== listboxRef.current) {\n                    setActiveDescendant(next);\n                }\n            },\n            blur: ()=>{\n                if (!listboxRef.current || !activeParentRef.current) {\n                    return;\n                }\n                setActiveDescendant(undefined);\n            },\n            active: ()=>{\n                if (listboxRef.current) {\n                    var _getActiveDescendant;\n                    return (_getActiveDescendant = getActiveDescendant()) === null || _getActiveDescendant === void 0 ? void 0 : _getActiveDescendant.id;\n                }\n            },\n            focus: (id)=>{\n                if (!listboxRef.current) {\n                    return;\n                }\n                optionWalker.setCurrent(listboxRef.current);\n                let cur = optionWalker.next();\n                while(cur && cur.id !== id){\n                    cur = optionWalker.next();\n                }\n                if (cur) {\n                    setActiveDescendant(cur);\n                }\n            }\n        }));\n    return {\n        listboxRef,\n        activeParentRef\n    };\n}\n"],"names":["useActiveDescendant","options","imperativeRef","matchOption","activeParentRef","React","useRef","listboxRef","optionWalker","useOptionWalker","getActiveDescendant","_listboxRef_current","current","querySelector","ACTIVEDESCENDANT_ATTRIBUTE","setActiveDescendant","nextActive","active","removeAttribute","_activeParentRef_current","setAttribute","id","_activeParentRef_current1","useImperativeHandle","first","next","setCurrent","prev","blur","undefined","_getActiveDescendant","focus","cur"],"mappings":"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"}
+{"version":3,"sources":["useActiveDescendant.js"],"sourcesContent":["import * as React from 'react';\nimport { useOptionWalker } from './useOptionWalker';\nimport { ACTIVEDESCENDANT_ATTRIBUTE } from './constants';\nexport function useActiveDescendant(options) {\n    const { imperativeRef, matchOption } = options;\n    const activeParentRef = React.useRef(null);\n    const { listboxRef, optionWalker } = useOptionWalker({\n        matchOption\n    });\n    const getActiveDescendant = ()=>{\n        var _listboxRef_current;\n        return (_listboxRef_current = listboxRef.current) === null || _listboxRef_current === void 0 ? void 0 : _listboxRef_current.querySelector(`[${ACTIVEDESCENDANT_ATTRIBUTE}]`);\n    };\n    const scrollActiveIntoView = (active)=>{\n        if (!listboxRef.current) {\n            return;\n        }\n        if (listboxRef.current.offsetHeight >= listboxRef.current.scrollHeight) {\n            return;\n        }\n        const { offsetHeight, offsetTop } = active;\n        const { offsetHeight: parentOffsetHeight, scrollTop } = listboxRef.current;\n        const isAbove = offsetTop < scrollTop;\n        const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;\n        const buffer = 2;\n        if (isAbove) {\n            listboxRef.current.scrollTo(0, offsetTop - buffer);\n        }\n        if (isBelow) {\n            listboxRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);\n        }\n    };\n    const setActiveDescendant = (nextActive)=>{\n        const active = getActiveDescendant();\n        if (active) {\n            active.removeAttribute(ACTIVEDESCENDANT_ATTRIBUTE);\n        }\n        if (nextActive) {\n            var _activeParentRef_current;\n            nextActive.setAttribute(ACTIVEDESCENDANT_ATTRIBUTE, '');\n            scrollActiveIntoView(nextActive);\n            (_activeParentRef_current = activeParentRef.current) === null || _activeParentRef_current === void 0 ? void 0 : _activeParentRef_current.setAttribute('aria-activedescendant', nextActive.id);\n        } else {\n            var _activeParentRef_current1;\n            (_activeParentRef_current1 = activeParentRef.current) === null || _activeParentRef_current1 === void 0 ? void 0 : _activeParentRef_current1.removeAttribute('aria-activedescendant');\n        }\n    };\n    React.useImperativeHandle(imperativeRef, ()=>({\n            first: ()=>{\n                if (!listboxRef.current || !activeParentRef.current) {\n                    return;\n                }\n                optionWalker.setCurrent(listboxRef.current);\n                const first = optionWalker.first();\n                if (first) {\n                    setActiveDescendant(first);\n                }\n            },\n            next: ()=>{\n                if (!listboxRef.current || !activeParentRef.current) {\n                    return;\n                }\n                const active = getActiveDescendant();\n                if (!active) {\n                    return;\n                }\n                optionWalker.setCurrent(active);\n                const next = optionWalker.next();\n                if (next) {\n                    setActiveDescendant(next);\n                }\n            },\n            prev: ()=>{\n                if (!listboxRef.current || !activeParentRef.current) {\n                    return;\n                }\n                const active = getActiveDescendant();\n                if (!active) {\n                    return;\n                }\n                optionWalker.setCurrent(active);\n                if (!matchOption(active)) {\n                    optionWalker.prev();\n                }\n                const next = optionWalker.prev();\n                if (next && next !== listboxRef.current) {\n                    setActiveDescendant(next);\n                }\n            },\n            blur: ()=>{\n                if (!activeParentRef.current) {\n                    return;\n                }\n                setActiveDescendant(undefined);\n            },\n            active: ()=>{\n                if (listboxRef.current) {\n                    var _getActiveDescendant;\n                    return (_getActiveDescendant = getActiveDescendant()) === null || _getActiveDescendant === void 0 ? void 0 : _getActiveDescendant.id;\n                }\n            },\n            focus: (id)=>{\n                if (!listboxRef.current) {\n                    return;\n                }\n                optionWalker.setCurrent(listboxRef.current);\n                let cur = optionWalker.next();\n                while(cur && cur.id !== id){\n                    cur = optionWalker.next();\n                }\n                if (cur) {\n                    setActiveDescendant(cur);\n                }\n            }\n        }));\n    return {\n        listboxRef,\n        activeParentRef\n    };\n}\n"],"names":["useActiveDescendant","options","imperativeRef","matchOption","activeParentRef","React","useRef","listboxRef","optionWalker","useOptionWalker","getActiveDescendant","_listboxRef_current","current","querySelector","ACTIVEDESCENDANT_ATTRIBUTE","scrollActiveIntoView","active","offsetHeight","scrollHeight","offsetTop","parentOffsetHeight","scrollTop","isAbove","isBelow","buffer","scrollTo","setActiveDescendant","nextActive","removeAttribute","_activeParentRef_current","setAttribute","id","_activeParentRef_current1","useImperativeHandle","first","setCurrent","next","prev","blur","undefined","_getActiveDescendant","focus","cur"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-aria",
-  "version": "9.4.0",
+  "version": "9.5.0",
   "description": "React helper to ensure ARIA",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -32,8 +32,8 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.7",
-    "@fluentui/react-shared-contexts": "^9.13.0",
-    "@fluentui/react-utilities": "^9.15.2",
+    "@fluentui/react-shared-contexts": "^9.13.1",
+    "@fluentui/react-utilities": "^9.15.3",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {