Fix type issues

Author: cephalization

app/src/components/annotation/CategoricalAnnotationInput.tsx

@@ -20,7 +20,11 @@ import { AnnotationConfigCategorical } from "@phoenix/pages/settings/types";
 import { AnnotationInputPropsBase } from "./types";
 
 type CategoricalAnnotationInputProps =
-  AnnotationInputPropsBase<AnnotationConfigCategorical> & SelectProps;
+  AnnotationInputPropsBase<AnnotationConfigCategorical> &
+    Omit<
+      SelectProps<{ label: string; score: number }, "single">,
+      "validate" | "value" | "onChange"
+    >;
 
 export const CategoricalAnnotationInput = forwardRef<
   HTMLButtonElement,
@@ -35,7 +39,7 @@ export const CategoricalAnnotationInput = forwardRef<
       <Select
         id={annotationConfig.id}
         name={annotationConfig.name}
-        defaultSelectedKey={annotation?.label ?? undefined}
+        defaultValue={annotation?.label ?? undefined}
         size="S"
         {...props}
         css={css`

app/src/components/select/Select.tsx

@@ -11,8 +11,10 @@ import { SizeProvider } from "@phoenix/contexts";
 
 import { fieldBaseCSS } from "../field/styles";
 
-export interface SelectProps<T extends object, M extends "single" | "multiple">
-  extends AriaSelectProps<T, M>,
+export interface SelectProps<
+  T extends object = object,
+  M extends "single" | "multiple" = "single",
+> extends AriaSelectProps<T, M>,
     SizingProps,
     StylableProps {}
 

app/src/components/settings/RoleSelect.tsx

@@ -44,7 +44,10 @@ type RoleSelectProps = {
    * Whether the field is invalid
    */
   isInvalid?: boolean;
-} & Omit<SelectProps, "children" | "onSelectionChange" | "selectedKey">;
+} & Omit<
+  SelectProps,
+  "children" | "onSelectionChange" | "selectedKey" | "validate"
+>;
 
 export function RoleSelect({
   onChange,

app/src/pages/embedding/MetricSelector.tsx

@@ -164,8 +164,8 @@ export function MetricSelector({
   );
   const hasNumericDimensions = numericDimensions.length > 0;
   const onSelectionChange = useCallback(
-    (key: Key | null) => {
-      if (!key) {
+    (key: Key | Key[] | null) => {
+      if (!key || typeof key !== "string") {
         return;
       }
       const metricDefinition = parseMetricKey({

app/src/pages/playground/ModelProviderSelect.tsx

@@ -22,7 +22,7 @@ type ModelProviderSelectProps = {
   onChange: (provider: ModelProvider) => void;
   query: ModelProviderSelectFragment$key;
   provider?: ModelProvider;
-} & Omit<SelectProps, "children" | "onChange" | "value">;
+} & Omit<SelectProps, "children" | "onChange" | "value" | "validate">;
 
 export function ModelProviderSelect({
   onChange,