chore: migrate to TS 4.7

change/@fluentui-api-docs-7e266cc5-ae8b-46da-b22b-e985218f53b8.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: bump api-extractor-model to support typescript 4.7",
+  "packageName": "@fluentui/api-docs",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-date-time-utilities-4c4aa9e9-90bb-41a0-bf9a-2dfb71e7225d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate to ts 4.7 which wont emit undefined anymore for optional arguments",
+  "packageName": "@fluentui/date-time-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-c7a29270-edda-4443-ac6b-3e6726f93ee6.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate to ts 4.7 which wont emit undefined anymore for optional arguments",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-experiments-86254b1a-bb55-4f56-8958-c6c3ae1e1ae7.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: resolve FloatingSuggestion if conditions to mitigate ts 4.7 always true violation\"",
+  "packageName": "@fluentui/react-experiments",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-migration-v8-v9-88a794f5-92e2-49f3-a5ff-cef44b75db12.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate to ts 4.7 which wont emit undefined anymore for optional arguments",
+  "packageName": "@fluentui/react-migration-v8-v9",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-positioning-51a66b94-7733-4fb6-a73f-7aa47f67f21d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate to ts 4.7 which wont emit undefined anymore for optional arguments",
+  "packageName": "@fluentui/react-positioning",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-shared-contexts-6abfa676-0116-42b0-90ce-1c3b3050084d.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: re-generate api.md",
+  "packageName": "@fluentui/react-shared-contexts",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-tabster-822660c5-1fae-47bd-8a8f-673d210610a5.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate to ts 4.7 which wont emit undefined anymore for optional arguments",
+  "packageName": "@fluentui/react-tabster",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-virtualizer-a2abc531-b693-4972-8dd3-0f6351663f49.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: migrate to ts 4.7 which wont emit undefined anymore for optional arguments",
+  "packageName": "@fluentui/react-virtualizer",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-tokens-6d7634ab-d750-45b2-94f8-71cf02182dae.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix:  cast to String keys interpolated within string literals",
+  "packageName": "@fluentui/tokens",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-utilities-6c590fec-07b4-4e45-855c-5f71bf154b05.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: cast to String keys interpolated within string literals",
+  "packageName": "@fluentui/utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

package.json

@@ -95,9 +95,9 @@
     "@griffel/webpack-loader": "2.1.13",
     "@jest/reporters": "29.5.0",
     "@mdx-js/loader": "1.6.22",
-    "@microsoft/api-extractor": "7.28.7",
-    "@microsoft/api-extractor-model": "7.22.2",
-    "@microsoft/tsdoc": "0.14.2",
+    "@microsoft/api-extractor": "7.31.2",
+    "@microsoft/api-extractor-model": "7.24.2",
+    "@microsoft/tsdoc": "0.14.1",
     "@microsoft/eslint-plugin-sdl": "0.1.9",
     "@microsoft/load-themed-styles": "1.10.26",
     "@microsoft/loader-load-themed-styles": "2.0.17",
@@ -344,7 +344,7 @@
     "tsconfig-paths": "4.1.0",
     "tsconfig-paths-webpack-plugin": "4.0.0",
     "tslib": "2.4.1",
-    "typescript": "4.6.4",
+    "typescript": "4.7.4",
     "vinyl": "2.2.0",
     "vrscreenshotdiff": "0.0.17",
     "webpack": "5.83.1",

packages/api-docs/package.json

@@ -21,7 +21,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@microsoft/api-extractor-model": "7.17.1",
+    "@microsoft/api-extractor-model": "7.24.2",
     "@microsoft/tsdoc": "0.14.1",
     "fs-extra": "^8.1.0"
   }

packages/date-time-utilities/etc/date-time-utilities.api.md

@@ -96,13 +96,13 @@ export const formatMonthDayYear: (date: Date, strings: IDateGridStrings) => stri
 export const formatMonthYear: (date: Date, strings: IDateGridStrings) => string;
 
 // @public
-export const formatTimeString: (date: Date, showSeconds?: boolean | undefined, useHour12?: boolean | undefined) => string;
+export const formatTimeString: (date: Date, showSeconds?: boolean, useHour12?: boolean) => string;
 
 // @public
 export const formatYear: (date: Date) => string;
 
 // @public
-export const getBoundedDateRange: (dateRange: Date[], minDate?: Date | undefined, maxDate?: Date | undefined) => Date[];
+export const getBoundedDateRange: (dateRange: Date[], minDate?: Date, maxDate?: Date) => Date[];
 
 // @public
 export const getDateFromTimeSelection: (useHour12: boolean, dateStartAnchor: Date, selectedTime: string) => Date;

packages/fluentui/react-northstar/src/components/Portal/Portal.tsx

@@ -99,7 +99,7 @@ export const Portal: React.FC<PortalProps> & FluentComponentStaticProps<PortalPr
 
   const renderPortal = (): JSX.Element | undefined => {
     const contentToRender = childrenExist(children) ? children : content;
-    const focusTrapZoneProps = (_.keys(trapFocus).length && trapFocus) || {};
+    const focusTrapZoneProps = typeof trapFocus === 'boolean' ? {} : trapFocus;
     return (
       open && (
         <Ref innerRef={portalRef}>

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

@@ -153,10 +153,10 @@ export const renderBreadcrumbItem_unstable: (state: BreadcrumbItemState) => JSX.
 export const renderBreadcrumbLink_unstable: (state: BreadcrumbLinkState) => JSX.Element;
 
 // @public (undocumented)
-export const truncateBreadcrumbLongName: (content: string, maxLength?: number | undefined) => string;
+export const truncateBreadcrumbLongName: (content: string, maxLength?: number) => string;
 
 // @public (undocumented)
-export const truncateBreadcrumLongTooltip: (content: string, maxLength?: number | undefined) => string;
+export const truncateBreadcrumLongTooltip: (content: string, maxLength?: number) => string;
 
 // @public
 export const useBreadcrumb_unstable: (props: BreadcrumbProps, ref: React_2.Ref<HTMLElement>) => BreadcrumbState;

packages/react-components/react-migration-v8-v9/etc/react-migration-v8-v9.api.md

@@ -63,10 +63,10 @@ export const CompoundButtonShim: React_2.ForwardRefExoticComponent<IButtonProps
 export const createBrandVariants: (palette: IPalette, interpolation?: Interpolation) => BrandVariants;
 
 // @public
-export const createV8Theme: (brandColors: BrandVariants, themeV9: Theme, isDarkTheme?: boolean, themeV8?: Theme_2 | undefined) => Theme_2;
+export const createV8Theme: (brandColors: BrandVariants, themeV9: Theme, isDarkTheme?: boolean, themeV8?: Theme_2) => Theme_2;
 
 // @public
-export const createV9Theme: (themeV8: Theme_2, baseThemeV9?: Theme | undefined) => Theme;
+export const createV9Theme: (themeV8: Theme_2, baseThemeV9?: Theme) => Theme;
 
 // @public
 export const DefaultButtonShim: React_2.ForwardRefExoticComponent<IButtonProps & React_2.RefAttributes<HTMLButtonElement>>;

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

@@ -111,7 +111,7 @@ export type SetVirtualMouseTarget = (event: React_2.MouseEvent | MouseEvent | un
 export function usePositioning(options: UsePositioningOptions): UsePositioningReturn;
 
 // @internal
-export const usePositioningMouseTarget: (initialState?: PositioningVirtualElement | (() => PositioningVirtualElement) | undefined) => readonly [PositioningVirtualElement | undefined, SetVirtualMouseTarget];
+export const usePositioningMouseTarget: (initialState?: PositioningVirtualElement | (() => PositioningVirtualElement)) => readonly [PositioningVirtualElement | undefined, SetVirtualMouseTarget];
 
 // (No @packageDocumentation comment for this package)
 

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

@@ -331,7 +331,7 @@ export const useCustomStyleHook_unstable: (hook: keyof CustomStyleHooksContextVa
 // @public (undocumented)
 export function useFluent_unstable(): ProviderContextValue_unstable;
 
-// Warning: (ae-incompatible-release-tags) The symbol "useOverrides" is marked as @public, but its signature references "OverridesContextValue" which is marked as @internal
+// Warning: (ae-incompatible-release-tags) The symbol "useOverrides" is marked as @public, but its signature references "OverridesContextValue_unstable" which is marked as @internal
 //
 // @public (undocumented)
 export function useOverrides_unstable(): OverridesContextValue_unstable;

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

@@ -58,7 +58,7 @@ export interface UseArrowNavigationGroupOptions {
 }
 
 // @public
-export const useFocusableGroup: (options?: UseFocusableGroupOptions | undefined) => Types.TabsterDOMAttribute;
+export const useFocusableGroup: (options?: UseFocusableGroupOptions) => Types.TabsterDOMAttribute;
 
 // @public (undocumented)
 export interface UseFocusableGroupOptions {

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

@@ -170,7 +170,7 @@ export const useToastBodyStyles_unstable: (state: ToastBodyState) => ToastBodySt
 
 // @public (undocumented)
 export function useToastController(toasterId?: ToasterId): {
-    dispatchToast: (content: React_2.ReactNode, options?: DispatchToastOptions | undefined) => void;
+    dispatchToast: (content: React_2.ReactNode, options?: DispatchToastOptions) => void;
     dismissToast: (toastId: ToastId) => void;
     dismissAllToasts: () => void;
     updateToast: (options: UpdateToastOptions) => void;

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

@@ -72,7 +72,7 @@ export const useDynamicVirtualizerMeasure: <TElement extends HTMLElement>(virtua
 };
 
 // @public
-export const useIntersectionObserver: (callback: IntersectionObserverCallback, options?: IntersectionObserverInit | undefined) => {
+export const useIntersectionObserver: (callback: IntersectionObserverCallback, options?: IntersectionObserverInit) => {
     setObserverList: Dispatch<SetStateAction<Element[] | undefined>>;
     setObserverInit: Dispatch<SetStateAction<IntersectionObserverInit | undefined>>;
     observer: MutableRefObject<IntersectionObserver | undefined>;

packages/react-experiments/src/components/FloatingSuggestions/FloatingSuggestions.tsx

@@ -70,7 +70,7 @@ export class FloatingSuggestions<TItem>
   public onQueryStringChanged = (queryString: string): void => {
     if (queryString !== this.state.queryString) {
       this.setState({
-        queryString: queryString,
+        queryString,
       });
 
       if (this.props.onInputChanged) {
@@ -278,9 +278,8 @@ export class FloatingSuggestions<TItem>
       case KeyCodes.del:
         if (
           this.props.onRemoveSuggestion &&
-          this.suggestionsControl.current &&
-          this.suggestionsControl.current.hasSuggestionSelected &&
-          this.suggestionsControl.current.currentSuggestion &&
+          this.suggestionsControl.current?.hasSuggestionSelected &&
+          this.suggestionsControl.current?.currentSuggestion &&
           ev.shiftKey
         ) {
           this.props.onRemoveSuggestion(this.suggestionsControl.current.currentSuggestion!.item);

packages/react/etc/react.api.md

@@ -561,7 +561,7 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
     // (undocumented)
     protected onCopy: (ev: React_2.ClipboardEvent<HTMLElement>) => void;
     // (undocumented)
-    protected onInputChange: (value: string, composing?: boolean | undefined) => void;
+    protected onInputChange: (value: string, composing?: boolean) => void;
     // (undocumented)
     protected onInputClick: (ev: React_2.MouseEvent<HTMLInputElement | Autofill>) => void;
     // (undocumented)
@@ -1068,7 +1068,7 @@ export const CompactPeoplePicker: React_2.FunctionComponent<IPeoplePickerProps>;
 export class CompactPeoplePickerBase extends BasePeoplePicker {
     static defaultProps: {
         onRenderItem: (props: IPeoplePickerItemSelectedProps) => JSX.Element;
-        onRenderSuggestionsItem: (personaProps: IPersonaProps, suggestionsProps?: IBasePickerSuggestionsProps<any> | undefined) => JSX.Element;
+        onRenderSuggestionsItem: (personaProps: IPersonaProps, suggestionsProps?: IBasePickerSuggestionsProps) => JSX.Element;
         createGenericItem: typeof createGenericItem;
     };
 }
@@ -1117,7 +1117,7 @@ export const ContextualMenuItem: React_2.FunctionComponent<IContextualMenuItemPr
 export class ContextualMenuItemBase extends React_2.Component<IContextualMenuItemProps, {}> {
     constructor(props: IContextualMenuItemProps);
     // (undocumented)
-    dismissMenu: (dismissAll?: boolean | undefined) => void;
+    dismissMenu: (dismissAll?: boolean) => void;
     // (undocumented)
     dismissSubMenu: () => void;
     // (undocumented)
@@ -1322,7 +1322,7 @@ export class DetailsListBase extends React_2.Component<IDetailsListProps, IDetai
     // (undocumented)
     getStartItemIndexInView(): number;
     // (undocumented)
-    protected _onRenderRow: (props: IDetailsRowProps, defaultRender?: IRenderFunction<IDetailsRowProps> | undefined) => JSX.Element;
+    protected _onRenderRow: (props: IDetailsRowProps, defaultRender?: IRenderFunction<IDetailsRowProps>) => JSX.Element;
     // (undocumented)
     render(): JSX.Element;
     // (undocumented)
@@ -1712,7 +1712,7 @@ export { formProperties }
 export const getActivityItemClassNames: (styles: IActivityItemStyles, className: string, activityPersonas: Array<IPersonaProps>, isCompact: boolean) => IActivityItemClassNames;
 
 // @public (undocumented)
-export const getActivityItemStyles: (theme?: ITheme, customStyles?: IActivityItemStyles | undefined, animateBeaconSignal?: IActivityItemProps['animateBeaconSignal'], beaconColorOne?: IActivityItemProps['beaconColorOne'], beaconColorTwo?: IActivityItemProps['beaconColorTwo'], isCompact?: IActivityItemProps['isCompact']) => IActivityItemStyles;
+export const getActivityItemStyles: (theme?: ITheme, customStyles?: IActivityItemStyles, animateBeaconSignal?: IActivityItemProps['animateBeaconSignal'], beaconColorOne?: IActivityItemProps['beaconColorOne'], beaconColorTwo?: IActivityItemProps['beaconColorTwo'], isCompact?: IActivityItemProps['isCompact']) => IActivityItemStyles;
 
 // @public (undocumented)
 export function getAllSelectedOptions(options: ISelectableOption[], selectedIndices: number[]): ISelectableOption[];
@@ -1755,7 +1755,7 @@ export const getCommandButtonStyles: (customStyles: IButtonStyles | undefined) =
 // Warning: (ae-internal-missing-underscore) The name "getContextualMenuItemClassNames" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal @deprecated (undocumented)
-export const getContextualMenuItemClassNames: (theme: ITheme, disabled: boolean, expanded: boolean, checked: boolean, isAnchorLink: boolean, knownIcon: boolean, itemClassName?: string | undefined, dividerClassName?: string | undefined, iconClassName?: string | undefined, subMenuClassName?: string | undefined, primaryDisabled?: boolean | undefined, className?: string | undefined) => IContextualMenuItemStyles;
+export const getContextualMenuItemClassNames: (theme: ITheme, disabled: boolean, expanded: boolean, checked: boolean, isAnchorLink: boolean, knownIcon: boolean, itemClassName?: string, dividerClassName?: string, iconClassName?: string, subMenuClassName?: string, primaryDisabled?: boolean, className?: string) => IContextualMenuItemStyles;
 
 // @public
 export const getContextualMenuItemStyles: (props: IContextualMenuItemStyleProps) => IContextualMenuItemStyles;
@@ -1807,7 +1807,7 @@ export { getFocusOutlineStyle }
 export { getFocusStyle }
 
 // @public
-export const getFontIcon: (iconName: string, className?: string | undefined, ariaLabel?: string | undefined) => React_2.ReactElement<any, any> | null;
+export const getFontIcon: (iconName: string, className?: string, ariaLabel?: string) => React_2.ReactElement<any, any> | null;
 
 // @public
 export function getFullColorString(color: IColor): string;
@@ -1824,7 +1824,7 @@ export { getIcon }
 export { getIconClassName }
 
 // @public (undocumented)
-export const getIconContent: (iconName?: string | undefined) => IIconContent | null;
+export const getIconContent: (iconName?: string) => IIconContent | null;
 
 export { getId }
 
@@ -1880,7 +1880,7 @@ export const getNextResizeGroupStateProvider: (measurementCache?: {
     getCachedMeasurement: (data: any) => number | undefined;
     addMeasurementToCache: (data: any, measurement: number) => void;
 }) => {
-    getNextState: (props: IResizeGroupProps, currentState: IResizeGroupState, getElementToMeasureDimension: () => number, newContainerDimension?: number | undefined) => IResizeGroupState | undefined;
+    getNextState: (props: IResizeGroupProps, currentState: IResizeGroupState, getElementToMeasureDimension: () => number, newContainerDimension?: number) => IResizeGroupState | undefined;
     shouldRenderDataForMeasurement: (dataToMeasure: any | undefined) => boolean;
     getInitialResizeGroupState: (data: any) => IResizeGroupState;
 };
@@ -1927,7 +1927,7 @@ export function getShade(color: IColor, shade: Shade, isInverted?: boolean): ICo
 export const getShimmeredDetailsListStyles: (props: IShimmeredDetailsListStyleProps) => IShimmeredDetailsListStyles;
 
 // @public (undocumented)
-export const getSplitButtonClassNames: (styles: IButtonStyles, disabled: boolean, expanded: boolean, checked: boolean, primaryDisabled?: boolean | undefined) => ISplitButtonClassNames;
+export const getSplitButtonClassNames: (styles: IButtonStyles, disabled: boolean, expanded: boolean, checked: boolean, primaryDisabled?: boolean) => ISplitButtonClassNames;
 
 export { getStartDateOfWeek }
 
@@ -2079,7 +2079,7 @@ export class HoverCardBase extends React_2.Component<IHoverCardProps, IHoverCard
         type: HoverCardType;
     };
     // (undocumented)
-    dismiss: (withTimeOut?: boolean | undefined) => void;
+    dismiss: (withTimeOut?: boolean) => void;
     // (undocumented)
     render(): JSX.Element;
 }
@@ -9860,7 +9860,7 @@ export const ListPeoplePicker: React_2.FunctionComponent<IPeoplePickerProps>;
 export class ListPeoplePickerBase extends MemberListPeoplePicker {
     static defaultProps: {
         onRenderItem: (props: IPeoplePickerItemSelectedProps) => JSX.Element;
-        onRenderSuggestionsItem: (personaProps: IPersonaProps, suggestionsProps?: IBasePickerSuggestionsProps<any> | undefined) => JSX.Element;
+        onRenderSuggestionsItem: (personaProps: IPersonaProps, suggestionsProps?: IBasePickerSuggestionsProps) => JSX.Element;
         createGenericItem: typeof createGenericItem;
     };
 }
@@ -10012,7 +10012,7 @@ export const NormalPeoplePicker: React_2.FunctionComponent<IPeoplePickerProps>;
 export class NormalPeoplePickerBase extends BasePeoplePicker {
     static defaultProps: {
         onRenderItem: (props: IPeoplePickerItemSelectedProps) => JSX.Element;
-        onRenderSuggestionsItem: (personaProps: IPersonaProps, suggestionsProps?: IBasePickerSuggestionsProps<any> | undefined) => JSX.Element;
+        onRenderSuggestionsItem: (personaProps: IPersonaProps, suggestionsProps?: IBasePickerSuggestionsProps) => JSX.Element;
         createGenericItem: typeof createGenericItem;
     };
 }
@@ -10087,7 +10087,7 @@ export class PanelBase extends React_2.Component<IPanelProps, IPanelState> imple
     // (undocumented)
     static defaultProps: IPanelProps;
     // (undocumented)
-    dismiss: (ev?: KeyboardEvent | React_2.SyntheticEvent<HTMLElement, Event> | undefined) => void;
+    dismiss: (ev?: React_2.SyntheticEvent<HTMLElement> | KeyboardEvent) => void;
     // (undocumented)
     static getDerivedStateFromProps(nextProps: Readonly<IPanelProps>, prevState: Readonly<IPanelState>): Partial<IPanelState> | null;
     get isActive(): boolean;
@@ -10551,7 +10551,7 @@ export class ScrollablePaneBase extends React_2.Component<IScrollablePaneProps,
     // (undocumented)
     shouldComponentUpdate(nextProps: IScrollablePaneProps, nextState: IScrollablePaneState): boolean;
     // (undocumented)
-    sortSticky: (sticky: Sticky, sortAgain?: boolean | undefined) => void;
+    sortSticky: (sticky: Sticky, sortAgain?: boolean) => void;
     // (undocumented)
     get stickyAbove(): HTMLDivElement | null;
     // (undocumented)
@@ -11364,7 +11364,7 @@ export function useHeightOffset({ finalHeight }: IPositioningContainerProps, con
 export function useKeytipRef<TElement extends HTMLElement = HTMLElement>(options: KeytipDataOptions): React_2.Ref<TElement>;
 
 // @public
-export const useResponsiveMode: (elementRef: React_2.RefObject<HTMLElement | null>, overrideResponsiveMode?: ResponsiveMode | undefined) => ResponsiveMode;
+export const useResponsiveMode: (elementRef: React_2.RefObject<HTMLElement | null>, overrideResponsiveMode?: ResponsiveMode) => ResponsiveMode;
 
 // @public @deprecated
 export type UseStylesOptions = {