Export react tabs context (#26552)

* Exported context for react-tabs * API updated, yarn change * Apply suggestions from code review Co-authored-by: Makoto Morimoto <[email protected]> * Remove wrong context export * updated API * components API update --------- Co-authored-by: Makoto Morimoto <[email protected]>
microsoft · Jan 31, 2023 · 8b78517 · 8b78517
1 parent a864688
commit 8b78517
Show file tree

Hide file tree

Showing 13 changed files with 73 additions and 24 deletions.
diff --git a/change/@fluentui-react-components-817ab317-7384-4c3e-acaf-06eb10fa5f76.json b/change/@fluentui-react-components-817ab317-7384-4c3e-acaf-06eb10fa5f76.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: Added context exports for react-tabs",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tabs-0f215c5f-aaf8-4c1d-9283-40dac84261c3.json b/change/@fluentui-react-tabs-0f215c5f-aaf8-4c1d-9283-40dac84261c3.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: Added context exports",
+  "packageName": "@fluentui/react-tabs",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-components/etc/react-components.api.md b/packages/react-components/react-components/etc/react-components.api.md
@@ -503,6 +503,7 @@ import { tabListClassNames } from '@fluentui/react-tabs';
 import { TabListContextValue } from '@fluentui/react-tabs';
 import { TabListContextValues } from '@fluentui/react-tabs';
 import { TabListProps } from '@fluentui/react-tabs';
+import { TabListProvider } from '@fluentui/react-tabs';
 import { TabListSlots } from '@fluentui/react-tabs';
 import { TabListState } from '@fluentui/react-tabs';
 import { TabProps } from '@fluentui/react-tabs';
@@ -720,6 +721,8 @@ import { useSwitch_unstable } from '@fluentui/react-switch';
 import { useSwitchStyles_unstable } from '@fluentui/react-switch';
 import { useTab_unstable } from '@fluentui/react-tabs';
 import { useTabList_unstable } from '@fluentui/react-tabs';
+import { useTabListContext_unstable } from '@fluentui/react-tabs';
+import { useTabListContextValues_unstable } from '@fluentui/react-tabs';
 import { useTabListStyles_unstable } from '@fluentui/react-tabs';
 import { useTabStyles_unstable } from '@fluentui/react-tabs';
 import { useText_unstable } from '@fluentui/react-text';
@@ -1747,6 +1750,8 @@ export { TabListContextValues }
 
 export { TabListProps }
 
+export { TabListProvider }
+
 export { TabListSlots }
 
 export { TabListState }
@@ -2181,6 +2186,10 @@ export { useTab_unstable }
 
 export { useTabList_unstable }
 
+export { useTabListContext_unstable }
+
+export { useTabListContextValues_unstable }
+
 export { useTabListStyles_unstable }
 
 export { useTabStyles_unstable }

diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts
@@ -627,6 +627,9 @@ export {
   renderTabList_unstable,
   TabList,
   tabListClassNames,
+  TabListProvider,
+  useTabListContext_unstable,
+  useTabListContextValues_unstable,
   useTabListStyles_unstable,
   useTabList_unstable,
 } from '@fluentui/react-tabs';

diff --git a/packages/react-components/react-tabs/etc/react-tabs.api.md b/packages/react-components/react-tabs/etc/react-tabs.api.md
@@ -6,7 +6,11 @@
 
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import type { ContextSelector } from '@fluentui/react-context-selector';
+import { FC } from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { Provider } from 'react';
+import { ProviderProps } from 'react';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import { SlotClassNames } from '@fluentui/react-utilities';
@@ -72,6 +76,9 @@ export type TabListProps = ComponentProps<TabListSlots> & {
     vertical?: boolean;
 };
 
+// @public (undocumented)
+export const TabListProvider: Provider<TabListContextValue> & FC<ProviderProps<TabListContextValue>>;
+
 // @public (undocumented)
 export type TabListSlots = {
     root: Slot<'div'>;
@@ -118,6 +125,12 @@ export const useTab_unstable: (props: TabProps, ref: React_2.Ref<HTMLElement>) =
 // @public
 export const useTabList_unstable: (props: TabListProps, ref: React_2.Ref<HTMLElement>) => TabListState;
 
+// @public (undocumented)
+export const useTabListContext_unstable: <T>(selector: ContextSelector<TabListContextValue, T>) => T;
+
+// @public (undocumented)
+export function useTabListContextValues_unstable(state: TabListState): TabListContextValues;
+
 // @public
 export const useTabListStyles_unstable: (state: TabListState) => TabListState;
 

diff --git a/packages/react-components/react-tabs/src/components/Tab/useTab.ts b/packages/react-components/react-tabs/src/components/Tab/useTab.ts
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
 import type { TabProps, TabState } from './Tab.types';
-import { TabListContext } from '../TabList/TabListContext';
-import { useContextSelector } from '@fluentui/react-context-selector';
+import { useTabListContext_unstable } from '../TabList/TabListContext';
 import { SelectTabEvent } from '../TabList/TabList.types';
 
 /**
@@ -17,15 +16,15 @@ import { SelectTabEvent } from '../TabList/TabList.types';
 export const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): TabState => {
   const { content, disabled: tabDisabled = false, icon, value } = props;
 
-  const appearance = useContextSelector(TabListContext, ctx => ctx.appearance);
-  const reserveSelectedTabSpace = useContextSelector(TabListContext, ctx => ctx.reserveSelectedTabSpace);
-  const listDisabled = useContextSelector(TabListContext, ctx => ctx.disabled);
-  const selected = useContextSelector(TabListContext, ctx => ctx.selectedValue === value);
-  const onRegister = useContextSelector(TabListContext, ctx => ctx.onRegister);
-  const onUnregister = useContextSelector(TabListContext, ctx => ctx.onUnregister);
-  const onSelect = useContextSelector(TabListContext, ctx => ctx.onSelect);
-  const size = useContextSelector(TabListContext, ctx => ctx.size);
-  const vertical = useContextSelector(TabListContext, ctx => !!ctx.vertical);
+  const appearance = useTabListContext_unstable(ctx => ctx.appearance);
+  const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);
+  const listDisabled = useTabListContext_unstable(ctx => ctx.disabled);
+  const selected = useTabListContext_unstable(ctx => ctx.selectedValue === value);
+  const onRegister = useTabListContext_unstable(ctx => ctx.onRegister);
+  const onUnregister = useTabListContext_unstable(ctx => ctx.onUnregister);
+  const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);
+  const size = useTabListContext_unstable(ctx => ctx.size);
+  const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);
   const disabled = listDisabled || tabDisabled;
 
   const innerRef = React.useRef<HTMLElement>(null);

diff --git a/packages/react-components/react-tabs/src/components/Tab/useTabAnimatedIndicator.ts b/packages/react-components/react-tabs/src/components/Tab/useTabAnimatedIndicator.ts
@@ -2,8 +2,7 @@ import * as React from 'react';
 import type { TabState, TabValue } from './Tab.types';
 
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import { useContextSelector } from '@fluentui/react-context-selector';
-import { TabListContext } from '../TabList/TabListContext';
+import { useTabListContext_unstable } from '../TabList/TabListContext';
 import { TabRegisterData } from '../TabList/TabList.types';
 import { tokens } from '@fluentui/react-theme';
 
@@ -77,7 +76,7 @@ export const useTabAnimatedIndicatorStyles_unstable = (state: TabState): TabStat
   const activeIndicatorStyles = useActiveIndicatorStyles();
   const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState<TabValue>();
   const [animationValues, setAnimationValues] = React.useState({ offset: 0, scale: 1 });
-  const getRegisteredTabs = useContextSelector(TabListContext, ctx => ctx.getRegisteredTabs);
+  const getRegisteredTabs = useTabListContext_unstable(ctx => ctx.getRegisteredTabs);
 
   React.useEffect(() => {
     if (lastAnimatedFrom) {

diff --git a/packages/react-components/react-tabs/src/components/TabList/TabList.tsx b/packages/react-components/react-tabs/src/components/TabList/TabList.tsx
@@ -4,14 +4,14 @@ import { renderTabList_unstable } from './renderTabList';
 import { useTabListStyles_unstable } from './useTabListStyles';
 import type { TabListProps } from './TabList.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { useTabListContextValues } from './useTabListContextValues';
+import { useTabListContextValues_unstable } from './useTabListContextValues';
 
 /**
  * A tab list provides single selection from a set of tabs.
  */
 export const TabList: ForwardRefComponent<TabListProps> = React.forwardRef((props, ref) => {
   const state = useTabList_unstable(props, ref);
-  const contextValues = useTabListContextValues(state);
+  const contextValues = useTabListContextValues_unstable(state);
 
   useTabListStyles_unstable(state);
   return renderTabList_unstable(state, contextValues);

diff --git a/packages/react-components/react-tabs/src/components/TabList/TabListContext.ts b/packages/react-components/react-tabs/src/components/TabList/TabListContext.ts
@@ -1,9 +1,8 @@
-import { createContext } from '@fluentui/react-context-selector';
-import type { Context } from '@fluentui/react-context-selector';
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+import type { Context, ContextSelector } from '@fluentui/react-context-selector';
 import { TabListContextValue } from './TabList.types';
 
-// eslint-disable-next-line @fluentui/no-context-default-value
-export const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue>({
+const tabListContextDefaultValue: TabListContextValue = {
   appearance: 'transparent',
   reserveSelectedTabSpace: true,
   disabled: false,
@@ -24,4 +23,12 @@ export const TabListContext: Context<TabListContextValue> = createContext<TabLis
   },
   size: 'medium',
   vertical: false,
-});
+};
+
+export const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue | undefined>(
+  undefined,
+) as Context<TabListContextValue>;
+
+export const TabListProvider = TabListContext.Provider;
+export const useTabListContext_unstable = <T>(selector: ContextSelector<TabListContextValue, T>): T =>
+  useContextSelector(TabListContext, (ctx = tabListContextDefaultValue) => selector(ctx));
diff --git a/packages/react-components/react-tabs/src/components/TabList/index.ts b/packages/react-components/react-tabs/src/components/TabList/index.ts
@@ -1,5 +1,7 @@
 export * from './TabList';
 export * from './TabList.types';
+export * from './TabListContext';
 export * from './renderTabList';
 export * from './useTabList';
+export * from './useTabListContextValues';
 export * from './useTabListStyles';
diff --git a/packages/react-components/react-tabs/src/components/TabList/renderTabList.tsx b/packages/react-components/react-tabs/src/components/TabList/renderTabList.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
 import type { TabListState, TabListSlots, TabListContextValues } from './TabList.types';
-import { TabListContext } from './TabListContext';
+import { TabListProvider } from './TabListContext';
 
 /**
  * Render the final JSX of TabList
@@ -11,7 +11,7 @@ export const renderTabList_unstable = (state: TabListState, contextValues: TabLi
 
   return (
     <slots.root {...slotProps.root}>
-      <TabListContext.Provider value={contextValues.tabList}>{state.root.children}</TabListContext.Provider>
+      <TabListProvider value={contextValues.tabList}>{state.root.children}</TabListProvider>
     </slots.root>
   );
 };
diff --git a/packages/react-components/react-tabs/src/components/TabList/useTabListContextValues.tsx b/packages/react-components/react-tabs/src/components/TabList/useTabListContextValues.tsx
@@ -1,6 +1,6 @@
 import { TabListContextValue, TabListContextValues, TabListState } from './TabList.types';
 
-export function useTabListContextValues(state: TabListState): TabListContextValues {
+export function useTabListContextValues_unstable(state: TabListState): TabListContextValues {
   const {
     appearance,
     reserveSelectedTabSpace,

diff --git a/packages/react-components/react-tabs/src/index.ts b/packages/react-components/react-tabs/src/index.ts
@@ -15,7 +15,10 @@ export type {
 export {
   renderTabList_unstable,
   TabList,
+  TabListProvider,
   tabListClassNames,
+  useTabListContext_unstable,
+  useTabListContextValues_unstable,
   useTabListStyles_unstable,
   useTabList_unstable,
 } from './TabList';