@fluentui/react-tabster 9.24.5 → 9.24.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tabster
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 24 Apr 2025 09:56:28 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.24.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.24.6)
|
|
8
|
+
|
|
9
|
+
Thu, 24 Apr 2025 09:56:28 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.24.5..@fluentui/react-tabster_v9.24.6)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: use useLayoutEffect() for Tabster creation ([PR #34315](https://github.com/microsoft/fluentui/pull/34315) by olfedias@microsoft.com)
|
|
15
|
+
|
|
7
16
|
## [9.24.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.24.5)
|
|
8
17
|
|
|
9
|
-
Wed, 16 Apr 2025 19:
|
|
18
|
+
Wed, 16 Apr 2025 19:42:18 GMT
|
|
10
19
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.24.4..@fluentui/react-tabster_v9.24.5)
|
|
11
20
|
|
|
12
21
|
### Patches
|
package/lib/hooks/useTabster.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { createTabster, disposeTabster } from 'tabster';
|
|
3
3
|
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
4
|
-
import { getParent, usePrevious } from '@fluentui/react-utilities';
|
|
4
|
+
import { getParent, useIsomorphicLayoutEffect, usePrevious } from '@fluentui/react-utilities';
|
|
5
5
|
const DEFAULT_FACTORY = (tabster)=>{
|
|
6
6
|
return tabster;
|
|
7
7
|
};
|
|
@@ -29,7 +29,7 @@ const DEFAULT_FACTORY = (tabster)=>{
|
|
|
29
29
|
export function useTabster(factory = DEFAULT_FACTORY) {
|
|
30
30
|
const { targetDocument } = useFluent();
|
|
31
31
|
const factoryResultRef = React.useRef(null);
|
|
32
|
-
|
|
32
|
+
useIsomorphicLayoutEffect(()=>{
|
|
33
33
|
const tabster = createTabsterWithConfig(targetDocument);
|
|
34
34
|
if (tabster) {
|
|
35
35
|
factoryResultRef.current = factory(tabster);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useTabster.ts"],"sourcesContent":["import * as React from 'react';\nimport { createTabster, disposeTabster, Types as TabsterTypes } from 'tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { getParent, usePrevious } from '@fluentui/react-utilities';\n\ninterface WindowWithTabsterShadowDOMAPI extends Window {\n __tabsterShadowDOMAPI?: TabsterTypes.DOMAPI;\n}\n\ntype UseTabsterFactory<FactoryResult> = (tabster: TabsterTypes.TabsterCore) => FactoryResult;\n\nconst DEFAULT_FACTORY: UseTabsterFactory<TabsterTypes.TabsterCore> = tabster => {\n return tabster;\n};\n\n/**\n * Creates a tabster instance with the provided configuration\n *\n * @internal\n * @param targetDocument\n */\nexport function createTabsterWithConfig(targetDocument: Document | undefined): TabsterTypes.TabsterCore | undefined {\n const defaultView = targetDocument?.defaultView || undefined;\n const shadowDOMAPI = (defaultView as WindowWithTabsterShadowDOMAPI | undefined)?.__tabsterShadowDOMAPI;\n\n if (defaultView) {\n return createTabster(defaultView, {\n autoRoot: {},\n controlTab: false,\n getParent,\n checkUncontrolledTrappingFocus: element =>\n !!element.firstElementChild?.hasAttribute('data-is-focus-trap-zone-bumper'),\n DOMAPI: shadowDOMAPI,\n });\n }\n}\n\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster a ref to core instance or a factory result\n */\nexport function useTabster(): React.RefObject<TabsterTypes.TabsterCore | null>;\nexport function useTabster<FactoryResult>(\n factory: UseTabsterFactory<FactoryResult>,\n): React.RefObject<FactoryResult | null>;\n\nexport function useTabster<FactoryResult>(factory = DEFAULT_FACTORY) {\n const { targetDocument } = useFluent();\n const factoryResultRef = React.useRef<FactoryResult | null>(null);\n\n
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useTabster.ts"],"sourcesContent":["import * as React from 'react';\nimport { createTabster, disposeTabster, Types as TabsterTypes } from 'tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { getParent, useIsomorphicLayoutEffect, usePrevious } from '@fluentui/react-utilities';\n\ninterface WindowWithTabsterShadowDOMAPI extends Window {\n __tabsterShadowDOMAPI?: TabsterTypes.DOMAPI;\n}\n\ntype UseTabsterFactory<FactoryResult> = (tabster: TabsterTypes.TabsterCore) => FactoryResult;\n\nconst DEFAULT_FACTORY: UseTabsterFactory<TabsterTypes.TabsterCore> = tabster => {\n return tabster;\n};\n\n/**\n * Creates a tabster instance with the provided configuration\n *\n * @internal\n * @param targetDocument\n */\nexport function createTabsterWithConfig(targetDocument: Document | undefined): TabsterTypes.TabsterCore | undefined {\n const defaultView = targetDocument?.defaultView || undefined;\n const shadowDOMAPI = (defaultView as WindowWithTabsterShadowDOMAPI | undefined)?.__tabsterShadowDOMAPI;\n\n if (defaultView) {\n return createTabster(defaultView, {\n autoRoot: {},\n controlTab: false,\n getParent,\n checkUncontrolledTrappingFocus: element =>\n !!element.firstElementChild?.hasAttribute('data-is-focus-trap-zone-bumper'),\n DOMAPI: shadowDOMAPI,\n });\n }\n}\n\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster a ref to core instance or a factory result\n */\nexport function useTabster(): React.RefObject<TabsterTypes.TabsterCore | null>;\nexport function useTabster<FactoryResult>(\n factory: UseTabsterFactory<FactoryResult>,\n): React.RefObject<FactoryResult | null>;\n\nexport function useTabster<FactoryResult>(factory = DEFAULT_FACTORY) {\n const { targetDocument } = useFluent();\n const factoryResultRef = React.useRef<FactoryResult | null>(null);\n\n useIsomorphicLayoutEffect(() => {\n const tabster = createTabsterWithConfig(targetDocument);\n\n if (tabster) {\n factoryResultRef.current = factory(tabster) as FactoryResult;\n\n return () => {\n disposeTabster(tabster);\n factoryResultRef.current = null;\n };\n }\n }, [targetDocument, factory]);\n\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line\n const previousFactory = usePrevious(factory);\n\n if (previousFactory !== null && previousFactory !== factory) {\n throw new Error(\n [\n '@fluentui/react-tabster: ',\n 'The factory function passed to useTabster has changed. This should not ever happen.',\n ].join('\\n'),\n );\n }\n }\n\n return factoryResultRef;\n}\n"],"names":["React","createTabster","disposeTabster","useFluent_unstable","useFluent","getParent","useIsomorphicLayoutEffect","usePrevious","DEFAULT_FACTORY","tabster","createTabsterWithConfig","targetDocument","defaultView","undefined","shadowDOMAPI","__tabsterShadowDOMAPI","autoRoot","controlTab","checkUncontrolledTrappingFocus","element","firstElementChild","hasAttribute","DOMAPI","useTabster","factory","factoryResultRef","useRef","current","process","env","NODE_ENV","previousFactory","Error","join"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,cAAc,QAA+B,UAAU;AAC/E,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,SAAS,EAAEC,yBAAyB,EAAEC,WAAW,QAAQ,4BAA4B;AAQ9F,MAAMC,kBAA+DC,CAAAA;IACnE,OAAOA;AACT;AAEA;;;;;CAKC,GACD,OAAO,SAASC,wBAAwBC,cAAoC;IAC1E,MAAMC,cAAcD,CAAAA,2BAAAA,qCAAAA,eAAgBC,WAAW,KAAIC;IACnD,MAAMC,eAAgBF,wBAAAA,kCAAD,AAACA,YAA2DG,qBAAqB;IAEtG,IAAIH,aAAa;QACf,OAAOX,cAAcW,aAAa;YAChCI,UAAU,CAAC;YACXC,YAAY;YACZZ;YACAa,gCAAgCC,CAAAA;oBAC5BA;uBAAF,CAAC,GAACA,6BAAAA,QAAQC,iBAAiB,cAAzBD,iDAAAA,2BAA2BE,YAAY,CAAC;;YAC5CC,QAAQR;QACV;IACF;AACF;AAcA,OAAO,SAASS,WAA0BC,UAAUhB,eAAe;IACjE,MAAM,EAAEG,cAAc,EAAE,GAAGP;IAC3B,MAAMqB,mBAAmBzB,MAAM0B,MAAM,CAAuB;IAE5DpB,0BAA0B;QACxB,MAAMG,UAAUC,wBAAwBC;QAExC,IAAIF,SAAS;YACXgB,iBAAiBE,OAAO,GAAGH,QAAQf;YAEnC,OAAO;gBACLP,eAAeO;gBACfgB,iBAAiBE,OAAO,GAAG;YAC7B;QACF;IACF,GAAG;QAAChB;QAAgBa;KAAQ;IAE5B,IAAII,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,2BAA2B;QAC3B,MAAMC,kBAAkBxB,YAAYiB;QAEpC,IAAIO,oBAAoB,QAAQA,oBAAoBP,SAAS;YAC3D,MAAM,IAAIQ,MACR;gBACE;gBACA;aACD,CAACC,IAAI,CAAC;QAEX;IACF;IAEA,OAAOR;AACT"}
|
|
@@ -43,7 +43,7 @@ function createTabsterWithConfig(targetDocument) {
|
|
|
43
43
|
function useTabster(factory = DEFAULT_FACTORY) {
|
|
44
44
|
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
45
45
|
const factoryResultRef = _react.useRef(null);
|
|
46
|
-
|
|
46
|
+
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
|
|
47
47
|
const tabster = createTabsterWithConfig(targetDocument);
|
|
48
48
|
if (tabster) {
|
|
49
49
|
factoryResultRef.current = factory(tabster);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useTabster.ts"],"sourcesContent":["import * as React from 'react';\nimport { createTabster, disposeTabster, Types as TabsterTypes } from 'tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { getParent, usePrevious } from '@fluentui/react-utilities';\n\ninterface WindowWithTabsterShadowDOMAPI extends Window {\n __tabsterShadowDOMAPI?: TabsterTypes.DOMAPI;\n}\n\ntype UseTabsterFactory<FactoryResult> = (tabster: TabsterTypes.TabsterCore) => FactoryResult;\n\nconst DEFAULT_FACTORY: UseTabsterFactory<TabsterTypes.TabsterCore> = tabster => {\n return tabster;\n};\n\n/**\n * Creates a tabster instance with the provided configuration\n *\n * @internal\n * @param targetDocument\n */\nexport function createTabsterWithConfig(targetDocument: Document | undefined): TabsterTypes.TabsterCore | undefined {\n const defaultView = targetDocument?.defaultView || undefined;\n const shadowDOMAPI = (defaultView as WindowWithTabsterShadowDOMAPI | undefined)?.__tabsterShadowDOMAPI;\n\n if (defaultView) {\n return createTabster(defaultView, {\n autoRoot: {},\n controlTab: false,\n getParent,\n checkUncontrolledTrappingFocus: element =>\n !!element.firstElementChild?.hasAttribute('data-is-focus-trap-zone-bumper'),\n DOMAPI: shadowDOMAPI,\n });\n }\n}\n\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster a ref to core instance or a factory result\n */\nexport function useTabster(): React.RefObject<TabsterTypes.TabsterCore | null>;\nexport function useTabster<FactoryResult>(\n factory: UseTabsterFactory<FactoryResult>,\n): React.RefObject<FactoryResult | null>;\n\nexport function useTabster<FactoryResult>(factory = DEFAULT_FACTORY) {\n const { targetDocument } = useFluent();\n const factoryResultRef = React.useRef<FactoryResult | null>(null);\n\n
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useTabster.ts"],"sourcesContent":["import * as React from 'react';\nimport { createTabster, disposeTabster, Types as TabsterTypes } from 'tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { getParent, useIsomorphicLayoutEffect, usePrevious } from '@fluentui/react-utilities';\n\ninterface WindowWithTabsterShadowDOMAPI extends Window {\n __tabsterShadowDOMAPI?: TabsterTypes.DOMAPI;\n}\n\ntype UseTabsterFactory<FactoryResult> = (tabster: TabsterTypes.TabsterCore) => FactoryResult;\n\nconst DEFAULT_FACTORY: UseTabsterFactory<TabsterTypes.TabsterCore> = tabster => {\n return tabster;\n};\n\n/**\n * Creates a tabster instance with the provided configuration\n *\n * @internal\n * @param targetDocument\n */\nexport function createTabsterWithConfig(targetDocument: Document | undefined): TabsterTypes.TabsterCore | undefined {\n const defaultView = targetDocument?.defaultView || undefined;\n const shadowDOMAPI = (defaultView as WindowWithTabsterShadowDOMAPI | undefined)?.__tabsterShadowDOMAPI;\n\n if (defaultView) {\n return createTabster(defaultView, {\n autoRoot: {},\n controlTab: false,\n getParent,\n checkUncontrolledTrappingFocus: element =>\n !!element.firstElementChild?.hasAttribute('data-is-focus-trap-zone-bumper'),\n DOMAPI: shadowDOMAPI,\n });\n }\n}\n\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster a ref to core instance or a factory result\n */\nexport function useTabster(): React.RefObject<TabsterTypes.TabsterCore | null>;\nexport function useTabster<FactoryResult>(\n factory: UseTabsterFactory<FactoryResult>,\n): React.RefObject<FactoryResult | null>;\n\nexport function useTabster<FactoryResult>(factory = DEFAULT_FACTORY) {\n const { targetDocument } = useFluent();\n const factoryResultRef = React.useRef<FactoryResult | null>(null);\n\n useIsomorphicLayoutEffect(() => {\n const tabster = createTabsterWithConfig(targetDocument);\n\n if (tabster) {\n factoryResultRef.current = factory(tabster) as FactoryResult;\n\n return () => {\n disposeTabster(tabster);\n factoryResultRef.current = null;\n };\n }\n }, [targetDocument, factory]);\n\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line\n const previousFactory = usePrevious(factory);\n\n if (previousFactory !== null && previousFactory !== factory) {\n throw new Error(\n [\n '@fluentui/react-tabster: ',\n 'The factory function passed to useTabster has changed. This should not ever happen.',\n ].join('\\n'),\n );\n }\n }\n\n return factoryResultRef;\n}\n"],"names":["createTabsterWithConfig","useTabster","DEFAULT_FACTORY","tabster","targetDocument","defaultView","undefined","shadowDOMAPI","__tabsterShadowDOMAPI","createTabster","autoRoot","controlTab","getParent","checkUncontrolledTrappingFocus","element","firstElementChild","hasAttribute","DOMAPI","factory","useFluent","factoryResultRef","React","useRef","useIsomorphicLayoutEffect","current","disposeTabster","process","env","NODE_ENV","previousFactory","usePrevious","Error","join"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAqBgBA,uBAAuB;eAAvBA;;IA4BAC,UAAU;eAAVA;;;;iEAjDO;yBAC8C;qCACrB;gCACkB;AAQlE,MAAMC,kBAA+DC,CAAAA;IACnE,OAAOA;AACT;AAQO,SAASH,wBAAwBI,cAAoC;IAC1E,MAAMC,cAAcD,CAAAA,2BAAAA,qCAAAA,eAAgBC,WAAW,KAAIC;IACnD,MAAMC,eAAgBF,wBAAAA,kCAAD,AAACA,YAA2DG,qBAAqB;IAEtG,IAAIH,aAAa;QACf,OAAOI,IAAAA,sBAAa,EAACJ,aAAa;YAChCK,UAAU,CAAC;YACXC,YAAY;YACZC,WAAAA,yBAAS;YACTC,gCAAgCC,CAAAA;oBAC5BA;uBAAF,CAAC,GAACA,6BAAAA,QAAQC,iBAAiB,cAAzBD,iDAAAA,2BAA2BE,YAAY,CAAC;;YAC5CC,QAAQV;QACV;IACF;AACF;AAcO,SAASN,WAA0BiB,UAAUhB,eAAe;IACjE,MAAM,EAAEE,cAAc,EAAE,GAAGe,IAAAA,uCAAS;IACpC,MAAMC,mBAAmBC,OAAMC,MAAM,CAAuB;IAE5DC,IAAAA,yCAAyB,EAAC;QACxB,MAAMpB,UAAUH,wBAAwBI;QAExC,IAAID,SAAS;YACXiB,iBAAiBI,OAAO,GAAGN,QAAQf;YAEnC,OAAO;gBACLsB,IAAAA,uBAAc,EAACtB;gBACfiB,iBAAiBI,OAAO,GAAG;YAC7B;QACF;IACF,GAAG;QAACpB;QAAgBc;KAAQ;IAE5B,IAAIQ,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,2BAA2B;QAC3B,MAAMC,kBAAkBC,IAAAA,2BAAW,EAACZ;QAEpC,IAAIW,oBAAoB,QAAQA,oBAAoBX,SAAS;YAC3D,MAAM,IAAIa,MACR;gBACE;gBACA;aACD,CAACC,IAAI,CAAC;QAEX;IACF;IAEA,OAAOZ;AACT"}
|