`;
-exports[`GanttChart rendering and behavior tests should render callout correctly when a bar is hovered 1`] = `
+exports[`GanttChart rendering and behavior tests should render bars with rounded corners when roundCorners is true 1`] = `
-
-
- Jan 2017
-
-
-
-
-
- Jan 2017
-
-
-
-
-
- Jan 2017
-
-
-
-
-
- Jan 2017
-
-
-
-
-
- Feb 2017
-
-
-
-
-
- Feb 2017
-
-
-
-
-
- Feb 2017
-
-
-
-
-
- Mar 2017
-
-
-
- Mar 2017
+ Apr 2017
- Mar 2017
+ May 2017
- Apr 2017
+ Jun 2017
- Apr 2017
+ Jul 2017
+
+
+
- Apr 2017
+ Job-3
- Apr 2017
+ Job-4
- Apr 2017
+ Job-2
- May 2017
+ Job-1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`GanttChart rendering and behavior tests should render callout correctly when a bar is hovered 1`] = `
+
+
+
+
{renderLegends()}
diff --git a/packages/charts/react-charts/library/src/utilities/utilities.ts b/packages/charts/react-charts/library/src/utilities/utilities.ts
index 8d45777af3551e..0ff89590dc0993 100644
--- a/packages/charts/react-charts/library/src/utilities/utilities.ts
+++ b/packages/charts/react-charts/library/src/utilities/utilities.ts
@@ -514,7 +514,7 @@ export function createDateXAxis(
if (hideTickOverlap) {
const longestLabelWidth = calcMaxLabelWidth(xAxisScale.ticks().map(tickFormat)) + 40;
const [start, end] = xAxisScale.range();
- tickCount = Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth));
+ tickCount = Math.min(Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth)), 10);
}
const xAxis = d3AxisBottom(xAxisScale)
diff --git a/packages/react-components/react-divider/library/src/Divider.ts b/packages/react-components/react-divider/library/src/Divider.ts
index f6efed30ee7f84..bb5bb99622f534 100644
--- a/packages/react-components/react-divider/library/src/Divider.ts
+++ b/packages/react-components/react-divider/library/src/Divider.ts
@@ -1,8 +1,15 @@
-export type { DividerProps, DividerSlots, DividerState } from './components/Divider/index';
+export type {
+ DividerBaseProps,
+ DividerProps,
+ DividerSlots,
+ DividerBaseState,
+ DividerState,
+} from './components/Divider/index';
export {
Divider,
dividerClassNames,
renderDivider_unstable,
useDividerStyles_unstable,
useDivider_unstable,
+ useDividerBase_unstable,
} from './components/Divider/index';
diff --git a/packages/react-components/react-divider/library/src/components/Divider/Divider.types.ts b/packages/react-components/react-divider/library/src/components/Divider/Divider.types.ts
index 885fa485eaba25..56e12b1f516784 100644
--- a/packages/react-components/react-divider/library/src/components/Divider/Divider.types.ts
+++ b/packages/react-components/react-divider/library/src/components/Divider/Divider.types.ts
@@ -43,5 +43,9 @@ export type DividerProps = ComponentProps
> & {
vertical?: boolean;
};
+export type DividerBaseProps = Omit;
+
export type DividerState = ComponentState &
Required>;
+
+export type DividerBaseState = Omit;
diff --git a/packages/react-components/react-divider/library/src/components/Divider/index.ts b/packages/react-components/react-divider/library/src/components/Divider/index.ts
index e680b0c11660fb..b747cdc82b4045 100644
--- a/packages/react-components/react-divider/library/src/components/Divider/index.ts
+++ b/packages/react-components/react-divider/library/src/components/Divider/index.ts
@@ -1,5 +1,6 @@
export { Divider } from './Divider';
-export type { DividerProps, DividerSlots, DividerState } from './Divider.types';
+export type { DividerBaseProps, DividerProps, DividerSlots, DividerBaseState, DividerState } from './Divider.types';
export { renderDivider_unstable } from './renderDivider';
export { useDivider_unstable } from './useDivider';
+export { useDividerBase_unstable } from './useDividerBase';
export { dividerClassNames, useDividerStyles_unstable } from './useDividerStyles.styles';
diff --git a/packages/react-components/react-divider/library/src/components/Divider/useDivider.ts b/packages/react-components/react-divider/library/src/components/Divider/useDivider.ts
index 4d2ad24d7cc427..57dfeb790198a6 100644
--- a/packages/react-components/react-divider/library/src/components/Divider/useDivider.ts
+++ b/packages/react-components/react-divider/library/src/components/Divider/useDivider.ts
@@ -1,6 +1,8 @@
+'use client';
+
import * as React from 'react';
-import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
import type { DividerProps, DividerState } from './Divider.types';
+import { useDividerBase_unstable } from './useDividerBase';
/**
* Returns the props and state required to render the component
@@ -8,41 +10,19 @@ import type { DividerProps, DividerState } from './Divider.types';
* @param ref - User-provided ref to be passed to the Divider component.
*/
export const useDivider_unstable = (props: DividerProps, ref: React.Ref): DividerState => {
- const { alignContent = 'center', appearance = 'default', inset = false, vertical = false, wrapper } = props;
- const dividerId = useId('divider-');
+ const { alignContent = 'center', appearance = 'default', inset = false, vertical = false, ...rest } = props;
+
+ const state = useDividerBase_unstable(rest, ref);
return {
- // Props passed at the top-level
alignContent,
appearance,
inset,
vertical,
-
- // Slots definition
- components: {
- root: 'div',
- wrapper: 'div',
+ ...state,
+ root: {
+ ...state.root,
+ 'aria-orientation': vertical ? 'vertical' : 'horizontal',
},
-
- root: slot.always(
- getIntrinsicElementProps('div', {
- role: 'separator',
- 'aria-orientation': vertical ? 'vertical' : 'horizontal',
- 'aria-labelledby': props.children ? dividerId : undefined,
- ...props,
- // FIXME:
- // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
- // but since it would be a breaking change to fix it, we are casting ref to it's proper type
- ref: ref as React.Ref,
- } as const),
- { elementType: 'div' },
- ),
- wrapper: slot.always(wrapper, {
- defaultProps: {
- id: dividerId,
- children: props.children,
- },
- elementType: 'div',
- }),
};
};
diff --git a/packages/react-components/react-divider/library/src/components/Divider/useDividerBase.ts b/packages/react-components/react-divider/library/src/components/Divider/useDividerBase.ts
new file mode 100644
index 00000000000000..690e7a192d7e96
--- /dev/null
+++ b/packages/react-components/react-divider/library/src/components/Divider/useDividerBase.ts
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
+import type { DividerBaseProps, DividerBaseState } from './Divider.types';
+
+/**
+ * Returns the props and state required to render the component
+ * @param props - User-provided props to the Divider component.
+ * @param ref - User-provided ref to be passed to the Divider component.
+ */
+export const useDividerBase_unstable = (props: DividerBaseProps, ref: React.Ref): DividerBaseState => {
+ const { wrapper } = props;
+ const dividerId = useId('divider-');
+
+ return {
+ // Slots definition
+ components: {
+ root: 'div',
+ wrapper: 'div',
+ },
+ root: slot.always(
+ getIntrinsicElementProps('div', {
+ role: 'separator',
+ // 'aria-orientation': vertical ? 'vertical' : 'horizontal',
+ 'aria-labelledby': props.children ? dividerId : undefined,
+ ...props,
+ // FIXME:
+ // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+ // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+ ref: ref as React.Ref,
+ } as const),
+ { elementType: 'div' },
+ ),
+ wrapper: slot.always(wrapper, {
+ defaultProps: {
+ id: dividerId,
+ children: props.children,
+ },
+ elementType: 'div',
+ }),
+ };
+};
diff --git a/packages/react-components/react-divider/library/src/index.ts b/packages/react-components/react-divider/library/src/index.ts
index 06f68c86265e1e..847fc710322abf 100644
--- a/packages/react-components/react-divider/library/src/index.ts
+++ b/packages/react-components/react-divider/library/src/index.ts
@@ -6,3 +6,7 @@ export {
useDivider_unstable,
} from './Divider';
export type { DividerProps, DividerSlots, DividerState } from './Divider';
+
+// Experimental APIs - will be uncommented in the experimental release branch
+// export { useDividerBase_unstable } from './Divider';
+// export type { DividerBaseProps, DividerBaseState } from './Divider';
diff --git a/packages/react-components/react-tabs/library/src/Tab.ts b/packages/react-components/react-tabs/library/src/Tab.ts
index 214b683707b7a2..76eac059e79eb2 100644
--- a/packages/react-components/react-tabs/library/src/Tab.ts
+++ b/packages/react-components/react-tabs/library/src/Tab.ts
@@ -1,4 +1,12 @@
-export type { TabInternalSlots, TabProps, TabSlots, TabState, TabValue } from './components/Tab/index';
+export type {
+ TabInternalSlots,
+ TabBaseProps,
+ TabProps,
+ TabSlots,
+ TabBaseState,
+ TabState,
+ TabValue,
+} from './components/Tab/index';
export {
Tab,
renderTab_unstable,
@@ -10,4 +18,5 @@ export {
useTabIndicatorStyles_unstable,
useTabStyles_unstable,
useTab_unstable,
+ useTabBase_unstable,
} from './components/Tab/index';
diff --git a/packages/react-components/react-tabs/library/src/TabList.ts b/packages/react-components/react-tabs/library/src/TabList.ts
index cb1d1108f41ee0..fd53e5c384ba17 100644
--- a/packages/react-components/react-tabs/library/src/TabList.ts
+++ b/packages/react-components/react-tabs/library/src/TabList.ts
@@ -5,8 +5,10 @@ export type {
SelectTabEventHandler,
TabListContextValue,
TabListContextValues,
+ TabListBaseProps,
TabListProps,
TabListSlots,
+ TabListBaseState,
TabListState,
TabRegisterData,
} from './components/TabList/index';
@@ -20,4 +22,5 @@ export {
useTabListContext_unstable,
useTabListStyles_unstable,
useTabList_unstable,
+ useTabListBase_unstable,
} from './components/TabList/index';
diff --git a/packages/react-components/react-tabs/library/src/components/Tab/Tab.types.ts b/packages/react-components/react-tabs/library/src/components/Tab/Tab.types.ts
index fb17d970780f05..173bc63904f5cb 100644
--- a/packages/react-components/react-tabs/library/src/components/Tab/Tab.types.ts
+++ b/packages/react-components/react-tabs/library/src/components/Tab/Tab.types.ts
@@ -43,6 +43,8 @@ export type TabProps = Omit>, 'content' | 'valu
value: TabValue;
};
+export type TabBaseProps = Omit;
+
/**
* State used in rendering Tab
*/
@@ -78,3 +80,5 @@ export type TabState = ComponentState &
*/
vertical: boolean;
};
+
+export type TabBaseState = Omit;
diff --git a/packages/react-components/react-tabs/library/src/components/Tab/index.ts b/packages/react-components/react-tabs/library/src/components/Tab/index.ts
index 19ae875dd40d9d..eb0ec6b763e1d3 100644
--- a/packages/react-components/react-tabs/library/src/components/Tab/index.ts
+++ b/packages/react-components/react-tabs/library/src/components/Tab/index.ts
@@ -1,7 +1,8 @@
export { Tab } from './Tab';
-export type { TabInternalSlots, TabProps, TabSlots, TabState, TabValue } from './Tab.types';
+export type { TabInternalSlots, TabBaseProps, TabProps, TabSlots, TabBaseState, TabState, TabValue } from './Tab.types';
export { renderTab_unstable } from './renderTab';
export { useTab_unstable } from './useTab';
+export { useTabBase_unstable } from './useTabBase';
export {
tabClassNames,
tabReservedSpaceClassNames,
diff --git a/packages/react-components/react-tabs/library/src/components/Tab/useTab.ts b/packages/react-components/react-tabs/library/src/components/Tab/useTab.ts
index 084c316f0fec0d..bb7ea8336a99b1 100644
--- a/packages/react-components/react-tabs/library/src/components/Tab/useTab.ts
+++ b/packages/react-components/react-tabs/library/src/components/Tab/useTab.ts
@@ -1,18 +1,10 @@
'use client';
import * as React from 'react';
-import { useTabsterAttributes } from '@fluentui/react-tabster';
-import {
- getIntrinsicElementProps,
- mergeCallbacks,
- useEventCallback,
- useMergedRefs,
- slot,
- omit,
-} from '@fluentui/react-utilities';
+import { omit, slot } from '@fluentui/react-utilities';
import type { TabProps, TabState } from './Tab.types';
-import { useTabListContext_unstable } from '../TabList/TabListContext';
-import { SelectTabEvent } from '../TabList/TabList.types';
+import { useTabListContext_unstable } from '../TabList';
+import { useTabBase_unstable } from './useTabBase';
/**
* Create the state required to render Tab.
@@ -24,82 +16,27 @@ import { SelectTabEvent } from '../TabList/TabList.types';
* @param ref - reference to root HTMLElement of Tab
*/
export const useTab_unstable = (props: TabProps, ref: React.Ref): TabState => {
- const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value } = props;
+ const { content } = props;
+
+ const state = useTabBase_unstable(props, ref);
const appearance = useTabListContext_unstable(ctx => ctx.appearance);
const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);
- const selectTabOnFocus = useTabListContext_unstable(ctx => ctx.selectTabOnFocus);
- 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(null);
- const onSelectCallback = (event: SelectTabEvent) => onSelect(event, { value });
- const onTabClick = useEventCallback(mergeCallbacks(onClick, onSelectCallback));
- const onTabFocus = useEventCallback(mergeCallbacks(onFocus, onSelectCallback));
-
- const focusProps = useTabsterAttributes({
- focusable: { isDefault: selected },
- });
+ const size = useTabListContext_unstable(ctx => ctx.size ?? 'medium');
- React.useEffect(() => {
- onRegister({
- value,
- ref: innerRef,
- });
-
- return () => {
- onUnregister({ value, ref: innerRef });
- };
- }, [onRegister, onUnregister, innerRef, value]);
-
- const iconSlot = slot.optional(icon, { elementType: 'span' });
- const contentSlot = slot.always(content, {
- defaultProps: { children: props.children },
- elementType: 'span',
- });
const contentReservedSpace: typeof content =
content && typeof content === 'object' ? omit(content, ['ref' as keyof typeof content]) : content;
- const iconOnly = Boolean(iconSlot?.children && !contentSlot.children);
+
return {
- components: { root: 'button', icon: 'span', content: 'span', contentReservedSpace: 'span' },
- root: slot.always(
- getIntrinsicElementProps('button', {
- // FIXME:
- // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`
- // but since it would be a breaking change to fix it, we are casting ref to it's proper type
- ref: useMergedRefs(ref, innerRef) as React.Ref,
- role: 'tab',
- type: 'button',
- // aria-selected undefined indicates it is not selectable
- // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected
- 'aria-selected': disabled ? undefined : (`${selected}` as 'true' | 'false'),
- ...focusProps,
- ...props,
- disabled,
- onClick: onTabClick,
- onFocus: selectTabOnFocus ? onTabFocus : onFocus,
- }),
- { elementType: 'button' },
- ) as TabState['root'],
- icon: iconSlot,
- iconOnly,
- content: contentSlot,
+ ...state,
+ // eslint-disable-next-line @typescript-eslint/no-deprecated
+ components: { ...state.components, contentReservedSpace: 'span' },
contentReservedSpace: slot.optional(contentReservedSpace, {
- renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,
+ renderByDefault: !state.selected && !state.iconOnly && reserveSelectedTabSpace,
defaultProps: { children: props.children },
elementType: 'span',
}),
appearance,
- disabled,
- selected,
size,
- value,
- vertical,
};
};
diff --git a/packages/react-components/react-tabs/library/src/components/Tab/useTabBase.ts b/packages/react-components/react-tabs/library/src/components/Tab/useTabBase.ts
new file mode 100644
index 00000000000000..49eaee980a5f81
--- /dev/null
+++ b/packages/react-components/react-tabs/library/src/components/Tab/useTabBase.ts
@@ -0,0 +1,92 @@
+'use client';
+
+import * as React from 'react';
+import { useTabsterAttributes } from '@fluentui/react-tabster';
+import {
+ getIntrinsicElementProps,
+ mergeCallbacks,
+ useEventCallback,
+ useMergedRefs,
+ slot,
+} from '@fluentui/react-utilities';
+import type { TabBaseProps, TabBaseState } from './Tab.types';
+import { useTabListContext_unstable } from '../TabList';
+import type { SelectTabEvent } from '../TabList';
+
+/**
+ * Create the state required to render Tab.
+ *
+ * The returned state can be modified with hooks such as useTabStyles_unstable,
+ * before being passed to renderTab_unstable.
+ *
+ * @param props - props from this instance of Tab
+ * @param ref - reference to root HTMLElement of Tab
+ */
+export const useTabBase_unstable = (props: TabBaseProps, ref: React.Ref): TabBaseState => {
+ const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value } = props;
+
+ const selectTabOnFocus = useTabListContext_unstable(ctx => ctx.selectTabOnFocus);
+ 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 vertical = useTabListContext_unstable(ctx => !!ctx.vertical);
+ const disabled = listDisabled || tabDisabled;
+
+ const innerRef = React.useRef(null);
+ const onSelectCallback = (event: SelectTabEvent) => onSelect(event, { value });
+ const onTabClick = useEventCallback(mergeCallbacks(onClick, onSelectCallback));
+ const onTabFocus = useEventCallback(mergeCallbacks(onFocus, onSelectCallback));
+
+ const focusProps = useTabsterAttributes({
+ focusable: { isDefault: selected },
+ });
+
+ React.useEffect(() => {
+ onRegister({
+ value,
+ ref: innerRef,
+ });
+
+ return () => {
+ onUnregister({ value, ref: innerRef });
+ };
+ }, [onRegister, onUnregister, innerRef, value]);
+
+ const iconSlot = slot.optional(icon, { elementType: 'span' });
+ const contentSlot = slot.always(content, {
+ defaultProps: { children: props.children },
+ elementType: 'span',
+ });
+ const iconOnly = Boolean(iconSlot?.children && !contentSlot.children);
+ return {
+ components: { root: 'button', icon: 'span', content: 'span', contentReservedSpace: 'span' },
+ root: slot.always(
+ getIntrinsicElementProps('button', {
+ // FIXME:
+ // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`
+ // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+ ref: useMergedRefs(ref, innerRef) as React.Ref,
+ role: 'tab',
+ type: 'button',
+ // aria-selected undefined indicates it is not selectable
+ // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected
+ 'aria-selected': disabled ? undefined : (`${selected}` as 'true' | 'false'),
+ ...focusProps,
+ ...props,
+ disabled,
+ onClick: onTabClick,
+ onFocus: selectTabOnFocus ? onTabFocus : onFocus,
+ }),
+ { elementType: 'button' },
+ ) as TabBaseState['root'],
+ icon: iconSlot,
+ iconOnly,
+ content: contentSlot,
+ disabled,
+ selected,
+ value,
+ vertical,
+ };
+};
diff --git a/packages/react-components/react-tabs/library/src/components/TabList/TabList.types.ts b/packages/react-components/react-tabs/library/src/components/TabList/TabList.types.ts
index ad564f805588be..c6611f4aaba25c 100644
--- a/packages/react-components/react-tabs/library/src/components/TabList/TabList.types.ts
+++ b/packages/react-components/react-tabs/library/src/components/TabList/TabList.types.ts
@@ -102,6 +102,8 @@ export type TabListProps = ComponentProps & {
vertical?: boolean;
};
+export type TabListBaseProps = Omit;
+
export type TabListContextValue = Pick<
TabListProps,
'onTabSelect' | 'selectTabOnFocus' | 'selectedValue' | 'reserveSelectedTabSpace'
@@ -140,3 +142,5 @@ export type TabListContextValues = {
* State used in rendering TabList.
*/
export type TabListState = ComponentState> & TabListContextValue;
+
+export type TabListBaseState = Omit;
diff --git a/packages/react-components/react-tabs/library/src/components/TabList/index.ts b/packages/react-components/react-tabs/library/src/components/TabList/index.ts
index 7b8128b2f0802b..7e89f9f4b3619e 100644
--- a/packages/react-components/react-tabs/library/src/components/TabList/index.ts
+++ b/packages/react-components/react-tabs/library/src/components/TabList/index.ts
@@ -6,13 +6,16 @@ export type {
SelectTabEventHandler,
TabListContextValue,
TabListContextValues,
+ TabListBaseProps,
TabListProps,
TabListSlots,
+ TabListBaseState,
TabListState,
TabRegisterData,
} from './TabList.types';
export { TabListContext, TabListProvider, useTabListContext_unstable } from './TabListContext';
export { renderTabList_unstable } from './renderTabList';
export { useTabList_unstable } from './useTabList';
+export { useTabListBase_unstable } from './useTabListBase';
export { useTabListContextValues_unstable } from './useTabListContextValues';
export { tabListClassNames, useTabListStyles_unstable } from './useTabListStyles.styles';
diff --git a/packages/react-components/react-tabs/library/src/components/TabList/useTabList.ts b/packages/react-components/react-tabs/library/src/components/TabList/useTabList.ts
index 893dc483eadbd2..2417936e21a985 100644
--- a/packages/react-components/react-tabs/library/src/components/TabList/useTabList.ts
+++ b/packages/react-components/react-tabs/library/src/components/TabList/useTabList.ts
@@ -1,16 +1,8 @@
'use client';
import * as React from 'react';
-import { useArrowNavigationGroup } from '@fluentui/react-tabster';
-import {
- getIntrinsicElementProps,
- useControllableState,
- useEventCallback,
- useMergedRefs,
- slot,
-} from '@fluentui/react-utilities';
-import type { TabRegisterData, SelectTabData, SelectTabEvent, TabListProps, TabListState } from './TabList.types';
-import { TabValue } from '../Tab/Tab.types';
+import type { TabListProps, TabListState } from './TabList.types';
+import { useTabListBase_unstable } from './useTabListBase';
/**
* Create the state required to render TabList.
@@ -22,108 +14,13 @@ import { TabValue } from '../Tab/Tab.types';
* @param ref - reference to root HTMLElement of TabList
*/
export const useTabList_unstable = (props: TabListProps, ref: React.Ref): TabListState => {
- const {
- appearance = 'transparent',
- reserveSelectedTabSpace = true,
- disabled = false,
- onTabSelect,
- selectTabOnFocus = false,
- size = 'medium',
- vertical = false,
- } = props;
-
- const innerRef = React.useRef(null);
-
- const focusAttributes = useArrowNavigationGroup({
- circular: true,
- axis: vertical ? 'vertical' : 'horizontal',
- memorizeCurrent: false,
- // eslint-disable-next-line @typescript-eslint/naming-convention
- unstable_hasDefault: true,
- });
-
- const [selectedValue, setSelectedValue] = useControllableState({
- state: props.selectedValue,
- defaultState: props.defaultSelectedValue,
- initialState: undefined,
- });
-
- // considered usePrevious, but it is sensitive to re-renders
- // this could cause the previous to move to current in the case where the tab list re-renders.
- // these refs avoid getRegisteredTabs changing when selectedValue changes and causing
- // renders for tabs that have not changed.
- const currentSelectedValue = React.useRef(undefined);
- const previousSelectedValue = React.useRef(undefined);
-
- React.useEffect(() => {
- previousSelectedValue.current = currentSelectedValue.current;
- currentSelectedValue.current = selectedValue;
- }, [selectedValue]);
-
- const onSelect = useEventCallback((event: SelectTabEvent, data: SelectTabData) => {
- setSelectedValue(data.value);
- onTabSelect?.(event, data);
- });
-
- const registeredTabs = React.useRef>({});
-
- const onRegister = useEventCallback((data: TabRegisterData) => {
- const key = JSON.stringify(data.value);
-
- if (!key && process.env.NODE_ENV !== 'production') {
- // eslint-disable-next-line no-console
- console.error(
- [
- `[@fluentui/react-tabs] The value "${data.value}" cannot be serialized to JSON string.`,
- 'Tab component requires serializable values.',
- 'Please provide a primitive value (string, number, boolean),',
- `or a plain object/array that doesn't contain functions, symbols, or circular references.`,
- ].join(' '),
- );
- }
-
- registeredTabs.current[key] = data;
- });
-
- const onUnregister = useEventCallback((data: TabRegisterData) => {
- delete registeredTabs.current[JSON.stringify(data.value)];
- });
-
- const getRegisteredTabs = React.useCallback(() => {
- return {
- selectedValue: currentSelectedValue.current,
- previousSelectedValue: previousSelectedValue.current,
- registeredTabs: registeredTabs.current,
- };
- }, []);
+ const { appearance = 'transparent', reserveSelectedTabSpace = true, size = 'medium' } = props;
+ const state = useTabListBase_unstable(props, ref);
return {
- components: {
- root: 'div',
- },
- root: slot.always(
- getIntrinsicElementProps('div', {
- // FIXME:
- // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
- // but since it would be a breaking change to fix it, we are casting ref to it's proper type
- ref: useMergedRefs(ref, innerRef) as React.Ref,
- role: 'tablist',
- 'aria-orientation': vertical ? 'vertical' : 'horizontal',
- ...focusAttributes,
- ...props,
- } as const),
- { elementType: 'div' },
- ),
+ ...state,
appearance,
reserveSelectedTabSpace,
- disabled,
- selectTabOnFocus,
- selectedValue,
size,
- vertical,
- onRegister,
- onUnregister,
- onSelect,
- getRegisteredTabs,
};
};
diff --git a/packages/react-components/react-tabs/library/src/components/TabList/useTabListBase.test.tsx b/packages/react-components/react-tabs/library/src/components/TabList/useTabListBase.test.tsx
new file mode 100644
index 00000000000000..60b028e1472739
--- /dev/null
+++ b/packages/react-components/react-tabs/library/src/components/TabList/useTabListBase.test.tsx
@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+
+import { useTabListBase_unstable } from './useTabListBase';
+import { renderTabList_unstable } from './renderTabList';
+import { renderTab_unstable, TabState, useTabBase_unstable } from '../Tab';
+import { useTabListContextValues_unstable } from './useTabListContextValues';
+import { mergeClasses } from '@griffel/react';
+import { useTabListContext_unstable } from './TabListContext';
+import { TabListState } from './TabList.types';
+
+describe('useTabListBase', () => {
+ type CustomTabAppearance = 'filled' | 'outline';
+
+ type CustomTabProps = Parameters[0];
+
+ const CustomTab = React.forwardRef((props, ref) => {
+ const state = useTabBase_unstable(props, ref);
+ const appearance = useTabListContext_unstable(ctx => ctx.appearance as CustomTabAppearance);
+
+ state.root.className = mergeClasses(
+ 'tab',
+ `tab--${appearance}`,
+ state.selected && 'tab-selected',
+ state.root.className,
+ );
+
+ return renderTab_unstable(state as TabState);
+ });
+
+ type CustomTabListProps = Parameters[0] & {
+ appearance?: 'filled' | 'outline';
+ };
+
+ const CustomTabList = React.forwardRef(
+ ({ appearance = 'filled', ...props }, ref) => {
+ const state = useTabListBase_unstable(props, ref);
+ Object.assign(state, { appearance });
+ const contextValues = useTabListContextValues_unstable(state as TabListState);
+
+ state.root.className = mergeClasses('tab-list', `tab-list--${appearance}`, state.root.className);
+
+ return renderTabList_unstable(state as TabListState, contextValues);
+ },
+ );
+
+ it('render tabs', () => {
+ const result = render(
+
+ First
+ Second
+ ,
+ );
+
+ expect(result.getByRole('tablist')).toMatchInlineSnapshot(`
+
+
+
+
+ `);
+
+ // Selected the `Second` tab
+ userEvent.click(result.getByRole('tab', { name: 'Second' }));
+
+ // Ensure the `Second` tab is selected
+ expect(result.getByRole('tab', { name: 'Second' })).toHaveAttribute('aria-selected', 'true');
+ expect(result.getByRole('tab', { name: 'First' })).not.toHaveAttribute('aria-selected', 'true');
+ });
+});
diff --git a/packages/react-components/react-tabs/library/src/components/TabList/useTabListBase.ts b/packages/react-components/react-tabs/library/src/components/TabList/useTabListBase.ts
new file mode 100644
index 00000000000000..14110f9f387e18
--- /dev/null
+++ b/packages/react-components/react-tabs/library/src/components/TabList/useTabListBase.ts
@@ -0,0 +1,124 @@
+'use client';
+
+import * as React from 'react';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import {
+ getIntrinsicElementProps,
+ useControllableState,
+ useEventCallback,
+ useMergedRefs,
+ slot,
+} from '@fluentui/react-utilities';
+import type {
+ TabRegisterData,
+ SelectTabData,
+ SelectTabEvent,
+ TabListBaseProps,
+ TabListBaseState,
+} from './TabList.types';
+import type { TabValue } from '../Tab';
+
+/**
+ * Create the state required to render TabList.
+ *
+ * The returned state can be modified with hooks such as useTabListStyles_unstable,
+ * before being passed to renderTabList_unstable.
+ *
+ * @param props - props from this instance of TabList
+ * @param ref - reference to root HTMLElement of TabList
+ */
+export const useTabListBase_unstable = (props: TabListBaseProps, ref: React.Ref): TabListBaseState => {
+ const { disabled = false, onTabSelect, selectTabOnFocus = false, vertical = false } = props;
+
+ const innerRef = React.useRef(null);
+
+ const focusAttributes = useArrowNavigationGroup({
+ circular: true,
+ axis: vertical ? 'vertical' : 'horizontal',
+ memorizeCurrent: false,
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+ unstable_hasDefault: true,
+ });
+
+ const [selectedValue, setSelectedValue] = useControllableState({
+ state: props.selectedValue,
+ defaultState: props.defaultSelectedValue,
+ initialState: undefined,
+ });
+
+ // considered usePrevious, but it is sensitive to re-renders
+ // this could cause the previous to move to current in the case where the tab list re-renders.
+ // these refs avoid getRegisteredTabs changing when selectedValue changes and causing
+ // renders for tabs that have not changed.
+ const currentSelectedValue = React.useRef(undefined);
+ const previousSelectedValue = React.useRef(undefined);
+
+ React.useEffect(() => {
+ previousSelectedValue.current = currentSelectedValue.current;
+ currentSelectedValue.current = selectedValue;
+ }, [selectedValue]);
+
+ const onSelect = useEventCallback((event: SelectTabEvent, data: SelectTabData) => {
+ setSelectedValue(data.value);
+ onTabSelect?.(event, data);
+ });
+
+ const registeredTabs = React.useRef>({});
+
+ const onRegister = useEventCallback((data: TabRegisterData) => {
+ const key = JSON.stringify(data.value);
+
+ if (!key && process.env.NODE_ENV !== 'production') {
+ // eslint-disable-next-line no-console
+ console.error(
+ [
+ `[@fluentui/react-tabs] The value "${data.value}" cannot be serialized to JSON string.`,
+ 'Tab component requires serializable values.',
+ 'Please provide a primitive value (string, number, boolean),',
+ `or a plain object/array that doesn't contain functions, symbols, or circular references.`,
+ ].join(' '),
+ );
+ }
+
+ registeredTabs.current[key] = data;
+ });
+
+ const onUnregister = useEventCallback((data: TabRegisterData) => {
+ delete registeredTabs.current[JSON.stringify(data.value)];
+ });
+
+ const getRegisteredTabs = React.useCallback(() => {
+ return {
+ selectedValue: currentSelectedValue.current,
+ previousSelectedValue: previousSelectedValue.current,
+ registeredTabs: registeredTabs.current,
+ };
+ }, []);
+
+ return {
+ components: {
+ root: 'div',
+ },
+ root: slot.always(
+ getIntrinsicElementProps('div', {
+ // FIXME:
+ // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+ // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+ ref: useMergedRefs(ref, innerRef) as React.Ref,
+ role: 'tablist',
+ 'aria-orientation': vertical ? 'vertical' : 'horizontal',
+ ...focusAttributes,
+ ...props,
+ } as const),
+ { elementType: 'div' },
+ ),
+ disabled,
+ selectTabOnFocus,
+ selectedValue,
+ onRegister,
+ onUnregister,
+ onSelect,
+ getRegisteredTabs,
+ vertical,
+ };
+};
diff --git a/packages/react-components/react-tabs/library/src/index.ts b/packages/react-components/react-tabs/library/src/index.ts
index abf470bf8dcc95..a9d8bf696501d9 100644
--- a/packages/react-components/react-tabs/library/src/index.ts
+++ b/packages/react-components/react-tabs/library/src/index.ts
@@ -33,3 +33,9 @@ export {
useTabListStyles_unstable,
useTabList_unstable,
} from './TabList';
+
+// Experimental APIs - will be uncommented in experimental release
+// export type { TabBaseProps, TabBaseState } from './Tab';
+// export { useTabBase_unstable } from './Tab';
+// export type { TabListBaseProps, TabListBaseState } from './TabList';
+// export { useTabListBase_unstable } from './TabList';
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.AllNegative.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.AllNegative.Example.tsx
index 65aae93d82620d..a61592b2133205 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChart.AllNegative.Example.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChart.AllNegative.Example.tsx
@@ -210,7 +210,6 @@ export class LineChartAllNegativeExample extends React.Component<{}, ILineChartB
yMaxValue={301}
height={this.state.height}
width={this.state.width}
- xAxisTickCount={10}
allowMultipleShapesForPoints={this.state.allowMultipleShapes}
enablePerfOptimization={true}
yAxisTitle={this.state.showAxisTitles ? 'Different categories of mail flow' : undefined}
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx
index b2117963311703..e8b39817dd8bc6 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx
@@ -244,7 +244,6 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt
isCalloutForStack={this.state.selectedCallout === 'MultiCallout'}
height={this.state.height}
width={this.state.width}
- xAxisTickCount={10}
allowMultipleShapesForPoints={this.state.allowMultipleShapes}
enablePerfOptimization={true}
yAxisTitle={this.state.showAxisTitles ? 'Different categories of mail flow' : undefined}
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx
index 8070e211ce0455..e529db1c3c9ca1 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx
@@ -185,9 +185,7 @@ export class LineChartCustomLocaleDateAxisExample extends React.Component<{}, IL
height={this.state.height}
width={this.state.width}
margins={margins}
- xAxisTickCount={10}
allowMultipleShapesForPoints={this.state.allowMultipleShapes}
- rotateXAxisLables={true}
timeFormatLocale={this.state.customLocale}
enablePerfOptimization={true}
/>
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.Negative.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Negative.Example.tsx
index 1b4841647c99f4..5f9c829d458388 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChart.Negative.Example.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChart.Negative.Example.tsx
@@ -210,7 +210,6 @@ export class LineChartNegativeExample extends React.Component<{}, ILineChartBasi
yMaxValue={301}
height={this.state.height}
width={this.state.width}
- xAxisTickCount={10}
allowMultipleShapesForPoints={this.state.allowMultipleShapes}
enablePerfOptimization={true}
yAxisTitle={this.state.showAxisTitles ? 'Different categories of mail flow' : undefined}
diff --git a/packages/react-examples/src/react-charting/PolarChart/PolarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/PolarChart/PolarChart.Basic.Example.tsx
new file mode 100644
index 00000000000000..56015f847b1735
--- /dev/null
+++ b/packages/react-examples/src/react-charting/PolarChart/PolarChart.Basic.Example.tsx
@@ -0,0 +1,118 @@
+import * as React from 'react';
+import { IPolarChartProps, PolarChart } from '@fluentui/react-charting';
+import { Stack, StackItem } from '@fluentui/react';
+
+const data: IPolarChartProps['data'] = [
+ {
+ type: 'areapolar',
+ legend: 'Mike',
+ color: '#8884d8',
+ data: [
+ { r: 120, theta: 'Math' },
+ { r: 98, theta: 'Chinese' },
+ { r: 86, theta: 'English' },
+ { r: 99, theta: 'Geography' },
+ { r: 85, theta: 'Physics' },
+ { r: 65, theta: 'History' },
+ ],
+ },
+ {
+ type: 'areapolar',
+ legend: 'Lily',
+ color: '#82ca9d',
+ data: [
+ { r: 110, theta: 'Math' },
+ { r: 130, theta: 'Chinese' },
+ { r: 130, theta: 'English' },
+ { r: 100, theta: 'Geography' },
+ { r: 90, theta: 'Physics' },
+ { r: 85, theta: 'History' },
+ ],
+ },
+];
+
+interface IPolarChartBasicExampleState {
+ width: number;
+ height: number;
+}
+
+export class PolarChartBasicExample extends React.Component<{}, IPolarChartBasicExampleState> {
+ constructor(props = {}) {
+ super(props);
+
+ this.state = {
+ width: 600,
+ height: 350,
+ };
+ }
+
+ public componentDidMount(): void {
+ const style = document.createElement('style');
+ const focusStylingCSS = `
+ .containerDiv [contentEditable=true]:focus,
+ .containerDiv [tabindex]:focus,
+ .containerDiv area[href]:focus,
+ .containerDiv button:focus,
+ .containerDiv iframe:focus,
+ .containerDiv input:focus,
+ .containerDiv select:focus,
+ .containerDiv textarea:focus {
+ outline: -webkit-focus-ring-color auto 5px;
+ }
+ `;
+ style.appendChild(document.createTextNode(focusStylingCSS));
+ document.head.appendChild(style);
+ }
+
+ public render(): React.ReactNode {
+ return (
+
+ );
+ }
+
+ private _onWidthChange = (e: React.ChangeEvent) => {
+ this.setState({ width: parseInt(e.target.value, 10) });
+ };
+
+ private _onHeightChange = (e: React.ChangeEvent) => {
+ this.setState({ height: parseInt(e.target.value, 10) });
+ };
+}
diff --git a/packages/react-examples/src/react-charting/PolarChart/PolarChart.doc.tsx b/packages/react-examples/src/react-charting/PolarChart/PolarChart.doc.tsx
new file mode 100644
index 00000000000000..43174e01187cbe
--- /dev/null
+++ b/packages/react-examples/src/react-charting/PolarChart/PolarChart.doc.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import { IDocPageProps } from '@fluentui/react/lib/common/DocPage.types';
+
+import { PolarChartBasicExample } from './PolarChart.Basic.Example';
+
+const PolarChartBasicExampleCode =
+ require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/PolarChart/PolarChart.Basic.Example.tsx') as string;
+
+export const PolarChartPageProps: IDocPageProps = {
+ title: 'PolarChart',
+ componentName: 'PolarChart',
+ componentUrl:
+ 'https://github.com/microsoft/fluentui/tree/master/packages/charts/react-charting/src/components/PolarChart',
+ examples: [
+ {
+ title: 'PolarChart basic',
+ code: PolarChartBasicExampleCode,
+ view: ,
+ },
+ ],
+ overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/PolarChart/docs/PolarChartOverview.md'),
+ bestPractices: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/PolarChart/docs/PolarChartBestPractices.md'),
+ dos: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/PolarChart/docs/PolarChartDos.md'),
+ donts: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/PolarChart/docs/PolarChartDonts.md'),
+ isHeaderVisible: true,
+ isFeedbackVisible: true,
+};
diff --git a/packages/react-examples/src/react-charting/PolarChart/PolarChartPage.tsx b/packages/react-examples/src/react-charting/PolarChart/PolarChartPage.tsx
new file mode 100644
index 00000000000000..c5fc3aa330dc63
--- /dev/null
+++ b/packages/react-examples/src/react-charting/PolarChart/PolarChartPage.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+
+import {
+ ComponentPage,
+ ExampleCard,
+ IComponentDemoPageProps,
+ PropertiesTableSet,
+ Markdown,
+} from '@fluentui/react-docsite-components';
+
+import { PolarChartBasicExample } from './PolarChart.Basic.Example';
+import type { JSXElement } from '@fluentui/utilities';
+
+const PolarChartBasicExampleCode =
+ require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/PolarChart/PolarChart.Basic.Example.tsx') as string;
+
+export class PolarChartPage extends React.Component {
+ public render(): JSXElement {
+ return (
+
+
+
+
+
+ }
+ propertiesTables={
+
('!raw-loader?esModule=false!@fluentui/react-charting/src/components/PolarChart/PolarChart.types.ts'),
+ ]}
+ />
+ }
+ isHeaderVisible={this.props.isHeaderVisible}
+ overview={
+
+ {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/PolarChart/docs/PolarChartOverview.md')}
+
+ }
+ bestPractices={
+
+ {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/PolarChart/docs/PolarChartBestPractices.md')}
+
+ }
+ dos={
+
+ {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/PolarChart/docs/PolarChartDos.md')}
+
+ }
+ donts={
+
+ {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/PolarChart/docs/PolarChartDonts.md')}
+
+ }
+ />
+ );
+ }
+}
diff --git a/packages/react-examples/src/react-charting/PolarChart/docs/PolarChartBestPractices.md b/packages/react-examples/src/react-charting/PolarChart/docs/PolarChartBestPractices.md
new file mode 100644
index 00000000000000..e69de29bb2d1d6
diff --git a/packages/react-examples/src/react-charting/PolarChart/docs/PolarChartDonts.md b/packages/react-examples/src/react-charting/PolarChart/docs/PolarChartDonts.md
new file mode 100644
index 00000000000000..e69de29bb2d1d6
diff --git a/packages/react-examples/src/react-charting/PolarChart/docs/PolarChartDos.md b/packages/react-examples/src/react-charting/PolarChart/docs/PolarChartDos.md
new file mode 100644
index 00000000000000..e69de29bb2d1d6
diff --git a/packages/react-examples/src/react-charting/PolarChart/docs/PolarChartOverview.md b/packages/react-examples/src/react-charting/PolarChart/docs/PolarChartOverview.md
new file mode 100644
index 00000000000000..e69de29bb2d1d6
diff --git a/packages/react-examples/src/react-charting/PolarChart/index.stories.tsx b/packages/react-examples/src/react-charting/PolarChart/index.stories.tsx
new file mode 100644
index 00000000000000..8bf0f4b8718a3f
--- /dev/null
+++ b/packages/react-examples/src/react-charting/PolarChart/index.stories.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import { PolarChartBasicExample } from './PolarChart.Basic.Example';
+
+export const Basic = () => ;
+
+export default {
+ title: 'Components/PolarChart',
+};