@fluentui/react-tabster 9.0.0-rc.4 → 9.0.0-rc.7

package/CHANGELOG.json

@@ -2,7 +2,140 @@
   "name": "@fluentui/react-tabster",
   "entries": [
     {
-      "date": "Tue, 01 Mar 2022 02:16:13 GMT",
+      "date": "Mon, 25 Apr 2022 09:31:17 GMT",
+      "tag": "@fluentui/react-tabster_v9.0.0-rc.7",
+      "version": "9.0.0-rc.7",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "marata@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d",
+            "comment": "Adjusting accordion keyboard navigation."
+          }
+        ],
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "31e8b97573aeba761d14b937378bb95d578c4c90",
+            "comment": "docs(react-tabster): remove old info about provider"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 19 Apr 2022 19:16:59 GMT",
+      "tag": "@fluentui/react-tabster_v9.0.0-rc.6",
+      "version": "9.0.0-rc.6",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "e569d6e04d83cbcc6225e61db52ff81d2addd363",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "9c8592decacb9f7b1dc608a03c9f991918806008",
+            "comment": "Removing star exports at src/index.ts."
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "829295c714ac9ff8063f5e086513574ad2e7990b",
+            "comment": "fix styles in getFocusOutlineStyles()"
+          },
+          {
+            "author": "jukapsia@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "dc1f7a2c0cb8e7a3cc51d69ce3327f44d29109d1",
+            "comment": "feat(react-tabster): Add grid navigation"
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "2fcf8bd0341c71507dc625eeb60b4acda6369672",
+            "comment": "Upgrading tabster to latest version."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.5",
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.5",
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.6",
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
+          }
+        ],
+        "none": [
+          {
+            "author": "elcraig@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "b7f17e976f9e058f39c9fce4f0f9bb6eb4dfa577",
+            "comment": "Update React dev deps and hoist them to the repo root"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "67dd475e49182d17dbf7d9195c5df9bce02b7b3c",
+            "comment": "chore: Update e2e tests to use cypress component testing"
+          },
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "905e46db07ada986fd7885531f72a71b7bbaabdc",
+            "comment": "create v9 api extractor config and set all v9 packags to use it, suppress forgotten export"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 04 Mar 2022 05:17:31 GMT",
+      "tag": "@fluentui/react-tabster_v9.0.0-rc.5",
+      "version": "9.0.0-rc.5",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "dzearing@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "f2f1c0ea948cc3517eeb442c05433eb0918def29",
+            "comment": "Adding explicit export maps on all consumer packages for FUIR 8 and 9."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.4",
+            "commit": "1494f0b620f6d5aae7f0aef33fc9e8f6eb7f8749"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.4",
+            "commit": "1494f0b620f6d5aae7f0aef33fc9e8f6eb7f8749"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.5",
+            "commit": "1494f0b620f6d5aae7f0aef33fc9e8f6eb7f8749"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 01 Mar 2022 02:17:39 GMT",
       "tag": "@fluentui/react-tabster_v9.0.0-rc.4",
       "version": "9.0.0-rc.4",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,49 @@
 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Tue, 01 Mar 2022 02:16:13 GMT and should not be manually modified.
+This log was last generated on Mon, 25 Apr 2022 09:31:17 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-rc.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.0-rc.7)
+
+Mon, 25 Apr 2022 09:31:17 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.0-rc.6..@fluentui/react-tabster_v9.0.0-rc.7)
+
+### Changes
+
+- Adjusting accordion keyboard navigation. ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by marata@microsoft.com)
+
+## [9.0.0-rc.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.0-rc.6)
+
+Tue, 19 Apr 2022 19:16:59 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.0-rc.5..@fluentui/react-tabster_v9.0.0-rc.6)
+
+### Changes
+
+- chore: Update Griffel to latest version ([PR #21976](https://github.com/microsoft/fluentui/pull/21976) by olfedias@microsoft.com)
+- Removing star exports at src/index.ts. ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by Humberto.Morimoto@microsoft.com)
+- fix styles in getFocusOutlineStyles() ([PR #22070](https://github.com/microsoft/fluentui/pull/22070) by olfedias@microsoft.com)
+- feat(react-tabster): Add grid navigation ([PR #22085](https://github.com/microsoft/fluentui/pull/22085) by jukapsia@microsoft.com)
+- Upgrading tabster to latest version. ([PR #22492](https://github.com/microsoft/fluentui/pull/22492) by Humberto.Morimoto@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.0.0-rc.5 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
+
+## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.0-rc.5)
+
+Fri, 04 Mar 2022 05:17:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.0-rc.4..@fluentui/react-tabster_v9.0.0-rc.5)
+
+### Changes
+
+- Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.0.0-rc.4 ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.4 ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.5 ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by beachball)
+
 ## [9.0.0-rc.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.0-rc.4)
 
-Tue, 01 Mar 2022 02:16:13 GMT 
+Tue, 01 Mar 2022 02:17:39 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.0-rc.3..@fluentui/react-tabster_v9.0.0-rc.4)
 
 ### Changes

package/README.md

@@ -2,19 +2,14 @@
 
 **Tabster components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
 
-Experimental library for focus management that leverages [tabster](https://github.com/microsoft/tabster).
-
-These library is not production-ready and **should never be used in product**. This space is useful for testing new features whose APIs might change before final release.
-
-The provider needs to be wrapped around your application:
-
-```tsx
-<TabsterProvider>{children}</TabsterProvider>
-```
+Library for focus management that leverages [tabster](https://github.com/microsoft/tabster).
 
 The API currently only supports declarative data-\* attributes that are returned using the exported react hooks:
 
 ```tsx
+import * as React from 'react';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+
 const Item: React.FC = ({ children }) => <div tabIndex={0}>Item</div>;
 
 const ArrowNavigationExample: React.FC = ({ children }) => {
@@ -33,10 +28,6 @@ const ArrowNavigationExample: React.FC = ({ children }) => {
 };
 
 const App: React.FC = () => {
-  return (
-    <TabsterProvider>
-      <ArrowNavigationExample />
-    </TabsterProvider>
-  );
+  return <ArrowNavigationExample />;
 };
 ```

package/dist/react-tabster.d.ts

@@ -7,6 +7,7 @@ import { Types } from 'tabster';
  * Should be used only when @see createFocusOutlineStyle does not fit requirements
  *
  * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes
+ * @param options - Configure the style of the focus outline
  */
 export declare const createCustomFocusIndicatorStyle: (style: GriffelStyle, options?: CreateFocusIndicatorStyleRuleOptions) => GriffelStyle;
 
@@ -18,7 +19,6 @@ export declare interface CreateFocusIndicatorStyleRuleOptions {
  * NOTE: The element with the focus outline needs to have `position: relative` so that the
  * pseudo element can be properly positioned.
  *
- * @param theme - Theme used in @see makeStyles
  * @param options - Configure the style of the focus outline
  * @returns focus outline styles object for @see makeStyles
  */
@@ -47,10 +47,10 @@ export declare const useArrowNavigationGroup: (options?: UseArrowNavigationGroup
 
 export declare interface UseArrowNavigationGroupOptions {
     /**
-     * Focus will navigate vertically or horizontally, defaults to horizontally
+     * Focus will navigate vertically, horizontally or in both directions (grid), defaults to horizontally
      * @defaultValue vertical
      */
-    axis?: 'vertical' | 'horizontal';
+    axis?: 'vertical' | 'horizontal' | 'grid';
     /**
      * Focus will cycle to the first/last elements of the group without stopping
      */
@@ -60,6 +60,10 @@ export declare interface UseArrowNavigationGroupOptions {
      * available) when tabbing from outside of the group
      */
     memorizeCurrent?: boolean;
+    /**
+     * Allow tabbing within the arrow navigation group items.
+     */
+    tabbable?: boolean;
 }
 
 /**

package/lib/hooks/index.d.ts

@@ -1,7 +1,7 @@
 export * from './useArrowNavigationGroup';
+export * from './useFocusableGroup';
 export * from './useFocusFinders';
-export * from './useModalAttributes';
-export * from './useTabsterAttributes';
 export * from './useFocusIndicatorStyle';
 export * from './useKeyboardNavAttribute';
-export * from './useFocusableGroup';
+export * from './useModalAttributes';
+export * from './useTabsterAttributes';

package/lib/hooks/index.js

@@ -1,8 +1,8 @@
 export * from './useArrowNavigationGroup';
+export * from './useFocusableGroup';
 export * from './useFocusFinders';
-export * from './useModalAttributes';
-export * from './useTabsterAttributes';
 export * from './useFocusIndicatorStyle';
 export * from './useKeyboardNavAttribute';
-export * from './useFocusableGroup';
+export * from './useModalAttributes';
+export * from './useTabsterAttributes';
 //# sourceMappingURL=index.js.map

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './useArrowNavigationGroup';\nexport * from './useFocusFinders';\nexport * from './useModalAttributes';\nexport * from './useTabsterAttributes';\nexport * from './useFocusIndicatorStyle';\nexport * from './useKeyboardNavAttribute';\nexport * from './useFocusableGroup';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './useArrowNavigationGroup';\nexport * from './useFocusableGroup';\nexport * from './useFocusFinders';\nexport * from './useFocusIndicatorStyle';\nexport * from './useKeyboardNavAttribute';\nexport * from './useModalAttributes';\nexport * from './useTabsterAttributes';\n"]}

package/lib/hooks/useArrowNavigationGroup.d.ts

@@ -1,10 +1,10 @@
 import { Types } from 'tabster';
 export interface UseArrowNavigationGroupOptions {
     /**
-     * Focus will navigate vertically or horizontally, defaults to horizontally
+     * Focus will navigate vertically, horizontally or in both directions (grid), defaults to horizontally
      * @defaultValue vertical
      */
-    axis?: 'vertical' | 'horizontal';
+    axis?: 'vertical' | 'horizontal' | 'grid';
     /**
      * Focus will cycle to the first/last elements of the group without stopping
      */
@@ -14,6 +14,10 @@ export interface UseArrowNavigationGroupOptions {
      * available) when tabbing from outside of the group
      */
     memorizeCurrent?: boolean;
+    /**
+     * Allow tabbing within the arrow navigation group items.
+     */
+    tabbable?: boolean;
 }
 /**
  * A hook that returns the necessary tabster attributes to support arrow key navigation

package/lib/hooks/useArrowNavigationGroup.js

@@ -19,7 +19,8 @@ export const useArrowNavigationGroup = options => {
     mover: {
       cyclic: !!(options === null || options === void 0 ? void 0 : options.circular),
       direction: axisToMoverDirection((_a = options === null || options === void 0 ? void 0 : options.axis) !== null && _a !== void 0 ? _a : 'vertical'),
-      memorizeCurrent: options === null || options === void 0 ? void 0 : options.memorizeCurrent
+      memorizeCurrent: options === null || options === void 0 ? void 0 : options.memorizeCurrent,
+      tabbable: options === null || options === void 0 ? void 0 : options.tabbable
     }
   });
 };
@@ -29,6 +30,9 @@ function axisToMoverDirection(axis) {
     case 'horizontal':
       return Types.MoverDirections.Horizontal;
 
+    case 'grid':
+      return Types.MoverDirections.Grid;
+
     case 'vertical':
     default:
       return Types.MoverDirections.Vertical;

package/lib/hooks/useArrowNavigationGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["hooks/useArrowNavigationGroup.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,QAAhB,QAAgC,SAAhC;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,UAAT,QAA2B,cAA3B;AAmBA;;;AAGG;;AACH,OAAO,MAAM,uBAAuB,GAAI,OAAD,IAA6C;;;AAClF,QAAM,OAAO,GAAG,UAAU,EAA1B;;AAEA,MAAI,OAAJ,EAAa;AACX,IAAA,QAAQ,CAAC,OAAD,CAAR;AACD;;AAED,SAAO,oBAAoB,CAAC;AAC1B,IAAA,KAAK,EAAE;AACL,MAAA,MAAM,EAAE,CAAC,EAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,QAAV,CADJ;AAEL,MAAA,SAAS,EAAE,oBAAoB,CAAC,CAAA,EAAA,GAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,IAAT,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,EAAb,GAAiB,UAAlB,CAF1B;AAGL,MAAA,eAAe,EAAE,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE;AAHrB;AADmB,GAAD,CAA3B;AAOD,CAdM;;AAgBP,SAAS,oBAAT,CAA8B,IAA9B,EAA0E;AACxE,UAAQ,IAAR;AACE,SAAK,YAAL;AACE,aAAO,KAAK,CAAC,eAAN,CAAsB,UAA7B;;AAEF,SAAK,UAAL;AACA;AACE,aAAO,KAAK,CAAC,eAAN,CAAsB,QAA7B;AANJ;AAQD","sourcesContent":["import { Types, getMover } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseArrowNavigationGroupOptions {\n  /**\n   * Focus will navigate vertically or horizontally, defaults to horizontally\n   * @defaultValue vertical\n   */\n  axis?: 'vertical' | 'horizontal';\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\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) => {\n  const tabster = useTabster();\n\n  if (tabster) {\n    getMover(tabster);\n  }\n\n  return useTabsterAttributes({\n    mover: {\n      cyclic: !!options?.circular,\n      direction: axisToMoverDirection(options?.axis ?? 'vertical'),\n      memorizeCurrent: options?.memorizeCurrent,\n    },\n  });\n};\n\nfunction axisToMoverDirection(axis: UseArrowNavigationGroupOptions['axis']): Types.MoverDirection {\n  switch (axis) {\n    case 'horizontal':\n      return Types.MoverDirections.Horizontal;\n\n    case 'vertical':\n    default:\n      return Types.MoverDirections.Vertical;\n  }\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["hooks/useArrowNavigationGroup.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,QAAhB,QAAgC,SAAhC;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,UAAT,QAA2B,cAA3B;AAuBA;;;AAGG;;AACH,OAAO,MAAM,uBAAuB,GAAI,OAAD,IAAwE;;;AAC7G,QAAM,OAAO,GAAG,UAAU,EAA1B;;AAEA,MAAI,OAAJ,EAAa;AACX,IAAA,QAAQ,CAAC,OAAD,CAAR;AACD;;AAED,SAAO,oBAAoB,CAAC;AAC1B,IAAA,KAAK,EAAE;AACL,MAAA,MAAM,EAAE,CAAC,EAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,QAAV,CADJ;AAEL,MAAA,SAAS,EAAE,oBAAoB,CAAC,CAAA,EAAA,GAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,IAAT,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,EAAb,GAAiB,UAAlB,CAF1B;AAGL,MAAA,eAAe,EAAE,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,eAHrB;AAIL,MAAA,QAAQ,EAAE,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE;AAJd;AADmB,GAAD,CAA3B;AAQD,CAfM;;AAiBP,SAAS,oBAAT,CAA8B,IAA9B,EAA0E;AACxE,UAAQ,IAAR;AACE,SAAK,YAAL;AACE,aAAO,KAAK,CAAC,eAAN,CAAsB,UAA7B;;AACF,SAAK,MAAL;AACE,aAAO,KAAK,CAAC,eAAN,CAAsB,IAA7B;;AAEF,SAAK,UAAL;AACA;AACE,aAAO,KAAK,CAAC,eAAN,CAAsB,QAA7B;AARJ;AAUD","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';\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\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 tabster = useTabster();\n\n  if (tabster) {\n    getMover(tabster);\n  }\n\n  return useTabsterAttributes({\n    mover: {\n      cyclic: !!options?.circular,\n      direction: axisToMoverDirection(options?.axis ?? 'vertical'),\n      memorizeCurrent: options?.memorizeCurrent,\n      tabbable: options?.tabbable,\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\n    case 'vertical':\n    default:\n      return Types.MoverDirections.Vertical;\n  }\n}\n"],"sourceRoot":"../src/"}

package/lib/hooks/useFocusIndicatorStyle.d.ts

@@ -17,7 +17,6 @@ export interface CreateFocusIndicatorStyleRuleOptions {
  * NOTE: The element with the focus outline needs to have `position: relative` so that the
  * pseudo element can be properly positioned.
  *
- * @param theme - Theme used in @see makeStyles
  * @param options - Configure the style of the focus outline
  * @returns focus outline styles object for @see makeStyles
  */
@@ -29,5 +28,6 @@ export declare const createFocusOutlineStyle: (options?: {
  * Should be used only when @see createFocusOutlineStyle does not fit requirements
  *
  * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes
+ * @param options - Configure the style of the focus outline
  */
 export declare const createCustomFocusIndicatorStyle: (style: GriffelStyle, options?: CreateFocusIndicatorStyleRuleOptions) => GriffelStyle;

package/lib/hooks/useFocusIndicatorStyle.js

@@ -1,5 +1,6 @@
 import { tokens } from '@fluentui/react-theme';
 import { KEYBOARD_NAV_SELECTOR } from '../symbols';
+import { shorthands } from '@griffel/react';
 /**
  * NOTE: the element with the focus outline needs to have `position: relative` so that the
  * pseudo element can be properly positioned.
@@ -21,18 +22,16 @@ const getFocusOutlineStyles = options => {
   const outlineOffsetBottom = ((_b = outlineOffset) === null || _b === void 0 ? void 0 : _b.bottom) || outlineOffset;
   const outlineOffsetLeft = ((_c = outlineOffset) === null || _c === void 0 ? void 0 : _c.left) || outlineOffset;
   const outlineOffsetRight = ((_d = outlineOffset) === null || _d === void 0 ? void 0 : _d.right) || outlineOffset;
-  return {
-    borderColor: 'transparent',
+  return { ...shorthands.borderColor('transparent'),
     ':after': {
       content: '""',
       position: 'absolute',
       pointerEvents: 'none',
-      boxSizing: 'outline-box',
       zIndex: 1,
-      borderStyle: 'solid',
-      borderWidth: outlineWidth,
-      borderRadius: outlineRadius,
-      borderColor: outlineColor,
+      ...shorthands.borderStyle('solid'),
+      ...shorthands.borderWidth(outlineWidth),
+      ...shorthands.borderRadius(outlineRadius),
+      ...shorthands.borderColor(outlineColor),
       top: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetTop})`,
       bottom: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetBottom})`,
       left: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetLeft})`,
@@ -48,7 +47,6 @@ const defaultOptions = {
  * NOTE: The element with the focus outline needs to have `position: relative` so that the
  * pseudo element can be properly positioned.
  *
- * @param theme - Theme used in @see makeStyles
  * @param options - Configure the style of the focus outline
  * @returns focus outline styles object for @see makeStyles
  */
@@ -73,6 +71,7 @@ export const createFocusOutlineStyle = (options = {
  * Should be used only when @see createFocusOutlineStyle does not fit requirements
  *
  * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes
+ * @param options - Configure the style of the focus outline
  */
 
 export const createCustomFocusIndicatorStyle = (style, options = defaultOptions) => ({

package/lib/hooks/useFocusIndicatorStyle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["hooks/useFocusIndicatorStyle.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,qBAAT,QAAsC,YAAtC;AAeA;;;;;;AAMG;;AACH,MAAM,qBAAqB,GAAI,OAAD,IAAsC;;;AAClE,QAAM;AAAE,IAAA,aAAF;AAAiB,IAAA,YAAjB;AAA+B,IAAA,aAA/B;AAA8C,IAAA;AAA9C,MAA+D,OAArE;AAEA,QAAM,gBAAgB,GAAG,CAAA,CAAA,EAAA,GAAC,aAAD,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,KAAA,CAArC,GAAqC,EAAA,CAAE,GAAvC,KAA8C,aAAvE;AACA,QAAM,mBAAmB,GAAG,CAAA,CAAA,EAAA,GAAC,aAAD,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,KAAA,CAArC,GAAqC,EAAA,CAAE,MAAvC,KAAiD,aAA7E;AACA,QAAM,iBAAiB,GAAG,CAAA,CAAA,EAAA,GAAC,aAAD,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,KAAA,CAArC,GAAqC,EAAA,CAAE,IAAvC,KAA+C,aAAzE;AACA,QAAM,kBAAkB,GAAG,CAAA,CAAA,EAAA,GAAC,aAAD,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,KAAA,CAArC,GAAqC,EAAA,CAAE,KAAvC,KAAgD,aAA3E;AAEA,SAAO;AACL,IAAA,WAAW,EAAE,aADR;AAEL,cAAU;AACR,MAAA,OAAO,EAAE,IADD;AAER,MAAA,QAAQ,EAAE,UAFF;AAGR,MAAA,aAAa,EAAE,MAHP;AAIR,MAAA,SAAS,EAAE,aAJH;AAKR,MAAA,MAAM,EAAE,CALA;AAOR,MAAA,WAAW,EAAE,OAPL;AAQR,MAAA,WAAW,EAAE,YARL;AASR,MAAA,YAAY,EAAE,aATN;AAUR,MAAA,WAAW,EAAE,YAVL;AAYR,MAAA,GAAG,EAAE,CAAC,aAAD,GAAiB,IAAI,YAAY,EAAjC,GAAsC,cAAc,YAAY,MAAM,gBAAgB,GAZnF;AAaR,MAAA,MAAM,EAAE,CAAC,aAAD,GAAiB,IAAI,YAAY,EAAjC,GAAsC,cAAc,YAAY,MAAM,mBAAmB,GAbzF;AAcR,MAAA,IAAI,EAAE,CAAC,aAAD,GAAiB,IAAI,YAAY,EAAjC,GAAsC,cAAc,YAAY,MAAM,iBAAiB,GAdrF;AAeR,MAAA,KAAK,EAAE,CAAC,aAAD,GAAiB,IAAI,YAAY,EAAjC,GAAsC,cAAc,YAAY,MAAM,kBAAkB;AAfvF;AAFL,GAAP;AAoBD,CA5BD;;AAkCA,MAAM,cAAc,GAAyC;AAC3D,EAAA,QAAQ,EAAE;AADiD,CAA7D;AAIA;;;;;;;AAOG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CACrC,OAAA,GAE2C;AAAE,EAAA,KAAK,EAAE,EAAT;AAAa,KAAG;AAAhB,CAHN,MAInB;AAClB,oBAAkB;AAChB,IAAA,YAAY,EAAE;AADE,GADA;AAIlB,GAAC,GAAG,qBAAqB,KAAK,OAAO,CAAC,QAAR,IAAoB,cAAc,CAAC,QAAQ,EAAzE,GAA8E,qBAAqB,CAAC;AAClG,IAAA,YAAY,EAAE,MAAM,CAAC,iBAD6E;AAElG,IAAA,aAAa,EAAE,MAAM,CAAC,kBAF4E;AAGlG;AACA,IAAA,YAAY,EAAE,KAJoF;AAKlG,OAAG,OAAO,CAAC;AALuF,GAAD;AAJjF,CAJmB,CAAhC;AAiBP;;;;;AAKG;;AACH,OAAO,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C,OAAA,GAAgD,cAFH,MAG3B;AAClB,oBAAkB;AAChB,IAAA,YAAY,EAAE;AADE,GADA;AAIlB,GAAC,GAAG,qBAAqB,KAAK,OAAO,CAAC,QAAR,IAAoB,cAAc,CAAC,QAAQ,EAAzE,GAA8E;AAJ5D,CAH2B,CAAxC","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { KEYBOARD_NAV_SELECTOR } from '../symbols';\nimport type { GriffelStyle } from '@griffel/react';\n\nexport type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;\nexport type FocusOutlineStyleOptions = {\n  /**\n   * Only property not supported by the native CSS `outline`, if this is no longer needed\n   * we can just go native instead\n   */\n  outlineRadius: string;\n  outlineColor: string;\n  outlineWidth: string;\n  outlineOffset?: string | FocusOutlineOffset;\n};\n\n/**\n * NOTE: the element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configures the style of the focus outline\n * @returns focus outline styles object\n */\nconst getFocusOutlineStyles = (options: FocusOutlineStyleOptions) => {\n  const { outlineRadius, outlineColor, outlineOffset, outlineWidth } = options;\n\n  const outlineOffsetTop = (outlineOffset as FocusOutlineOffset)?.top || outlineOffset;\n  const outlineOffsetBottom = (outlineOffset as FocusOutlineOffset)?.bottom || outlineOffset;\n  const outlineOffsetLeft = (outlineOffset as FocusOutlineOffset)?.left || outlineOffset;\n  const outlineOffsetRight = (outlineOffset as FocusOutlineOffset)?.right || outlineOffset;\n\n  return {\n    borderColor: 'transparent',\n    ':after': {\n      content: '\"\"',\n      position: 'absolute',\n      pointerEvents: 'none',\n      boxSizing: 'outline-box',\n      zIndex: 1,\n\n      borderStyle: 'solid',\n      borderWidth: outlineWidth,\n      borderRadius: outlineRadius,\n      borderColor: outlineColor,\n\n      top: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetTop})`,\n      bottom: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetBottom})`,\n      left: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetLeft})`,\n      right: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetRight})`,\n    },\n  };\n};\n\nexport interface CreateFocusIndicatorStyleRuleOptions {\n  selector?: 'focus' | 'focus-within';\n}\n\nconst defaultOptions: CreateFocusIndicatorStyleRuleOptions = {\n  selector: 'focus',\n};\n\n/**\n * NOTE: The element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param theme - Theme used in @see makeStyles\n * @param options - Configure the style of the focus outline\n * @returns focus outline styles object for @see makeStyles\n */\nexport const createFocusOutlineStyle = (\n  options: {\n    style: Partial<FocusOutlineStyleOptions>;\n  } & CreateFocusIndicatorStyleRuleOptions = { style: {}, ...defaultOptions },\n): GriffelStyle => ({\n  ':focus-visible': {\n    outlineStyle: 'none',\n  },\n  [`${KEYBOARD_NAV_SELECTOR} :${options.selector || defaultOptions.selector}`]: getFocusOutlineStyles({\n    outlineColor: tokens.colorStrokeFocus2,\n    outlineRadius: tokens.borderRadiusMedium,\n    // FIXME: tokens.strokeWidthThick causes some weird bugs\n    outlineWidth: '2px',\n    ...options.style,\n  }),\n});\n\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes\n */\nexport const createCustomFocusIndicatorStyle = (\n  style: GriffelStyle,\n  options: CreateFocusIndicatorStyleRuleOptions = defaultOptions,\n): GriffelStyle => ({\n  ':focus-visible': {\n    outlineStyle: 'none',\n  },\n  [`${KEYBOARD_NAV_SELECTOR} :${options.selector || defaultOptions.selector}`]: style,\n});\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["hooks/useFocusIndicatorStyle.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { KEYBOARD_NAV_SELECTOR } from '../symbols';\nimport { shorthands } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\n\nexport type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;\nexport type FocusOutlineStyleOptions = {\n  /**\n   * Only property not supported by the native CSS `outline`, if this is no longer needed\n   * we can just go native instead\n   */\n  outlineRadius: string;\n  outlineColor: string;\n  outlineWidth: string;\n  outlineOffset?: string | FocusOutlineOffset;\n};\n\n/**\n * NOTE: the element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configures the style of the focus outline\n * @returns focus outline styles object\n */\nconst getFocusOutlineStyles = (options: FocusOutlineStyleOptions): GriffelStyle => {\n  const { outlineRadius, outlineColor, outlineOffset, outlineWidth } = options;\n\n  const outlineOffsetTop = (outlineOffset as FocusOutlineOffset)?.top || outlineOffset;\n  const outlineOffsetBottom = (outlineOffset as FocusOutlineOffset)?.bottom || outlineOffset;\n  const outlineOffsetLeft = (outlineOffset as FocusOutlineOffset)?.left || outlineOffset;\n  const outlineOffsetRight = (outlineOffset as FocusOutlineOffset)?.right || outlineOffset;\n\n  return {\n    ...shorthands.borderColor('transparent'),\n    ':after': {\n      content: '\"\"',\n      position: 'absolute',\n      pointerEvents: 'none',\n      zIndex: 1,\n\n      ...shorthands.borderStyle('solid'),\n      ...shorthands.borderWidth(outlineWidth),\n      ...shorthands.borderRadius(outlineRadius),\n      ...shorthands.borderColor(outlineColor),\n\n      top: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetTop})`,\n      bottom: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetBottom})`,\n      left: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetLeft})`,\n      right: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetRight})`,\n    },\n  };\n};\n\nexport interface CreateFocusIndicatorStyleRuleOptions {\n  selector?: 'focus' | 'focus-within';\n}\n\nconst defaultOptions: CreateFocusIndicatorStyleRuleOptions = {\n  selector: 'focus',\n};\n\n/**\n * NOTE: The element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configure the style of the focus outline\n * @returns focus outline styles object for @see makeStyles\n */\nexport const createFocusOutlineStyle = (\n  options: {\n    style: Partial<FocusOutlineStyleOptions>;\n  } & CreateFocusIndicatorStyleRuleOptions = { style: {}, ...defaultOptions },\n): GriffelStyle => ({\n  ':focus-visible': {\n    outlineStyle: 'none',\n  },\n  [`${KEYBOARD_NAV_SELECTOR} :${options.selector || defaultOptions.selector}`]: getFocusOutlineStyles({\n    outlineColor: tokens.colorStrokeFocus2,\n    outlineRadius: tokens.borderRadiusMedium,\n    // FIXME: tokens.strokeWidthThick causes some weird bugs\n    outlineWidth: '2px',\n    ...options.style,\n  }),\n});\n\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes\n * @param options - Configure the style of the focus outline\n */\nexport const createCustomFocusIndicatorStyle = (\n  style: GriffelStyle,\n  options: CreateFocusIndicatorStyleRuleOptions = defaultOptions,\n): GriffelStyle => ({\n  ':focus-visible': {\n    outlineStyle: 'none',\n  },\n  [`${KEYBOARD_NAV_SELECTOR} :${options.selector || defaultOptions.selector}`]: style,\n});\n"],"sourceRoot":"../src/"}

package/lib/hooks/useFocusableGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["hooks/useFocusableGroup.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,WAAhB,QAAmC,SAAnC;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,UAAT,QAA2B,cAA3B;AASA;;;AAGG;;AACH,OAAO,MAAM,iBAAiB,GAAI,OAAD,IAAuC;AACtE,QAAM,OAAO,GAAG,UAAU,EAA1B;;AAEA,MAAI,OAAJ,EAAa;AACX,IAAA,WAAW,CAAC,OAAD,CAAX;AACD;;AAED,SAAO,oBAAoB,CAAC;AAC1B,IAAA,QAAQ,EAAE;AACR,MAAA,WAAW,EAAE,cAAc,CAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,WAAV;AADnB;AADgB,GAAD,CAA3B;AAKD,CAZM;;AAcP,MAAM,cAAc,GAClB,WADqB,IAEoB;AACzC,UAAQ,WAAR;AACE,SAAK,WAAL;AACE,aAAO,KAAK,CAAC,qBAAN,CAA4B,SAAnC;;AACF,SAAK,SAAL;AACE,aAAO,KAAK,CAAC,qBAAN,CAA4B,OAAnC;;AACF,SAAK,kBAAL;AACE,aAAO,KAAK,CAAC,qBAAN,CAA4B,gBAAnC;;AACF;AACE,aAAO,SAAP;AARJ;AAUD,CAbD","sourcesContent":["import { Types, getGroupper } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseFocusableGroupOptions {\n  /**\n   * Behavior for the Tab key.\n   */\n  tabBehavior?: 'unlimited' | 'limited' | 'limitedTrapFocus';\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support groupping.\n * @param options - Options to configure keyboard navigation\n */\nexport const useFocusableGroup = (options?: UseFocusableGroupOptions) => {\n  const tabster = useTabster();\n\n  if (tabster) {\n    getGroupper(tabster);\n  }\n\n  return useTabsterAttributes({\n    groupper: {\n      tabbability: getTabbability(options?.tabBehavior),\n    },\n  });\n};\n\nconst getTabbability = (\n  tabBehavior?: UseFocusableGroupOptions['tabBehavior'],\n): Types.GroupperTabbability | undefined => {\n  switch (tabBehavior) {\n    case 'unlimited':\n      return Types.GroupperTabbabilities.Unlimited;\n    case 'limited':\n      return Types.GroupperTabbabilities.Limited;\n    case 'limitedTrapFocus':\n      return Types.GroupperTabbabilities.LimitedTrapFocus;\n    default:\n      return undefined;\n  }\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["hooks/useFocusableGroup.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,WAAhB,QAAmC,SAAnC;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,UAAT,QAA2B,cAA3B;AASA;;;AAGG;;AACH,OAAO,MAAM,iBAAiB,GAAI,OAAD,IAAkE;AACjG,QAAM,OAAO,GAAG,UAAU,EAA1B;;AAEA,MAAI,OAAJ,EAAa;AACX,IAAA,WAAW,CAAC,OAAD,CAAX;AACD;;AAED,SAAO,oBAAoB,CAAC;AAC1B,IAAA,QAAQ,EAAE;AACR,MAAA,WAAW,EAAE,cAAc,CAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,WAAV;AADnB;AADgB,GAAD,CAA3B;AAKD,CAZM;;AAcP,MAAM,cAAc,GAClB,WADqB,IAEoB;AACzC,UAAQ,WAAR;AACE,SAAK,WAAL;AACE,aAAO,KAAK,CAAC,qBAAN,CAA4B,SAAnC;;AACF,SAAK,SAAL;AACE,aAAO,KAAK,CAAC,qBAAN,CAA4B,OAAnC;;AACF,SAAK,kBAAL;AACE,aAAO,KAAK,CAAC,qBAAN,CAA4B,gBAAnC;;AACF;AACE,aAAO,SAAP;AARJ;AAUD,CAbD","sourcesContent":["import { Types, getGroupper } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseFocusableGroupOptions {\n  /**\n   * Behavior for the Tab key.\n   */\n  tabBehavior?: 'unlimited' | 'limited' | 'limitedTrapFocus';\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support groupping.\n * @param options - Options to configure keyboard navigation\n */\nexport const useFocusableGroup = (options?: UseFocusableGroupOptions): Types.TabsterDOMAttribute => {\n  const tabster = useTabster();\n\n  if (tabster) {\n    getGroupper(tabster);\n  }\n\n  return useTabsterAttributes({\n    groupper: {\n      tabbability: getTabbability(options?.tabBehavior),\n    },\n  });\n};\n\nconst getTabbability = (\n  tabBehavior?: UseFocusableGroupOptions['tabBehavior'],\n): Types.GroupperTabbability | undefined => {\n  switch (tabBehavior) {\n    case 'unlimited':\n      return Types.GroupperTabbabilities.Unlimited;\n    case 'limited':\n      return Types.GroupperTabbabilities.Limited;\n    case 'limitedTrapFocus':\n      return Types.GroupperTabbabilities.LimitedTrapFocus;\n    default:\n      return undefined;\n  }\n};\n"],"sourceRoot":"../src/"}

package/lib/index.d.ts

@@ -1 +1,2 @@
-export * from './hooks/index';
+export { createCustomFocusIndicatorStyle, createFocusOutlineStyle, useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes, } from './hooks/index';
+export type { CreateFocusIndicatorStyleRuleOptions, FocusOutlineOffset, FocusOutlineStyleOptions, UseArrowNavigationGroupOptions, UseFocusableGroupOptions, UseModalAttributesOptions, } from './hooks/index';

package/lib/index.js

@@ -1,2 +1,2 @@
-export * from './hooks/index';
+export { createCustomFocusIndicatorStyle, createFocusOutlineStyle, useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes } from './hooks/index';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC","sourcesContent":["export * from './hooks/index';\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,+BADF,EAEE,uBAFF,EAGE,uBAHF,EAIE,iBAJF,EAKE,eALF,EAME,uBANF,EAOE,kBAPF,EAQE,oBARF,QASO,eATP","sourcesContent":["export {\n  createCustomFocusIndicatorStyle,\n  createFocusOutlineStyle,\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useFocusFinders,\n  useKeyboardNavAttribute,\n  useModalAttributes,\n  useTabsterAttributes,\n} from './hooks/index';\nexport type {\n  CreateFocusIndicatorStyleRuleOptions,\n  FocusOutlineOffset,\n  FocusOutlineStyleOptions,\n  UseArrowNavigationGroupOptions,\n  UseFocusableGroupOptions,\n  UseModalAttributesOptions,\n} from './hooks/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/hooks/index.d.ts

@@ -1,7 +1,7 @@
 export * from './useArrowNavigationGroup';
+export * from './useFocusableGroup';
 export * from './useFocusFinders';
-export * from './useModalAttributes';
-export * from './useTabsterAttributes';
 export * from './useFocusIndicatorStyle';
 export * from './useKeyboardNavAttribute';
-export * from './useFocusableGroup';
+export * from './useModalAttributes';
+export * from './useTabsterAttributes';

package/lib-commonjs/hooks/index.js

@@ -8,15 +8,15 @@ const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./useArrowNavigationGroup"), exports);
 
-tslib_1.__exportStar(require("./useFocusFinders"), exports);
-
-tslib_1.__exportStar(require("./useModalAttributes"), exports);
+tslib_1.__exportStar(require("./useFocusableGroup"), exports);
 
-tslib_1.__exportStar(require("./useTabsterAttributes"), exports);
+tslib_1.__exportStar(require("./useFocusFinders"), exports);
 
 tslib_1.__exportStar(require("./useFocusIndicatorStyle"), exports);
 
 tslib_1.__exportStar(require("./useKeyboardNavAttribute"), exports);
 
-tslib_1.__exportStar(require("./useFocusableGroup"), exports);
+tslib_1.__exportStar(require("./useModalAttributes"), exports);
+
+tslib_1.__exportStar(require("./useTabsterAttributes"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["hooks/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './useArrowNavigationGroup';\nexport * from './useFocusFinders';\nexport * from './useModalAttributes';\nexport * from './useTabsterAttributes';\nexport * from './useFocusIndicatorStyle';\nexport * from './useKeyboardNavAttribute';\nexport * from './useFocusableGroup';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["hooks/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './useArrowNavigationGroup';\nexport * from './useFocusableGroup';\nexport * from './useFocusFinders';\nexport * from './useFocusIndicatorStyle';\nexport * from './useKeyboardNavAttribute';\nexport * from './useModalAttributes';\nexport * from './useTabsterAttributes';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/hooks/useArrowNavigationGroup.d.ts

@@ -1,10 +1,10 @@
 import { Types } from 'tabster';
 export interface UseArrowNavigationGroupOptions {
     /**
-     * Focus will navigate vertically or horizontally, defaults to horizontally
+     * Focus will navigate vertically, horizontally or in both directions (grid), defaults to horizontally
      * @defaultValue vertical
      */
-    axis?: 'vertical' | 'horizontal';
+    axis?: 'vertical' | 'horizontal' | 'grid';
     /**
      * Focus will cycle to the first/last elements of the group without stopping
      */
@@ -14,6 +14,10 @@ export interface UseArrowNavigationGroupOptions {
      * available) when tabbing from outside of the group
      */
     memorizeCurrent?: boolean;
+    /**
+     * Allow tabbing within the arrow navigation group items.
+     */
+    tabbable?: boolean;
 }
 /**
  * A hook that returns the necessary tabster attributes to support arrow key navigation

package/lib-commonjs/hooks/useArrowNavigationGroup.js

@@ -29,7 +29,8 @@ const useArrowNavigationGroup = options => {
     mover: {
       cyclic: !!(options === null || options === void 0 ? void 0 : options.circular),
       direction: axisToMoverDirection((_a = options === null || options === void 0 ? void 0 : options.axis) !== null && _a !== void 0 ? _a : 'vertical'),
-      memorizeCurrent: options === null || options === void 0 ? void 0 : options.memorizeCurrent
+      memorizeCurrent: options === null || options === void 0 ? void 0 : options.memorizeCurrent,
+      tabbable: options === null || options === void 0 ? void 0 : options.tabbable
     }
   });
 };
@@ -41,6 +42,9 @@ function axisToMoverDirection(axis) {
     case 'horizontal':
       return tabster_1.Types.MoverDirections.Horizontal;
 
+    case 'grid':
+      return tabster_1.Types.MoverDirections.Grid;
+
     case 'vertical':
     default:
       return tabster_1.Types.MoverDirections.Vertical;

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

@@ -1 +1 @@
-{"version":3,"sources":["hooks/useArrowNavigationGroup.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAmBA;;;AAGG;;;AACI,MAAM,uBAAuB,GAAI,OAAD,IAA6C;;;AAClF,QAAM,OAAO,GAAG,YAAA,CAAA,UAAA,EAAhB;;AAEA,MAAI,OAAJ,EAAa;AACX,IAAA,SAAA,CAAA,QAAA,CAAS,OAAT;AACD;;AAED,SAAO,sBAAA,CAAA,oBAAA,CAAqB;AAC1B,IAAA,KAAK,EAAE;AACL,MAAA,MAAM,EAAE,CAAC,EAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,QAAV,CADJ;AAEL,MAAA,SAAS,EAAE,oBAAoB,CAAC,CAAA,EAAA,GAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,IAAT,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,EAAb,GAAiB,UAAlB,CAF1B;AAGL,MAAA,eAAe,EAAE,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE;AAHrB;AADmB,GAArB,CAAP;AAOD,CAdM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB;;AAgBb,SAAS,oBAAT,CAA8B,IAA9B,EAA0E;AACxE,UAAQ,IAAR;AACE,SAAK,YAAL;AACE,aAAO,SAAA,CAAA,KAAA,CAAM,eAAN,CAAsB,UAA7B;;AAEF,SAAK,UAAL;AACA;AACE,aAAO,SAAA,CAAA,KAAA,CAAM,eAAN,CAAsB,QAA7B;AANJ;AAQD","sourcesContent":["import { Types, getMover } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseArrowNavigationGroupOptions {\n  /**\n   * Focus will navigate vertically or horizontally, defaults to horizontally\n   * @defaultValue vertical\n   */\n  axis?: 'vertical' | 'horizontal';\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\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) => {\n  const tabster = useTabster();\n\n  if (tabster) {\n    getMover(tabster);\n  }\n\n  return useTabsterAttributes({\n    mover: {\n      cyclic: !!options?.circular,\n      direction: axisToMoverDirection(options?.axis ?? 'vertical'),\n      memorizeCurrent: options?.memorizeCurrent,\n    },\n  });\n};\n\nfunction axisToMoverDirection(axis: UseArrowNavigationGroupOptions['axis']): Types.MoverDirection {\n  switch (axis) {\n    case 'horizontal':\n      return Types.MoverDirections.Horizontal;\n\n    case 'vertical':\n    default:\n      return Types.MoverDirections.Vertical;\n  }\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["hooks/useArrowNavigationGroup.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAuBA;;;AAGG;;;AACI,MAAM,uBAAuB,GAAI,OAAD,IAAwE;;;AAC7G,QAAM,OAAO,GAAG,YAAA,CAAA,UAAA,EAAhB;;AAEA,MAAI,OAAJ,EAAa;AACX,IAAA,SAAA,CAAA,QAAA,CAAS,OAAT;AACD;;AAED,SAAO,sBAAA,CAAA,oBAAA,CAAqB;AAC1B,IAAA,KAAK,EAAE;AACL,MAAA,MAAM,EAAE,CAAC,EAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,QAAV,CADJ;AAEL,MAAA,SAAS,EAAE,oBAAoB,CAAC,CAAA,EAAA,GAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,IAAT,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,EAAb,GAAiB,UAAlB,CAF1B;AAGL,MAAA,eAAe,EAAE,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,eAHrB;AAIL,MAAA,QAAQ,EAAE,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE;AAJd;AADmB,GAArB,CAAP;AAQD,CAfM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB;;AAiBb,SAAS,oBAAT,CAA8B,IAA9B,EAA0E;AACxE,UAAQ,IAAR;AACE,SAAK,YAAL;AACE,aAAO,SAAA,CAAA,KAAA,CAAM,eAAN,CAAsB,UAA7B;;AACF,SAAK,MAAL;AACE,aAAO,SAAA,CAAA,KAAA,CAAM,eAAN,CAAsB,IAA7B;;AAEF,SAAK,UAAL;AACA;AACE,aAAO,SAAA,CAAA,KAAA,CAAM,eAAN,CAAsB,QAA7B;AARJ;AAUD","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';\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\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 tabster = useTabster();\n\n  if (tabster) {\n    getMover(tabster);\n  }\n\n  return useTabsterAttributes({\n    mover: {\n      cyclic: !!options?.circular,\n      direction: axisToMoverDirection(options?.axis ?? 'vertical'),\n      memorizeCurrent: options?.memorizeCurrent,\n      tabbable: options?.tabbable,\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\n    case 'vertical':\n    default:\n      return Types.MoverDirections.Vertical;\n  }\n}\n"],"sourceRoot":"../src/"}

package/lib-commonjs/hooks/useFocusIndicatorStyle.d.ts

@@ -17,7 +17,6 @@ export interface CreateFocusIndicatorStyleRuleOptions {
  * NOTE: The element with the focus outline needs to have `position: relative` so that the
  * pseudo element can be properly positioned.
  *
- * @param theme - Theme used in @see makeStyles
  * @param options - Configure the style of the focus outline
  * @returns focus outline styles object for @see makeStyles
  */
@@ -29,5 +28,6 @@ export declare const createFocusOutlineStyle: (options?: {
  * Should be used only when @see createFocusOutlineStyle does not fit requirements
  *
  * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes
+ * @param options - Configure the style of the focus outline
  */
 export declare const createCustomFocusIndicatorStyle: (style: GriffelStyle, options?: CreateFocusIndicatorStyleRuleOptions) => GriffelStyle;

package/lib-commonjs/hooks/useFocusIndicatorStyle.js

@@ -8,6 +8,8 @@ exports.createCustomFocusIndicatorStyle = exports.createFocusOutlineStyle = void
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
 
 const symbols_1 = /*#__PURE__*/require("../symbols");
+
+const react_1 = /*#__PURE__*/require("@griffel/react");
 /**
  * NOTE: the element with the focus outline needs to have `position: relative` so that the
  * pseudo element can be properly positioned.
@@ -30,18 +32,16 @@ const getFocusOutlineStyles = options => {
   const outlineOffsetBottom = ((_b = outlineOffset) === null || _b === void 0 ? void 0 : _b.bottom) || outlineOffset;
   const outlineOffsetLeft = ((_c = outlineOffset) === null || _c === void 0 ? void 0 : _c.left) || outlineOffset;
   const outlineOffsetRight = ((_d = outlineOffset) === null || _d === void 0 ? void 0 : _d.right) || outlineOffset;
-  return {
-    borderColor: 'transparent',
+  return { ...react_1.shorthands.borderColor('transparent'),
     ':after': {
       content: '""',
       position: 'absolute',
       pointerEvents: 'none',
-      boxSizing: 'outline-box',
       zIndex: 1,
-      borderStyle: 'solid',
-      borderWidth: outlineWidth,
-      borderRadius: outlineRadius,
-      borderColor: outlineColor,
+      ...react_1.shorthands.borderStyle('solid'),
+      ...react_1.shorthands.borderWidth(outlineWidth),
+      ...react_1.shorthands.borderRadius(outlineRadius),
+      ...react_1.shorthands.borderColor(outlineColor),
       top: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetTop})`,
       bottom: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetBottom})`,
       left: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetLeft})`,
@@ -57,7 +57,6 @@ const defaultOptions = {
  * NOTE: The element with the focus outline needs to have `position: relative` so that the
  * pseudo element can be properly positioned.
  *
- * @param theme - Theme used in @see makeStyles
  * @param options - Configure the style of the focus outline
  * @returns focus outline styles object for @see makeStyles
  */
@@ -84,6 +83,7 @@ exports.createFocusOutlineStyle = createFocusOutlineStyle;
  * Should be used only when @see createFocusOutlineStyle does not fit requirements
  *
  * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes
+ * @param options - Configure the style of the focus outline
  */
 
 const createCustomFocusIndicatorStyle = (style, options = defaultOptions) => ({

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

@@ -1 +1 @@
-{"version":3,"sources":["hooks/useFocusIndicatorStyle.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { KEYBOARD_NAV_SELECTOR } from '../symbols';\nimport type { GriffelStyle } from '@griffel/react';\n\nexport type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;\nexport type FocusOutlineStyleOptions = {\n  /**\n   * Only property not supported by the native CSS `outline`, if this is no longer needed\n   * we can just go native instead\n   */\n  outlineRadius: string;\n  outlineColor: string;\n  outlineWidth: string;\n  outlineOffset?: string | FocusOutlineOffset;\n};\n\n/**\n * NOTE: the element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configures the style of the focus outline\n * @returns focus outline styles object\n */\nconst getFocusOutlineStyles = (options: FocusOutlineStyleOptions) => {\n  const { outlineRadius, outlineColor, outlineOffset, outlineWidth } = options;\n\n  const outlineOffsetTop = (outlineOffset as FocusOutlineOffset)?.top || outlineOffset;\n  const outlineOffsetBottom = (outlineOffset as FocusOutlineOffset)?.bottom || outlineOffset;\n  const outlineOffsetLeft = (outlineOffset as FocusOutlineOffset)?.left || outlineOffset;\n  const outlineOffsetRight = (outlineOffset as FocusOutlineOffset)?.right || outlineOffset;\n\n  return {\n    borderColor: 'transparent',\n    ':after': {\n      content: '\"\"',\n      position: 'absolute',\n      pointerEvents: 'none',\n      boxSizing: 'outline-box',\n      zIndex: 1,\n\n      borderStyle: 'solid',\n      borderWidth: outlineWidth,\n      borderRadius: outlineRadius,\n      borderColor: outlineColor,\n\n      top: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetTop})`,\n      bottom: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetBottom})`,\n      left: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetLeft})`,\n      right: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetRight})`,\n    },\n  };\n};\n\nexport interface CreateFocusIndicatorStyleRuleOptions {\n  selector?: 'focus' | 'focus-within';\n}\n\nconst defaultOptions: CreateFocusIndicatorStyleRuleOptions = {\n  selector: 'focus',\n};\n\n/**\n * NOTE: The element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param theme - Theme used in @see makeStyles\n * @param options - Configure the style of the focus outline\n * @returns focus outline styles object for @see makeStyles\n */\nexport const createFocusOutlineStyle = (\n  options: {\n    style: Partial<FocusOutlineStyleOptions>;\n  } & CreateFocusIndicatorStyleRuleOptions = { style: {}, ...defaultOptions },\n): GriffelStyle => ({\n  ':focus-visible': {\n    outlineStyle: 'none',\n  },\n  [`${KEYBOARD_NAV_SELECTOR} :${options.selector || defaultOptions.selector}`]: getFocusOutlineStyles({\n    outlineColor: tokens.colorStrokeFocus2,\n    outlineRadius: tokens.borderRadiusMedium,\n    // FIXME: tokens.strokeWidthThick causes some weird bugs\n    outlineWidth: '2px',\n    ...options.style,\n  }),\n});\n\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes\n */\nexport const createCustomFocusIndicatorStyle = (\n  style: GriffelStyle,\n  options: CreateFocusIndicatorStyleRuleOptions = defaultOptions,\n): GriffelStyle => ({\n  ':focus-visible': {\n    outlineStyle: 'none',\n  },\n  [`${KEYBOARD_NAV_SELECTOR} :${options.selector || defaultOptions.selector}`]: style,\n});\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["hooks/useFocusIndicatorStyle.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { KEYBOARD_NAV_SELECTOR } from '../symbols';\nimport { shorthands } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\n\nexport type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;\nexport type FocusOutlineStyleOptions = {\n  /**\n   * Only property not supported by the native CSS `outline`, if this is no longer needed\n   * we can just go native instead\n   */\n  outlineRadius: string;\n  outlineColor: string;\n  outlineWidth: string;\n  outlineOffset?: string | FocusOutlineOffset;\n};\n\n/**\n * NOTE: the element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configures the style of the focus outline\n * @returns focus outline styles object\n */\nconst getFocusOutlineStyles = (options: FocusOutlineStyleOptions): GriffelStyle => {\n  const { outlineRadius, outlineColor, outlineOffset, outlineWidth } = options;\n\n  const outlineOffsetTop = (outlineOffset as FocusOutlineOffset)?.top || outlineOffset;\n  const outlineOffsetBottom = (outlineOffset as FocusOutlineOffset)?.bottom || outlineOffset;\n  const outlineOffsetLeft = (outlineOffset as FocusOutlineOffset)?.left || outlineOffset;\n  const outlineOffsetRight = (outlineOffset as FocusOutlineOffset)?.right || outlineOffset;\n\n  return {\n    ...shorthands.borderColor('transparent'),\n    ':after': {\n      content: '\"\"',\n      position: 'absolute',\n      pointerEvents: 'none',\n      zIndex: 1,\n\n      ...shorthands.borderStyle('solid'),\n      ...shorthands.borderWidth(outlineWidth),\n      ...shorthands.borderRadius(outlineRadius),\n      ...shorthands.borderColor(outlineColor),\n\n      top: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetTop})`,\n      bottom: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetBottom})`,\n      left: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetLeft})`,\n      right: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetRight})`,\n    },\n  };\n};\n\nexport interface CreateFocusIndicatorStyleRuleOptions {\n  selector?: 'focus' | 'focus-within';\n}\n\nconst defaultOptions: CreateFocusIndicatorStyleRuleOptions = {\n  selector: 'focus',\n};\n\n/**\n * NOTE: The element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configure the style of the focus outline\n * @returns focus outline styles object for @see makeStyles\n */\nexport const createFocusOutlineStyle = (\n  options: {\n    style: Partial<FocusOutlineStyleOptions>;\n  } & CreateFocusIndicatorStyleRuleOptions = { style: {}, ...defaultOptions },\n): GriffelStyle => ({\n  ':focus-visible': {\n    outlineStyle: 'none',\n  },\n  [`${KEYBOARD_NAV_SELECTOR} :${options.selector || defaultOptions.selector}`]: getFocusOutlineStyles({\n    outlineColor: tokens.colorStrokeFocus2,\n    outlineRadius: tokens.borderRadiusMedium,\n    // FIXME: tokens.strokeWidthThick causes some weird bugs\n    outlineWidth: '2px',\n    ...options.style,\n  }),\n});\n\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes\n * @param options - Configure the style of the focus outline\n */\nexport const createCustomFocusIndicatorStyle = (\n  style: GriffelStyle,\n  options: CreateFocusIndicatorStyleRuleOptions = defaultOptions,\n): GriffelStyle => ({\n  ':focus-visible': {\n    outlineStyle: 'none',\n  },\n  [`${KEYBOARD_NAV_SELECTOR} :${options.selector || defaultOptions.selector}`]: style,\n});\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["hooks/useFocusableGroup.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AASA;;;AAGG;;;AACI,MAAM,iBAAiB,GAAI,OAAD,IAAuC;AACtE,QAAM,OAAO,GAAG,YAAA,CAAA,UAAA,EAAhB;;AAEA,MAAI,OAAJ,EAAa;AACX,IAAA,SAAA,CAAA,WAAA,CAAY,OAAZ;AACD;;AAED,SAAO,sBAAA,CAAA,oBAAA,CAAqB;AAC1B,IAAA,QAAQ,EAAE;AACR,MAAA,WAAW,EAAE,cAAc,CAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,WAAV;AADnB;AADgB,GAArB,CAAP;AAKD,CAZM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB;;AAcb,MAAM,cAAc,GAClB,WADqB,IAEoB;AACzC,UAAQ,WAAR;AACE,SAAK,WAAL;AACE,aAAO,SAAA,CAAA,KAAA,CAAM,qBAAN,CAA4B,SAAnC;;AACF,SAAK,SAAL;AACE,aAAO,SAAA,CAAA,KAAA,CAAM,qBAAN,CAA4B,OAAnC;;AACF,SAAK,kBAAL;AACE,aAAO,SAAA,CAAA,KAAA,CAAM,qBAAN,CAA4B,gBAAnC;;AACF;AACE,aAAO,SAAP;AARJ;AAUD,CAbD","sourcesContent":["import { Types, getGroupper } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseFocusableGroupOptions {\n  /**\n   * Behavior for the Tab key.\n   */\n  tabBehavior?: 'unlimited' | 'limited' | 'limitedTrapFocus';\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support groupping.\n * @param options - Options to configure keyboard navigation\n */\nexport const useFocusableGroup = (options?: UseFocusableGroupOptions) => {\n  const tabster = useTabster();\n\n  if (tabster) {\n    getGroupper(tabster);\n  }\n\n  return useTabsterAttributes({\n    groupper: {\n      tabbability: getTabbability(options?.tabBehavior),\n    },\n  });\n};\n\nconst getTabbability = (\n  tabBehavior?: UseFocusableGroupOptions['tabBehavior'],\n): Types.GroupperTabbability | undefined => {\n  switch (tabBehavior) {\n    case 'unlimited':\n      return Types.GroupperTabbabilities.Unlimited;\n    case 'limited':\n      return Types.GroupperTabbabilities.Limited;\n    case 'limitedTrapFocus':\n      return Types.GroupperTabbabilities.LimitedTrapFocus;\n    default:\n      return undefined;\n  }\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["hooks/useFocusableGroup.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AASA;;;AAGG;;;AACI,MAAM,iBAAiB,GAAI,OAAD,IAAkE;AACjG,QAAM,OAAO,GAAG,YAAA,CAAA,UAAA,EAAhB;;AAEA,MAAI,OAAJ,EAAa;AACX,IAAA,SAAA,CAAA,WAAA,CAAY,OAAZ;AACD;;AAED,SAAO,sBAAA,CAAA,oBAAA,CAAqB;AAC1B,IAAA,QAAQ,EAAE;AACR,MAAA,WAAW,EAAE,cAAc,CAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,WAAV;AADnB;AADgB,GAArB,CAAP;AAKD,CAZM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB;;AAcb,MAAM,cAAc,GAClB,WADqB,IAEoB;AACzC,UAAQ,WAAR;AACE,SAAK,WAAL;AACE,aAAO,SAAA,CAAA,KAAA,CAAM,qBAAN,CAA4B,SAAnC;;AACF,SAAK,SAAL;AACE,aAAO,SAAA,CAAA,KAAA,CAAM,qBAAN,CAA4B,OAAnC;;AACF,SAAK,kBAAL;AACE,aAAO,SAAA,CAAA,KAAA,CAAM,qBAAN,CAA4B,gBAAnC;;AACF;AACE,aAAO,SAAP;AARJ;AAUD,CAbD","sourcesContent":["import { Types, getGroupper } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseFocusableGroupOptions {\n  /**\n   * Behavior for the Tab key.\n   */\n  tabBehavior?: 'unlimited' | 'limited' | 'limitedTrapFocus';\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support groupping.\n * @param options - Options to configure keyboard navigation\n */\nexport const useFocusableGroup = (options?: UseFocusableGroupOptions): Types.TabsterDOMAttribute => {\n  const tabster = useTabster();\n\n  if (tabster) {\n    getGroupper(tabster);\n  }\n\n  return useTabsterAttributes({\n    groupper: {\n      tabbability: getTabbability(options?.tabBehavior),\n    },\n  });\n};\n\nconst getTabbability = (\n  tabBehavior?: UseFocusableGroupOptions['tabBehavior'],\n): Types.GroupperTabbability | undefined => {\n  switch (tabBehavior) {\n    case 'unlimited':\n      return Types.GroupperTabbabilities.Unlimited;\n    case 'limited':\n      return Types.GroupperTabbabilities.Limited;\n    case 'limitedTrapFocus':\n      return Types.GroupperTabbabilities.LimitedTrapFocus;\n    default:\n      return undefined;\n  }\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/index.d.ts

@@ -1 +1,2 @@
-export * from './hooks/index';
+export { createCustomFocusIndicatorStyle, createFocusOutlineStyle, useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes, } from './hooks/index';
+export type { CreateFocusIndicatorStyleRuleOptions, FocusOutlineOffset, FocusOutlineStyleOptions, UseArrowNavigationGroupOptions, UseFocusableGroupOptions, UseModalAttributesOptions, } from './hooks/index';

package/lib-commonjs/index.js

@@ -3,8 +3,56 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.useTabsterAttributes = exports.useModalAttributes = exports.useKeyboardNavAttribute = exports.useFocusFinders = exports.useFocusableGroup = exports.useArrowNavigationGroup = exports.createFocusOutlineStyle = exports.createCustomFocusIndicatorStyle = void 0;
 
-const tslib_1 = /*#__PURE__*/require("tslib");
+var index_1 = /*#__PURE__*/require("./hooks/index");
 
-tslib_1.__exportStar(require("./hooks/index"), exports);
+Object.defineProperty(exports, "createCustomFocusIndicatorStyle", {
+  enumerable: true,
+  get: function () {
+    return index_1.createCustomFocusIndicatorStyle;
+  }
+});
+Object.defineProperty(exports, "createFocusOutlineStyle", {
+  enumerable: true,
+  get: function () {
+    return index_1.createFocusOutlineStyle;
+  }
+});
+Object.defineProperty(exports, "useArrowNavigationGroup", {
+  enumerable: true,
+  get: function () {
+    return index_1.useArrowNavigationGroup;
+  }
+});
+Object.defineProperty(exports, "useFocusableGroup", {
+  enumerable: true,
+  get: function () {
+    return index_1.useFocusableGroup;
+  }
+});
+Object.defineProperty(exports, "useFocusFinders", {
+  enumerable: true,
+  get: function () {
+    return index_1.useFocusFinders;
+  }
+});
+Object.defineProperty(exports, "useKeyboardNavAttribute", {
+  enumerable: true,
+  get: function () {
+    return index_1.useKeyboardNavAttribute;
+  }
+});
+Object.defineProperty(exports, "useModalAttributes", {
+  enumerable: true,
+  get: function () {
+    return index_1.useModalAttributes;
+  }
+});
+Object.defineProperty(exports, "useTabsterAttributes", {
+  enumerable: true,
+  get: function () {
+    return index_1.useTabsterAttributes;
+  }
+});
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './hooks/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iCAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,+BAAA;AAA+B;AAA/B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,iBAAA;AAAiB;AAAjB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,kBAAA;AAAkB;AAAlB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA","sourcesContent":["export {\n  createCustomFocusIndicatorStyle,\n  createFocusOutlineStyle,\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useFocusFinders,\n  useKeyboardNavAttribute,\n  useModalAttributes,\n  useTabsterAttributes,\n} from './hooks/index';\nexport type {\n  CreateFocusIndicatorStyleRuleOptions,\n  FocusOutlineOffset,\n  FocusOutlineStyleOptions,\n  UseArrowNavigationGroupOptions,\n  UseFocusableGroupOptions,\n  UseModalAttributesOptions,\n} from './hooks/index';\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabster",
-  "version": "9.0.0-rc.4",
+  "version": "9.0.0-rc.7",
   "description": "Utilities for focus management and facade for tabster",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -15,6 +15,7 @@
     "build": "just-scripts build",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
+    "e2e": "e2e",
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "storybook": "node ../../scripts/storybook/runner",
@@ -26,21 +27,15 @@
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/scripts": "^1.0.0",
-    "@types/react": "16.9.42",
-    "@types/react-dom": "16.9.10",
-    "@types/react-test-renderer": "^16.0.0",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
-    "react-test-renderer": "^16.3.0"
+    "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@griffel/react": "1.0.0",
-    "@fluentui/react-shared-contexts": "9.0.0-rc.3",
-    "@fluentui/react-theme": "9.0.0-rc.3",
-    "@fluentui/react-utilities": "9.0.0-rc.4",
+    "@griffel/react": "1.0.3",
+    "@fluentui/react-shared-contexts": "9.0.0-rc.5",
+    "@fluentui/react-theme": "9.0.0-rc.5",
+    "@fluentui/react-utilities": "9.0.0-rc.6",
     "keyborg": "^1.1.0",
-    "tabster": "^1.1.1",
+    "tabster": "^1.3.3",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
@@ -55,5 +50,12 @@
       "minor",
       "patch"
     ]
+  },
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib-commonjs/index.js"
+    }
   }
 }