@fluentui/react-tabster 9.3.3 → 9.3.5

package/CHANGELOG.json

@@ -2,7 +2,69 @@
   "name": "@fluentui/react-tabster",
   "entries": [
     {
-      "date": "Tue, 20 Dec 2022 14:55:56 GMT",
+      "date": "Wed, 04 Jan 2023 01:35:56 GMT",
+      "tag": "@fluentui/react-tabster_v9.3.5",
+      "version": "9.3.5",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105",
+            "comment": "chore(scripts): move index.ts to  to follow sub-folder domain packaging"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "194b0cf0cc27c1c1233aa945f09b3ad29778d8ca",
+            "comment": "chore(scripts): use for @fluentui/scripts version within all package.json"
+          }
+        ],
+        "patch": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "2c38f1e4ae07b2b60df596efe11015a68f166dbf",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "47d4b0bec3fb3aa815bde1fd7fb67ecf85c97b5a",
+            "comment": "fix: Bump tabster to 3.0.6"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-utilities to v9.3.1",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 21 Dec 2022 10:20:33 GMT",
+      "tag": "@fluentui/react-tabster_v9.3.4",
+      "version": "9.3.4",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.1.4",
+            "commit": "66bf89f634cad4a275e957d7a2214c7e73ff8c2e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-theme to v9.1.5",
+            "commit": "66bf89f634cad4a275e957d7a2214c7e73ff8c2e"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 20 Dec 2022 14:59:31 GMT",
       "tag": "@fluentui/react-tabster_v9.3.3",
       "version": "9.3.3",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Tue, 20 Dec 2022 14:55:56 GMT and should not be manually modified.
+This log was last generated on Wed, 04 Jan 2023 01:35:56 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.3.5)
+
+Wed, 04 Jan 2023 01:35:56 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.3.4..@fluentui/react-tabster_v9.3.5)
+
+### Patches
+
+- chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- fix: Bump tabster to 3.0.6 ([PR #26076](https://github.com/microsoft/fluentui/pull/26076) by lingfangao@hotmail.com)
+- Bump @fluentui/react-utilities to v9.3.1 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+
+## [9.3.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.3.4)
+
+Wed, 21 Dec 2022 10:20:33 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.3.3..@fluentui/react-tabster_v9.3.4)
+
+### Patches
+
+- Bump @fluentui/react-shared-contexts to v9.1.4 ([commit](https://github.com/microsoft/fluentui/commit/66bf89f634cad4a275e957d7a2214c7e73ff8c2e) by beachball)
+- Bump @fluentui/react-theme to v9.1.5 ([commit](https://github.com/microsoft/fluentui/commit/66bf89f634cad4a275e957d7a2214c7e73ff8c2e) by beachball)
+
 ## [9.3.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.3.3)
 
-Tue, 20 Dec 2022 14:55:56 GMT 
+Tue, 20 Dec 2022 14:59:31 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.3.2..@fluentui/react-tabster_v9.3.3)
 
 ### Patches

package/lib/focus/constants.js

@@ -3,12 +3,10 @@ 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-within';
 export const defaultOptions = {
   style: {},

package/lib/focus/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabster/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,uBAA1B;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-within';\nexport const defaultOptions = {\n  style: {},\n  selector: 'focus',\n} as const;\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,MAAMA,sBAAsB,GAAG,mBAA4B;AAClE,OAAO,MAAMC,qBAAqB,GAAG,YAAYD,sBAAsB,IAAa;AAEpF;;;AAGA,OAAO,MAAME,kBAAkB,GAAG,wBAAwB;AAE1D;;;AAGA,OAAO,MAAMC,iBAAiB,GAAG,uBAAuB;AACxD,OAAO,MAAMC,cAAc,GAAG;EAC5BC,KAAK,EAAE,EAAE;EACTC,QAAQ,EAAE;CACF","names":["KEYBOARD_NAV_ATTRIBUTE","KEYBOARD_NAV_SELECTOR","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","defaultOptions","style","selector"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabster/src/focus/constants.ts"],"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-within';\nexport const defaultOptions = {\n  style: {},\n  selector: 'focus',\n} as const;\n"]}

package/lib/focus/createCustomFocusIndicatorStyle.js

@@ -6,7 +6,6 @@ import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constan
  * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles
  * @param options - Configure the style of the focus outline
  */
-
 export function createCustomFocusIndicatorStyle(style, {
   selector = defaultOptions.selector,
   enableOutline = false

package/lib/focus/createCustomFocusIndicatorStyle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":"AAAA,SAAS,cAAT,EAAyB,kBAAzB,EAA6C,iBAA7C,QAAsE,aAAtE;AAiBA;;;;;;AAMG;;AACH,OAAM,SAAU,+BAAV,CACJ,KADI,EAEJ;EACE,QAAQ,GAAG,cAAc,CAAC,QAD5B;EAEE,aAAa,GAAG;AAFlB,IAG4C,cALxC,EAKsD;EAE1D,OAAO;IACL,UAAU;MACR,YAAY,EAAE,aAAa,GAAG,SAAH,GAAe;IADlC,CADL;IAIL,kBAAkB;MAChB,YAAY,EAAE,aAAa,GAAG,SAAH,GAAe;IAD1B,CAJb;IAQL,IAAI,QAAQ,KAAK,OAAb,IAAwB;MAC1B,CAAC,KAAK,kBAAkB,GAAxB,GAA8B;IADJ,CAA5B,CARK;IAWL,IAAI,QAAQ,KAAK,cAAb,IAA+B;MACjC,CAAC,KAAK,iBAAiB,KAAK,QAAQ,EAApC,GAAyC;IADR,CAAnC;EAXK,CAAP;AAeD","sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\nimport { makeResetStyles } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\n\n// TODO: Use the type directly from @griffel/react\n// https://github.com/microsoft/griffel/pull/278\ntype GriffelResetStyle = Parameters<typeof makeResetStyles>[0];\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n  selector?: 'focus' | 'focus-within';\n  /**\n   * Enables the browser default outline style\n   * @default false\n   */\n  enableOutline?: boolean;\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 getDefaultFocusOutlineStyles\n * @param options - Configure the style of the focus outline\n */\nexport function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(\n  style: TStyle,\n  {\n    selector = defaultOptions.selector,\n    enableOutline = false,\n  }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle {\n  return {\n    ':focus': {\n      outlineStyle: enableOutline ? undefined : 'none',\n    },\n    ':focus-visible': {\n      outlineStyle: enableOutline ? undefined : '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}\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,SAASA,cAAc,EAAEC,kBAAkB,EAAEC,iBAAiB,QAAQ,aAAa;AAiBnF;;;;;;;AAOA,OAAM,SAAUC,+BAA+B,CAC7CC,KAAa,EACb;EACEC,QAAQ,GAAGL,cAAc,CAACK,QAAQ;EAClCC,aAAa,GAAG;AAAK,IACqBN,cAAc;EAE1D,OAAO;IACL,QAAQ,EAAE;MACRO,YAAY,EAAED,aAAa,GAAGE,SAAS,GAAG;KAC3C;IACD,gBAAgB,EAAE;MAChBD,YAAY,EAAED,aAAa,GAAGE,SAAS,GAAG;KAC3C;IAED,IAAIH,QAAQ,KAAK,OAAO,IAAI;MAC1B,CAAC,KAAKJ,kBAAkB,GAAG,GAAGG;KAC/B,CAAC;IACF,IAAIC,QAAQ,KAAK,cAAc,IAAI;MACjC,CAAC,KAAKH,iBAAiB,KAAKG,QAAQ,EAAE,GAAGD;KAC1C;GACF;AACH","names":["defaultOptions","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","createCustomFocusIndicatorStyle","style","selector","enableOutline","outlineStyle","undefined"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts"],"sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\nimport { makeResetStyles } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\n\n// TODO: Use the type directly from @griffel/react\n// https://github.com/microsoft/griffel/pull/278\ntype GriffelResetStyle = Parameters<typeof makeResetStyles>[0];\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n  selector?: 'focus' | 'focus-within';\n  /**\n   * Enables the browser default outline style\n   * @default false\n   */\n  enableOutline?: boolean;\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 getDefaultFocusOutlineStyles\n * @param options - Configure the style of the focus outline\n */\nexport function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(\n  style: TStyle,\n  {\n    selector = defaultOptions.selector,\n    enableOutline = false,\n  }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle {\n  return {\n    ':focus': {\n      outlineStyle: enableOutline ? undefined : 'none',\n    },\n    ':focus-visible': {\n      outlineStyle: enableOutline ? undefined : '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}\n"]}

package/lib/focus/createFocusOutlineStyle.js

@@ -9,10 +9,8 @@ import { defaultOptions } from './constants';
  * @param options - Configures the style of the focus outline
  * @returns focus outline styles object
  */
-
 const getFocusOutlineStyles = options => {
   var _a, _b, _c, _d;
-
   const {
     outlineRadius,
     outlineColor,
@@ -23,7 +21,8 @@ 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 { ...shorthands.borderColor('transparent'),
+  return {
+    ...shorthands.borderColor('transparent'),
     '::after': {
       content: '""',
       position: 'absolute',
@@ -47,8 +46,6 @@ const getFocusOutlineStyles = options => {
  * @param options - Configure the style of the focus outline
  * @returns focus outline styles object for @see makeStyles
  */
-
-
 export const createFocusOutlineStyle = ({
   selector = defaultOptions.selector,
   style = defaultOptions.style

package/lib/focus/createFocusOutlineStyle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabster/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":"../src/"}
+{"version":3,"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,UAAU,QAAQ,gBAAgB;AAE3C,SACEC,+BAA+B,QAE1B,mCAAmC;AAC1C,SAASC,cAAc,QAAQ,aAAa;AAiB5C;;;;;;;AAOA,MAAMC,qBAAqB,GAAIC,OAAiC,IAAkB;;EAChF,MAAM;IAAEC,aAAa;IAAEC,YAAY;IAAEC,aAAa;IAAEC;EAAY,CAAE,GAAGJ,OAAO;EAE5E,MAAMK,gBAAgB,GAAG,OAACF,aAAoC,0CAAEG,GAAG,KAAIH,aAAa;EACpF,MAAMI,mBAAmB,GAAG,OAACJ,aAAoC,0CAAEK,MAAM,KAAIL,aAAa;EAC1F,MAAMM,iBAAiB,GAAG,OAACN,aAAoC,0CAAEO,IAAI,KAAIP,aAAa;EACtF,MAAMQ,kBAAkB,GAAG,OAACR,aAAoC,0CAAES,KAAK,KAAIT,aAAa;EAExF,OAAO;IACL,GAAGP,UAAU,CAACiB,WAAW,CAAC,aAAa,CAAC;IACxC,SAAS,EAAE;MACTC,OAAO,EAAE,IAAI;MACbC,QAAQ,EAAE,UAAU;MACpBC,aAAa,EAAE,MAAM;MACrBC,MAAM,EAAE,CAAC;MAET,GAAGrB,UAAU,CAACsB,WAAW,CAAC,OAAO,CAAC;MAClC,GAAGtB,UAAU,CAACuB,WAAW,CAACf,YAAY,CAAC;MACvC,GAAGR,UAAU,CAACwB,YAAY,CAACnB,aAAa,CAAC;MACzC,GAAGL,UAAU,CAACiB,WAAW,CAACX,YAAY,CAAC;MAEvCI,GAAG,EAAE,CAACH,aAAa,GAAG,IAAIC,YAAY,EAAE,GAAG,cAAcA,YAAY,MAAMC,gBAAgB,GAAG;MAC9FG,MAAM,EAAE,CAACL,aAAa,GAAG,IAAIC,YAAY,EAAE,GAAG,cAAcA,YAAY,MAAMG,mBAAmB,GAAG;MACpGG,IAAI,EAAE,CAACP,aAAa,GAAG,IAAIC,YAAY,EAAE,GAAG,cAAcA,YAAY,MAAMK,iBAAiB,GAAG;MAChGG,KAAK,EAAE,CAACT,aAAa,GAAG,IAAIC,YAAY,EAAE,GAAG,cAAcA,YAAY,MAAMO,kBAAkB;;GAElG;AACH,CAAC;AAED;;;;;;;AAOA,OAAO,MAAMU,uBAAuB,GAAG,CAAC;EACtCC,QAAQ,GAAGxB,cAAc,CAACwB,QAAQ;EAClCC,KAAK,GAAGzB,cAAc,CAACyB;AAAK,IACMzB,cAAc,KAChDD,+BAA+B,CAC7BE,qBAAqB,CAAC;EACpBG,YAAY,EAAEP,MAAM,CAAC6B,iBAAiB;EACtCvB,aAAa,EAAEN,MAAM,CAAC8B,kBAAkB;EACxC;EACArB,YAAY,EAAE,KAAK;EACnB,GAAGmB;CACJ,CAAC,EACF;EAAED;AAAQ,CAAE,CACb","names":["tokens","shorthands","createCustomFocusIndicatorStyle","defaultOptions","getFocusOutlineStyles","options","outlineRadius","outlineColor","outlineOffset","outlineWidth","outlineOffsetTop","top","outlineOffsetBottom","bottom","outlineOffsetLeft","left","outlineOffsetRight","right","borderColor","content","position","pointerEvents","zIndex","borderStyle","borderWidth","borderRadius","createFocusOutlineStyle","selector","style","colorStrokeFocus2","borderRadiusMedium"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts"],"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"]}

package/lib/focus/focusVisiblePolyfill.js

@@ -5,40 +5,36 @@ import { FOCUS_VISIBLE_ATTR } from './constants';
  * @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
-
+  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
+  });
+  // 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
-
-
+  };
+  // 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) {
@@ -47,11 +43,10 @@ export function applyFocusVisiblePolyfill(scope, win) {
       }
     }
   };
-
   scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener);
   scope.addEventListener('focusout', blurListener);
-  scope.focusVisible = true; // Return disposer
-
+  scope.focusVisible = true;
+  // Return disposer
   return () => {
     scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener);
     scope.removeEventListener('focusout', blurListener);
@@ -59,32 +54,25 @@ export function applyFocusVisiblePolyfill(scope, win) {
     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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabster/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":"../src/"}
+{"version":3,"mappings":"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","names":["KEYBORG_FOCUSIN","createKeyborg","disposeKeyborg","FOCUS_VISIBLE_ATTR","applyFocusVisiblePolyfill","scope","win","alreadyInScope","undefined","state","current","keyborg","subscribe","isNavigatingWithKeyboard","removeFocusVisibleClass","keyborgListener","e","isHTMLElement","target","applyFocusVisibleClass","blurListener","relatedTarget","contains","addEventListener","focusVisible","removeEventListener","el","setAttribute","removeAttribute","Boolean","parentElement"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabster/src/focus/focusVisiblePolyfill.ts"],"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"]}

package/lib/focus/focusWithinPolyfill.js

@@ -5,54 +5,47 @@ import { FOCUS_WITHIN_ATTR } from './constants';
  * 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
-
+  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
+  });
+  // 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
-
-
+  };
+  // 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
-
+  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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabster/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":"../src/"}
+{"version":3,"mappings":"AAAA,SAASA,eAAe,EAAuBC,aAAa,EAAEC,cAAc,QAAQ,SAAS;AAC7F,SAASC,iBAAiB,QAAQ,aAAa;AAS/C;;;;;AAKA,OAAM,SAAUC,wBAAwB,CAACC,OAAoB,EAAEC,GAAW;EACxE,MAAMC,OAAO,GAAGN,aAAa,CAACK,GAAG,CAAC;EAElC;EACAC,OAAO,CAACC,SAAS,CAACC,wBAAwB,IAAG;IAC3C,IAAI,CAACA,wBAAwB,EAAE;MAC7BC,sBAAsB,CAACL,OAAO,CAAC;;EAEnC,CAAC,CAAC;EAEF;EACA;EACA,MAAMM,eAAe,GAAIC,CAAsB,IAAI;IACjD,IAAIL,OAAO,CAACE,wBAAwB,EAAE,IAAII,aAAa,CAACD,CAAC,CAACE,MAAM,CAAC,EAAE;MACjE;MACAC,qBAAqB,CAACV,OAAO,CAAC;;EAElC,CAAC;EAED;EACA,MAAMW,YAAY,GAAIJ,CAAa,IAAI;IACrC,IAAI,CAACA,CAAC,CAACK,aAAa,IAAKJ,aAAa,CAACD,CAAC,CAACK,aAAa,CAAC,IAAI,CAACZ,OAAO,CAACa,QAAQ,CAACN,CAAC,CAACK,aAAa,CAAE,EAAE;MAC9FP,sBAAsB,CAACL,OAAO,CAAC;;EAEnC,CAAC;EAEDA,OAAO,CAACc,gBAAgB,CAACnB,eAAe,EAAEW,eAAmC,CAAC;EAC9EN,OAAO,CAACc,gBAAgB,CAAC,UAAU,EAAEH,YAAY,CAAC;EAElD;EACA,OAAO,MAAK;IACVX,OAAO,CAACe,mBAAmB,CAACpB,eAAe,EAAEW,eAAmC,CAAC;IACjFN,OAAO,CAACe,mBAAmB,CAAC,UAAU,EAAEJ,YAAY,CAAC;IACrDd,cAAc,CAACK,OAAO,CAAC;EACzB,CAAC;AACH;AAEA,SAASQ,qBAAqB,CAACM,EAAe;EAC5CA,EAAE,CAACC,YAAY,CAACnB,iBAAiB,EAAE,EAAE,CAAC;AACxC;AAEA,SAASO,sBAAsB,CAACW,EAAe;EAC7CA,EAAE,CAACE,eAAe,CAACpB,iBAAiB,CAAC;AACvC;AAEA,SAASU,aAAa,CAACC,MAA0B;EAC/C,IAAI,CAACA,MAAM,EAAE;IACX,OAAO,KAAK;;EAEd,OAAOU,OAAO,CAACV,MAAM,IAAI,OAAOA,MAAM,KAAK,QAAQ,IAAI,WAAW,IAAIA,MAAM,IAAI,UAAU,IAAIA,MAAM,CAAC;AACvG","names":["KEYBORG_FOCUSIN","createKeyborg","disposeKeyborg","FOCUS_WITHIN_ATTR","applyFocusWithinPolyfill","element","win","keyborg","subscribe","isNavigatingWithKeyboard","removeFocusWithinClass","keyborgListener","e","isHTMLElement","target","applyFocusWithinClass","blurListener","relatedTarget","contains","addEventListener","removeEventListener","el","setAttribute","removeAttribute","Boolean"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabster/src/focus/focusWithinPolyfill.ts"],"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"]}

package/lib/hooks/useArrowNavigationGroup.js

@@ -5,7 +5,6 @@ import { useTabster } from './useTabster';
  * A hook that returns the necessary tabster attributes to support arrow key navigation
  * @param options - Options to configure keyboard navigation
  */
-
 export const useArrowNavigationGroup = (options = {}) => {
   const {
     circular,
@@ -15,11 +14,9 @@ export const useArrowNavigationGroup = (options = {}) => {
     ignoreDefaultKeydown
   } = options;
   const tabster = useTabster();
-
   if (tabster) {
     getMover(tabster);
   }
-
   return useTabsterAttributes({
     mover: {
       cyclic: !!circular,
@@ -34,18 +31,14 @@ export const useArrowNavigationGroup = (options = {}) => {
     })
   });
 };
-
 function axisToMoverDirection(axis) {
   switch (axis) {
     case 'horizontal':
       return Types.MoverDirections.Horizontal;
-
     case 'grid':
       return Types.MoverDirections.Grid;
-
     case 'both':
       return Types.MoverDirections.Both;
-
     case 'vertical':
     default:
       return Types.MoverDirections.Vertical;

package/lib/hooks/useArrowNavigationGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabster/src/hooks/useArrowNavigationGroup.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,QAAhB,QAAgC,SAAhC;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,UAAT,QAA2B,cAA3B;AA2BA;;;AAGG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,OAAA,GAA0C,EAA3C,KAA4E;EACjH,MAAM;IAAE,QAAF;IAAY,IAAZ;IAAkB,eAAlB;IAAmC,QAAnC;IAA6C;EAA7C,IAAsE,OAA5E;EACA,MAAM,OAAO,GAAG,UAAU,EAA1B;;EAEA,IAAI,OAAJ,EAAa;IACX,QAAQ,CAAC,OAAD,CAAR;EACD;;EAED,OAAO,oBAAoB,CAAC;IAC1B,KAAK,EAAE;MACL,MAAM,EAAE,CAAC,CAAC,QADL;MAEL,SAAS,EAAE,oBAAoB,CAAC,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAA,IAAA,GAAQ,UAAT,CAF1B;MAGL,eAAe,EAAE,eAHZ;MAIL,QAAQ,EAAE;IAJL,CADmB;IAO1B,IAAI,oBAAoB,IAAI;MAC1B,SAAS,EAAE;QACT,aAAa,EAAE;MADN;IADe,CAA5B;EAP0B,CAAD,CAA3B;AAaD,CArBM;;AAuBP,SAAS,oBAAT,CAA8B,IAA9B,EAA0E;EACxE,QAAQ,IAAR;IACE,KAAK,YAAL;MACE,OAAO,KAAK,CAAC,eAAN,CAAsB,UAA7B;;IACF,KAAK,MAAL;MACE,OAAO,KAAK,CAAC,eAAN,CAAsB,IAA7B;;IACF,KAAK,MAAL;MACE,OAAO,KAAK,CAAC,eAAN,CAAsB,IAA7B;;IAEF,KAAK,UAAL;IACA;MACE,OAAO,KAAK,CAAC,eAAN,CAAsB,QAA7B;EAVJ;AAYD","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' | 'both';\n  /**\n   * Focus will cycle to the first/last elements of the group without stopping\n   */\n  circular?: boolean;\n  /**\n   * Last focused element in the group will be remembered and focused (if still\n   * available) when tabbing from outside of the group\n   */\n  memorizeCurrent?: boolean;\n  /**\n   * Allow tabbing within the arrow navigation group items.\n   */\n  tabbable?: boolean;\n  /**\n   * Tabster should ignore default handling of keydown events\n   */\n  ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];\n}\n\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 { circular, axis, memorizeCurrent, tabbable, ignoreDefaultKeydown } = options;\n  const tabster = useTabster();\n\n  if (tabster) {\n    getMover(tabster);\n  }\n\n  return useTabsterAttributes({\n    mover: {\n      cyclic: !!circular,\n      direction: axisToMoverDirection(axis ?? 'vertical'),\n      memorizeCurrent: memorizeCurrent,\n      tabbable: tabbable,\n    },\n    ...(ignoreDefaultKeydown && {\n      focusable: {\n        ignoreKeydown: ignoreDefaultKeydown,\n      },\n    }),\n  });\n};\n\nfunction axisToMoverDirection(axis: UseArrowNavigationGroupOptions['axis']): Types.MoverDirection {\n  switch (axis) {\n    case 'horizontal':\n      return Types.MoverDirections.Horizontal;\n    case 'grid':\n      return Types.MoverDirections.Grid;\n    case 'both':\n      return Types.MoverDirections.Both;\n\n    case 'vertical':\n    default:\n      return Types.MoverDirections.Vertical;\n  }\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,SAASA,KAAK,EAAEC,QAAQ,QAAQ,SAAS;AACzC,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,UAAU,QAAQ,cAAc;AA2BzC;;;;AAIA,OAAO,MAAMC,uBAAuB,GAAG,CAACC,UAA0C,EAAE,KAA+B;EACjH,MAAM;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,eAAe;IAAEC,QAAQ;IAAEC;EAAoB,CAAE,GAAGL,OAAO;EACnF,MAAMM,OAAO,GAAGR,UAAU,EAAE;EAE5B,IAAIQ,OAAO,EAAE;IACXV,QAAQ,CAACU,OAAO,CAAC;;EAGnB,OAAOT,oBAAoB,CAAC;IAC1BU,KAAK,EAAE;MACLC,MAAM,EAAE,CAAC,CAACP,QAAQ;MAClBQ,SAAS,EAAEC,oBAAoB,CAACR,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAI,UAAU,CAAC;MACnDC,eAAe,EAAEA,eAAe;MAChCC,QAAQ,EAAEA;KACX;IACD,IAAIC,oBAAoB,IAAI;MAC1BM,SAAS,EAAE;QACTC,aAAa,EAAEP;;KAElB;GACF,CAAC;AACJ,CAAC;AAED,SAASK,oBAAoB,CAACR,IAA4C;EACxE,QAAQA,IAAI;IACV,KAAK,YAAY;MACf,OAAOP,KAAK,CAACkB,eAAe,CAACC,UAAU;IACzC,KAAK,MAAM;MACT,OAAOnB,KAAK,CAACkB,eAAe,CAACE,IAAI;IACnC,KAAK,MAAM;MACT,OAAOpB,KAAK,CAACkB,eAAe,CAACG,IAAI;IAEnC,KAAK,UAAU;IACf;MACE,OAAOrB,KAAK,CAACkB,eAAe,CAACI,QAAQ;EAAC;AAE5C","names":["Types","getMover","useTabsterAttributes","useTabster","useArrowNavigationGroup","options","circular","axis","memorizeCurrent","tabbable","ignoreDefaultKeydown","tabster","mover","cyclic","direction","axisToMoverDirection","focusable","ignoreKeydown","MoverDirections","Horizontal","Grid","Both","Vertical"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabster/src/hooks/useArrowNavigationGroup.ts"],"sourcesContent":["import { Types, getMover } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseArrowNavigationGroupOptions {\n  /**\n   * Focus will navigate vertically, horizontally or in both directions (grid), defaults to horizontally\n   * @defaultValue vertical\n   */\n  axis?: 'vertical' | 'horizontal' | 'grid' | 'both';\n  /**\n   * Focus will cycle to the first/last elements of the group without stopping\n   */\n  circular?: boolean;\n  /**\n   * Last focused element in the group will be remembered and focused (if still\n   * available) when tabbing from outside of the group\n   */\n  memorizeCurrent?: boolean;\n  /**\n   * Allow tabbing within the arrow navigation group items.\n   */\n  tabbable?: boolean;\n  /**\n   * Tabster should ignore default handling of keydown events\n   */\n  ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];\n}\n\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 { circular, axis, memorizeCurrent, tabbable, ignoreDefaultKeydown } = options;\n  const tabster = useTabster();\n\n  if (tabster) {\n    getMover(tabster);\n  }\n\n  return useTabsterAttributes({\n    mover: {\n      cyclic: !!circular,\n      direction: axisToMoverDirection(axis ?? 'vertical'),\n      memorizeCurrent: memorizeCurrent,\n      tabbable: tabbable,\n    },\n    ...(ignoreDefaultKeydown && {\n      focusable: {\n        ignoreKeydown: ignoreDefaultKeydown,\n      },\n    }),\n  });\n};\n\nfunction axisToMoverDirection(axis: UseArrowNavigationGroupOptions['axis']): Types.MoverDirection {\n  switch (axis) {\n    case 'horizontal':\n      return Types.MoverDirections.Horizontal;\n    case 'grid':\n      return Types.MoverDirections.Grid;\n    case 'both':\n      return Types.MoverDirections.Both;\n\n    case 'vertical':\n    default:\n      return Types.MoverDirections.Vertical;\n  }\n}\n"]}

package/lib/hooks/useFocusFinders.js

@@ -3,10 +3,9 @@ import { useTabster } from './useTabster';
 /**
  * Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element
  */
-
 export const useFocusFinders = () => {
-  const tabster = useTabster(); // Narrow props for now and let need dictate additional props in the future
-
+  const tabster = useTabster();
+  // Narrow props for now and let need dictate additional props in the future
   const findAllFocusable = React.useCallback((container, acceptCondition) => (tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findAll({
     container,
     acceptCondition

package/lib/hooks/useFocusFinders.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabster/src/hooks/useFocusFinders.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,UAAT,QAA2B,cAA3B;AAEA;;AAEG;;AACH,OAAO,MAAM,eAAe,GAAG,MAAK;EAClC,MAAM,OAAO,GAAG,UAAU,EAA1B,CADkC,CAGlC;;EACA,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAN,CACvB,CAAC,SAAD,EAAyB,eAAzB,KACE,CAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,SAAT,CAAmB,OAAnB,CAA2B;IAAE,SAAF;IAAa;EAAb,CAA3B,CAAA,KAA8D,EAFzC,EAGvB,CAAC,OAAD,CAHuB,CAAzB;EAMA,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAN,CACxB,SAAD,IAA4B,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,SAAT,CAAmB,SAAnB,CAA6B;IAAE;EAAF,CAA7B,CADH,EAEzB,CAAC,OAAD,CAFyB,CAA3B;EAKA,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAN,CAAmB,SAAD,IAA4B,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,SAAT,CAAmB,QAAnB,CAA4B;IAAE;EAAF,CAA5B,CAA9C,EAA0F,CAClH,OADkH,CAA1F,CAA1B;EAIA,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAN,CACxB,CAAC,cAAD,EAA8B,OAAA,GAAyD,EAAvF,KACE,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,SAAT,CAAmB,QAAnB,CAA4B;IAAE,cAAF;IAAkB,GAAG;EAArB,CAA5B,CAFsB,EAGxB,CAAC,OAAD,CAHwB,CAA1B;EAMA,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAN,CACxB,CAAC,cAAD,EAA8B,OAAA,GAAyD,EAAvF,KACE,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,SAAT,CAAmB,QAAnB,CAA4B;IAAE,cAAF;IAAkB,GAAG;EAArB,CAA5B,CAFsB,EAGxB,CAAC,OAAD,CAHwB,CAA1B;EAMA,OAAO;IACL,gBADK;IAEL,kBAFK;IAGL,iBAHK;IAIL,iBAJK;IAKL;EALK,CAAP;AAOD,CAtCM","sourcesContent":["import * as React from 'react';\nimport { Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\n/**\n * Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element\n */\nexport const useFocusFinders = () => {\n  const tabster = useTabster();\n\n  // Narrow props for now and let need dictate additional props in the future\n  const findAllFocusable = React.useCallback(\n    (container: HTMLElement, acceptCondition?: (el: HTMLElement) => boolean) =>\n      tabster?.focusable.findAll({ container, acceptCondition }) || [],\n    [tabster],\n  );\n\n  const findFirstFocusable = React.useCallback(\n    (container: HTMLElement) => tabster?.focusable.findFirst({ container }),\n    [tabster],\n  );\n\n  const findLastFocusable = React.useCallback((container: HTMLElement) => tabster?.focusable.findLast({ container }), [\n    tabster,\n  ]);\n\n  const findNextFocusable = React.useCallback(\n    (currentElement: HTMLElement, options: Pick<TabsterTypes.FindNextProps, 'container'> = {}) =>\n      tabster?.focusable.findNext({ currentElement, ...options }),\n    [tabster],\n  );\n\n  const findPrevFocusable = React.useCallback(\n    (currentElement: HTMLElement, options: Pick<TabsterTypes.FindNextProps, 'container'> = {}) =>\n      tabster?.focusable.findPrev({ currentElement, ...options }),\n    [tabster],\n  );\n\n  return {\n    findAllFocusable,\n    findFirstFocusable,\n    findLastFocusable,\n    findNextFocusable,\n    findPrevFocusable,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,UAAU,QAAQ,cAAc;AAEzC;;;AAGA,OAAO,MAAMC,eAAe,GAAG,MAAK;EAClC,MAAMC,OAAO,GAAGF,UAAU,EAAE;EAE5B;EACA,MAAMG,gBAAgB,GAAGJ,KAAK,CAACK,WAAW,CACxC,CAACC,SAAsB,EAAEC,eAA8C,KACrE,QAAO,aAAPJ,OAAO,uBAAPA,OAAO,CAAEK,SAAS,CAACC,OAAO,CAAC;IAAEH,SAAS;IAAEC;EAAe,CAAE,CAAC,KAAI,EAAE,EAClE,CAACJ,OAAO,CAAC,CACV;EAED,MAAMO,kBAAkB,GAAGV,KAAK,CAACK,WAAW,CACzCC,SAAsB,IAAKH,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEK,SAAS,CAACG,SAAS,CAAC;IAAEL;EAAS,CAAE,CAAC,EACvE,CAACH,OAAO,CAAC,CACV;EAED,MAAMS,iBAAiB,GAAGZ,KAAK,CAACK,WAAW,CAAEC,SAAsB,IAAKH,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEK,SAAS,CAACK,QAAQ,CAAC;IAAEP;EAAS,CAAE,CAAC,EAAE,CAClHH,OAAO,CACR,CAAC;EAEF,MAAMW,iBAAiB,GAAGd,KAAK,CAACK,WAAW,CACzC,CAACU,cAA2B,EAAEC,UAAyD,EAAE,KACvFb,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEK,SAAS,CAACS,QAAQ,CAAC;IAAEF,cAAc;IAAE,GAAGC;EAAO,CAAE,CAAC,EAC7D,CAACb,OAAO,CAAC,CACV;EAED,MAAMe,iBAAiB,GAAGlB,KAAK,CAACK,WAAW,CACzC,CAACU,cAA2B,EAAEC,UAAyD,EAAE,KACvFb,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEK,SAAS,CAACW,QAAQ,CAAC;IAAEJ,cAAc;IAAE,GAAGC;EAAO,CAAE,CAAC,EAC7D,CAACb,OAAO,CAAC,CACV;EAED,OAAO;IACLC,gBAAgB;IAChBM,kBAAkB;IAClBE,iBAAiB;IACjBE,iBAAiB;IACjBI;GACD;AACH,CAAC","names":["React","useTabster","useFocusFinders","tabster","findAllFocusable","useCallback","container","acceptCondition","focusable","findAll","findFirstFocusable","findFirst","findLastFocusable","findLast","findNextFocusable","currentElement","options","findNext","findPrevFocusable","findPrev"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabster/src/hooks/useFocusFinders.ts"],"sourcesContent":["import * as React from 'react';\nimport { Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\n/**\n * Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element\n */\nexport const useFocusFinders = () => {\n  const tabster = useTabster();\n\n  // Narrow props for now and let need dictate additional props in the future\n  const findAllFocusable = React.useCallback(\n    (container: HTMLElement, acceptCondition?: (el: HTMLElement) => boolean) =>\n      tabster?.focusable.findAll({ container, acceptCondition }) || [],\n    [tabster],\n  );\n\n  const findFirstFocusable = React.useCallback(\n    (container: HTMLElement) => tabster?.focusable.findFirst({ container }),\n    [tabster],\n  );\n\n  const findLastFocusable = React.useCallback((container: HTMLElement) => tabster?.focusable.findLast({ container }), [\n    tabster,\n  ]);\n\n  const findNextFocusable = React.useCallback(\n    (currentElement: HTMLElement, options: Pick<TabsterTypes.FindNextProps, 'container'> = {}) =>\n      tabster?.focusable.findNext({ currentElement, ...options }),\n    [tabster],\n  );\n\n  const findPrevFocusable = React.useCallback(\n    (currentElement: HTMLElement, options: Pick<TabsterTypes.FindNextProps, 'container'> = {}) =>\n      tabster?.focusable.findPrev({ currentElement, ...options }),\n    [tabster],\n  );\n\n  return {\n    findAllFocusable,\n    findFirstFocusable,\n    findLastFocusable,\n    findNextFocusable,\n    findPrevFocusable,\n  };\n};\n"]}

package/lib/hooks/useFocusVisible.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabster/src/hooks/useFocusVisible.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAkB,IAAI,SAA/B,QAAgD,iCAAhD;AACA,SAAS,yBAAT,QAA0C,+BAA1C;AAEA,OAAM,SAAU,eAAV,GAAyB;EAC7B,MAAM;IAAE;EAAF,IAAqB,SAAS,EAApC;EACA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAjB;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,CAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,WAAhB,KAA+B,QAAQ,CAAC,OAA5C,EAAqD;MACnD,OAAO,yBAAyB,CAAC,QAAQ,CAAC,OAAV,EAAmB,cAAc,CAAC,WAAlC,CAAhC;IACD;EACF,CAJD,EAIG,CAAC,QAAD,EAAW,cAAX,CAJH;EAMA,OAAO,QAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';\n\nexport function useFocusVisible<TElement extends HTMLElement = HTMLElement>() {\n  const { targetDocument } = useFluent();\n  const scopeRef = React.useRef<TElement>(null);\n\n  React.useEffect(() => {\n    if (targetDocument?.defaultView && scopeRef.current) {\n      return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);\n    }\n  }, [scopeRef, targetDocument]);\n\n  return scopeRef;\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AACjF,SAASC,yBAAyB,QAAQ,+BAA+B;AAEzE,OAAM,SAAUC,eAAe;EAC7B,MAAM;IAAEC;EAAc,CAAE,GAAGH,SAAS,EAAE;EACtC,MAAMI,QAAQ,GAAGN,KAAK,CAACO,MAAM,CAAW,IAAI,CAAC;EAE7CP,KAAK,CAACQ,SAAS,CAAC,MAAK;IACnB,IAAI,eAAc,aAAdH,cAAc,uBAAdA,cAAc,CAAEI,WAAW,KAAIH,QAAQ,CAACI,OAAO,EAAE;MACnD,OAAOP,yBAAyB,CAACG,QAAQ,CAACI,OAAO,EAAEL,cAAc,CAACI,WAAW,CAAC;;EAElF,CAAC,EAAE,CAACH,QAAQ,EAAED,cAAc,CAAC,CAAC;EAE9B,OAAOC,QAAQ;AACjB","names":["React","useFluent_unstable","useFluent","applyFocusVisiblePolyfill","useFocusVisible","targetDocument","scopeRef","useRef","useEffect","defaultView","current"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabster/src/hooks/useFocusVisible.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';\n\nexport function useFocusVisible<TElement extends HTMLElement = HTMLElement>() {\n  const { targetDocument } = useFluent();\n  const scopeRef = React.useRef<TElement>(null);\n\n  React.useEffect(() => {\n    if (targetDocument?.defaultView && scopeRef.current) {\n      return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);\n    }\n  }, [scopeRef, targetDocument]);\n\n  return scopeRef;\n}\n"]}

package/lib/hooks/useFocusWithin.js

@@ -6,7 +6,6 @@ import { applyFocusWithinPolyfill } from '../focus/focusWithinPolyfill';
  * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151
  * @returns ref to the element that uses `:focus-within` styles
  */
-
 export function useFocusWithin() {
   const {
     targetDocument

package/lib/hooks/useFocusWithin.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabster/src/hooks/useFocusWithin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAkB,IAAI,SAA/B,QAAgD,iCAAhD;AACA,SAAS,wBAAT,QAAyC,8BAAzC;AAEA;;;;AAIG;;AACH,OAAM,SAAU,cAAV,GAAwB;EAC5B,MAAM;IAAE;EAAF,IAAqB,SAAS,EAApC;EACA,MAAM,UAAU,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAnB;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,CAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,WAAhB,KAA+B,UAAU,CAAC,OAA9C,EAAuD;MACrD,OAAO,wBAAwB,CAAC,UAAU,CAAC,OAAZ,EAAqB,cAAc,CAAC,WAApC,CAA/B;IACD;EACF,CAJD,EAIG,CAAC,UAAD,EAAa,cAAb,CAJH;EAMA,OAAO,UAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyFocusWithinPolyfill } from '../focus/focusWithinPolyfill';\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 useFocusWithin<TElement extends HTMLElement = HTMLElement>() {\n  const { targetDocument } = useFluent();\n  const elementRef = React.useRef<TElement>(null);\n\n  React.useEffect(() => {\n    if (targetDocument?.defaultView && elementRef.current) {\n      return applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);\n    }\n  }, [elementRef, targetDocument]);\n\n  return elementRef;\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AACjF,SAASC,wBAAwB,QAAQ,8BAA8B;AAEvE;;;;;AAKA,OAAM,SAAUC,cAAc;EAC5B,MAAM;IAAEC;EAAc,CAAE,GAAGH,SAAS,EAAE;EACtC,MAAMI,UAAU,GAAGN,KAAK,CAACO,MAAM,CAAW,IAAI,CAAC;EAE/CP,KAAK,CAACQ,SAAS,CAAC,MAAK;IACnB,IAAI,eAAc,aAAdH,cAAc,uBAAdA,cAAc,CAAEI,WAAW,KAAIH,UAAU,CAACI,OAAO,EAAE;MACrD,OAAOP,wBAAwB,CAACG,UAAU,CAACI,OAAO,EAAEL,cAAc,CAACI,WAAW,CAAC;;EAEnF,CAAC,EAAE,CAACH,UAAU,EAAED,cAAc,CAAC,CAAC;EAEhC,OAAOC,UAAU;AACnB","names":["React","useFluent_unstable","useFluent","applyFocusWithinPolyfill","useFocusWithin","targetDocument","elementRef","useRef","useEffect","defaultView","current"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabster/src/hooks/useFocusWithin.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyFocusWithinPolyfill } from '../focus/focusWithinPolyfill';\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 useFocusWithin<TElement extends HTMLElement = HTMLElement>() {\n  const { targetDocument } = useFluent();\n  const elementRef = React.useRef<TElement>(null);\n\n  React.useEffect(() => {\n    if (targetDocument?.defaultView && elementRef.current) {\n      return applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);\n    }\n  }, [elementRef, targetDocument]);\n\n  return elementRef;\n}\n"]}