@fluentui/react-tabster 0.0.0-nightly-20220715-0418.1 → 0.0.0-nightly-20221007-1528.1

package/CHANGELOG.json

@@ -2,13 +2,13 @@
   "name": "@fluentui/react-tabster",
   "entries": [
     {
-      "date": "Fri, 15 Jul 2022 04:31:47 GMT",
-      "tag": "@fluentui/react-tabster_v0.0.0-nightly-20220715-0418.1",
-      "version": "0.0.0-nightly-20220715-0418.1",
+      "date": "Fri, 07 Oct 2022 15:35:00 GMT",
+      "tag": "@fluentui/react-tabster_v0.0.0-nightly-20221007-1528.1",
+      "version": "0.0.0-nightly-20221007-1528.1",
       "comments": {
         "prerelease": [
           {
-            "author": "email not defined",
+            "author": "fluentui-internal@service.microsoft.com",
             "package": "@fluentui/react-tabster",
             "commit": "not available",
             "comment": "Release nightly v9"
@@ -16,20 +16,149 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-tabster",
-            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20220715-0418.1",
-            "commit": "e1949f7a18e758e415b4740eda5f84bb8ae19e02"
+            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20221007-1528.1",
+            "commit": "827197046ec2b195a8997fadbb514a5693234e6b"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-tabster",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220715-0418.1",
-            "commit": "e1949f7a18e758e415b4740eda5f84bb8ae19e02"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221007-1528.1",
+            "commit": "827197046ec2b195a8997fadbb514a5693234e6b"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-tabster",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220715-0418.1",
-            "commit": "e1949f7a18e758e415b4740eda5f84bb8ae19e02"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221007-1528.1",
+            "commit": "827197046ec2b195a8997fadbb514a5693234e6b"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 03 Oct 2022 22:24:41 GMT",
+      "tag": "@fluentui/react-tabster_v9.1.2",
+      "version": "9.1.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "5129090c2dedbaf91b8441898788413992c556e3",
+            "comment": "fix: focus outline selectors are data attributes"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 15 Sep 2022 09:49:31 GMT",
+      "tag": "@fluentui/react-tabster_v9.1.1",
+      "version": "9.1.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "e4d50f2c501c4a8be23b24373242f650a601fdaf",
+            "comment": "fix: Remove provider classname from focus styles"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "e2b71230d03f2cf03eff3cda02484dfcb72e9c51",
+            "comment": "fix: Bumps tabster to 2.1.2 and removes deep import for KeyborgCallback"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "f1f4ab4ac21226c8f6729ca263ca09c1ec9b76f2",
+            "comment": "chore: Exports `applyFocusVisible` as internal"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "e610024474cfe5d45f61501a8b6a21daf4c794a2",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.0.1",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-theme to v9.1.0",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-utilities to v9.1.0",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          }
+        ],
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "ba9444d594f3a960cc590eae5237c08bf7c5a07f",
+            "comment": "chore: consume cypress.config from it's package boundary"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "16aa65dcae8f75c6a221225fd0eb43800650ac66",
+            "comment": "docs: re-generate api.md files"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "e6cf183695d6d67a24e038c49a876224e5ed35e5",
+            "comment": "chore: update package scaffold"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 03 Aug 2022 16:04:04 GMT",
+      "tag": "@fluentui/react-tabster_v9.1.0",
+      "version": "9.1.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "b9e6c6a7dd8ce6111744739a0ec486b99c2bb2ea",
+            "comment": "chore: Bump tabster to 2.1.0"
+          },
+          {
+            "author": "miroslav.stastny@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "08563664778fd80284561d3c9d254307a0a32362",
+            "comment": "chore: Bump Griffel dependencies"
+          }
+        ],
+        "minor": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "2756c649a83c0fa0a20b82c62855d388a5e6bc2a",
+            "comment": "feat: Adds `ignoreDefaultKeydown` option to `useArrowNavigationGroup`"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "71590ea6aeab8ce24d8c8e50e0ee80ece81a4392",
+            "comment": "feat: create `:focus-visible` and `:focus-within` polyfills"
+          }
+        ],
+        "none": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "99cc385631d04a76ee10ebc143cb9fecd99640b6",
+            "comment": "chore: Add `prerelease` as disallowed changetype for 9.0.0 packages"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,20 +1,59 @@
 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Fri, 15 Jul 2022 04:31:47 GMT and should not be manually modified.
+This log was last generated on Fri, 07 Oct 2022 15:35:00 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20220715-0418.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v0.0.0-nightly-20220715-0418.1)
+## [0.0.0-nightly-20221007-1528.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v0.0.0-nightly-20221007-1528.1)
 
-Fri, 15 Jul 2022 04:31:47 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.3..@fluentui/react-tabster_v0.0.0-nightly-20220715-0418.1)
+Fri, 07 Oct 2022 15:35:00 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.1.2..@fluentui/react-tabster_v0.0.0-nightly-20221007-1528.1)
 
 ### Changes
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by email not defined)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20220715-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/e1949f7a18e758e415b4740eda5f84bb8ae19e02) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20220715-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/e1949f7a18e758e415b4740eda5f84bb8ae19e02) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20220715-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/e1949f7a18e758e415b4740eda5f84bb8ae19e02) by beachball)
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20221007-1528.1 ([commit](https://github.com/microsoft/fluentui/commit/827197046ec2b195a8997fadbb514a5693234e6b) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20221007-1528.1 ([commit](https://github.com/microsoft/fluentui/commit/827197046ec2b195a8997fadbb514a5693234e6b) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20221007-1528.1 ([commit](https://github.com/microsoft/fluentui/commit/827197046ec2b195a8997fadbb514a5693234e6b) by beachball)
+
+## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.1.2)
+
+Mon, 03 Oct 2022 22:24:41 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.1.1..@fluentui/react-tabster_v9.1.2)
+
+### Patches
+
+- fix: focus outline selectors are data attributes ([PR #24994](https://github.com/microsoft/fluentui/pull/24994) by lingfangao@hotmail.com)
+
+## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.1.1)
+
+Thu, 15 Sep 2022 09:49:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.1.0..@fluentui/react-tabster_v9.1.1)
+
+### Patches
+
+- fix: Remove provider classname from focus styles ([PR #24710](https://github.com/microsoft/fluentui/pull/24710) by lingfangao@hotmail.com)
+- fix: Bumps tabster to 2.1.2 and removes deep import for KeyborgCallback ([PR #24376](https://github.com/microsoft/fluentui/pull/24376) by lingfangao@hotmail.com)
+- chore: Exports `applyFocusVisible` as internal ([PR #24712](https://github.com/microsoft/fluentui/pull/24712) by lingfangao@hotmail.com)
+- chore: Update Griffel to latest version ([PR #24221](https://github.com/microsoft/fluentui/pull/24221) by olfedias@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.0.1 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-theme to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-utilities to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+
+## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.1.0)
+
+Wed, 03 Aug 2022 16:04:04 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.3..@fluentui/react-tabster_v9.1.0)
+
+### Minor changes
+
+- feat: Adds `ignoreDefaultKeydown` option to `useArrowNavigationGroup` ([PR #24101](https://github.com/microsoft/fluentui/pull/24101) by lingfangao@hotmail.com)
+- feat: create `:focus-visible` and `:focus-within` polyfills ([PR #24154](https://github.com/microsoft/fluentui/pull/24154) by lingfangao@hotmail.com)
+
+### Patches
+
+- chore: Bump tabster to 2.1.0 ([PR #23811](https://github.com/microsoft/fluentui/pull/23811) by lingfangao@hotmail.com)
+- chore: Bump Griffel dependencies ([PR #24114](https://github.com/microsoft/fluentui/pull/24114) by miroslav.stastny@microsoft.com)
 
 ## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.3)
 

package/dist/index.d.ts

@@ -1,7 +1,15 @@
 import type { GriffelStyle } from '@griffel/react';
+import * as React_2 from 'react';
 import type { RefObject } from 'react';
 import { Types } from 'tabster';
 
+/**
+ * @internal
+ * @param scope - Applies the ponyfill to all DOM children
+ * @param win - window
+ */
+export declare function applyFocusVisiblePolyfill(scope: HTMLElement, win: Window): () => void;
+
 /**
  * Creates a style for @see makeStyles that includes the necessary selectors for focus.
  * Should be used only when @see createFocusOutlineStyle does not fit requirements
@@ -45,7 +53,7 @@ export declare type FocusOutlineStyleOptions = {
  * A hook that returns the necessary tabster attributes to support arrow key navigation
  * @param options - Options to configure keyboard navigation
  */
-export declare const useArrowNavigationGroup: (options?: UseArrowNavigationGroupOptions | undefined) => Types.TabsterDOMAttribute;
+export declare const useArrowNavigationGroup: (options?: UseArrowNavigationGroupOptions) => Types.TabsterDOMAttribute;
 
 export declare interface UseArrowNavigationGroupOptions {
     /**
@@ -66,6 +74,10 @@ export declare interface UseArrowNavigationGroupOptions {
      * Allow tabbing within the arrow navigation group items.
      */
     tabbable?: boolean;
+    /**
+     * Tabster should ignore default handling of keydown events
+     */
+    ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];
 }
 
 /**
@@ -92,6 +104,15 @@ export declare const useFocusFinders: () => {
     findPrevFocusable: (currentElement: HTMLElement, options?: Pick<Types.FindNextProps, 'container'>) => HTMLElement | null | undefined;
 };
 
+export declare function useFocusVisible<TElement extends HTMLElement = HTMLElement>(): React_2.RefObject<TElement>;
+
+/**
+ * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation
+ * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151
+ * @returns ref to the element that uses `:focus-within` styles
+ */
+export declare function useFocusWithin<TElement extends HTMLElement = HTMLElement>(): React_2.RefObject<TElement>;
+
 /**
  * Instantiates [keyborg](https://github.com/microsoft/keyborg) and adds `data-keyboard-nav`
  * attribute to a referenced element to ensure keyboard navigation awareness

package/lib/focus/constants.js

@@ -1,5 +1,15 @@
 export const KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav';
 export const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])`;
+/**
+ * @internal
+ */
+
+export const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';
+/**
+ * @internal
+ */
+
+export const FOCUS_WITHIN_ATTR = 'data-fui-focus-visible';
 export const defaultOptions = {
   style: {},
   selector: 'focus'

package/lib/focus/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["focus/constants.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,sBAAsB,GAAG,mBAA/B;AACP,OAAO,MAAM,qBAAqB,GAAG,YAAY,sBAAsB,IAAhE;AACP,OAAO,MAAM,cAAc,GAAG;EAC5B,KAAK,EAAE,EADqB;EAE5B,QAAQ,EAAE;AAFkB,CAAvB","sourcesContent":["export const KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav' as const;\nexport const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])` as const;\nexport const defaultOptions = {\n  style: {},\n  selector: 'focus',\n} as const;\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../src/focus/constants.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,sBAAsB,GAAG,mBAA/B;AACP,OAAO,MAAM,qBAAqB,GAAG,YAAY,sBAAsB,IAAhE;AAEP;;AAEG;;AACH,OAAO,MAAM,kBAAkB,GAAG,wBAA3B;AAEP;;AAEG;;AACH,OAAO,MAAM,iBAAiB,GAAG,wBAA1B;AACP,OAAO,MAAM,cAAc,GAAG;EAC5B,KAAK,EAAE,EADqB;EAE5B,QAAQ,EAAE;AAFkB,CAAvB","sourcesContent":["export const KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav' as const;\nexport const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])` as const;\n\n/**\n * @internal\n */\nexport const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';\n\n/**\n * @internal\n */\nexport const FOCUS_WITHIN_ATTR = 'data-fui-focus-visible';\nexport const defaultOptions = {\n  style: {},\n  selector: 'focus',\n} as const;\n"],"sourceRoot":""}

package/lib/focus/createCustomFocusIndicatorStyle.js

@@ -1,4 +1,4 @@
-import { KEYBOARD_NAV_SELECTOR, defaultOptions } from './constants';
+import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';
 /**
  * Creates a style for @see makeStyles that includes the necessary selectors for focus.
  * Should be used only when @see createFocusOutlineStyle does not fit requirements
@@ -13,6 +13,14 @@ export const createCustomFocusIndicatorStyle = (style, {
   ':focus': {
     outlineStyle: 'none'
   },
-  [`${KEYBOARD_NAV_SELECTOR} :${selector}`]: style
+  ':focus-visible': {
+    outlineStyle: 'none'
+  },
+  ...(selector === 'focus' && {
+    [`&[${FOCUS_VISIBLE_ATTR}]`]: style
+  }),
+  ...(selector === 'focus-within' && {
+    [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style
+  })
 });
 //# sourceMappingURL=createCustomFocusIndicatorStyle.js.map

package/lib/focus/createCustomFocusIndicatorStyle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":"AAAA,SAAS,qBAAT,EAAgC,cAAhC,QAAsD,aAAtD;AAOA;;;;;;AAMG;;AACH,OAAO,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C;EAAE,QAAQ,GAAG,cAAc,CAAC;AAA5B,IAAiF,cAFpC,MAG3B;EAClB,UAAU;IACR,YAAY,EAAE;EADN,CADQ;EAIlB,CAAC,GAAG,qBAAqB,KAAK,QAAQ,EAAtC,GAA2C;AAJzB,CAH2B,CAAxC","sourcesContent":["import { KEYBOARD_NAV_SELECTOR, defaultOptions } from './constants';\nimport type { GriffelStyle } from '@griffel/react';\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n  selector?: 'focus' | 'focus-within';\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  { selector = defaultOptions.selector }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): GriffelStyle => ({\n  ':focus': {\n    outlineStyle: 'none',\n  },\n  [`${KEYBOARD_NAV_SELECTOR} :${selector}`]: style,\n});\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../src/focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":"AAAA,SAAS,cAAT,EAAyB,kBAAzB,EAA6C,iBAA7C,QAAsE,aAAtE;AAOA;;;;;;AAMG;;AACH,OAAO,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C;EAAE,QAAQ,GAAG,cAAc,CAAC;AAA5B,IAAiF,cAFpC,MAG3B;EAClB,UAAU;IACR,YAAY,EAAE;EADN,CADQ;EAIlB,kBAAkB;IAChB,YAAY,EAAE;EADE,CAJA;EAQlB,IAAI,QAAQ,KAAK,OAAb,IAAwB;IAC1B,CAAC,KAAK,kBAAkB,GAAxB,GAA8B;EADJ,CAA5B,CARkB;EAWlB,IAAI,QAAQ,KAAK,cAAb,IAA+B;IACjC,CAAC,KAAK,iBAAiB,KAAK,QAAQ,EAApC,GAAyC;EADR,CAAnC;AAXkB,CAH2B,CAAxC","sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\nimport type { GriffelStyle } from '@griffel/react';\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n  selector?: 'focus' | 'focus-within';\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  { selector = defaultOptions.selector }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): GriffelStyle => ({\n  ':focus': {\n    outlineStyle: 'none',\n  },\n  ':focus-visible': {\n    outlineStyle: 'none',\n  },\n\n  ...(selector === 'focus' && {\n    [`&[${FOCUS_VISIBLE_ATTR}]`]: style,\n  }),\n  ...(selector === 'focus-within' && {\n    [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style,\n  }),\n});\n"],"sourceRoot":""}

package/lib/focus/createFocusOutlineStyle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["focus/createFocusOutlineStyle.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,UAAT,QAA2B,gBAA3B;AAEA,SACE,+BADF,QAGO,mCAHP;AAIA,SAAS,cAAT,QAA+B,aAA/B;AAiBA;;;;;;AAMG;;AACH,MAAM,qBAAqB,GAAI,OAAD,IAAoD;;;EAChF,MAAM;IAAE,aAAF;IAAiB,YAAjB;IAA+B,aAA/B;IAA8C;EAA9C,IAA+D,OAArE;EAEA,MAAM,gBAAgB,GAAG,CAAA,CAAA,EAAA,GAAC,aAAD,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,KAAA,CAArC,GAAqC,EAAA,CAAE,GAAvC,KAA8C,aAAvE;EACA,MAAM,mBAAmB,GAAG,CAAA,CAAA,EAAA,GAAC,aAAD,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,KAAA,CAArC,GAAqC,EAAA,CAAE,MAAvC,KAAiD,aAA7E;EACA,MAAM,iBAAiB,GAAG,CAAA,CAAA,EAAA,GAAC,aAAD,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,KAAA,CAArC,GAAqC,EAAA,CAAE,IAAvC,KAA+C,aAAzE;EACA,MAAM,kBAAkB,GAAG,CAAA,CAAA,EAAA,GAAC,aAAD,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,KAAA,CAArC,GAAqC,EAAA,CAAE,KAAvC,KAAgD,aAA3E;EAEA,OAAO,EACL,GAAG,UAAU,CAAC,WAAX,CAAuB,aAAvB,CADE;IAEL,WAAW;MACT,OAAO,EAAE,IADA;MAET,QAAQ,EAAE,UAFD;MAGT,aAAa,EAAE,MAHN;MAIT,MAAM,EAAE,CAJC;MAMT,GAAG,UAAU,CAAC,WAAX,CAAuB,OAAvB,CANM;MAOT,GAAG,UAAU,CAAC,WAAX,CAAuB,YAAvB,CAPM;MAQT,GAAG,UAAU,CAAC,YAAX,CAAwB,aAAxB,CARM;MAST,GAAG,UAAU,CAAC,WAAX,CAAuB,YAAvB,CATM;MAWT,GAAG,EAAE,CAAC,aAAD,GAAiB,IAAI,YAAY,EAAjC,GAAsC,cAAc,YAAY,MAAM,gBAAgB,GAXlF;MAYT,MAAM,EAAE,CAAC,aAAD,GAAiB,IAAI,YAAY,EAAjC,GAAsC,cAAc,YAAY,MAAM,mBAAmB,GAZxF;MAaT,IAAI,EAAE,CAAC,aAAD,GAAiB,IAAI,YAAY,EAAjC,GAAsC,cAAc,YAAY,MAAM,iBAAiB,GAbpF;MAcT,KAAK,EAAE,CAAC,aAAD,GAAiB,IAAI,YAAY,EAAjC,GAAsC,cAAc,YAAY,MAAM,kBAAkB;IAdtF;EAFN,CAAP;AAmBD,CA3BD;AA6BA;;;;;;AAMG;;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC;EACtC,QAAQ,GAAG,cAAc,CAAC,QADY;EAEtC,KAAK,GAAG,cAAc,CAAC;AAFe,IAGJ,cAHG,KAIrC,+BAA+B,CAC7B,qBAAqB,CAAC;EACpB,YAAY,EAAE,MAAM,CAAC,iBADD;EAEpB,aAAa,EAAE,MAAM,CAAC,kBAFF;EAGpB;EACA,YAAY,EAAE,KAJM;EAKpB,GAAG;AALiB,CAAD,CADQ,EAQ7B;EAAE;AAAF,CAR6B,CAJ1B","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\nimport {\n  createCustomFocusIndicatorStyle,\n  CreateCustomFocusIndicatorStyleOptions,\n} from './createCustomFocusIndicatorStyle';\nimport { defaultOptions } from './constants';\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};\nexport interface CreateFocusOutlineStyleOptions extends CreateCustomFocusIndicatorStyleOptions {\n  style?: Partial<FocusOutlineStyleOptions>;\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\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  selector = defaultOptions.selector,\n  style = defaultOptions.style,\n}: CreateFocusOutlineStyleOptions = defaultOptions): GriffelStyle =>\n  createCustomFocusIndicatorStyle(\n    getFocusOutlineStyles({\n      outlineColor: tokens.colorStrokeFocus2,\n      outlineRadius: tokens.borderRadiusMedium,\n      // FIXME: tokens.strokeWidthThick causes some weird bugs\n      outlineWidth: '2px',\n      ...style,\n    }),\n    { selector },\n  );\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../src/focus/createFocusOutlineStyle.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,UAAT,QAA2B,gBAA3B;AAEA,SACE,+BADF,QAGO,mCAHP;AAIA,SAAS,cAAT,QAA+B,aAA/B;AAiBA;;;;;;AAMG;;AACH,MAAM,qBAAqB,GAAI,OAAD,IAAoD;;;EAChF,MAAM;IAAE,aAAF;IAAiB,YAAjB;IAA+B,aAA/B;IAA8C;EAA9C,IAA+D,OAArE;EAEA,MAAM,gBAAgB,GAAG,CAAA,CAAA,EAAA,GAAC,aAAD,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,KAAA,CAArC,GAAqC,EAAA,CAAE,GAAvC,KAA8C,aAAvE;EACA,MAAM,mBAAmB,GAAG,CAAA,CAAA,EAAA,GAAC,aAAD,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,KAAA,CAArC,GAAqC,EAAA,CAAE,MAAvC,KAAiD,aAA7E;EACA,MAAM,iBAAiB,GAAG,CAAA,CAAA,EAAA,GAAC,aAAD,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,KAAA,CAArC,GAAqC,EAAA,CAAE,IAAvC,KAA+C,aAAzE;EACA,MAAM,kBAAkB,GAAG,CAAA,CAAA,EAAA,GAAC,aAAD,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,KAAA,CAArC,GAAqC,EAAA,CAAE,KAAvC,KAAgD,aAA3E;EAEA,OAAO,EACL,GAAG,UAAU,CAAC,WAAX,CAAuB,aAAvB,CADE;IAEL,WAAW;MACT,OAAO,EAAE,IADA;MAET,QAAQ,EAAE,UAFD;MAGT,aAAa,EAAE,MAHN;MAIT,MAAM,EAAE,CAJC;MAMT,GAAG,UAAU,CAAC,WAAX,CAAuB,OAAvB,CANM;MAOT,GAAG,UAAU,CAAC,WAAX,CAAuB,YAAvB,CAPM;MAQT,GAAG,UAAU,CAAC,YAAX,CAAwB,aAAxB,CARM;MAST,GAAG,UAAU,CAAC,WAAX,CAAuB,YAAvB,CATM;MAWT,GAAG,EAAE,CAAC,aAAD,GAAiB,IAAI,YAAY,EAAjC,GAAsC,cAAc,YAAY,MAAM,gBAAgB,GAXlF;MAYT,MAAM,EAAE,CAAC,aAAD,GAAiB,IAAI,YAAY,EAAjC,GAAsC,cAAc,YAAY,MAAM,mBAAmB,GAZxF;MAaT,IAAI,EAAE,CAAC,aAAD,GAAiB,IAAI,YAAY,EAAjC,GAAsC,cAAc,YAAY,MAAM,iBAAiB,GAbpF;MAcT,KAAK,EAAE,CAAC,aAAD,GAAiB,IAAI,YAAY,EAAjC,GAAsC,cAAc,YAAY,MAAM,kBAAkB;IAdtF;EAFN,CAAP;AAmBD,CA3BD;AA6BA;;;;;;AAMG;;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC;EACtC,QAAQ,GAAG,cAAc,CAAC,QADY;EAEtC,KAAK,GAAG,cAAc,CAAC;AAFe,IAGJ,cAHG,KAIrC,+BAA+B,CAC7B,qBAAqB,CAAC;EACpB,YAAY,EAAE,MAAM,CAAC,iBADD;EAEpB,aAAa,EAAE,MAAM,CAAC,kBAFF;EAGpB;EACA,YAAY,EAAE,KAJM;EAKpB,GAAG;AALiB,CAAD,CADQ,EAQ7B;EAAE;AAAF,CAR6B,CAJ1B","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\nimport {\n  createCustomFocusIndicatorStyle,\n  CreateCustomFocusIndicatorStyleOptions,\n} from './createCustomFocusIndicatorStyle';\nimport { defaultOptions } from './constants';\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};\nexport interface CreateFocusOutlineStyleOptions extends CreateCustomFocusIndicatorStyleOptions {\n  style?: Partial<FocusOutlineStyleOptions>;\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\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  selector = defaultOptions.selector,\n  style = defaultOptions.style,\n}: CreateFocusOutlineStyleOptions = defaultOptions): GriffelStyle =>\n  createCustomFocusIndicatorStyle(\n    getFocusOutlineStyles({\n      outlineColor: tokens.colorStrokeFocus2,\n      outlineRadius: tokens.borderRadiusMedium,\n      // FIXME: tokens.strokeWidthThick causes some weird bugs\n      outlineWidth: '2px',\n      ...style,\n    }),\n    { selector },\n  );\n"],"sourceRoot":""}

package/lib/focus/focusVisiblePolyfill.js

@@ -0,0 +1,90 @@
+import { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from 'keyborg';
+import { FOCUS_VISIBLE_ATTR } from './constants';
+/**
+ * @internal
+ * @param scope - Applies the ponyfill to all DOM children
+ * @param win - window
+ */
+
+export function applyFocusVisiblePolyfill(scope, win) {
+  if (alreadyInScope(scope)) {
+    // Focus visible polyfill already applied at this scope
+    return () => undefined;
+  }
+
+  const state = {
+    current: undefined
+  };
+  const keyborg = createKeyborg(win); // When navigation mode changes remove the focus-visible selector
+
+  keyborg.subscribe(isNavigatingWithKeyboard => {
+    if (!isNavigatingWithKeyboard && state.current) {
+      removeFocusVisibleClass(state.current);
+      state.current = undefined;
+    }
+  }); // Keyborg's focusin event is delegated so it's only registered once on the window
+  // and contains metadata about the focus event
+
+  const keyborgListener = e => {
+    if (state.current) {
+      removeFocusVisibleClass(state.current);
+      state.current = undefined;
+    }
+
+    if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target) && e.target) {
+      // Griffel can't create chained global styles so use the parent element for now
+      state.current = e.target;
+      applyFocusVisibleClass(state.current);
+    }
+  }; // Make sure that when focus leaves the scope, the focus visible class is removed
+
+
+  const blurListener = e => {
+    if (!e.relatedTarget || isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget)) {
+      if (state.current) {
+        removeFocusVisibleClass(state.current);
+        state.current = undefined;
+      }
+    }
+  };
+
+  scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener);
+  scope.addEventListener('focusout', blurListener);
+  scope.focusVisible = true; // Return disposer
+
+  return () => {
+    scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener);
+    scope.removeEventListener('focusout', blurListener);
+    delete scope.focusVisible;
+    disposeKeyborg(keyborg);
+  };
+}
+
+function applyFocusVisibleClass(el) {
+  el.setAttribute(FOCUS_VISIBLE_ATTR, '');
+}
+
+function removeFocusVisibleClass(el) {
+  el.removeAttribute(FOCUS_VISIBLE_ATTR);
+}
+
+function isHTMLElement(target) {
+  if (!target) {
+    return false;
+  }
+
+  return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);
+}
+
+function alreadyInScope(el) {
+  if (!el) {
+    return false;
+  }
+
+  if (el.focusVisible) {
+    return true;
+  }
+
+  return alreadyInScope(el === null || el === void 0 ? void 0 : el.parentElement);
+}
+//# sourceMappingURL=focusVisiblePolyfill.js.map

package/lib/focus/focusVisiblePolyfill.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/focus/focusVisiblePolyfill.ts"],"names":[],"mappings":"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","sourcesContent":["import { KEYBORG_FOCUSIN, KeyborgFocusInEvent, createKeyborg, disposeKeyborg } from 'keyborg';\nimport { FOCUS_VISIBLE_ATTR } from './constants';\n\n/**\n * Because `addEventListener` type override falls back to 2nd definition (evt name is unknown string literal)\n * evt is being typed as a base class of MouseEvent -> `Event`.\n * This type is used to override `listener` calls to make TS happy\n */\ntype ListenerOverride = (evt: Event) => void;\n\ntype FocusVisibleState = {\n  /**\n   * Current element with focus visible in state\n   */\n  current: HTMLElement | undefined;\n};\n\ntype HTMLElementWithFocusVisibleScope = {\n  focusVisible: boolean | undefined;\n} & HTMLElement;\n\n/**\n * @internal\n * @param scope - Applies the ponyfill to all DOM children\n * @param win - window\n */\nexport function applyFocusVisiblePolyfill(scope: HTMLElement, win: Window): () => void {\n  if (alreadyInScope(scope)) {\n    // Focus visible polyfill already applied at this scope\n    return () => undefined;\n  }\n\n  const state: FocusVisibleState = {\n    current: undefined,\n  };\n\n  const keyborg = createKeyborg(win);\n\n  // When navigation mode changes remove the focus-visible selector\n  keyborg.subscribe(isNavigatingWithKeyboard => {\n    if (!isNavigatingWithKeyboard && state.current) {\n      removeFocusVisibleClass(state.current);\n      state.current = undefined;\n    }\n  });\n\n  // Keyborg's focusin event is delegated so it's only registered once on the window\n  // and contains metadata about the focus event\n  const keyborgListener = (e: KeyborgFocusInEvent) => {\n    if (state.current) {\n      removeFocusVisibleClass(state.current);\n      state.current = undefined;\n    }\n\n    if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target) && e.target) {\n      // Griffel can't create chained global styles so use the parent element for now\n      state.current = e.target;\n      applyFocusVisibleClass(state.current);\n    }\n  };\n\n  // Make sure that when focus leaves the scope, the focus visible class is removed\n  const blurListener = (e: FocusEvent) => {\n    if (!e.relatedTarget || (isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget))) {\n      if (state.current) {\n        removeFocusVisibleClass(state.current);\n        state.current = undefined;\n      }\n    }\n  };\n\n  scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n  scope.addEventListener('focusout', blurListener);\n  (scope as HTMLElementWithFocusVisibleScope).focusVisible = true;\n\n  // Return disposer\n  return () => {\n    scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n    scope.removeEventListener('focusout', blurListener);\n    delete (scope as HTMLElementWithFocusVisibleScope).focusVisible;\n    disposeKeyborg(keyborg);\n  };\n}\n\nfunction applyFocusVisibleClass(el: HTMLElement) {\n  el.setAttribute(FOCUS_VISIBLE_ATTR, '');\n}\n\nfunction removeFocusVisibleClass(el: HTMLElement) {\n  el.removeAttribute(FOCUS_VISIBLE_ATTR);\n}\n\nfunction isHTMLElement(target: EventTarget | null): target is HTMLElement {\n  if (!target) {\n    return false;\n  }\n  return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);\n}\n\nfunction alreadyInScope(el: HTMLElement | null | undefined): boolean {\n  if (!el) {\n    return false;\n  }\n\n  if ((el as HTMLElementWithFocusVisibleScope).focusVisible) {\n    return true;\n  }\n\n  return alreadyInScope(el?.parentElement);\n}\n"],"sourceRoot":""}

package/lib/focus/focusWithinPolyfill.js

@@ -0,0 +1,58 @@
+import { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from 'keyborg';
+import { FOCUS_WITHIN_ATTR } from './constants';
+/**
+ * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation
+ * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151
+ * @returns ref to the element that uses `:focus-within` styles
+ */
+
+export function applyFocusWithinPolyfill(element, win) {
+  const keyborg = createKeyborg(win); // When navigation mode changes to mouse, remove the focus-within selector
+
+  keyborg.subscribe(isNavigatingWithKeyboard => {
+    if (!isNavigatingWithKeyboard) {
+      removeFocusWithinClass(element);
+    }
+  }); // Keyborg's focusin event is delegated so it's only registered once on the window
+  // and contains metadata about the focus event
+
+  const keyborgListener = e => {
+    if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target)) {
+      // Griffel can't create chained global styles so use the parent element for now
+      applyFocusWithinClass(element);
+    }
+  }; // Make sure that when focus leaves the scope, the focus within class is removed
+
+
+  const blurListener = e => {
+    if (!e.relatedTarget || isHTMLElement(e.relatedTarget) && !element.contains(e.relatedTarget)) {
+      removeFocusWithinClass(element);
+    }
+  };
+
+  element.addEventListener(KEYBORG_FOCUSIN, keyborgListener);
+  element.addEventListener('focusout', blurListener); // Return disposer
+
+  return () => {
+    element.removeEventListener(KEYBORG_FOCUSIN, keyborgListener);
+    element.removeEventListener('focusout', blurListener);
+    disposeKeyborg(keyborg);
+  };
+}
+
+function applyFocusWithinClass(el) {
+  el.setAttribute(FOCUS_WITHIN_ATTR, '');
+}
+
+function removeFocusWithinClass(el) {
+  el.removeAttribute(FOCUS_WITHIN_ATTR);
+}
+
+function isHTMLElement(target) {
+  if (!target) {
+    return false;
+  }
+
+  return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);
+}
+//# sourceMappingURL=focusWithinPolyfill.js.map

package/lib/focus/focusWithinPolyfill.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/focus/focusWithinPolyfill.ts"],"names":[],"mappings":"AAAA,SAAS,eAAT,EAA+C,aAA/C,EAA8D,cAA9D,QAAoF,SAApF;AACA,SAAS,iBAAT,QAAkC,aAAlC;AASA;;;;AAIG;;AACH,OAAM,SAAU,wBAAV,CAAmC,OAAnC,EAAyD,GAAzD,EAAoE;EACxE,MAAM,OAAO,GAAG,aAAa,CAAC,GAAD,CAA7B,CADwE,CAGxE;;EACA,OAAO,CAAC,SAAR,CAAkB,wBAAwB,IAAG;IAC3C,IAAI,CAAC,wBAAL,EAA+B;MAC7B,sBAAsB,CAAC,OAAD,CAAtB;IACD;EACF,CAJD,EAJwE,CAUxE;EACA;;EACA,MAAM,eAAe,GAAI,CAAD,IAA2B;IACjD,IAAI,OAAO,CAAC,wBAAR,MAAsC,aAAa,CAAC,CAAC,CAAC,MAAH,CAAvD,EAAmE;MACjE;MACA,qBAAqB,CAAC,OAAD,CAArB;IACD;EACF,CALD,CAZwE,CAmBxE;;;EACA,MAAM,YAAY,GAAI,CAAD,IAAkB;IACrC,IAAI,CAAC,CAAC,CAAC,aAAH,IAAqB,aAAa,CAAC,CAAC,CAAC,aAAH,CAAb,IAAkC,CAAC,OAAO,CAAC,QAAR,CAAiB,CAAC,CAAC,aAAnB,CAA5D,EAAgG;MAC9F,sBAAsB,CAAC,OAAD,CAAtB;IACD;EACF,CAJD;;EAMA,OAAO,CAAC,gBAAR,CAAyB,eAAzB,EAA0C,eAA1C;EACA,OAAO,CAAC,gBAAR,CAAyB,UAAzB,EAAqC,YAArC,EA3BwE,CA6BxE;;EACA,OAAO,MAAK;IACV,OAAO,CAAC,mBAAR,CAA4B,eAA5B,EAA6C,eAA7C;IACA,OAAO,CAAC,mBAAR,CAA4B,UAA5B,EAAwC,YAAxC;IACA,cAAc,CAAC,OAAD,CAAd;EACD,CAJD;AAKD;;AAED,SAAS,qBAAT,CAA+B,EAA/B,EAA8C;EAC5C,EAAE,CAAC,YAAH,CAAgB,iBAAhB,EAAmC,EAAnC;AACD;;AAED,SAAS,sBAAT,CAAgC,EAAhC,EAA+C;EAC7C,EAAE,CAAC,eAAH,CAAmB,iBAAnB;AACD;;AAED,SAAS,aAAT,CAAuB,MAAvB,EAAiD;EAC/C,IAAI,CAAC,MAAL,EAAa;IACX,OAAO,KAAP;EACD;;EACD,OAAO,OAAO,CAAC,MAAM,IAAI,OAAO,MAAP,KAAkB,QAA5B,IAAwC,eAAe,MAAvD,IAAiE,cAAc,MAAhF,CAAd;AACD","sourcesContent":["import { KEYBORG_FOCUSIN, KeyborgFocusInEvent, createKeyborg, disposeKeyborg } from 'keyborg';\nimport { FOCUS_WITHIN_ATTR } from './constants';\n\n/**\n * Because `addEventListener` type override falls back to 2nd definition (evt name is unknown string literal)\n * evt is being typed as a base class of MouseEvent -> `Event`.\n * This type is used to override `listener` calls to make TS happy\n */\ntype ListenerOverride = (evt: Event) => void;\n\n/**\n * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation\n * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151\n * @returns ref to the element that uses `:focus-within` styles\n */\nexport function applyFocusWithinPolyfill(element: HTMLElement, win: Window): () => void {\n  const keyborg = createKeyborg(win);\n\n  // When navigation mode changes to mouse, remove the focus-within selector\n  keyborg.subscribe(isNavigatingWithKeyboard => {\n    if (!isNavigatingWithKeyboard) {\n      removeFocusWithinClass(element);\n    }\n  });\n\n  // Keyborg's focusin event is delegated so it's only registered once on the window\n  // and contains metadata about the focus event\n  const keyborgListener = (e: KeyborgFocusInEvent) => {\n    if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target)) {\n      // Griffel can't create chained global styles so use the parent element for now\n      applyFocusWithinClass(element);\n    }\n  };\n\n  // Make sure that when focus leaves the scope, the focus within class is removed\n  const blurListener = (e: FocusEvent) => {\n    if (!e.relatedTarget || (isHTMLElement(e.relatedTarget) && !element.contains(e.relatedTarget))) {\n      removeFocusWithinClass(element);\n    }\n  };\n\n  element.addEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n  element.addEventListener('focusout', blurListener);\n\n  // Return disposer\n  return () => {\n    element.removeEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n    element.removeEventListener('focusout', blurListener);\n    disposeKeyborg(keyborg);\n  };\n}\n\nfunction applyFocusWithinClass(el: HTMLElement) {\n  el.setAttribute(FOCUS_WITHIN_ATTR, '');\n}\n\nfunction removeFocusWithinClass(el: HTMLElement) {\n  el.removeAttribute(FOCUS_WITHIN_ATTR);\n}\n\nfunction isHTMLElement(target: EventTarget | null): target is HTMLElement {\n  if (!target) {\n    return false;\n  }\n  return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);\n}\n"],"sourceRoot":""}

package/lib/focus/index.js

@@ -1,3 +1,5 @@
 export * from './createCustomFocusIndicatorStyle';
 export * from './createFocusOutlineStyle';
+export * from './focusVisiblePolyfill';
+export * from './focusWithinPolyfill';
 //# sourceMappingURL=index.js.map

package/lib/focus/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["focus/index.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC;AAClD,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './createCustomFocusIndicatorStyle';\nexport * from './createFocusOutlineStyle';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/focus/index.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC;AAClD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC","sourcesContent":["export * from './createCustomFocusIndicatorStyle';\nexport * from './createFocusOutlineStyle';\nexport * from './focusVisiblePolyfill';\nexport * from './focusWithinPolyfill';\n"]}

package/lib/hooks/index.js

@@ -1,6 +1,8 @@
 export * from './useArrowNavigationGroup';
 export * from './useFocusableGroup';
 export * from './useFocusFinders';
+export * from './useFocusVisible';
+export * from './useFocusWithin';
 export * from './useKeyboardNavAttribute';
 export * from './useModalAttributes';
 export * from './useTabsterAttributes';

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,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './useArrowNavigationGroup';\nexport * from './useFocusableGroup';\nexport * from './useFocusFinders';\nexport * from './useKeyboardNavAttribute';\nexport * from './useModalAttributes';\nexport * from './useTabsterAttributes';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC","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';\n"]}

package/lib/hooks/useArrowNavigationGroup.js

@@ -6,9 +6,14 @@ import { useTabster } from './useTabster';
  * @param options - Options to configure keyboard navigation
  */
 
-export const useArrowNavigationGroup = options => {
-  var _a;
-
+export const useArrowNavigationGroup = (options = {}) => {
+  const {
+    circular,
+    axis,
+    memorizeCurrent,
+    tabbable,
+    ignoreDefaultKeydown
+  } = options;
   const tabster = useTabster();
 
   if (tabster) {
@@ -17,11 +22,16 @@ export const useArrowNavigationGroup = options => {
 
   return useTabsterAttributes({
     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,
-      tabbable: options === null || options === void 0 ? void 0 : options.tabbable
-    }
+      cyclic: !!circular,
+      direction: axisToMoverDirection(axis !== null && axis !== void 0 ? axis : 'vertical'),
+      memorizeCurrent: memorizeCurrent,
+      tabbable: tabbable
+    },
+    ...(ignoreDefaultKeydown && {
+      focusable: {
+        ignoreKeydown: ignoreDefaultKeydown
+      }
+    })
   });
 };