@fluentui/react-tabster 9.16.1 → 9.17.1

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Wed, 03 Jan 2024 09:22:10 GMT and should not be manually modified.
+This log was last generated on Tue, 16 Jan 2024 13:07:04 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.17.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.17.1)
+
+Tue, 16 Jan 2024 13:07:04 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.17.0..@fluentui/react-tabster_v9.17.1)
+
+### Patches
+
+- fix: memoize tabster attributes ([PR #30289](https://github.com/microsoft/fluentui/pull/30289) by lingfangao@hotmail.com)
+- fix: correct version of @types/react-dom peer dep that matches for 16.x ([PR #30259](https://github.com/microsoft/fluentui/pull/30259) by mgodbolt@microsoft.com)
+
+## [9.17.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.17.0)
+
+Mon, 08 Jan 2024 16:24:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.16.1..@fluentui/react-tabster_v9.17.0)
+
+### Minor changes
+
+- feat: `useOnKeyboardNavigationChange` to subscribe to changes in keyboard navigation mode ([PR #30219](https://github.com/microsoft/fluentui/pull/30219) by lingfangao@hotmail.com)
+- Bump @fluentui/react-utilities to v9.15.6 ([PR #30179](https://github.com/microsoft/fluentui/pull/30179) by beachball)
+
+### Patches
+
+- fix(useArrowNavigationGroup): should always memorize last focused element ([PR #30112](https://github.com/microsoft/fluentui/pull/30112) by lingfangao@hotmail.com)
+
 ## [9.16.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.16.1)
 
-Wed, 03 Jan 2024 09:22:10 GMT 
+Wed, 03 Jan 2024 09:26:44 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.16.0..@fluentui/react-tabster_v9.16.1)
 
 ### Patches

package/dist/index.d.ts

@@ -122,6 +122,7 @@ export declare interface UseArrowNavigationGroupOptions {
     /**
      * Last focused element in the group will be remembered and focused (if still
      * available) when tabbing from outside of the group
+     * @default true
      */
     memorizeCurrent?: boolean;
     /**
@@ -251,6 +252,14 @@ export declare interface UseModalAttributesOptions {
 
 export declare function useObservedElement(name: string | string[]): Types.TabsterDOMAttribute;
 
+/**
+ * Instantiates [keyborg](https://github.com/microsoft/keyborg) and subscribes to changes
+ * in the keyboard navigation mode.
+ *
+ * @param callback - called every time the keyboard navigation state changes
+ */
+export declare function useOnKeyboardNavigationChange(callback: (isNavigatingWithKeyboard: boolean) => void): void;
+
 /**
  * Focus will be restored to the most recent target element when it is lost from a source
  * @returns Attribute to apply to the element that might lose focus

package/lib/hooks/index.js

@@ -4,6 +4,7 @@ export * from './useFocusFinders';
 export * from './useFocusVisible';
 export * from './useFocusWithin';
 export * from './useKeyboardNavAttribute';
+export * from './useOnKeyboardNavigationChange';
 export * from './useModalAttributes';
 export * from './useTabsterAttributes';
 export * from './useObservedElement';

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './useArrowNavigationGroup';\nexport * from './useFocusableGroup';\nexport * from './useFocusFinders';\nexport * from './useFocusVisible';\nexport * from './useFocusWithin';\nexport * from './useKeyboardNavAttribute';\nexport * from './useModalAttributes';\nexport * from './useTabsterAttributes';\nexport * from './useObservedElement';\nexport * from './useMergeTabsterAttributes';\nexport * from './useFocusObserved';\nexport * from './useRestoreFocus';\nexport * from './useUncontrolledFocus';\n"],"names":[],"mappings":"AAAA,cAAc,4BAA4B;AAC1C,cAAc,sBAAsB;AACpC,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,mBAAmB;AACjC,cAAc,4BAA4B;AAC1C,cAAc,uBAAuB;AACrC,cAAc,yBAAyB;AACvC,cAAc,uBAAuB;AACrC,cAAc,8BAA8B;AAC5C,cAAc,qBAAqB;AACnC,cAAc,oBAAoB;AAClC,cAAc,yBAAyB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './useArrowNavigationGroup';\nexport * from './useFocusableGroup';\nexport * from './useFocusFinders';\nexport * from './useFocusVisible';\nexport * from './useFocusWithin';\nexport * from './useKeyboardNavAttribute';\nexport * from './useOnKeyboardNavigationChange';\nexport * from './useModalAttributes';\nexport * from './useTabsterAttributes';\nexport * from './useObservedElement';\nexport * from './useMergeTabsterAttributes';\nexport * from './useFocusObserved';\nexport * from './useRestoreFocus';\nexport * from './useUncontrolledFocus';\n"],"names":[],"mappings":"AAAA,cAAc,4BAA4B;AAC1C,cAAc,sBAAsB;AACpC,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,mBAAmB;AACjC,cAAc,4BAA4B;AAC1C,cAAc,kCAAkC;AAChD,cAAc,uBAAuB;AACrC,cAAc,yBAAyB;AACvC,cAAc,uBAAuB;AACrC,cAAc,8BAA8B;AAC5C,cAAc,qBAAqB;AACnC,cAAc,oBAAoB;AAClC,cAAc,yBAAyB"}

package/lib/hooks/useArrowNavigationGroup.js

@@ -5,7 +5,7 @@ import { useTabster } from './useTabster';
  * A hook that returns the necessary tabster attributes to support arrow key navigation
  * @param options - Options to configure keyboard navigation
  */ export const useArrowNavigationGroup = (options = {})=>{
-    const { circular, axis, memorizeCurrent, tabbable, ignoreDefaultKeydown, // eslint-disable-next-line @typescript-eslint/naming-convention
+    const { circular, axis, memorizeCurrent = true, tabbable, ignoreDefaultKeydown, // eslint-disable-next-line @typescript-eslint/naming-convention
     unstable_hasDefault } = options;
     const tabster = useTabster();
     if (tabster) {

package/lib/hooks/useArrowNavigationGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useArrowNavigationGroup.ts"],"sourcesContent":["import { Types, getMover } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseArrowNavigationGroupOptions {\n  /**\n   * Focus will navigate vertically, horizontally or in both directions (grid), defaults to horizontally\n   * @defaultValue vertical\n   */\n  axis?: 'vertical' | 'horizontal' | 'grid' | 'grid-linear' | 'both';\n  /**\n   * Focus will cycle to the first/last elements of the group without stopping\n   */\n  circular?: boolean;\n  /**\n   * Last focused element in the group will be remembered and focused (if still\n   * available) when tabbing from outside of the group\n   */\n  memorizeCurrent?: boolean;\n  /**\n   * Allow tabbing within the arrow navigation group items.\n   */\n  tabbable?: boolean;\n  /**\n   * Tabster should ignore default handling of keydown events\n   */\n  ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];\n  /**\n   * The default focusable item in the group will be an element with Focusable.isDefault property.\n   * Note that there is no way in \\@fluentui/react-tabster to set default focusable element,\n   * and this option is currently for internal testing purposes only.\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  unstable_hasDefault?: boolean;\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support arrow key navigation\n * @param options - Options to configure keyboard navigation\n */\nexport const useArrowNavigationGroup = (options: UseArrowNavigationGroupOptions = {}): Types.TabsterDOMAttribute => {\n  const {\n    circular,\n    axis,\n    memorizeCurrent,\n    tabbable,\n    ignoreDefaultKeydown,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault,\n  } = options;\n  const tabster = useTabster();\n\n  if (tabster) {\n    getMover(tabster);\n  }\n\n  return useTabsterAttributes({\n    mover: {\n      cyclic: !!circular,\n      direction: axisToMoverDirection(axis ?? 'vertical'),\n      memorizeCurrent,\n      tabbable,\n      hasDefault: unstable_hasDefault,\n    },\n    ...(ignoreDefaultKeydown && {\n      focusable: {\n        ignoreKeydown: ignoreDefaultKeydown,\n      },\n    }),\n  });\n};\n\nfunction axisToMoverDirection(axis: UseArrowNavigationGroupOptions['axis']): Types.MoverDirection {\n  switch (axis) {\n    case 'horizontal':\n      return Types.MoverDirections.Horizontal;\n    case 'grid':\n      return Types.MoverDirections.Grid;\n    case 'grid-linear':\n      return Types.MoverDirections.GridLinear;\n    case 'both':\n      return Types.MoverDirections.Both;\n\n    case 'vertical':\n    default:\n      return Types.MoverDirections.Vertical;\n  }\n}\n"],"names":["Types","getMover","useTabsterAttributes","useTabster","useArrowNavigationGroup","options","circular","axis","memorizeCurrent","tabbable","ignoreDefaultKeydown","unstable_hasDefault","tabster","mover","cyclic","direction","axisToMoverDirection","hasDefault","focusable","ignoreKeydown","MoverDirections","Horizontal","Grid","GridLinear","Both","Vertical"],"mappings":"AAAA,SAASA,KAAK,EAAEC,QAAQ,QAAQ,UAAU;AAC1C,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,UAAU,QAAQ,eAAe;AAkC1C;;;CAGC,GACD,OAAO,MAAMC,0BAA0B,CAACC,UAA0C,CAAC,CAAC;IAClF,MAAM,EACJC,QAAQ,EACRC,IAAI,EACJC,eAAe,EACfC,QAAQ,EACRC,oBAAoB,EACpB,gEAAgE;IAChEC,mBAAmB,EACpB,GAAGN;IACJ,MAAMO,UAAUT;IAEhB,IAAIS,SAAS;QACXX,SAASW;IACX;IAEA,OAAOV,qBAAqB;QAC1BW,OAAO;YACLC,QAAQ,CAAC,CAACR;YACVS,WAAWC,qBAAqBT,iBAAAA,kBAAAA,OAAQ;YACxCC;YACAC;YACAQ,YAAYN;QACd;QACA,GAAID,wBAAwB;YAC1BQ,WAAW;gBACTC,eAAeT;YACjB;QACF,CAAC;IACH;AACF,EAAE;AAEF,SAASM,qBAAqBT,IAA4C;IACxE,OAAQA;QACN,KAAK;YACH,OAAOP,MAAMoB,eAAe,CAACC,UAAU;QACzC,KAAK;YACH,OAAOrB,MAAMoB,eAAe,CAACE,IAAI;QACnC,KAAK;YACH,OAAOtB,MAAMoB,eAAe,CAACG,UAAU;QACzC,KAAK;YACH,OAAOvB,MAAMoB,eAAe,CAACI,IAAI;QAEnC,KAAK;QACL;YACE,OAAOxB,MAAMoB,eAAe,CAACK,QAAQ;IACzC;AACF"}
+{"version":3,"sources":["useArrowNavigationGroup.ts"],"sourcesContent":["import { Types, getMover } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseArrowNavigationGroupOptions {\n  /**\n   * Focus will navigate vertically, horizontally or in both directions (grid), defaults to horizontally\n   * @defaultValue vertical\n   */\n  axis?: 'vertical' | 'horizontal' | 'grid' | 'grid-linear' | 'both';\n  /**\n   * Focus will cycle to the first/last elements of the group without stopping\n   */\n  circular?: boolean;\n  /**\n   * Last focused element in the group will be remembered and focused (if still\n   * available) when tabbing from outside of the group\n   * @default true\n   */\n  memorizeCurrent?: boolean;\n  /**\n   * Allow tabbing within the arrow navigation group items.\n   */\n  tabbable?: boolean;\n  /**\n   * Tabster should ignore default handling of keydown events\n   */\n  ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];\n  /**\n   * The default focusable item in the group will be an element with Focusable.isDefault property.\n   * Note that there is no way in \\@fluentui/react-tabster to set default focusable element,\n   * and this option is currently for internal testing purposes only.\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  unstable_hasDefault?: boolean;\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support arrow key navigation\n * @param options - Options to configure keyboard navigation\n */\nexport const useArrowNavigationGroup = (options: UseArrowNavigationGroupOptions = {}): Types.TabsterDOMAttribute => {\n  const {\n    circular,\n    axis,\n    memorizeCurrent = true,\n    tabbable,\n    ignoreDefaultKeydown,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault,\n  } = options;\n  const tabster = useTabster();\n\n  if (tabster) {\n    getMover(tabster);\n  }\n\n  return useTabsterAttributes({\n    mover: {\n      cyclic: !!circular,\n      direction: axisToMoverDirection(axis ?? 'vertical'),\n      memorizeCurrent,\n      tabbable,\n      hasDefault: unstable_hasDefault,\n    },\n    ...(ignoreDefaultKeydown && {\n      focusable: {\n        ignoreKeydown: ignoreDefaultKeydown,\n      },\n    }),\n  });\n};\n\nfunction axisToMoverDirection(axis: UseArrowNavigationGroupOptions['axis']): Types.MoverDirection {\n  switch (axis) {\n    case 'horizontal':\n      return Types.MoverDirections.Horizontal;\n    case 'grid':\n      return Types.MoverDirections.Grid;\n    case 'grid-linear':\n      return Types.MoverDirections.GridLinear;\n    case 'both':\n      return Types.MoverDirections.Both;\n\n    case 'vertical':\n    default:\n      return Types.MoverDirections.Vertical;\n  }\n}\n"],"names":["Types","getMover","useTabsterAttributes","useTabster","useArrowNavigationGroup","options","circular","axis","memorizeCurrent","tabbable","ignoreDefaultKeydown","unstable_hasDefault","tabster","mover","cyclic","direction","axisToMoverDirection","hasDefault","focusable","ignoreKeydown","MoverDirections","Horizontal","Grid","GridLinear","Both","Vertical"],"mappings":"AAAA,SAASA,KAAK,EAAEC,QAAQ,QAAQ,UAAU;AAC1C,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,UAAU,QAAQ,eAAe;AAmC1C;;;CAGC,GACD,OAAO,MAAMC,0BAA0B,CAACC,UAA0C,CAAC,CAAC;IAClF,MAAM,EACJC,QAAQ,EACRC,IAAI,EACJC,kBAAkB,IAAI,EACtBC,QAAQ,EACRC,oBAAoB,EACpB,gEAAgE;IAChEC,mBAAmB,EACpB,GAAGN;IACJ,MAAMO,UAAUT;IAEhB,IAAIS,SAAS;QACXX,SAASW;IACX;IAEA,OAAOV,qBAAqB;QAC1BW,OAAO;YACLC,QAAQ,CAAC,CAACR;YACVS,WAAWC,qBAAqBT,iBAAAA,kBAAAA,OAAQ;YACxCC;YACAC;YACAQ,YAAYN;QACd;QACA,GAAID,wBAAwB;YAC1BQ,WAAW;gBACTC,eAAeT;YACjB;QACF,CAAC;IACH;AACF,EAAE;AAEF,SAASM,qBAAqBT,IAA4C;IACxE,OAAQA;QACN,KAAK;YACH,OAAOP,MAAMoB,eAAe,CAACC,UAAU;QACzC,KAAK;YACH,OAAOrB,MAAMoB,eAAe,CAACE,IAAI;QACnC,KAAK;YACH,OAAOtB,MAAMoB,eAAe,CAACG,UAAU;QACzC,KAAK;YACH,OAAOvB,MAAMoB,eAAe,CAACI,IAAI;QAEnC,KAAK;QACL;YACE,OAAOxB,MAAMoB,eAAe,CAACK,QAAQ;IACzC;AACF"}

package/lib/hooks/useMergeTabsterAttributes.js

@@ -9,18 +9,17 @@ import { Types } from 'tabster';
  * @returns single merged tabster attribute
  */ export const useMergedTabsterAttributes_unstable = (...attributes)=>{
     const stringAttributes = attributes.map((attribute)=>attribute[Types.TabsterAttributeName]).filter(Boolean);
-    const mergedStrigAttribute = React.useMemo(()=>{
+    return React.useMemo(()=>{
         let attribute = stringAttributes[0];
         attributes.shift();
         for (const attr of stringAttributes){
             attribute = mergeAttributes(attribute, attr);
         }
-        return attribute;
+        return {
+            [Types.TabsterAttributeName]: attribute
+        };
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, stringAttributes);
-    return {
-        [Types.TabsterAttributeName]: mergedStrigAttribute
-    };
 };
 function mergeAttributes(a, b) {
     if (!b) {

package/lib/hooks/useMergeTabsterAttributes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMergeTabsterAttributes.ts"],"sourcesContent":["import * as React from 'react';\nimport { Types } 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: Types.TabsterDOMAttribute[]\n) => Types.TabsterDOMAttribute = (...attributes) => {\n  const stringAttributes = attributes\n    .map(attribute => attribute[Types.TabsterAttributeName])\n    .filter(Boolean) as string[];\n\n  const mergedStrigAttribute = React.useMemo(() => {\n    let attribute = stringAttributes[0];\n    attributes.shift();\n\n    for (const attr of stringAttributes) {\n      attribute = mergeAttributes(attribute, attr);\n    }\n\n    return attribute;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, stringAttributes);\n\n  return { [Types.TabsterAttributeName]: mergedStrigAttribute };\n};\n\nfunction mergeAttributes(a: string, b?: string): string {\n  if (!b) {\n    return a;\n  }\n\n  let aParsed = {};\n  let bParsed = {};\n  if (a) {\n    try {\n      aParsed = JSON.parse(a);\n      // eslint-disable-next-line no-empty\n    } catch {}\n  }\n\n  if (b) {\n    try {\n      bParsed = JSON.parse(b);\n      // eslint-disable-next-line no-empty\n    } catch {}\n  }\n\n  return JSON.stringify({ ...aParsed, ...bParsed });\n}\n"],"names":["React","Types","useMergedTabsterAttributes_unstable","attributes","stringAttributes","map","attribute","TabsterAttributeName","filter","Boolean","mergedStrigAttribute","useMemo","shift","attr","mergeAttributes","a","b","aParsed","bParsed","JSON","parse","stringify"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,UAAU;AAEhC;;;;;;;CAOC,GACD,OAAO,MAAMC,sCAEoB,CAAC,GAAGC;IACnC,MAAMC,mBAAmBD,WACtBE,GAAG,CAACC,CAAAA,YAAaA,SAAS,CAACL,MAAMM,oBAAoB,CAAC,EACtDC,MAAM,CAACC;IAEV,MAAMC,uBAAuBV,MAAMW,OAAO,CAAC;QACzC,IAAIL,YAAYF,gBAAgB,CAAC,EAAE;QACnCD,WAAWS,KAAK;QAEhB,KAAK,MAAMC,QAAQT,iBAAkB;YACnCE,YAAYQ,gBAAgBR,WAAWO;QACzC;QAEA,OAAOP;IACP,uDAAuD;IACzD,GAAGF;IAEH,OAAO;QAAE,CAACH,MAAMM,oBAAoB,CAAC,EAAEG;IAAqB;AAC9D,EAAE;AAEF,SAASI,gBAAgBC,CAAS,EAAEC,CAAU;IAC5C,IAAI,CAACA,GAAG;QACN,OAAOD;IACT;IAEA,IAAIE,UAAU,CAAC;IACf,IAAIC,UAAU,CAAC;IACf,IAAIH,GAAG;QACL,IAAI;YACFE,UAAUE,KAAKC,KAAK,CAACL;QACrB,oCAAoC;QACtC,EAAE,OAAM,CAAC;IACX;IAEA,IAAIC,GAAG;QACL,IAAI;YACFE,UAAUC,KAAKC,KAAK,CAACJ;QACrB,oCAAoC;QACtC,EAAE,OAAM,CAAC;IACX;IAEA,OAAOG,KAAKE,SAAS,CAAC;QAAE,GAAGJ,OAAO;QAAE,GAAGC,OAAO;IAAC;AACjD"}
+{"version":3,"sources":["useMergeTabsterAttributes.ts"],"sourcesContent":["import * as React from 'react';\nimport { Types } 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: Types.TabsterDOMAttribute[]\n) => Types.TabsterDOMAttribute = (...attributes) => {\n  const stringAttributes = attributes\n    .map(attribute => attribute[Types.TabsterAttributeName])\n    .filter(Boolean) as string[];\n\n  return React.useMemo(() => {\n    let attribute = stringAttributes[0];\n    attributes.shift();\n\n    for (const attr of stringAttributes) {\n      attribute = mergeAttributes(attribute, attr);\n    }\n\n    return { [Types.TabsterAttributeName]: attribute };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, stringAttributes);\n};\n\nfunction mergeAttributes(a: string, b?: string): string {\n  if (!b) {\n    return a;\n  }\n\n  let aParsed = {};\n  let bParsed = {};\n  if (a) {\n    try {\n      aParsed = JSON.parse(a);\n      // eslint-disable-next-line no-empty\n    } catch {}\n  }\n\n  if (b) {\n    try {\n      bParsed = JSON.parse(b);\n      // eslint-disable-next-line no-empty\n    } catch {}\n  }\n\n  return JSON.stringify({ ...aParsed, ...bParsed });\n}\n"],"names":["React","Types","useMergedTabsterAttributes_unstable","attributes","stringAttributes","map","attribute","TabsterAttributeName","filter","Boolean","useMemo","shift","attr","mergeAttributes","a","b","aParsed","bParsed","JSON","parse","stringify"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,UAAU;AAEhC;;;;;;;CAOC,GACD,OAAO,MAAMC,sCAEoB,CAAC,GAAGC;IACnC,MAAMC,mBAAmBD,WACtBE,GAAG,CAACC,CAAAA,YAAaA,SAAS,CAACL,MAAMM,oBAAoB,CAAC,EACtDC,MAAM,CAACC;IAEV,OAAOT,MAAMU,OAAO,CAAC;QACnB,IAAIJ,YAAYF,gBAAgB,CAAC,EAAE;QACnCD,WAAWQ,KAAK;QAEhB,KAAK,MAAMC,QAAQR,iBAAkB;YACnCE,YAAYO,gBAAgBP,WAAWM;QACzC;QAEA,OAAO;YAAE,CAACX,MAAMM,oBAAoB,CAAC,EAAED;QAAU;IACjD,uDAAuD;IACzD,GAAGF;AACL,EAAE;AAEF,SAASS,gBAAgBC,CAAS,EAAEC,CAAU;IAC5C,IAAI,CAACA,GAAG;QACN,OAAOD;IACT;IAEA,IAAIE,UAAU,CAAC;IACf,IAAIC,UAAU,CAAC;IACf,IAAIH,GAAG;QACL,IAAI;YACFE,UAAUE,KAAKC,KAAK,CAACL;QACrB,oCAAoC;QACtC,EAAE,OAAM,CAAC;IACX;IAEA,IAAIC,GAAG;QACL,IAAI;YACFE,UAAUC,KAAKC,KAAK,CAACJ;QACrB,oCAAoC;QACtC,EAAE,OAAM,CAAC;IACX;IAEA,OAAOG,KAAKE,SAAS,CAAC;QAAE,GAAGJ,OAAO;QAAE,GAAGC,OAAO;IAAC;AACjD"}

package/lib/hooks/useOnKeyboardNavigationChange.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { createKeyborg, disposeKeyborg } from 'keyborg';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { useEventCallback } from '@fluentui/react-utilities';
+/**
+ * Instantiates [keyborg](https://github.com/microsoft/keyborg) and subscribes to changes
+ * in the keyboard navigation mode.
+ *
+ * @param callback - called every time the keyboard navigation state changes
+ */ export function useOnKeyboardNavigationChange(callback) {
+    const { targetDocument } = useFluent();
+    const keyborg = React.useMemo(()=>targetDocument && createKeyborg(targetDocument.defaultView), [
+        targetDocument
+    ]);
+    const eventCallback = useEventCallback(callback);
+    React.useEffect(()=>{
+        if (keyborg) {
+            const cb = (next)=>{
+                eventCallback(next);
+            };
+            keyborg.subscribe(cb);
+            return ()=>keyborg.unsubscribe(cb);
+        }
+    }, [
+        keyborg,
+        eventCallback
+    ]);
+    React.useEffect(()=>{
+        return ()=>keyborg && disposeKeyborg(keyborg);
+    }, [
+        keyborg
+    ]);
+}

package/lib/hooks/useOnKeyboardNavigationChange.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useOnKeyboardNavigationChange.ts"],"sourcesContent":["import * as React from 'react';\nimport { createKeyborg, disposeKeyborg } from 'keyborg';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { KeyborgCallback } from 'keyborg';\nimport { useEventCallback } from '@fluentui/react-utilities';\n\n/**\n * Instantiates [keyborg](https://github.com/microsoft/keyborg) and subscribes to changes\n * in the keyboard navigation mode.\n *\n * @param callback - called every time the keyboard navigation state changes\n */\nexport function useOnKeyboardNavigationChange(callback: (isNavigatingWithKeyboard: boolean) => void) {\n  const { targetDocument } = useFluent();\n  const keyborg = React.useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView!), [targetDocument]);\n  const eventCallback = useEventCallback(callback);\n  React.useEffect(() => {\n    if (keyborg) {\n      const cb: KeyborgCallback = next => {\n        eventCallback(next);\n      };\n      keyborg.subscribe(cb);\n      return () => keyborg.unsubscribe(cb);\n    }\n  }, [keyborg, eventCallback]);\n\n  React.useEffect(() => {\n    return () => keyborg && disposeKeyborg(keyborg);\n  }, [keyborg]);\n}\n"],"names":["React","createKeyborg","disposeKeyborg","useFluent_unstable","useFluent","useEventCallback","useOnKeyboardNavigationChange","callback","targetDocument","keyborg","useMemo","defaultView","eventCallback","useEffect","cb","next","subscribe","unsubscribe"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,cAAc,QAAQ,UAAU;AACxD,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D;;;;;CAKC,GACD,OAAO,SAASC,8BAA8BC,QAAqD;IACjG,MAAM,EAAEC,cAAc,EAAE,GAAGJ;IAC3B,MAAMK,UAAUT,MAAMU,OAAO,CAAC,IAAMF,kBAAkBP,cAAcO,eAAeG,WAAW,GAAI;QAACH;KAAe;IAClH,MAAMI,gBAAgBP,iBAAiBE;IACvCP,MAAMa,SAAS,CAAC;QACd,IAAIJ,SAAS;YACX,MAAMK,KAAsBC,CAAAA;gBAC1BH,cAAcG;YAChB;YACAN,QAAQO,SAAS,CAACF;YAClB,OAAO,IAAML,QAAQQ,WAAW,CAACH;QACnC;IACF,GAAG;QAACL;QAASG;KAAc;IAE3BZ,MAAMa,SAAS,CAAC;QACd,OAAO,IAAMJ,WAAWP,eAAeO;IACzC,GAAG;QAACA;KAAQ;AACd"}

package/lib/hooks/useTabsterAttributes.js

@@ -1,5 +1,6 @@
 import { getTabsterAttribute } from 'tabster';
 import { useTabster } from './useTabster';
+import * as React from 'react';
 /**
  * @internal
  * Hook that returns tabster attributes while ensuring tabster exists
@@ -7,5 +8,10 @@ import { useTabster } from './useTabster';
     // A tabster instance is not necessary to generate tabster attributes
     // but calling the hook will ensure that a tabster instance exists internally and avoids consumers doing the same
     useTabster();
-    return getTabsterAttribute(props);
+    const strAttr = getTabsterAttribute(props, true);
+    return React.useMemo(()=>({
+            'data-tabster': strAttr
+        }), [
+        strAttr
+    ]);
 };

package/lib/hooks/useTabsterAttributes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTabsterAttributes.ts"],"sourcesContent":["import { getTabsterAttribute, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\n/**\n * @internal\n * Hook that returns tabster attributes while ensuring tabster exists\n */\nexport const useTabsterAttributes = (props: TabsterTypes.TabsterAttributeProps): TabsterTypes.TabsterDOMAttribute => {\n  // A tabster instance is not necessary to generate tabster attributes\n  // but calling the hook will ensure that a tabster instance exists internally and avoids consumers doing the same\n  useTabster();\n\n  return getTabsterAttribute(props);\n};\n"],"names":["getTabsterAttribute","useTabster","useTabsterAttributes","props"],"mappings":"AAAA,SAASA,mBAAmB,QAA+B,UAAU;AACrE,SAASC,UAAU,QAAQ,eAAe;AAE1C;;;CAGC,GACD,OAAO,MAAMC,uBAAuB,CAACC;IACnC,qEAAqE;IACrE,iHAAiH;IACjHF;IAEA,OAAOD,oBAAoBG;AAC7B,EAAE"}
+{"version":3,"sources":["useTabsterAttributes.ts"],"sourcesContent":["import { getTabsterAttribute, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\nimport * as React from 'react';\n\n/**\n * @internal\n * Hook that returns tabster attributes while ensuring tabster exists\n */\nexport const useTabsterAttributes = (props: TabsterTypes.TabsterAttributeProps): TabsterTypes.TabsterDOMAttribute => {\n  // A tabster instance is not necessary to generate tabster attributes\n  // but calling the hook will ensure that a tabster instance exists internally and avoids consumers doing the same\n  useTabster();\n\n  const strAttr = getTabsterAttribute(props, true);\n  return React.useMemo(\n    () => ({\n      'data-tabster': strAttr,\n    }),\n    [strAttr],\n  );\n};\n"],"names":["getTabsterAttribute","useTabster","React","useTabsterAttributes","props","strAttr","useMemo"],"mappings":"AAAA,SAASA,mBAAmB,QAA+B,UAAU;AACrE,SAASC,UAAU,QAAQ,eAAe;AAC1C,YAAYC,WAAW,QAAQ;AAE/B;;;CAGC,GACD,OAAO,MAAMC,uBAAuB,CAACC;IACnC,qEAAqE;IACrE,iHAAiH;IACjHH;IAEA,MAAMI,UAAUL,oBAAoBI,OAAO;IAC3C,OAAOF,MAAMI,OAAO,CAClB,IAAO,CAAA;YACL,gBAAgBD;QAClB,CAAA,GACA;QAACA;KAAQ;AAEb,EAAE"}

package/lib/index.js

@@ -1,4 +1,4 @@
-export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useFocusVisible, useFocusWithin, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes, useObservedElement, useFocusObserved, useMergedTabsterAttributes_unstable, useRestoreFocusSource, useRestoreFocusTarget, useUncontrolledFocus } from './hooks/index';
+export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useFocusVisible, useFocusWithin, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes, useObservedElement, useFocusObserved, useMergedTabsterAttributes_unstable, useRestoreFocusSource, useRestoreFocusTarget, useUncontrolledFocus, useOnKeyboardNavigationChange } from './hooks/index';
 export { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';
 export { applyFocusVisiblePolyfill } from './focus/index';
 export { KEYBORG_FOCUSIN } from 'keyborg';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useFocusFinders,\n  useFocusVisible,\n  useFocusWithin,\n  useKeyboardNavAttribute,\n  useModalAttributes,\n  useTabsterAttributes,\n  useObservedElement,\n  useFocusObserved,\n  useMergedTabsterAttributes_unstable,\n  useRestoreFocusSource,\n  useRestoreFocusTarget,\n  useUncontrolledFocus,\n} from './hooks/index';\nexport type {\n  UseArrowNavigationGroupOptions,\n  UseFocusableGroupOptions,\n  UseModalAttributesOptions,\n} from './hooks/index';\n\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\n\nexport type {\n  CreateCustomFocusIndicatorStyleOptions,\n  CreateFocusOutlineStyleOptions,\n  FocusOutlineOffset,\n  FocusOutlineStyleOptions,\n} from './focus/index';\n\nexport { applyFocusVisiblePolyfill } from './focus/index';\nimport { Types as TabsterTypes } from 'tabster';\n\nexport type TabsterDOMAttribute = TabsterTypes.TabsterDOMAttribute;\n\nexport type { KeyborgFocusInEvent } from 'keyborg';\nexport { KEYBORG_FOCUSIN } from 'keyborg';\n"],"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useModalAttributes","useTabsterAttributes","useObservedElement","useFocusObserved","useMergedTabsterAttributes_unstable","useRestoreFocusSource","useRestoreFocusTarget","useUncontrolledFocus","createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill","KEYBORG_FOCUSIN"],"mappings":"AAAA,SACEA,uBAAuB,EACvBC,iBAAiB,EACjBC,eAAe,EACfC,eAAe,EACfC,cAAc,EACdC,uBAAuB,EACvBC,kBAAkB,EAClBC,oBAAoB,EACpBC,kBAAkB,EAClBC,gBAAgB,EAChBC,mCAAmC,EACnCC,qBAAqB,EACrBC,qBAAqB,EACrBC,oBAAoB,QACf,gBAAgB;AAOvB,SAASC,+BAA+B,EAAEC,uBAAuB,QAAQ,gBAAgB;AASzF,SAASC,yBAAyB,QAAQ,gBAAgB;AAM1D,SAASC,eAAe,QAAQ,UAAU"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useFocusFinders,\n  useFocusVisible,\n  useFocusWithin,\n  useKeyboardNavAttribute,\n  useModalAttributes,\n  useTabsterAttributes,\n  useObservedElement,\n  useFocusObserved,\n  useMergedTabsterAttributes_unstable,\n  useRestoreFocusSource,\n  useRestoreFocusTarget,\n  useUncontrolledFocus,\n  useOnKeyboardNavigationChange,\n} from './hooks/index';\nexport type {\n  UseArrowNavigationGroupOptions,\n  UseFocusableGroupOptions,\n  UseModalAttributesOptions,\n} from './hooks/index';\n\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\n\nexport type {\n  CreateCustomFocusIndicatorStyleOptions,\n  CreateFocusOutlineStyleOptions,\n  FocusOutlineOffset,\n  FocusOutlineStyleOptions,\n} from './focus/index';\n\nexport { applyFocusVisiblePolyfill } from './focus/index';\nimport { Types as TabsterTypes } from 'tabster';\n\nexport type TabsterDOMAttribute = TabsterTypes.TabsterDOMAttribute;\n\nexport type { KeyborgFocusInEvent } from 'keyborg';\nexport { KEYBORG_FOCUSIN } from 'keyborg';\n"],"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useModalAttributes","useTabsterAttributes","useObservedElement","useFocusObserved","useMergedTabsterAttributes_unstable","useRestoreFocusSource","useRestoreFocusTarget","useUncontrolledFocus","useOnKeyboardNavigationChange","createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill","KEYBORG_FOCUSIN"],"mappings":"AAAA,SACEA,uBAAuB,EACvBC,iBAAiB,EACjBC,eAAe,EACfC,eAAe,EACfC,cAAc,EACdC,uBAAuB,EACvBC,kBAAkB,EAClBC,oBAAoB,EACpBC,kBAAkB,EAClBC,gBAAgB,EAChBC,mCAAmC,EACnCC,qBAAqB,EACrBC,qBAAqB,EACrBC,oBAAoB,EACpBC,6BAA6B,QACxB,gBAAgB;AAOvB,SAASC,+BAA+B,EAAEC,uBAAuB,QAAQ,gBAAgB;AASzF,SAASC,yBAAyB,QAAQ,gBAAgB;AAM1D,SAASC,eAAe,QAAQ,UAAU"}

package/lib-commonjs/hooks/index.js

@@ -9,6 +9,7 @@ _export_star._(require("./useFocusFinders"), exports);
 _export_star._(require("./useFocusVisible"), exports);
 _export_star._(require("./useFocusWithin"), exports);
 _export_star._(require("./useKeyboardNavAttribute"), exports);
+_export_star._(require("./useOnKeyboardNavigationChange"), exports);
 _export_star._(require("./useModalAttributes"), exports);
 _export_star._(require("./useTabsterAttributes"), exports);
 _export_star._(require("./useObservedElement"), exports);

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

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export * from './useArrowNavigationGroup';\nexport * from './useFocusableGroup';\nexport * from './useFocusFinders';\nexport * from './useFocusVisible';\nexport * from './useFocusWithin';\nexport * from './useKeyboardNavAttribute';\nexport * from './useModalAttributes';\nexport * from './useTabsterAttributes';\nexport * from './useObservedElement';\nexport * from './useMergeTabsterAttributes';\nexport * from './useFocusObserved';\nexport * from './useRestoreFocus';\nexport * from './useUncontrolledFocus';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './useArrowNavigationGroup';\nexport * from './useFocusableGroup';\nexport * from './useFocusFinders';\nexport * from './useFocusVisible';\nexport * from './useFocusWithin';\nexport * from './useKeyboardNavAttribute';\nexport * from './useOnKeyboardNavigationChange';\nexport * from './useModalAttributes';\nexport * from './useTabsterAttributes';\nexport * from './useObservedElement';\nexport * from './useMergeTabsterAttributes';\nexport * from './useFocusObserved';\nexport * from './useRestoreFocus';\nexport * from './useUncontrolledFocus';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA"}

package/lib-commonjs/hooks/useArrowNavigationGroup.js

@@ -12,7 +12,7 @@ const _tabster = require("tabster");
 const _useTabsterAttributes = require("./useTabsterAttributes");
 const _useTabster = require("./useTabster");
 const useArrowNavigationGroup = (options = {})=>{
-    const { circular, axis, memorizeCurrent, tabbable, ignoreDefaultKeydown, unstable_hasDefault } = options;
+    const { circular, axis, memorizeCurrent = true, tabbable, ignoreDefaultKeydown, unstable_hasDefault } = options;
     const tabster = (0, _useTabster.useTabster)();
     if (tabster) {
         (0, _tabster.getMover)(tabster);

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

@@ -1 +1 @@
-{"version":3,"sources":["useArrowNavigationGroup.js"],"sourcesContent":["import { Types, getMover } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n/**\n * A hook that returns the necessary tabster attributes to support arrow key navigation\n * @param options - Options to configure keyboard navigation\n */ export const useArrowNavigationGroup = (options = {})=>{\n    const { circular, axis, memorizeCurrent, tabbable, ignoreDefaultKeydown, // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault } = options;\n    const tabster = useTabster();\n    if (tabster) {\n        getMover(tabster);\n    }\n    return useTabsterAttributes({\n        mover: {\n            cyclic: !!circular,\n            direction: axisToMoverDirection(axis !== null && axis !== void 0 ? axis : 'vertical'),\n            memorizeCurrent,\n            tabbable,\n            hasDefault: unstable_hasDefault\n        },\n        ...ignoreDefaultKeydown && {\n            focusable: {\n                ignoreKeydown: ignoreDefaultKeydown\n            }\n        }\n    });\n};\nfunction axisToMoverDirection(axis) {\n    switch(axis){\n        case 'horizontal':\n            return Types.MoverDirections.Horizontal;\n        case 'grid':\n            return Types.MoverDirections.Grid;\n        case 'grid-linear':\n            return Types.MoverDirections.GridLinear;\n        case 'both':\n            return Types.MoverDirections.Both;\n        case 'vertical':\n        default:\n            return Types.MoverDirections.Vertical;\n    }\n}\n"],"names":["useArrowNavigationGroup","options","circular","axis","memorizeCurrent","tabbable","ignoreDefaultKeydown","unstable_hasDefault","tabster","useTabster","getMover","useTabsterAttributes","mover","cyclic","direction","axisToMoverDirection","hasDefault","focusable","ignoreKeydown","Types","MoverDirections","Horizontal","Grid","GridLinear","Both","Vertical"],"mappings":";;;;+BAMiBA;;;eAAAA;;;yBANe;sCACK;4BACV;AAIhB,MAAMA,0BAA0B,CAACC,UAAU,CAAC,CAAC;IACpD,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,eAAe,EAAEC,QAAQ,EAAEC,oBAAoB,EACvEC,mBAAmB,EAAE,GAAGN;IACxB,MAAMO,UAAUC,IAAAA,sBAAU;IAC1B,IAAID,SAAS;QACTE,IAAAA,iBAAQ,EAACF;IACb;IACA,OAAOG,IAAAA,0CAAoB,EAAC;QACxBC,OAAO;YACHC,QAAQ,CAAC,CAACX;YACVY,WAAWC,qBAAqBZ,SAAS,QAAQA,SAAS,KAAK,IAAIA,OAAO;YAC1EC;YACAC;YACAW,YAAYT;QAChB;QACA,GAAGD,wBAAwB;YACvBW,WAAW;gBACPC,eAAeZ;YACnB;QACJ,CAAC;IACL;AACJ;AACA,SAASS,qBAAqBZ,IAAI;IAC9B,OAAOA;QACH,KAAK;YACD,OAAOgB,cAAK,CAACC,eAAe,CAACC,UAAU;QAC3C,KAAK;YACD,OAAOF,cAAK,CAACC,eAAe,CAACE,IAAI;QACrC,KAAK;YACD,OAAOH,cAAK,CAACC,eAAe,CAACG,UAAU;QAC3C,KAAK;YACD,OAAOJ,cAAK,CAACC,eAAe,CAACI,IAAI;QACrC,KAAK;QACL;YACI,OAAOL,cAAK,CAACC,eAAe,CAACK,QAAQ;IAC7C;AACJ"}
+{"version":3,"sources":["useArrowNavigationGroup.js"],"sourcesContent":["import { Types, getMover } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n/**\n * A hook that returns the necessary tabster attributes to support arrow key navigation\n * @param options - Options to configure keyboard navigation\n */ export const useArrowNavigationGroup = (options = {})=>{\n    const { circular, axis, memorizeCurrent = true, tabbable, ignoreDefaultKeydown, // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault } = options;\n    const tabster = useTabster();\n    if (tabster) {\n        getMover(tabster);\n    }\n    return useTabsterAttributes({\n        mover: {\n            cyclic: !!circular,\n            direction: axisToMoverDirection(axis !== null && axis !== void 0 ? axis : 'vertical'),\n            memorizeCurrent,\n            tabbable,\n            hasDefault: unstable_hasDefault\n        },\n        ...ignoreDefaultKeydown && {\n            focusable: {\n                ignoreKeydown: ignoreDefaultKeydown\n            }\n        }\n    });\n};\nfunction axisToMoverDirection(axis) {\n    switch(axis){\n        case 'horizontal':\n            return Types.MoverDirections.Horizontal;\n        case 'grid':\n            return Types.MoverDirections.Grid;\n        case 'grid-linear':\n            return Types.MoverDirections.GridLinear;\n        case 'both':\n            return Types.MoverDirections.Both;\n        case 'vertical':\n        default:\n            return Types.MoverDirections.Vertical;\n    }\n}\n"],"names":["useArrowNavigationGroup","options","circular","axis","memorizeCurrent","tabbable","ignoreDefaultKeydown","unstable_hasDefault","tabster","useTabster","getMover","useTabsterAttributes","mover","cyclic","direction","axisToMoverDirection","hasDefault","focusable","ignoreKeydown","Types","MoverDirections","Horizontal","Grid","GridLinear","Both","Vertical"],"mappings":";;;;+BAMiBA;;;eAAAA;;;yBANe;sCACK;4BACV;AAIhB,MAAMA,0BAA0B,CAACC,UAAU,CAAC,CAAC;IACpD,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,kBAAkB,IAAI,EAAEC,QAAQ,EAAEC,oBAAoB,EAC9EC,mBAAmB,EAAE,GAAGN;IACxB,MAAMO,UAAUC,IAAAA,sBAAU;IAC1B,IAAID,SAAS;QACTE,IAAAA,iBAAQ,EAACF;IACb;IACA,OAAOG,IAAAA,0CAAoB,EAAC;QACxBC,OAAO;YACHC,QAAQ,CAAC,CAACX;YACVY,WAAWC,qBAAqBZ,SAAS,QAAQA,SAAS,KAAK,IAAIA,OAAO;YAC1EC;YACAC;YACAW,YAAYT;QAChB;QACA,GAAGD,wBAAwB;YACvBW,WAAW;gBACPC,eAAeZ;YACnB;QACJ,CAAC;IACL;AACJ;AACA,SAASS,qBAAqBZ,IAAI;IAC9B,OAAOA;QACH,KAAK;YACD,OAAOgB,cAAK,CAACC,eAAe,CAACC,UAAU;QAC3C,KAAK;YACD,OAAOF,cAAK,CAACC,eAAe,CAACE,IAAI;QACrC,KAAK;YACD,OAAOH,cAAK,CAACC,eAAe,CAACG,UAAU;QAC3C,KAAK;YACD,OAAOJ,cAAK,CAACC,eAAe,CAACI,IAAI;QACrC,KAAK;QACL;YACI,OAAOL,cAAK,CAACC,eAAe,CAACK,QAAQ;IAC7C;AACJ"}

package/lib-commonjs/hooks/useMergeTabsterAttributes.js

@@ -13,18 +13,17 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _tabster = require("tabster");
 const useMergedTabsterAttributes_unstable = (...attributes)=>{
     const stringAttributes = attributes.map((attribute)=>attribute[_tabster.Types.TabsterAttributeName]).filter(Boolean);
-    const mergedStrigAttribute = _react.useMemo(()=>{
+    return _react.useMemo(()=>{
         let attribute = stringAttributes[0];
         attributes.shift();
         for (const attr of stringAttributes){
             attribute = mergeAttributes(attribute, attr);
         }
-        return attribute;
+        return {
+            [_tabster.Types.TabsterAttributeName]: attribute
+        };
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, stringAttributes);
-    return {
-        [_tabster.Types.TabsterAttributeName]: mergedStrigAttribute
-    };
 };
 function mergeAttributes(a, b) {
     if (!b) {

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

@@ -1 +1 @@
-{"version":3,"sources":["useMergeTabsterAttributes.js"],"sourcesContent":["import * as React from 'react';\nimport { Types } from 'tabster';\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 */ export const useMergedTabsterAttributes_unstable = (...attributes)=>{\n    const stringAttributes = attributes.map((attribute)=>attribute[Types.TabsterAttributeName]).filter(Boolean);\n    const mergedStrigAttribute = React.useMemo(()=>{\n        let attribute = stringAttributes[0];\n        attributes.shift();\n        for (const attr of stringAttributes){\n            attribute = mergeAttributes(attribute, attr);\n        }\n        return attribute;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, stringAttributes);\n    return {\n        [Types.TabsterAttributeName]: mergedStrigAttribute\n    };\n};\nfunction mergeAttributes(a, b) {\n    if (!b) {\n        return a;\n    }\n    let aParsed = {};\n    let bParsed = {};\n    if (a) {\n        try {\n            aParsed = JSON.parse(a);\n        // eslint-disable-next-line no-empty\n        } catch  {}\n    }\n    if (b) {\n        try {\n            bParsed = JSON.parse(b);\n        // eslint-disable-next-line no-empty\n        } catch  {}\n    }\n    return JSON.stringify({\n        ...aParsed,\n        ...bParsed\n    });\n}\n"],"names":["useMergedTabsterAttributes_unstable","attributes","stringAttributes","map","attribute","Types","TabsterAttributeName","filter","Boolean","mergedStrigAttribute","React","useMemo","shift","attr","mergeAttributes","a","b","aParsed","bParsed","JSON","parse","stringify"],"mappings":";;;;+BASiBA;;;eAAAA;;;;iEATM;yBACD;AAQX,MAAMA,sCAAsC,CAAC,GAAGC;IACvD,MAAMC,mBAAmBD,WAAWE,GAAG,CAAC,CAACC,YAAYA,SAAS,CAACC,cAAK,CAACC,oBAAoB,CAAC,EAAEC,MAAM,CAACC;IACnG,MAAMC,uBAAuBC,OAAMC,OAAO,CAAC;QACvC,IAAIP,YAAYF,gBAAgB,CAAC,EAAE;QACnCD,WAAWW,KAAK;QAChB,KAAK,MAAMC,QAAQX,iBAAiB;YAChCE,YAAYU,gBAAgBV,WAAWS;QAC3C;QACA,OAAOT;IACX,uDAAuD;IACvD,GAAGF;IACH,OAAO;QACH,CAACG,cAAK,CAACC,oBAAoB,CAAC,EAAEG;IAClC;AACJ;AACA,SAASK,gBAAgBC,CAAC,EAAEC,CAAC;IACzB,IAAI,CAACA,GAAG;QACJ,OAAOD;IACX;IACA,IAAIE,UAAU,CAAC;IACf,IAAIC,UAAU,CAAC;IACf,IAAIH,GAAG;QACH,IAAI;YACAE,UAAUE,KAAKC,KAAK,CAACL;QACzB,oCAAoC;QACpC,EAAE,OAAO,CAAC;IACd;IACA,IAAIC,GAAG;QACH,IAAI;YACAE,UAAUC,KAAKC,KAAK,CAACJ;QACzB,oCAAoC;QACpC,EAAE,OAAO,CAAC;IACd;IACA,OAAOG,KAAKE,SAAS,CAAC;QAClB,GAAGJ,OAAO;QACV,GAAGC,OAAO;IACd;AACJ"}
+{"version":3,"sources":["useMergeTabsterAttributes.js"],"sourcesContent":["import * as React from 'react';\nimport { Types } from 'tabster';\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 */ export const useMergedTabsterAttributes_unstable = (...attributes)=>{\n    const stringAttributes = attributes.map((attribute)=>attribute[Types.TabsterAttributeName]).filter(Boolean);\n    return React.useMemo(()=>{\n        let attribute = stringAttributes[0];\n        attributes.shift();\n        for (const attr of stringAttributes){\n            attribute = mergeAttributes(attribute, attr);\n        }\n        return {\n            [Types.TabsterAttributeName]: attribute\n        };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, stringAttributes);\n};\nfunction mergeAttributes(a, b) {\n    if (!b) {\n        return a;\n    }\n    let aParsed = {};\n    let bParsed = {};\n    if (a) {\n        try {\n            aParsed = JSON.parse(a);\n        // eslint-disable-next-line no-empty\n        } catch  {}\n    }\n    if (b) {\n        try {\n            bParsed = JSON.parse(b);\n        // eslint-disable-next-line no-empty\n        } catch  {}\n    }\n    return JSON.stringify({\n        ...aParsed,\n        ...bParsed\n    });\n}\n"],"names":["useMergedTabsterAttributes_unstable","attributes","stringAttributes","map","attribute","Types","TabsterAttributeName","filter","Boolean","React","useMemo","shift","attr","mergeAttributes","a","b","aParsed","bParsed","JSON","parse","stringify"],"mappings":";;;;+BASiBA;;;eAAAA;;;;iEATM;yBACD;AAQX,MAAMA,sCAAsC,CAAC,GAAGC;IACvD,MAAMC,mBAAmBD,WAAWE,GAAG,CAAC,CAACC,YAAYA,SAAS,CAACC,cAAK,CAACC,oBAAoB,CAAC,EAAEC,MAAM,CAACC;IACnG,OAAOC,OAAMC,OAAO,CAAC;QACjB,IAAIN,YAAYF,gBAAgB,CAAC,EAAE;QACnCD,WAAWU,KAAK;QAChB,KAAK,MAAMC,QAAQV,iBAAiB;YAChCE,YAAYS,gBAAgBT,WAAWQ;QAC3C;QACA,OAAO;YACH,CAACP,cAAK,CAACC,oBAAoB,CAAC,EAAEF;QAClC;IACJ,uDAAuD;IACvD,GAAGF;AACP;AACA,SAASW,gBAAgBC,CAAC,EAAEC,CAAC;IACzB,IAAI,CAACA,GAAG;QACJ,OAAOD;IACX;IACA,IAAIE,UAAU,CAAC;IACf,IAAIC,UAAU,CAAC;IACf,IAAIH,GAAG;QACH,IAAI;YACAE,UAAUE,KAAKC,KAAK,CAACL;QACzB,oCAAoC;QACpC,EAAE,OAAO,CAAC;IACd;IACA,IAAIC,GAAG;QACH,IAAI;YACAE,UAAUC,KAAKC,KAAK,CAACJ;QACzB,oCAAoC;QACpC,EAAE,OAAO,CAAC;IACd;IACA,OAAOG,KAAKE,SAAS,CAAC;QAClB,GAAGJ,OAAO;QACV,GAAGC,OAAO;IACd;AACJ"}

package/lib-commonjs/hooks/useOnKeyboardNavigationChange.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useOnKeyboardNavigationChange", {
+    enumerable: true,
+    get: function() {
+        return useOnKeyboardNavigationChange;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _keyborg = require("keyborg");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _reactutilities = require("@fluentui/react-utilities");
+function useOnKeyboardNavigationChange(callback) {
+    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const keyborg = _react.useMemo(()=>targetDocument && (0, _keyborg.createKeyborg)(targetDocument.defaultView), [
+        targetDocument
+    ]);
+    const eventCallback = (0, _reactutilities.useEventCallback)(callback);
+    _react.useEffect(()=>{
+        if (keyborg) {
+            const cb = (next)=>{
+                eventCallback(next);
+            };
+            keyborg.subscribe(cb);
+            return ()=>keyborg.unsubscribe(cb);
+        }
+    }, [
+        keyborg,
+        eventCallback
+    ]);
+    _react.useEffect(()=>{
+        return ()=>keyborg && (0, _keyborg.disposeKeyborg)(keyborg);
+    }, [
+        keyborg
+    ]);
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useOnKeyboardNavigationChange.js"],"sourcesContent":["import * as React from 'react';\nimport { createKeyborg, disposeKeyborg } from 'keyborg';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useEventCallback } from '@fluentui/react-utilities';\n/**\n * Instantiates [keyborg](https://github.com/microsoft/keyborg) and subscribes to changes\n * in the keyboard navigation mode.\n *\n * @param callback - called every time the keyboard navigation state changes\n */ export function useOnKeyboardNavigationChange(callback) {\n    const { targetDocument } = useFluent();\n    const keyborg = React.useMemo(()=>targetDocument && createKeyborg(targetDocument.defaultView), [\n        targetDocument\n    ]);\n    const eventCallback = useEventCallback(callback);\n    React.useEffect(()=>{\n        if (keyborg) {\n            const cb = (next)=>{\n                eventCallback(next);\n            };\n            keyborg.subscribe(cb);\n            return ()=>keyborg.unsubscribe(cb);\n        }\n    }, [\n        keyborg,\n        eventCallback\n    ]);\n    React.useEffect(()=>{\n        return ()=>keyborg && disposeKeyborg(keyborg);\n    }, [\n        keyborg\n    ]);\n}\n"],"names":["useOnKeyboardNavigationChange","callback","targetDocument","useFluent","keyborg","React","useMemo","createKeyborg","defaultView","eventCallback","useEventCallback","useEffect","cb","next","subscribe","unsubscribe","disposeKeyborg"],"mappings":";;;;+BASoBA;;;eAAAA;;;;iEATG;yBACuB;qCACE;gCACf;AAMtB,SAASA,8BAA8BC,QAAQ;IACtD,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAMC,UAAUC,OAAMC,OAAO,CAAC,IAAIJ,kBAAkBK,IAAAA,sBAAa,EAACL,eAAeM,WAAW,GAAG;QAC3FN;KACH;IACD,MAAMO,gBAAgBC,IAAAA,gCAAgB,EAACT;IACvCI,OAAMM,SAAS,CAAC;QACZ,IAAIP,SAAS;YACT,MAAMQ,KAAK,CAACC;gBACRJ,cAAcI;YAClB;YACAT,QAAQU,SAAS,CAACF;YAClB,OAAO,IAAIR,QAAQW,WAAW,CAACH;QACnC;IACJ,GAAG;QACCR;QACAK;KACH;IACDJ,OAAMM,SAAS,CAAC;QACZ,OAAO,IAAIP,WAAWY,IAAAA,uBAAc,EAACZ;IACzC,GAAG;QACCA;KACH;AACL"}

package/lib-commonjs/hooks/useTabsterAttributes.js

@@ -8,11 +8,18 @@ Object.defineProperty(exports, "useTabsterAttributes", {
         return useTabsterAttributes;
     }
 });
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _tabster = require("tabster");
 const _useTabster = require("./useTabster");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const useTabsterAttributes = (props)=>{
     // A tabster instance is not necessary to generate tabster attributes
     // but calling the hook will ensure that a tabster instance exists internally and avoids consumers doing the same
     (0, _useTabster.useTabster)();
-    return (0, _tabster.getTabsterAttribute)(props);
+    const strAttr = (0, _tabster.getTabsterAttribute)(props, true);
+    return _react.useMemo(()=>({
+            'data-tabster': strAttr
+        }), [
+        strAttr
+    ]);
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useTabsterAttributes.js"],"sourcesContent":["import { getTabsterAttribute } from 'tabster';\nimport { useTabster } from './useTabster';\n/**\n * @internal\n * Hook that returns tabster attributes while ensuring tabster exists\n */ export const useTabsterAttributes = (props)=>{\n    // A tabster instance is not necessary to generate tabster attributes\n    // but calling the hook will ensure that a tabster instance exists internally and avoids consumers doing the same\n    useTabster();\n    return getTabsterAttribute(props);\n};\n"],"names":["useTabsterAttributes","props","useTabster","getTabsterAttribute"],"mappings":";;;;+BAKiBA;;;eAAAA;;;yBALmB;4BACT;AAIhB,MAAMA,uBAAuB,CAACC;IACrC,qEAAqE;IACrE,iHAAiH;IACjHC,IAAAA,sBAAU;IACV,OAAOC,IAAAA,4BAAmB,EAACF;AAC/B"}
+{"version":3,"sources":["useTabsterAttributes.js"],"sourcesContent":["import { getTabsterAttribute } from 'tabster';\nimport { useTabster } from './useTabster';\nimport * as React from 'react';\n/**\n * @internal\n * Hook that returns tabster attributes while ensuring tabster exists\n */ export const useTabsterAttributes = (props)=>{\n    // A tabster instance is not necessary to generate tabster attributes\n    // but calling the hook will ensure that a tabster instance exists internally and avoids consumers doing the same\n    useTabster();\n    const strAttr = getTabsterAttribute(props, true);\n    return React.useMemo(()=>({\n            'data-tabster': strAttr\n        }), [\n        strAttr\n    ]);\n};\n"],"names":["useTabsterAttributes","props","useTabster","strAttr","getTabsterAttribute","React","useMemo"],"mappings":";;;;+BAMiBA;;;eAAAA;;;;yBANmB;4BACT;iEACJ;AAIZ,MAAMA,uBAAuB,CAACC;IACrC,qEAAqE;IACrE,iHAAiH;IACjHC,IAAAA,sBAAU;IACV,MAAMC,UAAUC,IAAAA,4BAAmB,EAACH,OAAO;IAC3C,OAAOI,OAAMC,OAAO,CAAC,IAAK,CAAA;YAClB,gBAAgBH;QACpB,CAAA,GAAI;QACJA;KACH;AACL"}

package/lib-commonjs/index.js

@@ -51,6 +51,9 @@ _export(exports, {
     useUncontrolledFocus: function() {
         return _index.useUncontrolledFocus;
     },
+    useOnKeyboardNavigationChange: function() {
+        return _index.useOnKeyboardNavigationChange;
+    },
     createCustomFocusIndicatorStyle: function() {
         return _index1.createCustomFocusIndicatorStyle;
     },

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useFocusVisible, useFocusWithin, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes, useObservedElement, useFocusObserved, useMergedTabsterAttributes_unstable, useRestoreFocusSource, useRestoreFocusTarget, useUncontrolledFocus } from './hooks/index';\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\nexport { applyFocusVisiblePolyfill } from './focus/index';\nexport { KEYBORG_FOCUSIN } from 'keyborg';\n"],"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useModalAttributes","useTabsterAttributes","useObservedElement","useFocusObserved","useMergedTabsterAttributes_unstable","useRestoreFocusSource","useRestoreFocusTarget","useUncontrolledFocus","createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill","KEYBORG_FOCUSIN"],"mappings":";;;;;;;;;;;IAASA,uBAAuB;eAAvBA,8BAAuB;;IAAEC,iBAAiB;eAAjBA,wBAAiB;;IAAEC,eAAe;eAAfA,sBAAe;;IAAEC,eAAe;eAAfA,sBAAe;;IAAEC,cAAc;eAAdA,qBAAc;;IAAEC,uBAAuB;eAAvBA,8BAAuB;;IAAEC,kBAAkB;eAAlBA,yBAAkB;;IAAEC,oBAAoB;eAApBA,2BAAoB;;IAAEC,kBAAkB;eAAlBA,yBAAkB;;IAAEC,gBAAgB;eAAhBA,uBAAgB;;IAAEC,mCAAmC;eAAnCA,0CAAmC;;IAAEC,qBAAqB;eAArBA,4BAAqB;;IAAEC,qBAAqB;eAArBA,4BAAqB;;IAAEC,oBAAoB;eAApBA,2BAAoB;;IAC9SC,+BAA+B;eAA/BA,uCAA+B;;IAAEC,uBAAuB;eAAvBA,+BAAuB;;IACxDC,yBAAyB;eAAzBA,iCAAyB;;IACzBC,eAAe;eAAfA,wBAAe;;;uBAHuS;wBACtP;yBAEzC"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useFocusVisible, useFocusWithin, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes, useObservedElement, useFocusObserved, useMergedTabsterAttributes_unstable, useRestoreFocusSource, useRestoreFocusTarget, useUncontrolledFocus, useOnKeyboardNavigationChange } from './hooks/index';\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\nexport { applyFocusVisiblePolyfill } from './focus/index';\nexport { KEYBORG_FOCUSIN } from 'keyborg';\n"],"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useModalAttributes","useTabsterAttributes","useObservedElement","useFocusObserved","useMergedTabsterAttributes_unstable","useRestoreFocusSource","useRestoreFocusTarget","useUncontrolledFocus","useOnKeyboardNavigationChange","createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill","KEYBORG_FOCUSIN"],"mappings":";;;;;;;;;;;IAASA,uBAAuB;eAAvBA,8BAAuB;;IAAEC,iBAAiB;eAAjBA,wBAAiB;;IAAEC,eAAe;eAAfA,sBAAe;;IAAEC,eAAe;eAAfA,sBAAe;;IAAEC,cAAc;eAAdA,qBAAc;;IAAEC,uBAAuB;eAAvBA,8BAAuB;;IAAEC,kBAAkB;eAAlBA,yBAAkB;;IAAEC,oBAAoB;eAApBA,2BAAoB;;IAAEC,kBAAkB;eAAlBA,yBAAkB;;IAAEC,gBAAgB;eAAhBA,uBAAgB;;IAAEC,mCAAmC;eAAnCA,0CAAmC;;IAAEC,qBAAqB;eAArBA,4BAAqB;;IAAEC,qBAAqB;eAArBA,4BAAqB;;IAAEC,oBAAoB;eAApBA,2BAAoB;;IAAEC,6BAA6B;eAA7BA,oCAA6B;;IAC7UC,+BAA+B;eAA/BA,uCAA+B;;IAAEC,uBAAuB;eAAvBA,+BAAuB;;IACxDC,yBAAyB;eAAzBA,iCAAyB;;IACzBC,eAAe;eAAfA,wBAAe;;;uBAHsU;wBACrR;yBAEzC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabster",
-  "version": "9.16.1",
+  "version": "9.17.1",
   "description": "Utilities for focus management and facade for tabster",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,7 +33,7 @@
   "dependencies": {
     "@fluentui/react-shared-contexts": "^9.13.2",
     "@fluentui/react-theme": "^9.1.16",
-    "@fluentui/react-utilities": "^9.15.5",
+    "@fluentui/react-utilities": "^9.15.6",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1",
     "keyborg": "^2.3.0",
@@ -41,7 +41,7 @@
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0 <19.0.0",
-    "@types/react-dom": ">=16.14.0 <19.0.0",
+    "@types/react-dom": ">=16.9.0 <19.0.0",
     "react": ">=16.14.0 <19.0.0",
     "react-dom": ">=16.14.0 <19.0.0"
   },