@fluentui/react-tabster 9.5.7 → 9.6.1

package/lib-commonjs/hooks/useKeyboardNavAttribute.js

@@ -1,45 +1,44 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "useKeyboardNavAttribute", {
+    enumerable: true,
+    get: ()=>useKeyboardNavAttribute
 });
-exports.useKeyboardNavAttribute = void 0;
-const keyborg_1 = /*#__PURE__*/require("keyborg");
-const react_1 = /*#__PURE__*/require("react");
-const constants_1 = /*#__PURE__*/require("../focus/constants");
-const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
-/**
- * Instantiates [keyborg](https://github.com/microsoft/keyborg) and adds `data-keyboard-nav`
- * attribute to a referenced element to ensure keyboard navigation awareness
- * synced to keyborg logic without having to cause a re-render on react tree.
- */
+const _keyborg = require("keyborg");
+const _react = require("react");
+const _constants = require("../focus/constants");
+const _reactSharedContexts = require("@fluentui/react-shared-contexts");
 function useKeyboardNavAttribute() {
-  const {
-    targetDocument
-  } = react_shared_contexts_1.useFluent_unstable();
-  const keyborg = react_1.useMemo(() => targetDocument && keyborg_1.createKeyborg(targetDocument.defaultView), [targetDocument]);
-  const ref = react_1.useRef(null);
-  react_1.useEffect(() => {
-    if (keyborg) {
-      setBooleanAttribute(ref, constants_1.KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());
-      const cb = next => {
-        setBooleanAttribute(ref, constants_1.KEYBOARD_NAV_ATTRIBUTE, next);
-      };
-      keyborg.subscribe(cb);
-      return () => keyborg.unsubscribe(cb);
-    }
-  }, [keyborg]);
-  return ref;
+    const { targetDocument  } = (0, _reactSharedContexts.useFluent_unstable)();
+    const keyborg = (0, _react.useMemo)(()=>targetDocument && (0, _keyborg.createKeyborg)(targetDocument.defaultView), [
+        targetDocument
+    ]);
+    const ref = (0, _react.useRef)(null);
+    (0, _react.useEffect)(()=>{
+        if (keyborg) {
+            setBooleanAttribute(ref, _constants.KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());
+            const cb = (next)=>{
+                setBooleanAttribute(ref, _constants.KEYBOARD_NAV_ATTRIBUTE, next);
+            };
+            keyborg.subscribe(cb);
+            return ()=>keyborg.unsubscribe(cb);
+        }
+    }, [
+        keyborg
+    ]);
+    return ref;
 }
-exports.useKeyboardNavAttribute = useKeyboardNavAttribute;
 function setBooleanAttribute(elementRef, attribute, value) {
-  if (!elementRef.current) {
-    return;
-  }
-  if (value) {
-    elementRef.current.setAttribute(attribute, '');
-  } else {
-    elementRef.current.removeAttribute(attribute);
-  }
-}
+    if (!elementRef.current) {
+        return;
+    }
+    if (value) {
+        elementRef.current.setAttribute(attribute, '');
+    } else {
+        elementRef.current.removeAttribute(attribute);
+    }
+} //# sourceMappingURL=useKeyboardNavAttribute.js.map
+
 //# sourceMappingURL=useKeyboardNavAttribute.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["keyborg_1","require","react_1","constants_1","react_shared_contexts_1","useKeyboardNavAttribute","targetDocument","useFluent_unstable","keyborg","useMemo","createKeyborg","defaultView","ref","useRef","useEffect","setBooleanAttribute","KEYBOARD_NAV_ATTRIBUTE","isNavigatingWithKeyboard","cb","next","subscribe","unsubscribe","exports","elementRef","attribute","value","current","setAttribute","removeAttribute"],"sources":["../src/packages/react-components/react-tabster/src/hooks/useKeyboardNavAttribute.ts"],"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"],"mappings":";;;;;;AAAA,MAAAA,SAAA,gBAAAC,OAAA;AACA,MAAAC,OAAA,gBAAAD,OAAA;AACA,MAAAE,WAAA,gBAAAF,OAAA;AACA,MAAAG,uBAAA,gBAAAH,OAAA;AAIA;;;;;AAKA,SAAgBI,uBAAuBA,CAAA;EACrC,MAAM;IAAEC;EAAc,CAAE,GAAGF,uBAAA,CAAAG,kBAAS,EAAE;EACtC,MAAMC,OAAO,GAAGN,OAAA,CAAAO,OAAO,CAAC,MAAMH,cAAc,IAAIN,SAAA,CAAAU,aAAa,CAACJ,cAAc,CAACK,WAAY,CAAC,EAAE,CAACL,cAAc,CAAC,CAAC;EAC7G,MAAMM,GAAG,GAAGV,OAAA,CAAAW,MAAM,CAAI,IAAI,CAAC;EAC3BX,OAAA,CAAAY,SAAS,CAAC,MAAK;IACb,IAAIN,OAAO,EAAE;MACXO,mBAAmB,CAACH,GAAG,EAAET,WAAA,CAAAa,sBAAsB,EAAER,OAAO,CAACS,wBAAwB,EAAE,CAAC;MACpF,MAAMC,EAAE,GAAoBC,IAAI,IAAG;QACjCJ,mBAAmB,CAACH,GAAG,EAAET,WAAA,CAAAa,sBAAsB,EAAEG,IAAI,CAAC;MACxD,CAAC;MACDX,OAAO,CAACY,SAAS,CAACF,EAAE,CAAC;MACrB,OAAO,MAAMV,OAAO,CAACa,WAAW,CAACH,EAAE,CAAC;;EAExC,CAAC,EAAE,CAACV,OAAO,CAAC,CAAC;EACb,OAAOI,GAAG;AACZ;AAfAU,OAAA,CAAAjB,uBAAA,GAAAA,uBAAA;AAiBA,SAASU,mBAAmBA,CAACQ,UAAkC,EAAEC,SAAiB,EAAEC,KAAc;EAChG,IAAI,CAACF,UAAU,CAACG,OAAO,EAAE;IACvB;;EAEF,IAAID,KAAK,EAAE;IACTF,UAAU,CAACG,OAAO,CAACC,YAAY,CAACH,SAAS,EAAE,EAAE,CAAC;GAC/C,MAAM;IACLD,UAAU,CAACG,OAAO,CAACE,eAAe,CAACJ,SAAS,CAAC;;AAEjD"}
+{"version":3,"sources":["../../lib/hooks/useKeyboardNavAttribute.js"],"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';\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() {\n  const {\n    targetDocument\n  } = useFluent();\n  const keyborg = useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView), [targetDocument]);\n  const ref = useRef(null);\n  useEffect(() => {\n    if (keyborg) {\n      setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());\n      const cb = 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}\nfunction setBooleanAttribute(elementRef, attribute, value) {\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//# sourceMappingURL=useKeyboardNavAttribute.js.map"],"names":["useKeyboardNavAttribute","targetDocument","useFluent","keyborg","useMemo","createKeyborg","defaultView","ref","useRef","useEffect","setBooleanAttribute","KEYBOARD_NAV_ATTRIBUTE","isNavigatingWithKeyboard","cb","next","subscribe","unsubscribe","elementRef","attribute","value","current","setAttribute","removeAttribute"],"mappings":";;;;+BASgBA;;aAAAA;;yBATc;uBACa;2BACJ;qCACS;AAMzC,SAASA,0BAA0B;IACxC,MAAM,EACJC,eAAc,EACf,GAAGC,IAAAA,uCAAS;IACb,MAAMC,UAAUC,IAAAA,cAAO,EAAC,IAAMH,kBAAkBI,IAAAA,sBAAa,EAACJ,eAAeK,WAAW,GAAG;QAACL;KAAe;IAC3G,MAAMM,MAAMC,IAAAA,aAAM,EAAC,IAAI;IACvBC,IAAAA,gBAAS,EAAC,IAAM;QACd,IAAIN,SAAS;YACXO,oBAAoBH,KAAKI,iCAAsB,EAAER,QAAQS,wBAAwB;YACjF,MAAMC,KAAKC,CAAAA,OAAQ;gBACjBJ,oBAAoBH,KAAKI,iCAAsB,EAAEG;YACnD;YACAX,QAAQY,SAAS,CAACF;YAClB,OAAO,IAAMV,QAAQa,WAAW,CAACH;QACnC,CAAC;IACH,GAAG;QAACV;KAAQ;IACZ,OAAOI;AACT;AACA,SAASG,oBAAoBO,UAAU,EAAEC,SAAS,EAAEC,KAAK,EAAE;IACzD,IAAI,CAACF,WAAWG,OAAO,EAAE;QACvB;IACF,CAAC;IACD,IAAID,OAAO;QACTF,WAAWG,OAAO,CAACC,YAAY,CAACH,WAAW;IAC7C,OAAO;QACLD,WAAWG,OAAO,CAACE,eAAe,CAACJ;IACrC,CAAC;AACH,EACA,mDAAmD"}

package/lib-commonjs/hooks/useModalAttributes.js

@@ -1,49 +1,40 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "useModalAttributes", {
+    enumerable: true,
+    get: ()=>useModalAttributes
 });
-exports.useModalAttributes = void 0;
-const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-const useTabsterAttributes_1 = /*#__PURE__*/require("./useTabsterAttributes");
-const tabster_1 = /*#__PURE__*/require("tabster");
-const useTabster_1 = /*#__PURE__*/require("./useTabster");
-/**
- * Applies modal dialog behaviour through DOM attributes
- * Modal element will focus trap and hide other content on the page
- * The trigger element will be focused if focus is lost after the modal element is removed
- *
- * @returns DOM attributes to apply to the modal element and its trigger
- */
-const useModalAttributes = (options = {}) => {
-  const {
-    trapFocus,
-    alwaysFocusable,
-    legacyTrapFocus
-  } = options;
-  const tabster = useTabster_1.useTabster();
-  // Initializes the modalizer and deloser APIs
-  if (tabster) {
-    tabster_1.getModalizer(tabster);
-    tabster_1.getDeloser(tabster);
-  }
-  const id = react_utilities_1.useId('modal-', options.id);
-  const modalAttributes = useTabsterAttributes_1.useTabsterAttributes({
-    deloser: {},
-    modalizer: {
-      id,
-      isOthersAccessible: !trapFocus,
-      isAlwaysAccessible: alwaysFocusable,
-      isTrapped: legacyTrapFocus && trapFocus
+const _reactUtilities = require("@fluentui/react-utilities");
+const _useTabsterAttributes = require("./useTabsterAttributes");
+const _tabster = require("tabster");
+const _useTabster = require("./useTabster");
+const useModalAttributes = (options = {})=>{
+    const { trapFocus , alwaysFocusable , legacyTrapFocus  } = options;
+    const tabster = (0, _useTabster.useTabster)();
+    // Initializes the modalizer and deloser APIs
+    if (tabster) {
+        (0, _tabster.getModalizer)(tabster);
+        (0, _tabster.getDeloser)(tabster);
     }
-  });
-  const triggerAttributes = useTabsterAttributes_1.useTabsterAttributes({
-    deloser: {}
-  });
-  return {
-    modalAttributes,
-    triggerAttributes
-  };
-};
-exports.useModalAttributes = useModalAttributes;
+    const id = (0, _reactUtilities.useId)('modal-', options.id);
+    const modalAttributes = (0, _useTabsterAttributes.useTabsterAttributes)({
+        deloser: {},
+        modalizer: {
+            id,
+            isOthersAccessible: !trapFocus,
+            isAlwaysAccessible: alwaysFocusable,
+            isTrapped: legacyTrapFocus && trapFocus
+        }
+    });
+    const triggerAttributes = (0, _useTabsterAttributes.useTabsterAttributes)({
+        deloser: {}
+    });
+    return {
+        modalAttributes,
+        triggerAttributes
+    };
+}; //# sourceMappingURL=useModalAttributes.js.map
+
 //# sourceMappingURL=useModalAttributes.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["react_utilities_1","require","useTabsterAttributes_1","tabster_1","useTabster_1","useModalAttributes","options","trapFocus","alwaysFocusable","legacyTrapFocus","tabster","useTabster","getModalizer","getDeloser","id","useId","modalAttributes","useTabsterAttributes","deloser","modalizer","isOthersAccessible","isAlwaysAccessible","isTrapped","triggerAttributes","exports"],"sources":["../src/packages/react-components/react-tabster/src/hooks/useModalAttributes.ts"],"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   * Id to use for the modalizer. An id will be generated if not provided.\n   */\n  id?: string;\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-', options.id);\n  const modalAttributes = useTabsterAttributes({\n    deloser: {},\n    modalizer: {\n      id,\n      isOthersAccessible: !trapFocus,\n      isAlwaysAccessible: alwaysFocusable,\n      isTrapped: legacyTrapFocus && trapFocus,\n    },\n  });\n\n  const triggerAttributes = useTabsterAttributes({\n    deloser: {},\n  });\n\n  return { modalAttributes, triggerAttributes };\n};\n"],"mappings":";;;;;;AAAA,MAAAA,iBAAA,gBAAAC,OAAA;AACA,MAAAC,sBAAA,gBAAAD,OAAA;AACA,MAAAE,SAAA,gBAAAF,OAAA;AACA,MAAAG,YAAA,gBAAAH,OAAA;AA8BA;;;;;;;AAOO,MAAMI,kBAAkB,GAAGA,CAChCC,OAAA,GAAqC,EAAE,KACuE;EAC9G,MAAM;IAAEC,SAAS;IAAEC,eAAe;IAAEC;EAAe,CAAE,GAAGH,OAAO;EAC/D,MAAMI,OAAO,GAAGN,YAAA,CAAAO,UAAU,EAAE;EAC5B;EACA,IAAID,OAAO,EAAE;IACXP,SAAA,CAAAS,YAAY,CAACF,OAAO,CAAC;IACrBP,SAAA,CAAAU,UAAU,CAACH,OAAO,CAAC;;EAGrB,MAAMI,EAAE,GAAGd,iBAAA,CAAAe,KAAK,CAAC,QAAQ,EAAET,OAAO,CAACQ,EAAE,CAAC;EACtC,MAAME,eAAe,GAAGd,sBAAA,CAAAe,oBAAoB,CAAC;IAC3CC,OAAO,EAAE,EAAE;IACXC,SAAS,EAAE;MACTL,EAAE;MACFM,kBAAkB,EAAE,CAACb,SAAS;MAC9Bc,kBAAkB,EAAEb,eAAe;MACnCc,SAAS,EAAEb,eAAe,IAAIF;;GAEjC,CAAC;EAEF,MAAMgB,iBAAiB,GAAGrB,sBAAA,CAAAe,oBAAoB,CAAC;IAC7CC,OAAO,EAAE;GACV,CAAC;EAEF,OAAO;IAAEF,eAAe;IAAEO;EAAiB,CAAE;AAC/C,CAAC;AA3BYC,OAAA,CAAAnB,kBAAkB,GAAAA,kBAAA"}
+{"version":3,"sources":["../../lib/hooks/useModalAttributes.js"],"sourcesContent":["import { useId } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { getDeloser, getModalizer } from 'tabster';\nimport { useTabster } from './useTabster';\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 = (options = {}) => {\n  const {\n    trapFocus,\n    alwaysFocusable,\n    legacyTrapFocus\n  } = options;\n  const tabster = useTabster();\n  // Initializes the modalizer and deloser APIs\n  if (tabster) {\n    getModalizer(tabster);\n    getDeloser(tabster);\n  }\n  const id = useId('modal-', options.id);\n  const modalAttributes = useTabsterAttributes({\n    deloser: {},\n    modalizer: {\n      id,\n      isOthersAccessible: !trapFocus,\n      isAlwaysAccessible: alwaysFocusable,\n      isTrapped: legacyTrapFocus && trapFocus\n    }\n  });\n  const triggerAttributes = useTabsterAttributes({\n    deloser: {}\n  });\n  return {\n    modalAttributes,\n    triggerAttributes\n  };\n};\n//# sourceMappingURL=useModalAttributes.js.map"],"names":["useModalAttributes","options","trapFocus","alwaysFocusable","legacyTrapFocus","tabster","useTabster","getModalizer","getDeloser","id","useId","modalAttributes","useTabsterAttributes","deloser","modalizer","isOthersAccessible","isAlwaysAccessible","isTrapped","triggerAttributes"],"mappings":";;;;+BAWaA;;aAAAA;;gCAXS;sCACe;yBACI;4BACd;AAQpB,MAAMA,qBAAqB,CAACC,UAAU,CAAC,CAAC,GAAK;IAClD,MAAM,EACJC,UAAS,EACTC,gBAAe,EACfC,gBAAe,EAChB,GAAGH;IACJ,MAAMI,UAAUC,IAAAA,sBAAU;IAC1B,6CAA6C;IAC7C,IAAID,SAAS;QACXE,IAAAA,qBAAY,EAACF;QACbG,IAAAA,mBAAU,EAACH;IACb,CAAC;IACD,MAAMI,KAAKC,IAAAA,qBAAK,EAAC,UAAUT,QAAQQ,EAAE;IACrC,MAAME,kBAAkBC,IAAAA,0CAAoB,EAAC;QAC3CC,SAAS,CAAC;QACVC,WAAW;YACTL;YACAM,oBAAoB,CAACb;YACrBc,oBAAoBb;YACpBc,WAAWb,mBAAmBF;QAChC;IACF;IACA,MAAMgB,oBAAoBN,IAAAA,0CAAoB,EAAC;QAC7CC,SAAS,CAAC;IACZ;IACA,OAAO;QACLF;QACAO;IACF;AACF,GACA,8CAA8C"}

package/lib-commonjs/hooks/useTabster.js

@@ -1,42 +1,40 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "useTabster", {
+    enumerable: true,
+    get: ()=>useTabster
 });
-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
- *
- * @internal
- * @returns Tabster core instance
- */
-const useTabster = () => {
-  const {
-    targetDocument
-  } = react_shared_contexts_1.useFluent_unstable();
-  const defaultView = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) || undefined;
-  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;
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactSharedContexts = require("@fluentui/react-shared-contexts");
+const _tabster = require("tabster");
+const _reactUtilities = require("@fluentui/react-utilities");
+const useTabster = ()=>{
+    const { targetDocument  } = (0, _reactSharedContexts.useFluent_unstable)();
+    const defaultView = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) || undefined;
+    const tabster = _react.useMemo(()=>{
+        if (!defaultView) {
+            return null;
+        }
+        return (0, _tabster.createTabster)(defaultView, {
+            autoRoot: {},
+            controlTab: false
+        });
+    }, [
+        defaultView
+    ]);
+    (0, _reactUtilities.useIsomorphicLayoutEffect)(()=>{
+        return ()=>{
+            if (tabster) {
+                (0, _tabster.disposeTabster)(tabster);
+            }
+        };
+    }, [
+        tabster
+    ]);
+    return tabster;
+}; //# sourceMappingURL=useTabster.js.map
+
 //# sourceMappingURL=useTabster.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","require","react_shared_contexts_1","tabster_1","react_utilities_1","useTabster","targetDocument","useFluent_unstable","defaultView","undefined","tabster","useMemo","createTabster","autoRoot","controlTab","useIsomorphicLayoutEffect","disposeTabster","exports"],"sources":["../src/packages/react-components/react-tabster/src/hooks/useTabster.ts"],"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"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,uBAAA,gBAAAD,OAAA;AACA,MAAAE,SAAA,gBAAAF,OAAA;AACA,MAAAG,iBAAA,gBAAAH,OAAA;AAEA;;;;;;;AAOO,MAAMI,UAAU,GAAGA,CAAA,KAAsC;EAC9D,MAAM;IAAEC;EAAc,CAAE,GAAGJ,uBAAA,CAAAK,kBAAS,EAAE;EAEtC,MAAMC,WAAW,GAAG,CAAAF,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEE,WAAW,KAAIC,SAAS;EAC5D,MAAMC,OAAO,GAAGV,KAAK,CAACW,OAAO,CAAC,MAAK;IACjC,IAAI,CAACH,WAAW,EAAE;MAChB,OAAO,IAAI;;IAGb,OAAOL,SAAA,CAAAS,aAAa,CAACJ,WAAW,EAAE;MAAEK,QAAQ,EAAE,EAAE;MAAEC,UAAU,EAAE;IAAK,CAAE,CAAC;EACxE,CAAC,EAAE,CAACN,WAAW,CAAC,CAAC;EAEjBJ,iBAAA,CAAAW,yBAAyB,CAAC,MAAK;IAC7B,OAAO,MAAK;MACV,IAAIL,OAAO,EAAE;QACXP,SAAA,CAAAa,cAAc,CAACN,OAAO,CAAC;;IAE3B,CAAC;EACH,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,OAAOA,OAAO;AAChB,CAAC;AArBYO,OAAA,CAAAZ,UAAU,GAAAA,UAAA"}
+{"version":3,"sources":["../../lib/hooks/useTabster.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { createTabster, disposeTabster } from 'tabster';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\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 = () => {\n  const {\n    targetDocument\n  } = useFluent();\n  const defaultView = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) || undefined;\n  const tabster = React.useMemo(() => {\n    if (!defaultView) {\n      return null;\n    }\n    return createTabster(defaultView, {\n      autoRoot: {},\n      controlTab: false\n    });\n  }, [defaultView]);\n  useIsomorphicLayoutEffect(() => {\n    return () => {\n      if (tabster) {\n        disposeTabster(tabster);\n      }\n    };\n  }, [tabster]);\n  return tabster;\n};\n//# sourceMappingURL=useTabster.js.map"],"names":["useTabster","targetDocument","useFluent","defaultView","undefined","tabster","React","useMemo","createTabster","autoRoot","controlTab","useIsomorphicLayoutEffect","disposeTabster"],"mappings":";;;;+BAWaA;;aAAAA;;;6DAXU;qCACyB;yBACF;gCACJ;AAQnC,MAAMA,aAAa,IAAM;IAC9B,MAAM,EACJC,eAAc,EACf,GAAGC,IAAAA,uCAAS;IACb,MAAMC,cAAc,AAACF,CAAAA,mBAAmB,IAAI,IAAIA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeE,WAAW,AAAD,KAAMC;IACpH,MAAMC,UAAUC,OAAMC,OAAO,CAAC,IAAM;QAClC,IAAI,CAACJ,aAAa;YAChB,OAAO,IAAI;QACb,CAAC;QACD,OAAOK,IAAAA,sBAAa,EAACL,aAAa;YAChCM,UAAU,CAAC;YACXC,YAAY,KAAK;QACnB;IACF,GAAG;QAACP;KAAY;IAChBQ,IAAAA,yCAAyB,EAAC,IAAM;QAC9B,OAAO,IAAM;YACX,IAAIN,SAAS;gBACXO,IAAAA,uBAAc,EAACP;YACjB,CAAC;QACH;IACF,GAAG;QAACA;KAAQ;IACZ,OAAOA;AACT,GACA,sCAAsC"}

package/lib-commonjs/hooks/useTabsterAttributes.js

@@ -1,20 +1,18 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "useTabsterAttributes", {
+    enumerable: true,
+    get: ()=>useTabsterAttributes
 });
-exports.useTabsterAttributes = void 0;
-const tabster_1 = /*#__PURE__*/require("tabster");
-const useTabster_1 = /*#__PURE__*/require("./useTabster");
-/**
- * @internal
- * Hook that returns tabster attributes while ensuring tabster exists
- */
-const useTabsterAttributes = props => {
-  // A tabster instance is not necessary to generate tabster attributes
-  // but calling the hook will ensure that a tabster instance exists internally and avoids consumers doing the same
-  useTabster_1.useTabster();
-  return tabster_1.getTabsterAttribute(props);
-};
-exports.useTabsterAttributes = useTabsterAttributes;
+const _tabster = require("tabster");
+const _useTabster = require("./useTabster");
+const useTabsterAttributes = (props)=>{
+    // A tabster instance is not necessary to generate tabster attributes
+    // but calling the hook will ensure that a tabster instance exists internally and avoids consumers doing the same
+    (0, _useTabster.useTabster)();
+    return (0, _tabster.getTabsterAttribute)(props);
+}; //# sourceMappingURL=useTabsterAttributes.js.map
+
 //# sourceMappingURL=useTabsterAttributes.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["tabster_1","require","useTabster_1","useTabsterAttributes","props","useTabster","getTabsterAttribute","exports"],"sources":["../src/packages/react-components/react-tabster/src/hooks/useTabsterAttributes.ts"],"sourcesContent":["import { getTabsterAttribute, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\n/**\n * @internal\n * Hook that returns tabster attributes while ensuring tabster exists\n */\nexport const useTabsterAttributes = (props: TabsterTypes.TabsterAttributeProps): TabsterTypes.TabsterDOMAttribute => {\n  // A tabster instance is not necessary to generate tabster attributes\n  // but calling the hook will ensure that a tabster instance exists internally and avoids consumers doing the same\n  useTabster();\n\n  return getTabsterAttribute(props);\n};\n"],"mappings":";;;;;;AAAA,MAAAA,SAAA,gBAAAC,OAAA;AACA,MAAAC,YAAA,gBAAAD,OAAA;AAEA;;;;AAIO,MAAME,oBAAoB,GAAIC,KAAyC,IAAsC;EAClH;EACA;EACAF,YAAA,CAAAG,UAAU,EAAE;EAEZ,OAAOL,SAAA,CAAAM,mBAAmB,CAACF,KAAK,CAAC;AACnC,CAAC;AANYG,OAAA,CAAAJ,oBAAoB,GAAAA,oBAAA"}
+{"version":3,"sources":["../../lib/hooks/useTabsterAttributes.js"],"sourcesContent":["import { getTabsterAttribute } from 'tabster';\nimport { useTabster } from './useTabster';\n/**\n * @internal\n * Hook that returns tabster attributes while ensuring tabster exists\n */\nexport const useTabsterAttributes = props => {\n  // A tabster instance is not necessary to generate tabster attributes\n  // but calling the hook will ensure that a tabster instance exists internally and avoids consumers doing the same\n  useTabster();\n  return getTabsterAttribute(props);\n};\n//# sourceMappingURL=useTabsterAttributes.js.map"],"names":["useTabsterAttributes","props","useTabster","getTabsterAttribute"],"mappings":";;;;+BAMaA;;aAAAA;;yBANuB;4BACT;AAKpB,MAAMA,uBAAuBC,CAAAA,QAAS;IAC3C,qEAAqE;IACrE,iHAAiH;IACjHC,IAAAA,sBAAU;IACV,OAAOC,IAAAA,4BAAmB,EAACF;AAC7B,GACA,gDAAgD"}

package/lib-commonjs/index.js

@@ -1,76 +1,28 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-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");
-Object.defineProperty(exports, "useArrowNavigationGroup", {
-  enumerable: true,
-  get: function () {
-    return index_1.useArrowNavigationGroup;
-  }
-});
-Object.defineProperty(exports, "useFocusableGroup", {
-  enumerable: true,
-  get: function () {
-    return index_1.useFocusableGroup;
-  }
-});
-Object.defineProperty(exports, "useFocusFinders", {
-  enumerable: true,
-  get: function () {
-    return index_1.useFocusFinders;
-  }
-});
-Object.defineProperty(exports, "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 () {
-    return index_1.useKeyboardNavAttribute;
-  }
-});
-Object.defineProperty(exports, "useModalAttributes", {
-  enumerable: true,
-  get: function () {
-    return index_1.useModalAttributes;
-  }
-});
-Object.defineProperty(exports, "useTabsterAttributes", {
-  enumerable: true,
-  get: function () {
-    return index_1.useTabsterAttributes;
-  }
-});
-var index_2 = /*#__PURE__*/require("./focus/index");
-Object.defineProperty(exports, "createCustomFocusIndicatorStyle", {
-  enumerable: true,
-  get: function () {
-    return index_2.createCustomFocusIndicatorStyle;
-  }
-});
-Object.defineProperty(exports, "createFocusOutlineStyle", {
-  enumerable: true,
-  get: function () {
-    return index_2.createFocusOutlineStyle;
-  }
-});
-var index_3 = /*#__PURE__*/require("./focus/index");
-Object.defineProperty(exports, "applyFocusVisiblePolyfill", {
-  enumerable: true,
-  get: function () {
-    return index_3.applyFocusVisiblePolyfill;
-  }
-});
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useArrowNavigationGroup: ()=>_index.useArrowNavigationGroup,
+    useFocusableGroup: ()=>_index.useFocusableGroup,
+    useFocusFinders: ()=>_index.useFocusFinders,
+    useFocusVisible: ()=>_index.useFocusVisible,
+    useFocusWithin: ()=>_index.useFocusWithin,
+    useKeyboardNavAttribute: ()=>_index.useKeyboardNavAttribute,
+    useModalAttributes: ()=>_index.useModalAttributes,
+    useTabsterAttributes: ()=>_index.useTabsterAttributes,
+    createCustomFocusIndicatorStyle: ()=>_index1.createCustomFocusIndicatorStyle,
+    createFocusOutlineStyle: ()=>_index1.createFocusOutlineStyle,
+    applyFocusVisiblePolyfill: ()=>_index1.applyFocusVisiblePolyfill
+});
+const _index = require("./hooks/index");
+const _index1 = require("./focus/index");
+ //# sourceMappingURL=index.js.map
+
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["index_1","require","Object","defineProperty","exports","enumerable","get","useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useModalAttributes","useTabsterAttributes","index_2","createCustomFocusIndicatorStyle","createFocusOutlineStyle","index_3","applyFocusVisiblePolyfill"],"sources":["../src/packages/react-components/react-tabster/src/index.ts"],"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"],"mappings":";;;;;;AAAA,IAAAA,OAAA,gBAAAC,OAAA;AACEC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAO,uBAAuB;EAAA;AAAA;AACvBL,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAQ,iBAAiB;EAAA;AAAA;AACjBN,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAS,eAAe;EAAA;AAAA;AACfP,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAU,eAAe;EAAA;AAAA;AACfR,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAW,cAAc;EAAA;AAAA;AACdT,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAY,uBAAuB;EAAA;AAAA;AACvBV,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAa,kBAAkB;EAAA;AAAA;AAClBX,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAc,oBAAoB;EAAA;AAAA;AAQtB,IAAAC,OAAA,gBAAAd,OAAA;AAASC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAS,OAAA,CAAAC,+BAA+B;EAAA;AAAA;AAAEd,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAS,OAAA,CAAAE,uBAAuB;EAAA;AAAA;AASjE,IAAAC,OAAA,gBAAAjB,OAAA;AAASC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAY,OAAA,CAAAC,yBAAyB;EAAA;AAAA"}
+{"version":3,"sources":["../lib/index.js"],"sourcesContent":["export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useFocusVisible, useFocusWithin, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes } from './hooks/index';\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\nexport { applyFocusVisiblePolyfill } from './focus/index';\n//# sourceMappingURL=index.js.map"],"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useModalAttributes","useTabsterAttributes","createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill"],"mappings":";;;;;;;;;;;IAASA,uBAAuB,MAAvBA,8BAAuB;IAAEC,iBAAiB,MAAjBA,wBAAiB;IAAEC,eAAe,MAAfA,sBAAe;IAAEC,eAAe,MAAfA,sBAAe;IAAEC,cAAc,MAAdA,qBAAc;IAAEC,uBAAuB,MAAvBA,8BAAuB;IAAEC,kBAAkB,MAAlBA,yBAAkB;IAAEC,oBAAoB,MAApBA,2BAAoB;IAC/JC,+BAA+B,MAA/BA,uCAA+B;IAAEC,uBAAuB,MAAvBA,+BAAuB;IACxDC,yBAAyB,MAAzBA,iCAAyB;;uBAF8I;wBACvG;CAEzE,iCAAiC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabster",
-  "version": "9.5.7",
+  "version": "9.6.1",
   "description": "Utilities for focus management and facade for tabster",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -21,7 +21,7 @@
     "lint": "just-scripts lint",
     "test": "jest --passWithNoTests",
     "type-check": "tsc -b tsconfig.json",
-    "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
+    "generate-api": "just-scripts generate-api"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
@@ -31,12 +31,12 @@
   },
   "dependencies": {
     "@griffel/react": "^1.5.2",
-    "@fluentui/react-shared-contexts": "^9.3.1",
-    "@fluentui/react-theme": "^9.1.6",
-    "@fluentui/react-utilities": "^9.7.0",
+    "@fluentui/react-shared-contexts": "^9.3.2",
+    "@fluentui/react-theme": "^9.1.7",
+    "@fluentui/react-utilities": "^9.7.2",
+    "@swc/helpers": "^0.4.14",
     "keyborg": "^2.0.0",
-    "tabster": "^4.1.1",
-    "tslib": "^2.1.0"
+    "tabster": "^4.1.1"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0 <19.0.0",
@@ -53,6 +53,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "node": "./lib-commonjs/index.js",
       "import": "./lib/index.js",
       "require": "./lib-commonjs/index.js"
     },

package/lib-amd/focus/constants.js

@@ -1,20 +0,0 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.defaultOptions = exports.FOCUS_WITHIN_ATTR = exports.FOCUS_VISIBLE_ATTR = exports.KEYBOARD_NAV_SELECTOR = exports.KEYBOARD_NAV_ATTRIBUTE = void 0;
-    exports.KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav';
-    exports.KEYBOARD_NAV_SELECTOR = ":global([" + exports.KEYBOARD_NAV_ATTRIBUTE + "])";
-    /**
-     * @internal
-     */
-    exports.FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';
-    /**
-     * @internal
-     */
-    exports.FOCUS_WITHIN_ATTR = 'data-fui-focus-within';
-    exports.defaultOptions = {
-        style: {},
-        selector: 'focus',
-    };
-});
-//# sourceMappingURL=constants.js.map

package/lib-amd/focus/constants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-tabster/src/focus/constants.ts"],"names":[],"mappings":";;;;IAAa,QAAA,sBAAsB,GAAG,mBAA4B,CAAC;IACtD,QAAA,qBAAqB,GAAG,cAAY,8BAAsB,OAAa,CAAC;IAErF;;OAEG;IACU,QAAA,kBAAkB,GAAG,wBAAwB,CAAC;IAE3D;;OAEG;IACU,QAAA,iBAAiB,GAAG,uBAAuB,CAAC;IAC5C,QAAA,cAAc,GAAG;QAC5B,KAAK,EAAE,EAAE;QACT,QAAQ,EAAE,OAAO;KACT,CAAC","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-amd/focus/createCustomFocusIndicatorStyle.js

@@ -1,27 +0,0 @@
-define(["require", "exports", "tslib", "./constants"], function (require, exports, tslib_1, constants_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.createCustomFocusIndicatorStyle = void 0;
-    /**
-     * Creates a style for @see makeStyles that includes the necessary selectors for focus.
-     * Should be used only when @see createFocusOutlineStyle does not fit requirements
-     *
-     * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles
-     * @param options - Configure the style of the focus outline
-     */
-    function createCustomFocusIndicatorStyle(style, _a) {
-        var _b, _c;
-        var _d = _a === void 0 ? constants_1.defaultOptions : _a, _e = _d.selector, selector = _e === void 0 ? constants_1.defaultOptions.selector : _e, _f = _d.enableOutline, enableOutline = _f === void 0 ? false : _f;
-        return tslib_1.__assign(tslib_1.__assign({ ':focus': {
-                outlineStyle: enableOutline ? undefined : 'none',
-            }, ':focus-visible': {
-                outlineStyle: enableOutline ? undefined : 'none',
-            } }, (selector === 'focus' && (_b = {},
-            _b["&[" + constants_1.FOCUS_VISIBLE_ATTR + "]"] = style,
-            _b))), (selector === 'focus-within' && (_c = {},
-            _c["&[" + constants_1.FOCUS_WITHIN_ATTR + "]:" + selector] = style,
-            _c)));
-    }
-    exports.createCustomFocusIndicatorStyle = createCustomFocusIndicatorStyle;
-});
-//# sourceMappingURL=createCustomFocusIndicatorStyle.js.map

package/lib-amd/focus/createCustomFocusIndicatorStyle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"createCustomFocusIndicatorStyle.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":";;;;IAsBA;;;;;;OAMG;IACH,SAAgB,+BAA+B,CAC7C,KAAa,EACb,EAG0D;;YAH1D,qBAG4C,0BAAc,KAAA,EAFxD,gBAAkC,EAAlC,QAAQ,mBAAG,0BAAc,CAAC,QAAQ,KAAA,EAClC,qBAAqB,EAArB,aAAa,mBAAG,KAAK,KAAA;QAGvB,2CACE,QAAQ,EAAE;gBACR,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;aACjD,EACD,gBAAgB,EAAE;gBAChB,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;aACjD,IAEE,CAAC,QAAQ,KAAK,OAAO;YACtB,GAAC,OAAK,8BAAkB,MAAG,IAAG,KAAK;eACpC,CAAC,GACC,CAAC,QAAQ,KAAK,cAAc;YAC7B,GAAC,OAAK,6BAAiB,UAAK,QAAU,IAAG,KAAK;eAC/C,CAAC,EACF;IACJ,CAAC;IAtBD,0EAsBC","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  /**\n   * Control if the indicator appears when the corresponding element is focused,\n   * or any child is focused within the corresponding element.\n   * @default 'focus'\n   */\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-amd/focus/createFocusOutlineStyle.js

@@ -1,36 +0,0 @@
-define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react", "./createCustomFocusIndicatorStyle", "./constants"], function (require, exports, tslib_1, react_theme_1, react_1, createCustomFocusIndicatorStyle_1, constants_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.createFocusOutlineStyle = void 0;
-    /**
-     * NOTE: the element with the focus outline needs to have `position: relative` so that the
-     * pseudo element can be properly positioned.
-     *
-     * @param options - Configures the style of the focus outline
-     * @returns focus outline styles object
-     */
-    var getFocusOutlineStyles = function (options) {
-        var _a, _b, _c, _d;
-        var outlineRadius = options.outlineRadius, outlineColor = options.outlineColor, outlineOffset = options.outlineOffset, outlineWidth = options.outlineWidth;
-        var outlineOffsetTop = ((_a = outlineOffset) === null || _a === void 0 ? void 0 : _a.top) || outlineOffset;
-        var outlineOffsetBottom = ((_b = outlineOffset) === null || _b === void 0 ? void 0 : _b.bottom) || outlineOffset;
-        var outlineOffsetLeft = ((_c = outlineOffset) === null || _c === void 0 ? void 0 : _c.left) || outlineOffset;
-        var outlineOffsetRight = ((_d = outlineOffset) === null || _d === void 0 ? void 0 : _d.right) || outlineOffset;
-        return tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor('transparent')), { '::after': tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ content: '""', position: 'absolute', pointerEvents: 'none', zIndex: 1 }, react_1.shorthands.borderStyle('solid')), react_1.shorthands.borderWidth(outlineWidth)), react_1.shorthands.borderRadius(outlineRadius)), react_1.shorthands.borderColor(outlineColor)), { top: !outlineOffset ? "-" + outlineWidth : "calc(0px - " + outlineWidth + " - " + outlineOffsetTop + ")", bottom: !outlineOffset ? "-" + outlineWidth : "calc(0px - " + outlineWidth + " - " + outlineOffsetBottom + ")", left: !outlineOffset ? "-" + outlineWidth : "calc(0px - " + outlineWidth + " - " + outlineOffsetLeft + ")", right: !outlineOffset ? "-" + outlineWidth : "calc(0px - " + outlineWidth + " - " + outlineOffsetRight + ")" }) });
-    };
-    /**
-     * NOTE: The element with the focus outline needs to have `position: relative` so that the
-     * pseudo element can be properly positioned.
-     *
-     * @param options - Configure the style of the focus outline
-     * @returns focus outline styles object for @see makeStyles
-     */
-    var createFocusOutlineStyle = function (_a) {
-        var _b = _a === void 0 ? constants_1.defaultOptions : _a, _c = _b.selector, selector = _c === void 0 ? constants_1.defaultOptions.selector : _c, _d = _b.style, style = _d === void 0 ? constants_1.defaultOptions.style : _d;
-        return createCustomFocusIndicatorStyle_1.createCustomFocusIndicatorStyle(getFocusOutlineStyles(tslib_1.__assign({ outlineColor: react_theme_1.tokens.colorStrokeFocus2, outlineRadius: react_theme_1.tokens.borderRadiusMedium, 
-            // FIXME: tokens.strokeWidthThick causes some weird bugs
-            outlineWidth: '2px' }, style)), { selector: selector });
-    };
-    exports.createFocusOutlineStyle = createFocusOutlineStyle;
-});
-//# sourceMappingURL=createFocusOutlineStyle.js.map