feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-tabster/lib/hooks/useFocusedElementChange.js

@@ -0,0 +1,26 @@
+'use client';
+import { disposeTabster } from 'tabster';
+import * as React from 'react';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { useEventCallback } from '@fluentui/react-utilities';
+import { createTabsterWithConfig } from './useTabster';
+/**
+ * Subscribes to the tabster focused element. Calls the callback when the focused element changes.
+ * @param callback - Callback to subscribe to the focused element.
+ */ export function useFocusedElementChange(callback) {
+    const { targetDocument } = useFluent();
+    const listener = useEventCallback(callback);
+    React.useEffect(()=>{
+        const tabster = createTabsterWithConfig(targetDocument);
+        if (tabster) {
+            tabster.focusedElement.subscribe(listener);
+            return ()=>{
+                tabster.focusedElement.unsubscribe(listener);
+                disposeTabster(tabster);
+            };
+        }
+    }, [
+        listener,
+        targetDocument
+    ]);
+}