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

package/LICENSE

@@ -0,0 +1,15 @@
+@fluentui/react-focus-management
+
+Copyright (c) Microsoft Corporation
+
+All rights reserved.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

package/README.md

@@ -0,0 +1,42 @@
+# @fluentui/react-tabster
+
+**Tabster components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
+
+Experimental library for focus management that leverages [tabster](https://github.com/microsoft/tabster).
+
+These library is not production-ready and **should never be used in product**. This space is useful for testing new features whose APIs might change before final release.
+
+The provider needs to be wrapped around your application:
+
+```tsx
+<TabsterProvider>{children}</TabsterProvider>
+```
+
+The API currently only supports declarative data-\* attributes that are returned using the exported react hooks:
+
+```tsx
+const Item: React.FC = ({ children }) => <div tabIndex={0}>Item</div>;
+
+const ArrowNavigationExample: React.FC = ({ children }) => {
+  const attrs = useArrowNavigationGroup({ circular: true });
+
+  return (
+    <div {...attrs}>
+      <Item />
+      <Item />
+      <Item />
+      <Item />
+      <Item />
+      <Item />
+    </div>
+  );
+};
+
+const App: React.FC = () => {
+  return (
+    <TabsterProvider>
+      <ArrowNavigationExample />
+    </TabsterProvider>
+  );
+};
+```

package/dist/react-tabster.d.ts

@@ -0,0 +1,122 @@
+import type { GriffelStyle } from '@griffel/react';
+import type { RefObject } from 'react';
+import { Types } from 'tabster';
+
+/**
+ * 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;
+
+export declare 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;
+
+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;
+};
+
+/**
+ * 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;
+
+export declare 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 groupping.
+ * @param options - Options to configure keyboard navigation
+ */
+export declare const useFocusableGroup: (options?: UseFocusableGroupOptions | undefined) => Types.TabsterDOMAttribute;
+
+export declare interface UseFocusableGroupOptions {
+    /**
+     * Behavior for the Tab key.
+     */
+    tabBehavior?: 'unlimited' | 'limited' | 'limitedTrapFocus';
+}
+
+/**
+ * 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<Types.FindNextProps, 'container'>) => HTMLElement | null | undefined;
+    findPrevFocusable: (currentElement: HTMLElement, options?: Pick<Types.FindNextProps, 'container'>) => HTMLElement | null | undefined;
+};
+
+/**
+ * instantiates keyborg and add attribute to ensure focus indicator synced to keyborg logic
+ */
+export declare function useKeyboardNavAttribute<E extends HTMLElement>(): RefObject<E>;
+
+/**
+ * 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: Types.TabsterDOMAttribute;
+    triggerAttributes: Types.TabsterDOMAttribute;
+};
+
+export declare interface UseModalAttributesOptions {
+    /**
+     * Traps focus inside the elements the attributes are applied
+     */
+    trapFocus?: boolean;
+    /**
+     * Always reachabled in Tab order
+     */
+    alwaysFocusable?: boolean;
+}
+
+/**
+ * Hook that returns tabster attributes while ensuring tabster exists
+ */
+export declare const useTabsterAttributes: (props: Types.TabsterAttributeProps) => Types.TabsterDOMAttribute;
+
+export { }

package/lib/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/hooks/index.js

@@ -0,0 +1,8 @@
+export * from './useArrowNavigationGroup';
+export * from './useFocusFinders';
+export * from './useModalAttributes';
+export * from './useTabsterAttributes';
+export * from './useFocusIndicatorStyle';
+export * from './useKeyboardNavAttribute';
+export * from './useFocusableGroup';
+//# sourceMappingURL=index.js.map

package/lib/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './useArrowNavigationGroup';\nexport * from './useFocusFinders';\nexport * from './useModalAttributes';\nexport * from './useTabsterAttributes';\nexport * from './useFocusIndicatorStyle';\nexport * from './useKeyboardNavAttribute';\nexport * from './useFocusableGroup';\n"]}

package/lib/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/hooks/useArrowNavigationGroup.js

@@ -0,0 +1,37 @@
+import { Types, getMover } from 'tabster';
+import { useTabsterAttributes } from './useTabsterAttributes';
+import { useTabster } from './useTabster';
+/**
+ * A hook that returns the necessary tabster attributes to support arrow key navigation
+ * @param options - Options to configure keyboard navigation
+ */
+
+export const useArrowNavigationGroup = options => {
+  var _a;
+
+  const tabster = useTabster();
+
+  if (tabster) {
+    getMover(tabster);
+  }
+
+  return 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
+    }
+  });
+};
+
+function axisToMoverDirection(axis) {
+  switch (axis) {
+    case 'horizontal':
+      return Types.MoverDirections.Horizontal;
+
+    case 'vertical':
+    default:
+      return Types.MoverDirections.Vertical;
+  }
+}
+//# sourceMappingURL=useArrowNavigationGroup.js.map

package/lib/hooks/useArrowNavigationGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["hooks/useArrowNavigationGroup.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,QAAhB,QAAgC,SAAhC;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,UAAT,QAA2B,cAA3B;AAmBA;;;AAGG;;AACH,OAAO,MAAM,uBAAuB,GAAI,OAAD,IAA6C;;;AAClF,QAAM,OAAO,GAAG,UAAU,EAA1B;;AAEA,MAAI,OAAJ,EAAa;AACX,IAAA,QAAQ,CAAC,OAAD,CAAR;AACD;;AAED,SAAO,oBAAoB,CAAC;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,GAAD,CAA3B;AAOD,CAdM;;AAgBP,SAAS,oBAAT,CAA8B,IAA9B,EAA0E;AACxE,UAAQ,IAAR;AACE,SAAK,YAAL;AACE,aAAO,KAAK,CAAC,eAAN,CAAsB,UAA7B;;AAEF,SAAK,UAAL;AACA;AACE,aAAO,KAAK,CAAC,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/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/hooks/useFocusFinders.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { useTabster } from './useTabster';
+/**
+ * Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element
+ */
+
+export const useFocusFinders = () => {
+  const tabster = 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
+  };
+};
+//# sourceMappingURL=useFocusFinders.js.map

package/lib/hooks/useFocusFinders.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["hooks/useFocusFinders.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,UAAT,QAA2B,cAA3B;AAEA;;AAEG;;AACH,OAAO,MAAM,eAAe,GAAG,MAAK;AAClC,QAAM,OAAO,GAAG,UAAU,EAA1B,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","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/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/hooks/useFocusIndicatorStyle.js

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

@@ -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/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/hooks/useFocusableGroup.js

@@ -0,0 +1,38 @@
+import { Types, getGroupper } from 'tabster';
+import { useTabsterAttributes } from './useTabsterAttributes';
+import { useTabster } from './useTabster';
+/**
+ * A hook that returns the necessary tabster attributes to support groupping.
+ * @param options - Options to configure keyboard navigation
+ */
+
+export const useFocusableGroup = options => {
+  const tabster = useTabster();
+
+  if (tabster) {
+    getGroupper(tabster);
+  }
+
+  return useTabsterAttributes({
+    groupper: {
+      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

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

@@ -0,0 +1,41 @@
+import { createKeyborg } from 'keyborg';
+import { useEffect, useMemo, useRef } from 'react';
+import { KEYBOARD_NAV_ATTRIBUTE } from '../symbols';
+import { useFluent } from '@fluentui/react-shared-contexts';
+/**
+ * instantiates keyborg and add attribute to ensure focus indicator synced to keyborg logic
+ */
+
+export function useKeyboardNavAttribute() {
+  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());
+
+      const cb = next => {
+        setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, next);
+      };
+
+      keyborg.subscribe(cb);
+      return () => keyborg.unsubscribe(cb);
+    }
+  }, [keyborg]);
+  return ref;
+}
+
+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/hooks/useKeyboardNavAttribute.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["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","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/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;
+};

package/lib/hooks/useModalAttributes.js

@@ -0,0 +1,42 @@
+import { useId } from '@fluentui/react-utilities';
+import { useTabsterAttributes } from './useTabsterAttributes';
+import { getDeloser, getModalizer } from 'tabster';
+import { useTabster } from './useTabster';
+/**
+ * Applies modal dialog behaviour through DOM attributes
+ * Modal element will focus trap and hide other content on the page
+ * The trigger element will be focused if focus is lost after the modal element is removed
+ *
+ * @returns DOM attributes to apply to the modal element and its trigger
+ */
+
+export const useModalAttributes = (options = {}) => {
+  const {
+    trapFocus,
+    alwaysFocusable
+  } = options;
+  const tabster = useTabster(); // Initializes the modalizer and deloser APIs
+
+  if (tabster) {
+    getModalizer(tabster);
+    getDeloser(tabster);
+  }
+
+  const id = useId('modal-');
+  const modalAttributes = useTabsterAttributes({
+    deloser: {},
+    modalizer: {
+      id,
+      isOthersAccessible: !trapFocus,
+      isAlwaysAccessible: alwaysFocusable
+    }
+  });
+  const triggerAttributes = useTabsterAttributes({
+    deloser: {}
+  });
+  return {
+    modalAttributes,
+    triggerAttributes
+  };
+};
+//# sourceMappingURL=useModalAttributes.js.map