feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-tabster/lib/focus/createCustomFocusIndicatorStyle.js

@@ -0,0 +1,43 @@
+import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } 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
+ *
+ * If you're using `createCustomFocusIndicatorStyle` instead of `createFocusOutlineStyle`
+ * keep in mind that the default outline style is not going to be removed
+ * (as it is in `createFocusOutlineStyle`),
+ * and is your responsibility to manually remove it from your styles.
+ *
+ * @example
+ * ```ts
+ * // Link styles
+ * const useStyles = makeStyles({
+  focusIndicator: createCustomFocusIndicatorStyle({
+    textDecorationColor: tokens.colorStrokeFocus2,
+    textDecorationLine: 'underline',
+    textDecorationStyle: 'double',
+    outlineStyle: 'none',
+  }),
+  // Common styles.
+  root: {
+    // ❗️ DO NOT FORGET TO REMOVE THE DEFAULT OUTLINE STYLE
+    ':focus-visible': {
+      outlineStyle: 'none',
+    },
+ * ```
+ *
+ * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles
+ * @param options - Configure the style of the focus outline
+ */ export function createCustomFocusIndicatorStyle(style, { selector: selectorType = defaultOptions.selector, customizeSelector = defaultOptions.customizeSelector } = defaultOptions) {
+    return {
+        [customizeSelector(createBaseSelector(selectorType))]: style
+    };
+}
+function createBaseSelector(selectorType) {
+    switch(selectorType){
+        case 'focus':
+            return `&[${FOCUS_VISIBLE_ATTR}]`;
+        case 'focus-within':
+            return `&[${FOCUS_WITHIN_ATTR}]:focus-within`;
+    }
+}