@fluentui/react-tabster 9.21.5 → 9.22.1
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 +34 -35
- package/lib/hooks/useArrowNavigationGroup.js +6 -6
- package/lib/hooks/useArrowNavigationGroup.js.map +1 -1
- package/lib/hooks/useFocusableGroup.js +4 -4
- package/lib/hooks/useFocusableGroup.js.map +1 -1
- package/lib/hooks/useMergeTabsterAttributes.js +4 -3
- package/lib/hooks/useMergeTabsterAttributes.js.map +1 -1
- package/lib/hooks/useModalAttributes.js +3 -3
- package/lib/hooks/useModalAttributes.js.map +1 -1
- package/lib/hooks/useRestoreFocus.js +3 -3
- package/lib/hooks/useRestoreFocus.js.map +1 -1
- package/lib/hooks/useTabsterAttributes.js +2 -2
- package/lib/hooks/useTabsterAttributes.js.map +1 -1
- package/lib/index.js +5 -9
- package/lib/index.js.map +1 -1
- package/lib-commonjs/hooks/useArrowNavigationGroup.js +5 -5
- package/lib-commonjs/hooks/useArrowNavigationGroup.js.map +1 -1
- package/lib-commonjs/hooks/useFocusableGroup.js +3 -3
- package/lib-commonjs/hooks/useFocusableGroup.js.map +1 -1
- package/lib-commonjs/hooks/useMergeTabsterAttributes.js +3 -2
- package/lib-commonjs/hooks/useMergeTabsterAttributes.js.map +1 -1
- package/lib-commonjs/hooks/useModalAttributes.js +2 -2
- package/lib-commonjs/hooks/useModalAttributes.js.map +1 -1
- package/lib-commonjs/hooks/useRestoreFocus.js +2 -2
- package/lib-commonjs/hooks/useRestoreFocus.js.map +1 -1
- package/lib-commonjs/hooks/useTabsterAttributes.js +1 -1
- package/lib-commonjs/hooks/useTabsterAttributes.js.map +1 -1
- package/lib-commonjs/index.js +14 -16
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +3 -3
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 Mon, 01 Jul 2024 20:25:46 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.22.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.22.1)
|
8
|
+
|
9
|
+
Mon, 01 Jul 2024 20:25:46 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.22.0..@fluentui/react-tabster_v9.22.1)
|
11
|
+
|
12
|
+
### Patches
|
13
|
+
|
14
|
+
- chore: add eslint react-compiler ([PR #31457](https://github.com/microsoft/fluentui/pull/31457) by seanmonahan@microsoft.com)
|
15
|
+
- Bump @fluentui/react-utilities to v9.18.11 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
|
16
|
+
|
17
|
+
## [9.22.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.22.0)
|
18
|
+
|
19
|
+
Mon, 17 Jun 2024 07:34:17 GMT
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.21.5..@fluentui/react-tabster_v9.22.0)
|
21
|
+
|
22
|
+
### Minor changes
|
23
|
+
|
24
|
+
- Exposing TabsterMoveFocusEvent. ([PR #31393](https://github.com/microsoft/fluentui/pull/31393) by marata@microsoft.com)
|
25
|
+
|
26
|
+
### Patches
|
27
|
+
|
28
|
+
- chore: Pulling Tabster 8.0.0 for the tree-shakeability improvements to reduce the bundle size. ([PR #31441](https://github.com/microsoft/fluentui/pull/31441) by marata@microsoft.com)
|
29
|
+
|
7
30
|
## [9.21.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.21.5)
|
8
31
|
|
9
|
-
Thu, 06 Jun 2024 15:
|
32
|
+
Thu, 06 Jun 2024 15:26:40 GMT
|
10
33
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.21.4..@fluentui/react-tabster_v9.21.5)
|
11
34
|
|
12
35
|
### Patches
|
package/dist/index.d.ts
CHANGED
@@ -1,12 +1,22 @@
|
|
1
1
|
import { dispatchGroupperMoveFocusEvent } from 'tabster';
|
2
2
|
import { dispatchMoverMoveFocusEvent } from 'tabster';
|
3
|
-
import {
|
3
|
+
import { EventsTypes } from 'tabster';
|
4
4
|
import type { GriffelStyle } from '@griffel/react';
|
5
|
+
import { GroupperMoveFocusActions } from 'tabster';
|
6
|
+
import { GroupperMoveFocusEvent } from 'tabster';
|
7
|
+
import { GroupperMoveFocusEventName } from 'tabster';
|
5
8
|
import { KEYBORG_FOCUSIN } from 'keyborg';
|
6
9
|
import { KeyborgFocusInEvent } from 'keyborg';
|
7
10
|
import { makeResetStyles } from '@griffel/react';
|
11
|
+
import { MoverKeys } from 'tabster';
|
12
|
+
import { MoverMemorizedElementEvent } from 'tabster';
|
13
|
+
import { MoverMemorizedElementEventName } from 'tabster';
|
14
|
+
import { MoverMoveFocusEvent } from 'tabster';
|
15
|
+
import { MoverMoveFocusEventName } from 'tabster';
|
8
16
|
import * as React_2 from 'react';
|
9
17
|
import type { RefObject } from 'react';
|
18
|
+
import { TabsterMoveFocusEvent } from 'tabster';
|
19
|
+
import { TabsterMoveFocusEventName } from 'tabster';
|
10
20
|
import { Types } from 'tabster';
|
11
21
|
|
12
22
|
/**
|
@@ -493,10 +503,7 @@ declare type GroupperConstructor = (tabster: TabsterCore, element: HTMLElement,
|
|
493
503
|
|
494
504
|
declare type GroupperMoveFocusAction = GroupperMoveFocusActions_2[keyof GroupperMoveFocusActions_2];
|
495
505
|
|
496
|
-
export
|
497
|
-
readonly Enter: 1;
|
498
|
-
readonly Escape: 2;
|
499
|
-
};
|
506
|
+
export { GroupperMoveFocusActions }
|
500
507
|
|
501
508
|
declare interface GroupperMoveFocusActions_2 {
|
502
509
|
Enter: 1;
|
@@ -505,15 +512,15 @@ declare interface GroupperMoveFocusActions_2 {
|
|
505
512
|
|
506
513
|
declare const GroupperMoveFocusActions_2: GroupperMoveFocusActions_2;
|
507
514
|
|
508
|
-
export
|
515
|
+
export { GroupperMoveFocusEvent }
|
509
516
|
|
510
517
|
declare type GroupperMoveFocusEvent_2 = CustomEvent<{
|
511
518
|
action: GroupperMoveFocusAction;
|
512
519
|
} | undefined>;
|
513
520
|
|
514
|
-
export declare type GroupperMoveFocusEventDetail =
|
521
|
+
export declare type GroupperMoveFocusEventDetail = EventsTypes.GroupperMoveFocusEventDetail;
|
515
522
|
|
516
|
-
export
|
523
|
+
export { GroupperMoveFocusEventName }
|
517
524
|
|
518
525
|
declare const GroupperMoveFocusEventName_2 = "tabster:groupper:movefocus";
|
519
526
|
|
@@ -693,16 +700,7 @@ declare const MoverEventName = "tabster:mover";
|
|
693
700
|
|
694
701
|
declare type MoverKey = MoverKeys_2[keyof MoverKeys_2];
|
695
702
|
|
696
|
-
export
|
697
|
-
readonly ArrowUp: 1;
|
698
|
-
readonly ArrowDown: 2;
|
699
|
-
readonly ArrowLeft: 3;
|
700
|
-
readonly ArrowRight: 4;
|
701
|
-
readonly PageUp: 5;
|
702
|
-
readonly PageDown: 6;
|
703
|
-
readonly Home: 7;
|
704
|
-
readonly End: 8;
|
705
|
-
};
|
703
|
+
export { MoverKeys }
|
706
704
|
|
707
705
|
declare interface MoverKeys_2 {
|
708
706
|
ArrowUp: 1;
|
@@ -717,25 +715,21 @@ declare interface MoverKeys_2 {
|
|
717
715
|
|
718
716
|
declare const MoverKeys_2: MoverKeys_2;
|
719
717
|
|
720
|
-
export
|
718
|
+
export { MoverMemorizedElementEvent }
|
721
719
|
|
722
|
-
export declare type MoverMemorizedElementEventDetail =
|
720
|
+
export declare type MoverMemorizedElementEventDetail = EventsTypes.MoverMemorizedElementEventDetail;
|
723
721
|
|
724
|
-
export
|
722
|
+
export { MoverMemorizedElementEventName }
|
725
723
|
|
726
|
-
export
|
724
|
+
export { MoverMoveFocusEvent }
|
727
725
|
|
728
726
|
declare type MoverMoveFocusEvent_2 = CustomEvent<{
|
729
727
|
key: MoverKey;
|
730
728
|
} | undefined>;
|
731
729
|
|
732
|
-
export declare type MoverMoveFocusEventDetail =
|
730
|
+
export declare type MoverMoveFocusEventDetail = EventsTypes.MoverMoveFocusEventDetail;
|
733
731
|
|
734
|
-
|
735
|
-
* For all exports below, we don't do wildcard exports to keep Tabster API flexible. We export only required
|
736
|
-
* parts when they are needed.
|
737
|
-
*/
|
738
|
-
export declare const MoverMoveFocusEventName: "tabster:mover:movefocus";
|
732
|
+
export { MoverMoveFocusEventName }
|
739
733
|
|
740
734
|
declare const MoverMoveFocusEventName_2 = "tabster:mover:movefocus";
|
741
735
|
|
@@ -1151,7 +1145,11 @@ declare interface TabsterElementStorageEntry {
|
|
1151
1145
|
|
1152
1146
|
declare type TabsterEventWithDetails<D> = CustomEvent<D | undefined>;
|
1153
1147
|
|
1154
|
-
|
1148
|
+
export { TabsterMoveFocusEvent }
|
1149
|
+
|
1150
|
+
declare type TabsterMoveFocusEvent_2 = TabsterEventWithDetails<TabsterMoveFocusEventDetails>;
|
1151
|
+
|
1152
|
+
export declare type TabsterMoveFocusEventDetail = EventsTypes.TabsterMoveFocusEventDetail;
|
1155
1153
|
|
1156
1154
|
declare interface TabsterMoveFocusEventDetails {
|
1157
1155
|
by: 'mover' | 'groupper' | 'modalizer' | 'root';
|
@@ -1160,6 +1158,8 @@ declare interface TabsterMoveFocusEventDetails {
|
|
1160
1158
|
relatedEvent?: KeyboardEvent;
|
1161
1159
|
}
|
1162
1160
|
|
1161
|
+
export { TabsterMoveFocusEventName }
|
1162
|
+
|
1163
1163
|
declare type TabsterOnElement = Partial<RootOnElement & DeloserOnElement & ModalizerOnElement & FocusableOnElement & MoverOnElement & GroupperOnElement & ObservedOnElement & OutlineOnElement & UncontrolledOnElement & SysOnElement & RestorerOnElement>;
|
1164
1164
|
|
1165
1165
|
declare interface TabsterPart<P> {
|
@@ -1200,7 +1200,7 @@ declare namespace TabsterTypes {
|
|
1200
1200
|
GroupperMoveFocusEvent_2 as GroupperMoveFocusEvent,
|
1201
1201
|
TabsterEventWithDetails,
|
1202
1202
|
TabsterMoveFocusEventDetails,
|
1203
|
-
TabsterMoveFocusEvent,
|
1203
|
+
TabsterMoveFocusEvent_2 as TabsterMoveFocusEvent,
|
1204
1204
|
TabsterDOMAttribute_2 as TabsterDOMAttribute,
|
1205
1205
|
TabsterCoreProps,
|
1206
1206
|
DOMAPI,
|
@@ -1470,16 +1470,15 @@ export declare const useModalAttributes: (options?: UseModalAttributesOptions) =
|
|
1470
1470
|
export declare interface UseModalAttributesOptions {
|
1471
1471
|
/**
|
1472
1472
|
* Traps focus inside the elements the attributes are applied.
|
1473
|
-
* Prefer this to `legacyTrapFocus`
|
1474
1473
|
* it forbids users to tab out of the focus trap into the actual browser.
|
1475
1474
|
*/
|
1476
1475
|
trapFocus?: boolean;
|
1477
1476
|
/**
|
1478
1477
|
* Traps focus inside the elements the attributes are applied.
|
1479
|
-
* This prop enables
|
1480
|
-
*
|
1481
|
-
*
|
1482
|
-
*
|
1478
|
+
* This prop enables traditional force-focus behavior to match previous versions of Fluent.
|
1479
|
+
* Without this, users can tab out of the focus trap and into the browser chrome.
|
1480
|
+
* This matches the behavior of the native <dialog> element and inert.
|
1481
|
+
* We recommend setting this to true based on user feedback and consistency.
|
1483
1482
|
*/
|
1484
1483
|
legacyTrapFocus?: boolean;
|
1485
1484
|
/**
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import {
|
1
|
+
import { getMover, MoverDirections } from 'tabster';
|
2
2
|
import { useTabsterAttributes } from './useTabsterAttributes';
|
3
3
|
import { useTabster } from './useTabster';
|
4
4
|
/**
|
@@ -29,15 +29,15 @@ import { useTabster } from './useTabster';
|
|
29
29
|
function axisToMoverDirection(axis) {
|
30
30
|
switch(axis){
|
31
31
|
case 'horizontal':
|
32
|
-
return
|
32
|
+
return MoverDirections.Horizontal;
|
33
33
|
case 'grid':
|
34
|
-
return
|
34
|
+
return MoverDirections.Grid;
|
35
35
|
case 'grid-linear':
|
36
|
-
return
|
36
|
+
return MoverDirections.GridLinear;
|
37
37
|
case 'both':
|
38
|
-
return
|
38
|
+
return MoverDirections.Both;
|
39
39
|
case 'vertical':
|
40
40
|
default:
|
41
|
-
return
|
41
|
+
return MoverDirections.Vertical;
|
42
42
|
}
|
43
43
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useArrowNavigationGroup.ts"],"sourcesContent":["import { Types, getMover } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseArrowNavigationGroupOptions {\n /**\n * Focus will navigate vertically, horizontally or in both directions (grid), defaults to horizontally\n * @defaultValue vertical\n */\n axis?: 'vertical' | 'horizontal' | 'grid' | 'grid-linear' | 'both';\n /**\n * Focus will cycle to the first/last elements of the group without stopping\n */\n circular?: boolean;\n /**\n * Last focused element in the group will be remembered and focused (if still\n * available) when tabbing from outside of the group\n * @default true\n */\n memorizeCurrent?: boolean;\n /**\n * Allow tabbing within the arrow navigation group items.\n */\n tabbable?: boolean;\n /**\n * Tabster should ignore default handling of keydown events\n */\n ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];\n /**\n * The default focusable item in the group will be an element with Focusable.isDefault property.\n * Note that there is no way in \\@fluentui/react-tabster to set default focusable element,\n * and this option is currently for internal testing purposes only.\n */\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault?: boolean;\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support arrow key navigation\n * @param options - Options to configure keyboard navigation\n */\nexport const useArrowNavigationGroup = (options: UseArrowNavigationGroupOptions = {}): Types.TabsterDOMAttribute => {\n const {\n circular,\n axis,\n memorizeCurrent = true,\n tabbable,\n ignoreDefaultKeydown,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault,\n } = options;\n const tabster = useTabster();\n\n if (tabster) {\n getMover(tabster);\n }\n\n return useTabsterAttributes({\n mover: {\n cyclic: !!circular,\n direction: axisToMoverDirection(axis ?? 'vertical'),\n memorizeCurrent,\n tabbable,\n hasDefault: unstable_hasDefault,\n },\n ...(ignoreDefaultKeydown && {\n focusable: {\n ignoreKeydown: ignoreDefaultKeydown,\n },\n }),\n });\n};\n\nfunction axisToMoverDirection(axis: UseArrowNavigationGroupOptions['axis']): Types.MoverDirection {\n switch (axis) {\n case 'horizontal':\n return
|
1
|
+
{"version":3,"sources":["useArrowNavigationGroup.ts"],"sourcesContent":["import { Types, getMover, MoverDirections } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseArrowNavigationGroupOptions {\n /**\n * Focus will navigate vertically, horizontally or in both directions (grid), defaults to horizontally\n * @defaultValue vertical\n */\n axis?: 'vertical' | 'horizontal' | 'grid' | 'grid-linear' | 'both';\n /**\n * Focus will cycle to the first/last elements of the group without stopping\n */\n circular?: boolean;\n /**\n * Last focused element in the group will be remembered and focused (if still\n * available) when tabbing from outside of the group\n * @default true\n */\n memorizeCurrent?: boolean;\n /**\n * Allow tabbing within the arrow navigation group items.\n */\n tabbable?: boolean;\n /**\n * Tabster should ignore default handling of keydown events\n */\n ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];\n /**\n * The default focusable item in the group will be an element with Focusable.isDefault property.\n * Note that there is no way in \\@fluentui/react-tabster to set default focusable element,\n * and this option is currently for internal testing purposes only.\n */\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault?: boolean;\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support arrow key navigation\n * @param options - Options to configure keyboard navigation\n */\nexport const useArrowNavigationGroup = (options: UseArrowNavigationGroupOptions = {}): Types.TabsterDOMAttribute => {\n const {\n circular,\n axis,\n memorizeCurrent = true,\n tabbable,\n ignoreDefaultKeydown,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault,\n } = options;\n const tabster = useTabster();\n\n if (tabster) {\n getMover(tabster);\n }\n\n return useTabsterAttributes({\n mover: {\n cyclic: !!circular,\n direction: axisToMoverDirection(axis ?? 'vertical'),\n memorizeCurrent,\n tabbable,\n hasDefault: unstable_hasDefault,\n },\n ...(ignoreDefaultKeydown && {\n focusable: {\n ignoreKeydown: ignoreDefaultKeydown,\n },\n }),\n });\n};\n\nfunction axisToMoverDirection(axis: UseArrowNavigationGroupOptions['axis']): Types.MoverDirection {\n switch (axis) {\n case 'horizontal':\n return MoverDirections.Horizontal;\n case 'grid':\n return MoverDirections.Grid;\n case 'grid-linear':\n return MoverDirections.GridLinear;\n case 'both':\n return MoverDirections.Both;\n\n case 'vertical':\n default:\n return MoverDirections.Vertical;\n }\n}\n"],"names":["getMover","MoverDirections","useTabsterAttributes","useTabster","useArrowNavigationGroup","options","circular","axis","memorizeCurrent","tabbable","ignoreDefaultKeydown","unstable_hasDefault","tabster","mover","cyclic","direction","axisToMoverDirection","hasDefault","focusable","ignoreKeydown","Horizontal","Grid","GridLinear","Both","Vertical"],"mappings":"AAAA,SAAgBA,QAAQ,EAAEC,eAAe,QAAQ,UAAU;AAC3D,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,UAAU,QAAQ,eAAe;AAmC1C;;;CAGC,GACD,OAAO,MAAMC,0BAA0B,CAACC,UAA0C,CAAC,CAAC;IAClF,MAAM,EACJC,QAAQ,EACRC,IAAI,EACJC,kBAAkB,IAAI,EACtBC,QAAQ,EACRC,oBAAoB,EACpB,gEAAgE;IAChEC,mBAAmB,EACpB,GAAGN;IACJ,MAAMO,UAAUT;IAEhB,IAAIS,SAAS;QACXZ,SAASY;IACX;IAEA,OAAOV,qBAAqB;QAC1BW,OAAO;YACLC,QAAQ,CAAC,CAACR;YACVS,WAAWC,qBAAqBT,iBAAAA,kBAAAA,OAAQ;YACxCC;YACAC;YACAQ,YAAYN;QACd;QACA,GAAID,wBAAwB;YAC1BQ,WAAW;gBACTC,eAAeT;YACjB;QACF,CAAC;IACH;AACF,EAAE;AAEF,SAASM,qBAAqBT,IAA4C;IACxE,OAAQA;QACN,KAAK;YACH,OAAON,gBAAgBmB,UAAU;QACnC,KAAK;YACH,OAAOnB,gBAAgBoB,IAAI;QAC7B,KAAK;YACH,OAAOpB,gBAAgBqB,UAAU;QACnC,KAAK;YACH,OAAOrB,gBAAgBsB,IAAI;QAE7B,KAAK;QACL;YACE,OAAOtB,gBAAgBuB,QAAQ;IACnC;AACF"}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import {
|
1
|
+
import { getGroupper, GroupperTabbabilities } from 'tabster';
|
2
2
|
import { useTabsterAttributes } from './useTabsterAttributes';
|
3
3
|
import { useTabster } from './useTabster';
|
4
4
|
/**
|
@@ -21,11 +21,11 @@ import { useTabster } from './useTabster';
|
|
21
21
|
const getTabbability = (tabBehavior)=>{
|
22
22
|
switch(tabBehavior){
|
23
23
|
case 'unlimited':
|
24
|
-
return
|
24
|
+
return GroupperTabbabilities.Unlimited;
|
25
25
|
case 'limited':
|
26
|
-
return
|
26
|
+
return GroupperTabbabilities.Limited;
|
27
27
|
case 'limited-trap-focus':
|
28
|
-
return
|
28
|
+
return GroupperTabbabilities.LimitedTrapFocus;
|
29
29
|
default:
|
30
30
|
return undefined;
|
31
31
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useFocusableGroup.ts"],"sourcesContent":["import { Types, getGroupper } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseFocusableGroupOptions {\n /**\n * Behavior for the Tab key.\n */\n tabBehavior?: 'unlimited' | 'limited' | 'limited-trap-focus';\n\n /**\n * Tabster can ignore default handling of keydown events\n */\n ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support groupping.\n * @param options - Options to configure keyboard navigation\n */\nexport const useFocusableGroup = (options?: UseFocusableGroupOptions): Types.TabsterDOMAttribute => {\n const tabster = useTabster();\n\n if (tabster) {\n getGroupper(tabster);\n }\n\n return useTabsterAttributes({\n groupper: {\n tabbability: getTabbability(options?.tabBehavior),\n },\n focusable: {\n ignoreKeydown: options?.ignoreDefaultKeydown,\n },\n });\n};\n\nconst getTabbability = (\n tabBehavior?: UseFocusableGroupOptions['tabBehavior'],\n): Types.GroupperTabbability | undefined => {\n switch (tabBehavior) {\n case 'unlimited':\n return
|
1
|
+
{"version":3,"sources":["useFocusableGroup.ts"],"sourcesContent":["import { Types, getGroupper, GroupperTabbabilities } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseFocusableGroupOptions {\n /**\n * Behavior for the Tab key.\n */\n tabBehavior?: 'unlimited' | 'limited' | 'limited-trap-focus';\n\n /**\n * Tabster can ignore default handling of keydown events\n */\n ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support groupping.\n * @param options - Options to configure keyboard navigation\n */\nexport const useFocusableGroup = (options?: UseFocusableGroupOptions): Types.TabsterDOMAttribute => {\n const tabster = useTabster();\n\n if (tabster) {\n getGroupper(tabster);\n }\n\n return useTabsterAttributes({\n groupper: {\n tabbability: getTabbability(options?.tabBehavior),\n },\n focusable: {\n ignoreKeydown: options?.ignoreDefaultKeydown,\n },\n });\n};\n\nconst getTabbability = (\n tabBehavior?: UseFocusableGroupOptions['tabBehavior'],\n): Types.GroupperTabbability | undefined => {\n switch (tabBehavior) {\n case 'unlimited':\n return GroupperTabbabilities.Unlimited;\n case 'limited':\n return GroupperTabbabilities.Limited;\n case 'limited-trap-focus':\n return GroupperTabbabilities.LimitedTrapFocus;\n default:\n return undefined;\n }\n};\n"],"names":["getGroupper","GroupperTabbabilities","useTabsterAttributes","useTabster","useFocusableGroup","options","tabster","groupper","tabbability","getTabbability","tabBehavior","focusable","ignoreKeydown","ignoreDefaultKeydown","Unlimited","Limited","LimitedTrapFocus","undefined"],"mappings":"AAAA,SAAgBA,WAAW,EAAEC,qBAAqB,QAAQ,UAAU;AACpE,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,UAAU,QAAQ,eAAe;AAc1C;;;CAGC,GACD,OAAO,MAAMC,oBAAoB,CAACC;IAChC,MAAMC,UAAUH;IAEhB,IAAIG,SAAS;QACXN,YAAYM;IACd;IAEA,OAAOJ,qBAAqB;QAC1BK,UAAU;YACRC,aAAaC,eAAeJ,oBAAAA,8BAAAA,QAASK,WAAW;QAClD;QACAC,WAAW;YACTC,aAAa,EAAEP,oBAAAA,8BAAAA,QAASQ,oBAAoB;QAC9C;IACF;AACF,EAAE;AAEF,MAAMJ,iBAAiB,CACrBC;IAEA,OAAQA;QACN,KAAK;YACH,OAAOT,sBAAsBa,SAAS;QACxC,KAAK;YACH,OAAOb,sBAAsBc,OAAO;QACtC,KAAK;YACH,OAAOd,sBAAsBe,gBAAgB;QAC/C;YACE,OAAOC;IACX;AACF"}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import {
|
2
|
+
import { TABSTER_ATTRIBUTE_NAME } from 'tabster';
|
3
3
|
/**
|
4
4
|
* Merges a collection of tabster attributes.
|
5
5
|
*
|
@@ -8,7 +8,8 @@ import { Types } from 'tabster';
|
|
8
8
|
* @param attributes - collection of tabster attributes from other react-tabster hooks
|
9
9
|
* @returns single merged tabster attribute
|
10
10
|
*/ export const useMergedTabsterAttributes_unstable = (...attributes)=>{
|
11
|
-
|
11
|
+
'use no memo';
|
12
|
+
const stringAttributes = attributes.map((attribute)=>attribute[TABSTER_ATTRIBUTE_NAME]).filter(Boolean);
|
12
13
|
return React.useMemo(()=>{
|
13
14
|
let attribute = stringAttributes[0];
|
14
15
|
attributes.shift();
|
@@ -16,7 +17,7 @@ import { Types } from 'tabster';
|
|
16
17
|
attribute = mergeAttributes(attribute, attr);
|
17
18
|
}
|
18
19
|
return {
|
19
|
-
[
|
20
|
+
[TABSTER_ATTRIBUTE_NAME]: attribute
|
20
21
|
};
|
21
22
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
22
23
|
}, stringAttributes);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useMergeTabsterAttributes.ts"],"sourcesContent":["import * as React from 'react';\nimport { Types } from 'tabster';\n\n/**\n * Merges a collection of tabster attributes.\n *\n * ⚠️The attributes passed as arguments to this hook cannot change at runtime.\n * @internal\n * @param attributes - collection of tabster attributes from other react-tabster hooks\n * @returns single merged tabster attribute\n */\nexport const useMergedTabsterAttributes_unstable: (\n ...attributes: Types.TabsterDOMAttribute[]\n) => Types.TabsterDOMAttribute = (...attributes) => {\n const stringAttributes = attributes
|
1
|
+
{"version":3,"sources":["useMergeTabsterAttributes.ts"],"sourcesContent":["import * as React from 'react';\nimport { Types, TABSTER_ATTRIBUTE_NAME } from 'tabster';\n\n/**\n * Merges a collection of tabster attributes.\n *\n * ⚠️The attributes passed as arguments to this hook cannot change at runtime.\n * @internal\n * @param attributes - collection of tabster attributes from other react-tabster hooks\n * @returns single merged tabster attribute\n */\nexport const useMergedTabsterAttributes_unstable: (\n ...attributes: Types.TabsterDOMAttribute[]\n) => Types.TabsterDOMAttribute = (...attributes) => {\n 'use no memo';\n\n const stringAttributes = attributes.map(attribute => attribute[TABSTER_ATTRIBUTE_NAME]).filter(Boolean) as string[];\n\n return React.useMemo(() => {\n let attribute = stringAttributes[0];\n attributes.shift();\n\n for (const attr of stringAttributes) {\n attribute = mergeAttributes(attribute, attr);\n }\n\n return { [TABSTER_ATTRIBUTE_NAME]: attribute };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, stringAttributes);\n};\n\nfunction mergeAttributes(a: string, b?: string): string {\n if (!b) {\n return a;\n }\n\n let aParsed = {};\n let bParsed = {};\n if (a) {\n try {\n aParsed = JSON.parse(a);\n // eslint-disable-next-line no-empty\n } catch {}\n }\n\n if (b) {\n try {\n bParsed = JSON.parse(b);\n // eslint-disable-next-line no-empty\n } catch {}\n }\n\n return JSON.stringify({ ...aParsed, ...bParsed });\n}\n"],"names":["React","TABSTER_ATTRIBUTE_NAME","useMergedTabsterAttributes_unstable","attributes","stringAttributes","map","attribute","filter","Boolean","useMemo","shift","attr","mergeAttributes","a","b","aParsed","bParsed","JSON","parse","stringify"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAgBC,sBAAsB,QAAQ,UAAU;AAExD;;;;;;;CAOC,GACD,OAAO,MAAMC,sCAEoB,CAAC,GAAGC;IACnC;IAEA,MAAMC,mBAAmBD,WAAWE,GAAG,CAACC,CAAAA,YAAaA,SAAS,CAACL,uBAAuB,EAAEM,MAAM,CAACC;IAE/F,OAAOR,MAAMS,OAAO,CAAC;QACnB,IAAIH,YAAYF,gBAAgB,CAAC,EAAE;QACnCD,WAAWO,KAAK;QAEhB,KAAK,MAAMC,QAAQP,iBAAkB;YACnCE,YAAYM,gBAAgBN,WAAWK;QACzC;QAEA,OAAO;YAAE,CAACV,uBAAuB,EAAEK;QAAU;IAC7C,uDAAuD;IACzD,GAAGF;AACL,EAAE;AAEF,SAASQ,gBAAgBC,CAAS,EAAEC,CAAU;IAC5C,IAAI,CAACA,GAAG;QACN,OAAOD;IACT;IAEA,IAAIE,UAAU,CAAC;IACf,IAAIC,UAAU,CAAC;IACf,IAAIH,GAAG;QACL,IAAI;YACFE,UAAUE,KAAKC,KAAK,CAACL;QACrB,oCAAoC;QACtC,EAAE,OAAM,CAAC;IACX;IAEA,IAAIC,GAAG;QACL,IAAI;YACFE,UAAUC,KAAKC,KAAK,CAACJ;QACrB,oCAAoC;QACtC,EAAE,OAAM,CAAC;IACX;IAEA,OAAOG,KAAKE,SAAS,CAAC;QAAE,GAAGJ,OAAO;QAAE,GAAGC,OAAO;IAAC;AACjD"}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { useId } from '@fluentui/react-utilities';
|
2
2
|
import { useTabsterAttributes } from './useTabsterAttributes';
|
3
|
-
import { getModalizer, getRestorer,
|
3
|
+
import { getModalizer, getRestorer, RestorerTypes } from 'tabster';
|
4
4
|
import { useTabster } from './useTabster';
|
5
5
|
/**
|
6
6
|
* Applies modal dialog behaviour through DOM attributes
|
@@ -19,7 +19,7 @@ import { useTabster } from './useTabster';
|
|
19
19
|
const id = useId('modal-', options.id);
|
20
20
|
const modalAttributes = useTabsterAttributes({
|
21
21
|
restorer: {
|
22
|
-
type:
|
22
|
+
type: RestorerTypes.Source
|
23
23
|
},
|
24
24
|
...trapFocus && {
|
25
25
|
modalizer: {
|
@@ -32,7 +32,7 @@ import { useTabster } from './useTabster';
|
|
32
32
|
});
|
33
33
|
const triggerAttributes = useTabsterAttributes({
|
34
34
|
restorer: {
|
35
|
-
type:
|
35
|
+
type: RestorerTypes.Target
|
36
36
|
}
|
37
37
|
});
|
38
38
|
return {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useModalAttributes.ts"],"sourcesContent":["import { useId } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { getModalizer, getRestorer, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\nexport interface UseModalAttributesOptions {\n /**\n * Traps focus inside the elements the attributes are applied.\n *
|
1
|
+
{"version":3,"sources":["useModalAttributes.ts"],"sourcesContent":["import { useId } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { getModalizer, getRestorer, Types as TabsterTypes, RestorerTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\nexport interface UseModalAttributesOptions {\n /**\n * Traps focus inside the elements the attributes are applied.\n * it forbids users to tab out of the focus trap into the actual browser.\n */\n trapFocus?: boolean;\n\n /**\n * Traps focus inside the elements the attributes are applied.\n * This prop enables traditional force-focus behavior to match previous versions of Fluent.\n * Without this, users can tab out of the focus trap and into the browser chrome.\n * This matches the behavior of the native <dialog> element and inert.\n * We recommend setting this to true based on user feedback and consistency.\n */\n legacyTrapFocus?: boolean;\n\n /**\n * Always reachabled in Tab order\n */\n alwaysFocusable?: boolean;\n\n /**\n * Id to use for the modalizer. An id will be generated if not provided.\n */\n id?: string;\n}\n\n/**\n * Applies modal dialog behaviour through DOM attributes\n * Modal element will focus trap and hide other content on the page\n * The trigger element will be focused if focus is lost after the modal element is removed\n *\n * @returns DOM attributes to apply to the modal element and its trigger\n */\nexport const useModalAttributes = (\n options: UseModalAttributesOptions = {},\n): { modalAttributes: TabsterTypes.TabsterDOMAttribute; triggerAttributes: TabsterTypes.TabsterDOMAttribute } => {\n const { trapFocus, alwaysFocusable, legacyTrapFocus } = options;\n const tabster = useTabster();\n // Initializes the modalizer and restorer APIs\n if (tabster) {\n getModalizer(tabster);\n getRestorer(tabster);\n }\n\n const id = useId('modal-', options.id);\n const modalAttributes = useTabsterAttributes({\n restorer: { type: RestorerTypes.Source },\n ...(trapFocus && {\n modalizer: {\n id,\n isOthersAccessible: !trapFocus,\n isAlwaysAccessible: alwaysFocusable,\n isTrapped: legacyTrapFocus && trapFocus,\n },\n }),\n });\n\n const triggerAttributes = useTabsterAttributes({\n restorer: { type: RestorerTypes.Target },\n });\n\n return { modalAttributes, triggerAttributes };\n};\n"],"names":["useId","useTabsterAttributes","getModalizer","getRestorer","RestorerTypes","useTabster","useModalAttributes","options","trapFocus","alwaysFocusable","legacyTrapFocus","tabster","id","modalAttributes","restorer","type","Source","modalizer","isOthersAccessible","isAlwaysAccessible","isTrapped","triggerAttributes","Target"],"mappings":"AAAA,SAASA,KAAK,QAAQ,4BAA4B;AAClD,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,YAAY,EAAEC,WAAW,EAAyBC,aAAa,QAAQ,UAAU;AAC1F,SAASC,UAAU,QAAQ,eAAe;AA6B1C;;;;;;CAMC,GACD,OAAO,MAAMC,qBAAqB,CAChCC,UAAqC,CAAC,CAAC;IAEvC,MAAM,EAAEC,SAAS,EAAEC,eAAe,EAAEC,eAAe,EAAE,GAAGH;IACxD,MAAMI,UAAUN;IAChB,8CAA8C;IAC9C,IAAIM,SAAS;QACXT,aAAaS;QACbR,YAAYQ;IACd;IAEA,MAAMC,KAAKZ,MAAM,UAAUO,QAAQK,EAAE;IACrC,MAAMC,kBAAkBZ,qBAAqB;QAC3Ca,UAAU;YAAEC,MAAMX,cAAcY,MAAM;QAAC;QACvC,GAAIR,aAAa;YACfS,WAAW;gBACTL;gBACAM,oBAAoB,CAACV;gBACrBW,oBAAoBV;gBACpBW,WAAWV,mBAAmBF;YAChC;QACF,CAAC;IACH;IAEA,MAAMa,oBAAoBpB,qBAAqB;QAC7Ca,UAAU;YAAEC,MAAMX,cAAckB,MAAM;QAAC;IACzC;IAEA,OAAO;QAAET;QAAiBQ;IAAkB;AAC9C,EAAE"}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { getRestorer, getTabsterAttribute,
|
1
|
+
import { getRestorer, getTabsterAttribute, RestorerTypes } from 'tabster';
|
2
2
|
import { useTabster } from './useTabster';
|
3
3
|
/**
|
4
4
|
* Focus will be restored to the most recent target element when it is lost from a source
|
@@ -11,7 +11,7 @@ import { useTabster } from './useTabster';
|
|
11
11
|
}
|
12
12
|
return getTabsterAttribute({
|
13
13
|
restorer: {
|
14
|
-
type:
|
14
|
+
type: RestorerTypes.Target
|
15
15
|
}
|
16
16
|
});
|
17
17
|
}
|
@@ -26,7 +26,7 @@ import { useTabster } from './useTabster';
|
|
26
26
|
}
|
27
27
|
return getTabsterAttribute({
|
28
28
|
restorer: {
|
29
|
-
type:
|
29
|
+
type: RestorerTypes.Source
|
30
30
|
}
|
31
31
|
});
|
32
32
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useRestoreFocus.ts"],"sourcesContent":["import { getRestorer, getTabsterAttribute, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\n/**\n * Focus will be restored to the most recent target element when it is lost from a source\n * @returns Attribute to apply to the target element where focus is restored\n */\nexport function useRestoreFocusTarget(): TabsterTypes.TabsterDOMAttribute {\n const tabster = useTabster();\n // Initializes the restorer API\n if (tabster) {\n getRestorer(tabster);\n }\n\n return getTabsterAttribute({ restorer: { type:
|
1
|
+
{"version":3,"sources":["useRestoreFocus.ts"],"sourcesContent":["import { getRestorer, getTabsterAttribute, Types as TabsterTypes, RestorerTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\n/**\n * Focus will be restored to the most recent target element when it is lost from a source\n * @returns Attribute to apply to the target element where focus is restored\n */\nexport function useRestoreFocusTarget(): TabsterTypes.TabsterDOMAttribute {\n const tabster = useTabster();\n // Initializes the restorer API\n if (tabster) {\n getRestorer(tabster);\n }\n\n return getTabsterAttribute({ restorer: { type: RestorerTypes.Target } });\n}\n\n/**\n * Focus will be restored to the most recent target element when it is lost from a source\n * @returns Attribute to apply to the element that might lose focus\n */\nexport function useRestoreFocusSource(): TabsterTypes.TabsterDOMAttribute {\n const tabster = useTabster();\n // Initializes the restorer API\n if (tabster) {\n getRestorer(tabster);\n }\n\n return getTabsterAttribute({ restorer: { type: RestorerTypes.Source } });\n}\n"],"names":["getRestorer","getTabsterAttribute","RestorerTypes","useTabster","useRestoreFocusTarget","tabster","restorer","type","Target","useRestoreFocusSource","Source"],"mappings":"AAAA,SAASA,WAAW,EAAEC,mBAAmB,EAAyBC,aAAa,QAAQ,UAAU;AACjG,SAASC,UAAU,QAAQ,eAAe;AAE1C;;;CAGC,GACD,OAAO,SAASC;IACd,MAAMC,UAAUF;IAChB,+BAA+B;IAC/B,IAAIE,SAAS;QACXL,YAAYK;IACd;IAEA,OAAOJ,oBAAoB;QAAEK,UAAU;YAAEC,MAAML,cAAcM,MAAM;QAAC;IAAE;AACxE;AAEA;;;CAGC,GACD,OAAO,SAASC;IACd,MAAMJ,UAAUF;IAChB,+BAA+B;IAC/B,IAAIE,SAAS;QACXL,YAAYK;IACd;IAEA,OAAOJ,oBAAoB;QAAEK,UAAU;YAAEC,MAAML,cAAcQ,MAAM;QAAC;IAAE;AACxE"}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { getTabsterAttribute,
|
1
|
+
import { getTabsterAttribute, TABSTER_ATTRIBUTE_NAME } from 'tabster';
|
2
2
|
import { useTabster } from './useTabster';
|
3
3
|
import * as React from 'react';
|
4
4
|
/**
|
@@ -10,7 +10,7 @@ import * as React from 'react';
|
|
10
10
|
useTabster();
|
11
11
|
const strAttr = getTabsterAttribute(props, true);
|
12
12
|
return React.useMemo(()=>({
|
13
|
-
[
|
13
|
+
[TABSTER_ATTRIBUTE_NAME]: strAttr
|
14
14
|
}), [
|
15
15
|
strAttr
|
16
16
|
]);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useTabsterAttributes.ts"],"sourcesContent":["import { getTabsterAttribute, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\nimport * as React from 'react';\n\n/**\n * @internal\n * Hook that returns tabster attributes while ensuring tabster exists\n */\nexport const useTabsterAttributes = (props: TabsterTypes.TabsterAttributeProps): TabsterTypes.TabsterDOMAttribute => {\n // A tabster instance is not necessary to generate tabster attributes\n // but calling the hook will ensure that a tabster instance exists internally and avoids consumers doing the same\n useTabster();\n\n const strAttr = getTabsterAttribute(props, true);\n\n return React.useMemo(\n () => ({\n [
|
1
|
+
{"version":3,"sources":["useTabsterAttributes.ts"],"sourcesContent":["import { getTabsterAttribute, Types as TabsterTypes, TABSTER_ATTRIBUTE_NAME } from 'tabster';\nimport { useTabster } from './useTabster';\nimport * as React from 'react';\n\n/**\n * @internal\n * Hook that returns tabster attributes while ensuring tabster exists\n */\nexport const useTabsterAttributes = (props: TabsterTypes.TabsterAttributeProps): TabsterTypes.TabsterDOMAttribute => {\n // A tabster instance is not necessary to generate tabster attributes\n // but calling the hook will ensure that a tabster instance exists internally and avoids consumers doing the same\n useTabster();\n\n const strAttr = getTabsterAttribute(props, true);\n\n return React.useMemo(\n () => ({\n [TABSTER_ATTRIBUTE_NAME]: strAttr,\n }),\n [strAttr],\n );\n};\n"],"names":["getTabsterAttribute","TABSTER_ATTRIBUTE_NAME","useTabster","React","useTabsterAttributes","props","strAttr","useMemo"],"mappings":"AAAA,SAASA,mBAAmB,EAAyBC,sBAAsB,QAAQ,UAAU;AAC7F,SAASC,UAAU,QAAQ,eAAe;AAC1C,YAAYC,WAAW,QAAQ;AAE/B;;;CAGC,GACD,OAAO,MAAMC,uBAAuB,CAACC;IACnC,qEAAqE;IACrE,iHAAiH;IACjHH;IAEA,MAAMI,UAAUN,oBAAoBK,OAAO;IAE3C,OAAOF,MAAMI,OAAO,CAClB,IAAO,CAAA;YACL,CAACN,uBAAuB,EAAEK;QAC5B,CAAA,GACA;QAACA;KAAQ;AAEb,EAAE"}
|
package/lib/index.js
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useFocusVisible, useFocusWithin, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes, useObservedElement, useFocusObserved, useMergedTabsterAttributes_unstable, useRestoreFocusSource, useRestoreFocusTarget, useUncontrolledFocus, useOnKeyboardNavigationChange, useSetKeyboardNavigation, useFocusedElementChange } from './hooks/index';
|
2
2
|
export { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';
|
3
3
|
export { applyFocusVisiblePolyfill } from './focus/index';
|
4
|
-
import {
|
4
|
+
import { dispatchGroupperMoveFocusEvent, dispatchMoverMoveFocusEvent, MoverMoveFocusEventName, MoverMoveFocusEvent, MoverKeys, GroupperMoveFocusEventName, GroupperMoveFocusEvent, GroupperMoveFocusActions, MoverMemorizedElementEventName, MoverMemorizedElementEvent, TabsterMoveFocusEventName, TabsterMoveFocusEvent } from 'tabster';
|
5
5
|
export { KEYBORG_FOCUSIN } from 'keyborg';
|
6
6
|
// WARNING! ATTENTION! Tabster.Types was exported from here by mistake. To avoid breaking changes,
|
7
7
|
// we are putting a snapshot of Tabster.Types@6.0.1 and marking the entire export as deprecated.
|
@@ -12,11 +12,7 @@ dispatchMoverMoveFocusEvent };
|
|
12
12
|
/**
|
13
13
|
* For all exports below, we don't do wildcard exports to keep Tabster API flexible. We export only required
|
14
14
|
* parts when they are needed.
|
15
|
-
*/ export
|
16
|
-
export
|
17
|
-
export
|
18
|
-
export
|
19
|
-
export const GroupperMoveFocusEvent = Events.GroupperMoveFocusEvent;
|
20
|
-
export const GroupperMoveFocusActions = Types.GroupperMoveFocusActions;
|
21
|
-
export const MoverMemorizedElementEventName = Events.MoverMemorizedElementEventName;
|
22
|
-
export const MoverMemorizedElementEvent = Events.MoverMemorizedElementEvent;
|
15
|
+
*/ export { MoverMoveFocusEventName, MoverMoveFocusEvent, MoverKeys };
|
16
|
+
export { GroupperMoveFocusEventName, GroupperMoveFocusEvent, GroupperMoveFocusActions };
|
17
|
+
export { MoverMemorizedElementEventName, MoverMemorizedElementEvent };
|
18
|
+
export { TabsterMoveFocusEventName, TabsterMoveFocusEvent };
|
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 useSetKeyboardNavigation,\n useFocusedElementChange,\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
|
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 useSetKeyboardNavigation,\n useFocusedElementChange,\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 {\n type Types,\n type EventsTypes,\n dispatchGroupperMoveFocusEvent,\n dispatchMoverMoveFocusEvent,\n MoverMoveFocusEventName,\n MoverMoveFocusEvent,\n MoverKeys,\n GroupperMoveFocusEventName,\n GroupperMoveFocusEvent,\n GroupperMoveFocusActions,\n MoverMemorizedElementEventName,\n MoverMemorizedElementEvent,\n TabsterMoveFocusEventName,\n TabsterMoveFocusEvent,\n} from 'tabster';\n\nexport type TabsterDOMAttribute = Types.TabsterDOMAttribute;\n\nexport type { KeyborgFocusInEvent } from 'keyborg';\nexport { KEYBORG_FOCUSIN } from 'keyborg';\n\n// WARNING! ATTENTION! Tabster.Types was exported from here by mistake. To avoid breaking changes,\n// we are putting a snapshot of Tabster.Types@6.0.1 and marking the entire export as deprecated.\nimport * as TabsterTypes6_0_1_DoNotUse from './tabster-types-6.0.1-do-not-use';\nexport {\n /** @deprecated (Do not use! Exposed by mistake and will be removed in the next major version.) */\n TabsterTypes6_0_1_DoNotUse as TabsterTypes,\n /** @deprecated Use element.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape })) */\n // eslint-disable-next-line deprecation/deprecation\n dispatchGroupperMoveFocusEvent,\n /** @deprecated Use element.dispatchEvent(new MoverMoveFocusEvent({ key: MoverKeys.ArrowDown })) */\n // eslint-disable-next-line deprecation/deprecation\n dispatchMoverMoveFocusEvent,\n};\n\n/**\n * For all exports below, we don't do wildcard exports to keep Tabster API flexible. We export only required\n * parts when they are needed.\n */\n\nexport { MoverMoveFocusEventName, MoverMoveFocusEvent, MoverKeys };\nexport type MoverMoveFocusEventDetail = EventsTypes.MoverMoveFocusEventDetail;\n\nexport { GroupperMoveFocusEventName, GroupperMoveFocusEvent, GroupperMoveFocusActions };\nexport type GroupperMoveFocusEventDetail = EventsTypes.GroupperMoveFocusEventDetail;\n\nexport { MoverMemorizedElementEventName, MoverMemorizedElementEvent };\nexport type MoverMemorizedElementEventDetail = EventsTypes.MoverMemorizedElementEventDetail;\n\nexport { TabsterMoveFocusEventName, TabsterMoveFocusEvent };\nexport type TabsterMoveFocusEventDetail = EventsTypes.TabsterMoveFocusEventDetail;\n"],"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useModalAttributes","useTabsterAttributes","useObservedElement","useFocusObserved","useMergedTabsterAttributes_unstable","useRestoreFocusSource","useRestoreFocusTarget","useUncontrolledFocus","useOnKeyboardNavigationChange","useSetKeyboardNavigation","useFocusedElementChange","createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill","dispatchGroupperMoveFocusEvent","dispatchMoverMoveFocusEvent","MoverMoveFocusEventName","MoverMoveFocusEvent","MoverKeys","GroupperMoveFocusEventName","GroupperMoveFocusEvent","GroupperMoveFocusActions","MoverMemorizedElementEventName","MoverMemorizedElementEvent","TabsterMoveFocusEventName","TabsterMoveFocusEvent","KEYBORG_FOCUSIN","TabsterTypes6_0_1_DoNotUse","TabsterTypes"],"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,EAC7BC,wBAAwB,EACxBC,uBAAuB,QAClB,gBAAgB;AAOvB,SAASC,+BAA+B,EAAEC,uBAAuB,QAAQ,gBAAgB;AASzF,SAASC,yBAAyB,QAAQ,gBAAgB;AAC1D,SAGEC,8BAA8B,EAC9BC,2BAA2B,EAC3BC,uBAAuB,EACvBC,mBAAmB,EACnBC,SAAS,EACTC,0BAA0B,EAC1BC,sBAAsB,EACtBC,wBAAwB,EACxBC,8BAA8B,EAC9BC,0BAA0B,EAC1BC,yBAAyB,EACzBC,qBAAqB,QAChB,UAAU;AAKjB,SAASC,eAAe,QAAQ,UAAU;AAE1C,kGAAkG;AAClG,gGAAgG;AAChG,YAAYC,gCAAgC,mCAAmC;AAC/E,SACE,iGAAiG,GACjGA,8BAA8BC,YAAY,EAC1C,mHAAmH,GACnH,mDAAmD;AACnDd,8BAA8B,EAC9B,iGAAiG,GACjG,mDAAmD;AACnDC,2BAA2B,GAC3B;AAEF;;;CAGC,GAED,SAASC,uBAAuB,EAAEC,mBAAmB,EAAEC,SAAS,GAAG;AAGnE,SAASC,0BAA0B,EAAEC,sBAAsB,EAAEC,wBAAwB,GAAG;AAGxF,SAASC,8BAA8B,EAAEC,0BAA0B,GAAG;AAGtE,SAASC,yBAAyB,EAAEC,qBAAqB,GAAG"}
|
@@ -35,15 +35,15 @@ const useArrowNavigationGroup = (options = {})=>{
|
|
35
35
|
function axisToMoverDirection(axis) {
|
36
36
|
switch(axis){
|
37
37
|
case 'horizontal':
|
38
|
-
return _tabster.
|
38
|
+
return _tabster.MoverDirections.Horizontal;
|
39
39
|
case 'grid':
|
40
|
-
return _tabster.
|
40
|
+
return _tabster.MoverDirections.Grid;
|
41
41
|
case 'grid-linear':
|
42
|
-
return _tabster.
|
42
|
+
return _tabster.MoverDirections.GridLinear;
|
43
43
|
case 'both':
|
44
|
-
return _tabster.
|
44
|
+
return _tabster.MoverDirections.Both;
|
45
45
|
case 'vertical':
|
46
46
|
default:
|
47
|
-
return _tabster.
|
47
|
+
return _tabster.MoverDirections.Vertical;
|
48
48
|
}
|
49
49
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useArrowNavigationGroup.js"],"sourcesContent":["import {
|
1
|
+
{"version":3,"sources":["useArrowNavigationGroup.js"],"sourcesContent":["import { getMover, MoverDirections } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n/**\n * A hook that returns the necessary tabster attributes to support arrow key navigation\n * @param options - Options to configure keyboard navigation\n */ export const useArrowNavigationGroup = (options = {})=>{\n const { circular, axis, memorizeCurrent = true, tabbable, ignoreDefaultKeydown, // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault } = options;\n const tabster = useTabster();\n if (tabster) {\n getMover(tabster);\n }\n return useTabsterAttributes({\n mover: {\n cyclic: !!circular,\n direction: axisToMoverDirection(axis !== null && axis !== void 0 ? axis : 'vertical'),\n memorizeCurrent,\n tabbable,\n hasDefault: unstable_hasDefault\n },\n ...ignoreDefaultKeydown && {\n focusable: {\n ignoreKeydown: ignoreDefaultKeydown\n }\n }\n });\n};\nfunction axisToMoverDirection(axis) {\n switch(axis){\n case 'horizontal':\n return MoverDirections.Horizontal;\n case 'grid':\n return MoverDirections.Grid;\n case 'grid-linear':\n return MoverDirections.GridLinear;\n case 'both':\n return MoverDirections.Both;\n case 'vertical':\n default:\n return MoverDirections.Vertical;\n }\n}\n"],"names":["useArrowNavigationGroup","options","circular","axis","memorizeCurrent","tabbable","ignoreDefaultKeydown","unstable_hasDefault","tabster","useTabster","getMover","useTabsterAttributes","mover","cyclic","direction","axisToMoverDirection","hasDefault","focusable","ignoreKeydown","MoverDirections","Horizontal","Grid","GridLinear","Both","Vertical"],"mappings":";;;;+BAMiBA;;;eAAAA;;;yBANyB;sCACL;4BACV;AAIhB,MAAMA,0BAA0B,CAACC,UAAU,CAAC,CAAC;IACpD,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,kBAAkB,IAAI,EAAEC,QAAQ,EAAEC,oBAAoB,EAC9EC,mBAAmB,EAAE,GAAGN;IACxB,MAAMO,UAAUC,IAAAA,sBAAU;IAC1B,IAAID,SAAS;QACTE,IAAAA,iBAAQ,EAACF;IACb;IACA,OAAOG,IAAAA,0CAAoB,EAAC;QACxBC,OAAO;YACHC,QAAQ,CAAC,CAACX;YACVY,WAAWC,qBAAqBZ,SAAS,QAAQA,SAAS,KAAK,IAAIA,OAAO;YAC1EC;YACAC;YACAW,YAAYT;QAChB;QACA,GAAGD,wBAAwB;YACvBW,WAAW;gBACPC,eAAeZ;YACnB;QACJ,CAAC;IACL;AACJ;AACA,SAASS,qBAAqBZ,IAAI;IAC9B,OAAOA;QACH,KAAK;YACD,OAAOgB,wBAAe,CAACC,UAAU;QACrC,KAAK;YACD,OAAOD,wBAAe,CAACE,IAAI;QAC/B,KAAK;YACD,OAAOF,wBAAe,CAACG,UAAU;QACrC,KAAK;YACD,OAAOH,wBAAe,CAACI,IAAI;QAC/B,KAAK;QACL;YACI,OAAOJ,wBAAe,CAACK,QAAQ;IACvC;AACJ"}
|
@@ -28,11 +28,11 @@ const useFocusableGroup = (options)=>{
|
|
28
28
|
const getTabbability = (tabBehavior)=>{
|
29
29
|
switch(tabBehavior){
|
30
30
|
case 'unlimited':
|
31
|
-
return _tabster.
|
31
|
+
return _tabster.GroupperTabbabilities.Unlimited;
|
32
32
|
case 'limited':
|
33
|
-
return _tabster.
|
33
|
+
return _tabster.GroupperTabbabilities.Limited;
|
34
34
|
case 'limited-trap-focus':
|
35
|
-
return _tabster.
|
35
|
+
return _tabster.GroupperTabbabilities.LimitedTrapFocus;
|
36
36
|
default:
|
37
37
|
return undefined;
|
38
38
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useFocusableGroup.js"],"sourcesContent":["import {
|
1
|
+
{"version":3,"sources":["useFocusableGroup.js"],"sourcesContent":["import { getGroupper, GroupperTabbabilities } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n/**\n * A hook that returns the necessary tabster attributes to support groupping.\n * @param options - Options to configure keyboard navigation\n */ export const useFocusableGroup = (options)=>{\n const tabster = useTabster();\n if (tabster) {\n getGroupper(tabster);\n }\n return useTabsterAttributes({\n groupper: {\n tabbability: getTabbability(options === null || options === void 0 ? void 0 : options.tabBehavior)\n },\n focusable: {\n ignoreKeydown: options === null || options === void 0 ? void 0 : options.ignoreDefaultKeydown\n }\n });\n};\nconst getTabbability = (tabBehavior)=>{\n switch(tabBehavior){\n case 'unlimited':\n return GroupperTabbabilities.Unlimited;\n case 'limited':\n return GroupperTabbabilities.Limited;\n case 'limited-trap-focus':\n return GroupperTabbabilities.LimitedTrapFocus;\n default:\n return undefined;\n }\n};\n"],"names":["useFocusableGroup","options","tabster","useTabster","getGroupper","useTabsterAttributes","groupper","tabbability","getTabbability","tabBehavior","focusable","ignoreKeydown","ignoreDefaultKeydown","GroupperTabbabilities","Unlimited","Limited","LimitedTrapFocus","undefined"],"mappings":";;;;+BAMiBA;;;eAAAA;;;yBANkC;sCACd;4BACV;AAIhB,MAAMA,oBAAoB,CAACC;IAClC,MAAMC,UAAUC,IAAAA,sBAAU;IAC1B,IAAID,SAAS;QACTE,IAAAA,oBAAW,EAACF;IAChB;IACA,OAAOG,IAAAA,0CAAoB,EAAC;QACxBC,UAAU;YACNC,aAAaC,eAAeP,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQQ,WAAW;QACrG;QACAC,WAAW;YACPC,eAAeV,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQW,oBAAoB;QACjG;IACJ;AACJ;AACA,MAAMJ,iBAAiB,CAACC;IACpB,OAAOA;QACH,KAAK;YACD,OAAOI,8BAAqB,CAACC,SAAS;QAC1C,KAAK;YACD,OAAOD,8BAAqB,CAACE,OAAO;QACxC,KAAK;YACD,OAAOF,8BAAqB,CAACG,gBAAgB;QACjD;YACI,OAAOC;IACf;AACJ"}
|
@@ -12,7 +12,8 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
|
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
13
13
|
const _tabster = require("tabster");
|
14
14
|
const useMergedTabsterAttributes_unstable = (...attributes)=>{
|
15
|
-
|
15
|
+
'use no memo';
|
16
|
+
const stringAttributes = attributes.map((attribute)=>attribute[_tabster.TABSTER_ATTRIBUTE_NAME]).filter(Boolean);
|
16
17
|
return _react.useMemo(()=>{
|
17
18
|
let attribute = stringAttributes[0];
|
18
19
|
attributes.shift();
|
@@ -20,7 +21,7 @@ const useMergedTabsterAttributes_unstable = (...attributes)=>{
|
|
20
21
|
attribute = mergeAttributes(attribute, attr);
|
21
22
|
}
|
22
23
|
return {
|
23
|
-
[_tabster.
|
24
|
+
[_tabster.TABSTER_ATTRIBUTE_NAME]: attribute
|
24
25
|
};
|
25
26
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
26
27
|
}, stringAttributes);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useMergeTabsterAttributes.js"],"sourcesContent":["import * as React from 'react';\nimport {
|
1
|
+
{"version":3,"sources":["useMergeTabsterAttributes.js"],"sourcesContent":["import * as React from 'react';\nimport { TABSTER_ATTRIBUTE_NAME } from 'tabster';\n/**\n * Merges a collection of tabster attributes.\n *\n * ⚠️The attributes passed as arguments to this hook cannot change at runtime.\n * @internal\n * @param attributes - collection of tabster attributes from other react-tabster hooks\n * @returns single merged tabster attribute\n */ export const useMergedTabsterAttributes_unstable = (...attributes)=>{\n 'use no memo';\n const stringAttributes = attributes.map((attribute)=>attribute[TABSTER_ATTRIBUTE_NAME]).filter(Boolean);\n return React.useMemo(()=>{\n let attribute = stringAttributes[0];\n attributes.shift();\n for (const attr of stringAttributes){\n attribute = mergeAttributes(attribute, attr);\n }\n return {\n [TABSTER_ATTRIBUTE_NAME]: attribute\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, stringAttributes);\n};\nfunction mergeAttributes(a, b) {\n if (!b) {\n return a;\n }\n let aParsed = {};\n let bParsed = {};\n if (a) {\n try {\n aParsed = JSON.parse(a);\n // eslint-disable-next-line no-empty\n } catch {}\n }\n if (b) {\n try {\n bParsed = JSON.parse(b);\n // eslint-disable-next-line no-empty\n } catch {}\n }\n return JSON.stringify({\n ...aParsed,\n ...bParsed\n });\n}\n"],"names":["useMergedTabsterAttributes_unstable","attributes","stringAttributes","map","attribute","TABSTER_ATTRIBUTE_NAME","filter","Boolean","React","useMemo","shift","attr","mergeAttributes","a","b","aParsed","bParsed","JSON","parse","stringify"],"mappings":";;;;+BASiBA;;;eAAAA;;;;iEATM;yBACgB;AAQ5B,MAAMA,sCAAsC,CAAC,GAAGC;IACvD;IACA,MAAMC,mBAAmBD,WAAWE,GAAG,CAAC,CAACC,YAAYA,SAAS,CAACC,+BAAsB,CAAC,EAAEC,MAAM,CAACC;IAC/F,OAAOC,OAAMC,OAAO,CAAC;QACjB,IAAIL,YAAYF,gBAAgB,CAAC,EAAE;QACnCD,WAAWS,KAAK;QAChB,KAAK,MAAMC,QAAQT,iBAAiB;YAChCE,YAAYQ,gBAAgBR,WAAWO;QAC3C;QACA,OAAO;YACH,CAACN,+BAAsB,CAAC,EAAED;QAC9B;IACJ,uDAAuD;IACvD,GAAGF;AACP;AACA,SAASU,gBAAgBC,CAAC,EAAEC,CAAC;IACzB,IAAI,CAACA,GAAG;QACJ,OAAOD;IACX;IACA,IAAIE,UAAU,CAAC;IACf,IAAIC,UAAU,CAAC;IACf,IAAIH,GAAG;QACH,IAAI;YACAE,UAAUE,KAAKC,KAAK,CAACL;QACzB,oCAAoC;QACpC,EAAE,OAAO,CAAC;IACd;IACA,IAAIC,GAAG;QACH,IAAI;YACAE,UAAUC,KAAKC,KAAK,CAACJ;QACzB,oCAAoC;QACpC,EAAE,OAAO,CAAC;IACd;IACA,OAAOG,KAAKE,SAAS,CAAC;QAClB,GAAGJ,OAAO;QACV,GAAGC,OAAO;IACd;AACJ"}
|
@@ -23,7 +23,7 @@ const useModalAttributes = (options = {})=>{
|
|
23
23
|
const id = (0, _reactutilities.useId)('modal-', options.id);
|
24
24
|
const modalAttributes = (0, _useTabsterAttributes.useTabsterAttributes)({
|
25
25
|
restorer: {
|
26
|
-
type: _tabster.
|
26
|
+
type: _tabster.RestorerTypes.Source
|
27
27
|
},
|
28
28
|
...trapFocus && {
|
29
29
|
modalizer: {
|
@@ -36,7 +36,7 @@ const useModalAttributes = (options = {})=>{
|
|
36
36
|
});
|
37
37
|
const triggerAttributes = (0, _useTabsterAttributes.useTabsterAttributes)({
|
38
38
|
restorer: {
|
39
|
-
type: _tabster.
|
39
|
+
type: _tabster.RestorerTypes.Target
|
40
40
|
}
|
41
41
|
});
|
42
42
|
return {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useModalAttributes.js"],"sourcesContent":["import { useId } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { getModalizer, getRestorer,
|
1
|
+
{"version":3,"sources":["useModalAttributes.js"],"sourcesContent":["import { useId } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { getModalizer, getRestorer, RestorerTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n/**\n * Applies modal dialog behaviour through DOM attributes\n * Modal element will focus trap and hide other content on the page\n * The trigger element will be focused if focus is lost after the modal element is removed\n *\n * @returns DOM attributes to apply to the modal element and its trigger\n */ export const useModalAttributes = (options = {})=>{\n const { trapFocus, alwaysFocusable, legacyTrapFocus } = options;\n const tabster = useTabster();\n // Initializes the modalizer and restorer APIs\n if (tabster) {\n getModalizer(tabster);\n getRestorer(tabster);\n }\n const id = useId('modal-', options.id);\n const modalAttributes = useTabsterAttributes({\n restorer: {\n type: RestorerTypes.Source\n },\n ...trapFocus && {\n modalizer: {\n id,\n isOthersAccessible: !trapFocus,\n isAlwaysAccessible: alwaysFocusable,\n isTrapped: legacyTrapFocus && trapFocus\n }\n }\n });\n const triggerAttributes = useTabsterAttributes({\n restorer: {\n type: RestorerTypes.Target\n }\n });\n return {\n modalAttributes,\n triggerAttributes\n };\n};\n"],"names":["useModalAttributes","options","trapFocus","alwaysFocusable","legacyTrapFocus","tabster","useTabster","getModalizer","getRestorer","id","useId","modalAttributes","useTabsterAttributes","restorer","type","RestorerTypes","Source","modalizer","isOthersAccessible","isAlwaysAccessible","isTrapped","triggerAttributes","Target"],"mappings":";;;;+BAUiBA;;;eAAAA;;;gCAVK;sCACe;yBACoB;4BAC9B;AAOhB,MAAMA,qBAAqB,CAACC,UAAU,CAAC,CAAC;IAC/C,MAAM,EAAEC,SAAS,EAAEC,eAAe,EAAEC,eAAe,EAAE,GAAGH;IACxD,MAAMI,UAAUC,IAAAA,sBAAU;IAC1B,8CAA8C;IAC9C,IAAID,SAAS;QACTE,IAAAA,qBAAY,EAACF;QACbG,IAAAA,oBAAW,EAACH;IAChB;IACA,MAAMI,KAAKC,IAAAA,qBAAK,EAAC,UAAUT,QAAQQ,EAAE;IACrC,MAAME,kBAAkBC,IAAAA,0CAAoB,EAAC;QACzCC,UAAU;YACNC,MAAMC,sBAAa,CAACC,MAAM;QAC9B;QACA,GAAGd,aAAa;YACZe,WAAW;gBACPR;gBACAS,oBAAoB,CAAChB;gBACrBiB,oBAAoBhB;gBACpBiB,WAAWhB,mBAAmBF;YAClC;QACJ,CAAC;IACL;IACA,MAAMmB,oBAAoBT,IAAAA,0CAAoB,EAAC;QAC3CC,UAAU;YACNC,MAAMC,sBAAa,CAACO,MAAM;QAC9B;IACJ;IACA,OAAO;QACHX;QACAU;IACJ;AACJ"}
|
@@ -26,7 +26,7 @@ function useRestoreFocusTarget() {
|
|
26
26
|
}
|
27
27
|
return (0, _tabster.getTabsterAttribute)({
|
28
28
|
restorer: {
|
29
|
-
type: _tabster.
|
29
|
+
type: _tabster.RestorerTypes.Target
|
30
30
|
}
|
31
31
|
});
|
32
32
|
}
|
@@ -38,7 +38,7 @@ function useRestoreFocusSource() {
|
|
38
38
|
}
|
39
39
|
return (0, _tabster.getTabsterAttribute)({
|
40
40
|
restorer: {
|
41
|
-
type: _tabster.
|
41
|
+
type: _tabster.RestorerTypes.Source
|
42
42
|
}
|
43
43
|
});
|
44
44
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useRestoreFocus.js"],"sourcesContent":["import { getRestorer, getTabsterAttribute,
|
1
|
+
{"version":3,"sources":["useRestoreFocus.js"],"sourcesContent":["import { getRestorer, getTabsterAttribute, RestorerTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n/**\n * Focus will be restored to the most recent target element when it is lost from a source\n * @returns Attribute to apply to the target element where focus is restored\n */ export function useRestoreFocusTarget() {\n const tabster = useTabster();\n // Initializes the restorer API\n if (tabster) {\n getRestorer(tabster);\n }\n return getTabsterAttribute({\n restorer: {\n type: RestorerTypes.Target\n }\n });\n}\n/**\n * Focus will be restored to the most recent target element when it is lost from a source\n * @returns Attribute to apply to the element that might lose focus\n */ export function useRestoreFocusSource() {\n const tabster = useTabster();\n // Initializes the restorer API\n if (tabster) {\n getRestorer(tabster);\n }\n return getTabsterAttribute({\n restorer: {\n type: RestorerTypes.Source\n }\n });\n}\n"],"names":["useRestoreFocusTarget","useRestoreFocusSource","tabster","useTabster","getRestorer","getTabsterAttribute","restorer","type","RestorerTypes","Target","Source"],"mappings":";;;;;;;;;;;IAKoBA,qBAAqB;eAArBA;;IAeAC,qBAAqB;eAArBA;;;yBApB4C;4BACrC;AAIhB,SAASD;IAChB,MAAME,UAAUC,IAAAA,sBAAU;IAC1B,+BAA+B;IAC/B,IAAID,SAAS;QACTE,IAAAA,oBAAW,EAACF;IAChB;IACA,OAAOG,IAAAA,4BAAmB,EAAC;QACvBC,UAAU;YACNC,MAAMC,sBAAa,CAACC,MAAM;QAC9B;IACJ;AACJ;AAIW,SAASR;IAChB,MAAMC,UAAUC,IAAAA,sBAAU;IAC1B,+BAA+B;IAC/B,IAAID,SAAS;QACTE,IAAAA,oBAAW,EAACF;IAChB;IACA,OAAOG,IAAAA,4BAAmB,EAAC;QACvBC,UAAU;YACNC,MAAMC,sBAAa,CAACE,MAAM;QAC9B;IACJ;AACJ"}
|
@@ -18,7 +18,7 @@ const useTabsterAttributes = (props)=>{
|
|
18
18
|
(0, _useTabster.useTabster)();
|
19
19
|
const strAttr = (0, _tabster.getTabsterAttribute)(props, true);
|
20
20
|
return _react.useMemo(()=>({
|
21
|
-
[_tabster.
|
21
|
+
[_tabster.TABSTER_ATTRIBUTE_NAME]: strAttr
|
22
22
|
}), [
|
23
23
|
strAttr
|
24
24
|
]);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useTabsterAttributes.js"],"sourcesContent":["import { getTabsterAttribute,
|
1
|
+
{"version":3,"sources":["useTabsterAttributes.js"],"sourcesContent":["import { getTabsterAttribute, TABSTER_ATTRIBUTE_NAME } from 'tabster';\nimport { useTabster } from './useTabster';\nimport * as React from 'react';\n/**\n * @internal\n * Hook that returns tabster attributes while ensuring tabster exists\n */ export const useTabsterAttributes = (props)=>{\n // A tabster instance is not necessary to generate tabster attributes\n // but calling the hook will ensure that a tabster instance exists internally and avoids consumers doing the same\n useTabster();\n const strAttr = getTabsterAttribute(props, true);\n return React.useMemo(()=>({\n [TABSTER_ATTRIBUTE_NAME]: strAttr\n }), [\n strAttr\n ]);\n};\n"],"names":["useTabsterAttributes","props","useTabster","strAttr","getTabsterAttribute","React","useMemo","TABSTER_ATTRIBUTE_NAME"],"mappings":";;;;+BAMiBA;;;eAAAA;;;;yBAN2C;4BACjC;iEACJ;AAIZ,MAAMA,uBAAuB,CAACC;IACrC,qEAAqE;IACrE,iHAAiH;IACjHC,IAAAA,sBAAU;IACV,MAAMC,UAAUC,IAAAA,4BAAmB,EAACH,OAAO;IAC3C,OAAOI,OAAMC,OAAO,CAAC,IAAK,CAAA;YAClB,CAACC,+BAAsB,CAAC,EAAEJ;QAC9B,CAAA,GAAI;QACJA;KACH;AACL"}
|
package/lib-commonjs/index.js
CHANGED
@@ -82,28 +82,34 @@ _export(exports, {
|
|
82
82
|
return _tabster.dispatchMoverMoveFocusEvent;
|
83
83
|
},
|
84
84
|
MoverMoveFocusEventName: function() {
|
85
|
-
return MoverMoveFocusEventName;
|
85
|
+
return _tabster.MoverMoveFocusEventName;
|
86
86
|
},
|
87
87
|
MoverMoveFocusEvent: function() {
|
88
|
-
return MoverMoveFocusEvent;
|
88
|
+
return _tabster.MoverMoveFocusEvent;
|
89
89
|
},
|
90
90
|
MoverKeys: function() {
|
91
|
-
return MoverKeys;
|
91
|
+
return _tabster.MoverKeys;
|
92
92
|
},
|
93
93
|
GroupperMoveFocusEventName: function() {
|
94
|
-
return GroupperMoveFocusEventName;
|
94
|
+
return _tabster.GroupperMoveFocusEventName;
|
95
95
|
},
|
96
96
|
GroupperMoveFocusEvent: function() {
|
97
|
-
return GroupperMoveFocusEvent;
|
97
|
+
return _tabster.GroupperMoveFocusEvent;
|
98
98
|
},
|
99
99
|
GroupperMoveFocusActions: function() {
|
100
|
-
return GroupperMoveFocusActions;
|
100
|
+
return _tabster.GroupperMoveFocusActions;
|
101
101
|
},
|
102
102
|
MoverMemorizedElementEventName: function() {
|
103
|
-
return MoverMemorizedElementEventName;
|
103
|
+
return _tabster.MoverMemorizedElementEventName;
|
104
104
|
},
|
105
105
|
MoverMemorizedElementEvent: function() {
|
106
|
-
return MoverMemorizedElementEvent;
|
106
|
+
return _tabster.MoverMemorizedElementEvent;
|
107
|
+
},
|
108
|
+
TabsterMoveFocusEventName: function() {
|
109
|
+
return _tabster.TabsterMoveFocusEventName;
|
110
|
+
},
|
111
|
+
TabsterMoveFocusEvent: function() {
|
112
|
+
return _tabster.TabsterMoveFocusEvent;
|
107
113
|
}
|
108
114
|
});
|
109
115
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
@@ -112,11 +118,3 @@ const _index1 = require("./focus/index");
|
|
112
118
|
const _tabster = require("tabster");
|
113
119
|
const _keyborg = require("keyborg");
|
114
120
|
const _tabstertypes601donotuse = /*#__PURE__*/ _interop_require_wildcard._(require("./tabster-types-6.0.1-do-not-use"));
|
115
|
-
const MoverMoveFocusEventName = _tabster.Events.MoverMoveFocusEventName;
|
116
|
-
const MoverMoveFocusEvent = _tabster.Events.MoverMoveFocusEvent;
|
117
|
-
const MoverKeys = _tabster.Types.MoverKeys;
|
118
|
-
const GroupperMoveFocusEventName = _tabster.Events.GroupperMoveFocusEventName;
|
119
|
-
const GroupperMoveFocusEvent = _tabster.Events.GroupperMoveFocusEvent;
|
120
|
-
const GroupperMoveFocusActions = _tabster.Types.GroupperMoveFocusActions;
|
121
|
-
const MoverMemorizedElementEventName = _tabster.Events.MoverMemorizedElementEventName;
|
122
|
-
const MoverMemorizedElementEvent = _tabster.Events.MoverMemorizedElementEvent;
|
@@ -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, useSetKeyboardNavigation, useFocusedElementChange } from './hooks/index';\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\nexport { applyFocusVisiblePolyfill } from './focus/index';\nimport {
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useFocusVisible, useFocusWithin, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes, useObservedElement, useFocusObserved, useMergedTabsterAttributes_unstable, useRestoreFocusSource, useRestoreFocusTarget, useUncontrolledFocus, useOnKeyboardNavigationChange, useSetKeyboardNavigation, useFocusedElementChange } from './hooks/index';\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\nexport { applyFocusVisiblePolyfill } from './focus/index';\nimport { dispatchGroupperMoveFocusEvent, dispatchMoverMoveFocusEvent, MoverMoveFocusEventName, MoverMoveFocusEvent, MoverKeys, GroupperMoveFocusEventName, GroupperMoveFocusEvent, GroupperMoveFocusActions, MoverMemorizedElementEventName, MoverMemorizedElementEvent, TabsterMoveFocusEventName, TabsterMoveFocusEvent } from 'tabster';\nexport { KEYBORG_FOCUSIN } from 'keyborg';\n// WARNING! ATTENTION! Tabster.Types was exported from here by mistake. To avoid breaking changes,\n// we are putting a snapshot of Tabster.Types@6.0.1 and marking the entire export as deprecated.\nimport * as TabsterTypes6_0_1_DoNotUse from './tabster-types-6.0.1-do-not-use';\nexport { /** @deprecated (Do not use! Exposed by mistake and will be removed in the next major version.) */ TabsterTypes6_0_1_DoNotUse as TabsterTypes, /** @deprecated Use element.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape })) */ // eslint-disable-next-line deprecation/deprecation\ndispatchGroupperMoveFocusEvent, /** @deprecated Use element.dispatchEvent(new MoverMoveFocusEvent({ key: MoverKeys.ArrowDown })) */ // eslint-disable-next-line deprecation/deprecation\ndispatchMoverMoveFocusEvent };\n/**\n * For all exports below, we don't do wildcard exports to keep Tabster API flexible. We export only required\n * parts when they are needed.\n */ export { MoverMoveFocusEventName, MoverMoveFocusEvent, MoverKeys };\nexport { GroupperMoveFocusEventName, GroupperMoveFocusEvent, GroupperMoveFocusActions };\nexport { MoverMemorizedElementEventName, MoverMemorizedElementEvent };\nexport { TabsterMoveFocusEventName, TabsterMoveFocusEvent };\n"],"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useModalAttributes","useTabsterAttributes","useObservedElement","useFocusObserved","useMergedTabsterAttributes_unstable","useRestoreFocusSource","useRestoreFocusTarget","useUncontrolledFocus","useOnKeyboardNavigationChange","useSetKeyboardNavigation","useFocusedElementChange","createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill","KEYBORG_FOCUSIN","TabsterTypes","TabsterTypes6_0_1_DoNotUse","dispatchGroupperMoveFocusEvent","dispatchMoverMoveFocusEvent","MoverMoveFocusEventName","MoverMoveFocusEvent","MoverKeys","GroupperMoveFocusEventName","GroupperMoveFocusEvent","GroupperMoveFocusActions","MoverMemorizedElementEventName","MoverMemorizedElementEvent","TabsterMoveFocusEventName","TabsterMoveFocusEvent"],"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;;IAAEC,wBAAwB;eAAxBA,+BAAwB;;IAAEC,uBAAuB;eAAvBA,8BAAuB;;IAChYC,+BAA+B;eAA/BA,uCAA+B;;IAAEC,uBAAuB;eAAvBA,+BAAuB;;IACxDC,yBAAyB;eAAzBA,iCAAyB;;IAEzBC,eAAe;eAAfA,wBAAe;;IAImHC,YAAY;eAA1CC;;IAA4C,mHAAmH,GAC5QC,8BAA8B;eAA9BA,uCAA8B;;IAAE,iGAAiG,GACjIC,2BAA2B;eAA3BA,oCAA2B;;IAIdC,uBAAuB;eAAvBA,gCAAuB;;IAAEC,mBAAmB;eAAnBA,4BAAmB;;IAAEC,SAAS;eAATA,kBAAS;;IAC3DC,0BAA0B;eAA1BA,mCAA0B;;IAAEC,sBAAsB;eAAtBA,+BAAsB;;IAAEC,wBAAwB;eAAxBA,iCAAwB;;IAC5EC,8BAA8B;eAA9BA,uCAA8B;;IAAEC,0BAA0B;eAA1BA,mCAA0B;;IAC1DC,yBAAyB;eAAzBA,kCAAyB;;IAAEC,qBAAqB;eAArBA,8BAAqB;;;;uBAjBwV;wBACxU;yBAEwP;yBACjS;mFAGY"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-tabster",
|
3
|
-
"version": "9.
|
3
|
+
"version": "9.22.1",
|
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.19.0",
|
35
35
|
"@fluentui/react-theme": "^9.1.19",
|
36
|
-
"@fluentui/react-utilities": "^9.18.
|
36
|
+
"@fluentui/react-utilities": "^9.18.11",
|
37
37
|
"@griffel/react": "^1.5.22",
|
38
38
|
"@swc/helpers": "^0.5.1",
|
39
39
|
"keyborg": "^2.6.0",
|
40
|
-
"tabster": "^
|
40
|
+
"tabster": "^8.0.0"
|
41
41
|
},
|
42
42
|
"peerDependencies": {
|
43
43
|
"@types/react": ">=16.14.0 <19.0.0",
|