chore(react-tabster): bump tabster to 8.0.0 to pull the exports refac…

…toring and improve bundle size (#31441)

We've improved how consts and types are exported from Tabster which should improve the bundle sizes.

change/@fluentui-react-tabster-8340f6d3-64d6-49e1-a8f9-04ea4973aa3d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Pulling Tabster 8.0.0 for the tree-shakeability improvements to reduce the bundle size.",
+  "packageName": "@fluentui/react-tabster",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-tabster/etc/react-tabster.api.md

@@ -6,11 +6,19 @@
 
 import { dispatchGroupperMoveFocusEvent } from 'tabster';
 import { dispatchMoverMoveFocusEvent } from 'tabster';
-import { Events } from 'tabster';
+import { EventsTypes } from 'tabster';
 import type { GriffelStyle } from '@griffel/react';
+import { GroupperMoveFocusActions } from 'tabster';
+import { GroupperMoveFocusEvent } from 'tabster';
+import { GroupperMoveFocusEventName } from 'tabster';
 import { KEYBORG_FOCUSIN } from 'keyborg';
 import { KeyborgFocusInEvent } from 'keyborg';
 import { makeResetStyles } from '@griffel/react';
+import { MoverKeys } from 'tabster';
+import { MoverMemorizedElementEvent } from 'tabster';
+import { MoverMemorizedElementEventName } from 'tabster';
+import { MoverMoveFocusEvent } from 'tabster';
+import { MoverMoveFocusEventName } from 'tabster';
 import * as React_2 from 'react';
 import type { RefObject } from 'react';
 import { Types } from 'tabster';
@@ -550,11 +558,7 @@ type GroupperConstructor = (tabster: TabsterCore, element: HTMLElement, props: G
 // @public (undocumented)
 type GroupperMoveFocusAction = GroupperMoveFocusActions_2[keyof GroupperMoveFocusActions_2];
 
-// @public (undocumented)
-export const GroupperMoveFocusActions: {
-    readonly Enter: 1;
-    readonly Escape: 2;
-};
+export { GroupperMoveFocusActions }
 
 // @public (undocumented)
 interface GroupperMoveFocusActions_2 {
@@ -567,19 +571,17 @@ interface GroupperMoveFocusActions_2 {
 // @public (undocumented)
 const GroupperMoveFocusActions_2: GroupperMoveFocusActions_2;
 
-// @public (undocumented)
-export const GroupperMoveFocusEvent: typeof Events.GroupperMoveFocusEvent;
+export { GroupperMoveFocusEvent }
 
 // @public (undocumented)
 type GroupperMoveFocusEvent_2 = CustomEvent<{
     action: GroupperMoveFocusAction;
 } | undefined>;
 
 // @public (undocumented)
-export type GroupperMoveFocusEventDetail = Events.GroupperMoveFocusEventDetail;
+export type GroupperMoveFocusEventDetail = EventsTypes.GroupperMoveFocusEventDetail;
 
-// @public (undocumented)
-export const GroupperMoveFocusEventName: "tabster:groupper:movefocus";
+export { GroupperMoveFocusEventName }
 
 // @public (undocumented)
 const GroupperMoveFocusEventName_2 = "tabster:groupper:movefocus";
@@ -781,17 +783,7 @@ const MoverEventName = "tabster:mover";
 // @public (undocumented)
 type MoverKey = MoverKeys_2[keyof MoverKeys_2];
 
-// @public (undocumented)
-export const MoverKeys: {
-    readonly ArrowUp: 1;
-    readonly ArrowDown: 2;
-    readonly ArrowLeft: 3;
-    readonly ArrowRight: 4;
-    readonly PageUp: 5;
-    readonly PageDown: 6;
-    readonly Home: 7;
-    readonly End: 8;
-};
+export { MoverKeys }
 
 // @public (undocumented)
 interface MoverKeys_2 {
@@ -816,28 +808,24 @@ interface MoverKeys_2 {
 // @public (undocumented)
 const MoverKeys_2: MoverKeys_2;
 
-// @public (undocumented)
-export const MoverMemorizedElementEvent: typeof Events.MoverMemorizedElementEvent;
+export { MoverMemorizedElementEvent }
 
 // @public (undocumented)
-export type MoverMemorizedElementEventDetail = Events.MoverMemorizedElementEventDetail;
+export type MoverMemorizedElementEventDetail = EventsTypes.MoverMemorizedElementEventDetail;
 
-// @public (undocumented)
-export const MoverMemorizedElementEventName: "tabster:mover:memorized-element";
+export { MoverMemorizedElementEventName }
 
-// @public (undocumented)
-export const MoverMoveFocusEvent: typeof Events.MoverMoveFocusEvent;
+export { MoverMoveFocusEvent }
 
 // @public (undocumented)
 type MoverMoveFocusEvent_2 = CustomEvent<{
     key: MoverKey;
 } | undefined>;
 
 // @public (undocumented)
-export type MoverMoveFocusEventDetail = Events.MoverMoveFocusEventDetail;
+export type MoverMoveFocusEventDetail = EventsTypes.MoverMoveFocusEventDetail;
 
-// @public
-export const MoverMoveFocusEventName: "tabster:mover:movefocus";
+export { MoverMoveFocusEventName }
 
 // @public (undocumented)
 const MoverMoveFocusEventName_2 = "tabster:mover:movefocus";

packages/react-components/react-tabster/package.json

@@ -37,7 +37,7 @@
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1",
     "keyborg": "^2.6.0",
-    "tabster": "^7.1.4"
+    "tabster": "^8.0.0"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0 <19.0.0",

packages/react-components/react-tabster/src/hooks/useArrowNavigationGroup.ts

@@ -1,4 +1,4 @@
-import { Types, getMover } from 'tabster';
+import { Types, getMover, MoverDirections } from 'tabster';
 import { useTabsterAttributes } from './useTabsterAttributes';
 import { useTabster } from './useTabster';
 
@@ -74,16 +74,16 @@ export const useArrowNavigationGroup = (options: UseArrowNavigationGroupOptions
 function axisToMoverDirection(axis: UseArrowNavigationGroupOptions['axis']): Types.MoverDirection {
   switch (axis) {
     case 'horizontal':
-      return Types.MoverDirections.Horizontal;
+      return MoverDirections.Horizontal;
     case 'grid':
-      return Types.MoverDirections.Grid;
+      return MoverDirections.Grid;
     case 'grid-linear':
-      return Types.MoverDirections.GridLinear;
+      return MoverDirections.GridLinear;
     case 'both':
-      return Types.MoverDirections.Both;
+      return MoverDirections.Both;
 
     case 'vertical':
     default:
-      return Types.MoverDirections.Vertical;
+      return MoverDirections.Vertical;
   }
 }

packages/react-components/react-tabster/src/hooks/useFocusableGroup.ts

@@ -1,4 +1,4 @@
-import { Types, getGroupper } from 'tabster';
+import { Types, getGroupper, GroupperTabbabilities } from 'tabster';
 import { useTabsterAttributes } from './useTabsterAttributes';
 import { useTabster } from './useTabster';
 
@@ -40,11 +40,11 @@ const getTabbability = (
 ): Types.GroupperTabbability | undefined => {
   switch (tabBehavior) {
     case 'unlimited':
-      return Types.GroupperTabbabilities.Unlimited;
+      return GroupperTabbabilities.Unlimited;
     case 'limited':
-      return Types.GroupperTabbabilities.Limited;
+      return GroupperTabbabilities.Limited;
     case 'limited-trap-focus':
-      return Types.GroupperTabbabilities.LimitedTrapFocus;
+      return GroupperTabbabilities.LimitedTrapFocus;
     default:
       return undefined;
   }

packages/react-components/react-tabster/src/hooks/useMergeTabsterAttributes.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Types } from 'tabster';
+import { Types, TABSTER_ATTRIBUTE_NAME } from 'tabster';
 
 /**
  * Merges a collection of tabster attributes.
@@ -12,9 +12,7 @@ import { Types } from 'tabster';
 export const useMergedTabsterAttributes_unstable: (
   ...attributes: Types.TabsterDOMAttribute[]
 ) => Types.TabsterDOMAttribute = (...attributes) => {
-  const stringAttributes = attributes
-    .map(attribute => attribute[Types.TabsterAttributeName])
-    .filter(Boolean) as string[];
+  const stringAttributes = attributes.map(attribute => attribute[TABSTER_ATTRIBUTE_NAME]).filter(Boolean) as string[];
 
   return React.useMemo(() => {
     let attribute = stringAttributes[0];
@@ -24,7 +22,7 @@ export const useMergedTabsterAttributes_unstable: (
       attribute = mergeAttributes(attribute, attr);
     }
 
-    return { [Types.TabsterAttributeName]: attribute };
+    return { [TABSTER_ATTRIBUTE_NAME]: attribute };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, stringAttributes);
 };

packages/react-components/react-tabster/src/hooks/useModalAttributes.ts

@@ -1,6 +1,6 @@
 import { useId } from '@fluentui/react-utilities';
 import { useTabsterAttributes } from './useTabsterAttributes';
-import { getModalizer, getRestorer, Types as TabsterTypes } from 'tabster';
+import { getModalizer, getRestorer, Types as TabsterTypes, RestorerTypes } from 'tabster';
 import { useTabster } from './useTabster';
 
 export interface UseModalAttributesOptions {
@@ -51,7 +51,7 @@ export const useModalAttributes = (
 
   const id = useId('modal-', options.id);
   const modalAttributes = useTabsterAttributes({
-    restorer: { type: TabsterTypes.RestorerTypes.Source },
+    restorer: { type: RestorerTypes.Source },
     ...(trapFocus && {
       modalizer: {
         id,
@@ -63,7 +63,7 @@ export const useModalAttributes = (
   });
 
   const triggerAttributes = useTabsterAttributes({
-    restorer: { type: TabsterTypes.RestorerTypes.Target },
+    restorer: { type: RestorerTypes.Target },
   });
 
   return { modalAttributes, triggerAttributes };

packages/react-components/react-tabster/src/hooks/useRestoreFocus.ts

@@ -1,4 +1,4 @@
-import { getRestorer, getTabsterAttribute, Types as TabsterTypes } from 'tabster';
+import { getRestorer, getTabsterAttribute, Types as TabsterTypes, RestorerTypes } from 'tabster';
 import { useTabster } from './useTabster';
 
 /**
@@ -12,7 +12,7 @@ export function useRestoreFocusTarget(): TabsterTypes.TabsterDOMAttribute {
     getRestorer(tabster);
   }
 
-  return getTabsterAttribute({ restorer: { type: TabsterTypes.RestorerTypes.Target } });
+  return getTabsterAttribute({ restorer: { type: RestorerTypes.Target } });
 }
 
 /**
@@ -26,5 +26,5 @@ export function useRestoreFocusSource(): TabsterTypes.TabsterDOMAttribute {
     getRestorer(tabster);
   }
 
-  return getTabsterAttribute({ restorer: { type: TabsterTypes.RestorerTypes.Source } });
+  return getTabsterAttribute({ restorer: { type: RestorerTypes.Source } });
 }

packages/react-components/react-tabster/src/hooks/useTabsterAttributes.ts

@@ -1,4 +1,4 @@
-import { getTabsterAttribute, Types as TabsterTypes } from 'tabster';
+import { getTabsterAttribute, Types as TabsterTypes, TABSTER_ATTRIBUTE_NAME } from 'tabster';
 import { useTabster } from './useTabster';
 import * as React from 'react';
 
@@ -15,7 +15,7 @@ export const useTabsterAttributes = (props: TabsterTypes.TabsterAttributeProps):
 
   return React.useMemo(
     () => ({
-      [TabsterTypes.TabsterAttributeName]: strAttr,
+      [TABSTER_ATTRIBUTE_NAME]: strAttr,
     }),
     [strAttr],
   );

packages/react-components/react-tabster/src/index.ts

@@ -33,7 +33,20 @@ export type {
 } from './focus/index';
 
 export { applyFocusVisiblePolyfill } from './focus/index';
-import { Types, Events, dispatchGroupperMoveFocusEvent, dispatchMoverMoveFocusEvent } from 'tabster';
+import {
+  type Types,
+  type EventsTypes,
+  dispatchGroupperMoveFocusEvent,
+  dispatchMoverMoveFocusEvent,
+  MoverMoveFocusEventName,
+  MoverMoveFocusEvent,
+  MoverKeys,
+  GroupperMoveFocusEventName,
+  GroupperMoveFocusEvent,
+  GroupperMoveFocusActions,
+  MoverMemorizedElementEventName,
+  MoverMemorizedElementEvent,
+} from 'tabster';
 
 export type TabsterDOMAttribute = Types.TabsterDOMAttribute;
 
@@ -59,16 +72,11 @@ export {
  * parts when they are needed.
  */
 
-export const MoverMoveFocusEventName = Events.MoverMoveFocusEventName;
-export const MoverMoveFocusEvent: typeof Events.MoverMoveFocusEvent = Events.MoverMoveFocusEvent;
-export type MoverMoveFocusEventDetail = Events.MoverMoveFocusEventDetail;
-export const MoverKeys = Types.MoverKeys;
+export { MoverMoveFocusEventName, MoverMoveFocusEvent, MoverKeys };
+export type MoverMoveFocusEventDetail = EventsTypes.MoverMoveFocusEventDetail;
 
-export const GroupperMoveFocusEventName = Events.GroupperMoveFocusEventName;
-export const GroupperMoveFocusEvent: typeof Events.GroupperMoveFocusEvent = Events.GroupperMoveFocusEvent;
-export type GroupperMoveFocusEventDetail = Events.GroupperMoveFocusEventDetail;
-export const GroupperMoveFocusActions = Types.GroupperMoveFocusActions;
+export { GroupperMoveFocusEventName, GroupperMoveFocusEvent, GroupperMoveFocusActions };
+export type GroupperMoveFocusEventDetail = EventsTypes.GroupperMoveFocusEventDetail;
 
-export const MoverMemorizedElementEventName = Events.MoverMemorizedElementEventName;
-export const MoverMemorizedElementEvent: typeof Events.MoverMemorizedElementEvent = Events.MoverMemorizedElementEvent;
-export type MoverMemorizedElementEventDetail = Events.MoverMemorizedElementEventDetail;
+export { MoverMemorizedElementEventName, MoverMemorizedElementEvent };
+export type MoverMemorizedElementEventDetail = EventsTypes.MoverMemorizedElementEventDetail;

yarn.lock

@@ -22646,10 +22646,10 @@ table@^6.0.4, table@^6.0.7:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
-tabster@^7.1.4:
-  version "7.1.4"
-  resolved "https://registry.yarnpkg.com/tabster/-/tabster-7.1.4.tgz#3a56a0fd17df27f7f579f9b34f2c855683a086e2"
-  integrity sha512-P3DtJ8ub8QCVYPY7Be9/UpqeyBulcFHFbhMswlPooFT/XsC+nMByfADZ+wC5QCdSNlYEGoDgB+EVscln8SrXhg==
+tabster@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/tabster/-/tabster-8.0.0.tgz#a4412ab92643a70ff6c4f20fc82b04602fb63949"
+  integrity sha512-82pqhDwH3uq7hVcy1nOo7lyYgCJcVUPqb30hvoHtX8DQ5pxEtRz9+FqVcW5w7J6kTjNBBu7cwKvuMy9qoeQt1g==
   dependencies:
     keyborg "2.6.0"
     tslib "^2.3.1"