@fluentui/react-tabster 0.0.0-nightly-20230627-0414.1 → 0.0.0-nightly-20230703-0415.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-tabster",
   "entries": [
     {
-      "date": "Tue, 27 Jun 2023 04:19:45 GMT",
-      "tag": "@fluentui/react-tabster_v0.0.0-nightly-20230627-0414.1",
-      "version": "0.0.0-nightly-20230627-0414.1",
+      "date": "Mon, 03 Jul 2023 04:22:10 GMT",
+      "tag": "@fluentui/react-tabster_v0.0.0-nightly-20230703-0415.1",
+      "version": "0.0.0-nightly-20230703-0415.1",
       "comments": {
         "prerelease": [
           {
@@ -16,20 +16,58 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-tabster",
-            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230627-0414.1",
-            "commit": "a4a5b82930666d5e8008fbeb1545f38a8299a575"
+            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230703-0415.1",
+            "commit": "d923e322c01699d8e3055246caefabba09153ac9"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-tabster",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230627-0414.1",
-            "commit": "a4a5b82930666d5e8008fbeb1545f38a8299a575"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230703-0415.1",
+            "commit": "d923e322c01699d8e3055246caefabba09153ac9"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-tabster",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230627-0414.1",
-            "commit": "a4a5b82930666d5e8008fbeb1545f38a8299a575"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230703-0415.1",
+            "commit": "d923e322c01699d8e3055246caefabba09153ac9"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 28 Jun 2023 11:12:33 GMT",
+      "tag": "@fluentui/react-tabster_v9.9.1",
+      "version": "9.9.1",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "fbe878e9c9785588197481f172c42c2c0a230292",
+            "comment": "fix: update .npmignore to unify v8 packages and exclude project.json"
+          }
+        ],
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-utilities to v9.10.0",
+            "commit": "08de131d5f3346e001dcd8d2f0f3809c698f16d7"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 27 Jun 2023 11:21:22 GMT",
+      "tag": "@fluentui/react-tabster_v9.9.0",
+      "version": "9.9.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "1c7e6451a11fb9c59e344df616394a320e8031c4",
+            "comment": "feat: Observed element hooks"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,20 +1,38 @@
 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Tue, 27 Jun 2023 04:19:45 GMT and should not be manually modified.
+This log was last generated on Mon, 03 Jul 2023 04:22:10 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20230627-0414.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v0.0.0-nightly-20230627-0414.1)
+## [0.0.0-nightly-20230703-0415.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v0.0.0-nightly-20230703-0415.1)
 
-Tue, 27 Jun 2023 04:19:45 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.8.1..@fluentui/react-tabster_v0.0.0-nightly-20230627-0414.1)
+Mon, 03 Jul 2023 04:22:10 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.9.1..@fluentui/react-tabster_v0.0.0-nightly-20230703-0415.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230627-0414.1 ([commit](https://github.com/microsoft/fluentui/commit/a4a5b82930666d5e8008fbeb1545f38a8299a575) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20230627-0414.1 ([commit](https://github.com/microsoft/fluentui/commit/a4a5b82930666d5e8008fbeb1545f38a8299a575) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20230627-0414.1 ([commit](https://github.com/microsoft/fluentui/commit/a4a5b82930666d5e8008fbeb1545f38a8299a575) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230703-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/d923e322c01699d8e3055246caefabba09153ac9) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20230703-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/d923e322c01699d8e3055246caefabba09153ac9) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20230703-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/d923e322c01699d8e3055246caefabba09153ac9) by beachball)
+
+## [9.9.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.9.1)
+
+Wed, 28 Jun 2023 11:12:33 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.9.0..@fluentui/react-tabster_v9.9.1)
+
+### Patches
+
+- Bump @fluentui/react-utilities to v9.10.0 ([PR #28320](https://github.com/microsoft/fluentui/pull/28320) by beachball)
+
+## [9.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.9.0)
+
+Tue, 27 Jun 2023 11:21:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.8.1..@fluentui/react-tabster_v9.9.0)
+
+### Minor changes
+
+- feat: Observed element hooks ([PR #28291](https://github.com/microsoft/fluentui/pull/28291) by lingfangao@hotmail.com)
 
 ## [9.8.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.8.1)
 

package/dist/index.d.ts

@@ -128,6 +128,20 @@ export declare const useFocusFinders: () => {
     findPrevFocusable: (currentElement: HTMLElement, options?: Pick<Partial<Types.FindNextProps>, 'container'>) => HTMLElement | null | undefined;
 };
 
+/**
+ *
+ * @param name - The observed element to focus
+ * @returns Function that will focus the
+ */
+export declare function useFocusObserved(name: string, options?: UseFocusObservedOptions): () => Types.ObservedElementAsyncRequest<boolean>;
+
+declare interface UseFocusObservedOptions {
+    /**
+     * After timeout the focus attempt fails
+     */
+    timeout?: number;
+}
+
 export declare function useFocusVisible<TElement extends HTMLElement = HTMLElement>(options?: UseFocusVisibleOptions): React_2.RefObject<TElement>;
 
 declare type UseFocusVisibleOptions = {
@@ -185,6 +199,8 @@ export declare interface UseModalAttributesOptions {
     id?: string;
 }
 
+export declare function useObservedElement(name: string | string[]): Types.TabsterDOMAttribute;
+
 /**
  * @internal
  * Hook that returns tabster attributes while ensuring tabster exists

package/lib/hooks/index.js

@@ -6,3 +6,5 @@ export * from './useFocusWithin';
 export * from './useKeyboardNavAttribute';
 export * from './useModalAttributes';
 export * from './useTabsterAttributes';
+export * from './useObservedElement';
+export * from './useFocusObserved';

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './useArrowNavigationGroup';\nexport * from './useFocusableGroup';\nexport * from './useFocusFinders';\nexport * from './useFocusVisible';\nexport * from './useFocusWithin';\nexport * from './useKeyboardNavAttribute';\nexport * from './useModalAttributes';\nexport * from './useTabsterAttributes';\n"],"names":[],"mappings":"AAAA,cAAc,4BAA4B;AAC1C,cAAc,sBAAsB;AACpC,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,mBAAmB;AACjC,cAAc,4BAA4B;AAC1C,cAAc,uBAAuB;AACrC,cAAc,yBAAyB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './useArrowNavigationGroup';\nexport * from './useFocusableGroup';\nexport * from './useFocusFinders';\nexport * from './useFocusVisible';\nexport * from './useFocusWithin';\nexport * from './useKeyboardNavAttribute';\nexport * from './useModalAttributes';\nexport * from './useTabsterAttributes';\nexport * from './useObservedElement';\nexport * from './useFocusObserved';\n"],"names":[],"mappings":"AAAA,cAAc,4BAA4B;AAC1C,cAAc,sBAAsB;AACpC,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,mBAAmB;AACjC,cAAc,4BAA4B;AAC1C,cAAc,uBAAuB;AACrC,cAAc,yBAAyB;AACvC,cAAc,uBAAuB;AACrC,cAAc,qBAAqB"}

package/lib/hooks/useFocusObserved.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { getObservedElement } from 'tabster';
+import { useTabster } from './useTabster';
+/**
+ *
+ * @param name - The observed element to focus
+ * @returns Function that will focus the
+ */ export function useFocusObserved(name, options = {}) {
+    const { timeout =1000  } = options;
+    const tabster = useTabster();
+    const observedAPI = tabster ? getObservedElement(tabster) : null;
+    return React.useCallback(()=>{
+        if (observedAPI) {
+            return observedAPI.requestFocus(name, timeout);
+        }
+        return {
+            result: Promise.resolve(false),
+            cancel: ()=>null
+        };
+    }, [
+        observedAPI,
+        name,
+        timeout
+    ]);
+}

package/lib/hooks/useFocusObserved.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useFocusObserved.ts"],"sourcesContent":["import * as React from 'react';\nimport { getObservedElement, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\ninterface UseFocusObservedOptions {\n  /**\n   * After timeout the focus attempt fails\n   */\n  timeout?: number;\n}\n\n/**\n *\n * @param name - The observed element to focus\n * @returns Function that will focus the\n */\nexport function useFocusObserved(\n  name: string,\n  options: UseFocusObservedOptions = {},\n): () => TabsterTypes.ObservedElementAsyncRequest<boolean> {\n  const { timeout = 1000 } = options;\n  const tabster = useTabster();\n\n  const observedAPI = tabster ? getObservedElement(tabster) : null;\n\n  return React.useCallback(() => {\n    if (observedAPI) {\n      return observedAPI.requestFocus(name, timeout);\n    }\n\n    return { result: Promise.resolve(false), cancel: () => null };\n  }, [observedAPI, name, timeout]);\n}\n"],"names":["React","getObservedElement","useTabster","useFocusObserved","name","options","timeout","tabster","observedAPI","useCallback","requestFocus","result","Promise","resolve","cancel"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAA+B,UAAU;AACpE,SAASC,UAAU,QAAQ,eAAe;AAS1C;;;;CAIC,GACD,OAAO,SAASC,iBACdC,IAAY,EACZC,UAAmC,CAAC,CAAC,EACoB;IACzD,MAAM,EAAEC,SAAU,KAAI,EAAE,GAAGD;IAC3B,MAAME,UAAUL;IAEhB,MAAMM,cAAcD,UAAUN,mBAAmBM,WAAW,IAAI;IAEhE,OAAOP,MAAMS,WAAW,CAAC,IAAM;QAC7B,IAAID,aAAa;YACf,OAAOA,YAAYE,YAAY,CAACN,MAAME;QACxC,CAAC;QAED,OAAO;YAAEK,QAAQC,QAAQC,OAAO,CAAC,KAAK;YAAGC,QAAQ,IAAM,IAAI;QAAC;IAC9D,GAAG;QAACN;QAAaJ;QAAME;KAAQ;AACjC,CAAC"}

package/lib/hooks/useFocusVisible.js

@@ -2,10 +2,10 @@ import * as React from 'react';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';
 export function useFocusVisible(options = {}) {
-    const contentValue = useFluent();
+    const contextValue = useFluent();
     const scopeRef = React.useRef(null);
     var _options_targetDocument;
-    const targetDocument = (_options_targetDocument = options.targetDocument) !== null && _options_targetDocument !== void 0 ? _options_targetDocument : contentValue.targetDocument;
+    const targetDocument = (_options_targetDocument = options.targetDocument) !== null && _options_targetDocument !== void 0 ? _options_targetDocument : contextValue.targetDocument;
     React.useEffect(()=>{
         if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && scopeRef.current) {
             return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);

package/lib/hooks/useFocusVisible.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useFocusVisible.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';\n\ntype UseFocusVisibleOptions = {\n  targetDocument?: Document;\n};\n\nexport function useFocusVisible<TElement extends HTMLElement = HTMLElement>(options: UseFocusVisibleOptions = {}) {\n  const contentValue = useFluent();\n  const scopeRef = React.useRef<TElement>(null);\n\n  const targetDocument = options.targetDocument ?? contentValue.targetDocument;\n\n  React.useEffect(() => {\n    if (targetDocument?.defaultView && scopeRef.current) {\n      return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);\n    }\n  }, [scopeRef, targetDocument]);\n\n  return scopeRef;\n}\n"],"names":["React","useFluent_unstable","useFluent","applyFocusVisiblePolyfill","useFocusVisible","options","contentValue","scopeRef","useRef","targetDocument","useEffect","defaultView","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,yBAAyB,QAAQ,gCAAgC;AAM1E,OAAO,SAASC,gBAA4DC,UAAkC,CAAC,CAAC,EAAE;IAChH,MAAMC,eAAeJ;IACrB,MAAMK,WAAWP,MAAMQ,MAAM,CAAW,IAAI;QAErBH;IAAvB,MAAMI,iBAAiBJ,CAAAA,0BAAAA,QAAQI,cAAc,cAAtBJ,qCAAAA,0BAA0BC,aAAaG,cAAc;IAE5ET,MAAMU,SAAS,CAAC,IAAM;QACpB,IAAID,CAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBE,WAAW,AAAD,KAAKJ,SAASK,OAAO,EAAE;YACnD,OAAOT,0BAA0BI,SAASK,OAAO,EAAEH,eAAeE,WAAW;QAC/E,CAAC;IACH,GAAG;QAACJ;QAAUE;KAAe;IAE7B,OAAOF;AACT,CAAC"}
+{"version":3,"sources":["useFocusVisible.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';\n\ntype UseFocusVisibleOptions = {\n  targetDocument?: Document;\n};\n\nexport function useFocusVisible<TElement extends HTMLElement = HTMLElement>(options: UseFocusVisibleOptions = {}) {\n  const contextValue = useFluent();\n  const scopeRef = React.useRef<TElement>(null);\n\n  const targetDocument = options.targetDocument ?? contextValue.targetDocument;\n\n  React.useEffect(() => {\n    if (targetDocument?.defaultView && scopeRef.current) {\n      return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);\n    }\n  }, [scopeRef, targetDocument]);\n\n  return scopeRef;\n}\n"],"names":["React","useFluent_unstable","useFluent","applyFocusVisiblePolyfill","useFocusVisible","options","contextValue","scopeRef","useRef","targetDocument","useEffect","defaultView","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,yBAAyB,QAAQ,gCAAgC;AAM1E,OAAO,SAASC,gBAA4DC,UAAkC,CAAC,CAAC,EAAE;IAChH,MAAMC,eAAeJ;IACrB,MAAMK,WAAWP,MAAMQ,MAAM,CAAW,IAAI;QAErBH;IAAvB,MAAMI,iBAAiBJ,CAAAA,0BAAAA,QAAQI,cAAc,cAAtBJ,qCAAAA,0BAA0BC,aAAaG,cAAc;IAE5ET,MAAMU,SAAS,CAAC,IAAM;QACpB,IAAID,CAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBE,WAAW,AAAD,KAAKJ,SAASK,OAAO,EAAE;YACnD,OAAOT,0BAA0BI,SAASK,OAAO,EAAEH,eAAeE,WAAW;QAC/E,CAAC;IACH,GAAG;QAACJ;QAAUE;KAAe;IAE7B,OAAOF;AACT,CAAC"}

package/lib/hooks/useObservedElement.js

@@ -0,0 +1,16 @@
+import { useTabster } from './useTabster';
+import { getObservedElement } from 'tabster';
+import { useTabsterAttributes } from './useTabsterAttributes';
+export function useObservedElement(name) {
+    const tabster = useTabster();
+    if (tabster) {
+        getObservedElement(tabster);
+    }
+    return useTabsterAttributes({
+        observed: {
+            names: Array.isArray(name) ? name : [
+                name
+            ]
+        }
+    });
+}

package/lib/hooks/useObservedElement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useObservedElement.ts"],"sourcesContent":["import { useTabster } from './useTabster';\nimport { getObservedElement, Types as TabsterTypes } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\n\nexport function useObservedElement(name: string | string[]): TabsterTypes.TabsterDOMAttribute {\n  const tabster = useTabster();\n  if (tabster) {\n    getObservedElement(tabster);\n  }\n\n  return useTabsterAttributes({ observed: { names: Array.isArray(name) ? name : [name] } });\n}\n"],"names":["useTabster","getObservedElement","useTabsterAttributes","useObservedElement","name","tabster","observed","names","Array","isArray"],"mappings":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAC1C,SAASC,kBAAkB,QAA+B,UAAU;AACpE,SAASC,oBAAoB,QAAQ,yBAAyB;AAE9D,OAAO,SAASC,mBAAmBC,IAAuB,EAAoC;IAC5F,MAAMC,UAAUL;IAChB,IAAIK,SAAS;QACXJ,mBAAmBI;IACrB,CAAC;IAED,OAAOH,qBAAqB;QAAEI,UAAU;YAAEC,OAAOC,MAAMC,OAAO,CAACL,QAAQA,OAAO;gBAACA;aAAK;QAAC;IAAE;AACzF,CAAC"}

package/lib/index.js

@@ -1,3 +1,3 @@
-export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useFocusVisible, useFocusWithin, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes } from './hooks/index';
+export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useFocusVisible, useFocusWithin, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes, useObservedElement, useFocusObserved } from './hooks/index';
 export { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';
 export { applyFocusVisiblePolyfill } from './focus/index';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useFocusFinders,\n  useFocusVisible,\n  useFocusWithin,\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\nexport { applyFocusVisiblePolyfill } from './focus/index';\n"],"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useModalAttributes","useTabsterAttributes","createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill"],"mappings":"AAAA,SACEA,uBAAuB,EACvBC,iBAAiB,EACjBC,eAAe,EACfC,eAAe,EACfC,cAAc,EACdC,uBAAuB,EACvBC,kBAAkB,EAClBC,oBAAoB,QACf,gBAAgB;AAOvB,SAASC,+BAA+B,EAAEC,uBAAuB,QAAQ,gBAAgB;AASzF,SAASC,yBAAyB,QAAQ,gBAAgB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useFocusFinders,\n  useFocusVisible,\n  useFocusWithin,\n  useKeyboardNavAttribute,\n  useModalAttributes,\n  useTabsterAttributes,\n  useObservedElement,\n  useFocusObserved,\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\nexport { applyFocusVisiblePolyfill } from './focus/index';\n"],"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useModalAttributes","useTabsterAttributes","useObservedElement","useFocusObserved","createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill"],"mappings":"AAAA,SACEA,uBAAuB,EACvBC,iBAAiB,EACjBC,eAAe,EACfC,eAAe,EACfC,cAAc,EACdC,uBAAuB,EACvBC,kBAAkB,EAClBC,oBAAoB,EACpBC,kBAAkB,EAClBC,gBAAgB,QACX,gBAAgB;AAOvB,SAASC,+BAA+B,EAAEC,uBAAuB,QAAQ,gBAAgB;AASzF,SAASC,yBAAyB,QAAQ,gBAAgB"}

package/lib-commonjs/hooks/index.js

@@ -11,3 +11,5 @@ _exportStar(require("./useFocusWithin"), exports);
 _exportStar(require("./useKeyboardNavAttribute"), exports);
 _exportStar(require("./useModalAttributes"), exports);
 _exportStar(require("./useTabsterAttributes"), exports);
+_exportStar(require("./useObservedElement"), exports);
+_exportStar(require("./useFocusObserved"), exports);

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

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export * from './useArrowNavigationGroup';\nexport * from './useFocusableGroup';\nexport * from './useFocusFinders';\nexport * from './useFocusVisible';\nexport * from './useFocusWithin';\nexport * from './useKeyboardNavAttribute';\nexport * from './useModalAttributes';\nexport * from './useTabsterAttributes';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './useArrowNavigationGroup';\nexport * from './useFocusableGroup';\nexport * from './useFocusFinders';\nexport * from './useFocusVisible';\nexport * from './useFocusWithin';\nexport * from './useKeyboardNavAttribute';\nexport * from './useModalAttributes';\nexport * from './useTabsterAttributes';\nexport * from './useObservedElement';\nexport * from './useFocusObserved';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA"}

package/lib-commonjs/hooks/useFocusObserved.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useFocusObserved", {
+    enumerable: true,
+    get: ()=>useFocusObserved
+});
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _tabster = require("tabster");
+const _useTabster = require("./useTabster");
+function useFocusObserved(name, options = {}) {
+    const { timeout =1000  } = options;
+    const tabster = (0, _useTabster.useTabster)();
+    const observedAPI = tabster ? (0, _tabster.getObservedElement)(tabster) : null;
+    return _react.useCallback(()=>{
+        if (observedAPI) {
+            return observedAPI.requestFocus(name, timeout);
+        }
+        return {
+            result: Promise.resolve(false),
+            cancel: ()=>null
+        };
+    }, [
+        observedAPI,
+        name,
+        timeout
+    ]);
+}

package/lib-commonjs/hooks/useFocusObserved.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useFocusObserved.js"],"sourcesContent":["import * as React from 'react';\nimport { getObservedElement } from 'tabster';\nimport { useTabster } from './useTabster';\n/**\n *\n * @param name - The observed element to focus\n * @returns Function that will focus the\n */ export function useFocusObserved(name, options = {}) {\n    const { timeout =1000  } = options;\n    const tabster = useTabster();\n    const observedAPI = tabster ? getObservedElement(tabster) : null;\n    return React.useCallback(()=>{\n        if (observedAPI) {\n            return observedAPI.requestFocus(name, timeout);\n        }\n        return {\n            result: Promise.resolve(false),\n            cancel: ()=>null\n        };\n    }, [\n        observedAPI,\n        name,\n        timeout\n    ]);\n}\n"],"names":["useFocusObserved","name","options","timeout","tabster","useTabster","observedAPI","getObservedElement","React","useCallback","requestFocus","result","Promise","resolve","cancel"],"mappings":";;;;+BAOoBA;;aAAAA;;;6DAPG;yBACY;4BACR;AAKhB,SAASA,iBAAiBC,IAAI,EAAEC,UAAU,CAAC,CAAC,EAAE;IACrD,MAAM,EAAEC,SAAS,KAAI,EAAG,GAAGD;IAC3B,MAAME,UAAUC,IAAAA,sBAAU;IAC1B,MAAMC,cAAcF,UAAUG,IAAAA,2BAAkB,EAACH,WAAW,IAAI;IAChE,OAAOI,OAAMC,WAAW,CAAC,IAAI;QACzB,IAAIH,aAAa;YACb,OAAOA,YAAYI,YAAY,CAACT,MAAME;QAC1C,CAAC;QACD,OAAO;YACHQ,QAAQC,QAAQC,OAAO,CAAC,KAAK;YAC7BC,QAAQ,IAAI,IAAI;QACpB;IACJ,GAAG;QACCR;QACAL;QACAE;KACH;AACL"}

package/lib-commonjs/hooks/useFocusVisible.js

@@ -11,10 +11,10 @@ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _reactSharedContexts = require("@fluentui/react-shared-contexts");
 const _focusVisiblePolyfill = require("../focus/focusVisiblePolyfill");
 function useFocusVisible(options = {}) {
-    const contentValue = (0, _reactSharedContexts.useFluent_unstable)();
+    const contextValue = (0, _reactSharedContexts.useFluent_unstable)();
     const scopeRef = _react.useRef(null);
     var _options_targetDocument;
-    const targetDocument = (_options_targetDocument = options.targetDocument) !== null && _options_targetDocument !== void 0 ? _options_targetDocument : contentValue.targetDocument;
+    const targetDocument = (_options_targetDocument = options.targetDocument) !== null && _options_targetDocument !== void 0 ? _options_targetDocument : contextValue.targetDocument;
     _react.useEffect(()=>{
         if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && scopeRef.current) {
             return (0, _focusVisiblePolyfill.applyFocusVisiblePolyfill)(scopeRef.current, targetDocument.defaultView);

package/lib-commonjs/hooks/useFocusVisible.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useFocusVisible.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';\nexport function useFocusVisible(options = {}) {\n    const contentValue = useFluent();\n    const scopeRef = React.useRef(null);\n    var _options_targetDocument;\n    const targetDocument = (_options_targetDocument = options.targetDocument) !== null && _options_targetDocument !== void 0 ? _options_targetDocument : contentValue.targetDocument;\n    React.useEffect(()=>{\n        if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && scopeRef.current) {\n            return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);\n        }\n    }, [\n        scopeRef,\n        targetDocument\n    ]);\n    return scopeRef;\n}\n"],"names":["useFocusVisible","options","contentValue","useFluent","scopeRef","React","useRef","_options_targetDocument","targetDocument","useEffect","defaultView","current","applyFocusVisiblePolyfill"],"mappings":";;;;+BAGgBA;;aAAAA;;;6DAHO;qCACyB;sCACN;AACnC,SAASA,gBAAgBC,UAAU,CAAC,CAAC,EAAE;IAC1C,MAAMC,eAAeC,IAAAA,uCAAS;IAC9B,MAAMC,WAAWC,OAAMC,MAAM,CAAC,IAAI;IAClC,IAAIC;IACJ,MAAMC,iBAAiB,AAACD,CAAAA,0BAA0BN,QAAQO,cAAc,AAAD,MAAO,IAAI,IAAID,4BAA4B,KAAK,IAAIA,0BAA0BL,aAAaM,cAAc;IAChLH,OAAMI,SAAS,CAAC,IAAI;QAChB,IAAI,AAACD,CAAAA,mBAAmB,IAAI,IAAIA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeE,WAAW,AAAD,KAAMN,SAASO,OAAO,EAAE;YAClH,OAAOC,IAAAA,+CAAyB,EAACR,SAASO,OAAO,EAAEH,eAAeE,WAAW;QACjF,CAAC;IACL,GAAG;QACCN;QACAI;KACH;IACD,OAAOJ;AACX"}
+{"version":3,"sources":["useFocusVisible.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';\nexport function useFocusVisible(options = {}) {\n    const contextValue = useFluent();\n    const scopeRef = React.useRef(null);\n    var _options_targetDocument;\n    const targetDocument = (_options_targetDocument = options.targetDocument) !== null && _options_targetDocument !== void 0 ? _options_targetDocument : contextValue.targetDocument;\n    React.useEffect(()=>{\n        if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && scopeRef.current) {\n            return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);\n        }\n    }, [\n        scopeRef,\n        targetDocument\n    ]);\n    return scopeRef;\n}\n"],"names":["useFocusVisible","options","contextValue","useFluent","scopeRef","React","useRef","_options_targetDocument","targetDocument","useEffect","defaultView","current","applyFocusVisiblePolyfill"],"mappings":";;;;+BAGgBA;;aAAAA;;;6DAHO;qCACyB;sCACN;AACnC,SAASA,gBAAgBC,UAAU,CAAC,CAAC,EAAE;IAC1C,MAAMC,eAAeC,IAAAA,uCAAS;IAC9B,MAAMC,WAAWC,OAAMC,MAAM,CAAC,IAAI;IAClC,IAAIC;IACJ,MAAMC,iBAAiB,AAACD,CAAAA,0BAA0BN,QAAQO,cAAc,AAAD,MAAO,IAAI,IAAID,4BAA4B,KAAK,IAAIA,0BAA0BL,aAAaM,cAAc;IAChLH,OAAMI,SAAS,CAAC,IAAI;QAChB,IAAI,AAACD,CAAAA,mBAAmB,IAAI,IAAIA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeE,WAAW,AAAD,KAAMN,SAASO,OAAO,EAAE;YAClH,OAAOC,IAAAA,+CAAyB,EAACR,SAASO,OAAO,EAAEH,eAAeE,WAAW;QACjF,CAAC;IACL,GAAG;QACCN;QACAI;KACH;IACD,OAAOJ;AACX"}

package/lib-commonjs/hooks/useObservedElement.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useObservedElement", {
+    enumerable: true,
+    get: ()=>useObservedElement
+});
+const _useTabster = require("./useTabster");
+const _tabster = require("tabster");
+const _useTabsterAttributes = require("./useTabsterAttributes");
+function useObservedElement(name) {
+    const tabster = (0, _useTabster.useTabster)();
+    if (tabster) {
+        (0, _tabster.getObservedElement)(tabster);
+    }
+    return (0, _useTabsterAttributes.useTabsterAttributes)({
+        observed: {
+            names: Array.isArray(name) ? name : [
+                name
+            ]
+        }
+    });
+}

package/lib-commonjs/hooks/useObservedElement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useObservedElement.js"],"sourcesContent":["import { useTabster } from './useTabster';\nimport { getObservedElement } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nexport function useObservedElement(name) {\n    const tabster = useTabster();\n    if (tabster) {\n        getObservedElement(tabster);\n    }\n    return useTabsterAttributes({\n        observed: {\n            names: Array.isArray(name) ? name : [\n                name\n            ]\n        }\n    });\n}\n"],"names":["useObservedElement","name","tabster","useTabster","getObservedElement","useTabsterAttributes","observed","names","Array","isArray"],"mappings":";;;;+BAGgBA;;aAAAA;;4BAHW;yBACQ;sCACE;AAC9B,SAASA,mBAAmBC,IAAI,EAAE;IACrC,MAAMC,UAAUC,IAAAA,sBAAU;IAC1B,IAAID,SAAS;QACTE,IAAAA,2BAAkB,EAACF;IACvB,CAAC;IACD,OAAOG,IAAAA,0CAAoB,EAAC;QACxBC,UAAU;YACNC,OAAOC,MAAMC,OAAO,CAACR,QAAQA,OAAO;gBAChCA;aACH;QACL;IACJ;AACJ"}

package/lib-commonjs/index.js

@@ -17,6 +17,8 @@ _export(exports, {
     useKeyboardNavAttribute: ()=>_index.useKeyboardNavAttribute,
     useModalAttributes: ()=>_index.useModalAttributes,
     useTabsterAttributes: ()=>_index.useTabsterAttributes,
+    useObservedElement: ()=>_index.useObservedElement,
+    useFocusObserved: ()=>_index.useFocusObserved,
     createCustomFocusIndicatorStyle: ()=>_index1.createCustomFocusIndicatorStyle,
     createFocusOutlineStyle: ()=>_index1.createFocusOutlineStyle,
     applyFocusVisiblePolyfill: ()=>_index1.applyFocusVisiblePolyfill

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useFocusVisible, useFocusWithin, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes } from './hooks/index';\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\nexport { applyFocusVisiblePolyfill } from './focus/index';\n"],"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useModalAttributes","useTabsterAttributes","createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill"],"mappings":";;;;;;;;;;;IAASA,uBAAuB,MAAvBA,8BAAuB;IAAEC,iBAAiB,MAAjBA,wBAAiB;IAAEC,eAAe,MAAfA,sBAAe;IAAEC,eAAe,MAAfA,sBAAe;IAAEC,cAAc,MAAdA,qBAAc;IAAEC,uBAAuB,MAAvBA,8BAAuB;IAAEC,kBAAkB,MAAlBA,yBAAkB;IAAEC,oBAAoB,MAApBA,2BAAoB;IAC/JC,+BAA+B,MAA/BA,uCAA+B;IAAEC,uBAAuB,MAAvBA,+BAAuB;IACxDC,yBAAyB,MAAzBA,iCAAyB;;uBAF8I;wBACvG"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useFocusVisible, useFocusWithin, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes, useObservedElement, useFocusObserved } from './hooks/index';\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\nexport { applyFocusVisiblePolyfill } from './focus/index';\n"],"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useModalAttributes","useTabsterAttributes","useObservedElement","useFocusObserved","createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill"],"mappings":";;;;;;;;;;;IAASA,uBAAuB,MAAvBA,8BAAuB;IAAEC,iBAAiB,MAAjBA,wBAAiB;IAAEC,eAAe,MAAfA,sBAAe;IAAEC,eAAe,MAAfA,sBAAe;IAAEC,cAAc,MAAdA,qBAAc;IAAEC,uBAAuB,MAAvBA,8BAAuB;IAAEC,kBAAkB,MAAlBA,yBAAkB;IAAEC,oBAAoB,MAApBA,2BAAoB;IAAEC,kBAAkB,MAAlBA,yBAAkB;IAAEC,gBAAgB,MAAhBA,uBAAgB;IACrMC,+BAA+B,MAA/BA,uCAA+B;IAAEC,uBAAuB,MAAvBA,+BAAuB;IACxDC,yBAAyB,MAAzBA,iCAAyB;;uBAFoL;wBAC7I"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabster",
-  "version": "0.0.0-nightly-20230627-0414.1",
+  "version": "0.0.0-nightly-20230703-0415.1",
   "description": "Utilities for focus management and facade for tabster",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -31,9 +31,9 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20230627-0414.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20230627-0414.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20230627-0414.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20230703-0415.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20230703-0415.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20230703-0415.1",
     "@griffel/react": "^1.5.7",
     "@swc/helpers": "^0.4.14",
     "keyborg": "^2.0.0",