Fix TypeScript type errors for @vscode-elements API changes

This commit fixes TypeScript type errors in view components caused by
breaking changes in the @vscode-elements/react-elements library that
was updated as part of the Storybook 10 upgrade.

Problem:
The @vscode-elements/react-elements library changed its event handler
types and component prop APIs:

1. Event handlers now expect native DOM Event types (Event, InputEvent)
   instead of React's synthetic event types (ChangeEvent<T>). The
   library uses Lit web components which emit native events, not React
   synthetic events.

2. VscodeButton's API changed from `appearance="primary"` to
   `secondary={false}` for primary button styling.

3. Component refs must use specific element types (HTMLDivElement)
   instead of generic HTMLElement | undefined.

TypeScript Errors Fixed:
- 11 event handler type mismatches where code used ChangeEvent or
  InputEvent when Event was expected
- 1 VscodeButton prop error (appearance doesn't exist)
- 4 ref type errors (HTMLElement | undefined vs HTMLDivElement)

Changes by Category:

Event Handler Fixes:
- CodeFlowsDropdown.tsx: Changed ChangeEvent<HTMLSelectElement> to Event
- ModelTypeTextbox.tsx: Changed ChangeEvent<HTMLSelectElement> to InputEvent
- ModelAlertsSort.tsx: Changed InputEvent to Event
- RepositoriesFilter.tsx: Changed InputEvent to Event
- RepositoriesResultFormat.tsx: Changed InputEvent to Event
- RepositoriesSort.tsx: Changed InputEvent to Event
- RepoRow.tsx: Changed ChangeEvent<HTMLInputElement> to Event

All event handlers now cast e.target to the appropriate element type
(HTMLSelectElement, HTMLInputElement) to access properties like .value
and .checked.

Component API Fixes:
- VariantAnalysisActions.tsx: Changed `appearance="primary"` to
  `secondary={false}` on VscodeButton

Ref Type Fixes:
- DataGrid.tsx: Changed DataGridRow and DataGridCell ref types from
  `React.Ref<HTMLElement | undefined>` to `React.Ref<HTMLDivElement>`
- TextButton.tsx: Made $size prop optional in styled component
- MethodRow.tsx: Changed ModelableMethodRow and UnmodelableMethodRow
  forwardRef types from `HTMLElement | undefined` to `HTMLDivElement`,
  and changed useRef from `useRef<HTMLElement | undefined>(undefined)`
  to `useRef<HTMLDivElement>(null)`

These changes align the codebase with the updated @vscode-elements
library APIs while maintaining the same runtime behavior.

Files modified:
- extensions/ql-vscode/src/view/common/CodePaths/CodeFlowsDropdown.tsx
- extensions/ql-vscode/src/view/common/DataGrid.tsx
- extensions/ql-vscode/src/view/common/TextButton.tsx
- extensions/ql-vscode/src/view/model-alerts/ModelAlertsSort.tsx
- extensions/ql-vscode/src/view/model-editor/MethodRow.tsx
- extensions/ql-vscode/src/view/model-editor/ModelTypeTextbox.tsx
- extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx
- extensions/ql-vscode/src/view/variant-analysis/RepositoriesFilter.tsx
- extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx
- extensions/ql-vscode/src/view/variant-analysis/RepositoriesSort.tsx
- extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisActions.tsx

Author: d10c

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,
@@ -359,39 +359,38 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
 );
 ModelableMethodRow.displayName = "ModelableMethodRow";
 
-const UnmodelableMethodRow = forwardRef<
-  HTMLElement | undefined,
-  MethodRowProps
->((props: MethodRowProps, ref) => {
-  const { method, viewState, revealedMethodSignature } = props;
-
-  const jumpToMethod = useCallback(
-    () => sendJumpToMethodMessage(method),
-    [method],
-  );
-
-  return (
-    <DataGridRow
-      data-testid="unmodelable-method-row"
-      focused={revealedMethodSignature === method.signature}
-    >
-      <DataGridCell ref={ref}>
-        <ApiOrMethodRow>
-          <ModelingStatusIndicator status="saved" />
-          <MethodClassifications method={method} />
-          <MethodName {...props.method} />
-          {viewState.mode === Mode.Application && (
-            <UsagesButton onClick={jumpToMethod}>
-              {method.usages.length}
-            </UsagesButton>
-          )}
-          <ViewLink onClick={jumpToMethod}>View</ViewLink>
-        </ApiOrMethodRow>
-      </DataGridCell>
-      <DataGridCell gridColumn="span 5">Method already modeled</DataGridCell>
-    </DataGridRow>
-  );
-});
+const UnmodelableMethodRow = forwardRef<HTMLDivElement, MethodRowProps>(
+  (props: MethodRowProps, ref) => {
+    const { method, viewState, revealedMethodSignature } = props;
+
+    const jumpToMethod = useCallback(
+      () => sendJumpToMethodMessage(method),
+      [method],
+    );
+
+    return (
+      <DataGridRow
+        data-testid="unmodelable-method-row"
+        focused={revealedMethodSignature === method.signature}
+      >
+        <DataGridCell ref={ref}>
+          <ApiOrMethodRow>
+            <ModelingStatusIndicator status="saved" />
+            <MethodClassifications method={method} />
+            <MethodName {...props.method} />
+            {viewState.mode === Mode.Application && (
+              <UsagesButton onClick={jumpToMethod}>
+                {method.usages.length}
+              </UsagesButton>
+            )}
+            <ViewLink onClick={jumpToMethod}>View</ViewLink>
+          </ApiOrMethodRow>
+        </DataGridCell>
+        <DataGridCell gridColumn="span 5">Method already modeled</DataGridCell>
+      </DataGridRow>
+    );
+  },
+);
 UnmodelableMethodRow.displayName = "UnmodelableMethodRow";
 
 function sendJumpToMethodMessage(method: Method) {

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,8 +32,8 @@ export const ModelTypeTextbox = ({
     setValue(modeledMethod[typeInfo]);
   }, [modeledMethod, typeInfo]);
 
-  const handleChange = useCallback((e: ChangeEvent<HTMLSelectElement>) => {
-    const target = e.target as HTMLSelectElement;
+  const handleChange = useCallback((e: InputEvent) => {
+    const target = e.target as HTMLInputElement;
 
     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);