chore: migrate to TS 4.9

apps/vr-tests-web-components/tsconfig.json

@@ -10,5 +10,6 @@
     "jsx": "react",
     "types": ["jest", "node", "web"]
   },
-  "include": ["./src", "./.storybook/*"]
+  "include": ["./src", "./.storybook/*"],
+  "files": ["./typings/html-react-parser/index.d.ts"]
 }

apps/vr-tests-web-components/typings/html-react-parser/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Typings override for invalid html-react-parser types
+ * Types started explode after upgrading to TypeScript 4.9 which properly parses export maps within native ESM environments
+ * @see https://github.com/remarkablemark/html-react-parser/issues/1305#issuecomment-2136962278
+ */
+declare module 'html-react-parser' {
+  import type { Comment, Element, Node, ProcessingInstruction, Text } from 'domhandler';
+  type DOMNode = Comment | Element | Node | ProcessingInstruction | Text;
+  interface HTMLReactParserOptions {
+    replace?: (domNode: DOMNode) => JSX.Element | Record<string, unknown> | void | undefined | null | false;
+
+    trim?: boolean;
+  }
+  export default function parse(html: string, options?: HTMLReactParserOptions): string | JSX.Element | JSX.Element[];
+}

change/@fluentui-api-docs-44f3b6cf-e2ae-452b-bf50-ef1af35445bb.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: bump api-extractor-model in order to migrate to TS 4.9",
+  "packageName": "@fluentui/api-docs",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}

package.json

@@ -85,12 +85,12 @@
     "@griffel/webpack-loader": "2.2.10",
     "@jest/reporters": "29.7.0",
     "@mdx-js/loader": "1.6.22",
-    "@microsoft/api-extractor": "7.31.2",
-    "@microsoft/api-extractor-model": "7.24.2",
+    "@microsoft/api-extractor": "7.34.9",
+    "@microsoft/api-extractor-model": "7.26.9",
     "@microsoft/eslint-plugin-sdl": "0.1.9",
     "@microsoft/load-themed-styles": "1.10.26",
     "@microsoft/loader-load-themed-styles": "2.0.17",
-    "@microsoft/tsdoc": "0.14.1",
+    "@microsoft/tsdoc": "0.14.2",
     "@nx/devkit": "17.3.2",
     "@nx/eslint": "17.3.2",
     "@nx/eslint-plugin": "17.3.2",
@@ -334,7 +334,7 @@
     "tsconfig-paths": "4.2.0",
     "tsconfig-paths-webpack-plugin": "4.1.0",
     "tslib": "2.5.0",
-    "typescript": "4.7.4",
+    "typescript": "4.9.5",
     "vinyl": "2.2.0",
     "vrscreenshotdiff": "0.0.17",
     "webpack": "5.90.3",
@@ -374,6 +374,7 @@
     "@typescript-eslint/experimental-utils": "4.22.0",
     "@typescript-eslint/parser": "4.22.0",
     "@types/jest-axe/axe-core": "4.7.2",
+    "@microsoft/api-extractor/typescript": "4.9.5",
     "eslint": "7.25.0",
     "@mdx-js/loader/loader-utils": "~2.0.4",
     "swc-loader": "^0.2.3",

packages/api-docs/package.json

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

packages/fluentui/react-bindings/src/hooks/useStyles.ts

@@ -43,7 +43,7 @@ export type UseStylesResult = {
   styles: ComponentSlotStylesResolved;
 };
 
-type InlineStyleProps<ComponentProps> = {
+type InlineStyleProps<ComponentProps extends {}> = {
   /** Additional CSS class name(s) to apply.  */
   className?: string;
 

packages/fluentui/react-northstar/package.json

@@ -18,7 +18,7 @@
     "@fluentui/react-proptypes": "^0.66.5",
     "@fluentui/state": "^0.66.5",
     "@fluentui/styles": "^0.66.5",
-    "@popperjs/core": "~2.4.3",
+    "@popperjs/core": "~2.11.8",
     "body-scroll-lock": "^3.1.5",
     "classnames": "^2.2.6",
     "compute-scroll-into-view": "1.0.11",

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

@@ -20,7 +20,7 @@ import { EventListener } from '@fluentui/react-component-event-listener';
 import { NodeRef, Unstable_NestingAuto } from '@fluentui/react-component-nesting-registry';
 import { handleRef, Ref } from '@fluentui/react-component-ref';
 import * as customPropTypes from '@fluentui/react-proptypes';
-import * as PopperJs from '@popperjs/core';
+import type { VirtualElement as PopperJsVirtualElement } from '@popperjs/core';
 import * as _ from 'lodash';
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
@@ -190,7 +190,7 @@ export const Popup: React.FC<PopupProps> &
   const triggerRef = React.useRef<HTMLElement>();
   // focusable element which has triggered Popup, can be either triggerDomElement or the element inside it
   const triggerFocusableRef = React.useRef<HTMLElement>();
-  const rightClickReferenceObject = React.useRef<PopperJs.VirtualElement | null>();
+  const rightClickReferenceObject = React.useRef<PopperJsVirtualElement | null>();
 
   useOnIFrameFocus(open, context.target, (e: Event) => {
     const iframeInsidePopup = elementContains(popupContentRef.current, e.target as HTMLElement);

packages/fluentui/react-northstar/src/components/Popup/PopupContent.tsx

@@ -13,7 +13,7 @@ import {
   ForwardRefWithAs,
 } from '@fluentui/react-bindings';
 import * as customPropTypes from '@fluentui/react-proptypes';
-import * as PopperJs from '@popperjs/core';
+import type { BasePlacement as PopperJsBasePlacement, Placement as PopperJsPlacement } from '@popperjs/core';
 import cx from 'classnames';
 import * as _ from 'lodash';
 import * as PropTypes from 'prop-types';
@@ -78,7 +78,7 @@ export interface PopupContentProps extends UIComponentProps, ChildrenComponentPr
 }
 
 export type PopupContentStylesProps = Required<Pick<PopupContentProps, 'pointing'>> & {
-  basePlacement: PopperJs.BasePlacement;
+  basePlacement: PopperJsBasePlacement;
   autoSize?: AutoSize;
 };
 
@@ -195,7 +195,7 @@ PopupContent.displayName = 'PopupContent';
 
 PopupContent.propTypes = {
   ...commonPropTypes.createCommon(),
-  placement: PropTypes.oneOf<PopperJs.Placement>([
+  placement: PropTypes.oneOf<PopperJsPlacement>([
     'auto-start',
     'auto',
     'auto-end',

packages/fluentui/react-northstar/src/components/Tooltip/TooltipContent.tsx

@@ -9,7 +9,7 @@ import {
   ForwardRefWithAs,
 } from '@fluentui/react-bindings';
 import * as customPropTypes from '@fluentui/react-proptypes';
-import * as PopperJs from '@popperjs/core';
+import type { BasePlacement as PopperJsBasePlacement, Placement as PopperJsPlacement } from '@popperjs/core';
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
 
@@ -49,7 +49,7 @@ export interface TooltipContentProps extends UIComponentProps, ChildrenComponent
 }
 
 export type TooltipContentStylesProps = Required<Pick<TooltipContentProps, 'pointing' | 'open' | 'subtle'>> & {
-  basePlacement: PopperJs.BasePlacement;
+  basePlacement: PopperJsBasePlacement;
 };
 
 export const tooltipContentClassName = 'ui-tooltip__content';
@@ -127,7 +127,7 @@ TooltipContent.displayName = 'TooltipContent';
 
 TooltipContent.propTypes = {
   ...commonPropTypes.createCommon(),
-  placement: PropTypes.oneOf<PopperJs.Placement>([
+  placement: PropTypes.oneOf<PopperJsPlacement>([
     'auto-start',
     'auto',
     'auto-end',

packages/fluentui/react-northstar/src/themes/teams/getPointerStyles.ts

@@ -1,9 +1,9 @@
 import { ICSSInJSStyle } from '@fluentui/styles';
-import * as PopperJs from '@popperjs/core';
+import type { BasePlacement as PopperJsBasePlacement } from '@popperjs/core';
 
 type GetContainerStylesOptions = {
   padding: string;
-  placement: PopperJs.BasePlacement;
+  placement: PopperJsBasePlacement;
 };
 
 type GetPointerStylesOptions = {
@@ -16,7 +16,7 @@ type GetPointerStylesOptions = {
   height: string;
   width: string;
 
-  placement: PopperJs.BasePlacement;
+  placement: PopperJsBasePlacement;
   rtl: boolean;
   svg?: string;
 };

packages/fluentui/react-northstar/src/types.ts

@@ -9,15 +9,15 @@ import { ShorthandFactory } from './utils/factories';
 
 export type ResultOf<T> = T extends (...arg: any[]) => infer TResult ? TResult : never;
 
-export type ObjectOf<T> = { [key: string]: T };
+export type ObjectOf<T extends {}> = { [key: string]: T };
 
 export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 
 // ========================================================
 // Components
 // ========================================================
 
-export type FluentComponentStaticProps<P = {}> = {
+export type FluentComponentStaticProps<P extends {} = {}> = {
   handledProps: (keyof P)[];
   create?: ShorthandFactory<P>;
   shorthandConfig?: ShorthandConfig<P>;
@@ -59,8 +59,8 @@ type KindSelector<T> = {
   [P in keyof T]: { kind?: P } & T[P];
 }[keyof T];
 
-export type ShorthandCollection<Props, Kinds = Record<string, {}>> = ShorthandValue<
-  Props | (KindSelector<Kinds> & Props)
+export type ShorthandCollection<P extends Props, Kinds = Record<string, {}>> = ShorthandValue<
+  P | (KindSelector<Kinds> & P)
 >[];
 
 export type ObjectShorthandValue<P extends Props> = Props<P> & {

packages/fluentui/react-northstar/src/utils/commonPropInterfaces.ts

@@ -3,15 +3,15 @@ import { ComponentSlotStyle, ComponentVariablesInput } from '@fluentui/styles';
 import * as React from 'react';
 import { ReactChildren } from '../types';
 
-export interface StyledComponentProps<P = any, V = any> {
+export interface StyledComponentProps<P extends {} = any, V extends {} = any> {
   /** Additional CSS styles to apply to the component instance.  */
   styles?: ComponentSlotStyle<P, V>;
 
   /** Override for theme site variables to allow modifications of component styling via themes. */
   variables?: ComponentVariablesInput;
 }
 
-export interface UIComponentProps<P = any, V = any> extends StyledComponentProps<P, V> {
+export interface UIComponentProps<P extends {} = any, V extends {} = any> extends StyledComponentProps<P, V> {
   /** Additional CSS class name(s) to apply.  */
   className?: string;
   design?: ComponentDesignProp;

packages/fluentui/react-northstar/src/utils/commonPropTypes.ts

@@ -6,15 +6,15 @@ import * as React from 'react';
 
 import { ReactChildren } from '../types';
 
-export interface StyledComponentProps<P = any, V = any> {
+export interface StyledComponentProps<P extends {} = any, V extends {} = any> {
   /** Additional CSS styles to apply to the component instance.  */
   styles?: ComponentSlotStyle<P, V>;
 
   /** Override for theme site variables to allow modifications of component styling via themes. */
   variables?: ComponentVariablesInput;
 }
 
-export interface UIComponentProps<P = any, V = any> extends StyledComponentProps<P, V> {
+export interface UIComponentProps<P extends {} = any, V extends {} = any> extends StyledComponentProps<P, V> {
   /** Additional CSS class name(s) to apply.  */
   className?: string;
   design?: ComponentDesignProp;

packages/fluentui/react-northstar/src/utils/createComponentInternal.ts

@@ -17,7 +17,7 @@ export interface CreateComponentConfig<P> {
   render: (config: RenderResultConfig<P>, props: P) => React.ReactNode;
 }
 
-export type CreateComponentReturnType<P> = React.FunctionComponent<P> & {
+export type CreateComponentReturnType<P extends {}> = React.FunctionComponent<P> & {
   deprecated_className: string;
   create: ShorthandFactory<P>;
 };

packages/fluentui/react-northstar/src/utils/factories.ts

@@ -10,7 +10,7 @@ import { ShorthandValue, Props, PropsOf, ShorthandRenderFunction } from '../type
 type HTMLTag = 'iframe' | 'img' | 'input';
 type ShorthandProp = 'children' | 'src' | 'type';
 
-interface CreateShorthandOptions<P> {
+interface CreateShorthandOptions<P extends {}> {
   /** Default props object */
   defaultProps?: () => Partial<Props<P>>;
 
@@ -31,7 +31,7 @@ const mappedProps: { [key in HTMLTag]: ShorthandProp } = {
   input: 'type',
 };
 
-export type ShorthandFactory<P> = (
+export type ShorthandFactory<P extends {}> = (
   value: ShorthandValue<P>,
   options?: CreateShorthandOptions<P>,
 ) => React.ReactElement | null | undefined;
@@ -44,7 +44,7 @@ export type ShorthandFactory<P> = (
  * @param config - Options passed to factory
  * @returns A shorthand factory function waiting for `val` and `defaultProps`.
  */
-export function createShorthandFactory<TStringElement extends keyof JSX.IntrinsicElements, P>(config: {
+export function createShorthandFactory<TStringElement extends keyof JSX.IntrinsicElements, P extends {}>(config: {
   /** A ReactClass or string */
   Component: TStringElement;
   /** A function that maps a primitive value to the Component props */
@@ -54,13 +54,13 @@ export function createShorthandFactory<TStringElement extends keyof JSX.Intrinsi
   /** Indicates if factory supports React Elements */
   allowsJSX?: boolean;
 }): ShorthandFactory<P>;
-export function createShorthandFactory<TFunctionComponent extends React.FunctionComponent, P>(config: {
+export function createShorthandFactory<TFunctionComponent extends React.FunctionComponent, P extends {}>(config: {
   Component: TFunctionComponent;
   mappedProp?: keyof PropsOf<TFunctionComponent>;
   mappedArrayProp?: keyof PropsOf<TFunctionComponent>;
   allowsJSX?: boolean;
 }): ShorthandFactory<P>;
-export function createShorthandFactory<TInstance extends React.Component, P>(config: {
+export function createShorthandFactory<TInstance extends React.Component, P extends {}>(config: {
   Component: { new (...args: any[]): TInstance };
   mappedProp?: keyof PropsOf<TInstance>;
   mappedArrayProp?: keyof PropsOf<TInstance>;
@@ -86,7 +86,7 @@ export function createShorthandFactory<P>({ Component, mappedProp, mappedArrayPr
 // Factories
 // ============================================================
 
-export function createShorthandInternal<P>({
+export function createShorthandInternal<P extends {}>({
   Component,
   mappedProp,
   mappedArrayProp,
@@ -255,7 +255,7 @@ export function createShorthand<TInstance extends React.Component>(
   value?: ShorthandValue<PropsOf<TInstance>>,
   options?: CreateShorthandOptions<PropsOf<TInstance>>,
 ): React.ReactElement;
-export function createShorthand<E extends keyof JSX.IntrinsicElements, P>(
+export function createShorthand<E extends keyof JSX.IntrinsicElements, P extends {}>(
   Component: ComponentWithAs<E, P> & {
     shorthandConfig?: ShorthandConfig<P>;
     fluentComposeConfig?: ComposePreparedOptions<P>;

packages/fluentui/react-northstar/src/utils/positioner/Popper.tsx

@@ -1,6 +1,6 @@
 import { useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-bindings';
 import { Ref, isRefObject } from '@fluentui/react-component-ref';
-import * as PopperJs from '@popperjs/core';
+import type { Placement as PopperJsPlacement, VirtualElement as PopperJsVirtualElement } from '@popperjs/core';
 import * as React from 'react';
 
 import { getPlacement } from './positioningHelper';
@@ -16,8 +16,8 @@ export const Popper: React.FunctionComponent<PopperProps> = props => {
   const usesRenderProps: boolean = typeof props.children === 'function';
 
   const proposedPlacement = getPlacement(props.align, props.position, props.rtl);
-  const latestPlacement = React.useRef<PopperJs.Placement>(proposedPlacement);
-  const [computedPlacement, setComputedPlacement] = React.useState<PopperJs.Placement>(proposedPlacement);
+  const latestPlacement = React.useRef<PopperJsPlacement>(proposedPlacement);
+  const [computedPlacement, setComputedPlacement] = React.useState<PopperJsPlacement>(proposedPlacement);
 
   const popperRef = React.useRef<PopperRefHandle | null>(null);
   const { targetRef, containerRef, arrowRef } = usePopper({
@@ -43,7 +43,7 @@ export const Popper: React.FunctionComponent<PopperProps> = props => {
     // Does not make anything worse as Popper component does not have proper handing for ref updates ¯\_(ツ)_/¯
     targetRef.current = isRefObject(props.targetRef)
       ? (props.targetRef as React.RefObject<Element>).current
-      : (props.targetRef as PopperJs.VirtualElement);
+      : (props.targetRef as PopperJsVirtualElement);
     arrowRef.current = props.pointerTargetRef?.current as HTMLElement;
   });
 

packages/fluentui/react-northstar/src/utils/positioner/createReferenceFromClick.ts

@@ -1,6 +1,6 @@
-import * as PopperJs from '@popperjs/core';
+import type { VirtualElement as PopperJsVirtualElement } from '@popperjs/core';
 
-export function createReferenceFromClick(nativeEvent: MouseEvent): PopperJs.VirtualElement {
+export function createReferenceFromClick(nativeEvent: MouseEvent): PopperJsVirtualElement {
   const left = nativeEvent.clientX;
   const top = nativeEvent.clientY;
   const right = left + 1;

packages/fluentui/react-northstar/src/utils/positioner/getBasePlacement.ts

@@ -1,12 +1,12 @@
-import * as PopperJs from '@popperjs/core';
+import type { BasePlacement as PopperJsBasePlacement, Placement as PopperJsPlacement } from '@popperjs/core';
 
-const rtlMapping: Partial<Record<PopperJs.BasePlacement, PopperJs.BasePlacement>> = {
+const rtlMapping: Partial<Record<PopperJsBasePlacement, PopperJsBasePlacement>> = {
   left: 'right',
   right: 'left',
 };
 
-export function getBasePlacement(placement: PopperJs.Placement | undefined, rtl: boolean): PopperJs.BasePlacement {
-  const basePlacement = (placement || '').split('-', 1).pop() as PopperJs.BasePlacement;
+export function getBasePlacement(placement: PopperJsPlacement | undefined, rtl: boolean): PopperJsBasePlacement {
+  const basePlacement = (placement || '').split('-', 1).pop() as PopperJsBasePlacement;
 
   return (rtl && rtlMapping[basePlacement]) || basePlacement;
 }

packages/fluentui/react-northstar/src/utils/positioner/getBoundary.ts

@@ -1,12 +1,12 @@
-import * as PopperJs from '@popperjs/core';
+import type { Boundary as PopperJsBoundary } from '@popperjs/core';
 
 import { getScrollParent } from './getScrollParent';
 import { Boundary } from './types';
 
 /**
  * Allows to mimic a behavior from V1 of Popper and accept `window` and `scrollParent` as strings.
  */
-export function getBoundary(element: HTMLElement, boundary: Boundary): PopperJs.Boundary {
+export function getBoundary(element: HTMLElement, boundary: Boundary): PopperJsBoundary {
   if (boundary === 'window') {
     return element.ownerDocument.documentElement;
   }

packages/fluentui/react-northstar/src/utils/positioner/isIntersectingModifier.ts

@@ -1,4 +1,5 @@
-import { detectOverflow, Modifier } from '@popperjs/core';
+import { detectOverflow } from '@popperjs/core';
+import type { Modifier } from '@popperjs/core';
 
 export const isIntersectingModifier: IsIntersectingModifier = {
   name: 'is-intersecting-modifier',