@fluentui/react-tabster 9.6.0 → 9.6.1

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.6.0",
+  "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.1",
+    "@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

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

@@ -1 +0,0 @@
-{"version":3,"file":"createFocusOutlineStyle.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts"],"names":[],"mappings":";;;;IAwBA;;;;;;OAMG;IACH,IAAM,qBAAqB,GAAG,UAAC,OAAiC;;QACtD,IAAA,aAAa,GAAgD,OAAO,cAAvD,EAAE,YAAY,GAAkC,OAAO,aAAzC,EAAE,aAAa,GAAmB,OAAO,cAA1B,EAAE,YAAY,GAAK,OAAO,aAAZ,CAAa;QAE7E,IAAM,gBAAgB,GAAG,CAAA,MAAC,aAAoC,0CAAE,GAAG,KAAI,aAAa,CAAC;QACrF,IAAM,mBAAmB,GAAG,CAAA,MAAC,aAAoC,0CAAE,MAAM,KAAI,aAAa,CAAC;QAC3F,IAAM,iBAAiB,GAAG,CAAA,MAAC,aAAoC,0CAAE,IAAI,KAAI,aAAa,CAAC;QACvF,IAAM,kBAAkB,GAAG,CAAA,MAAC,aAAoC,0CAAE,KAAK,KAAI,aAAa,CAAC;QAEzF,6CACK,kBAAU,CAAC,WAAW,CAAC,aAAa,CAAC,KACxC,SAAS,yFACP,OAAO,EAAE,IAAI,EACb,QAAQ,EAAE,UAAU,EACpB,aAAa,EAAE,MAAM,EACrB,MAAM,EAAE,CAAC,IAEN,kBAAU,CAAC,WAAW,CAAC,OAAO,CAAC,GAC/B,kBAAU,CAAC,WAAW,CAAC,YAAY,CAAC,GACpC,kBAAU,CAAC,YAAY,CAAC,aAAa,CAAC,GACtC,kBAAU,CAAC,WAAW,CAAC,YAAY,CAAC,KAEvC,GAAG,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,MAAI,YAAc,CAAC,CAAC,CAAC,gBAAc,YAAY,WAAM,gBAAgB,MAAG,EAC9F,MAAM,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,MAAI,YAAc,CAAC,CAAC,CAAC,gBAAc,YAAY,WAAM,mBAAmB,MAAG,EACpG,IAAI,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,MAAI,YAAc,CAAC,CAAC,CAAC,gBAAc,YAAY,WAAM,iBAAiB,MAAG,EAChG,KAAK,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,MAAI,YAAc,CAAC,CAAC,CAAC,gBAAc,YAAY,WAAM,kBAAkB,MAAG,OAEpG;IACJ,CAAC,CAAC;IAEF;;;;;;OAMG;IACI,IAAM,uBAAuB,GAAG,UAAC,EAGU;YAHV,qBAGJ,0BAAc,KAAA,EAFhD,gBAAkC,EAAlC,QAAQ,mBAAG,0BAAc,CAAC,QAAQ,KAAA,EAClC,aAA4B,EAA5B,KAAK,mBAAG,0BAAc,CAAC,KAAK,KAAA;QAE5B,OAAA,iEAA+B,CAC7B,qBAAqB,oBACnB,YAAY,EAAE,oBAAM,CAAC,iBAAiB,EACtC,aAAa,EAAE,oBAAM,CAAC,kBAAkB;YACxC,wDAAwD;YACxD,YAAY,EAAE,KAAK,IAChB,KAAK,EACR,EACF,EAAE,QAAQ,UAAA,EAAE,CACb;IATD,CASC,CAAC;IAbS,QAAA,uBAAuB,2BAahC","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-amd/focus/focusVisiblePolyfill.js

@@ -1,76 +0,0 @@
-define(["require", "exports", "@fluentui/react-utilities", "keyborg", "./constants"], function (require, exports, react_utilities_1, keyborg_1, constants_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.applyFocusVisiblePolyfill = void 0;
-    /**
-     * @internal
-     * @param scope - Applies the ponyfill to all DOM children
-     * @param targetWindow - window
-     */
-    function applyFocusVisiblePolyfill(scope, targetWindow) {
-        if (alreadyInScope(scope)) {
-            // Focus visible polyfill already applied at this scope
-            return function () { return undefined; };
-        }
-        var state = {
-            current: undefined,
-        };
-        var keyborg = keyborg_1.createKeyborg(targetWindow);
-        // When navigation mode changes remove the focus-visible selector
-        keyborg.subscribe(function (isNavigatingWithKeyboard) {
-            if (!isNavigatingWithKeyboard && state.current) {
-                removeFocusVisibleClass(state.current);
-                state.current = undefined;
-            }
-        });
-        // Keyborg's focusin event is delegated so it's only registered once on the window
-        // and contains metadata about the focus event
-        var keyborgListener = function (e) {
-            if (state.current) {
-                removeFocusVisibleClass(state.current);
-                state.current = undefined;
-            }
-            if (keyborg.isNavigatingWithKeyboard() && react_utilities_1.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
-        var blurListener = function (e) {
-            if (!e.relatedTarget || (react_utilities_1.isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget))) {
-                if (state.current) {
-                    removeFocusVisibleClass(state.current);
-                    state.current = undefined;
-                }
-            }
-        };
-        scope.addEventListener(keyborg_1.KEYBORG_FOCUSIN, keyborgListener);
-        scope.addEventListener('focusout', blurListener);
-        scope.focusVisible = true;
-        // Return disposer
-        return function () {
-            scope.removeEventListener(keyborg_1.KEYBORG_FOCUSIN, keyborgListener);
-            scope.removeEventListener('focusout', blurListener);
-            delete scope.focusVisible;
-            keyborg_1.disposeKeyborg(keyborg);
-        };
-    }
-    exports.applyFocusVisiblePolyfill = applyFocusVisiblePolyfill;
-    function applyFocusVisibleClass(el) {
-        el.setAttribute(constants_1.FOCUS_VISIBLE_ATTR, '');
-    }
-    function removeFocusVisibleClass(el) {
-        el.removeAttribute(constants_1.FOCUS_VISIBLE_ATTR);
-    }
-    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-amd/focus/focusVisiblePolyfill.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"focusVisiblePolyfill.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-tabster/src/focus/focusVisiblePolyfill.ts"],"names":[],"mappings":";;;;IAuBA;;;;OAIG;IACH,SAAgB,yBAAyB,CAAC,KAAkB,EAAE,YAAoB;QAChF,IAAI,cAAc,CAAC,KAAK,CAAC,EAAE;YACzB,uDAAuD;YACvD,OAAO,cAAM,OAAA,SAAS,EAAT,CAAS,CAAC;SACxB;QAED,IAAM,KAAK,GAAsB;YAC/B,OAAO,EAAE,SAAS;SACnB,CAAC;QAEF,IAAM,OAAO,GAAG,uBAAa,CAAC,YAAY,CAAC,CAAC;QAE5C,iEAAiE;QACjE,OAAO,CAAC,SAAS,CAAC,UAAA,wBAAwB;YACxC,IAAI,CAAC,wBAAwB,IAAI,KAAK,CAAC,OAAO,EAAE;gBAC9C,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;gBACvC,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC;aAC3B;QACH,CAAC,CAAC,CAAC;QAEH,kFAAkF;QAClF,8CAA8C;QAC9C,IAAM,eAAe,GAAG,UAAC,CAAsB;YAC7C,IAAI,KAAK,CAAC,OAAO,EAAE;gBACjB,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;gBACvC,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC;aAC3B;YAED,IAAI,OAAO,CAAC,wBAAwB,EAAE,IAAI,+BAAa,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE;gBAC7E,+EAA+E;gBAC/E,KAAK,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC;gBACzB,sBAAsB,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;aACvC;QACH,CAAC,CAAC;QAEF,iFAAiF;QACjF,IAAM,YAAY,GAAG,UAAC,CAAa;YACjC,IAAI,CAAC,CAAC,CAAC,aAAa,IAAI,CAAC,+BAAa,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,EAAE;gBAC5F,IAAI,KAAK,CAAC,OAAO,EAAE;oBACjB,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;oBACvC,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC;iBAC3B;aACF;QACH,CAAC,CAAC;QAEF,KAAK,CAAC,gBAAgB,CAAC,yBAAe,EAAE,eAAmC,CAAC,CAAC;QAC7E,KAAK,CAAC,gBAAgB,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;QAChD,KAA0C,CAAC,YAAY,GAAG,IAAI,CAAC;QAEhE,kBAAkB;QAClB,OAAO;YACL,KAAK,CAAC,mBAAmB,CAAC,yBAAe,EAAE,eAAmC,CAAC,CAAC;YAChF,KAAK,CAAC,mBAAmB,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;YACpD,OAAQ,KAA0C,CAAC,YAAY,CAAC;YAChE,wBAAc,CAAC,OAAO,CAAC,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC;IAxDD,8DAwDC;IAED,SAAS,sBAAsB,CAAC,EAAe;QAC7C,EAAE,CAAC,YAAY,CAAC,8BAAkB,EAAE,EAAE,CAAC,CAAC;IAC1C,CAAC;IAED,SAAS,uBAAuB,CAAC,EAAe;QAC9C,EAAE,CAAC,eAAe,CAAC,8BAAkB,CAAC,CAAC;IACzC,CAAC;IAED,SAAS,cAAc,CAAC,EAAkC;QACxD,IAAI,CAAC,EAAE,EAAE;YACP,OAAO,KAAK,CAAC;SACd;QAED,IAAK,EAAuC,CAAC,YAAY,EAAE;YACzD,OAAO,IAAI,CAAC;SACb;QAED,OAAO,cAAc,CAAC,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,aAAa,CAAC,CAAC;IAC3C,CAAC","sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport { KEYBORG_FOCUSIN, KeyborgFocusInEvent, createKeyborg, disposeKeyborg } from 'keyborg';\n\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 targetWindow - window\n */\nexport function applyFocusVisiblePolyfill(scope: HTMLElement, targetWindow: 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(targetWindow);\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 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"]}