fix: ts 4.1 compat

Author: atomiks

.config/tsconfig.json

@@ -2,14 +2,17 @@
   "include": ["../packages/**/src/**/*.ts"],
   "exclude": ["../**/*.test.ts"],
   "compilerOptions": {
-    "target": "es2021",
-    "lib": ["dom", "es2019"],
-    "moduleResolution": "node",
-    "module": "es2015",
-    "removeComments": false,
+    "lib": ["dom", "es2020"],
+    "target": "es2020",
     "skipLibCheck": true,
-    "declaration": true,
-    "emitDeclarationOnly": true,
+    "moduleResolution": "node",
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "types": ["node", "jest", "resize-observer-browser"],
+    "allowJs": true,
+    "esModuleInterop": true,
     "jsx": "react-jsx",
     "outDir": "../packages",
     "allowSyntheticDefaultImports": true

package-lock.json

@@ -43,6 +43,7 @@
     "@playwright/test": "1.17.2",
     "@types/jest": "^27.0.3",
     "@types/node": "^16.11.10",
+    "@types/resize-observer-browser": "^0.1.7",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "eslint": "^8.3.0",

package.json

@@ -1,7 +1,12 @@
-import type {Side, Placement} from './types';
+import type {Side, Placement, AlignedPlacement} from './types';
 
 export const sides: Side[] = ['top', 'right', 'bottom', 'left'];
 export const allPlacements = sides.reduce(
-  (acc: Placement[], side) => acc.concat(side, `${side}-start`, `${side}-end`),
+  (acc: Placement[], side) =>
+    acc.concat(
+      side,
+      `${side}-start` as AlignedPlacement,
+      `${side}-end` as AlignedPlacement
+    ),
   []
 );

packages/core/src/enums.ts

@@ -47,12 +47,12 @@ export function convertValueToCoords(
 
   const rawValue =
     typeof value === 'function' ? value({...rects, placement}) : value;
-  const isNumber = typeof rawValue === 'number';
 
   // eslint-disable-next-line prefer-const
-  let {mainAxis, crossAxis, alignmentAxis} = isNumber
-    ? {mainAxis: rawValue, crossAxis: 0, alignmentAxis: null}
-    : {mainAxis: 0, crossAxis: 0, alignmentAxis: null, ...rawValue};
+  let {mainAxis, crossAxis, alignmentAxis} =
+    typeof rawValue === 'number'
+      ? {mainAxis: rawValue, crossAxis: 0, alignmentAxis: null}
+      : {mainAxis: 0, crossAxis: 0, alignmentAxis: null, ...rawValue};
 
   if (alignment && typeof alignmentAxis === 'number') {
     crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;

packages/core/src/middleware/offset.ts

@@ -24,6 +24,7 @@ export function getRectRelativeToOffsetParent(
   const documentElement = getDocumentElement(offsetParent);
   const rect = getBoundingClientRect(
     element,
+    // @ts-ignore - checked above (TS 4.1 compat)
     isOffsetParentAnElement && isScaled(offsetParent),
     strategy === 'fixed'
   );

packages/dom/src/utils/getRectRelativeToOffsetParent.ts

@@ -49,6 +49,7 @@ export function isContainingBlock(element: Element): boolean {
   return (
     css.transform !== 'none' ||
     css.perspective !== 'none' ||
+    // @ts-ignore (TS 4.1 compat)
     css.contain === 'paint' ||
     ['transform', 'perspective'].includes(css.willChange) ||
     (isFirefox && css.willChange === 'filter') ||

packages/dom/src/utils/is.ts

@@ -28,7 +28,8 @@ function mergeProps(
   };
 
   propsList.forEach((props) => {
-    const elementProps = props?.[elementKey] ?? {};
+    const elementProps = ((props && props[elementKey]) ??
+      {}) as React.HTMLProps<Element>;
 
     (
       Object.keys(elementProps) as Array<keyof React.HTMLProps<Element>>
@@ -47,7 +48,7 @@ function mergeProps(
     ...(elementKey === 'floating' && {tabIndex: -1}),
     ...userProps,
     ...propsList.reduce((acc, props) => {
-      Object.assign(acc, props?.[elementKey]);
+      props && Object.assign(acc, props[elementKey]);
       return acc;
     }, {}),
     ...Object.entries(mergePropsMap[elementKey]).reduce(

packages/react-dom-interactions/src/useInteractions.ts

@@ -1,14 +1,14 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "es2021"],
-    "target": "es2021",
+    "lib": ["dom", "es2020"],
+    "target": "es2020",
     "skipLibCheck": true,
     "moduleResolution": "node",
     "noEmit": true,
     "resolveJsonModule": true,
     "strict": true,
     "noUnusedLocals": true,
-    "types": ["node", "jest"],
+    "types": ["node", "jest", "resize-observer-browser"],
     "allowJs": true,
     "esModuleInterop": true,
     "jsx": "react-jsx"