@fluentui/react-tabster 9.0.0-rc.6 → 9.0.0-rc.9

package/README.md

@@ -4,15 +4,12 @@
 
 Library for focus management that leverages [tabster](https://github.com/microsoft/tabster).
 
-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
+import * as React from 'react';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+
 const Item: React.FC = ({ children }) => <div tabIndex={0}>Item</div>;
 
 const ArrowNavigationExample: React.FC = ({ children }) => {
@@ -31,10 +28,6 @@ const ArrowNavigationExample: React.FC = ({ children }) => {
 };
 
 const App: React.FC = () => {
-  return (
-    <TabsterProvider>
-      <ArrowNavigationExample />
-    </TabsterProvider>
-  );
+  return <ArrowNavigationExample />;
 };
 ```

package/dist/{react-tabster.d.ts → index.d.ts}

@@ -9,9 +9,9 @@ import { Types } from 'tabster';
  * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes
  * @param options - Configure the style of the focus outline
  */
-export declare const createCustomFocusIndicatorStyle: (style: GriffelStyle, options?: CreateFocusIndicatorStyleRuleOptions) => GriffelStyle;
+export declare const createCustomFocusIndicatorStyle: (style: GriffelStyle, { selector }?: CreateCustomFocusIndicatorStyleOptions) => GriffelStyle;
 
-export declare interface CreateFocusIndicatorStyleRuleOptions {
+export declare interface CreateCustomFocusIndicatorStyleOptions {
     selector?: 'focus' | 'focus-within';
 }
 
@@ -22,9 +22,11 @@ export declare interface CreateFocusIndicatorStyleRuleOptions {
  * @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 const createFocusOutlineStyle: ({ selector, style, }?: CreateFocusOutlineStyleOptions) => GriffelStyle;
+
+export declare interface CreateFocusOutlineStyleOptions extends CreateCustomFocusIndicatorStyleOptions {
+    style?: Partial<FocusOutlineStyleOptions>;
+}
 
 export declare type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;
 
@@ -60,6 +62,10 @@ export declare interface UseArrowNavigationGroupOptions {
      * available) when tabbing from outside of the group
      */
     memorizeCurrent?: boolean;
+    /**
+     * Allow tabbing within the arrow navigation group items.
+     */
+    tabbable?: boolean;
 }
 
 /**

package/lib/{symbols.d.ts → focus/constants.d.ts}

@@ -1,2 +1,6 @@
 export declare const KEYBOARD_NAV_ATTRIBUTE: "data-keyboard-nav";
 export declare const KEYBOARD_NAV_SELECTOR: ":global([data-keyboard-nav])";
+export declare const defaultOptions: {
+    readonly style: {};
+    readonly selector: "focus";
+};

package/lib/{symbols.js → focus/constants.js}

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

package/lib/focus/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["focus/constants.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,sBAAsB,GAAG,mBAA/B;AACP,OAAO,MAAM,qBAAqB,GAAG,YAAY,sBAAsB,IAAhE;AACP,OAAO,MAAM,cAAc,GAAG;AAC5B,EAAA,KAAK,EAAE,EADqB;AAE5B,EAAA,QAAQ,EAAE;AAFkB,CAAvB","sourcesContent":["export const KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav' as const;\nexport const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])` as const;\nexport const defaultOptions = {\n  style: {},\n  selector: 'focus',\n} as const;\n"],"sourceRoot":"../src/"}

package/lib/focus/createCustomFocusIndicatorStyle.d.ts

@@ -0,0 +1,12 @@
+import type { GriffelStyle } from '@griffel/react';
+export interface CreateCustomFocusIndicatorStyleOptions {
+    selector?: 'focus' | 'focus-within';
+}
+/**
+ * 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
+ * @param options - Configure the style of the focus outline
+ */
+export declare const createCustomFocusIndicatorStyle: (style: GriffelStyle, { selector }?: CreateCustomFocusIndicatorStyleOptions) => GriffelStyle;

package/lib/focus/createCustomFocusIndicatorStyle.js

@@ -0,0 +1,18 @@
+import { KEYBOARD_NAV_SELECTOR, defaultOptions } from './constants';
+/**
+ * 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
+ * @param options - Configure the style of the focus outline
+ */
+
+export const createCustomFocusIndicatorStyle = (style, {
+  selector = defaultOptions.selector
+} = defaultOptions) => ({
+  ':focus-visible': {
+    outlineStyle: 'none'
+  },
+  [`${KEYBOARD_NAV_SELECTOR} :${selector}`]: style
+});
+//# sourceMappingURL=createCustomFocusIndicatorStyle.js.map

package/lib/focus/createCustomFocusIndicatorStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":"AAAA,SAAS,qBAAT,EAAgC,cAAhC,QAAsD,aAAtD;AAOA;;;;;;AAMG;;AACH,OAAO,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C;AAAE,EAAA,QAAQ,GAAG,cAAc,CAAC;AAA5B,IAAiF,cAFpC,MAG3B;AAClB,oBAAkB;AAChB,IAAA,YAAY,EAAE;AADE,GADA;AAIlB,GAAC,GAAG,qBAAqB,KAAK,QAAQ,EAAtC,GAA2C;AAJzB,CAH2B,CAAxC","sourcesContent":["import { KEYBOARD_NAV_SELECTOR, defaultOptions } from './constants';\nimport type { GriffelStyle } from '@griffel/react';\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n  selector?: 'focus' | 'focus-within';\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 * @param options - Configure the style of the focus outline\n */\nexport const createCustomFocusIndicatorStyle = (\n  style: GriffelStyle,\n  { selector = defaultOptions.selector }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): GriffelStyle => ({\n  ':focus-visible': {\n    outlineStyle: 'none',\n  },\n  [`${KEYBOARD_NAV_SELECTOR} :${selector}`]: style,\n});\n"],"sourceRoot":"../src/"}

package/{lib-commonjs/hooks/useFocusIndicatorStyle.d.ts → lib/focus/createFocusOutlineStyle.d.ts}

@@ -1,4 +1,5 @@
 import type { GriffelStyle } from '@griffel/react';
+import { CreateCustomFocusIndicatorStyleOptions } from './createCustomFocusIndicatorStyle';
 export declare type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;
 export declare type FocusOutlineStyleOptions = {
     /**
@@ -10,8 +11,8 @@ export declare type FocusOutlineStyleOptions = {
     outlineWidth: string;
     outlineOffset?: string | FocusOutlineOffset;
 };
-export interface CreateFocusIndicatorStyleRuleOptions {
-    selector?: 'focus' | 'focus-within';
+export interface CreateFocusOutlineStyleOptions extends CreateCustomFocusIndicatorStyleOptions {
+    style?: Partial<FocusOutlineStyleOptions>;
 }
 /**
  * NOTE: The element with the focus outline needs to have `position: relative` so that the
@@ -20,14 +21,4 @@ export interface CreateFocusIndicatorStyleRuleOptions {
  * @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
- * @param options - Configure the style of the focus outline
- */
-export declare const createCustomFocusIndicatorStyle: (style: GriffelStyle, options?: CreateFocusIndicatorStyleRuleOptions) => GriffelStyle;
+export declare const createFocusOutlineStyle: ({ selector, style, }?: CreateFocusOutlineStyleOptions) => GriffelStyle;

package/lib/{hooks/useFocusIndicatorStyle.js → focus/createFocusOutlineStyle.js}

@@ -1,6 +1,7 @@
 import { tokens } from '@fluentui/react-theme';
-import { KEYBOARD_NAV_SELECTOR } from '../symbols';
 import { shorthands } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from './createCustomFocusIndicatorStyle';
+import { defaultOptions } from './constants';
 /**
  * NOTE: the element with the focus outline needs to have `position: relative` so that the
  * pseudo element can be properly positioned.
@@ -39,10 +40,6 @@ const getFocusOutlineStyles = options => {
     }
   };
 };
-
-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.
@@ -51,33 +48,17 @@ const defaultOptions = {
  * @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
- * @param options - Configure the style of the focus outline
- */
 
-export const createCustomFocusIndicatorStyle = (style, options = defaultOptions) => ({
-  ':focus-visible': {
-    outlineStyle: 'none'
-  },
-  [`${KEYBOARD_NAV_SELECTOR} :${options.selector || defaultOptions.selector}`]: style
+export const createFocusOutlineStyle = ({
+  selector = defaultOptions.selector,
+  style = defaultOptions.style
+} = defaultOptions) => createCustomFocusIndicatorStyle(getFocusOutlineStyles({
+  outlineColor: tokens.colorStrokeFocus2,
+  outlineRadius: tokens.borderRadiusMedium,
+  // FIXME: tokens.strokeWidthThick causes some weird bugs
+  outlineWidth: '2px',
+  ...style
+}), {
+  selector
 });
-//# sourceMappingURL=useFocusIndicatorStyle.js.map
+//# sourceMappingURL=createFocusOutlineStyle.js.map

package/lib/focus/createFocusOutlineStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["focus/createFocusOutlineStyle.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,UAAT,QAA2B,gBAA3B;AAEA,SACE,+BADF,QAGO,mCAHP;AAIA,SAAS,cAAT,QAA+B,aAA/B;AAiBA;;;;;;AAMG;;AACH,MAAM,qBAAqB,GAAI,OAAD,IAAoD;;;AAChF,QAAM;AAAE,IAAA,aAAF;AAAiB,IAAA,YAAjB;AAA+B,IAAA,aAA/B;AAA8C,IAAA;AAA9C,MAA+D,OAArE;AAEA,QAAM,gBAAgB,GAAG,CAAA,CAAA,EAAA,GAAC,aAAD,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,KAAA,CAArC,GAAqC,EAAA,CAAE,GAAvC,KAA8C,aAAvE;AACA,QAAM,mBAAmB,GAAG,CAAA,CAAA,EAAA,GAAC,aAAD,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,KAAA,CAArC,GAAqC,EAAA,CAAE,MAAvC,KAAiD,aAA7E;AACA,QAAM,iBAAiB,GAAG,CAAA,CAAA,EAAA,GAAC,aAAD,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,KAAA,CAArC,GAAqC,EAAA,CAAE,IAAvC,KAA+C,aAAzE;AACA,QAAM,kBAAkB,GAAG,CAAA,CAAA,EAAA,GAAC,aAAD,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,KAAA,CAArC,GAAqC,EAAA,CAAE,KAAvC,KAAgD,aAA3E;AAEA,SAAO,EACL,GAAG,UAAU,CAAC,WAAX,CAAuB,aAAvB,CADE;AAEL,cAAU;AACR,MAAA,OAAO,EAAE,IADD;AAER,MAAA,QAAQ,EAAE,UAFF;AAGR,MAAA,aAAa,EAAE,MAHP;AAIR,MAAA,MAAM,EAAE,CAJA;AAMR,SAAG,UAAU,CAAC,WAAX,CAAuB,OAAvB,CANK;AAOR,SAAG,UAAU,CAAC,WAAX,CAAuB,YAAvB,CAPK;AAQR,SAAG,UAAU,CAAC,YAAX,CAAwB,aAAxB,CARK;AASR,SAAG,UAAU,CAAC,WAAX,CAAuB,YAAvB,CATK;AAWR,MAAA,GAAG,EAAE,CAAC,aAAD,GAAiB,IAAI,YAAY,EAAjC,GAAsC,cAAc,YAAY,MAAM,gBAAgB,GAXnF;AAYR,MAAA,MAAM,EAAE,CAAC,aAAD,GAAiB,IAAI,YAAY,EAAjC,GAAsC,cAAc,YAAY,MAAM,mBAAmB,GAZzF;AAaR,MAAA,IAAI,EAAE,CAAC,aAAD,GAAiB,IAAI,YAAY,EAAjC,GAAsC,cAAc,YAAY,MAAM,iBAAiB,GAbrF;AAcR,MAAA,KAAK,EAAE,CAAC,aAAD,GAAiB,IAAI,YAAY,EAAjC,GAAsC,cAAc,YAAY,MAAM,kBAAkB;AAdvF;AAFL,GAAP;AAmBD,CA3BD;AA6BA;;;;;;AAMG;;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC;AACtC,EAAA,QAAQ,GAAG,cAAc,CAAC,QADY;AAEtC,EAAA,KAAK,GAAG,cAAc,CAAC;AAFe,IAGJ,cAHG,KAIrC,+BAA+B,CAC7B,qBAAqB,CAAC;AACpB,EAAA,YAAY,EAAE,MAAM,CAAC,iBADD;AAEpB,EAAA,aAAa,EAAE,MAAM,CAAC,kBAFF;AAGpB;AACA,EAAA,YAAY,EAAE,KAJM;AAKpB,KAAG;AALiB,CAAD,CADQ,EAQ7B;AAAE,EAAA;AAAF,CAR6B,CAJ1B","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\nimport {\n  createCustomFocusIndicatorStyle,\n  CreateCustomFocusIndicatorStyleOptions,\n} from './createCustomFocusIndicatorStyle';\nimport { defaultOptions } from './constants';\n\nexport type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;\nexport type FocusOutlineStyleOptions = {\n  /**\n   * Only property not supported by the native CSS `outline`, if this is no longer needed\n   * we can just go native instead\n   */\n  outlineRadius: string;\n  outlineColor: string;\n  outlineWidth: string;\n  outlineOffset?: string | FocusOutlineOffset;\n};\nexport interface CreateFocusOutlineStyleOptions extends CreateCustomFocusIndicatorStyleOptions {\n  style?: Partial<FocusOutlineStyleOptions>;\n}\n\n/**\n * NOTE: the element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configures the style of the focus outline\n * @returns focus outline styles object\n */\nconst getFocusOutlineStyles = (options: FocusOutlineStyleOptions): GriffelStyle => {\n  const { outlineRadius, outlineColor, outlineOffset, outlineWidth } = options;\n\n  const outlineOffsetTop = (outlineOffset as FocusOutlineOffset)?.top || outlineOffset;\n  const outlineOffsetBottom = (outlineOffset as FocusOutlineOffset)?.bottom || outlineOffset;\n  const outlineOffsetLeft = (outlineOffset as FocusOutlineOffset)?.left || outlineOffset;\n  const outlineOffsetRight = (outlineOffset as FocusOutlineOffset)?.right || outlineOffset;\n\n  return {\n    ...shorthands.borderColor('transparent'),\n    ':after': {\n      content: '\"\"',\n      position: 'absolute',\n      pointerEvents: 'none',\n      zIndex: 1,\n\n      ...shorthands.borderStyle('solid'),\n      ...shorthands.borderWidth(outlineWidth),\n      ...shorthands.borderRadius(outlineRadius),\n      ...shorthands.borderColor(outlineColor),\n\n      top: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetTop})`,\n      bottom: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetBottom})`,\n      left: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetLeft})`,\n      right: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetRight})`,\n    },\n  };\n};\n\n/**\n * NOTE: The element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configure the style of the focus outline\n * @returns focus outline styles object for @see makeStyles\n */\nexport const createFocusOutlineStyle = ({\n  selector = defaultOptions.selector,\n  style = defaultOptions.style,\n}: CreateFocusOutlineStyleOptions = defaultOptions): GriffelStyle =>\n  createCustomFocusIndicatorStyle(\n    getFocusOutlineStyles({\n      outlineColor: tokens.colorStrokeFocus2,\n      outlineRadius: tokens.borderRadiusMedium,\n      // FIXME: tokens.strokeWidthThick causes some weird bugs\n      outlineWidth: '2px',\n      ...style,\n    }),\n    { selector },\n  );\n"],"sourceRoot":"../src/"}

package/lib/focus/index.d.ts

@@ -0,0 +1,2 @@
+export * from './createCustomFocusIndicatorStyle';
+export * from './createFocusOutlineStyle';

package/lib/focus/index.js

@@ -0,0 +1,3 @@
+export * from './createCustomFocusIndicatorStyle';
+export * from './createFocusOutlineStyle';
+//# sourceMappingURL=index.js.map

package/lib/focus/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["focus/index.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC;AAClD,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './createCustomFocusIndicatorStyle';\nexport * from './createFocusOutlineStyle';\n"]}

package/lib/hooks/index.d.ts

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

package/lib/hooks/index.js

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

package/lib/hooks/index.js.map

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

package/lib/hooks/useArrowNavigationGroup.d.ts

@@ -14,6 +14,10 @@ export interface UseArrowNavigationGroupOptions {
      * available) when tabbing from outside of the group
      */
     memorizeCurrent?: boolean;
+    /**
+     * Allow tabbing within the arrow navigation group items.
+     */
+    tabbable?: boolean;
 }
 /**
  * A hook that returns the necessary tabster attributes to support arrow key navigation

package/lib/hooks/useArrowNavigationGroup.js

@@ -19,7 +19,8 @@ export const useArrowNavigationGroup = options => {
     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
+      memorizeCurrent: options === null || options === void 0 ? void 0 : options.memorizeCurrent,
+      tabbable: options === null || options === void 0 ? void 0 : options.tabbable
     }
   });
 };

package/lib/hooks/useArrowNavigationGroup.js.map

@@ -1 +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,IAAwE;;;AAC7G,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;;AACF,SAAK,MAAL;AACE,aAAO,KAAK,CAAC,eAAN,CAAsB,IAA7B;;AAEF,SAAK,UAAL;AACA;AACE,aAAO,KAAK,CAAC,eAAN,CAAsB,QAA7B;AARJ;AAUD","sourcesContent":["import { Types, getMover } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseArrowNavigationGroupOptions {\n  /**\n   * Focus will navigate vertically, horizontally or in both directions (grid), defaults to horizontally\n   * @defaultValue vertical\n   */\n  axis?: 'vertical' | 'horizontal' | 'grid';\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): Types.TabsterDOMAttribute => {\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    case 'grid':\n      return Types.MoverDirections.Grid;\n\n    case 'vertical':\n    default:\n      return Types.MoverDirections.Vertical;\n  }\n}\n"],"sourceRoot":"../src/"}
+{"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;AAuBA;;;AAGG;;AACH,OAAO,MAAM,uBAAuB,GAAI,OAAD,IAAwE;;;AAC7G,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,eAHrB;AAIL,MAAA,QAAQ,EAAE,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE;AAJd;AADmB,GAAD,CAA3B;AAQD,CAfM;;AAiBP,SAAS,oBAAT,CAA8B,IAA9B,EAA0E;AACxE,UAAQ,IAAR;AACE,SAAK,YAAL;AACE,aAAO,KAAK,CAAC,eAAN,CAAsB,UAA7B;;AACF,SAAK,MAAL;AACE,aAAO,KAAK,CAAC,eAAN,CAAsB,IAA7B;;AAEF,SAAK,UAAL;AACA;AACE,aAAO,KAAK,CAAC,eAAN,CAAsB,QAA7B;AARJ;AAUD","sourcesContent":["import { Types, getMover } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseArrowNavigationGroupOptions {\n  /**\n   * Focus will navigate vertically, horizontally or in both directions (grid), defaults to horizontally\n   * @defaultValue vertical\n   */\n  axis?: 'vertical' | 'horizontal' | 'grid';\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   * Allow tabbing within the arrow navigation group items.\n   */\n  tabbable?: 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): Types.TabsterDOMAttribute => {\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      tabbable: options?.tabbable,\n    },\n  });\n};\n\nfunction axisToMoverDirection(axis: UseArrowNavigationGroupOptions['axis']): Types.MoverDirection {\n  switch (axis) {\n    case 'horizontal':\n      return Types.MoverDirections.Horizontal;\n    case 'grid':\n      return Types.MoverDirections.Grid;\n\n    case 'vertical':\n    default:\n      return Types.MoverDirections.Vertical;\n  }\n}\n"],"sourceRoot":"../src/"}

package/lib/hooks/useKeyboardNavAttribute.js

@@ -1,6 +1,6 @@
 import { createKeyborg } from 'keyborg';
 import { useEffect, useMemo, useRef } from 'react';
-import { KEYBOARD_NAV_ATTRIBUTE } from '../symbols';
+import { KEYBOARD_NAV_ATTRIBUTE } from '../focus/constants';
 import { useFluent } from '@fluentui/react-shared-contexts';
 /**
  * instantiates keyborg and add attribute to ensure focus indicator synced to keyborg logic

package/lib/hooks/useKeyboardNavAttribute.js.map

@@ -1 +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/"}
+{"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,oBAAvC;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 '../focus/constants';\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/index.d.ts

@@ -1,2 +1,4 @@
-export { createCustomFocusIndicatorStyle, createFocusOutlineStyle, useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes, } from './hooks/index';
-export type { CreateFocusIndicatorStyleRuleOptions, FocusOutlineOffset, FocusOutlineStyleOptions, UseArrowNavigationGroupOptions, UseFocusableGroupOptions, UseModalAttributesOptions, } from './hooks/index';
+export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes, } from './hooks/index';
+export type { UseArrowNavigationGroupOptions, UseFocusableGroupOptions, UseModalAttributesOptions, } from './hooks/index';
+export { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';
+export type { CreateCustomFocusIndicatorStyleOptions, CreateFocusOutlineStyleOptions, FocusOutlineOffset, FocusOutlineStyleOptions, } from './focus/index';

package/lib/index.js

@@ -1,2 +1,3 @@
-export { createCustomFocusIndicatorStyle, createFocusOutlineStyle, useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes } from './hooks/index';
+export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes } from './hooks/index';
+export { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,+BADF,EAEE,uBAFF,EAGE,uBAHF,EAIE,iBAJF,EAKE,eALF,EAME,uBANF,EAOE,kBAPF,EAQE,oBARF,QASO,eATP","sourcesContent":["export {\n  createCustomFocusIndicatorStyle,\n  createFocusOutlineStyle,\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useFocusFinders,\n  useKeyboardNavAttribute,\n  useModalAttributes,\n  useTabsterAttributes,\n} from './hooks/index';\nexport type {\n  CreateFocusIndicatorStyleRuleOptions,\n  FocusOutlineOffset,\n  FocusOutlineStyleOptions,\n  UseArrowNavigationGroupOptions,\n  UseFocusableGroupOptions,\n  UseModalAttributesOptions,\n} from './hooks/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,uBADF,EAEE,iBAFF,EAGE,eAHF,EAIE,uBAJF,EAKE,kBALF,EAME,oBANF,QAOO,eAPP;AAcA,SAAS,+BAAT,EAA0C,uBAA1C,QAAyE,eAAzE","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/lib-commonjs/{symbols.d.ts → focus/constants.d.ts}

@@ -1,2 +1,6 @@
 export declare const KEYBOARD_NAV_ATTRIBUTE: "data-keyboard-nav";
 export declare const KEYBOARD_NAV_SELECTOR: ":global([data-keyboard-nav])";
+export declare const defaultOptions: {
+    readonly style: {};
+    readonly selector: "focus";
+};

package/lib-commonjs/{symbols.js → focus/constants.js}

@@ -3,7 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.KEYBOARD_NAV_SELECTOR = exports.KEYBOARD_NAV_ATTRIBUTE = void 0;
+exports.defaultOptions = exports.KEYBOARD_NAV_SELECTOR = exports.KEYBOARD_NAV_ATTRIBUTE = void 0;
 exports.KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav';
 exports.KEYBOARD_NAV_SELECTOR = `:global([${exports.KEYBOARD_NAV_ATTRIBUTE}])`;
-//# sourceMappingURL=symbols.js.map
+exports.defaultOptions = {
+  style: {},
+  selector: 'focus'
+};
+//# sourceMappingURL=constants.js.map

package/lib-commonjs/focus/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["focus/constants.ts"],"names":[],"mappings":";;;;;;AAAa,OAAA,CAAA,sBAAA,GAAyB,mBAAzB;AACA,OAAA,CAAA,qBAAA,GAAwB,YAAY,OAAA,CAAA,sBAAsB,IAA1D;AACA,OAAA,CAAA,cAAA,GAAiB;AAC5B,EAAA,KAAK,EAAE,EADqB;AAE5B,EAAA,QAAQ,EAAE;AAFkB,CAAjB","sourcesContent":["export const KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav' as const;\nexport const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])` as const;\nexport const defaultOptions = {\n  style: {},\n  selector: 'focus',\n} as const;\n"],"sourceRoot":"../src/"}

package/lib-commonjs/focus/createCustomFocusIndicatorStyle.d.ts

@@ -0,0 +1,12 @@
+import type { GriffelStyle } from '@griffel/react';
+export interface CreateCustomFocusIndicatorStyleOptions {
+    selector?: 'focus' | 'focus-within';
+}
+/**
+ * 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
+ * @param options - Configure the style of the focus outline
+ */
+export declare const createCustomFocusIndicatorStyle: (style: GriffelStyle, { selector }?: CreateCustomFocusIndicatorStyleOptions) => GriffelStyle;

package/lib-commonjs/focus/createCustomFocusIndicatorStyle.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createCustomFocusIndicatorStyle = void 0;
+
+const constants_1 = /*#__PURE__*/require("./constants");
+/**
+ * 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
+ * @param options - Configure the style of the focus outline
+ */
+
+
+const createCustomFocusIndicatorStyle = (style, {
+  selector = constants_1.defaultOptions.selector
+} = constants_1.defaultOptions) => ({
+  ':focus-visible': {
+    outlineStyle: 'none'
+  },
+  [`${constants_1.KEYBOARD_NAV_SELECTOR} :${selector}`]: style
+});
+
+exports.createCustomFocusIndicatorStyle = createCustomFocusIndicatorStyle;
+//# sourceMappingURL=createCustomFocusIndicatorStyle.js.map

package/lib-commonjs/focus/createCustomFocusIndicatorStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AAOA;;;;;;AAMG;;;AACI,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C;AAAE,EAAA,QAAQ,GAAG,WAAA,CAAA,cAAA,CAAe;AAA5B,IAAiF,WAAA,CAAA,cAFpC,MAG3B;AAClB,oBAAkB;AAChB,IAAA,YAAY,EAAE;AADE,GADA;AAIlB,GAAC,GAAG,WAAA,CAAA,qBAAqB,KAAK,QAAQ,EAAtC,GAA2C;AAJzB,CAH2B,CAAxC;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import { KEYBOARD_NAV_SELECTOR, defaultOptions } from './constants';\nimport type { GriffelStyle } from '@griffel/react';\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n  selector?: 'focus' | 'focus-within';\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 * @param options - Configure the style of the focus outline\n */\nexport const createCustomFocusIndicatorStyle = (\n  style: GriffelStyle,\n  { selector = defaultOptions.selector }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): GriffelStyle => ({\n  ':focus-visible': {\n    outlineStyle: 'none',\n  },\n  [`${KEYBOARD_NAV_SELECTOR} :${selector}`]: style,\n});\n"],"sourceRoot":"../src/"}

package/{lib/hooks/useFocusIndicatorStyle.d.ts → lib-commonjs/focus/createFocusOutlineStyle.d.ts}

@@ -1,4 +1,5 @@
 import type { GriffelStyle } from '@griffel/react';
+import { CreateCustomFocusIndicatorStyleOptions } from './createCustomFocusIndicatorStyle';
 export declare type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;
 export declare type FocusOutlineStyleOptions = {
     /**
@@ -10,8 +11,8 @@ export declare type FocusOutlineStyleOptions = {
     outlineWidth: string;
     outlineOffset?: string | FocusOutlineOffset;
 };
-export interface CreateFocusIndicatorStyleRuleOptions {
-    selector?: 'focus' | 'focus-within';
+export interface CreateFocusOutlineStyleOptions extends CreateCustomFocusIndicatorStyleOptions {
+    style?: Partial<FocusOutlineStyleOptions>;
 }
 /**
  * NOTE: The element with the focus outline needs to have `position: relative` so that the
@@ -20,14 +21,4 @@ export interface CreateFocusIndicatorStyleRuleOptions {
  * @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
- * @param options - Configure the style of the focus outline
- */
-export declare const createCustomFocusIndicatorStyle: (style: GriffelStyle, options?: CreateFocusIndicatorStyleRuleOptions) => GriffelStyle;
+export declare const createFocusOutlineStyle: ({ selector, style, }?: CreateFocusOutlineStyleOptions) => GriffelStyle;

package/lib-commonjs/{hooks/useFocusIndicatorStyle.js → focus/createFocusOutlineStyle.js}

@@ -3,13 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createCustomFocusIndicatorStyle = exports.createFocusOutlineStyle = void 0;
+exports.createFocusOutlineStyle = void 0;
 
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
 
-const symbols_1 = /*#__PURE__*/require("../symbols");
-
 const react_1 = /*#__PURE__*/require("@griffel/react");
+
+const createCustomFocusIndicatorStyle_1 = /*#__PURE__*/require("./createCustomFocusIndicatorStyle");
+
+const constants_1 = /*#__PURE__*/require("./constants");
 /**
  * NOTE: the element with the focus outline needs to have `position: relative` so that the
  * pseudo element can be properly positioned.
@@ -49,10 +51,6 @@ const getFocusOutlineStyles = options => {
     }
   };
 };
-
-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.
@@ -61,37 +59,19 @@ const defaultOptions = {
  * @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
- * @param options - Configure the style of the focus outline
- */
-
-const createCustomFocusIndicatorStyle = (style, options = defaultOptions) => ({
-  ':focus-visible': {
-    outlineStyle: 'none'
-  },
-  [`${symbols_1.KEYBOARD_NAV_SELECTOR} :${options.selector || defaultOptions.selector}`]: style
+const createFocusOutlineStyle = ({
+  selector = constants_1.defaultOptions.selector,
+  style = constants_1.defaultOptions.style
+} = constants_1.defaultOptions) => createCustomFocusIndicatorStyle_1.createCustomFocusIndicatorStyle(getFocusOutlineStyles({
+  outlineColor: react_theme_1.tokens.colorStrokeFocus2,
+  outlineRadius: react_theme_1.tokens.borderRadiusMedium,
+  // FIXME: tokens.strokeWidthThick causes some weird bugs
+  outlineWidth: '2px',
+  ...style
+}), {
+  selector
 });
 
-exports.createCustomFocusIndicatorStyle = createCustomFocusIndicatorStyle;
-//# sourceMappingURL=useFocusIndicatorStyle.js.map
+exports.createFocusOutlineStyle = createFocusOutlineStyle;
+//# sourceMappingURL=createFocusOutlineStyle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["focus/createFocusOutlineStyle.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAEA,MAAA,iCAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;;AAIA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AAiBA;;;;;;AAMG;;;AACH,MAAM,qBAAqB,GAAI,OAAD,IAAoD;;;AAChF,QAAM;AAAE,IAAA,aAAF;AAAiB,IAAA,YAAjB;AAA+B,IAAA,aAA/B;AAA8C,IAAA;AAA9C,MAA+D,OAArE;AAEA,QAAM,gBAAgB,GAAG,CAAA,CAAA,EAAA,GAAC,aAAD,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,KAAA,CAArC,GAAqC,EAAA,CAAE,GAAvC,KAA8C,aAAvE;AACA,QAAM,mBAAmB,GAAG,CAAA,CAAA,EAAA,GAAC,aAAD,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,KAAA,CAArC,GAAqC,EAAA,CAAE,MAAvC,KAAiD,aAA7E;AACA,QAAM,iBAAiB,GAAG,CAAA,CAAA,EAAA,GAAC,aAAD,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,KAAA,CAArC,GAAqC,EAAA,CAAE,IAAvC,KAA+C,aAAzE;AACA,QAAM,kBAAkB,GAAG,CAAA,CAAA,EAAA,GAAC,aAAD,MAAqC,IAArC,IAAqC,EAAA,KAAA,KAAA,CAArC,GAAqC,KAAA,CAArC,GAAqC,EAAA,CAAE,KAAvC,KAAgD,aAA3E;AAEA,SAAO,EACL,GAAG,OAAA,CAAA,UAAA,CAAW,WAAX,CAAuB,aAAvB,CADE;AAEL,cAAU;AACR,MAAA,OAAO,EAAE,IADD;AAER,MAAA,QAAQ,EAAE,UAFF;AAGR,MAAA,aAAa,EAAE,MAHP;AAIR,MAAA,MAAM,EAAE,CAJA;AAMR,SAAG,OAAA,CAAA,UAAA,CAAW,WAAX,CAAuB,OAAvB,CANK;AAOR,SAAG,OAAA,CAAA,UAAA,CAAW,WAAX,CAAuB,YAAvB,CAPK;AAQR,SAAG,OAAA,CAAA,UAAA,CAAW,YAAX,CAAwB,aAAxB,CARK;AASR,SAAG,OAAA,CAAA,UAAA,CAAW,WAAX,CAAuB,YAAvB,CATK;AAWR,MAAA,GAAG,EAAE,CAAC,aAAD,GAAiB,IAAI,YAAY,EAAjC,GAAsC,cAAc,YAAY,MAAM,gBAAgB,GAXnF;AAYR,MAAA,MAAM,EAAE,CAAC,aAAD,GAAiB,IAAI,YAAY,EAAjC,GAAsC,cAAc,YAAY,MAAM,mBAAmB,GAZzF;AAaR,MAAA,IAAI,EAAE,CAAC,aAAD,GAAiB,IAAI,YAAY,EAAjC,GAAsC,cAAc,YAAY,MAAM,iBAAiB,GAbrF;AAcR,MAAA,KAAK,EAAE,CAAC,aAAD,GAAiB,IAAI,YAAY,EAAjC,GAAsC,cAAc,YAAY,MAAM,kBAAkB;AAdvF;AAFL,GAAP;AAmBD,CA3BD;AA6BA;;;;;;AAMG;;;AACI,MAAM,uBAAuB,GAAG,CAAC;AACtC,EAAA,QAAQ,GAAG,WAAA,CAAA,cAAA,CAAe,QADY;AAEtC,EAAA,KAAK,GAAG,WAAA,CAAA,cAAA,CAAe;AAFe,IAGJ,WAAA,CAAA,cAHG,KAIrC,iCAAA,CAAA,+BAAA,CACE,qBAAqB,CAAC;AACpB,EAAA,YAAY,EAAE,aAAA,CAAA,MAAA,CAAO,iBADD;AAEpB,EAAA,aAAa,EAAE,aAAA,CAAA,MAAA,CAAO,kBAFF;AAGpB;AACA,EAAA,YAAY,EAAE,KAJM;AAKpB,KAAG;AALiB,CAAD,CADvB,EAQE;AAAE,EAAA;AAAF,CARF,CAJK;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\nimport {\n  createCustomFocusIndicatorStyle,\n  CreateCustomFocusIndicatorStyleOptions,\n} from './createCustomFocusIndicatorStyle';\nimport { defaultOptions } from './constants';\n\nexport type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;\nexport type FocusOutlineStyleOptions = {\n  /**\n   * Only property not supported by the native CSS `outline`, if this is no longer needed\n   * we can just go native instead\n   */\n  outlineRadius: string;\n  outlineColor: string;\n  outlineWidth: string;\n  outlineOffset?: string | FocusOutlineOffset;\n};\nexport interface CreateFocusOutlineStyleOptions extends CreateCustomFocusIndicatorStyleOptions {\n  style?: Partial<FocusOutlineStyleOptions>;\n}\n\n/**\n * NOTE: the element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configures the style of the focus outline\n * @returns focus outline styles object\n */\nconst getFocusOutlineStyles = (options: FocusOutlineStyleOptions): GriffelStyle => {\n  const { outlineRadius, outlineColor, outlineOffset, outlineWidth } = options;\n\n  const outlineOffsetTop = (outlineOffset as FocusOutlineOffset)?.top || outlineOffset;\n  const outlineOffsetBottom = (outlineOffset as FocusOutlineOffset)?.bottom || outlineOffset;\n  const outlineOffsetLeft = (outlineOffset as FocusOutlineOffset)?.left || outlineOffset;\n  const outlineOffsetRight = (outlineOffset as FocusOutlineOffset)?.right || outlineOffset;\n\n  return {\n    ...shorthands.borderColor('transparent'),\n    ':after': {\n      content: '\"\"',\n      position: 'absolute',\n      pointerEvents: 'none',\n      zIndex: 1,\n\n      ...shorthands.borderStyle('solid'),\n      ...shorthands.borderWidth(outlineWidth),\n      ...shorthands.borderRadius(outlineRadius),\n      ...shorthands.borderColor(outlineColor),\n\n      top: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetTop})`,\n      bottom: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetBottom})`,\n      left: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetLeft})`,\n      right: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetRight})`,\n    },\n  };\n};\n\n/**\n * NOTE: The element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configure the style of the focus outline\n * @returns focus outline styles object for @see makeStyles\n */\nexport const createFocusOutlineStyle = ({\n  selector = defaultOptions.selector,\n  style = defaultOptions.style,\n}: CreateFocusOutlineStyleOptions = defaultOptions): GriffelStyle =>\n  createCustomFocusIndicatorStyle(\n    getFocusOutlineStyles({\n      outlineColor: tokens.colorStrokeFocus2,\n      outlineRadius: tokens.borderRadiusMedium,\n      // FIXME: tokens.strokeWidthThick causes some weird bugs\n      outlineWidth: '2px',\n      ...style,\n    }),\n    { selector },\n  );\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,2 @@
+export * from './createCustomFocusIndicatorStyle';
+export * from './createFocusOutlineStyle';

package/lib-commonjs/focus/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./createCustomFocusIndicatorStyle"), exports);
+
+tslib_1.__exportStar(require("./createFocusOutlineStyle"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["focus/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mCAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './createCustomFocusIndicatorStyle';\nexport * from './createFocusOutlineStyle';\n"],"sourceRoot":"../src/"}

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

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

package/lib-commonjs/hooks/index.js

@@ -12,8 +12,6 @@ tslib_1.__exportStar(require("./useFocusableGroup"), exports);
 
 tslib_1.__exportStar(require("./useFocusFinders"), exports);
 
-tslib_1.__exportStar(require("./useFocusIndicatorStyle"), exports);
-
 tslib_1.__exportStar(require("./useKeyboardNavAttribute"), exports);
 
 tslib_1.__exportStar(require("./useModalAttributes"), exports);