@fluentui/react-tabster 9.0.0-nightly.d730088d7f.0 → 9.0.0-rc.10

package/lib-commonjs/hooks/useTabster.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTabster = void 0;
 
-var react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 
-var tabster_1 = /*#__PURE__*/require("tabster");
+const tabster_1 = /*#__PURE__*/require("tabster");
 /**
  * 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
@@ -17,13 +17,16 @@ var tabster_1 = /*#__PURE__*/require("tabster");
  */
 
 
-var useTabster = function () {
+const useTabster = () => {
   var _a;
 
-  var targetDocument = react_shared_contexts_1.useFluent().targetDocument;
-  var defaultView = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) || undefined;
-  var tabsterOptions = {
-    autoRoot: {}
+  const {
+    targetDocument
+  } = react_shared_contexts_1.useFluent();
+  const defaultView = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) || undefined;
+  const tabsterOptions = {
+    autoRoot: {},
+    controlTab: false
   };
 
   if (!defaultView) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useTabster.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,IAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;AAEA;;;;;;AAMG;;;AACI,IAAM,UAAU,GAAG,YAAA;;;AAChB,MAAA,cAAc,GAAK,uBAAA,CAAA,SAAA,GAAL,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,SAAA,CAAA,iBAAA,CAAkB,WAAlB,CAAP,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,EAArC,GAAyC,SAAA,CAAA,aAAA,CAAc,WAAd,EAA2B,cAA3B,CAAzC;AACD,CAZM;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourceRoot":""}
+{"version":3,"sources":["hooks/useTabster.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;AAEA;;;;;;AAMG;;;AACI,MAAM,UAAU,GAAG,MAAsC;;;AAC9D,QAAM;AAAE,IAAA;AAAF,MAAqB,uBAAA,CAAA,SAAA,EAA3B;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,SAAA,CAAA,iBAAA,CAAkB,WAAlB,CAAA,MAA8B,IAA9B,IAA8B,EAAA,KAAA,KAAA,CAA9B,GAA8B,EAA9B,GAAkC,SAAA,CAAA,aAAA,CAAc,WAAd,EAA2B,cAA3B,CAAzC;AACD,CAZM;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourcesContent":["import { useFluent } from '@fluentui/react-shared-contexts';\nimport { getCurrentTabster, createTabster, Types as TabsterTypes } from 'tabster';\n\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster core instance\n */\nexport const useTabster = (): TabsterTypes.TabsterCore | null => {\n  const { targetDocument } = useFluent();\n\n  const defaultView = targetDocument?.defaultView || undefined;\n  const tabsterOptions: TabsterTypes.TabsterCoreProps = { autoRoot: {}, controlTab: false };\n\n  if (!defaultView) {\n    return null;\n  }\n\n  // TODO: worth memoizing once more tabster options are used\n  return getCurrentTabster(defaultView) ?? createTabster(defaultView, tabsterOptions);\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/hooks/useTabsterAttributes.js

@@ -5,15 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTabsterAttributes = void 0;
 
-var tabster_1 = /*#__PURE__*/require("tabster");
+const tabster_1 = /*#__PURE__*/require("tabster");
 
-var useTabster_1 = /*#__PURE__*/require("./useTabster");
+const useTabster_1 = /*#__PURE__*/require("./useTabster");
 /**
  * Hook that returns tabster attributes while ensuring tabster exists
  */
 
 
-var useTabsterAttributes = function (props) {
+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();

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

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

package/lib-commonjs/index.js

@@ -3,8 +3,59 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.createFocusOutlineStyle = exports.createCustomFocusIndicatorStyle = exports.useTabsterAttributes = exports.useModalAttributes = exports.useKeyboardNavAttribute = exports.useFocusFinders = exports.useFocusableGroup = exports.useArrowNavigationGroup = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+var index_1 = /*#__PURE__*/require("./hooks/index");
 
-tslib_1.__exportStar(require("./hooks/index"), exports);
+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, "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;
+  }
+});
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,iBAAA;AAAiB;AAAjB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,kBAAA;AAAkB;AAAlB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;;AAQF,IAAA,OAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iCAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,+BAAA;AAA+B;AAA/B,CAAA;AAAiC,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA","sourcesContent":["export {\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useFocusFinders,\n  useKeyboardNavAttribute,\n  useModalAttributes,\n  useTabsterAttributes,\n} from './hooks/index';\nexport type {\n  UseArrowNavigationGroupOptions,\n  UseFocusableGroupOptions,\n  UseModalAttributesOptions,\n} from './hooks/index';\n\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\n\nexport type {\n  CreateCustomFocusIndicatorStyleOptions,\n  CreateFocusOutlineStyleOptions,\n  FocusOutlineOffset,\n  FocusOutlineStyleOptions,\n} from './focus/index';\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@fluentui/react-tabster",
-  "version": "9.0.0-nightly.d730088d7f.0",
+  "version": "9.0.0-rc.10",
   "description": "Utilities for focus management and facade for tabster",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
-  "typings": "lib/index.d.ts",
+  "typings": "dist/index.d.ts",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -15,31 +15,27 @@
     "build": "just-scripts build",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
+    "e2e": "e2e",
     "just": "just-scripts",
     "lint": "just-scripts lint",
-    "storybook": "start-storybook",
+    "storybook": "node ../../../scripts/storybook/runner",
     "test": "jest --passWithNoTests",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-tabster/src && yarn docs",
-    "start": "yarn storybook"
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-tabster/src && yarn docs",
+    "start": "yarn storybook",
+    "type-check": "tsc -b tsconfig.json"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/scripts": "^1.0.0",
-    "@types/react": "16.9.42",
-    "@types/react-dom": "16.9.10",
-    "@types/react-test-renderer": "^16.0.0",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
-    "react-test-renderer": "^16.3.0"
+    "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/make-styles": "9.0.0-nightly.d730088d7f.0",
-    "@fluentui/react-make-styles": "9.0.0-nightly.d730088d7f.0",
-    "@fluentui/react-shared-contexts": "9.0.0-nightly.d730088d7f.0",
-    "@fluentui/react-utilities": "9.0.0-nightly.d730088d7f.0",
-    "keyborg": "^1.0.0",
-    "tabster": "^1.0.0",
+    "@griffel/react": "1.0.5",
+    "@fluentui/react-shared-contexts": "9.0.0-rc.8",
+    "@fluentui/react-theme": "9.0.0-rc.8",
+    "@fluentui/react-utilities": "9.0.0-rc.9",
+    "keyborg": "^1.1.0",
+    "tabster": "^1.4.0",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
@@ -49,11 +45,17 @@
     "react-dom": ">=16.8.0 <18.0.0"
   },
   "beachball": {
-    "tag": "beta",
     "disallowedChangeTypes": [
       "major",
       "minor",
       "patch"
     ]
+  },
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib-commonjs/index.js"
+    }
   }
 }

package/lib/hooks/index.d.ts

@@ -1,7 +0,0 @@
-export * from './useArrowNavigationGroup';
-export * from './useFocusFinders';
-export * from './useModalAttributes';
-export * from './useTabsterAttributes';
-export * from './useFocusIndicatorStyle';
-export * from './useKeyboardNavAttribute';
-export * from './useFocusableGroup';

package/lib/hooks/useArrowNavigationGroup.d.ts

@@ -1,22 +0,0 @@
-import { Types } from 'tabster';
-export interface UseArrowNavigationGroupOptions {
-    /**
-     * Focus will navigate vertically or horizontally, defaults to horizontally
-     * @defaultValue vertical
-     */
-    axis?: 'vertical' | 'horizontal';
-    /**
-     * Focus will cycle to the first/last elements of the group without stopping
-     */
-    circular?: boolean;
-    /**
-     * Last focused element in the group will be remembered and focused (if still
-     * available) when tabbing from outside of the group
-     */
-    memorizeCurrent?: boolean;
-}
-/**
- * A hook that returns the necessary tabster attributes to support arrow key navigation
- * @param options - Options to configure keyboard navigation
- */
-export declare const useArrowNavigationGroup: (options?: UseArrowNavigationGroupOptions | undefined) => Types.TabsterDOMAttribute;

package/lib/hooks/useFocusFinders.d.ts

@@ -1,10 +0,0 @@
-/**
- * Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element
- */
-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;
-};

package/lib/hooks/useFocusIndicatorStyle.d.ts

@@ -1,34 +0,0 @@
-import type { Theme } from '@fluentui/react-theme';
-import type { MakeStyles, MakeStylesStyleRule } from '@fluentui/make-styles';
-export declare type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;
-export declare type FocusOutlineStyleOptions = {
-    /**
-     * Only property not supported by the native CSS `outline`, if this is no longer needed
-     * we can just go native instead
-     */
-    outlineRadius: string;
-    outlineColor: string;
-    outlineWidth: string;
-    outlineOffset?: string | FocusOutlineOffset;
-};
-export interface CreateFocusIndicatorStyleRuleOptions {
-    selector?: 'focus' | 'focus-within';
-}
-/**
- * NOTE: The element with the focus outline needs to have `position: relative` so that the
- * pseudo element can be properly positioned.
- *
- * @param theme - Theme used in @see makeStyles
- * @param options - Configure the style of the focus outline
- * @returns focus outline styles object for @see makeStyles
- */
-export declare const createFocusOutlineStyle: (theme: Theme, options?: {
-    style: Partial<FocusOutlineStyleOptions>;
-} & CreateFocusIndicatorStyleRuleOptions) => MakeStyles;
-/**
- * Creates a style rule 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
- */
-export declare const createCustomFocusIndicatorStyle: (rule: MakeStylesStyleRule<Theme>, options?: CreateFocusIndicatorStyleRuleOptions) => MakeStylesStyleRule<Theme>;

package/lib/hooks/useFocusIndicatorStyle.js

@@ -1,96 +0,0 @@
-import { __assign } from "tslib";
-import { KEYBOARD_NAV_SELECTOR } from '../symbols';
-/**
- * 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 {
-    borderColor: 'transparent',
-    ':after': {
-      content: '""',
-      position: 'absolute',
-      pointerEvents: 'none',
-      boxSizing: 'outline-box',
-      zIndex: 1,
-      borderStyle: 'solid',
-      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 + ")"
-    }
-  };
-};
-
-var defaultOptions = {
-  selector: 'focus'
-};
-/**
- * NOTE: The element with the focus outline needs to have `position: relative` so that the
- * pseudo element can be properly positioned.
- *
- * @param theme - Theme used in @see makeStyles
- * @param options - Configure the style of the focus outline
- * @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;
-};
-/**
- * Creates a style rule 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
- */
-
-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;
-  };
-};
-//# sourceMappingURL=useFocusIndicatorStyle.js.map

package/lib/hooks/useFocusIndicatorStyle.js.map

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

package/lib/hooks/useFocusableGroup.d.ts

@@ -1,26 +0,0 @@
-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.
-     */
-    tabBehavior?: FocusableGroupTabBehavior;
-}
-/**
- * A hook that returns the necessary tabster attributes to support groupping.
- * @param options - Options to configure keyboard navigation
- */
-export declare const useFocusableGroup: (options?: UseFocusableGroupOptions | undefined) => Types.TabsterDOMAttribute;

package/lib/hooks/useKeyboardNavAttribute.d.ts

@@ -1,5 +0,0 @@
-import type { RefObject } from 'react';
-/**
- * instantiates keyborg and add attribute to ensure focus indicator synced to keyborg logic
- */
-export declare function useKeyboardNavAttribute<E extends HTMLElement>(): RefObject<E>;

package/lib/hooks/useModalAttributes.d.ts

@@ -1,22 +0,0 @@
-import { Types as TabsterTypes } from 'tabster';
-export interface UseModalAttributesOptions {
-    /**
-     * Traps focus inside the elements the attributes are applied
-     */
-    trapFocus?: boolean;
-    /**
-     * Always reachabled in Tab order
-     */
-    alwaysFocusable?: boolean;
-}
-/**
- * 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
- */
-export declare const useModalAttributes: (options?: UseModalAttributesOptions) => {
-    modalAttributes: TabsterTypes.TabsterDOMAttribute;
-    triggerAttributes: TabsterTypes.TabsterDOMAttribute;
-};

package/lib/hooks/useTabster.d.ts

@@ -1,9 +0,0 @@
-import { Types as TabsterTypes } from 'tabster';
-/**
- * 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
- */
-export declare const useTabster: () => TabsterTypes.TabsterCore | null;

package/lib/hooks/useTabsterAttributes.d.ts

@@ -1,5 +0,0 @@
-import { Types as TabsterTypes } from 'tabster';
-/**
- * Hook that returns tabster attributes while ensuring tabster exists
- */
-export declare const useTabsterAttributes: (props: TabsterTypes.TabsterAttributeProps) => TabsterTypes.TabsterDOMAttribute;

package/lib/index.d.ts

@@ -1 +0,0 @@
-export * from './hooks/index';

package/lib/symbols.d.ts

@@ -1,2 +0,0 @@
-export declare const KEYBOARD_NAV_ATTRIBUTE: "data-keyboard-nav";
-export declare const KEYBOARD_NAV_SELECTOR: ":global([data-keyboard-nav])";

package/lib/symbols.js

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

package/lib/symbols.js.map

@@ -1 +0,0 @@
-{"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"}

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

@@ -1,7 +0,0 @@
-export * from './useArrowNavigationGroup';
-export * from './useFocusFinders';
-export * from './useModalAttributes';
-export * from './useTabsterAttributes';
-export * from './useFocusIndicatorStyle';
-export * from './useKeyboardNavAttribute';
-export * from './useFocusableGroup';

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

@@ -1,22 +0,0 @@
-import { Types } from 'tabster';
-export interface UseArrowNavigationGroupOptions {
-    /**
-     * Focus will navigate vertically or horizontally, defaults to horizontally
-     * @defaultValue vertical
-     */
-    axis?: 'vertical' | 'horizontal';
-    /**
-     * Focus will cycle to the first/last elements of the group without stopping
-     */
-    circular?: boolean;
-    /**
-     * Last focused element in the group will be remembered and focused (if still
-     * available) when tabbing from outside of the group
-     */
-    memorizeCurrent?: boolean;
-}
-/**
- * A hook that returns the necessary tabster attributes to support arrow key navigation
- * @param options - Options to configure keyboard navigation
- */
-export declare const useArrowNavigationGroup: (options?: UseArrowNavigationGroupOptions | undefined) => Types.TabsterDOMAttribute;

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

@@ -1,10 +0,0 @@
-/**
- * Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element
- */
-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;
-};

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

@@ -1,34 +0,0 @@
-import type { Theme } from '@fluentui/react-theme';
-import type { MakeStyles, MakeStylesStyleRule } from '@fluentui/make-styles';
-export declare type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;
-export declare type FocusOutlineStyleOptions = {
-    /**
-     * Only property not supported by the native CSS `outline`, if this is no longer needed
-     * we can just go native instead
-     */
-    outlineRadius: string;
-    outlineColor: string;
-    outlineWidth: string;
-    outlineOffset?: string | FocusOutlineOffset;
-};
-export interface CreateFocusIndicatorStyleRuleOptions {
-    selector?: 'focus' | 'focus-within';
-}
-/**
- * NOTE: The element with the focus outline needs to have `position: relative` so that the
- * pseudo element can be properly positioned.
- *
- * @param theme - Theme used in @see makeStyles
- * @param options - Configure the style of the focus outline
- * @returns focus outline styles object for @see makeStyles
- */
-export declare const createFocusOutlineStyle: (theme: Theme, options?: {
-    style: Partial<FocusOutlineStyleOptions>;
-} & CreateFocusIndicatorStyleRuleOptions) => MakeStyles;
-/**
- * Creates a style rule 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
- */
-export declare const createCustomFocusIndicatorStyle: (rule: MakeStylesStyleRule<Theme>, options?: CreateFocusIndicatorStyleRuleOptions) => MakeStylesStyleRule<Theme>;