feat(react-tabster): adds customizeSelector to createCustomFocusIndicatorStyle method

change/@fluentui-react-tabster-1c26ce6a-008b-4296-8065-b09240c6b9ed.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: adds suffixes to selectors on focus creator methods",
+  "packageName": "@fluentui/react-tabster",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-tabster/etc/react-tabster.api.md

@@ -14,17 +14,18 @@ import { Types } from 'tabster';
 export function applyFocusVisiblePolyfill(scope: HTMLElement, targetWindow: Window): () => void;
 
 // @public
-export function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(style: TStyle, { selector }?: CreateCustomFocusIndicatorStyleOptions): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle;
+export function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(style: TStyle, { selector: selectorType, customizeSelector, }?: CreateCustomFocusIndicatorStyleOptions): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle;
 
 // @public (undocumented)
 export interface CreateCustomFocusIndicatorStyleOptions {
+    customizeSelector?: (selector: string) => string;
     // @deprecated
     enableOutline?: boolean;
     selector?: 'focus' | 'focus-within';
 }
 
 // @public
-export const createFocusOutlineStyle: ({ enableOutline, selector, style, }?: CreateFocusOutlineStyleOptions) => GriffelStyle;
+export const createFocusOutlineStyle: ({ enableOutline, selector, customizeSelector, style, }?: CreateFocusOutlineStyleOptions) => GriffelStyle;
 
 // @public (undocumented)
 export interface CreateFocusOutlineStyleOptions extends Omit<CreateCustomFocusIndicatorStyleOptions, 'enableOutline'> {

packages/react-components/react-tabster/src/focus/constants.ts

@@ -13,4 +13,5 @@ export const FOCUS_WITHIN_ATTR = 'data-fui-focus-within';
 export const defaultOptions = {
   style: {},
   selector: 'focus',
+  customizeSelector: (selector: string) => selector,
 } as const;

packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts

@@ -11,8 +11,13 @@ export interface CreateCustomFocusIndicatorStyleOptions {
    * Control if the indicator appears when the corresponding element is focused,
    * or any child is focused within the corresponding element.
    * @default 'focus'
+   * @alias selectorType
    */
   selector?: 'focus' | 'focus-within';
+  /**
+   * Customizes the selector provided based on the selector type.
+   */
+  customizeSelector?: (selector: string) => string;
   /**
    * Enables the browser default outline style
    * @deprecated The custom focus indicator no longer affects outline styles. Outline is overridden
@@ -30,14 +35,19 @@ export interface CreateCustomFocusIndicatorStyleOptions {
  */
 export function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(
   style: TStyle,
-  { selector = defaultOptions.selector }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,
+  {
+    selector: selectorType = defaultOptions.selector,
+    customizeSelector = defaultOptions.customizeSelector,
+  }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,
 ): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle {
-  return {
-    ...(selector === 'focus' && {
-      [`&[${FOCUS_VISIBLE_ATTR}]`]: style,
-    }),
-    ...(selector === 'focus-within' && {
-      [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style,
-    }),
-  };
+  return { [customizeSelector(createBaseSelector(selectorType))]: style };
+}
+
+function createBaseSelector(selectorType: 'focus' | 'focus-within'): string {
+  switch (selectorType) {
+    case 'focus':
+      return `&[${FOCUS_VISIBLE_ATTR}]`;
+    case 'focus-within':
+      return `&[${FOCUS_WITHIN_ATTR}]:focus-within`;
+  }
 }

packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts

@@ -88,6 +88,7 @@ const getFocusOutlineStyles = (options: FocusOutlineStyleOptions): GriffelStyle
 export const createFocusOutlineStyle = ({
   enableOutline = false,
   selector = defaultOptions.selector,
+  customizeSelector,
   style = defaultOptions.style,
 }: CreateFocusOutlineStyleOptions = defaultOptions): GriffelStyle => ({
   ':focus': {
@@ -105,6 +106,6 @@ export const createFocusOutlineStyle = ({
       outlineWidth: '2px',
       ...style,
     }),
-    { selector },
+    { selector, customizeSelector },
   ),
 });