Re-exporting commonly used things from @fluentui/react-tabster and @fluentui/react-utilities in @fluentui/react-components

change/@fluentui-react-components-ea1f05c8-4a94-4a3a-b122-0bdc10f78a9c.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Re-exporting everything from @fluentui/react-tabster and @fluentui/react-utilities in @fluentui/react-components.",
+  "packageName": "@fluentui/react-components",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tabster-29c1cf42-57a9-47e2-8bdc-0c708b3bcbae.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Removing star exports at src/index.ts.",
+  "packageName": "@fluentui/react-tabster",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-utilities-c00d688f-01da-4335-8e5a-00bc2df2a75b.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Removing star exports at src/index.ts",
+  "packageName": "@fluentui/react-utilities",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -74,6 +74,8 @@ import { captionClassName } from '@fluentui/react-text';
 import { captionClassNames } from '@fluentui/react-text';
 import { ColorPaletteTokens } from '@fluentui/react-theme';
 import { ColorTokens } from '@fluentui/react-theme';
+import { ComponentProps } from '@fluentui/react-utilities';
+import { ComponentState } from '@fluentui/react-utilities';
 import { CompoundButton } from '@fluentui/react-button';
 import { compoundButtonClassName } from '@fluentui/react-button';
 import { compoundButtonClassNames } from '@fluentui/react-button';
@@ -85,6 +87,7 @@ import { counterBadgeClassName } from '@fluentui/react-badge';
 import { counterBadgeClassNames } from '@fluentui/react-badge';
 import { CounterBadgeProps } from '@fluentui/react-badge';
 import { CounterBadgeState } from '@fluentui/react-badge';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { createDarkTheme } from '@fluentui/react-theme';
 import { createDOMRenderer } from '@griffel/react';
 import { createHighContrastTheme } from '@fluentui/react-theme';
@@ -110,6 +113,11 @@ import { FluentProviderState } from '@fluentui/react-provider';
 import { FontFamilyTokens } from '@fluentui/react-theme';
 import { FontSizeTokens } from '@fluentui/react-theme';
 import { FontWeightTokens } from '@fluentui/react-theme';
+import { ForwardRefComponent } from '@fluentui/react-utilities';
+import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getNativeProps } from '@fluentui/react-utilities';
+import { getPartitionedNativeProps } from '@fluentui/react-utilities';
+import { getSlots } from '@fluentui/react-utilities';
 import { Headline } from '@fluentui/react-text';
 import { headlineClassName } from '@fluentui/react-text';
 import { headlineClassNames } from '@fluentui/react-text';
@@ -279,6 +287,10 @@ import { renderText_unstable } from '@fluentui/react-text';
 import { renderToggleButton_unstable } from '@fluentui/react-button';
 import { renderTooltip_unstable } from '@fluentui/react-tooltip';
 import { renderToStyleElements } from '@griffel/react';
+import { resetIdsForTests } from '@fluentui/react-utilities';
+import { resolveShorthand } from '@fluentui/react-utilities';
+import { ResolveShorthandFunction } from '@fluentui/react-utilities';
+import { ResolveShorthandOptions } from '@fluentui/react-utilities';
 import { SelectableHandler } from '@fluentui/react-menu';
 import { setVirtualParent } from '@fluentui/react-portal';
 import { ShadowBrandTokens } from '@fluentui/react-theme';
@@ -290,13 +302,15 @@ import { SliderOnChangeData } from '@fluentui/react-slider';
 import { SliderProps } from '@fluentui/react-slider';
 import { SliderSlots } from '@fluentui/react-slider';
 import { SliderState } from '@fluentui/react-slider';
+import { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { SlotPropsRecord } from '@fluentui/react-utilities';
 import { SplitButton } from '@fluentui/react-button';
 import { splitButtonClassName } from '@fluentui/react-button';
 import { splitButtonClassNames } from '@fluentui/react-button';
 import { SplitButtonProps } from '@fluentui/react-button';
 import { SplitButtonSlots } from '@fluentui/react-button';
 import { SplitButtonState } from '@fluentui/react-button';
-import { SSRProvider } from '@fluentui/react-utilities';
 import { StrokeWidthTokens } from '@fluentui/react-theme';
 import { Subheadline } from '@fluentui/react-text';
 import { subheadlineClassName } from '@fluentui/react-text';
@@ -347,6 +361,8 @@ import { useAccordionItemStyles_unstable } from '@fluentui/react-accordion';
 import { useAccordionPanel_unstable } from '@fluentui/react-accordion';
 import { useAccordionPanelStyles_unstable } from '@fluentui/react-accordion';
 import { useAccordionStyles_unstable } from '@fluentui/react-accordion';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { UseArrowNavigationGroupOptions } from '@fluentui/react-tabster';
 import { useAvatar_unstable } from '@fluentui/react-avatar';
 import { useAvatarStyles_unstable } from '@fluentui/react-avatar';
 import { useBadge_unstable } from '@fluentui/react-badge';
@@ -364,8 +380,14 @@ import { useFluent } from '@fluentui/react-provider';
 import { useFluentProvider_unstable } from '@fluentui/react-provider';
 import { useFluentProviderContextValues_unstable } from '@fluentui/react-provider';
 import { useFluentProviderStyles_unstable } from '@fluentui/react-provider';
+import { useFocusableGroup } from '@fluentui/react-tabster';
+import { UseFocusableGroupOptions } from '@fluentui/react-tabster';
+import { useFocusFinders } from '@fluentui/react-tabster';
+import { useId } from '@fluentui/react-utilities';
 import { useImage_unstable } from '@fluentui/react-image';
 import { useImageStyles_unstable } from '@fluentui/react-image';
+import { useIsSSR } from '@fluentui/react-utilities';
+import { useKeyboardNavAttribute } from '@fluentui/react-tabster';
 import { useLink_unstable } from '@fluentui/react-link';
 import { useLinkState_unstable } from '@fluentui/react-link';
 import { useLinkStyles_unstable } from '@fluentui/react-link';
@@ -398,6 +420,9 @@ import { useMenuSplitGroup_unstable } from '@fluentui/react-menu';
 import { useMenuSplitGroupStyles_unstable } from '@fluentui/react-menu';
 import { useMenuTrigger_unstable } from '@fluentui/react-menu';
 import { useMenuTriggerContext_unstable } from '@fluentui/react-menu';
+import { useMergedRefs } from '@fluentui/react-utilities';
+import { useModalAttributes } from '@fluentui/react-tabster';
+import { UseModalAttributesOptions } from '@fluentui/react-tabster';
 import { usePopover_unstable } from '@fluentui/react-popover';
 import { usePopoverContext_unstable } from '@fluentui/react-popover';
 import { usePopoverSurface_unstable } from '@fluentui/react-popover';
@@ -410,6 +435,7 @@ import { useSliderState_unstable } from '@fluentui/react-slider';
 import { useSliderStyles_unstable } from '@fluentui/react-slider';
 import { useSplitButton_unstable } from '@fluentui/react-button';
 import { useSplitButtonStyles_unstable } from '@fluentui/react-button';
+import { useSSRContext } from '@fluentui/react-utilities';
 import { useText_unstable } from '@fluentui/react-text';
 import { useTextStyles_unstable } from '@fluentui/react-text';
 import { useToggleButton_unstable } from '@fluentui/react-button';
@@ -560,6 +586,10 @@ export { ColorPaletteTokens }
 
 export { ColorTokens }
 
+export { ComponentProps }
+
+export { ComponentState }
+
 export { CompoundButton }
 
 export { compoundButtonClassName }
@@ -582,6 +612,8 @@ export { CounterBadgeProps }
 
 export { CounterBadgeState }
 
+export { createCustomFocusIndicatorStyle }
+
 export { createDarkTheme }
 
 export { createDOMRenderer }
@@ -632,6 +664,16 @@ export { FontSizeTokens }
 
 export { FontWeightTokens }
 
+export { ForwardRefComponent }
+
+export { getNativeElementProps }
+
+export { getNativeProps }
+
+export { getPartitionedNativeProps }
+
+export { getSlots }
+
 export { Headline }
 
 export { headlineClassName }
@@ -970,6 +1012,14 @@ export { renderTooltip_unstable }
 
 export { renderToStyleElements }
 
+export { resetIdsForTests }
+
+export { resolveShorthand }
+
+export { ResolveShorthandFunction }
+
+export { ResolveShorthandOptions }
+
 export { SelectableHandler }
 
 export { setVirtualParent }
@@ -992,6 +1042,12 @@ export { SliderSlots }
 
 export { SliderState }
 
+export { Slot }
+
+export { SlotClassNames }
+
+export { SlotPropsRecord }
+
 export { SplitButton }
 
 export { splitButtonClassName }
@@ -1004,8 +1060,6 @@ export { SplitButtonSlots }
 
 export { SplitButtonState }
 
-export { SSRProvider }
-
 export { StrokeWidthTokens }
 
 export { Subheadline }
@@ -1106,6 +1160,10 @@ export { useAccordionPanelStyles_unstable }
 
 export { useAccordionStyles_unstable }
 
+export { useArrowNavigationGroup }
+
+export { UseArrowNavigationGroupOptions }
+
 export { useAvatar_unstable }
 
 export { useAvatarStyles_unstable }
@@ -1140,10 +1198,22 @@ export { useFluentProviderContextValues_unstable }
 
 export { useFluentProviderStyles_unstable }
 
+export { useFocusableGroup }
+
+export { UseFocusableGroupOptions }
+
+export { useFocusFinders }
+
+export { useId }
+
 export { useImage_unstable }
 
 export { useImageStyles_unstable }
 
+export { useIsSSR }
+
+export { useKeyboardNavAttribute }
+
 export { useLink_unstable }
 
 export { useLinkState_unstable }
@@ -1208,6 +1278,12 @@ export { useMenuTrigger_unstable }
 
 export { useMenuTriggerContext_unstable }
 
+export { useMergedRefs }
+
+export { useModalAttributes }
+
+export { UseModalAttributesOptions }
+
 export { usePopover_unstable }
 
 export { usePopoverContext_unstable }
@@ -1232,6 +1308,8 @@ export { useSplitButton_unstable }
 
 export { useSplitButtonStyles_unstable }
 
+export { useSSRContext }
+
 export { useText_unstable }
 
 export { useTextStyles_unstable }

packages/react-components/package.json

@@ -53,6 +53,7 @@
     "@fluentui/react-slider": "9.0.0-beta.10",
     "@fluentui/react-switch": "9.0.0-rc.5",
     "@fluentui/react-tabs": "9.0.0-beta.8",
+    "@fluentui/react-tabster": "9.0.0-rc.5",
     "@fluentui/react-textarea": "9.0.0-alpha.0",
     "@fluentui/react-theme": "9.0.0-rc.4",
     "@fluentui/react-tooltip": "9.0.0-rc.5",

packages/react-components/src/index.ts

@@ -26,6 +26,20 @@ export type {
   FluentProviderSlots,
   FluentProviderState,
 } from '@fluentui/react-provider';
+export {
+  createCustomFocusIndicatorStyle,
+  useArrowNavigationGroup,
+  useFocusableGroup,
+  useFocusFinders,
+  useKeyboardNavAttribute,
+  useModalAttributes,
+} from '@fluentui/react-tabster';
+export type {
+  UseArrowNavigationGroupOptions,
+  UseFocusableGroupOptions,
+  UseModalAttributesOptions,
+} from '@fluentui/react-tabster';
+
 export {
   createDarkTheme,
   createHighContrastTheme,
@@ -55,7 +69,28 @@ export type {
   StrokeWidthTokens,
   Theme,
 } from '@fluentui/react-theme';
-export { SSRProvider } from '@fluentui/react-utilities';
+export {
+  getNativeElementProps,
+  getNativeProps,
+  getPartitionedNativeProps,
+  getSlots,
+  resetIdsForTests,
+  resolveShorthand,
+  useId,
+  useIsSSR,
+  useMergedRefs,
+  useSSRContext,
+} from '@fluentui/react-utilities';
+export type {
+  ComponentProps,
+  ComponentState,
+  ForwardRefComponent,
+  ResolveShorthandFunction,
+  ResolveShorthandOptions,
+  Slot,
+  SlotClassNames,
+  SlotPropsRecord,
+} from '@fluentui/react-utilities';
 
 // Components
 export {

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

@@ -1,7 +1,7 @@
 export * from './useArrowNavigationGroup';
+export * from './useFocusableGroup';
 export * from './useFocusFinders';
-export * from './useModalAttributes';
-export * from './useTabsterAttributes';
 export * from './useFocusIndicatorStyle';
 export * from './useKeyboardNavAttribute';
-export * from './useFocusableGroup';
+export * from './useModalAttributes';
+export * from './useTabsterAttributes';

packages/react-tabster/src/index.ts

@@ -1 +1,18 @@
-export * from './hooks/index';
+export {
+  createCustomFocusIndicatorStyle,
+  createFocusOutlineStyle,
+  useArrowNavigationGroup,
+  useFocusableGroup,
+  useFocusFinders,
+  useKeyboardNavAttribute,
+  useModalAttributes,
+  useTabsterAttributes,
+} from './hooks/index';
+export type {
+  CreateFocusIndicatorStyleRuleOptions,
+  FocusOutlineOffset,
+  FocusOutlineStyleOptions,
+  UseArrowNavigationGroupOptions,
+  UseFocusableGroupOptions,
+  UseModalAttributesOptions,
+} from './hooks/index';

packages/react-utilities/src/hooks/index.ts

@@ -1,8 +1,9 @@
-export * from './useControllableState';
 export * from './useBoolean';
 export * from './useConst';
+export * from './useControllableState';
 export * from './useEventCallback';
 export * from './useFirstMount';
+export * from './useForceUpdate';
 export * from './useId';
 export * from './useIsomorphicLayoutEffect';
 export * from './useMergedEventCallbacks';
@@ -13,4 +14,3 @@ export * from './useOnScrollOutside';
 export * from './usePrevious';
 export * from './useTimeout';
 export * from './useUnmount';
-export * from './useForceUpdate';