Update ts version, fix some issues

example/components/demo.tsx

@@ -198,7 +198,7 @@ export default function Demo() {
 									bounds="parent"
 									onDrag={() => {
 										tether.current?.getTetherInstance() &&
-											tether.current?.getTetherInstance().position();
+											tether.current?.getTetherInstance()?.position();
 									}}
 									defaultPosition={{
 										x: container.clientWidth / 2 - 100 / 2,

example/tests/html-class-stability/index.js

@@ -34,7 +34,7 @@ class App extends React.Component {
 								}}
 							>
 								Toggle Tethered Content
-              </button>
+							</button>
 							<button
 								onClick={() => {
 									this.setState({
@@ -45,7 +45,7 @@ class App extends React.Component {
 								}}
 							>
 								Change Classes
-              </button>
+							</button>
 						</div>
 					)}
 					renderElement={(ref) =>
@@ -61,7 +61,7 @@ class App extends React.Component {
 									}}
 								>
 									Add More Content
-                </button>
+								</button>
 								<p>{content}</p>
 							</div>
 						)

package.json

@@ -72,7 +72,7 @@
 		"testcafe": "2.0.0",
 		"testcafe-browser-provider-saucelabs": "1.9.0",
 		"ts-jest": "^29.0.1",
-		"typescript": "^4.8.3"
+		"typescript": "^5.2"
 	},
 	"files": [
 		"dist",

src/react-tether.d.ts

@@ -1,66 +1,65 @@
 import * as React from "react";
-import type * as Tether from "tether";
+import Tether from "tether";
 
 export default TetherComponent;
 export as namespace ReactTether;
 
 declare class TetherComponent extends React.Component<ReactTether.TetherComponentProps> {
-  props: ReactTether.TetherComponentProps;
+	props: ReactTether.TetherComponentProps;
 
-  static propTypes: ReactTether.TetherComponentProps;
+	static propTypes: ReactTether.TetherComponentProps;
 
-  static defaultProps: {
-    renderElementTag: string;
-    renderElementTo: any;
-  };
+	static defaultProps: {
+		renderElementTag: string;
+		renderElementTo: any;
+	};
 
-  getTetherInstance(): Tether;
+	getTetherInstance(): Tether;
 
-  disable(): void;
+	disable(): void;
 
-  enable(): void;
+	enable(): void;
 
-  on(event: any, handler: any, ctx?: any): void;
+	on(event: any, handler: any, ctx?: any): void;
 
-  once(event: any, handler: any, ctx?: any): void;
+	once(event: any, handler: any, ctx?: any): void;
 
-  off(event: any, handler: any): void;
+	off(event: any, handler: any): void;
 
-  position(): void;
+	position(): void;
 }
 
 declare namespace ReactTether {
-  type TetherAttachment = { top: string; left: string };
-  type UpdateEventData = {
-    attachment: TetherAttachment;
-    targetAttachment: TetherAttachment;
-  };
-  type RenderProp = (ref: React.RefObject<Element>) => React.ReactNode;
+	type TetherAttachment = { top: string; left: string };
+	type UpdateEventData = {
+		attachment: TetherAttachment;
+		targetAttachment: TetherAttachment;
+	};
+	type RenderProp = (ref: React.RefObject<Element>) => React.ReactNode;
 
-  type ContraintsTo = string | "window" | "scrollParent" | HTMLElement;
+	type ContraintsTo = string | "window" | "scrollParent" | HTMLElement;
 
-  type Constraints = {
-    to?: ContraintsTo;
-    attachment?: string | "together";
-    outOfBoundsClass?: string;
-    pinnedClass?: string;
-    pin?: boolean | string[];
-  };
+	type Constraints = {
+		to?: ContraintsTo;
+		attachment?: string | "together";
+		outOfBoundsClass?: string;
+		pinnedClass?: string;
+		pin?: boolean | string[];
+	};
 
-  type TetherComponentProps = {
-    renderTarget?: RenderProp;
-    renderElement?: RenderProp;
-    renderElementTag?: string;
-    renderElementTo?: Element | string;
-    attachment: string;
-    targetAttachment?: string;
-    constraints?: Constraints[];
-    className?: string;
-    id?: string;
-    style?: React.CSSProperties;
-    onUpdate?: (data: UpdateEventData) => void;
-    onRepositioned?: () => void;
-    offset?: string;
-  } & React.Props<TetherComponent> &
-    Tether.ITetherOptions;
+	type TetherComponentProps = {
+		renderTarget?: RenderProp;
+		renderElement?: RenderProp;
+		renderElementTag?: string;
+		renderElementTo?: Element | string;
+		attachment: string;
+		targetAttachment?: string;
+		constraints?: Constraints[];
+		className?: string;
+		id?: string;
+		style?: React.CSSProperties;
+		onUpdate?: (data: UpdateEventData) => void;
+		onRepositioned?: () => void;
+		offset?: string;
+	} & Tether.ITetherOptions;
 }

src/react-tether.tsx

@@ -1,4 +1,5 @@
-import React, { Component, isValidElement, RefObject } from "react";
+import React, { Component, isValidElement } from "react";
+import type { RefObject } from "react";
 import ReactDOM from "react-dom";
 import Tether from "tether";
 

tsconfig.json

@@ -27,7 +27,7 @@
 		"noUncheckedIndexedAccess": true,
 		"noUnusedLocals": true,
 		"noUnusedParameters": true,
-		"importsNotUsedAsValues": "error",
+		"verbatimModuleSyntax": true,
 
 		// TSC config
 		"checkJs": true, // Typecheck JS files