feat(typescript)!: support svelte 4 (#1773)

Closes #1753 

The minimum Svelte version required for TypeScript users is now 3.55.

types/DataTable/DataTable.svelte.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
 export type DataTableKey = string;
 
@@ -40,8 +40,9 @@ export interface DataTableCell {
   display?: (item: Value) => DataTableValue;
 }
 
-export interface DataTableProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface DataTableProps extends RestProps {
   /**
    * Specify the data table headers
    * @default []

types/DataTable/DataTableSkeleton.svelte.d.ts

@@ -1,10 +1,11 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
 import type { DataTableHeader } from "./DataTable.svelte";
 
-export interface DataTableSkeletonProps
-  extends DataTableHeader,
-    svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface DataTableSkeletonProps extends DataTableHeader, RestProps {
   /**
    * Specify the number of columns
    * Superseded by `headers` if `headers` is a non-empty array

types/DataTable/Table.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface TableProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> {
+type RestProps = SvelteHTMLElements["section"];
+
+export interface TableProps extends RestProps {
   /**
    * Set the size of the table
    * @default undefined
@@ -44,6 +45,6 @@ export interface TableProps
 
 export default class Table extends SvelteComponentTyped<
   TableProps,
-  {},
+  Record<string, any>,
   { default: {} }
 > {}

types/DataTable/TableBody.svelte.d.ts

@@ -1,13 +1,14 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface TableBodyProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tbody"]> {
+type RestProps = SvelteHTMLElements["tbody"];
+
+export interface TableBodyProps extends RestProps {
   [key: `data-${string}`]: any;
 }
 
 export default class TableBody extends SvelteComponentTyped<
   TableBodyProps,
-  {},
+  Record<string, any>,
   { default: {} }
 > {}

types/DataTable/TableCell.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface TableCellProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["td"]> {
+type RestProps = SvelteHTMLElements["td"];
+
+export interface TableCellProps extends RestProps {
   [key: `data-${string}`]: any;
 }
 

types/DataTable/TableContainer.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface TableContainerProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface TableContainerProps extends RestProps {
   /**
    * Specify the title of the data table
    * @default ""
@@ -32,6 +33,6 @@ export interface TableContainerProps
 
 export default class TableContainer extends SvelteComponentTyped<
   TableContainerProps,
-  {},
+  Record<string, any>,
   { default: {} }
 > {}

types/DataTable/TableHead.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface TableHeadProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["thead"]> {
+type RestProps = SvelteHTMLElements["thead"];
+
+export interface TableHeadProps extends RestProps {
   [key: `data-${string}`]: any;
 }
 

types/DataTable/TableHeader.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface TableHeaderProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["th"]> {
+type RestProps = SvelteHTMLElements["th"];
+
+export interface TableHeaderProps extends RestProps {
   /**
    * Set to `true` for the sortable variant
    * @default false

types/DataTable/TableRow.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface TableRowProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tr"]> {
+type RestProps = SvelteHTMLElements["tr"];
+
+export interface TableRowProps extends RestProps {
   [key: `data-${string}`]: any;
 }
 

types/DataTable/Toolbar.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface ToolbarProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> {
+type RestProps = SvelteHTMLElements["section"];
+
+export interface ToolbarProps extends RestProps {
   /**
    * Specify the toolbar size
    * @default "default"
@@ -14,6 +15,6 @@ export interface ToolbarProps
 
 export default class Toolbar extends SvelteComponentTyped<
   ToolbarProps,
-  {},
+  Record<string, any>,
   { default: {} }
 > {}

types/DataTable/ToolbarBatchActions.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface ToolbarBatchActionsProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface ToolbarBatchActionsProps extends RestProps {
   /**
    * Override the total items selected text
    * @default (totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`

types/DataTable/ToolbarContent.svelte.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
 
 export interface ToolbarContentProps {}
 
 export default class ToolbarContent extends SvelteComponentTyped<
   ToolbarContentProps,
-  {},
+  Record<string, any>,
   { default: {} }
 > {}

types/DataTable/ToolbarMenu.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
 import type { OverflowMenuProps } from "../OverflowMenu/OverflowMenu.svelte";
 
@@ -6,6 +5,6 @@ export interface ToolbarMenuProps extends OverflowMenuProps {}
 
 export default class ToolbarMenu extends SvelteComponentTyped<
   ToolbarMenuProps,
-  {},
+  Record<string, any>,
   { default: {} }
 > {}

types/DataTable/ToolbarMenuItem.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
 import type { OverflowMenuItemProps } from "../OverflowMenu/OverflowMenuItem.svelte";
 

types/DataTable/ToolbarSearch.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface ToolbarSearchProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
+type RestProps = SvelteHTMLElements["input"];
+
+export interface ToolbarSearchProps extends RestProps {
   /**
    * Specify the value of the search input
    * @default ""