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

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

@@ -1 +1 @@
-{"version":3,"sources":["hooks/useFocusFinders.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,eAAe,GAAG,MAAK;EAClC,MAAM,OAAO,GAAG,YAAA,CAAA,UAAA,EAAhB,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;;AAAM,OAAA,CAAA,eAAA,GAAe,eAAf","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,"sources":["../../src/hooks/useFocusFinders.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,eAAe,GAAG,MAAK;EAClC,MAAM,OAAO,GAAG,YAAA,CAAA,UAAA,EAAhB,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;;AAAM,OAAA,CAAA,eAAA,GAAe,eAAf","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":""}

package/lib-commonjs/hooks/useFocusVisible.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFocusVisible = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
+
+const focusVisiblePolyfill_1 = /*#__PURE__*/require("../focus/focusVisiblePolyfill");
+
+function useFocusVisible() {
+  const {
+    targetDocument
+  } = react_shared_contexts_1.useFluent_unstable();
+  const scopeRef = React.useRef(null);
+  React.useEffect(() => {
+    if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && scopeRef.current) {
+      return focusVisiblePolyfill_1.applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);
+    }
+  }, [scopeRef, targetDocument]);
+  return scopeRef;
+}
+
+exports.useFocusVisible = useFocusVisible;
+//# sourceMappingURL=useFocusVisible.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useFocusVisible.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;;AAEA,SAAgB,eAAhB,GAA+B;EAC7B,MAAM;IAAE;EAAF,IAAqB,uBAAA,CAAA,kBAAA,EAA3B;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,sBAAA,CAAA,yBAAA,CAA0B,QAAQ,CAAC,OAAnC,EAA4C,cAAc,CAAC,WAA3D,CAAP;IACD;EACF,CAJD,EAIG,CAAC,QAAD,EAAW,cAAX,CAJH;EAMA,OAAO,QAAP;AACD;;AAXD,OAAA,CAAA,eAAA,GAAA,eAAA","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":""}

package/lib-commonjs/hooks/useFocusWithin.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFocusWithin = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
+
+const focusWithinPolyfill_1 = /*#__PURE__*/require("../focus/focusWithinPolyfill");
+/**
+ * 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
+ */
+
+
+function useFocusWithin() {
+  const {
+    targetDocument
+  } = react_shared_contexts_1.useFluent_unstable();
+  const elementRef = React.useRef(null);
+  React.useEffect(() => {
+    if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && elementRef.current) {
+      return focusWithinPolyfill_1.applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);
+    }
+  }, [elementRef, targetDocument]);
+  return elementRef;
+}
+
+exports.useFocusWithin = useFocusWithin;
+//# sourceMappingURL=useFocusWithin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,8BAAA,CAAA;AAEA;;;;AAIG;;;AACH,SAAgB,cAAhB,GAA8B;EAC5B,MAAM;IAAE;EAAF,IAAqB,uBAAA,CAAA,kBAAA,EAA3B;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,qBAAA,CAAA,wBAAA,CAAyB,UAAU,CAAC,OAApC,EAA6C,cAAc,CAAC,WAA5D,CAAP;IACD;EACF,CAJD,EAIG,CAAC,UAAD,EAAa,cAAb,CAJH;EAMA,OAAO,UAAP;AACD;;AAXD,OAAA,CAAA,cAAA,GAAA,cAAA","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":""}

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

@@ -1 +1 @@
-{"version":3,"sources":["hooks/useFocusableGroup.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AASA;;;AAGG;;;AACI,MAAM,iBAAiB,GAAI,OAAD,IAAkE;EACjG,MAAM,OAAO,GAAG,YAAA,CAAA,UAAA,EAAhB;;EAEA,IAAI,OAAJ,EAAa;IACX,SAAA,CAAA,WAAA,CAAY,OAAZ;EACD;;EAED,OAAO,sBAAA,CAAA,oBAAA,CAAqB;IAC1B,QAAQ,EAAE;MACR,WAAW,EAAE,cAAc,CAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,WAAV;IADnB;EADgB,CAArB,CAAP;AAKD,CAZM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB;;AAcb,MAAM,cAAc,GAClB,WADqB,IAEoB;EACzC,QAAQ,WAAR;IACE,KAAK,WAAL;MACE,OAAO,SAAA,CAAA,KAAA,CAAM,qBAAN,CAA4B,SAAnC;;IACF,KAAK,SAAL;MACE,OAAO,SAAA,CAAA,KAAA,CAAM,qBAAN,CAA4B,OAAnC;;IACF,KAAK,oBAAL;MACE,OAAO,SAAA,CAAA,KAAA,CAAM,qBAAN,CAA4B,gBAAnC;;IACF;MACE,OAAO,SAAP;EARJ;AAUD,CAbD","sourcesContent":["import { Types, getGroupper } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseFocusableGroupOptions {\n  /**\n   * Behavior for the Tab key.\n   */\n  tabBehavior?: 'unlimited' | 'limited' | 'limited-trap-focus';\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support groupping.\n * @param options - Options to configure keyboard navigation\n */\nexport const useFocusableGroup = (options?: UseFocusableGroupOptions): Types.TabsterDOMAttribute => {\n  const tabster = useTabster();\n\n  if (tabster) {\n    getGroupper(tabster);\n  }\n\n  return useTabsterAttributes({\n    groupper: {\n      tabbability: getTabbability(options?.tabBehavior),\n    },\n  });\n};\n\nconst getTabbability = (\n  tabBehavior?: UseFocusableGroupOptions['tabBehavior'],\n): Types.GroupperTabbability | undefined => {\n  switch (tabBehavior) {\n    case 'unlimited':\n      return Types.GroupperTabbabilities.Unlimited;\n    case 'limited':\n      return Types.GroupperTabbabilities.Limited;\n    case 'limited-trap-focus':\n      return Types.GroupperTabbabilities.LimitedTrapFocus;\n    default:\n      return undefined;\n  }\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../src/hooks/useFocusableGroup.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AASA;;;AAGG;;;AACI,MAAM,iBAAiB,GAAI,OAAD,IAAkE;EACjG,MAAM,OAAO,GAAG,YAAA,CAAA,UAAA,EAAhB;;EAEA,IAAI,OAAJ,EAAa;IACX,SAAA,CAAA,WAAA,CAAY,OAAZ;EACD;;EAED,OAAO,sBAAA,CAAA,oBAAA,CAAqB;IAC1B,QAAQ,EAAE;MACR,WAAW,EAAE,cAAc,CAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,WAAV;IADnB;EADgB,CAArB,CAAP;AAKD,CAZM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB;;AAcb,MAAM,cAAc,GAClB,WADqB,IAEoB;EACzC,QAAQ,WAAR;IACE,KAAK,WAAL;MACE,OAAO,SAAA,CAAA,KAAA,CAAM,qBAAN,CAA4B,SAAnC;;IACF,KAAK,SAAL;MACE,OAAO,SAAA,CAAA,KAAA,CAAM,qBAAN,CAA4B,OAAnC;;IACF,KAAK,oBAAL;MACE,OAAO,SAAA,CAAA,KAAA,CAAM,qBAAN,CAA4B,gBAAnC;;IACF;MACE,OAAO,SAAP;EARJ;AAUD,CAbD","sourcesContent":["import { Types, getGroupper } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseFocusableGroupOptions {\n  /**\n   * Behavior for the Tab key.\n   */\n  tabBehavior?: 'unlimited' | 'limited' | 'limited-trap-focus';\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support groupping.\n * @param options - Options to configure keyboard navigation\n */\nexport const useFocusableGroup = (options?: UseFocusableGroupOptions): Types.TabsterDOMAttribute => {\n  const tabster = useTabster();\n\n  if (tabster) {\n    getGroupper(tabster);\n  }\n\n  return useTabsterAttributes({\n    groupper: {\n      tabbability: getTabbability(options?.tabBehavior),\n    },\n  });\n};\n\nconst getTabbability = (\n  tabBehavior?: UseFocusableGroupOptions['tabBehavior'],\n): Types.GroupperTabbability | undefined => {\n  switch (tabBehavior) {\n    case 'unlimited':\n      return Types.GroupperTabbabilities.Unlimited;\n    case 'limited':\n      return Types.GroupperTabbabilities.Limited;\n    case 'limited-trap-focus':\n      return Types.GroupperTabbabilities.LimitedTrapFocus;\n    default:\n      return undefined;\n  }\n};\n"],"sourceRoot":""}

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

@@ -1 +1 @@
-{"version":3,"sources":["hooks/useKeyboardNavAttribute.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;AAIA;;;;AAIG;;;AACH,SAAgB,uBAAhB,GAAuC;EACrC,MAAM;IAAE;EAAF,IAAqB,uBAAA,CAAA,kBAAA,EAA3B;EACA,MAAM,OAAO,GAAG,OAAA,CAAA,OAAA,CAAQ,MAAM,cAAc,IAAI,SAAA,CAAA,aAAA,CAAc,cAAc,CAAC,WAA7B,CAAhC,EAA4E,CAAC,cAAD,CAA5E,CAAhB;EACA,MAAM,GAAG,GAAG,OAAA,CAAA,MAAA,CAAU,IAAV,CAAZ;EACA,OAAA,CAAA,SAAA,CAAU,MAAK;IACb,IAAI,OAAJ,EAAa;MACX,mBAAmB,CAAC,GAAD,EAAM,WAAA,CAAA,sBAAN,EAA8B,OAAO,CAAC,wBAAR,EAA9B,CAAnB;;MACA,MAAM,EAAE,GAAoB,IAAI,IAAG;QACjC,mBAAmB,CAAC,GAAD,EAAM,WAAA,CAAA,sBAAN,EAA8B,IAA9B,CAAnB;MACD,CAFD;;MAGA,OAAO,CAAC,SAAR,CAAkB,EAAlB;MACA,OAAO,MAAM,OAAO,CAAC,WAAR,CAAoB,EAApB,CAAb;IACD;EACF,CATD,EASG,CAAC,OAAD,CATH;EAUA,OAAO,GAAP;AACD;;AAfD,OAAA,CAAA,uBAAA,GAAA,uBAAA;;AAiBA,SAAS,mBAAT,CAA6B,UAA7B,EAAiE,SAAjE,EAAoF,KAApF,EAAkG;EAChG,IAAI,CAAC,UAAU,CAAC,OAAhB,EAAyB;IACvB;EACD;;EACD,IAAI,KAAJ,EAAW;IACT,UAAU,CAAC,OAAX,CAAmB,YAAnB,CAAgC,SAAhC,EAA2C,EAA3C;EACD,CAFD,MAEO;IACL,UAAU,CAAC,OAAX,CAAmB,eAAnB,CAAmC,SAAnC;EACD;AACF","sourcesContent":["import { createKeyborg } from 'keyborg';\nimport { useEffect, useMemo, useRef } from 'react';\nimport { KEYBOARD_NAV_ATTRIBUTE } from '../focus/constants';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { KeyborgCallback } from 'keyborg/dist/Keyborg';\nimport type { RefObject } from 'react';\n\n/**\n * Instantiates [keyborg](https://github.com/microsoft/keyborg) and adds `data-keyboard-nav`\n * attribute to a referenced element to ensure keyboard navigation awareness\n * synced to keyborg logic without having to cause a re-render on react tree.\n */\nexport function useKeyboardNavAttribute<E extends HTMLElement>() {\n  const { targetDocument } = useFluent();\n  const keyborg = useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView!), [targetDocument]);\n  const ref = useRef<E>(null);\n  useEffect(() => {\n    if (keyborg) {\n      setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());\n      const cb: KeyborgCallback = next => {\n        setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, next);\n      };\n      keyborg.subscribe(cb);\n      return () => keyborg.unsubscribe(cb);\n    }\n  }, [keyborg]);\n  return ref;\n}\n\nfunction setBooleanAttribute(elementRef: RefObject<HTMLElement>, attribute: string, value: boolean) {\n  if (!elementRef.current) {\n    return;\n  }\n  if (value) {\n    elementRef.current.setAttribute(attribute, '');\n  } else {\n    elementRef.current.removeAttribute(attribute);\n  }\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../src/hooks/useKeyboardNavAttribute.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;AAIA;;;;AAIG;;;AACH,SAAgB,uBAAhB,GAAuC;EACrC,MAAM;IAAE;EAAF,IAAqB,uBAAA,CAAA,kBAAA,EAA3B;EACA,MAAM,OAAO,GAAG,OAAA,CAAA,OAAA,CAAQ,MAAM,cAAc,IAAI,SAAA,CAAA,aAAA,CAAc,cAAc,CAAC,WAA7B,CAAhC,EAA4E,CAAC,cAAD,CAA5E,CAAhB;EACA,MAAM,GAAG,GAAG,OAAA,CAAA,MAAA,CAAU,IAAV,CAAZ;EACA,OAAA,CAAA,SAAA,CAAU,MAAK;IACb,IAAI,OAAJ,EAAa;MACX,mBAAmB,CAAC,GAAD,EAAM,WAAA,CAAA,sBAAN,EAA8B,OAAO,CAAC,wBAAR,EAA9B,CAAnB;;MACA,MAAM,EAAE,GAAoB,IAAI,IAAG;QACjC,mBAAmB,CAAC,GAAD,EAAM,WAAA,CAAA,sBAAN,EAA8B,IAA9B,CAAnB;MACD,CAFD;;MAGA,OAAO,CAAC,SAAR,CAAkB,EAAlB;MACA,OAAO,MAAM,OAAO,CAAC,WAAR,CAAoB,EAApB,CAAb;IACD;EACF,CATD,EASG,CAAC,OAAD,CATH;EAUA,OAAO,GAAP;AACD;;AAfD,OAAA,CAAA,uBAAA,GAAA,uBAAA;;AAiBA,SAAS,mBAAT,CAA6B,UAA7B,EAAiE,SAAjE,EAAoF,KAApF,EAAkG;EAChG,IAAI,CAAC,UAAU,CAAC,OAAhB,EAAyB;IACvB;EACD;;EACD,IAAI,KAAJ,EAAW;IACT,UAAU,CAAC,OAAX,CAAmB,YAAnB,CAAgC,SAAhC,EAA2C,EAA3C;EACD,CAFD,MAEO;IACL,UAAU,CAAC,OAAX,CAAmB,eAAnB,CAAmC,SAAnC;EACD;AACF","sourcesContent":["import { createKeyborg } from 'keyborg';\nimport { useEffect, useMemo, useRef } from 'react';\nimport { KEYBOARD_NAV_ATTRIBUTE } from '../focus/constants';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { KeyborgCallback } from 'keyborg';\nimport type { RefObject } from 'react';\n\n/**\n * Instantiates [keyborg](https://github.com/microsoft/keyborg) and adds `data-keyboard-nav`\n * attribute to a referenced element to ensure keyboard navigation awareness\n * synced to keyborg logic without having to cause a re-render on react tree.\n */\nexport function useKeyboardNavAttribute<E extends HTMLElement>() {\n  const { targetDocument } = useFluent();\n  const keyborg = useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView!), [targetDocument]);\n  const ref = useRef<E>(null);\n  useEffect(() => {\n    if (keyborg) {\n      setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());\n      const cb: KeyborgCallback = next => {\n        setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, next);\n      };\n      keyborg.subscribe(cb);\n      return () => keyborg.unsubscribe(cb);\n    }\n  }, [keyborg]);\n  return ref;\n}\n\nfunction setBooleanAttribute(elementRef: RefObject<HTMLElement>, attribute: string, value: boolean) {\n  if (!elementRef.current) {\n    return;\n  }\n  if (value) {\n    elementRef.current.setAttribute(attribute, '');\n  } else {\n    elementRef.current.removeAttribute(attribute);\n  }\n}\n"],"sourceRoot":""}

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

@@ -1 +1 @@
-{"version":3,"sources":["hooks/useModalAttributes.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAyBA;;;;;;AAMG;;;AACI,MAAM,kBAAkB,GAAG,CAChC,OAAA,GAAqC,EADL,KAE8E;EAC9G,MAAM;IAAE,SAAF;IAAa,eAAb;IAA8B;EAA9B,IAAkD,OAAxD;EACA,MAAM,OAAO,GAAG,YAAA,CAAA,UAAA,EAAhB,CAF8G,CAG9G;;EACA,IAAI,OAAJ,EAAa;IACX,SAAA,CAAA,YAAA,CAAa,OAAb;IACA,SAAA,CAAA,UAAA,CAAW,OAAX;EACD;;EAED,MAAM,EAAE,GAAG,iBAAA,CAAA,KAAA,CAAM,QAAN,CAAX;EACA,MAAM,eAAe,GAAG,sBAAA,CAAA,oBAAA,CAAqB;IAC3C,OAAO,EAAE,EADkC;IAE3C,SAAS,EAAE;MACT,EADS;MAET,kBAAkB,EAAE,CAAC,SAFZ;MAGT,kBAAkB,EAAE,eAHX;MAIT,SAAS,EAAE;IAJF;EAFgC,CAArB,CAAxB;EAUA,MAAM,iBAAiB,GAAG,sBAAA,CAAA,oBAAA,CAAqB;IAC7C,OAAO,EAAE;EADoC,CAArB,CAA1B;EAIA,OAAO;IAAE,eAAF;IAAmB;EAAnB,CAAP;AACD,CA3BM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import { useId } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { getDeloser, getModalizer, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\nexport interface UseModalAttributesOptions {\n  /**\n   * Traps focus inside the elements the attributes are applied.\n   * Prefer this to `legacyTrapFocus`\n   * it forbids users to tab out of the focus trap into the actual browser.\n   */\n  trapFocus?: boolean;\n\n  /**\n   * Traps focus inside the elements the attributes are applied.\n   * This prop enables legacy behavior to match previous versions of Fluent and is not\n   * recommended for general use.\n   * Enabling `legacyTrapFocus` prevents users from tabbing out of the focus trap and into\n   * the actual browser. Prefer using `trapFocus` instead of this prop.\n   */\n  legacyTrapFocus?: boolean;\n\n  /**\n   * Always reachabled in Tab order\n   */\n  alwaysFocusable?: boolean;\n}\n\n/**\n * Applies modal dialog behaviour through DOM attributes\n * Modal element will focus trap and hide other content on the page\n * The trigger element will be focused if focus is lost after the modal element is removed\n *\n * @returns DOM attributes to apply to the modal element and its trigger\n */\nexport const useModalAttributes = (\n  options: UseModalAttributesOptions = {},\n): { modalAttributes: TabsterTypes.TabsterDOMAttribute; triggerAttributes: TabsterTypes.TabsterDOMAttribute } => {\n  const { trapFocus, alwaysFocusable, legacyTrapFocus } = options;\n  const tabster = useTabster();\n  // Initializes the modalizer and deloser APIs\n  if (tabster) {\n    getModalizer(tabster);\n    getDeloser(tabster);\n  }\n\n  const id = useId('modal-');\n  const modalAttributes = useTabsterAttributes({\n    deloser: {},\n    modalizer: {\n      id,\n      isOthersAccessible: !trapFocus,\n      isAlwaysAccessible: alwaysFocusable,\n      isTrapped: legacyTrapFocus,\n    },\n  });\n\n  const triggerAttributes = useTabsterAttributes({\n    deloser: {},\n  });\n\n  return { modalAttributes, triggerAttributes };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../src/hooks/useModalAttributes.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAyBA;;;;;;AAMG;;;AACI,MAAM,kBAAkB,GAAG,CAChC,OAAA,GAAqC,EADL,KAE8E;EAC9G,MAAM;IAAE,SAAF;IAAa,eAAb;IAA8B;EAA9B,IAAkD,OAAxD;EACA,MAAM,OAAO,GAAG,YAAA,CAAA,UAAA,EAAhB,CAF8G,CAG9G;;EACA,IAAI,OAAJ,EAAa;IACX,SAAA,CAAA,YAAA,CAAa,OAAb;IACA,SAAA,CAAA,UAAA,CAAW,OAAX;EACD;;EAED,MAAM,EAAE,GAAG,iBAAA,CAAA,KAAA,CAAM,QAAN,CAAX;EACA,MAAM,eAAe,GAAG,sBAAA,CAAA,oBAAA,CAAqB;IAC3C,OAAO,EAAE,EADkC;IAE3C,SAAS,EAAE;MACT,EADS;MAET,kBAAkB,EAAE,CAAC,SAFZ;MAGT,kBAAkB,EAAE,eAHX;MAIT,SAAS,EAAE;IAJF;EAFgC,CAArB,CAAxB;EAUA,MAAM,iBAAiB,GAAG,sBAAA,CAAA,oBAAA,CAAqB;IAC7C,OAAO,EAAE;EADoC,CAArB,CAA1B;EAIA,OAAO;IAAE,eAAF;IAAmB;EAAnB,CAAP;AACD,CA3BM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import { useId } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { getDeloser, getModalizer, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\nexport interface UseModalAttributesOptions {\n  /**\n   * Traps focus inside the elements the attributes are applied.\n   * Prefer this to `legacyTrapFocus`\n   * it forbids users to tab out of the focus trap into the actual browser.\n   */\n  trapFocus?: boolean;\n\n  /**\n   * Traps focus inside the elements the attributes are applied.\n   * This prop enables legacy behavior to match previous versions of Fluent and is not\n   * recommended for general use.\n   * Enabling `legacyTrapFocus` prevents users from tabbing out of the focus trap and into\n   * the actual browser. Prefer using `trapFocus` instead of this prop.\n   */\n  legacyTrapFocus?: boolean;\n\n  /**\n   * Always reachabled in Tab order\n   */\n  alwaysFocusable?: boolean;\n}\n\n/**\n * Applies modal dialog behaviour through DOM attributes\n * Modal element will focus trap and hide other content on the page\n * The trigger element will be focused if focus is lost after the modal element is removed\n *\n * @returns DOM attributes to apply to the modal element and its trigger\n */\nexport const useModalAttributes = (\n  options: UseModalAttributesOptions = {},\n): { modalAttributes: TabsterTypes.TabsterDOMAttribute; triggerAttributes: TabsterTypes.TabsterDOMAttribute } => {\n  const { trapFocus, alwaysFocusable, legacyTrapFocus } = options;\n  const tabster = useTabster();\n  // Initializes the modalizer and deloser APIs\n  if (tabster) {\n    getModalizer(tabster);\n    getDeloser(tabster);\n  }\n\n  const id = useId('modal-');\n  const modalAttributes = useTabsterAttributes({\n    deloser: {},\n    modalizer: {\n      id,\n      isOthersAccessible: !trapFocus,\n      isAlwaysAccessible: alwaysFocusable,\n      isTrapped: legacyTrapFocus,\n    },\n  });\n\n  const triggerAttributes = useTabsterAttributes({\n    deloser: {},\n  });\n\n  return { modalAttributes, triggerAttributes };\n};\n"],"sourceRoot":""}

package/lib-commonjs/hooks/useTabster.js

@@ -5,9 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTabster = void 0;
 
+const React = /*#__PURE__*/require("react");
+
 const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 
 const tabster_1 = /*#__PURE__*/require("tabster");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Tries to get a tabster instance on the current window or creates a new one
  * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary
@@ -18,23 +22,28 @@ const tabster_1 = /*#__PURE__*/require("tabster");
 
 
 const useTabster = () => {
-  var _a;
-
   const {
     targetDocument
   } = react_shared_contexts_1.useFluent_unstable();
   const defaultView = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) || undefined;
-  const tabsterOptions = {
-    autoRoot: {},
-    controlTab: false
-  };
-
-  if (!defaultView) {
-    return null;
-  } // TODO: worth memoizing once more tabster options are used
-
-
-  return (_a = tabster_1.getCurrentTabster(defaultView)) !== null && _a !== void 0 ? _a : tabster_1.createTabster(defaultView, tabsterOptions);
+  const tabster = React.useMemo(() => {
+    if (!defaultView) {
+      return null;
+    }
+
+    return tabster_1.createTabster(defaultView, {
+      autoRoot: {},
+      controlTab: false
+    });
+  }, [defaultView]);
+  react_utilities_1.useIsomorphicLayoutEffect(() => {
+    return () => {
+      if (tabster) {
+        tabster_1.disposeTabster(tabster);
+      }
+    };
+  }, [tabster]);
+  return tabster;
 };
 
 exports.useTabster = useTabster;

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

@@ -1 +1 @@
-{"version":3,"sources":["hooks/useTabster.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;AAEA;;;;;;AAMG;;;AACI,MAAM,UAAU,GAAG,MAAsC;;;EAC9D,MAAM;IAAE;EAAF,IAAqB,uBAAA,CAAA,kBAAA,EAA3B;EAEA,MAAM,WAAW,GAAG,CAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,WAAhB,KAA+B,SAAnD;EACA,MAAM,cAAc,GAAkC;IAAE,QAAQ,EAAE,EAAZ;IAAgB,UAAU,EAAE;EAA5B,CAAtD;;EAEA,IAAI,CAAC,WAAL,EAAkB;IAChB,OAAO,IAAP;EACD,CAR6D,CAU9D;;;EACA,OAAO,CAAA,EAAA,GAAA,SAAA,CAAA,iBAAA,CAAkB,WAAlB,CAAA,MAA8B,IAA9B,IAA8B,EAAA,KAAA,KAAA,CAA9B,GAA8B,EAA9B,GAAkC,SAAA,CAAA,aAAA,CAAc,WAAd,EAA2B,cAA3B,CAAzC;AACD,CAZM;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { getCurrentTabster, createTabster, Types as TabsterTypes } from 'tabster';\n\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster core instance\n */\nexport const useTabster = (): TabsterTypes.TabsterCore | null => {\n  const { targetDocument } = useFluent();\n\n  const defaultView = targetDocument?.defaultView || undefined;\n  const tabsterOptions: TabsterTypes.TabsterCoreProps = { autoRoot: {}, controlTab: false };\n\n  if (!defaultView) {\n    return null;\n  }\n\n  // TODO: worth memoizing once more tabster options are used\n  return getCurrentTabster(defaultView) ?? createTabster(defaultView, tabsterOptions);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../src/hooks/useTabster.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;;;;AAMG;;;AACI,MAAM,UAAU,GAAG,MAAsC;EAC9D,MAAM;IAAE;EAAF,IAAqB,uBAAA,CAAA,kBAAA,EAA3B;EAEA,MAAM,WAAW,GAAG,CAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,WAAhB,KAA+B,SAAnD;EACA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IACjC,IAAI,CAAC,WAAL,EAAkB;MAChB,OAAO,IAAP;IACD;;IAED,OAAO,SAAA,CAAA,aAAA,CAAc,WAAd,EAA2B;MAAE,QAAQ,EAAE,EAAZ;MAAgB,UAAU,EAAE;IAA5B,CAA3B,CAAP;EACD,CANe,EAMb,CAAC,WAAD,CANa,CAAhB;EAQA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;IAC7B,OAAO,MAAK;MACV,IAAI,OAAJ,EAAa;QACX,SAAA,CAAA,cAAA,CAAe,OAAf;MACD;IACF,CAJD;EAKD,CAND,EAMG,CAAC,OAAD,CANH;EAQA,OAAO,OAAP;AACD,CArBM;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { createTabster, disposeTabster, Types as TabsterTypes } from 'tabster';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster core instance\n */\nexport const useTabster = (): TabsterTypes.TabsterCore | null => {\n  const { targetDocument } = useFluent();\n\n  const defaultView = targetDocument?.defaultView || undefined;\n  const tabster = React.useMemo(() => {\n    if (!defaultView) {\n      return null;\n    }\n\n    return createTabster(defaultView, { autoRoot: {}, controlTab: false });\n  }, [defaultView]);\n\n  useIsomorphicLayoutEffect(() => {\n    return () => {\n      if (tabster) {\n        disposeTabster(tabster);\n      }\n    };\n  }, [tabster]);\n\n  return tabster;\n};\n"],"sourceRoot":""}

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

@@ -1 +1 @@
-{"version":3,"sources":["hooks/useTabsterAttributes.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAEA;;;AAGG;;;AACI,MAAM,oBAAoB,GAAI,KAAD,IAAgF;EAClH;EACA;EACA,YAAA,CAAA,UAAA;EAEA,OAAO,SAAA,CAAA,mBAAA,CAAoB,KAApB,CAAP;AACD,CANM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import { getTabsterAttribute, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\n/**\n * @internal\n * Hook that returns tabster attributes while ensuring tabster exists\n */\nexport const useTabsterAttributes = (props: TabsterTypes.TabsterAttributeProps): TabsterTypes.TabsterDOMAttribute => {\n  // A tabster instance is not necessary to generate tabster attributes\n  // but calling the hook will ensure that a tabster instance exists internally and avoids consumers doing the same\n  useTabster();\n\n  return getTabsterAttribute(props);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../src/hooks/useTabsterAttributes.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAEA;;;AAGG;;;AACI,MAAM,oBAAoB,GAAI,KAAD,IAAgF;EAClH;EACA;EACA,YAAA,CAAA,UAAA;EAEA,OAAO,SAAA,CAAA,mBAAA,CAAoB,KAApB,CAAP;AACD,CANM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import { getTabsterAttribute, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\n/**\n * @internal\n * Hook that returns tabster attributes while ensuring tabster exists\n */\nexport const useTabsterAttributes = (props: TabsterTypes.TabsterAttributeProps): TabsterTypes.TabsterDOMAttribute => {\n  // A tabster instance is not necessary to generate tabster attributes\n  // but calling the hook will ensure that a tabster instance exists internally and avoids consumers doing the same\n  useTabster();\n\n  return getTabsterAttribute(props);\n};\n"],"sourceRoot":""}

package/lib-commonjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createFocusOutlineStyle = exports.createCustomFocusIndicatorStyle = exports.useTabsterAttributes = exports.useModalAttributes = exports.useKeyboardNavAttribute = exports.useFocusFinders = exports.useFocusableGroup = exports.useArrowNavigationGroup = void 0;
+exports.applyFocusVisiblePolyfill = exports.createFocusOutlineStyle = exports.createCustomFocusIndicatorStyle = exports.useTabsterAttributes = exports.useModalAttributes = exports.useKeyboardNavAttribute = exports.useFocusWithin = exports.useFocusVisible = exports.useFocusFinders = exports.useFocusableGroup = exports.useArrowNavigationGroup = void 0;
 
 var index_1 = /*#__PURE__*/require("./hooks/index");
 
@@ -25,6 +25,18 @@ Object.defineProperty(exports, "useFocusFinders", {
     return index_1.useFocusFinders;
   }
 });
+Object.defineProperty(exports, "useFocusVisible", {
+  enumerable: true,
+  get: function () {
+    return index_1.useFocusVisible;
+  }
+});
+Object.defineProperty(exports, "useFocusWithin", {
+  enumerable: true,
+  get: function () {
+    return index_1.useFocusWithin;
+  }
+});
 Object.defineProperty(exports, "useKeyboardNavAttribute", {
   enumerable: true,
   get: function () {
@@ -58,4 +70,13 @@ Object.defineProperty(exports, "createFocusOutlineStyle", {
     return index_2.createFocusOutlineStyle;
   }
 });
+
+var index_3 = /*#__PURE__*/require("./focus/index");
+
+Object.defineProperty(exports, "applyFocusVisiblePolyfill", {
+  enumerable: true,
+  get: function () {
+    return index_3.applyFocusVisiblePolyfill;
+  }
+});
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,eAAA;EAAe;AAAf,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;;AAQF,IAAA,OAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iCAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,+BAAA;EAA+B;AAA/B,CAAA;AAAiC,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA","sourcesContent":["export {\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useFocusFinders,\n  useKeyboardNavAttribute,\n  useModalAttributes,\n  useTabsterAttributes,\n} from './hooks/index';\nexport type {\n  UseArrowNavigationGroupOptions,\n  UseFocusableGroupOptions,\n  UseModalAttributesOptions,\n} from './hooks/index';\n\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\n\nexport type {\n  CreateCustomFocusIndicatorStyleOptions,\n  CreateFocusOutlineStyleOptions,\n  FocusOutlineOffset,\n  FocusOutlineStyleOptions,\n} from './focus/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,eAAA;EAAe;AAAf,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,eAAA;EAAe;AAAf,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,cAAA;EAAc;AAAd,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;;AAQF,IAAA,OAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iCAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,+BAAA;EAA+B;AAA/B,CAAA;AAAiC,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;;AAS1C,IAAA,OAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA","sourcesContent":["export {\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useFocusFinders,\n  useFocusVisible,\n  useFocusWithin,\n  useKeyboardNavAttribute,\n  useModalAttributes,\n  useTabsterAttributes,\n} from './hooks/index';\nexport type {\n  UseArrowNavigationGroupOptions,\n  UseFocusableGroupOptions,\n  UseModalAttributesOptions,\n} from './hooks/index';\n\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\n\nexport type {\n  CreateCustomFocusIndicatorStyleOptions,\n  CreateFocusOutlineStyleOptions,\n  FocusOutlineOffset,\n  FocusOutlineStyleOptions,\n} from './focus/index';\n\nexport { applyFocusVisiblePolyfill } from './focus/index';\n"],"sourceRoot":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabster",
-  "version": "0.0.0-nightly-20220715-0418.1",
+  "version": "0.0.0-nightly-20221007-1237.1",
   "description": "Utilities for focus management and facade for tabster",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -15,14 +15,14 @@
     "build": "just-scripts build",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
-    "e2e": "yarn cypress run --component",
-    "e2e:local": "yarn cypress open --component",
+    "e2e": "cypress run --component",
+    "e2e:local": "cypress open --component",
     "just": "just-scripts",
     "lint": "just-scripts lint",
-    "storybook": "node ../../../scripts/storybook/runner",
+    "storybook": "start-storybook",
     "test": "jest --passWithNoTests",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-tabster/src && yarn docs",
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-tabster/src && yarn docs",
     "start": "yarn storybook",
     "type-check": "tsc -b tsconfig.json"
   },
@@ -31,12 +31,12 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@griffel/react": "^1.2.0",
-    "@fluentui/react-shared-contexts": "^0.0.0-nightly-20220715-0418.1",
-    "@fluentui/react-theme": "^0.0.0-nightly-20220715-0418.1",
-    "@fluentui/react-utilities": "^0.0.0-nightly-20220715-0418.1",
-    "keyborg": "^1.1.0",
-    "tabster": "^1.4.2",
+    "@griffel/react": "^1.3.0",
+    "@fluentui/react-shared-contexts": "^0.0.0-nightly-20221007-1237.1",
+    "@fluentui/react-theme": "^0.0.0-nightly-20221007-1237.1",
+    "@fluentui/react-utilities": "^0.0.0-nightly-20221007-1237.1",
+    "keyborg": "^1.2.1",
+    "tabster": "^2.1.2",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
@@ -45,11 +45,7 @@
     "react": ">=16.8.0 <18.0.0",
     "react-dom": ">=16.8.0 <18.0.0"
   },
-  "beachball": {
-    "disallowedChangeTypes": [
-      "major"
-    ]
-  },
+  "beachball": {},
   "exports": {
     ".": {
       "types": "./lib/index.d.ts",

package/dist/tsdoc-metadata.json

@@ -1,11 +0,0 @@
-// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
-// It should be published with your NPM package.  It should not be tracked by Git.
-{
-  "tsdocVersion": "0.12",
-  "toolPackages": [
-    {
-      "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.18.1"
-    }
-  ]
-}