@fluentui/react-tabster 9.26.14 → 9.26.16

package/CHANGELOG.md

@@ -1,18 +1,39 @@
 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Thu, 23 Apr 2026 11:59:34 GMT and should not be manually modified.
+This log was last generated on Wed, 24 Jun 2026 11:03:47 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.26.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.26.16)
+
+Wed, 24 Jun 2026 11:03:47 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.26.15..@fluentui/react-tabster_v9.26.16)
+
+### Patches
+
+- useMergedTabsterAttributes_unstable now supports attributes that change at runtime, including a changing number of attributes ([PR #36266](https://github.com/microsoft/fluentui/pull/36266) by bsunderhus@microsoft.com)
+- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
+- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+
+## [9.26.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.26.15)
+
+Tue, 26 May 2026 09:39:07 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.26.14..@fluentui/react-tabster_v9.26.15)
+
+### Patches
+
+- chore: bump tabster to ^8.8.0 and keyborg to ^2.14.1 ([PR #36082](https://github.com/microsoft/fluentui/pull/36082) by 198982749+Copilot@users.noreply.github.com)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+
 ## [9.26.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.26.14)
 
-Thu, 23 Apr 2026 11:59:34 GMT 
+Thu, 23 Apr 2026 14:21:07 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.26.13..@fluentui/react-tabster_v9.26.14)
 
 ### Patches
 
 - fix: mitigate hidden sideEffects by explicitly using type imports and decoupling useDangerousNeverHidden from tabster import path ([PR #35933](https://github.com/microsoft/fluentui/pull/35933) by martinhochel@microsoft.com)
-- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
 
 ## [9.26.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.26.13)
 

package/dist/index.d.ts

@@ -1481,7 +1481,9 @@ export declare function useKeyboardNavAttribute<E extends HTMLElement>(): React_
 /**
  * Merges a collection of tabster attributes.
  *
- * ⚠️The attributes passed as arguments to this  hook cannot change at runtime.
+ * The result is memoized and only recomputed when the contributing attributes
+ * actually change, so both the values and the number of attributes may change
+ * at runtime.
  * @internal
  * @param attributes - collection of tabster attributes from other react-tabster hooks
  * @returns single merged tabster attribute

package/lib/hooks/useFocusObserved.js

@@ -17,7 +17,8 @@ import { useTabster } from './useTabster';
         }
         return {
             result: Promise.resolve(false),
-            cancel: ()=>null
+            cancel: ()=>null,
+            diagnostics: {}
         };
     }, [
         observedAPIRef,

package/lib/hooks/useFocusObserved.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useFocusObserved.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { Types as TabsterTypes } from 'tabster';\nimport { getObservedElement } from 'tabster';\nimport { useTabster } from './useTabster';\n\ninterface UseFocusObservedOptions {\n  /**\n   * After timeout the focus attempt fails\n   */\n  timeout?: number;\n}\n\n/**\n * @param name - The observed element to focus\n * @param options - Options for the focus observed\n *\n * @returns Function that will focus an element\n */\nexport function useFocusObserved(\n  name: string,\n  options: UseFocusObservedOptions = {},\n): () => TabsterTypes.ObservedElementAsyncRequest<boolean> {\n  const { timeout = 1000 } = options;\n  const observedAPIRef = useTabster(getObservedElement);\n\n  return React.useCallback(() => {\n    const observerAPI = observedAPIRef.current;\n\n    if (observerAPI) {\n      return observerAPI.requestFocus(name, timeout);\n    }\n\n    return {\n      result: Promise.resolve(false),\n      cancel: () => null,\n    };\n  }, [observedAPIRef, name, timeout]);\n}\n"],"names":["React","getObservedElement","useTabster","useFocusObserved","name","options","timeout","observedAPIRef","useCallback","observerAPI","current","requestFocus","result","Promise","resolve","cancel"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,kBAAkB,QAAQ,UAAU;AAC7C,SAASC,UAAU,QAAQ,eAAe;AAS1C;;;;;CAKC,GACD,OAAO,SAASC,iBACdC,IAAY,EACZC,UAAmC,CAAC,CAAC;IAErC,MAAM,EAAEC,UAAU,IAAI,EAAE,GAAGD;IAC3B,MAAME,iBAAiBL,WAAWD;IAElC,OAAOD,MAAMQ,WAAW,CAAC;QACvB,MAAMC,cAAcF,eAAeG,OAAO;QAE1C,IAAID,aAAa;YACf,OAAOA,YAAYE,YAAY,CAACP,MAAME;QACxC;QAEA,OAAO;YACLM,QAAQC,QAAQC,OAAO,CAAC;YACxBC,QAAQ,IAAM;QAChB;IACF,GAAG;QAACR;QAAgBH;QAAME;KAAQ;AACpC"}
+{"version":3,"sources":["../src/hooks/useFocusObserved.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { Types as TabsterTypes } from 'tabster';\nimport { getObservedElement } from 'tabster';\nimport { useTabster } from './useTabster';\n\ninterface UseFocusObservedOptions {\n  /**\n   * After timeout the focus attempt fails\n   */\n  timeout?: number;\n}\n\n/**\n * @param name - The observed element to focus\n * @param options - Options for the focus observed\n *\n * @returns Function that will focus an element\n */\nexport function useFocusObserved(\n  name: string,\n  options: UseFocusObservedOptions = {},\n): () => TabsterTypes.ObservedElementAsyncRequest<boolean> {\n  const { timeout = 1000 } = options;\n  const observedAPIRef = useTabster(getObservedElement);\n\n  return React.useCallback(() => {\n    const observerAPI = observedAPIRef.current;\n\n    if (observerAPI) {\n      return observerAPI.requestFocus(name, timeout);\n    }\n\n    return {\n      result: Promise.resolve(false),\n      cancel: () => null,\n      diagnostics: {},\n    };\n  }, [observedAPIRef, name, timeout]);\n}\n"],"names":["React","getObservedElement","useTabster","useFocusObserved","name","options","timeout","observedAPIRef","useCallback","observerAPI","current","requestFocus","result","Promise","resolve","cancel","diagnostics"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,kBAAkB,QAAQ,UAAU;AAC7C,SAASC,UAAU,QAAQ,eAAe;AAS1C;;;;;CAKC,GACD,OAAO,SAASC,iBACdC,IAAY,EACZC,UAAmC,CAAC,CAAC;IAErC,MAAM,EAAEC,UAAU,IAAI,EAAE,GAAGD;IAC3B,MAAME,iBAAiBL,WAAWD;IAElC,OAAOD,MAAMQ,WAAW,CAAC;QACvB,MAAMC,cAAcF,eAAeG,OAAO;QAE1C,IAAID,aAAa;YACf,OAAOA,YAAYE,YAAY,CAACP,MAAME;QACxC;QAEA,OAAO;YACLM,QAAQC,QAAQC,OAAO,CAAC;YACxBC,QAAQ,IAAM;YACdC,aAAa,CAAC;QAChB;IACF,GAAG;QAACT;QAAgBH;QAAME;KAAQ;AACpC"}

package/lib/hooks/useMergeTabsterAttributes.js

@@ -4,34 +4,53 @@ import { TABSTER_ATTRIBUTE_NAME } from 'tabster';
 /**
  * Merges a collection of tabster attributes.
  *
- * ⚠️The attributes passed as arguments to this  hook cannot change at runtime.
+ * The result is memoized and only recomputed when the contributing attributes
+ * actually change, so both the values and the number of attributes may change
+ * at runtime.
  * @internal
  * @param attributes - collection of tabster attributes from other react-tabster hooks
  * @returns single merged tabster attribute
  */ export const useMergedTabsterAttributes_unstable = (...attributes)=>{
-    'use no memo';
-    const stringAttributes = attributes.reduce((acc, curr)=>{
-        if (curr === null || curr === void 0 ? void 0 : curr[TABSTER_ATTRIBUTE_NAME]) {
-            acc.push(curr[TABSTER_ATTRIBUTE_NAME]);
+    // The collected attributes are reduced to a single primitive `key` so the
+    // `React.useMemo` dependency list keeps a constant size, even when the number
+    // of contributing attributes changes between renders. The array and the key
+    // are built in a single pass.
+    const stringAttributes = [];
+    let key = '';
+    for (const attribute of attributes){
+        const value = attribute === null || attribute === void 0 ? void 0 : attribute[TABSTER_ATTRIBUTE_NAME];
+        if (value) {
+            stringAttributes.push(value);
+            key += value + MERGE_KEY_SEPARATOR;
         }
-        return acc;
-    }, []);
-    if (process.env.NODE_ENV !== 'production') {
-        // ignoring rules of hooks because this is a condition based on the environment
-        // it's safe to ignore the rule
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        useWarnIfUnstableAttributes(stringAttributes);
     }
     return React.useMemo(()=>({
-            [TABSTER_ATTRIBUTE_NAME]: stringAttributes.length > 0 ? stringAttributes.reduce(mergeJSONStrings) : undefined
-        }), // disable exhaustive-deps because we want to memoize the result of the reduction
-    // this is safe because the collection of attributes is not expected to change at runtime
+            [TABSTER_ATTRIBUTE_NAME]: mergeAttributes(stringAttributes)
+        }), // `key` fully captures the contents of `stringAttributes`, which is rebuilt
+    // on every render and therefore cannot be a dependency itself.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    stringAttributes);
+    [
+        key
+    ]);
 };
 /**
- * Merges two JSON strings into one.
- */ const mergeJSONStrings = (a, b)=>JSON.stringify(Object.assign(safelyParseJSON(a), safelyParseJSON(b)));
+ * `NUL` separator used to build the memoization key. It is a safe separator
+ * because the attribute values originate from `JSON.stringify`, which escapes
+ * control characters, so a literal `NUL` can never appear inside one of them.
+ */ const MERGE_KEY_SEPARATOR = '\u0000';
+/**
+ * Merges a collection of tabster attribute JSON strings into a single one.
+ * Later attributes take priority over earlier ones.
+ */ const mergeAttributes = (stringAttributes)=>{
+    if (stringAttributes.length === 0) {
+        return undefined;
+    }
+    // common case: a single hook contributed an attribute, no parsing required
+    if (stringAttributes.length === 1) {
+        return stringAttributes[0];
+    }
+    return JSON.stringify(Object.assign({}, ...stringAttributes.map(safelyParseJSON)));
+};
 /**
  * Tries to parse a JSON string and returns an object.
  * If the JSON string is invalid, an empty object is returned.
@@ -42,35 +61,3 @@ import { TABSTER_ATTRIBUTE_NAME } from 'tabster';
         return {};
     }
 };
-/**
- * Helper hook that ensures that the attributes passed to the hook are stable.
- * This is necessary because the attributes are expected to not change at runtime.
- *
- * This hook will console.warn if the attributes change at runtime.
- */ const useWarnIfUnstableAttributes = (attributes)=>{
-    'use no memo';
-    const initialAttributesRef = React.useRef(attributes);
-    let isStable = initialAttributesRef.current.length === attributes.length;
-    if (initialAttributesRef.current !== attributes && isStable) {
-        for(let i = 0; i < attributes.length; i++){
-            if (initialAttributesRef.current[i] !== attributes[i]) {
-                isStable = false;
-                break;
-            }
-        }
-    }
-    React.useEffect(()=>{
-        if (!isStable) {
-            const error = new Error();
-            // eslint-disable-next-line no-console
-            console.warn(/** #__DE-INDENT__ */ `
-        @fluentui/react-tabster [useMergedTabsterAttributes]:
-        The attributes passed to the hook changed at runtime.
-        This might lead to unexpected behavior, please ensure that the attributes are stable.
-        ${error.stack}
-      `);
-        }
-    }, [
-        isStable
-    ]);
-};

package/lib/hooks/useMergeTabsterAttributes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useMergeTabsterAttributes.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { Types } from 'tabster';\nimport { TABSTER_ATTRIBUTE_NAME } from 'tabster';\n\n/**\n * Merges a collection of tabster attributes.\n *\n * ⚠️The attributes passed as arguments to this  hook cannot change at runtime.\n * @internal\n * @param attributes - collection of tabster attributes from other react-tabster hooks\n * @returns single merged tabster attribute\n */\nexport const useMergedTabsterAttributes_unstable = (\n  ...attributes: (Partial<Types.TabsterDOMAttribute> | null | undefined)[]\n): Types.TabsterDOMAttribute => {\n  'use no memo';\n\n  const stringAttributes = attributes.reduce<string[]>((acc, curr) => {\n    if (curr?.[TABSTER_ATTRIBUTE_NAME]) {\n      acc.push(curr[TABSTER_ATTRIBUTE_NAME]);\n    }\n    return acc;\n  }, []);\n\n  if (process.env.NODE_ENV !== 'production') {\n    // ignoring rules of hooks because this is a condition based on the environment\n    // it's safe to ignore the rule\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useWarnIfUnstableAttributes(stringAttributes);\n  }\n\n  return React.useMemo(\n    () => ({\n      [TABSTER_ATTRIBUTE_NAME]: stringAttributes.length > 0 ? stringAttributes.reduce(mergeJSONStrings) : undefined,\n    }),\n    // disable exhaustive-deps because we want to memoize the result of the reduction\n    // this is safe because the collection of attributes is not expected to change at runtime\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    stringAttributes,\n  );\n};\n\n/**\n * Merges two JSON strings into one.\n */\nconst mergeJSONStrings = (a: string, b: string): string =>\n  JSON.stringify(Object.assign(safelyParseJSON(a), safelyParseJSON(b)));\n\n/**\n * Tries to parse a JSON string and returns an object.\n * If the JSON string is invalid, an empty object is returned.\n */\nconst safelyParseJSON = (json: string): object => {\n  try {\n    return JSON.parse(json);\n  } catch {\n    return {};\n  }\n};\n\n/**\n * Helper hook that ensures that the attributes passed to the hook are stable.\n * This is necessary because the attributes are expected to not change at runtime.\n *\n * This hook will console.warn if the attributes change at runtime.\n */\nconst useWarnIfUnstableAttributes = (attributes: string[]) => {\n  'use no memo';\n\n  const initialAttributesRef = React.useRef(attributes);\n\n  let isStable = initialAttributesRef.current.length === attributes.length;\n  if (initialAttributesRef.current !== attributes && isStable) {\n    for (let i = 0; i < attributes.length; i++) {\n      if (initialAttributesRef.current[i] !== attributes[i]) {\n        isStable = false;\n        break;\n      }\n    }\n  }\n  React.useEffect(() => {\n    if (!isStable) {\n      const error = new Error();\n      // eslint-disable-next-line no-console\n      console.warn(/** #__DE-INDENT__ */ `\n        @fluentui/react-tabster [useMergedTabsterAttributes]:\n        The attributes passed to the hook changed at runtime.\n        This might lead to unexpected behavior, please ensure that the attributes are stable.\n        ${error.stack}\n      `);\n    }\n  }, [isStable]);\n};\n"],"names":["React","TABSTER_ATTRIBUTE_NAME","useMergedTabsterAttributes_unstable","attributes","stringAttributes","reduce","acc","curr","push","process","env","NODE_ENV","useWarnIfUnstableAttributes","useMemo","length","mergeJSONStrings","undefined","a","b","JSON","stringify","Object","assign","safelyParseJSON","json","parse","initialAttributesRef","useRef","isStable","current","i","useEffect","error","Error","console","warn","stack"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsB,QAAQ,UAAU;AAEjD;;;;;;;CAOC,GACD,OAAO,MAAMC,sCAAsC,CACjD,GAAGC;IAEH;IAEA,MAAMC,mBAAmBD,WAAWE,MAAM,CAAW,CAACC,KAAKC;QACzD,IAAIA,iBAAAA,2BAAAA,IAAM,CAACN,uBAAuB,EAAE;YAClCK,IAAIE,IAAI,CAACD,IAAI,CAACN,uBAAuB;QACvC;QACA,OAAOK;IACT,GAAG,EAAE;IAEL,IAAIG,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,+EAA+E;QAC/E,+BAA+B;QAC/B,sDAAsD;QACtDC,4BAA4BR;IAC9B;IAEA,OAAOJ,MAAMa,OAAO,CAClB,IAAO,CAAA;YACL,CAACZ,uBAAuB,EAAEG,iBAAiBU,MAAM,GAAG,IAAIV,iBAAiBC,MAAM,CAACU,oBAAoBC;QACtG,CAAA,GACA,iFAAiF;IACjF,yFAAyF;IACzF,uDAAuD;IACvDZ;AAEJ,EAAE;AAEF;;CAEC,GACD,MAAMW,mBAAmB,CAACE,GAAWC,IACnCC,KAAKC,SAAS,CAACC,OAAOC,MAAM,CAACC,gBAAgBN,IAAIM,gBAAgBL;AAEnE;;;CAGC,GACD,MAAMK,kBAAkB,CAACC;IACvB,IAAI;QACF,OAAOL,KAAKM,KAAK,CAACD;IACpB,EAAE,OAAM;QACN,OAAO,CAAC;IACV;AACF;AAEA;;;;;CAKC,GACD,MAAMZ,8BAA8B,CAACT;IACnC;IAEA,MAAMuB,uBAAuB1B,MAAM2B,MAAM,CAACxB;IAE1C,IAAIyB,WAAWF,qBAAqBG,OAAO,CAACf,MAAM,KAAKX,WAAWW,MAAM;IACxE,IAAIY,qBAAqBG,OAAO,KAAK1B,cAAcyB,UAAU;QAC3D,IAAK,IAAIE,IAAI,GAAGA,IAAI3B,WAAWW,MAAM,EAAEgB,IAAK;YAC1C,IAAIJ,qBAAqBG,OAAO,CAACC,EAAE,KAAK3B,UAAU,CAAC2B,EAAE,EAAE;gBACrDF,WAAW;gBACX;YACF;QACF;IACF;IACA5B,MAAM+B,SAAS,CAAC;QACd,IAAI,CAACH,UAAU;YACb,MAAMI,QAAQ,IAAIC;YAClB,sCAAsC;YACtCC,QAAQC,IAAI,CAAC,mBAAmB,GAAG,CAAC;;;;QAIlC,EAAEH,MAAMI,KAAK,CAAC;MAChB,CAAC;QACH;IACF,GAAG;QAACR;KAAS;AACf"}
+{"version":3,"sources":["../src/hooks/useMergeTabsterAttributes.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { Types } from 'tabster';\nimport { TABSTER_ATTRIBUTE_NAME } from 'tabster';\n\n/**\n * Merges a collection of tabster attributes.\n *\n * The result is memoized and only recomputed when the contributing attributes\n * actually change, so both the values and the number of attributes may change\n * at runtime.\n * @internal\n * @param attributes - collection of tabster attributes from other react-tabster hooks\n * @returns single merged tabster attribute\n */\nexport const useMergedTabsterAttributes_unstable = (\n  ...attributes: (Partial<Types.TabsterDOMAttribute> | null | undefined)[]\n): Types.TabsterDOMAttribute => {\n  // The collected attributes are reduced to a single primitive `key` so the\n  // `React.useMemo` dependency list keeps a constant size, even when the number\n  // of contributing attributes changes between renders. The array and the key\n  // are built in a single pass.\n  const stringAttributes: string[] = [];\n  let key = '';\n  for (const attribute of attributes) {\n    const value = attribute?.[TABSTER_ATTRIBUTE_NAME];\n    if (value) {\n      stringAttributes.push(value);\n      key += value + MERGE_KEY_SEPARATOR;\n    }\n  }\n\n  return React.useMemo(\n    () => ({ [TABSTER_ATTRIBUTE_NAME]: mergeAttributes(stringAttributes) }),\n    // `key` fully captures the contents of `stringAttributes`, which is rebuilt\n    // on every render and therefore cannot be a dependency itself.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [key],\n  );\n};\n\n/**\n * `NUL` separator used to build the memoization key. It is a safe separator\n * because the attribute values originate from `JSON.stringify`, which escapes\n * control characters, so a literal `NUL` can never appear inside one of them.\n */\nconst MERGE_KEY_SEPARATOR = '\\u0000';\n\n/**\n * Merges a collection of tabster attribute JSON strings into a single one.\n * Later attributes take priority over earlier ones.\n */\nconst mergeAttributes = (stringAttributes: string[]): string | undefined => {\n  if (stringAttributes.length === 0) {\n    return undefined;\n  }\n  // common case: a single hook contributed an attribute, no parsing required\n  if (stringAttributes.length === 1) {\n    return stringAttributes[0];\n  }\n  return JSON.stringify(Object.assign({}, ...stringAttributes.map(safelyParseJSON)));\n};\n\n/**\n * Tries to parse a JSON string and returns an object.\n * If the JSON string is invalid, an empty object is returned.\n */\nconst safelyParseJSON = (json: string): object => {\n  try {\n    return JSON.parse(json);\n  } catch {\n    return {};\n  }\n};\n"],"names":["React","TABSTER_ATTRIBUTE_NAME","useMergedTabsterAttributes_unstable","attributes","stringAttributes","key","attribute","value","push","MERGE_KEY_SEPARATOR","useMemo","mergeAttributes","length","undefined","JSON","stringify","Object","assign","map","safelyParseJSON","json","parse"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsB,QAAQ,UAAU;AAEjD;;;;;;;;;CASC,GACD,OAAO,MAAMC,sCAAsC,CACjD,GAAGC;IAEH,0EAA0E;IAC1E,8EAA8E;IAC9E,4EAA4E;IAC5E,8BAA8B;IAC9B,MAAMC,mBAA6B,EAAE;IACrC,IAAIC,MAAM;IACV,KAAK,MAAMC,aAAaH,WAAY;QAClC,MAAMI,QAAQD,sBAAAA,gCAAAA,SAAW,CAACL,uBAAuB;QACjD,IAAIM,OAAO;YACTH,iBAAiBI,IAAI,CAACD;YACtBF,OAAOE,QAAQE;QACjB;IACF;IAEA,OAAOT,MAAMU,OAAO,CAClB,IAAO,CAAA;YAAE,CAACT,uBAAuB,EAAEU,gBAAgBP;QAAkB,CAAA,GACrE,4EAA4E;IAC5E,+DAA+D;IAC/D,uDAAuD;IACvD;QAACC;KAAI;AAET,EAAE;AAEF;;;;CAIC,GACD,MAAMI,sBAAsB;AAE5B;;;CAGC,GACD,MAAME,kBAAkB,CAACP;IACvB,IAAIA,iBAAiBQ,MAAM,KAAK,GAAG;QACjC,OAAOC;IACT;IACA,2EAA2E;IAC3E,IAAIT,iBAAiBQ,MAAM,KAAK,GAAG;QACjC,OAAOR,gBAAgB,CAAC,EAAE;IAC5B;IACA,OAAOU,KAAKC,SAAS,CAACC,OAAOC,MAAM,CAAC,CAAC,MAAMb,iBAAiBc,GAAG,CAACC;AAClE;AAEA;;;CAGC,GACD,MAAMA,kBAAkB,CAACC;IACvB,IAAI;QACF,OAAON,KAAKO,KAAK,CAACD;IACpB,EAAE,OAAM;QACN,OAAO,CAAC;IACV;AACF"}

package/lib-commonjs/hooks/useFocusObserved.js

@@ -23,7 +23,8 @@ function useFocusObserved(name, options = {}) {
         }
         return {
             result: Promise.resolve(false),
-            cancel: ()=>null
+            cancel: ()=>null,
+            diagnostics: {}
         };
     }, [
         observedAPIRef,

package/lib-commonjs/hooks/useFocusObserved.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useFocusObserved.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { Types as TabsterTypes } from 'tabster';\nimport { getObservedElement } from 'tabster';\nimport { useTabster } from './useTabster';\n\ninterface UseFocusObservedOptions {\n  /**\n   * After timeout the focus attempt fails\n   */\n  timeout?: number;\n}\n\n/**\n * @param name - The observed element to focus\n * @param options - Options for the focus observed\n *\n * @returns Function that will focus an element\n */\nexport function useFocusObserved(\n  name: string,\n  options: UseFocusObservedOptions = {},\n): () => TabsterTypes.ObservedElementAsyncRequest<boolean> {\n  const { timeout = 1000 } = options;\n  const observedAPIRef = useTabster(getObservedElement);\n\n  return React.useCallback(() => {\n    const observerAPI = observedAPIRef.current;\n\n    if (observerAPI) {\n      return observerAPI.requestFocus(name, timeout);\n    }\n\n    return {\n      result: Promise.resolve(false),\n      cancel: () => null,\n    };\n  }, [observedAPIRef, name, timeout]);\n}\n"],"names":["useFocusObserved","name","options","timeout","observedAPIRef","useTabster","getObservedElement","React","useCallback","observerAPI","current","requestFocus","result","Promise","resolve","cancel"],"mappings":"AAAA;;;;;+BAoBgBA;;;eAAAA;;;;iEAlBO;yBAEY;4BACR;AAepB,SAASA,iBACdC,IAAY,EACZC,UAAmC,CAAC,CAAC;IAErC,MAAM,EAAEC,UAAU,IAAI,EAAE,GAAGD;IAC3B,MAAME,iBAAiBC,IAAAA,sBAAU,EAACC,2BAAkB;IAEpD,OAAOC,OAAMC,WAAW,CAAC;QACvB,MAAMC,cAAcL,eAAeM,OAAO;QAE1C,IAAID,aAAa;YACf,OAAOA,YAAYE,YAAY,CAACV,MAAME;QACxC;QAEA,OAAO;YACLS,QAAQC,QAAQC,OAAO,CAAC;YACxBC,QAAQ,IAAM;QAChB;IACF,GAAG;QAACX;QAAgBH;QAAME;KAAQ;AACpC"}
+{"version":3,"sources":["../src/hooks/useFocusObserved.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { Types as TabsterTypes } from 'tabster';\nimport { getObservedElement } from 'tabster';\nimport { useTabster } from './useTabster';\n\ninterface UseFocusObservedOptions {\n  /**\n   * After timeout the focus attempt fails\n   */\n  timeout?: number;\n}\n\n/**\n * @param name - The observed element to focus\n * @param options - Options for the focus observed\n *\n * @returns Function that will focus an element\n */\nexport function useFocusObserved(\n  name: string,\n  options: UseFocusObservedOptions = {},\n): () => TabsterTypes.ObservedElementAsyncRequest<boolean> {\n  const { timeout = 1000 } = options;\n  const observedAPIRef = useTabster(getObservedElement);\n\n  return React.useCallback(() => {\n    const observerAPI = observedAPIRef.current;\n\n    if (observerAPI) {\n      return observerAPI.requestFocus(name, timeout);\n    }\n\n    return {\n      result: Promise.resolve(false),\n      cancel: () => null,\n      diagnostics: {},\n    };\n  }, [observedAPIRef, name, timeout]);\n}\n"],"names":["useFocusObserved","name","options","timeout","observedAPIRef","useTabster","getObservedElement","React","useCallback","observerAPI","current","requestFocus","result","Promise","resolve","cancel","diagnostics"],"mappings":"AAAA;;;;;+BAoBgBA;;;eAAAA;;;;iEAlBO;yBAEY;4BACR;AAepB,SAASA,iBACdC,IAAY,EACZC,UAAmC,CAAC,CAAC;IAErC,MAAM,EAAEC,UAAU,IAAI,EAAE,GAAGD;IAC3B,MAAME,iBAAiBC,IAAAA,sBAAU,EAACC,2BAAkB;IAEpD,OAAOC,OAAMC,WAAW,CAAC;QACvB,MAAMC,cAAcL,eAAeM,OAAO;QAE1C,IAAID,aAAa;YACf,OAAOA,YAAYE,YAAY,CAACV,MAAME;QACxC;QAEA,OAAO;YACLS,QAAQC,QAAQC,OAAO,CAAC;YACxBC,QAAQ,IAAM;YACdC,aAAa,CAAC;QAChB;IACF,GAAG;QAACZ;QAAgBH;QAAME;KAAQ;AACpC"}

package/lib-commonjs/hooks/useMergeTabsterAttributes.js

@@ -13,29 +13,46 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _tabster = require("tabster");
 const useMergedTabsterAttributes_unstable = (...attributes)=>{
-    'use no memo';
-    const stringAttributes = attributes.reduce((acc, curr)=>{
-        if (curr === null || curr === void 0 ? void 0 : curr[_tabster.TABSTER_ATTRIBUTE_NAME]) {
-            acc.push(curr[_tabster.TABSTER_ATTRIBUTE_NAME]);
+    // The collected attributes are reduced to a single primitive `key` so the
+    // `React.useMemo` dependency list keeps a constant size, even when the number
+    // of contributing attributes changes between renders. The array and the key
+    // are built in a single pass.
+    const stringAttributes = [];
+    let key = '';
+    for (const attribute of attributes){
+        const value = attribute === null || attribute === void 0 ? void 0 : attribute[_tabster.TABSTER_ATTRIBUTE_NAME];
+        if (value) {
+            stringAttributes.push(value);
+            key += value + MERGE_KEY_SEPARATOR;
         }
-        return acc;
-    }, []);
-    if (process.env.NODE_ENV !== 'production') {
-        // ignoring rules of hooks because this is a condition based on the environment
-        // it's safe to ignore the rule
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        useWarnIfUnstableAttributes(stringAttributes);
     }
     return _react.useMemo(()=>({
-            [_tabster.TABSTER_ATTRIBUTE_NAME]: stringAttributes.length > 0 ? stringAttributes.reduce(mergeJSONStrings) : undefined
-        }), // disable exhaustive-deps because we want to memoize the result of the reduction
-    // this is safe because the collection of attributes is not expected to change at runtime
+            [_tabster.TABSTER_ATTRIBUTE_NAME]: mergeAttributes(stringAttributes)
+        }), // `key` fully captures the contents of `stringAttributes`, which is rebuilt
+    // on every render and therefore cannot be a dependency itself.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    stringAttributes);
+    [
+        key
+    ]);
 };
 /**
- * Merges two JSON strings into one.
- */ const mergeJSONStrings = (a, b)=>JSON.stringify(Object.assign(safelyParseJSON(a), safelyParseJSON(b)));
+ * `NUL` separator used to build the memoization key. It is a safe separator
+ * because the attribute values originate from `JSON.stringify`, which escapes
+ * control characters, so a literal `NUL` can never appear inside one of them.
+ */ const MERGE_KEY_SEPARATOR = '\u0000';
+/**
+ * Merges a collection of tabster attribute JSON strings into a single one.
+ * Later attributes take priority over earlier ones.
+ */ const mergeAttributes = (stringAttributes)=>{
+    if (stringAttributes.length === 0) {
+        return undefined;
+    }
+    // common case: a single hook contributed an attribute, no parsing required
+    if (stringAttributes.length === 1) {
+        return stringAttributes[0];
+    }
+    return JSON.stringify(Object.assign({}, ...stringAttributes.map(safelyParseJSON)));
+};
 /**
  * Tries to parse a JSON string and returns an object.
  * If the JSON string is invalid, an empty object is returned.
@@ -46,35 +63,3 @@ const useMergedTabsterAttributes_unstable = (...attributes)=>{
         return {};
     }
 };
-/**
- * Helper hook that ensures that the attributes passed to the hook are stable.
- * This is necessary because the attributes are expected to not change at runtime.
- *
- * This hook will console.warn if the attributes change at runtime.
- */ const useWarnIfUnstableAttributes = (attributes)=>{
-    'use no memo';
-    const initialAttributesRef = _react.useRef(attributes);
-    let isStable = initialAttributesRef.current.length === attributes.length;
-    if (initialAttributesRef.current !== attributes && isStable) {
-        for(let i = 0; i < attributes.length; i++){
-            if (initialAttributesRef.current[i] !== attributes[i]) {
-                isStable = false;
-                break;
-            }
-        }
-    }
-    _react.useEffect(()=>{
-        if (!isStable) {
-            const error = new Error();
-            // eslint-disable-next-line no-console
-            console.warn(/** #__DE-INDENT__ */ `
-        @fluentui/react-tabster [useMergedTabsterAttributes]:
-        The attributes passed to the hook changed at runtime.
-        This might lead to unexpected behavior, please ensure that the attributes are stable.
-        ${error.stack}
-      `);
-        }
-    }, [
-        isStable
-    ]);
-};

package/lib-commonjs/hooks/useMergeTabsterAttributes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useMergeTabsterAttributes.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { Types } from 'tabster';\nimport { TABSTER_ATTRIBUTE_NAME } from 'tabster';\n\n/**\n * Merges a collection of tabster attributes.\n *\n * ⚠️The attributes passed as arguments to this  hook cannot change at runtime.\n * @internal\n * @param attributes - collection of tabster attributes from other react-tabster hooks\n * @returns single merged tabster attribute\n */\nexport const useMergedTabsterAttributes_unstable = (\n  ...attributes: (Partial<Types.TabsterDOMAttribute> | null | undefined)[]\n): Types.TabsterDOMAttribute => {\n  'use no memo';\n\n  const stringAttributes = attributes.reduce<string[]>((acc, curr) => {\n    if (curr?.[TABSTER_ATTRIBUTE_NAME]) {\n      acc.push(curr[TABSTER_ATTRIBUTE_NAME]);\n    }\n    return acc;\n  }, []);\n\n  if (process.env.NODE_ENV !== 'production') {\n    // ignoring rules of hooks because this is a condition based on the environment\n    // it's safe to ignore the rule\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useWarnIfUnstableAttributes(stringAttributes);\n  }\n\n  return React.useMemo(\n    () => ({\n      [TABSTER_ATTRIBUTE_NAME]: stringAttributes.length > 0 ? stringAttributes.reduce(mergeJSONStrings) : undefined,\n    }),\n    // disable exhaustive-deps because we want to memoize the result of the reduction\n    // this is safe because the collection of attributes is not expected to change at runtime\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    stringAttributes,\n  );\n};\n\n/**\n * Merges two JSON strings into one.\n */\nconst mergeJSONStrings = (a: string, b: string): string =>\n  JSON.stringify(Object.assign(safelyParseJSON(a), safelyParseJSON(b)));\n\n/**\n * Tries to parse a JSON string and returns an object.\n * If the JSON string is invalid, an empty object is returned.\n */\nconst safelyParseJSON = (json: string): object => {\n  try {\n    return JSON.parse(json);\n  } catch {\n    return {};\n  }\n};\n\n/**\n * Helper hook that ensures that the attributes passed to the hook are stable.\n * This is necessary because the attributes are expected to not change at runtime.\n *\n * This hook will console.warn if the attributes change at runtime.\n */\nconst useWarnIfUnstableAttributes = (attributes: string[]) => {\n  'use no memo';\n\n  const initialAttributesRef = React.useRef(attributes);\n\n  let isStable = initialAttributesRef.current.length === attributes.length;\n  if (initialAttributesRef.current !== attributes && isStable) {\n    for (let i = 0; i < attributes.length; i++) {\n      if (initialAttributesRef.current[i] !== attributes[i]) {\n        isStable = false;\n        break;\n      }\n    }\n  }\n  React.useEffect(() => {\n    if (!isStable) {\n      const error = new Error();\n      // eslint-disable-next-line no-console\n      console.warn(/** #__DE-INDENT__ */ `\n        @fluentui/react-tabster [useMergedTabsterAttributes]:\n        The attributes passed to the hook changed at runtime.\n        This might lead to unexpected behavior, please ensure that the attributes are stable.\n        ${error.stack}\n      `);\n    }\n  }, [isStable]);\n};\n"],"names":["useMergedTabsterAttributes_unstable","attributes","stringAttributes","reduce","acc","curr","TABSTER_ATTRIBUTE_NAME","push","process","env","NODE_ENV","useWarnIfUnstableAttributes","React","useMemo","length","mergeJSONStrings","undefined","a","b","JSON","stringify","Object","assign","safelyParseJSON","json","parse","initialAttributesRef","useRef","isStable","current","i","useEffect","error","Error","console","warn","stack"],"mappings":"AAAA;;;;;+BAcaA;;;eAAAA;;;;iEAZU;yBAEgB;AAUhC,MAAMA,sCAAsC,CACjD,GAAGC;IAEH;IAEA,MAAMC,mBAAmBD,WAAWE,MAAM,CAAW,CAACC,KAAKC;QACzD,IAAIA,iBAAAA,2BAAAA,IAAM,CAACC,+BAAsB,CAAC,EAAE;YAClCF,IAAIG,IAAI,CAACF,IAAI,CAACC,+BAAsB,CAAC;QACvC;QACA,OAAOF;IACT,GAAG,EAAE;IAEL,IAAII,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,+EAA+E;QAC/E,+BAA+B;QAC/B,sDAAsD;QACtDC,4BAA4BT;IAC9B;IAEA,OAAOU,OAAMC,OAAO,CAClB,IAAO,CAAA;YACL,CAACP,+BAAsB,CAAC,EAAEJ,iBAAiBY,MAAM,GAAG,IAAIZ,iBAAiBC,MAAM,CAACY,oBAAoBC;QACtG,CAAA,GACA,iFAAiF;IACjF,yFAAyF;IACzF,uDAAuD;IACvDd;AAEJ;AAEA;;CAEC,GACD,MAAMa,mBAAmB,CAACE,GAAWC,IACnCC,KAAKC,SAAS,CAACC,OAAOC,MAAM,CAACC,gBAAgBN,IAAIM,gBAAgBL;AAEnE;;;CAGC,GACD,MAAMK,kBAAkB,CAACC;IACvB,IAAI;QACF,OAAOL,KAAKM,KAAK,CAACD;IACpB,EAAE,OAAM;QACN,OAAO,CAAC;IACV;AACF;AAEA;;;;;CAKC,GACD,MAAMb,8BAA8B,CAACV;IACnC;IAEA,MAAMyB,uBAAuBd,OAAMe,MAAM,CAAC1B;IAE1C,IAAI2B,WAAWF,qBAAqBG,OAAO,CAACf,MAAM,KAAKb,WAAWa,MAAM;IACxE,IAAIY,qBAAqBG,OAAO,KAAK5B,cAAc2B,UAAU;QAC3D,IAAK,IAAIE,IAAI,GAAGA,IAAI7B,WAAWa,MAAM,EAAEgB,IAAK;YAC1C,IAAIJ,qBAAqBG,OAAO,CAACC,EAAE,KAAK7B,UAAU,CAAC6B,EAAE,EAAE;gBACrDF,WAAW;gBACX;YACF;QACF;IACF;IACAhB,OAAMmB,SAAS,CAAC;QACd,IAAI,CAACH,UAAU;YACb,MAAMI,QAAQ,IAAIC;YAClB,sCAAsC;YACtCC,QAAQC,IAAI,CAAC,mBAAmB,GAAG,CAAC;;;;QAIlC,EAAEH,MAAMI,KAAK,CAAC;MAChB,CAAC;QACH;IACF,GAAG;QAACR;KAAS;AACf"}
+{"version":3,"sources":["../src/hooks/useMergeTabsterAttributes.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { Types } from 'tabster';\nimport { TABSTER_ATTRIBUTE_NAME } from 'tabster';\n\n/**\n * Merges a collection of tabster attributes.\n *\n * The result is memoized and only recomputed when the contributing attributes\n * actually change, so both the values and the number of attributes may change\n * at runtime.\n * @internal\n * @param attributes - collection of tabster attributes from other react-tabster hooks\n * @returns single merged tabster attribute\n */\nexport const useMergedTabsterAttributes_unstable = (\n  ...attributes: (Partial<Types.TabsterDOMAttribute> | null | undefined)[]\n): Types.TabsterDOMAttribute => {\n  // The collected attributes are reduced to a single primitive `key` so the\n  // `React.useMemo` dependency list keeps a constant size, even when the number\n  // of contributing attributes changes between renders. The array and the key\n  // are built in a single pass.\n  const stringAttributes: string[] = [];\n  let key = '';\n  for (const attribute of attributes) {\n    const value = attribute?.[TABSTER_ATTRIBUTE_NAME];\n    if (value) {\n      stringAttributes.push(value);\n      key += value + MERGE_KEY_SEPARATOR;\n    }\n  }\n\n  return React.useMemo(\n    () => ({ [TABSTER_ATTRIBUTE_NAME]: mergeAttributes(stringAttributes) }),\n    // `key` fully captures the contents of `stringAttributes`, which is rebuilt\n    // on every render and therefore cannot be a dependency itself.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [key],\n  );\n};\n\n/**\n * `NUL` separator used to build the memoization key. It is a safe separator\n * because the attribute values originate from `JSON.stringify`, which escapes\n * control characters, so a literal `NUL` can never appear inside one of them.\n */\nconst MERGE_KEY_SEPARATOR = '\\u0000';\n\n/**\n * Merges a collection of tabster attribute JSON strings into a single one.\n * Later attributes take priority over earlier ones.\n */\nconst mergeAttributes = (stringAttributes: string[]): string | undefined => {\n  if (stringAttributes.length === 0) {\n    return undefined;\n  }\n  // common case: a single hook contributed an attribute, no parsing required\n  if (stringAttributes.length === 1) {\n    return stringAttributes[0];\n  }\n  return JSON.stringify(Object.assign({}, ...stringAttributes.map(safelyParseJSON)));\n};\n\n/**\n * Tries to parse a JSON string and returns an object.\n * If the JSON string is invalid, an empty object is returned.\n */\nconst safelyParseJSON = (json: string): object => {\n  try {\n    return JSON.parse(json);\n  } catch {\n    return {};\n  }\n};\n"],"names":["useMergedTabsterAttributes_unstable","attributes","stringAttributes","key","attribute","value","TABSTER_ATTRIBUTE_NAME","push","MERGE_KEY_SEPARATOR","React","useMemo","mergeAttributes","length","undefined","JSON","stringify","Object","assign","map","safelyParseJSON","json","parse"],"mappings":"AAAA;;;;;+BAgBaA;;;eAAAA;;;;iEAdU;yBAEgB;AAYhC,MAAMA,sCAAsC,CACjD,GAAGC;IAEH,0EAA0E;IAC1E,8EAA8E;IAC9E,4EAA4E;IAC5E,8BAA8B;IAC9B,MAAMC,mBAA6B,EAAE;IACrC,IAAIC,MAAM;IACV,KAAK,MAAMC,aAAaH,WAAY;QAClC,MAAMI,QAAQD,sBAAAA,gCAAAA,SAAW,CAACE,+BAAsB,CAAC;QACjD,IAAID,OAAO;YACTH,iBAAiBK,IAAI,CAACF;YACtBF,OAAOE,QAAQG;QACjB;IACF;IAEA,OAAOC,OAAMC,OAAO,CAClB,IAAO,CAAA;YAAE,CAACJ,+BAAsB,CAAC,EAAEK,gBAAgBT;QAAkB,CAAA,GACrE,4EAA4E;IAC5E,+DAA+D;IAC/D,uDAAuD;IACvD;QAACC;KAAI;AAET;AAEA;;;;CAIC,GACD,MAAMK,sBAAsB;AAE5B;;;CAGC,GACD,MAAMG,kBAAkB,CAACT;IACvB,IAAIA,iBAAiBU,MAAM,KAAK,GAAG;QACjC,OAAOC;IACT;IACA,2EAA2E;IAC3E,IAAIX,iBAAiBU,MAAM,KAAK,GAAG;QACjC,OAAOV,gBAAgB,CAAC,EAAE;IAC5B;IACA,OAAOY,KAAKC,SAAS,CAACC,OAAOC,MAAM,CAAC,CAAC,MAAMf,iBAAiBgB,GAAG,CAACC;AAClE;AAEA;;;CAGC,GACD,MAAMA,kBAAkB,CAACC;IACvB,IAAI;QACF,OAAON,KAAKO,KAAK,CAACD;IACpB,EAAE,OAAM;QACN,OAAO,CAAC;IACV;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabster",
-  "version": "9.26.14",
+  "version": "9.26.16",
   "description": "Utilities for focus management and facade for tabster",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -14,11 +14,11 @@
   "dependencies": {
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.3",
+    "@fluentui/react-utilities": "^9.26.5",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1",
-    "keyborg": "^2.6.0",
-    "tabster": "^8.5.5"
+    "keyborg": "^2.14.1",
+    "tabster": "^8.8.0"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0 <20.0.0",