Fix type errors for @vscode-elements/react-elements compatibility

Changed event handler types from specific React event types to generic Event types to match @vscode-elements/react-elements library expectations:
- CodeFlowsDropdown: ChangeEvent<HTMLSelectElement> → Event
- DataGrid: React.Ref<HTMLElement | undefined> → React.Ref<HTMLDivElement>
- TextButton: Make $size prop optional
- ModelTypeTextbox: ChangeEvent<HTMLSelectElement> → Event
- RepoRow: ChangeEvent<HTMLInputElement> → Event
- ModelAlertsSort, RepositoriesFilter, RepositoriesResultFormat, RepositoriesSort: InputEvent → Event

This fixes the TypeScript compilation errors in CI.

Co-authored-by: d10c <9970661+d10c@users.noreply.github.com>

Author: Copilot

extensions/ql-vscode/src/view/common/CodePaths/CodeFlowsDropdown.tsx

@@ -1,4 +1,4 @@
-import type { ChangeEvent, SetStateAction } from "react";
+import type { SetStateAction } from "react";
 import { useCallback } from "react";
 import {
   VscodeOption,
@@ -25,8 +25,8 @@ export const CodeFlowsDropdown = ({
   setSelectedCodeFlow,
 }: CodeFlowsDropdownProps) => {
   const handleChange = useCallback(
-    (e: ChangeEvent<HTMLSelectElement>) => {
-      const selectedOption = e.target;
+    (e: Event) => {
+      const selectedOption = e.target as HTMLSelectElement;
       const selectedIndex = parseInt(selectedOption.value);
       setSelectedCodeFlow(codeFlows[selectedIndex]);
     },

extensions/ql-vscode/src/view/common/DataGrid.tsx

@@ -83,7 +83,7 @@ export const DataGridRow = forwardRef(
       "data-testid": testId,
       onClick,
     }: DataGridRowProps,
-    ref?: React.Ref<HTMLElement | undefined>,
+    ref?: React.Ref<HTMLDivElement>,
   ) => (
     <StyledDataGridRow
       $focused={focused}
@@ -135,7 +135,7 @@ export const DataGridCell = forwardRef(
       className,
       children,
     }: DataGridCellProps,
-    ref?: React.Ref<HTMLElement | undefined>,
+    ref?: React.Ref<HTMLDivElement>,
   ) => {
     return (
       <StyledDataGridCell

extensions/ql-vscode/src/view/common/TextButton.tsx

@@ -2,7 +2,7 @@ import { styled } from "styled-components";
 
 type Size = "x-small" | "small" | "medium" | "large" | "x-large";
 
-const StyledButton = styled.button<{ $size: Size }>`
+const StyledButton = styled.button<{ $size?: Size }>`
   background: none;
   color: var(--vscode-textLink-foreground);
   border: none;

extensions/ql-vscode/src/view/model-alerts/ModelAlertsSort.tsx

@@ -20,7 +20,7 @@ type Props = {
 
 export const ModelAlertsSort = ({ value, onChange, className }: Props) => {
   const handleInput = useCallback(
-    (e: InputEvent) => {
+    (e: Event) => {
       const target = e.target as HTMLSelectElement;
 
       onChange(target.value as SortKey);

extensions/ql-vscode/src/view/model-editor/MethodRow.tsx

@@ -85,7 +85,7 @@ export type MethodRowProps = {
 export const MethodRow = (props: MethodRowProps) => {
   const { method, methodCanBeModeled, revealedMethodSignature } = props;
 
-  const ref = useRef<HTMLElement | undefined>(undefined);
+  const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (method.signature === revealedMethodSignature) {
@@ -103,7 +103,7 @@ export const MethodRow = (props: MethodRowProps) => {
   }
 };
 
-const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
+const ModelableMethodRow = forwardRef<HTMLDivElement, MethodRowProps>(
   (props: MethodRowProps, ref) => {
     const {
       method,
@@ -360,7 +360,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
 ModelableMethodRow.displayName = "ModelableMethodRow";
 
 const UnmodelableMethodRow = forwardRef<
-  HTMLElement | undefined,
+  HTMLDivElement,
   MethodRowProps
 >((props: MethodRowProps, ref) => {
   const { method, viewState, revealedMethodSignature } = props;

extensions/ql-vscode/src/view/model-editor/ModelTypeTextbox.tsx

@@ -1,4 +1,3 @@
-import type { ChangeEvent } from "react";
 import { useCallback, useEffect, useState } from "react";
 import type {
   ModeledMethod,
@@ -33,7 +32,7 @@ export const ModelTypeTextbox = ({
     setValue(modeledMethod[typeInfo]);
   }, [modeledMethod, typeInfo]);
 
-  const handleChange = useCallback((e: ChangeEvent<HTMLSelectElement>) => {
+  const handleChange = useCallback((e: Event) => {
     const target = e.target as HTMLSelectElement;
 
     setValue(target.value);

extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx

@@ -1,4 +1,3 @@
-import type { ChangeEvent } from "react";
 import { useCallback, useEffect, useState } from "react";
 import { styled } from "styled-components";
 import { VscodeCheckbox } from "@vscode-elements/react-elements";
@@ -229,17 +228,18 @@ export const RepoRow = ({
     e.stopPropagation();
   }, []);
   const onChangeCheckbox = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => {
+    (e: Event) => {
+      const target = e.target as HTMLInputElement;
       // This is called on first render, but we don't really care about this value
-      if (e.target.checked === undefined) {
+      if (target.checked === undefined) {
         return;
       }
 
       if (!repository.id) {
         return;
       }
 
-      onSelectedChange?.(repository.id, e.target.checked);
+      onSelectedChange?.(repository.id, target.checked);
     },
     [onSelectedChange, repository],
   );

extensions/ql-vscode/src/view/variant-analysis/RepositoriesFilter.tsx

@@ -20,7 +20,7 @@ type Props = {
 
 export const RepositoriesFilter = ({ value, onChange, className }: Props) => {
   const handleInput = useCallback(
-    (e: InputEvent) => {
+    (e: Event) => {
       const target = e.target as HTMLSelectElement;
 
       onChange(target.value as FilterKey);

extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx

@@ -24,7 +24,7 @@ export const RepositoriesResultFormat = ({
   className,
 }: Props) => {
   const handleInput = useCallback(
-    (e: InputEvent) => {
+    (e: Event) => {
       const target = e.target as HTMLSelectElement;
 
       onChange(target.value as ResultFormat);

extensions/ql-vscode/src/view/variant-analysis/RepositoriesSort.tsx

@@ -20,7 +20,7 @@ type Props = {
 
 export const RepositoriesSort = ({ value, onChange, className }: Props) => {
   const handleInput = useCallback(
-    (e: InputEvent) => {
+    (e: Event) => {
       const target = e.target as HTMLSelectElement;
 
       onChange(target.value as SortKey);