@fluentui/react-tabster 0.0.0-nightly-20220302-0405.1

package/lib/hooks/useModalAttributes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["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","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   */\n  trapFocus?: boolean;\n\n  /**\n   * Always reachabled in Tab order\n   */\n  alwaysFocusable?: boolean;\n}\n\n/**\n * Applies modal dialog behaviour through DOM attributes\n * Modal element will focus trap and hide other content on the page\n * The trigger element will be focused if focus is lost after the modal element is removed\n *\n * @returns DOM attributes to apply to the modal element and its trigger\n */\nexport const useModalAttributes = (\n  options: UseModalAttributesOptions = {},\n): { modalAttributes: TabsterTypes.TabsterDOMAttribute; triggerAttributes: TabsterTypes.TabsterDOMAttribute } => {\n  const { trapFocus, alwaysFocusable } = options;\n  const tabster = useTabster();\n  // Initializes the modalizer and deloser APIs\n  if (tabster) {\n    getModalizer(tabster);\n    getDeloser(tabster);\n  }\n\n  const id = useId('modal-');\n  const modalAttributes = useTabsterAttributes({\n    deloser: {},\n    modalizer: { id, isOthersAccessible: !trapFocus, isAlwaysAccessible: alwaysFocusable },\n  });\n\n  const triggerAttributes = useTabsterAttributes({\n    deloser: {},\n  });\n\n  return { modalAttributes, triggerAttributes };\n};\n"],"sourceRoot":"../src/"}

package/lib/hooks/useTabster.d.ts

@@ -0,0 +1,9 @@
+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/useTabster.js

@@ -0,0 +1,30 @@
+import { useFluent } from '@fluentui/react-shared-contexts';
+import { getCurrentTabster, createTabster } 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 const useTabster = () => {
+  var _a;
+
+  const {
+    targetDocument
+  } = useFluent();
+  const defaultView = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) || undefined;
+  const tabsterOptions = {
+    autoRoot: {},
+    controlTab: false
+  };
+
+  if (!defaultView) {
+    return null;
+  } // TODO: worth memoizing once more tabster options are used
+
+
+  return (_a = getCurrentTabster(defaultView)) !== null && _a !== void 0 ? _a : createTabster(defaultView, tabsterOptions);
+};
+//# sourceMappingURL=useTabster.js.map

package/lib/hooks/useTabster.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["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","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/hooks/useTabsterAttributes.d.ts

@@ -0,0 +1,5 @@
+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/hooks/useTabsterAttributes.js

@@ -0,0 +1,13 @@
+import { getTabsterAttribute } from 'tabster';
+import { useTabster } from './useTabster';
+/**
+ * Hook that returns tabster attributes while ensuring tabster exists
+ */
+
+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();
+  return getTabsterAttribute(props);
+};
+//# sourceMappingURL=useTabsterAttributes.js.map

package/lib/hooks/useTabsterAttributes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["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","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/index.d.ts

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

package/lib/index.js

@@ -0,0 +1,2 @@
+export * from './hooks/index';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC","sourcesContent":["export * from './hooks/index';\n"]}

package/lib/symbols.d.ts

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

package/lib/symbols.js

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1 @@
+{"version":3,"file":"symbols.js","sourceRoot":"../src/","sources":["symbols.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG,mBAA4B,CAAC;AACnE,MAAM,CAAC,MAAM,qBAAqB,GAAG,YAAY,sBAAsB,IAAa,CAAC","sourcesContent":["export const KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav' as const;\nexport const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])` as const;\n"]}

package/lib/tsdoc-metadata.json

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

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

@@ -0,0 +1,7 @@
+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/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./useArrowNavigationGroup"), exports);
+
+tslib_1.__exportStar(require("./useFocusFinders"), exports);
+
+tslib_1.__exportStar(require("./useModalAttributes"), exports);
+
+tslib_1.__exportStar(require("./useTabsterAttributes"), exports);
+
+tslib_1.__exportStar(require("./useFocusIndicatorStyle"), exports);
+
+tslib_1.__exportStar(require("./useKeyboardNavAttribute"), exports);
+
+tslib_1.__exportStar(require("./useFocusableGroup"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["hooks/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './useArrowNavigationGroup';\nexport * from './useFocusFinders';\nexport * from './useModalAttributes';\nexport * from './useTabsterAttributes';\nexport * from './useFocusIndicatorStyle';\nexport * from './useKeyboardNavAttribute';\nexport * from './useFocusableGroup';\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,22 @@
+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/useArrowNavigationGroup.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useArrowNavigationGroup = void 0;
+
+const tabster_1 = /*#__PURE__*/require("tabster");
+
+const useTabsterAttributes_1 = /*#__PURE__*/require("./useTabsterAttributes");
+
+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
+ */
+
+
+const useArrowNavigationGroup = options => {
+  var _a;
+
+  const tabster = useTabster_1.useTabster();
+
+  if (tabster) {
+    tabster_1.getMover(tabster);
+  }
+
+  return useTabsterAttributes_1.useTabsterAttributes({
+    mover: {
+      cyclic: !!(options === null || options === void 0 ? void 0 : options.circular),
+      direction: axisToMoverDirection((_a = options === null || options === void 0 ? void 0 : options.axis) !== null && _a !== void 0 ? _a : 'vertical'),
+      memorizeCurrent: options === null || options === void 0 ? void 0 : options.memorizeCurrent
+    }
+  });
+};
+
+exports.useArrowNavigationGroup = useArrowNavigationGroup;
+
+function axisToMoverDirection(axis) {
+  switch (axis) {
+    case 'horizontal':
+      return tabster_1.Types.MoverDirections.Horizontal;
+
+    case 'vertical':
+    default:
+      return tabster_1.Types.MoverDirections.Vertical;
+  }
+}
+//# sourceMappingURL=useArrowNavigationGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["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","sourcesContent":["import { Types, getMover } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseArrowNavigationGroupOptions {\n  /**\n   * Focus will navigate vertically or horizontally, defaults to horizontally\n   * @defaultValue vertical\n   */\n  axis?: 'vertical' | 'horizontal';\n  /**\n   * Focus will cycle to the first/last elements of the group without stopping\n   */\n  circular?: boolean;\n  /**\n   * Last focused element in the group will be remembered and focused (if still\n   * available) when tabbing from outside of the group\n   */\n  memorizeCurrent?: boolean;\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support arrow key navigation\n * @param options - Options to configure keyboard navigation\n */\nexport const useArrowNavigationGroup = (options?: UseArrowNavigationGroupOptions) => {\n  const tabster = useTabster();\n\n  if (tabster) {\n    getMover(tabster);\n  }\n\n  return useTabsterAttributes({\n    mover: {\n      cyclic: !!options?.circular,\n      direction: axisToMoverDirection(options?.axis ?? 'vertical'),\n      memorizeCurrent: options?.memorizeCurrent,\n    },\n  });\n};\n\nfunction axisToMoverDirection(axis: UseArrowNavigationGroupOptions['axis']): Types.MoverDirection {\n  switch (axis) {\n    case 'horizontal':\n      return Types.MoverDirections.Horizontal;\n\n    case 'vertical':\n    default:\n      return Types.MoverDirections.Vertical;\n  }\n}\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,11 @@
+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
+ */
+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, 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

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFocusFinders = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+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
+ */
+
+
+const useFocusFinders = () => {
+  const tabster = useTabster_1.useTabster(); // Narrow props for now and let need dictate additional props in the future
+
+  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,
+    findFirstFocusable,
+    findLastFocusable,
+    findNextFocusable,
+    findPrevFocusable
+  };
+};
+
+exports.useFocusFinders = useFocusFinders;
+//# sourceMappingURL=useFocusFinders.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["hooks/useFocusFinders.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,eAAe,GAAG,MAAK;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","sourcesContent":["import * as React from 'react';\nimport { Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\n/**\n * Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element\n */\nexport const useFocusFinders = () => {\n  const tabster = useTabster();\n\n  // Narrow props for now and let need dictate additional props in the future\n  const findAllFocusable = React.useCallback(\n    (container: HTMLElement, acceptCondition: (el: HTMLElement) => boolean) =>\n      tabster?.focusable.findAll({ container, acceptCondition }) || [],\n    [tabster],\n  );\n\n  const findFirstFocusable = React.useCallback(\n    (container: HTMLElement) => tabster?.focusable.findFirst({ container }),\n    [tabster],\n  );\n\n  const findLastFocusable = React.useCallback((container: HTMLElement) => tabster?.focusable.findLast({ container }), [\n    tabster,\n  ]);\n\n  const findNextFocusable = React.useCallback(\n    (currentElement: HTMLElement, options: Pick<TabsterTypes.FindNextProps, 'container'> = {}) =>\n      tabster?.focusable.findNext({ currentElement, ...options }),\n    [tabster],\n  );\n\n  const findPrevFocusable = React.useCallback(\n    (currentElement: HTMLElement, options: Pick<TabsterTypes.FindNextProps, 'container'> = {}) =>\n      tabster?.focusable.findPrev({ currentElement, ...options }),\n    [tabster],\n  );\n\n  return {\n    findAllFocusable,\n    findFirstFocusable,\n    findLastFocusable,\n    findNextFocusable,\n    findPrevFocusable,\n  };\n};\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,33 @@
+import type { GriffelStyle } from '@griffel/react';
+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: (options?: {
+    style: Partial<FocusOutlineStyleOptions>;
+} & CreateFocusIndicatorStyleRuleOptions) => GriffelStyle;
+/**
+ * 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 getDefaultFocusOutlineStyes
+ */
+export declare const createCustomFocusIndicatorStyle: (style: GriffelStyle, options?: CreateFocusIndicatorStyleRuleOptions) => GriffelStyle;

package/lib-commonjs/hooks/useFocusIndicatorStyle.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createCustomFocusIndicatorStyle = exports.createFocusOutlineStyle = void 0;
+
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+
+const symbols_1 = /*#__PURE__*/require("../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
+ */
+
+
+const getFocusOutlineStyles = options => {
+  var _a, _b, _c, _d;
+
+  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': {
+      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})`
+    }
+  };
+};
+
+const 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
+ */
+
+const createFocusOutlineStyle = (options = {
+  style: {},
+  ...defaultOptions
+}) => ({
+  ':focus-visible': {
+    outlineStyle: 'none'
+  },
+  [`${symbols_1.KEYBOARD_NAV_SELECTOR} :${options.selector || defaultOptions.selector}`]: getFocusOutlineStyles({
+    outlineColor: react_theme_1.tokens.colorStrokeFocus2,
+    outlineRadius: react_theme_1.tokens.borderRadiusMedium,
+    // FIXME: tokens.strokeWidthThick causes some weird bugs
+    outlineWidth: '2px',
+    ...options.style
+  })
+});
+
+exports.createFocusOutlineStyle = createFocusOutlineStyle;
+/**
+ * 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 getDefaultFocusOutlineStyes
+ */
+
+const createCustomFocusIndicatorStyle = (style, options = defaultOptions) => ({
+  ':focus-visible': {
+    outlineStyle: 'none'
+  },
+  [`${symbols_1.KEYBOARD_NAV_SELECTOR} :${options.selector || defaultOptions.selector}`]: style
+});
+
+exports.createCustomFocusIndicatorStyle = createCustomFocusIndicatorStyle;
+//# sourceMappingURL=useFocusIndicatorStyle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["hooks/useFocusIndicatorStyle.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { KEYBOARD_NAV_SELECTOR } from '../symbols';\nimport type { GriffelStyle } from '@griffel/react';\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};\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) => {\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    borderColor: 'transparent',\n    ':after': {\n      content: '\"\"',\n      position: 'absolute',\n      pointerEvents: 'none',\n      boxSizing: 'outline-box',\n      zIndex: 1,\n\n      borderStyle: 'solid',\n      borderWidth: outlineWidth,\n      borderRadius: outlineRadius,\n      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\nexport interface CreateFocusIndicatorStyleRuleOptions {\n  selector?: 'focus' | 'focus-within';\n}\n\nconst defaultOptions: CreateFocusIndicatorStyleRuleOptions = {\n  selector: 'focus',\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 theme - Theme used in @see makeStyles\n * @param options - Configure the style of the focus outline\n * @returns focus outline styles object for @see makeStyles\n */\nexport const createFocusOutlineStyle = (\n  options: {\n    style: Partial<FocusOutlineStyleOptions>;\n  } & CreateFocusIndicatorStyleRuleOptions = { style: {}, ...defaultOptions },\n): GriffelStyle => ({\n  ':focus-visible': {\n    outlineStyle: 'none',\n  },\n  [`${KEYBOARD_NAV_SELECTOR} :${options.selector || defaultOptions.selector}`]: getFocusOutlineStyles({\n    outlineColor: tokens.colorStrokeFocus2,\n    outlineRadius: tokens.borderRadiusMedium,\n    // FIXME: tokens.strokeWidthThick causes some weird bugs\n    outlineWidth: '2px',\n    ...options.style,\n  }),\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 getDefaultFocusOutlineStyes\n */\nexport const createCustomFocusIndicatorStyle = (\n  style: GriffelStyle,\n  options: CreateFocusIndicatorStyleRuleOptions = defaultOptions,\n): GriffelStyle => ({\n  ':focus-visible': {\n    outlineStyle: 'none',\n  },\n  [`${KEYBOARD_NAV_SELECTOR} :${options.selector || defaultOptions.selector}`]: style,\n});\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,12 @@
+import { Types } from 'tabster';
+export interface UseFocusableGroupOptions {
+    /**
+     * Behavior for the Tab key.
+     */
+    tabBehavior?: 'unlimited' | 'limited' | 'limitedTrapFocus';
+}
+/**
+ * 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-commonjs/hooks/useFocusableGroup.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFocusableGroup = void 0;
+
+const tabster_1 = /*#__PURE__*/require("tabster");
+
+const useTabsterAttributes_1 = /*#__PURE__*/require("./useTabsterAttributes");
+
+const useTabster_1 = /*#__PURE__*/require("./useTabster");
+/**
+ * A hook that returns the necessary tabster attributes to support groupping.
+ * @param options - Options to configure keyboard navigation
+ */
+
+
+const useFocusableGroup = options => {
+  const tabster = useTabster_1.useTabster();
+
+  if (tabster) {
+    tabster_1.getGroupper(tabster);
+  }
+
+  return useTabsterAttributes_1.useTabsterAttributes({
+    groupper: {
+      tabbability: getTabbability(options === null || options === void 0 ? void 0 : options.tabBehavior)
+    }
+  });
+};
+
+exports.useFocusableGroup = useFocusableGroup;
+
+const getTabbability = tabBehavior => {
+  switch (tabBehavior) {
+    case 'unlimited':
+      return tabster_1.Types.GroupperTabbabilities.Unlimited;
+
+    case 'limited':
+      return tabster_1.Types.GroupperTabbabilities.Limited;
+
+    case 'limitedTrapFocus':
+      return tabster_1.Types.GroupperTabbabilities.LimitedTrapFocus;
+
+    default:
+      return undefined;
+  }
+};
+//# sourceMappingURL=useFocusableGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["hooks/useFocusableGroup.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AASA;;;AAGG;;;AACI,MAAM,iBAAiB,GAAI,OAAD,IAAuC;AACtE,QAAM,OAAO,GAAG,YAAA,CAAA,UAAA,EAAhB;;AAEA,MAAI,OAAJ,EAAa;AACX,IAAA,SAAA,CAAA,WAAA,CAAY,OAAZ;AACD;;AAED,SAAO,sBAAA,CAAA,oBAAA,CAAqB;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,GAArB,CAAP;AAKD,CAZM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB;;AAcb,MAAM,cAAc,GAClB,WADqB,IAEoB;AACzC,UAAQ,WAAR;AACE,SAAK,WAAL;AACE,aAAO,SAAA,CAAA,KAAA,CAAM,qBAAN,CAA4B,SAAnC;;AACF,SAAK,SAAL;AACE,aAAO,SAAA,CAAA,KAAA,CAAM,qBAAN,CAA4B,OAAnC;;AACF,SAAK,kBAAL;AACE,aAAO,SAAA,CAAA,KAAA,CAAM,qBAAN,CAA4B,gBAAnC;;AACF;AACE,aAAO,SAAP;AARJ;AAUD,CAbD","sourcesContent":["import { Types, getGroupper } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseFocusableGroupOptions {\n  /**\n   * Behavior for the Tab key.\n   */\n  tabBehavior?: 'unlimited' | 'limited' | 'limitedTrapFocus';\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support groupping.\n * @param options - Options to configure keyboard navigation\n */\nexport const useFocusableGroup = (options?: UseFocusableGroupOptions) => {\n  const tabster = useTabster();\n\n  if (tabster) {\n    getGroupper(tabster);\n  }\n\n  return useTabsterAttributes({\n    groupper: {\n      tabbability: getTabbability(options?.tabBehavior),\n    },\n  });\n};\n\nconst getTabbability = (\n  tabBehavior?: UseFocusableGroupOptions['tabBehavior'],\n): Types.GroupperTabbability | undefined => {\n  switch (tabBehavior) {\n    case 'unlimited':\n      return Types.GroupperTabbabilities.Unlimited;\n    case 'limited':\n      return Types.GroupperTabbabilities.Limited;\n    case 'limitedTrapFocus':\n      return Types.GroupperTabbabilities.LimitedTrapFocus;\n    default:\n      return undefined;\n  }\n};\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,5 @@
+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-commonjs/hooks/useKeyboardNavAttribute.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useKeyboardNavAttribute = void 0;
+
+const keyborg_1 = /*#__PURE__*/require("keyborg");
+
+const react_1 = /*#__PURE__*/require("react");
+
+const symbols_1 = /*#__PURE__*/require("../symbols");
+
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
+/**
+ * instantiates keyborg and add attribute to ensure focus indicator synced to keyborg logic
+ */
+
+
+function useKeyboardNavAttribute() {
+  const {
+    targetDocument
+  } = react_shared_contexts_1.useFluent();
+  const keyborg = react_1.useMemo(() => targetDocument && keyborg_1.createKeyborg(targetDocument.defaultView), [targetDocument]);
+  const ref = react_1.useRef(null);
+  react_1.useEffect(() => {
+    if (keyborg) {
+      setBooleanAttribute(ref, symbols_1.KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());
+
+      const cb = next => {
+        setBooleanAttribute(ref, symbols_1.KEYBOARD_NAV_ATTRIBUTE, next);
+      };
+
+      keyborg.subscribe(cb);
+      return () => keyborg.unsubscribe(cb);
+    }
+  }, [keyborg]);
+  return ref;
+}
+
+exports.useKeyboardNavAttribute = useKeyboardNavAttribute;
+
+function setBooleanAttribute(elementRef, attribute, value) {
+  if (!elementRef.current) {
+    return;
+  }
+
+  if (value) {
+    elementRef.current.setAttribute(attribute, '');
+  } else {
+    elementRef.current.removeAttribute(attribute);
+  }
+}
+//# sourceMappingURL=useKeyboardNavAttribute.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["hooks/useKeyboardNavAttribute.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;AAIA;;AAEG;;;AACH,SAAgB,uBAAhB,GAAuC;AACrC,QAAM;AAAE,IAAA;AAAF,MAAqB,uBAAA,CAAA,SAAA,EAA3B;AACA,QAAM,OAAO,GAAG,OAAA,CAAA,OAAA,CAAQ,MAAM,cAAc,IAAI,SAAA,CAAA,aAAA,CAAc,cAAc,CAAC,WAA7B,CAAhC,EAA4E,CAAC,cAAD,CAA5E,CAAhB;AACA,QAAM,GAAG,GAAG,OAAA,CAAA,MAAA,CAAU,IAAV,CAAZ;AACA,EAAA,OAAA,CAAA,SAAA,CAAU,MAAK;AACb,QAAI,OAAJ,EAAa;AACX,MAAA,mBAAmB,CAAC,GAAD,EAAM,SAAA,CAAA,sBAAN,EAA8B,OAAO,CAAC,wBAAR,EAA9B,CAAnB;;AACA,YAAM,EAAE,GAAoB,IAAI,IAAG;AACjC,QAAA,mBAAmB,CAAC,GAAD,EAAM,SAAA,CAAA,sBAAN,EAA8B,IAA9B,CAAnB;AACD,OAFD;;AAGA,MAAA,OAAO,CAAC,SAAR,CAAkB,EAAlB;AACA,aAAO,MAAM,OAAO,CAAC,WAAR,CAAoB,EAApB,CAAb;AACD;AACF,GATD,EASG,CAAC,OAAD,CATH;AAUA,SAAO,GAAP;AACD;;AAfD,OAAA,CAAA,uBAAA,GAAA,uBAAA;;AAiBA,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","sourcesContent":["import { createKeyborg } from 'keyborg';\nimport { useEffect, useMemo, useRef } from 'react';\nimport { KEYBOARD_NAV_ATTRIBUTE } from '../symbols';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport type { KeyborgCallback } from 'keyborg/dist/Keyborg';\nimport type { RefObject } from 'react';\n\n/**\n * instantiates keyborg and add attribute to ensure focus indicator synced to keyborg logic\n */\nexport function useKeyboardNavAttribute<E extends HTMLElement>() {\n  const { targetDocument } = useFluent();\n  const keyborg = useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView!), [targetDocument]);\n  const ref = useRef<E>(null);\n  useEffect(() => {\n    if (keyborg) {\n      setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());\n      const cb: KeyborgCallback = next => {\n        setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, next);\n      };\n      keyborg.subscribe(cb);\n      return () => keyborg.unsubscribe(cb);\n    }\n  }, [keyborg]);\n  return ref;\n}\n\nfunction setBooleanAttribute(elementRef: RefObject<HTMLElement>, attribute: string, value: boolean) {\n  if (!elementRef.current) {\n    return;\n  }\n  if (value) {\n    elementRef.current.setAttribute(attribute, '');\n  } else {\n    elementRef.current.removeAttribute(attribute);\n  }\n}\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,22 @@
+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;
+};