@fluentui/react-tabster 9.17.3 → 9.18.0
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 +25 -2
- package/dist/index.d.ts +25 -17
- package/lib/hooks/useTabster.js +5 -2
- package/lib/hooks/useTabster.js.map +1 -1
- package/lib/index.js +3 -0
- package/lib/index.js.map +1 -1
- package/lib-commonjs/hooks/useTabster.js +5 -2
- package/lib-commonjs/hooks/useTabster.js.map +1 -1
- package/lib-commonjs/index.js +10 -0
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
@@ -1,12 +1,35 @@
|
|
1
1
|
# Change Log - @fluentui/react-tabster
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Tue, 30 Jan 2024 23:12:34 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.18.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.18.0)
|
8
|
+
|
9
|
+
Tue, 30 Jan 2024 23:12:34 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.17.4..@fluentui/react-tabster_v9.18.0)
|
11
|
+
|
12
|
+
### Minor changes
|
13
|
+
|
14
|
+
- Optional ShadowDOM support. ([PR #30429](https://github.com/microsoft/fluentui/pull/30429) by marata@microsoft.com)
|
15
|
+
- Bump @fluentui/react-utilities to v9.18.0 ([PR #30429](https://github.com/microsoft/fluentui/pull/30429) by beachball)
|
16
|
+
|
17
|
+
### Patches
|
18
|
+
|
19
|
+
- Tabster 5.3.0 and Keyborg 2.4.1. ([PR #30387](https://github.com/microsoft/fluentui/pull/30387) by marata@microsoft.com)
|
20
|
+
|
21
|
+
## [9.17.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.17.4)
|
22
|
+
|
23
|
+
Tue, 23 Jan 2024 15:11:00 GMT
|
24
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.17.3..@fluentui/react-tabster_v9.17.4)
|
25
|
+
|
26
|
+
### Patches
|
27
|
+
|
28
|
+
- Bump @fluentui/react-utilities to v9.17.0 ([PR #30359](https://github.com/microsoft/fluentui/pull/30359) by beachball)
|
29
|
+
|
7
30
|
## [9.17.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.17.3)
|
8
31
|
|
9
|
-
Thu, 18 Jan 2024 14:
|
32
|
+
Thu, 18 Jan 2024 14:25:03 GMT
|
10
33
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.17.2..@fluentui/react-tabster_v9.17.3)
|
11
34
|
|
12
35
|
### Patches
|
package/dist/index.d.ts
CHANGED
@@ -1,10 +1,12 @@
|
|
1
|
+
import { dispatchGroupperMoveFocusEvent } from 'tabster';
|
2
|
+
import { dispatchMoverMoveFocusEvent } from 'tabster';
|
1
3
|
import type { GriffelStyle } from '@griffel/react';
|
2
4
|
import { KEYBORG_FOCUSIN } from 'keyborg';
|
3
5
|
import { KeyborgFocusInEvent } from 'keyborg';
|
4
6
|
import { makeResetStyles } from '@griffel/react';
|
5
7
|
import * as React_2 from 'react';
|
6
8
|
import type { RefObject } from 'react';
|
7
|
-
import { Types } from 'tabster';
|
9
|
+
import { Types as TabsterTypes } from 'tabster';
|
8
10
|
|
9
11
|
/**
|
10
12
|
* @internal
|
@@ -82,6 +84,10 @@ export declare interface CreateFocusOutlineStyleOptions extends Omit<CreateCusto
|
|
82
84
|
enableOutline?: boolean;
|
83
85
|
}
|
84
86
|
|
87
|
+
export { dispatchGroupperMoveFocusEvent }
|
88
|
+
|
89
|
+
export { dispatchMoverMoveFocusEvent }
|
90
|
+
|
85
91
|
export declare type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;
|
86
92
|
|
87
93
|
export declare type FocusOutlineStyleOptions = {
|
@@ -101,13 +107,15 @@ export { KEYBORG_FOCUSIN }
|
|
101
107
|
|
102
108
|
export { KeyborgFocusInEvent }
|
103
109
|
|
104
|
-
export declare type TabsterDOMAttribute =
|
110
|
+
export declare type TabsterDOMAttribute = TabsterTypes.TabsterDOMAttribute;
|
111
|
+
|
112
|
+
export { TabsterTypes }
|
105
113
|
|
106
114
|
/**
|
107
115
|
* A hook that returns the necessary tabster attributes to support arrow key navigation
|
108
116
|
* @param options - Options to configure keyboard navigation
|
109
117
|
*/
|
110
|
-
export declare const useArrowNavigationGroup: (options?: UseArrowNavigationGroupOptions) =>
|
118
|
+
export declare const useArrowNavigationGroup: (options?: UseArrowNavigationGroupOptions) => TabsterTypes.TabsterDOMAttribute;
|
111
119
|
|
112
120
|
export declare interface UseArrowNavigationGroupOptions {
|
113
121
|
/**
|
@@ -132,7 +140,7 @@ export declare interface UseArrowNavigationGroupOptions {
|
|
132
140
|
/**
|
133
141
|
* Tabster should ignore default handling of keydown events
|
134
142
|
*/
|
135
|
-
ignoreDefaultKeydown?:
|
143
|
+
ignoreDefaultKeydown?: TabsterTypes.FocusableProps['ignoreKeydown'];
|
136
144
|
/**
|
137
145
|
* The default focusable item in the group will be an element with Focusable.isDefault property.
|
138
146
|
* Note that there is no way in \@fluentui/react-tabster to set default focusable element,
|
@@ -145,7 +153,7 @@ export declare interface UseArrowNavigationGroupOptions {
|
|
145
153
|
* A hook that returns the necessary tabster attributes to support groupping.
|
146
154
|
* @param options - Options to configure keyboard navigation
|
147
155
|
*/
|
148
|
-
export declare const useFocusableGroup: (options?: UseFocusableGroupOptions) =>
|
156
|
+
export declare const useFocusableGroup: (options?: UseFocusableGroupOptions) => TabsterTypes.TabsterDOMAttribute;
|
149
157
|
|
150
158
|
export declare interface UseFocusableGroupOptions {
|
151
159
|
/**
|
@@ -155,7 +163,7 @@ export declare interface UseFocusableGroupOptions {
|
|
155
163
|
/**
|
156
164
|
* Tabster can ignore default handling of keydown events
|
157
165
|
*/
|
158
|
-
ignoreDefaultKeydown?:
|
166
|
+
ignoreDefaultKeydown?: TabsterTypes.FocusableProps['ignoreKeydown'];
|
159
167
|
}
|
160
168
|
|
161
169
|
/**
|
@@ -165,8 +173,8 @@ export declare const useFocusFinders: () => {
|
|
165
173
|
findAllFocusable: (container: HTMLElement, acceptCondition?: ((el: HTMLElement) => boolean) | undefined) => HTMLElement[];
|
166
174
|
findFirstFocusable: (container: HTMLElement) => HTMLElement | null | undefined;
|
167
175
|
findLastFocusable: (container: HTMLElement) => HTMLElement | null | undefined;
|
168
|
-
findNextFocusable: (currentElement: HTMLElement, options?: Pick<Partial<
|
169
|
-
findPrevFocusable: (currentElement: HTMLElement, options?: Pick<Partial<
|
176
|
+
findNextFocusable: (currentElement: HTMLElement, options?: Pick<Partial<TabsterTypes.FindNextProps>, 'container'>) => HTMLElement | null | undefined;
|
177
|
+
findPrevFocusable: (currentElement: HTMLElement, options?: Pick<Partial<TabsterTypes.FindNextProps>, 'container'>) => HTMLElement | null | undefined;
|
170
178
|
};
|
171
179
|
|
172
180
|
/**
|
@@ -174,7 +182,7 @@ export declare const useFocusFinders: () => {
|
|
174
182
|
* @param name - The observed element to focus
|
175
183
|
* @returns Function that will focus the
|
176
184
|
*/
|
177
|
-
export declare function useFocusObserved(name: string, options?: UseFocusObservedOptions): () =>
|
185
|
+
export declare function useFocusObserved(name: string, options?: UseFocusObservedOptions): () => TabsterTypes.ObservedElementAsyncRequest<boolean>;
|
178
186
|
|
179
187
|
declare interface UseFocusObservedOptions {
|
180
188
|
/**
|
@@ -211,7 +219,7 @@ export declare function useKeyboardNavAttribute<E extends HTMLElement>(): RefObj
|
|
211
219
|
* @param attributes - collection of tabster attributes from other react-tabster hooks
|
212
220
|
* @returns single merged tabster attribute
|
213
221
|
*/
|
214
|
-
export declare const useMergedTabsterAttributes_unstable: (...attributes:
|
222
|
+
export declare const useMergedTabsterAttributes_unstable: (...attributes: TabsterTypes.TabsterDOMAttribute[]) => TabsterTypes.TabsterDOMAttribute;
|
215
223
|
|
216
224
|
/**
|
217
225
|
* Applies modal dialog behaviour through DOM attributes
|
@@ -221,8 +229,8 @@ export declare const useMergedTabsterAttributes_unstable: (...attributes: Types.
|
|
221
229
|
* @returns DOM attributes to apply to the modal element and its trigger
|
222
230
|
*/
|
223
231
|
export declare const useModalAttributes: (options?: UseModalAttributesOptions) => {
|
224
|
-
modalAttributes:
|
225
|
-
triggerAttributes:
|
232
|
+
modalAttributes: TabsterTypes.TabsterDOMAttribute;
|
233
|
+
triggerAttributes: TabsterTypes.TabsterDOMAttribute;
|
226
234
|
};
|
227
235
|
|
228
236
|
export declare interface UseModalAttributesOptions {
|
@@ -250,7 +258,7 @@ export declare interface UseModalAttributesOptions {
|
|
250
258
|
id?: string;
|
251
259
|
}
|
252
260
|
|
253
|
-
export declare function useObservedElement(name: string | string[]):
|
261
|
+
export declare function useObservedElement(name: string | string[]): TabsterTypes.TabsterDOMAttribute;
|
254
262
|
|
255
263
|
/**
|
256
264
|
* Instantiates [keyborg](https://github.com/microsoft/keyborg) and subscribes to changes
|
@@ -264,24 +272,24 @@ export declare function useOnKeyboardNavigationChange(callback: (isNavigatingWit
|
|
264
272
|
* Focus will be restored to the most recent target element when it is lost from a source
|
265
273
|
* @returns Attribute to apply to the element that might lose focus
|
266
274
|
*/
|
267
|
-
export declare function useRestoreFocusSource():
|
275
|
+
export declare function useRestoreFocusSource(): TabsterTypes.TabsterDOMAttribute;
|
268
276
|
|
269
277
|
/**
|
270
278
|
* Focus will be restored to the most recent target element when it is lost from a source
|
271
279
|
* @returns Attribute to apply to the target element where focus is restored
|
272
280
|
*/
|
273
|
-
export declare function useRestoreFocusTarget():
|
281
|
+
export declare function useRestoreFocusTarget(): TabsterTypes.TabsterDOMAttribute;
|
274
282
|
|
275
283
|
/**
|
276
284
|
* @internal
|
277
285
|
* Hook that returns tabster attributes while ensuring tabster exists
|
278
286
|
*/
|
279
|
-
export declare const useTabsterAttributes: (props:
|
287
|
+
export declare const useTabsterAttributes: (props: TabsterTypes.TabsterAttributeProps) => TabsterTypes.TabsterDOMAttribute;
|
280
288
|
|
281
289
|
/**
|
282
290
|
* Designates an area where tabster does not control focus
|
283
291
|
* @returns Attribute to apply to the target element that should be uncontrolled by tabster
|
284
292
|
*/
|
285
|
-
export declare function useUncontrolledFocus():
|
293
|
+
export declare function useUncontrolledFocus(): TabsterTypes.TabsterDOMAttribute;
|
286
294
|
|
287
295
|
export { }
|
package/lib/hooks/useTabster.js
CHANGED
@@ -11,6 +11,7 @@ import { useIsomorphicLayoutEffect, getParent } from '@fluentui/react-utilities'
|
|
11
11
|
*/ export const useTabster = ()=>{
|
12
12
|
const { targetDocument } = useFluent();
|
13
13
|
const defaultView = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) || undefined;
|
14
|
+
const shadowDOMAPI = defaultView === null || defaultView === void 0 ? void 0 : defaultView.__tabsterShadowDOMAPI;
|
14
15
|
const tabster = React.useMemo(()=>{
|
15
16
|
if (!defaultView) {
|
16
17
|
return null;
|
@@ -22,10 +23,12 @@ import { useIsomorphicLayoutEffect, getParent } from '@fluentui/react-utilities'
|
|
22
23
|
checkUncontrolledTrappingFocus: (element)=>{
|
23
24
|
var _element_firstElementChild;
|
24
25
|
return !!((_element_firstElementChild = element.firstElementChild) === null || _element_firstElementChild === void 0 ? void 0 : _element_firstElementChild.hasAttribute('data-is-focus-trap-zone-bumper'));
|
25
|
-
}
|
26
|
+
},
|
27
|
+
DOMAPI: shadowDOMAPI
|
26
28
|
});
|
27
29
|
}, [
|
28
|
-
defaultView
|
30
|
+
defaultView,
|
31
|
+
shadowDOMAPI
|
29
32
|
]);
|
30
33
|
useIsomorphicLayoutEffect(()=>{
|
31
34
|
return ()=>{
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useTabster.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { createTabster, disposeTabster, Types as TabsterTypes } from 'tabster';\nimport { useIsomorphicLayoutEffect, getParent } from '@fluentui/react-utilities';\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 core instance\n */\nexport const useTabster = (): TabsterTypes.TabsterCore | null => {\n const { targetDocument } = useFluent();\n\n const defaultView = targetDocument?.defaultView || undefined;\n const tabster = React.useMemo(() => {\n if (!defaultView) {\n return null;\n }\n\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 });\n }, [defaultView]);\n\n useIsomorphicLayoutEffect(() => {\n return () => {\n if (tabster) {\n disposeTabster(tabster);\n }\n };\n }, [tabster]);\n\n return tabster;\n};\n"],"names":["React","useFluent_unstable","useFluent","createTabster","disposeTabster","useIsomorphicLayoutEffect","getParent","useTabster","targetDocument","defaultView","undefined","tabster","useMemo","autoRoot","controlTab","checkUncontrolledTrappingFocus","element","firstElementChild","hasAttribute"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,aAAa,EAAEC,cAAc,QAA+B,UAAU;AAC/E,SAASC,yBAAyB,EAAEC,SAAS,QAAQ,4BAA4B;
|
1
|
+
{"version":3,"sources":["useTabster.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { createTabster, disposeTabster, Types as TabsterTypes } from 'tabster';\nimport { useIsomorphicLayoutEffect, getParent } from '@fluentui/react-utilities';\n\ninterface WindowWithTabsterShadowDOMAPI extends Window {\n __tabsterShadowDOMAPI?: TabsterTypes.DOMAPI;\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 core instance\n */\nexport const useTabster = (): TabsterTypes.TabsterCore | null => {\n const { targetDocument } = useFluent();\n\n const defaultView = targetDocument?.defaultView || undefined;\n\n const shadowDOMAPI = (defaultView as WindowWithTabsterShadowDOMAPI | undefined)?.__tabsterShadowDOMAPI;\n\n const tabster = React.useMemo(() => {\n if (!defaultView) {\n return null;\n }\n\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 }, [defaultView, shadowDOMAPI]);\n\n useIsomorphicLayoutEffect(() => {\n return () => {\n if (tabster) {\n disposeTabster(tabster);\n }\n };\n }, [tabster]);\n\n return tabster;\n};\n"],"names":["React","useFluent_unstable","useFluent","createTabster","disposeTabster","useIsomorphicLayoutEffect","getParent","useTabster","targetDocument","defaultView","undefined","shadowDOMAPI","__tabsterShadowDOMAPI","tabster","useMemo","autoRoot","controlTab","checkUncontrolledTrappingFocus","element","firstElementChild","hasAttribute","DOMAPI"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,aAAa,EAAEC,cAAc,QAA+B,UAAU;AAC/E,SAASC,yBAAyB,EAAEC,SAAS,QAAQ,4BAA4B;AAMjF;;;;;;CAMC,GACD,OAAO,MAAMC,aAAa;IACxB,MAAM,EAAEC,cAAc,EAAE,GAAGN;IAE3B,MAAMO,cAAcD,CAAAA,2BAAAA,qCAAAA,eAAgBC,WAAW,KAAIC;IAEnD,MAAMC,eAAgBF,wBAAAA,kCAAD,AAACA,YAA2DG,qBAAqB;IAEtG,MAAMC,UAAUb,MAAMc,OAAO,CAAC;QAC5B,IAAI,CAACL,aAAa;YAChB,OAAO;QACT;QAEA,OAAON,cAAcM,aAAa;YAChCM,UAAU,CAAC;YACXC,YAAY;YACZV;YACAW,gCAAgCC,CAAAA;oBAC5BA;uBAAF,CAAC,GAACA,6BAAAA,QAAQC,iBAAiB,cAAzBD,iDAAAA,2BAA2BE,YAAY,CAAC;;YAC5CC,QAAQV;QACV;IACF,GAAG;QAACF;QAAaE;KAAa;IAE9BN,0BAA0B;QACxB,OAAO;YACL,IAAIQ,SAAS;gBACXT,eAAeS;YACjB;QACF;IACF,GAAG;QAACA;KAAQ;IAEZ,OAAOA;AACT,EAAE"}
|
package/lib/index.js
CHANGED
@@ -1,4 +1,7 @@
|
|
1
1
|
export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useFocusVisible, useFocusWithin, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes, useObservedElement, useFocusObserved, useMergedTabsterAttributes_unstable, useRestoreFocusSource, useRestoreFocusTarget, useUncontrolledFocus, useOnKeyboardNavigationChange } from './hooks/index';
|
2
2
|
export { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';
|
3
3
|
export { applyFocusVisiblePolyfill } from './focus/index';
|
4
|
+
import { Types as TabsterTypes, dispatchGroupperMoveFocusEvent, dispatchMoverMoveFocusEvent } from 'tabster';
|
4
5
|
export { KEYBORG_FOCUSIN } from 'keyborg';
|
6
|
+
// @internal (undocumented)
|
7
|
+
export { TabsterTypes, dispatchGroupperMoveFocusEvent, dispatchMoverMoveFocusEvent };
|
package/lib/index.js.map
CHANGED
@@ -1 +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 useObservedElement,\n useFocusObserved,\n useMergedTabsterAttributes_unstable,\n useRestoreFocusSource,\n useRestoreFocusTarget,\n useUncontrolledFocus,\n useOnKeyboardNavigationChange,\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';\nimport { Types as TabsterTypes } from 'tabster';\n\nexport type TabsterDOMAttribute = TabsterTypes.TabsterDOMAttribute;\n\nexport type { KeyborgFocusInEvent } from 'keyborg';\nexport { KEYBORG_FOCUSIN } from 'keyborg';\n"],"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useModalAttributes","useTabsterAttributes","useObservedElement","useFocusObserved","useMergedTabsterAttributes_unstable","useRestoreFocusSource","useRestoreFocusTarget","useUncontrolledFocus","useOnKeyboardNavigationChange","createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill","KEYBORG_FOCUSIN"],"mappings":"AAAA,SACEA,uBAAuB,EACvBC,iBAAiB,EACjBC,eAAe,EACfC,eAAe,EACfC,cAAc,EACdC,uBAAuB,EACvBC,kBAAkB,EAClBC,oBAAoB,EACpBC,kBAAkB,EAClBC,gBAAgB,EAChBC,mCAAmC,EACnCC,qBAAqB,EACrBC,qBAAqB,EACrBC,oBAAoB,EACpBC,6BAA6B,QACxB,gBAAgB;AAOvB,SAASC,+BAA+B,EAAEC,uBAAuB,QAAQ,gBAAgB;AASzF,SAASC,yBAAyB,QAAQ,gBAAgB;
|
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 useObservedElement,\n useFocusObserved,\n useMergedTabsterAttributes_unstable,\n useRestoreFocusSource,\n useRestoreFocusTarget,\n useUncontrolledFocus,\n useOnKeyboardNavigationChange,\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';\nimport { Types as TabsterTypes, dispatchGroupperMoveFocusEvent, dispatchMoverMoveFocusEvent } from 'tabster';\n\nexport type TabsterDOMAttribute = TabsterTypes.TabsterDOMAttribute;\n\nexport type { KeyborgFocusInEvent } from 'keyborg';\nexport { KEYBORG_FOCUSIN } from 'keyborg';\n\n// @internal (undocumented)\nexport { TabsterTypes, dispatchGroupperMoveFocusEvent, dispatchMoverMoveFocusEvent };\n"],"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useModalAttributes","useTabsterAttributes","useObservedElement","useFocusObserved","useMergedTabsterAttributes_unstable","useRestoreFocusSource","useRestoreFocusTarget","useUncontrolledFocus","useOnKeyboardNavigationChange","createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill","Types","TabsterTypes","dispatchGroupperMoveFocusEvent","dispatchMoverMoveFocusEvent","KEYBORG_FOCUSIN"],"mappings":"AAAA,SACEA,uBAAuB,EACvBC,iBAAiB,EACjBC,eAAe,EACfC,eAAe,EACfC,cAAc,EACdC,uBAAuB,EACvBC,kBAAkB,EAClBC,oBAAoB,EACpBC,kBAAkB,EAClBC,gBAAgB,EAChBC,mCAAmC,EACnCC,qBAAqB,EACrBC,qBAAqB,EACrBC,oBAAoB,EACpBC,6BAA6B,QACxB,gBAAgB;AAOvB,SAASC,+BAA+B,EAAEC,uBAAuB,QAAQ,gBAAgB;AASzF,SAASC,yBAAyB,QAAQ,gBAAgB;AAC1D,SAASC,SAASC,YAAY,EAAEC,8BAA8B,EAAEC,2BAA2B,QAAQ,UAAU;AAK7G,SAASC,eAAe,QAAQ,UAAU;AAE1C,2BAA2B;AAC3B,SAASH,YAAY,EAAEC,8BAA8B,EAAEC,2BAA2B,GAAG"}
|
@@ -16,6 +16,7 @@ const _reactutilities = require("@fluentui/react-utilities");
|
|
16
16
|
const useTabster = ()=>{
|
17
17
|
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
|
18
18
|
const defaultView = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) || undefined;
|
19
|
+
const shadowDOMAPI = defaultView === null || defaultView === void 0 ? void 0 : defaultView.__tabsterShadowDOMAPI;
|
19
20
|
const tabster = _react.useMemo(()=>{
|
20
21
|
if (!defaultView) {
|
21
22
|
return null;
|
@@ -27,10 +28,12 @@ const useTabster = ()=>{
|
|
27
28
|
checkUncontrolledTrappingFocus: (element)=>{
|
28
29
|
var _element_firstElementChild;
|
29
30
|
return !!((_element_firstElementChild = element.firstElementChild) === null || _element_firstElementChild === void 0 ? void 0 : _element_firstElementChild.hasAttribute('data-is-focus-trap-zone-bumper'));
|
30
|
-
}
|
31
|
+
},
|
32
|
+
DOMAPI: shadowDOMAPI
|
31
33
|
});
|
32
34
|
}, [
|
33
|
-
defaultView
|
35
|
+
defaultView,
|
36
|
+
shadowDOMAPI
|
34
37
|
]);
|
35
38
|
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
|
36
39
|
return ()=>{
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useTabster.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { createTabster, disposeTabster } from 'tabster';\nimport { useIsomorphicLayoutEffect, getParent } from '@fluentui/react-utilities';\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 core instance\n */ export const useTabster = ()=>{\n const { targetDocument } = useFluent();\n const defaultView = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) || undefined;\n const tabster = React.useMemo(()=>{\n if (!defaultView) {\n return null;\n }\n return createTabster(defaultView, {\n autoRoot: {},\n controlTab: false,\n getParent,\n checkUncontrolledTrappingFocus: (element)=>{\n var _element_firstElementChild;\n return !!((_element_firstElementChild = element.firstElementChild) === null || _element_firstElementChild === void 0 ? void 0 : _element_firstElementChild.hasAttribute('data-is-focus-trap-zone-bumper'));\n }\n });\n }, [\n defaultView\n ]);\n useIsomorphicLayoutEffect(()=>{\n return ()=>{\n if (tabster) {\n disposeTabster(tabster);\n }\n };\n }, [\n tabster\n ]);\n return tabster;\n};\n"],"names":["useTabster","targetDocument","useFluent","defaultView","undefined","tabster","React","useMemo","createTabster","autoRoot","controlTab","getParent","checkUncontrolledTrappingFocus","element","_element_firstElementChild","firstElementChild","hasAttribute","useIsomorphicLayoutEffect","disposeTabster"],"mappings":";;;;+BAUiBA;;;eAAAA;;;;iEAVM;qCACyB;yBACF;gCACO;AAO1C,MAAMA,aAAa;IAC1B,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAMC,cAAc,AAACF,CAAAA,mBAAmB,QAAQA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeE,WAAW,AAAD,KAAMC;IACpH,MAAMC,UAAUC,OAAMC,OAAO,CAAC;QAC1B,IAAI,
|
1
|
+
{"version":3,"sources":["useTabster.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { createTabster, disposeTabster } from 'tabster';\nimport { useIsomorphicLayoutEffect, getParent } from '@fluentui/react-utilities';\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 core instance\n */ export const useTabster = ()=>{\n const { targetDocument } = useFluent();\n const defaultView = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) || undefined;\n const shadowDOMAPI = defaultView === null || defaultView === void 0 ? void 0 : defaultView.__tabsterShadowDOMAPI;\n const tabster = React.useMemo(()=>{\n if (!defaultView) {\n return null;\n }\n return createTabster(defaultView, {\n autoRoot: {},\n controlTab: false,\n getParent,\n checkUncontrolledTrappingFocus: (element)=>{\n var _element_firstElementChild;\n return !!((_element_firstElementChild = element.firstElementChild) === null || _element_firstElementChild === void 0 ? void 0 : _element_firstElementChild.hasAttribute('data-is-focus-trap-zone-bumper'));\n },\n DOMAPI: shadowDOMAPI\n });\n }, [\n defaultView,\n shadowDOMAPI\n ]);\n useIsomorphicLayoutEffect(()=>{\n return ()=>{\n if (tabster) {\n disposeTabster(tabster);\n }\n };\n }, [\n tabster\n ]);\n return tabster;\n};\n"],"names":["useTabster","targetDocument","useFluent","defaultView","undefined","shadowDOMAPI","__tabsterShadowDOMAPI","tabster","React","useMemo","createTabster","autoRoot","controlTab","getParent","checkUncontrolledTrappingFocus","element","_element_firstElementChild","firstElementChild","hasAttribute","DOMAPI","useIsomorphicLayoutEffect","disposeTabster"],"mappings":";;;;+BAUiBA;;;eAAAA;;;;iEAVM;qCACyB;yBACF;gCACO;AAO1C,MAAMA,aAAa;IAC1B,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAMC,cAAc,AAACF,CAAAA,mBAAmB,QAAQA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeE,WAAW,AAAD,KAAMC;IACpH,MAAMC,eAAeF,gBAAgB,QAAQA,gBAAgB,KAAK,IAAI,KAAK,IAAIA,YAAYG,qBAAqB;IAChH,MAAMC,UAAUC,OAAMC,OAAO,CAAC;QAC1B,IAAI,CAACN,aAAa;YACd,OAAO;QACX;QACA,OAAOO,IAAAA,sBAAa,EAACP,aAAa;YAC9BQ,UAAU,CAAC;YACXC,YAAY;YACZC,WAAAA,yBAAS;YACTC,gCAAgC,CAACC;gBAC7B,IAAIC;gBACJ,OAAO,CAAC,CAAE,CAAA,AAACA,CAAAA,6BAA6BD,QAAQE,iBAAiB,AAAD,MAAO,QAAQD,+BAA+B,KAAK,IAAI,KAAK,IAAIA,2BAA2BE,YAAY,CAAC,iCAAgC;YAC5M;YACAC,QAAQd;QACZ;IACJ,GAAG;QACCF;QACAE;KACH;IACDe,IAAAA,yCAAyB,EAAC;QACtB,OAAO;YACH,IAAIb,SAAS;gBACTc,IAAAA,uBAAc,EAACd;YACnB;QACJ;IACJ,GAAG;QACCA;KACH;IACD,OAAOA;AACX"}
|
package/lib-commonjs/index.js
CHANGED
@@ -65,8 +65,18 @@ _export(exports, {
|
|
65
65
|
},
|
66
66
|
KEYBORG_FOCUSIN: function() {
|
67
67
|
return _keyborg.KEYBORG_FOCUSIN;
|
68
|
+
},
|
69
|
+
TabsterTypes: function() {
|
70
|
+
return _tabster.Types;
|
71
|
+
},
|
72
|
+
dispatchGroupperMoveFocusEvent: function() {
|
73
|
+
return _tabster.dispatchGroupperMoveFocusEvent;
|
74
|
+
},
|
75
|
+
dispatchMoverMoveFocusEvent: function() {
|
76
|
+
return _tabster.dispatchMoverMoveFocusEvent;
|
68
77
|
}
|
69
78
|
});
|
70
79
|
const _index = require("./hooks/index");
|
71
80
|
const _index1 = require("./focus/index");
|
81
|
+
const _tabster = require("tabster");
|
72
82
|
const _keyborg = require("keyborg");
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.js"],"sourcesContent":["export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useFocusVisible, useFocusWithin, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes, useObservedElement, useFocusObserved, useMergedTabsterAttributes_unstable, useRestoreFocusSource, useRestoreFocusTarget, useUncontrolledFocus, useOnKeyboardNavigationChange } from './hooks/index';\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\nexport { applyFocusVisiblePolyfill } from './focus/index';\nexport { KEYBORG_FOCUSIN } from 'keyborg';\n"],"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useModalAttributes","useTabsterAttributes","useObservedElement","useFocusObserved","useMergedTabsterAttributes_unstable","useRestoreFocusSource","useRestoreFocusTarget","useUncontrolledFocus","useOnKeyboardNavigationChange","createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill","KEYBORG_FOCUSIN"],"mappings":";;;;;;;;;;;IAASA,uBAAuB;eAAvBA,8BAAuB;;IAAEC,iBAAiB;eAAjBA,wBAAiB;;IAAEC,eAAe;eAAfA,sBAAe;;IAAEC,eAAe;eAAfA,sBAAe;;IAAEC,cAAc;eAAdA,qBAAc;;IAAEC,uBAAuB;eAAvBA,8BAAuB;;IAAEC,kBAAkB;eAAlBA,yBAAkB;;IAAEC,oBAAoB;eAApBA,2BAAoB;;IAAEC,kBAAkB;eAAlBA,yBAAkB;;IAAEC,gBAAgB;eAAhBA,uBAAgB;;IAAEC,mCAAmC;eAAnCA,0CAAmC;;IAAEC,qBAAqB;eAArBA,4BAAqB;;IAAEC,qBAAqB;eAArBA,4BAAqB;;IAAEC,oBAAoB;eAApBA,2BAAoB;;IAAEC,6BAA6B;eAA7BA,oCAA6B;;IAC7UC,+BAA+B;eAA/BA,uCAA+B;;IAAEC,uBAAuB;eAAvBA,+BAAuB;;IACxDC,yBAAyB;eAAzBA,iCAAyB;;
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useFocusVisible, useFocusWithin, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes, useObservedElement, useFocusObserved, useMergedTabsterAttributes_unstable, useRestoreFocusSource, useRestoreFocusTarget, useUncontrolledFocus, useOnKeyboardNavigationChange } from './hooks/index';\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\nexport { applyFocusVisiblePolyfill } from './focus/index';\nimport { Types as TabsterTypes, dispatchGroupperMoveFocusEvent, dispatchMoverMoveFocusEvent } from 'tabster';\nexport { KEYBORG_FOCUSIN } from 'keyborg';\n// @internal (undocumented)\nexport { TabsterTypes, dispatchGroupperMoveFocusEvent, dispatchMoverMoveFocusEvent };\n"],"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useModalAttributes","useTabsterAttributes","useObservedElement","useFocusObserved","useMergedTabsterAttributes_unstable","useRestoreFocusSource","useRestoreFocusTarget","useUncontrolledFocus","useOnKeyboardNavigationChange","createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill","KEYBORG_FOCUSIN","TabsterTypes","dispatchGroupperMoveFocusEvent","dispatchMoverMoveFocusEvent"],"mappings":";;;;;;;;;;;IAASA,uBAAuB;eAAvBA,8BAAuB;;IAAEC,iBAAiB;eAAjBA,wBAAiB;;IAAEC,eAAe;eAAfA,sBAAe;;IAAEC,eAAe;eAAfA,sBAAe;;IAAEC,cAAc;eAAdA,qBAAc;;IAAEC,uBAAuB;eAAvBA,8BAAuB;;IAAEC,kBAAkB;eAAlBA,yBAAkB;;IAAEC,oBAAoB;eAApBA,2BAAoB;;IAAEC,kBAAkB;eAAlBA,yBAAkB;;IAAEC,gBAAgB;eAAhBA,uBAAgB;;IAAEC,mCAAmC;eAAnCA,0CAAmC;;IAAEC,qBAAqB;eAArBA,4BAAqB;;IAAEC,qBAAqB;eAArBA,4BAAqB;;IAAEC,oBAAoB;eAApBA,2BAAoB;;IAAEC,6BAA6B;eAA7BA,oCAA6B;;IAC7UC,+BAA+B;eAA/BA,uCAA+B;;IAAEC,uBAAuB;eAAvBA,+BAAuB;;IACxDC,yBAAyB;eAAzBA,iCAAyB;;IAEzBC,eAAe;eAAfA,wBAAe;;IAEfC,YAAY;eAAZA,cAAY;;IAAEC,8BAA8B;eAA9BA,uCAA8B;;IAAEC,2BAA2B;eAA3BA,oCAA2B;;;uBAN4Q;wBACrR;yBAE0B;yBACnE"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-tabster",
|
3
|
-
"version": "9.
|
3
|
+
"version": "9.18.0",
|
4
4
|
"description": "Utilities for focus management and facade for tabster",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -33,11 +33,11 @@
|
|
33
33
|
"dependencies": {
|
34
34
|
"@fluentui/react-shared-contexts": "^9.14.0",
|
35
35
|
"@fluentui/react-theme": "^9.1.16",
|
36
|
-
"@fluentui/react-utilities": "^9.
|
36
|
+
"@fluentui/react-utilities": "^9.18.0",
|
37
37
|
"@griffel/react": "^1.5.14",
|
38
38
|
"@swc/helpers": "^0.5.1",
|
39
|
-
"keyborg": "^2.
|
40
|
-
"tabster": "^
|
39
|
+
"keyborg": "^2.5.0",
|
40
|
+
"tabster": "^6.0.0"
|
41
41
|
},
|
42
42
|
"peerDependencies": {
|
43
43
|
"@types/react": ">=16.14.0 <19.0.0",
|