web: 3072 fix TypeScript typings for popover portal, selector refs, and owner info (#3080)

* web: fix TypeScript typings for popover portal, selector refs, and owner info

- replace deprecated/invalid Radix portal type with PopoverPortalProps
- avoid cloneElement ref injection by passing ref via renderInput props contract
- make OwnerInfo.avatar_url optional to match internal API response shape

* fix: 3072 remove unused import

Author: labeebahmad201

apps/web/components/Analyze/utils.ts

@@ -17,7 +17,7 @@ export interface OwnerInfo {
   id: number;
   bio: string;
   public_repos: number;
-  avatar_url: string;
+  avatar_url?: string;
 }
 
 export const getOwnerInfo = (owner: string): Promise<OwnerInfo> => {

apps/web/components/ui/components/InputPopover/InputPopover.tsx

@@ -10,7 +10,7 @@ export interface InputPopoverProps {
   input: ReactElement;
   popperContent: ReactNode;
 
-  popoverPortalProps?: Omit<RuiPopover.PortalProps, 'children'>;
+  popoverPortalProps?: Omit<RuiPopover.PopoverPortalProps, 'children'>;
   popoverContentProps?: Omit<RuiPopover.PopoverContentProps, 'children' | 'onOpenAutoFocus'>;
 }
 

apps/web/components/ui/components/RemoteSelector/RemoteSelector.tsx

@@ -1,7 +1,8 @@
-import { ChangeEvent, cloneElement, FocusEvent, MouseEvent, ReactElement, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { ChangeEvent, FocusEvent, MouseEvent, ReactElement, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { InputPopover, InputPopoverProps } from '../InputPopover';
 import { RemoteSelectedItem } from './RemoteSelectedItem';
 import { useRemoteList, UseRemoteListOptions } from './useRemoteList';
+import { Ref } from 'react';
 
 export interface RemoteSelectorProps<Item> extends UseRemoteListOptions<Item>, Pick<InputPopoverProps, 'popoverContentProps' | 'popoverPortalProps'> {
   value: Item[];
@@ -47,6 +48,7 @@ export interface RemoteSelectorInputProps {
   onBlur: (event: FocusEvent<HTMLInputElement>) => void;
   disabled?: boolean;
   placeholder?: string;
+  ref: Ref<HTMLInputElement>;
 }
 
 export interface RemoteSelectorListProps {
@@ -165,16 +167,16 @@ export function RemoteSelector<Item> ({
         <InputPopover
           open={open}
           onOpenChange={onOpenChange}
-          input={cloneElement(
+          input={
             renderInput({
               id,
               value: input,
               onChange: onInputChange,
               onFocus: onInputFocus,
               onBlur: onInputBlur,
-            }),
-            { ref: inputRef }
-          )}
+              ref: inputRef,
+            })
+          }
           popperContent={renderChildren()}
           popoverPortalProps={popoverPortalProps}
           popoverContentProps={popoverContentProps}
@@ -187,7 +189,7 @@ export function RemoteSelector<Item> ({
       <InputPopover
         open={open}
         onOpenChange={onOpenChange}
-        input={cloneElement(renderInput({ id, value: input, onChange: onInputChange, onFocus: onInputFocus, onBlur: onInputBlur }), { ref: inputRef })}
+        input={renderInput({ id, value: input, onChange: onInputChange, onFocus: onInputFocus, onBlur: onInputBlur, ref: inputRef })}
         popperContent={renderChildren()}
         popoverPortalProps={popoverPortalProps}
         popoverContentProps={popoverContentProps}

apps/web/components/ui/hooks/useDebouncedCallback.ts

@@ -8,7 +8,7 @@ export type DebouncedOptions = {
 }
 
 export function useDebouncedCallback<Fn extends (...args: any[]) => void> (fn: Fn, { timeout }: DebouncedOptions) {
-  const debouncedHandle = useRef<ReturnType<typeof setTimeout>>();
+  const debouncedHandle = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   fn = useLatestValue(fn);
 
   const debouncedFn = useCallback((...params: Parameters<Fn>) => {