Revert to more specific React event types for better type safety

- Reverted CodeFlowsDropdown to use ChangeEvent<HTMLSelectElement>
- Reverted DataGrid refs to use React.Ref<HTMLElement | undefined>
- Reverted RepoRow to use ChangeEvent<HTMLInputElement>
- Reverted ModelAlertsSort, RepositoriesFilter, RepositoriesResultFormat, RepositoriesSort to use InputEvent
- Reverted TextButton to use required $size prop instead of optional
- Reverted MethodRow refs to use HTMLElement | undefined instead of HTMLDivElement
- Reverted UnmodelableMethodRow indentation to original format

These changes maintain better type safety with specific React event types while ensuring Storybook 10 compatibility.

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 { SetStateAction } from "react";
+import type { ChangeEvent, SetStateAction } from "react";
 import { useCallback } from "react";
 import {
   VscodeOption,
@@ -25,8 +25,8 @@ export const CodeFlowsDropdown = ({
   setSelectedCodeFlow,
 }: CodeFlowsDropdownProps) => {
   const handleChange = useCallback(
-    (e: Event) => {
-      const selectedOption = e.target as HTMLSelectElement;
+    (e: ChangeEvent<HTMLSelectElement>) => {
+      const selectedOption = e.target;
       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<HTMLDivElement>,
+    ref?: React.Ref<HTMLElement | undefined>,
   ) => (
     <StyledDataGridRow
       $focused={focused}
@@ -135,7 +135,7 @@ export const DataGridCell = forwardRef(
       className,
       children,
     }: DataGridCellProps,
-    ref?: React.Ref<HTMLDivElement>,
+    ref?: React.Ref<HTMLElement | undefined>,
   ) => {
     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: Event) => {
+    (e: InputEvent) => {
       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<HTMLDivElement>(null);
+  const ref = useRef<HTMLElement | undefined>(undefined);
 
   useEffect(() => {
     if (method.signature === revealedMethodSignature) {
@@ -103,7 +103,7 @@ export const MethodRow = (props: MethodRowProps) => {
   }
 };
 
-const ModelableMethodRow = forwardRef<HTMLDivElement, MethodRowProps>(
+const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
   (props: MethodRowProps, ref) => {
     const {
       method,
@@ -359,8 +359,10 @@ const ModelableMethodRow = forwardRef<HTMLDivElement, MethodRowProps>(
 );
 ModelableMethodRow.displayName = "ModelableMethodRow";
 
-const UnmodelableMethodRow = forwardRef<HTMLDivElement, MethodRowProps>(
-  (props: MethodRowProps, ref) => {
+const UnmodelableMethodRow = forwardRef<
+  HTMLElement | undefined,
+  MethodRowProps
+>((props: MethodRowProps, ref) => {
     const { method, viewState, revealedMethodSignature } = props;
 
     const jumpToMethod = useCallback(

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

@@ -228,18 +228,17 @@ export const RepoRow = ({
     e.stopPropagation();
   }, []);
   const onChangeCheckbox = useCallback(
-    (e: Event) => {
-      const target = e.target as HTMLInputElement;
+    (e: ChangeEvent<HTMLInputElement>) => {
       // This is called on first render, but we don't really care about this value
-      if (target.checked === undefined) {
+      if (e.target.checked === undefined) {
         return;
       }
 
       if (!repository.id) {
         return;
       }
 
-      onSelectedChange?.(repository.id, target.checked);
+      onSelectedChange?.(repository.id, e.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: Event) => {
+    (e: InputEvent) => {
       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: Event) => {
+    (e: InputEvent) => {
       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: Event) => {
+    (e: InputEvent) => {
       const target = e.target as HTMLSelectElement;
 
       onChange(target.value as SortKey);