@fluentui/react-tabster 9.0.0-nightly.f81b28ceb3.1 → 9.0.0-rc.1

package/lib/hooks/useFocusIndicatorStyle.js

@@ -1,4 +1,4 @@
-import { __assign } from "tslib";
+import { tokens } from '@fluentui/react-theme';
 import { KEYBOARD_NAV_SELECTOR } from '../symbols';
 /**
  * NOTE: the element with the focus outline needs to have `position: relative` so that the
@@ -8,17 +8,19 @@ import { KEYBOARD_NAV_SELECTOR } from '../symbols';
  * @returns focus outline styles object
  */
 
-var getFocusOutlineStyles = function (options) {
+const getFocusOutlineStyles = 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;
+  const {
+    outlineRadius,
+    outlineColor,
+    outlineOffset,
+    outlineWidth
+  } = options;
+  const outlineOffsetTop = ((_a = outlineOffset) === null || _a === void 0 ? void 0 : _a.top) || outlineOffset;
+  const outlineOffsetBottom = ((_b = outlineOffset) === null || _b === void 0 ? void 0 : _b.bottom) || outlineOffset;
+  const outlineOffsetLeft = ((_c = outlineOffset) === null || _c === void 0 ? void 0 : _c.left) || outlineOffset;
+  const outlineOffsetRight = ((_d = outlineOffset) === null || _d === void 0 ? void 0 : _d.right) || outlineOffset;
   return {
     borderColor: 'transparent',
     ':after': {
@@ -31,15 +33,15 @@ var getFocusOutlineStyles = function (options) {
       borderWidth: outlineWidth,
       borderRadius: outlineRadius,
       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 + ")"
+      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})`
     }
   };
 };
 
-var defaultOptions = {
+const defaultOptions = {
   selector: 'focus'
 };
 /**
@@ -51,46 +53,32 @@ var defaultOptions = {
  * @returns focus outline styles object for @see makeStyles
  */
 
-export var createFocusOutlineStyle = function (theme, options) {
-  var _a;
-
-  if (options === void 0) {
-    options = __assign({
-      style: {}
-    }, defaultOptions);
-  }
-
-  return _a = {
-    ':focus-visible': {
-      outline: 'none'
-    }
-  }, _a[KEYBOARD_NAV_SELECTOR + " :" + (options.selector || defaultOptions.selector)] = getFocusOutlineStyles(__assign({
-    outlineColor: theme.colorStrokeFocus2,
-    outlineRadius: theme.borderRadiusMedium,
-    // FIXME: theme.global.strokeWidth.thick causes some weird bugs
-    outlineWidth: '2px'
-  }, options.style)), _a;
-};
+export const createFocusOutlineStyle = (options = {
+  style: {},
+  ...defaultOptions
+}) => ({
+  ':focus-visible': {
+    outlineStyle: 'none'
+  },
+  [`${KEYBOARD_NAV_SELECTOR} :${options.selector || defaultOptions.selector}`]: getFocusOutlineStyles({
+    outlineColor: tokens.colorStrokeFocus2,
+    outlineRadius: tokens.borderRadiusMedium,
+    // FIXME: tokens.strokeWidthThick causes some weird bugs
+    outlineWidth: '2px',
+    ...options.style
+  })
+});
 /**
- * Creates a style rule for @see makeStyles that includes the necessary selectors for focus.
+ * 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 rule - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes
+ * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes
  */
 
-export var createCustomFocusIndicatorStyle = function (rule, options) {
-  if (options === void 0) {
-    options = defaultOptions;
-  }
-
-  return function (theme) {
-    var _a;
-
-    return _a = {
-      ':focus-visible': {
-        outline: 'none'
-      }
-    }, _a[KEYBOARD_NAV_SELECTOR + " :" + (options.selector || defaultOptions.selector)] = typeof rule === 'function' ? rule(theme) : rule, _a;
-  };
-};
+export const createCustomFocusIndicatorStyle = (style, options = defaultOptions) => ({
+  ':focus-visible': {
+    outlineStyle: 'none'
+  },
+  [`${KEYBOARD_NAV_SELECTOR} :${options.selector || defaultOptions.selector}`]: style
+});
 //# sourceMappingURL=useFocusIndicatorStyle.js.map

package/lib/hooks/useFocusIndicatorStyle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useFocusIndicatorStyle.ts"],"names":[],"mappings":"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","sourceRoot":""}
+{"version":3,"sources":["../../src/hooks/useFocusIndicatorStyle.ts"],"names":[],"mappings":"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","sourceRoot":""}

package/lib/hooks/useFocusableGroup.d.ts

@@ -1,23 +1,9 @@
 import { Types } from 'tabster';
-export declare enum FocusableGroupTabBehavior {
-    /**
-     * Tab will cycle into and out of the groupper content.
-     */
-    Unlimited,
-    /**
-     * Tab will cycle out of the container, but not into it.
-     */
-    Limited,
-    /**
-     * Tab only cycles the inner elements.
-     */
-    LimitedTrapFocus
-}
 export interface UseFocusableGroupOptions {
     /**
-     * Type of TAB key interaction.
+     * Behavior for the Tab key.
      */
-    tabBehavior?: FocusableGroupTabBehavior;
+    tabBehavior?: 'unlimited' | 'limited' | 'limitedTrapFocus';
 }
 /**
  * A hook that returns the necessary tabster attributes to support groupping.

package/lib/hooks/useFocusableGroup.js

@@ -1,32 +1,13 @@
 import { Types, getGroupper } from 'tabster';
 import { useTabsterAttributes } from './useTabsterAttributes';
 import { useTabster } from './useTabster';
-export var FocusableGroupTabBehavior;
-
-(function (FocusableGroupTabBehavior) {
-  /**
-   * Tab will cycle into and out of the groupper content.
-   */
-  FocusableGroupTabBehavior[FocusableGroupTabBehavior["Unlimited"] = Types.GroupperTabbabilities.Unlimited] = "Unlimited";
-  /**
-   * Tab will cycle out of the container, but not into it.
-   */
-
-  FocusableGroupTabBehavior[FocusableGroupTabBehavior["Limited"] = Types.GroupperTabbabilities.Limited] = "Limited";
-  /**
-   * Tab only cycles the inner elements.
-   */
-
-  FocusableGroupTabBehavior[FocusableGroupTabBehavior["LimitedTrapFocus"] = Types.GroupperTabbabilities.LimitedTrapFocus] = "LimitedTrapFocus";
-})(FocusableGroupTabBehavior || (FocusableGroupTabBehavior = {}));
 /**
  * A hook that returns the necessary tabster attributes to support groupping.
  * @param options - Options to configure keyboard navigation
  */
 
-
-export var useFocusableGroup = function (options) {
-  var tabster = useTabster();
+export const useFocusableGroup = options => {
+  const tabster = useTabster();
 
   if (tabster) {
     getGroupper(tabster);
@@ -34,8 +15,24 @@ export var useFocusableGroup = function (options) {
 
   return useTabsterAttributes({
     groupper: {
-      tabbability: options === null || options === void 0 ? void 0 : options.tabBehavior
+      tabbability: getTabbability(options === null || options === void 0 ? void 0 : options.tabBehavior)
     }
   });
 };
+
+const getTabbability = tabBehavior => {
+  switch (tabBehavior) {
+    case 'unlimited':
+      return Types.GroupperTabbabilities.Unlimited;
+
+    case 'limited':
+      return Types.GroupperTabbabilities.Limited;
+
+    case 'limitedTrapFocus':
+      return Types.GroupperTabbabilities.LimitedTrapFocus;
+
+    default:
+      return undefined;
+  }
+};
 //# sourceMappingURL=useFocusableGroup.js.map

package/lib/hooks/useFocusableGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useFocusableGroup.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,WAAhB,QAAmC,SAAnC;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,UAAT,QAA2B,cAA3B;AAEA,OAAA,IAAY,yBAAZ;;AAAA,CAAA,UAAY,yBAAZ,EAAqC;AACnC;;AAEG;AACH,EAAA,yBAAA,CAAA,yBAAA,CAAA,WAAA,CAAA,GAAY,KAAK,CAAC,qBAAN,CAA4B,SAAxC,CAAA,GAAiD,WAAjD;AACA;;AAEG;;AACH,EAAA,yBAAA,CAAA,yBAAA,CAAA,SAAA,CAAA,GAAU,KAAK,CAAC,qBAAN,CAA4B,OAAtC,CAAA,GAA6C,SAA7C;AACA;;AAEG;;AACH,EAAA,yBAAA,CAAA,yBAAA,CAAA,kBAAA,CAAA,GAAmB,KAAK,CAAC,qBAAN,CAA4B,gBAA/C,CAAA,GAA+D,kBAA/D;AACD,CAbD,EAAY,yBAAyB,KAAzB,yBAAyB,GAAA,EAAA,CAArC;AAsBA;;;AAGG;;;AACH,OAAO,IAAM,iBAAiB,GAAG,UAAC,OAAD,EAAmC;AAClE,MAAM,OAAO,GAAG,UAAU,EAA1B;;AAEA,MAAI,OAAJ,EAAa;AACX,IAAA,WAAW,CAAC,OAAD,CAAX;AACD;;AAED,SAAO,oBAAoB,CAAC;AAC1B,IAAA,QAAQ,EAAE;AACR,MAAA,WAAW,EAAE,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE;AADd;AADgB,GAAD,CAA3B;AAKD,CAZM","sourceRoot":""}
+{"version":3,"sources":["../../src/hooks/useFocusableGroup.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,WAAhB,QAAmC,SAAnC;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,UAAT,QAA2B,cAA3B;AASA;;;AAGG;;AACH,OAAO,MAAM,iBAAiB,GAAI,OAAD,IAAuC;AACtE,QAAM,OAAO,GAAG,UAAU,EAA1B;;AAEA,MAAI,OAAJ,EAAa;AACX,IAAA,WAAW,CAAC,OAAD,CAAX;AACD;;AAED,SAAO,oBAAoB,CAAC;AAC1B,IAAA,QAAQ,EAAE;AACR,MAAA,WAAW,EAAE,cAAc,CAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,WAAV;AADnB;AADgB,GAAD,CAA3B;AAKD,CAZM;;AAcP,MAAM,cAAc,GAClB,WADqB,IAEoB;AACzC,UAAQ,WAAR;AACE,SAAK,WAAL;AACE,aAAO,KAAK,CAAC,qBAAN,CAA4B,SAAnC;;AACF,SAAK,SAAL;AACE,aAAO,KAAK,CAAC,qBAAN,CAA4B,OAAnC;;AACF,SAAK,kBAAL;AACE,aAAO,KAAK,CAAC,qBAAN,CAA4B,gBAAnC;;AACF;AACE,aAAO,SAAP;AARJ;AAUD,CAbD","sourceRoot":""}

package/lib/hooks/useKeyboardNavAttribute.js

@@ -7,23 +7,21 @@ import { useFluent } from '@fluentui/react-shared-contexts';
  */
 
 export function useKeyboardNavAttribute() {
-  var targetDocument = useFluent().targetDocument;
-  var keyborg = useMemo(function () {
-    return targetDocument && createKeyborg(targetDocument.defaultView);
-  }, [targetDocument]);
-  var ref = useRef(null);
-  useEffect(function () {
+  const {
+    targetDocument
+  } = useFluent();
+  const keyborg = useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView), [targetDocument]);
+  const ref = useRef(null);
+  useEffect(() => {
     if (keyborg) {
       setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());
 
-      var cb_1 = function (next) {
+      const cb = next => {
         setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, next);
       };
 
-      keyborg.subscribe(cb_1);
-      return function () {
-        return keyborg.unsubscribe(cb_1);
-      };
+      keyborg.subscribe(cb);
+      return () => keyborg.unsubscribe(cb);
     }
   }, [keyborg]);
   return ref;

package/lib/hooks/useKeyboardNavAttribute.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useKeyboardNavAttribute.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,SAA9B;AACA,SAAS,SAAT,EAAoB,OAApB,EAA6B,MAA7B,QAA2C,OAA3C;AACA,SAAS,sBAAT,QAAuC,YAAvC;AACA,SAAS,SAAT,QAA0B,iCAA1B;AAIA;;AAEG;;AACH,OAAM,SAAU,uBAAV,GAAiC;AAC7B,MAAA,cAAc,GAAK,SAAS,GAAd,cAAd;AACR,MAAM,OAAO,GAAG,OAAO,CAAC,YAAA;AAAM,WAAA,cAAc,IAAI,aAAa,CAAC,cAAc,CAA9C,WAA+B,CAA/B;AAA4D,GAAnE,EAAqE,CAAC,cAAD,CAArE,CAAvB;AACA,MAAM,GAAG,GAAG,MAAM,CAAI,IAAJ,CAAlB;AACA,EAAA,SAAS,CAAC,YAAA;AACR,QAAI,OAAJ,EAAa;AACX,MAAA,mBAAmB,CAAC,GAAD,EAAM,sBAAN,EAA8B,OAAO,CAAC,wBAAR,EAA9B,CAAnB;;AACA,UAAM,IAAE,GAAoB,UAAA,IAAA,EAAI;AAC9B,QAAA,mBAAmB,CAAC,GAAD,EAAM,sBAAN,EAA8B,IAA9B,CAAnB;AACD,OAFD;;AAGA,MAAA,OAAO,CAAC,SAAR,CAAkB,IAAlB;AACA,aAAO,YAAA;AAAM,eAAA,OAAO,CAAC,WAAR,CAAA,IAAA,CAAA;AAAuB,OAApC;AACD;AACF,GATQ,EASN,CAAC,OAAD,CATM,CAAT;AAUA,SAAO,GAAP;AACD;;AAED,SAAS,mBAAT,CAA6B,UAA7B,EAAiE,SAAjE,EAAoF,KAApF,EAAkG;AAChG,MAAI,CAAC,UAAU,CAAC,OAAhB,EAAyB;AACvB;AACD;;AACD,MAAI,KAAJ,EAAW;AACT,IAAA,UAAU,CAAC,OAAX,CAAmB,YAAnB,CAAgC,SAAhC,EAA2C,EAA3C;AACD,GAFD,MAEO;AACL,IAAA,UAAU,CAAC,OAAX,CAAmB,eAAnB,CAAmC,SAAnC;AACD;AACF","sourceRoot":""}
+{"version":3,"sources":["../../src/hooks/useKeyboardNavAttribute.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,SAA9B;AACA,SAAS,SAAT,EAAoB,OAApB,EAA6B,MAA7B,QAA2C,OAA3C;AACA,SAAS,sBAAT,QAAuC,YAAvC;AACA,SAAS,SAAT,QAA0B,iCAA1B;AAIA;;AAEG;;AACH,OAAM,SAAU,uBAAV,GAAiC;AACrC,QAAM;AAAE,IAAA;AAAF,MAAqB,SAAS,EAApC;AACA,QAAM,OAAO,GAAG,OAAO,CAAC,MAAM,cAAc,IAAI,aAAa,CAAC,cAAc,CAAC,WAAhB,CAAtC,EAAqE,CAAC,cAAD,CAArE,CAAvB;AACA,QAAM,GAAG,GAAG,MAAM,CAAI,IAAJ,CAAlB;AACA,EAAA,SAAS,CAAC,MAAK;AACb,QAAI,OAAJ,EAAa;AACX,MAAA,mBAAmB,CAAC,GAAD,EAAM,sBAAN,EAA8B,OAAO,CAAC,wBAAR,EAA9B,CAAnB;;AACA,YAAM,EAAE,GAAoB,IAAI,IAAG;AACjC,QAAA,mBAAmB,CAAC,GAAD,EAAM,sBAAN,EAA8B,IAA9B,CAAnB;AACD,OAFD;;AAGA,MAAA,OAAO,CAAC,SAAR,CAAkB,EAAlB;AACA,aAAO,MAAM,OAAO,CAAC,WAAR,CAAoB,EAApB,CAAb;AACD;AACF,GATQ,EASN,CAAC,OAAD,CATM,CAAT;AAUA,SAAO,GAAP;AACD;;AAED,SAAS,mBAAT,CAA6B,UAA7B,EAAiE,SAAjE,EAAoF,KAApF,EAAkG;AAChG,MAAI,CAAC,UAAU,CAAC,OAAhB,EAAyB;AACvB;AACD;;AACD,MAAI,KAAJ,EAAW;AACT,IAAA,UAAU,CAAC,OAAX,CAAmB,YAAnB,CAAgC,SAAhC,EAA2C,EAA3C;AACD,GAFD,MAEO;AACL,IAAA,UAAU,CAAC,OAAX,CAAmB,eAAnB,CAAmC,SAAnC;AACD;AACF","sourceRoot":""}

package/lib/hooks/useModalAttributes.js

@@ -10,35 +10,33 @@ import { useTabster } from './useTabster';
  * @returns DOM attributes to apply to the modal element and its trigger
  */
 
-export var useModalAttributes = function (options) {
-  if (options === void 0) {
-    options = {};
-  }
-
-  var trapFocus = options.trapFocus,
-      alwaysFocusable = options.alwaysFocusable;
-  var tabster = useTabster(); // Initializes the modalizer and deloser APIs
+export const useModalAttributes = (options = {}) => {
+  const {
+    trapFocus,
+    alwaysFocusable
+  } = options;
+  const tabster = useTabster(); // Initializes the modalizer and deloser APIs
 
   if (tabster) {
     getModalizer(tabster);
     getDeloser(tabster);
   }
 
-  var id = useId('modal-');
-  var modalAttributes = useTabsterAttributes({
+  const id = useId('modal-');
+  const modalAttributes = useTabsterAttributes({
     deloser: {},
     modalizer: {
-      id: id,
+      id,
       isOthersAccessible: !trapFocus,
       isAlwaysAccessible: alwaysFocusable
     }
   });
-  var triggerAttributes = useTabsterAttributes({
+  const triggerAttributes = useTabsterAttributes({
     deloser: {}
   });
   return {
-    modalAttributes: modalAttributes,
-    triggerAttributes: triggerAttributes
+    modalAttributes,
+    triggerAttributes
   };
 };
 //# sourceMappingURL=useModalAttributes.js.map

package/lib/hooks/useModalAttributes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useModalAttributes.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,QAAsB,2BAAtB;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,UAAT,EAAqB,YAArB,QAAgE,SAAhE;AACA,SAAS,UAAT,QAA2B,cAA3B;AAcA;;;;;;AAMG;;AACH,OAAO,IAAM,kBAAkB,GAAG,UAChC,OADgC,EACO;AAAvC,MAAA,OAAA,KAAA,KAAA,CAAA,EAAA;AAAA,IAAA,OAAA,GAAA,EAAA;AAAuC;;AAE/B,MAAA,SAAS,GAAsB,OAAO,CAA7B,SAAT;AAAA,MAAW,eAAe,GAAK,OAAO,CAAZ,eAA1B;AACR,MAAM,OAAO,GAAG,UAAU,EAA1B,CAHuC,CAIvC;;AACA,MAAI,OAAJ,EAAa;AACX,IAAA,YAAY,CAAC,OAAD,CAAZ;AACA,IAAA,UAAU,CAAC,OAAD,CAAV;AACD;;AAED,MAAM,EAAE,GAAG,KAAK,CAAC,QAAD,CAAhB;AACA,MAAM,eAAe,GAAG,oBAAoB,CAAC;AAC3C,IAAA,OAAO,EAAE,EADkC;AAE3C,IAAA,SAAS,EAAE;AAAE,MAAA,EAAE,EAAA,EAAJ;AAAM,MAAA,kBAAkB,EAAE,CAAC,SAA3B;AAAsC,MAAA,kBAAkB,EAAE;AAA1D;AAFgC,GAAD,CAA5C;AAKA,MAAM,iBAAiB,GAAG,oBAAoB,CAAC;AAC7C,IAAA,OAAO,EAAE;AADoC,GAAD,CAA9C;AAIA,SAAO;AAAE,IAAA,eAAe,EAAA,eAAjB;AAAmB,IAAA,iBAAiB,EAAA;AAApC,GAAP;AACD,CAtBM","sourceRoot":""}
+{"version":3,"sources":["../../src/hooks/useModalAttributes.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,QAAsB,2BAAtB;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,UAAT,EAAqB,YAArB,QAAgE,SAAhE;AACA,SAAS,UAAT,QAA2B,cAA3B;AAcA;;;;;;AAMG;;AACH,OAAO,MAAM,kBAAkB,GAAG,CAChC,OAAA,GAAqC,EADL,KAE8E;AAC9G,QAAM;AAAE,IAAA,SAAF;AAAa,IAAA;AAAb,MAAiC,OAAvC;AACA,QAAM,OAAO,GAAG,UAAU,EAA1B,CAF8G,CAG9G;;AACA,MAAI,OAAJ,EAAa;AACX,IAAA,YAAY,CAAC,OAAD,CAAZ;AACA,IAAA,UAAU,CAAC,OAAD,CAAV;AACD;;AAED,QAAM,EAAE,GAAG,KAAK,CAAC,QAAD,CAAhB;AACA,QAAM,eAAe,GAAG,oBAAoB,CAAC;AAC3C,IAAA,OAAO,EAAE,EADkC;AAE3C,IAAA,SAAS,EAAE;AAAE,MAAA,EAAF;AAAM,MAAA,kBAAkB,EAAE,CAAC,SAA3B;AAAsC,MAAA,kBAAkB,EAAE;AAA1D;AAFgC,GAAD,CAA5C;AAKA,QAAM,iBAAiB,GAAG,oBAAoB,CAAC;AAC7C,IAAA,OAAO,EAAE;AADoC,GAAD,CAA9C;AAIA,SAAO;AAAE,IAAA,eAAF;AAAmB,IAAA;AAAnB,GAAP;AACD,CAtBM","sourceRoot":""}

package/lib/hooks/useTabster.js

@@ -8,13 +8,16 @@ import { getCurrentTabster, createTabster } from 'tabster';
  * @returns Tabster core instance
  */
 
-export var useTabster = function () {
+export const useTabster = () => {
   var _a;
 
-  var targetDocument = useFluent().targetDocument;
-  var defaultView = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) || undefined;
-  var tabsterOptions = {
-    autoRoot: {}
+  const {
+    targetDocument
+  } = useFluent();
+  const defaultView = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) || undefined;
+  const tabsterOptions = {
+    autoRoot: {},
+    controlTab: false
   };
 
   if (!defaultView) {

package/lib/hooks/useTabster.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useTabster.ts"],"names":[],"mappings":"AAAA,SAAS,SAAT,QAA0B,iCAA1B;AACA,SAAS,iBAAT,EAA4B,aAA5B,QAAwE,SAAxE;AAEA;;;;;;AAMG;;AACH,OAAO,IAAM,UAAU,GAAG,YAAA;;;AAChB,MAAA,cAAc,GAAK,SAAS,GAAd,cAAd;AAER,MAAM,WAAW,GAAG,CAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,WAAhB,KAA+B,SAAnD;AACA,MAAM,cAAc,GAAG;AAAE,IAAA,QAAQ,EAAE;AAAZ,GAAvB;;AAEA,MAAI,CAAC,WAAL,EAAkB;AAChB,WAAO,IAAP;AACD,GARuB,CAUxB;;;AACA,SAAA,CAAA,EAAA,GAAO,iBAAiB,CAAC,WAAD,CAAxB,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,EAArC,GAAyC,aAAa,CAAC,WAAD,EAAc,cAAd,CAAtD;AACD,CAZM","sourceRoot":""}
+{"version":3,"sources":["../../src/hooks/useTabster.ts"],"names":[],"mappings":"AAAA,SAAS,SAAT,QAA0B,iCAA1B;AACA,SAAS,iBAAT,EAA4B,aAA5B,QAAwE,SAAxE;AAEA;;;;;;AAMG;;AACH,OAAO,MAAM,UAAU,GAAG,MAAsC;;;AAC9D,QAAM;AAAE,IAAA;AAAF,MAAqB,SAAS,EAApC;AAEA,QAAM,WAAW,GAAG,CAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,WAAhB,KAA+B,SAAnD;AACA,QAAM,cAAc,GAAkC;AAAE,IAAA,QAAQ,EAAE,EAAZ;AAAgB,IAAA,UAAU,EAAE;AAA5B,GAAtD;;AAEA,MAAI,CAAC,WAAL,EAAkB;AAChB,WAAO,IAAP;AACD,GAR6D,CAU9D;;;AACA,SAAO,CAAA,EAAA,GAAA,iBAAiB,CAAC,WAAD,CAAjB,MAA8B,IAA9B,IAA8B,EAAA,KAAA,KAAA,CAA9B,GAA8B,EAA9B,GAAkC,aAAa,CAAC,WAAD,EAAc,cAAd,CAAtD;AACD,CAZM","sourceRoot":""}

package/lib/hooks/useTabsterAttributes.js

@@ -4,7 +4,7 @@ import { useTabster } from './useTabster';
  * Hook that returns tabster attributes while ensuring tabster exists
  */
 
-export var useTabsterAttributes = function (props) {
+export 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();

package/lib/hooks/useTabsterAttributes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useTabsterAttributes.ts"],"names":[],"mappings":"AAAA,SAAS,mBAAT,QAA2D,SAA3D;AACA,SAAS,UAAT,QAA2B,cAA3B;AAEA;;AAEG;;AACH,OAAO,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAA0C;AAC5E;AACA;AACA,EAAA,UAAU;AAEV,SAAO,mBAAmB,CAAC,KAAD,CAA1B;AACD,CANM","sourceRoot":""}
+{"version":3,"sources":["../../src/hooks/useTabsterAttributes.ts"],"names":[],"mappings":"AAAA,SAAS,mBAAT,QAA2D,SAA3D;AACA,SAAS,UAAT,QAA2B,cAA3B;AAEA;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAgF;AAClH;AACA;AACA,EAAA,UAAU;AAEV,SAAO,mBAAmB,CAAC,KAAD,CAA1B;AACD,CANM","sourceRoot":""}

package/lib/symbols.js

@@ -1,3 +1,3 @@
-export var KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav';
-export var KEYBOARD_NAV_SELECTOR = ":global([" + KEYBOARD_NAV_ATTRIBUTE + "])";
+export const KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav';
+export const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])`;
 //# sourceMappingURL=symbols.js.map

package/lib/symbols.js.map

@@ -1 +1 @@
-{"version":3,"file":"symbols.js","sourceRoot":"","sources":["../src/symbols.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,sBAAsB,GAAG,mBAA4B,CAAC;AACnE,MAAM,CAAC,IAAM,qBAAqB,GAAG,cAAY,sBAAsB,OAAa,CAAC"}
+{"version":3,"file":"symbols.js","sourceRoot":"","sources":["../src/symbols.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG,mBAA4B,CAAC;AACnE,MAAM,CAAC,MAAM,qBAAqB,GAAG,YAAY,sBAAsB,IAAa,CAAC"}

package/lib-commonjs/hooks/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./useArrowNavigationGroup"), exports);
 

package/lib-commonjs/hooks/useArrowNavigationGroup.js

@@ -5,21 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useArrowNavigationGroup = void 0;
 
-var tabster_1 = /*#__PURE__*/require("tabster");
+const tabster_1 = /*#__PURE__*/require("tabster");
 
-var useTabsterAttributes_1 = /*#__PURE__*/require("./useTabsterAttributes");
+const useTabsterAttributes_1 = /*#__PURE__*/require("./useTabsterAttributes");
 
-var useTabster_1 = /*#__PURE__*/require("./useTabster");
+const useTabster_1 = /*#__PURE__*/require("./useTabster");
 /**
  * A hook that returns the necessary tabster attributes to support arrow key navigation
  * @param options - Options to configure keyboard navigation
  */
 
 
-var useArrowNavigationGroup = function (options) {
+const useArrowNavigationGroup = options => {
   var _a;
 
-  var tabster = useTabster_1.useTabster();
+  const tabster = useTabster_1.useTabster();
 
   if (tabster) {
     tabster_1.getMover(tabster);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useArrowNavigationGroup.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,IAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAmBA;;;AAGG;;;AACI,IAAM,uBAAuB,GAAG,UAAC,OAAD,EAAyC;;;AAC9E,MAAM,OAAO,GAAG,YAAA,CAAA,UAAA,EAAhB;;AAEA,MAAI,OAAJ,EAAa;AACX,IAAA,SAAA,CAAA,QAAA,CAAS,OAAT;AACD;;AAED,SAAO,sBAAA,CAAA,oBAAA,CAAqB;AAC1B,IAAA,KAAK,EAAE;AACL,MAAA,MAAM,EAAE,CAAC,EAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,QAAV,CADJ;AAEL,MAAA,SAAS,EAAE,oBAAoB,CAAA,CAAA,EAAA,GAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,IAAV,MAAc,IAAd,IAAc,EAAA,KAAA,KAAA,CAAd,GAAc,EAAd,GAAkB,UAAlB,CAF1B;AAGL,MAAA,eAAe,EAAE,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE;AAHrB;AADmB,GAArB,CAAP;AAOD,CAdM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB;;AAgBb,SAAS,oBAAT,CAA8B,IAA9B,EAA0E;AACxE,UAAQ,IAAR;AACE,SAAK,YAAL;AACE,aAAO,SAAA,CAAA,KAAA,CAAM,eAAN,CAAsB,UAA7B;;AAEF,SAAK,UAAL;AACA;AACE,aAAO,SAAA,CAAA,KAAA,CAAM,eAAN,CAAsB,QAA7B;AANJ;AAQD","sourceRoot":""}
+{"version":3,"sources":["../../src/hooks/useArrowNavigationGroup.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAmBA;;;AAGG;;;AACI,MAAM,uBAAuB,GAAI,OAAD,IAA6C;;;AAClF,QAAM,OAAO,GAAG,YAAA,CAAA,UAAA,EAAhB;;AAEA,MAAI,OAAJ,EAAa;AACX,IAAA,SAAA,CAAA,QAAA,CAAS,OAAT;AACD;;AAED,SAAO,sBAAA,CAAA,oBAAA,CAAqB;AAC1B,IAAA,KAAK,EAAE;AACL,MAAA,MAAM,EAAE,CAAC,EAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,QAAV,CADJ;AAEL,MAAA,SAAS,EAAE,oBAAoB,CAAC,CAAA,EAAA,GAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,IAAT,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,EAAb,GAAiB,UAAlB,CAF1B;AAGL,MAAA,eAAe,EAAE,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE;AAHrB;AADmB,GAArB,CAAP;AAOD,CAdM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB;;AAgBb,SAAS,oBAAT,CAA8B,IAA9B,EAA0E;AACxE,UAAQ,IAAR;AACE,SAAK,YAAL;AACE,aAAO,SAAA,CAAA,KAAA,CAAM,eAAN,CAAsB,UAA7B;;AAEF,SAAK,UAAL;AACA;AACE,aAAO,SAAA,CAAA,KAAA,CAAM,eAAN,CAAsB,QAA7B;AANJ;AAQD","sourceRoot":""}

package/lib-commonjs/hooks/useFocusFinders.d.ts

@@ -1,3 +1,4 @@
+import { Types as TabsterTypes } from 'tabster';
 /**
  * Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element
  */
@@ -5,6 +6,6 @@ export declare const useFocusFinders: () => {
     findAllFocusable: (container: HTMLElement, acceptCondition: (el: HTMLElement) => boolean) => HTMLElement[];
     findFirstFocusable: (container: HTMLElement) => HTMLElement | null | undefined;
     findLastFocusable: (container: HTMLElement) => HTMLElement | null | undefined;
-    findNextFocusable: (currentElement: HTMLElement) => HTMLElement | null | undefined;
-    findPrevFocusable: (currentElement: HTMLElement) => HTMLElement | null | undefined;
+    findNextFocusable: (currentElement: HTMLElement, options?: Pick<TabsterTypes.FindNextProps, 'container'>) => HTMLElement | null | undefined;
+    findPrevFocusable: (currentElement: HTMLElement, options?: Pick<TabsterTypes.FindNextProps, 'container'>) => HTMLElement | null | undefined;
 };

package/lib-commonjs/hooks/useFocusFinders.js

@@ -5,49 +5,41 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useFocusFinders = void 0;
 
-var React = /*#__PURE__*/require("react");
+const React = /*#__PURE__*/require("react");
 
-var useTabster_1 = /*#__PURE__*/require("./useTabster");
+const useTabster_1 = /*#__PURE__*/require("./useTabster");
 /**
  * Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element
  */
 
 
-var useFocusFinders = function () {
-  var tabster = useTabster_1.useTabster(); // Narrow props for now and let need dictate additional props in the future
+const useFocusFinders = () => {
+  const tabster = useTabster_1.useTabster(); // Narrow props for now and let need dictate additional props in the future
 
-  var findAllFocusable = React.useCallback(function (container, acceptCondition) {
-    return (tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findAll({
-      container: container,
-      acceptCondition: acceptCondition
-    })) || [];
-  }, [tabster]);
-  var findFirstFocusable = React.useCallback(function (container) {
-    return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findFirst({
-      container: container
-    });
-  }, [tabster]);
-  var findLastFocusable = React.useCallback(function (container) {
-    return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findLast({
-      container: container
-    });
-  }, [tabster]);
-  var findNextFocusable = React.useCallback(function (currentElement) {
-    return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findNext({
-      currentElement: currentElement
-    });
-  }, [tabster]);
-  var findPrevFocusable = React.useCallback(function (currentElement) {
-    return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findPrev({
-      currentElement: currentElement
-    });
-  }, [tabster]);
+  const findAllFocusable = React.useCallback((container, acceptCondition) => (tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findAll({
+    container,
+    acceptCondition
+  })) || [], [tabster]);
+  const findFirstFocusable = React.useCallback(container => tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findFirst({
+    container
+  }), [tabster]);
+  const findLastFocusable = React.useCallback(container => tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findLast({
+    container
+  }), [tabster]);
+  const findNextFocusable = React.useCallback((currentElement, options = {}) => tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findNext({
+    currentElement,
+    ...options
+  }), [tabster]);
+  const findPrevFocusable = React.useCallback((currentElement, options = {}) => tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findPrev({
+    currentElement,
+    ...options
+  }), [tabster]);
   return {
-    findAllFocusable: findAllFocusable,
-    findFirstFocusable: findFirstFocusable,
-    findLastFocusable: findLastFocusable,
-    findNextFocusable: findNextFocusable,
-    findPrevFocusable: findPrevFocusable
+    findAllFocusable,
+    findFirstFocusable,
+    findLastFocusable,
+    findNextFocusable,
+    findPrevFocusable
   };
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useFocusFinders.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAEA;;AAEG;;;AACI,IAAM,eAAe,GAAG,YAAA;AAC7B,MAAM,OAAO,GAAG,YAAA,CAAA,UAAA,EAAhB,CAD6B,CAG7B;;AACA,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAN,CACvB,UAAC,SAAD,EAAyB,eAAzB,EAAsE;AACpE,WAAA,CAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,SAAT,CAAmB,OAAnB,CAA2B;AAAE,MAAA,SAAS,EAAA,SAAX;AAAa,MAAA,eAAe,EAAA;AAA5B,KAA3B,CAAA,KAA8D,EAA9D;AAAgE,GAF3C,EAGvB,CAAC,OAAD,CAHuB,CAAzB;AAMA,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAN,CACzB,UAAC,SAAD,EAAuB;AAAA,WAAK,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,SAAT,CAAmB,SAAnB,CAA6B;AAAE,MAAA,SAAS,EAAA;AAAX,KAA7B,CAAL;AAAgD,GAD9C,EAEzB,CAAC,OAAD,CAFyB,CAA3B;AAKA,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAN,CAAkB,UAAC,SAAD,EAAuB;AAAA,WAAK,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,SAAT,CAAmB,QAAnB,CAA4B;AAAE,MAAA,SAAS,EAAA;AAAX,KAA5B,CAAL;AAA+C,GAAxF,EAA0F,CAClH,OADkH,CAA1F,CAA1B;AAIA,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAN,CACxB,UAAC,cAAD,EAA4B;AAAA,WAAK,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,SAAT,CAAmB,QAAnB,CAA4B;AAAE,MAAA,cAAc,EAAA;AAAhB,KAA5B,CAAL;AAAoD,GADxD,EAExB,CAAC,OAAD,CAFwB,CAA1B;AAKA,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAN,CACxB,UAAC,cAAD,EAA4B;AAAA,WAAK,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,SAAT,CAAmB,QAAnB,CAA4B;AAAE,MAAA,cAAc,EAAA;AAAhB,KAA5B,CAAL;AAAoD,GADxD,EAExB,CAAC,OAAD,CAFwB,CAA1B;AAKA,SAAO;AACL,IAAA,gBAAgB,EAAA,gBADX;AAEL,IAAA,kBAAkB,EAAA,kBAFb;AAGL,IAAA,iBAAiB,EAAA,iBAHZ;AAIL,IAAA,iBAAiB,EAAA,iBAJZ;AAKL,IAAA,iBAAiB,EAAA;AALZ,GAAP;AAOD,CApCM;;AAAM,OAAA,CAAA,eAAA,GAAe,eAAf","sourceRoot":""}
+{"version":3,"sources":["../../src/hooks/useFocusFinders.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,eAAe,GAAG,MAAK;AAClC,QAAM,OAAO,GAAG,YAAA,CAAA,UAAA,EAAhB,CADkC,CAGlC;;AACA,QAAM,gBAAgB,GAAG,KAAK,CAAC,WAAN,CACvB,CAAC,SAAD,EAAyB,eAAzB,KACE,CAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,SAAT,CAAmB,OAAnB,CAA2B;AAAE,IAAA,SAAF;AAAa,IAAA;AAAb,GAA3B,CAAA,KAA8D,EAFzC,EAGvB,CAAC,OAAD,CAHuB,CAAzB;AAMA,QAAM,kBAAkB,GAAG,KAAK,CAAC,WAAN,CACxB,SAAD,IAA4B,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,SAAT,CAAmB,SAAnB,CAA6B;AAAE,IAAA;AAAF,GAA7B,CADH,EAEzB,CAAC,OAAD,CAFyB,CAA3B;AAKA,QAAM,iBAAiB,GAAG,KAAK,CAAC,WAAN,CAAmB,SAAD,IAA4B,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,SAAT,CAAmB,QAAnB,CAA4B;AAAE,IAAA;AAAF,GAA5B,CAA9C,EAA0F,CAClH,OADkH,CAA1F,CAA1B;AAIA,QAAM,iBAAiB,GAAG,KAAK,CAAC,WAAN,CACxB,CAAC,cAAD,EAA8B,OAAA,GAAyD,EAAvF,KACE,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,SAAT,CAAmB,QAAnB,CAA4B;AAAE,IAAA,cAAF;AAAkB,OAAG;AAArB,GAA5B,CAFsB,EAGxB,CAAC,OAAD,CAHwB,CAA1B;AAMA,QAAM,iBAAiB,GAAG,KAAK,CAAC,WAAN,CACxB,CAAC,cAAD,EAA8B,OAAA,GAAyD,EAAvF,KACE,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,SAAT,CAAmB,QAAnB,CAA4B;AAAE,IAAA,cAAF;AAAkB,OAAG;AAArB,GAA5B,CAFsB,EAGxB,CAAC,OAAD,CAHwB,CAA1B;AAMA,SAAO;AACL,IAAA,gBADK;AAEL,IAAA,kBAFK;AAGL,IAAA,iBAHK;AAIL,IAAA,iBAJK;AAKL,IAAA;AALK,GAAP;AAOD,CAtCM;;AAAM,OAAA,CAAA,eAAA,GAAe,eAAf","sourceRoot":""}

package/lib-commonjs/hooks/useFocusIndicatorStyle.d.ts

@@ -1,5 +1,4 @@
-import type { Theme } from '@fluentui/react-theme';
-import type { MakeStyles, MakeStylesStyleRule } from '@fluentui/make-styles';
+import type { GriffelStyle } from '@griffel/react';
 export declare type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;
 export declare type FocusOutlineStyleOptions = {
     /**
@@ -22,13 +21,13 @@ export interface CreateFocusIndicatorStyleRuleOptions {
  * @param options - Configure the style of the focus outline
  * @returns focus outline styles object for @see makeStyles
  */
-export declare const createFocusOutlineStyle: (theme: Theme, options?: {
+export declare const createFocusOutlineStyle: (options?: {
     style: Partial<FocusOutlineStyleOptions>;
-} & CreateFocusIndicatorStyleRuleOptions) => MakeStyles;
+} & CreateFocusIndicatorStyleRuleOptions) => GriffelStyle;
 /**
- * Creates a style rule for @see makeStyles that includes the necessary selectors for focus.
+ * 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 rule - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes
+ * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes
  */
-export declare const createCustomFocusIndicatorStyle: (rule: MakeStylesStyleRule<Theme>, options?: CreateFocusIndicatorStyleRuleOptions) => MakeStylesStyleRule<Theme>;
+export declare const createCustomFocusIndicatorStyle: (style: GriffelStyle, options?: CreateFocusIndicatorStyleRuleOptions) => GriffelStyle;