feat: updating deprecated ElementRef

[dpaulos6]

This commit replaces the deprecated ElementRef with ComponentRef across the entire project.

• Updated all instances of ElementRef to ComponentRef to adhere to the latest API changes.
• Ensured compatibility and functionality remain intact after the replacement.

[vercel]

@dpaulos6 is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[dpaulos6]

Fixed a conflict on apps/www/public/r/styles/new-york/sidebar.json, where it was still using ElementRef after a recent update. commit 06e74fc

[pablomayobre]

Not sure if this is related....

I tried doing this search and replace on my components but found issues when combining the Input component with react-hook-form.

The register function in react-hook-form returns a RefCallback for the ref prop, which doesn't seem to be compatible with ComponentRef. TypeScript says:

Type '{ id: string; type: "email"; placeholder: string; autoComplete: "email"; required: true; className: string; onChange: ChangeHandler; onBlur: ChangeHandler; ref: RefCallBack; ... 6 more ...; disabled?: boolean | undefined; }' is not assignable to type '{ ref?: RefObject<HTMLInputElement | null> | undefined; }'.

Types of property 'ref' are incompatible.

Type 'RefCallBack' is not assignable to type 'RefObject<HTMLInputElement | null>'.

The code for the Input component

import { cn } from "~/lib/utils";
import * as React from "react";

const Input = ({ ref, className, type, ...props }: React.ComponentProps<"input"> & { ref?: React.RefObject<HTMLInputElement | null> }) => {
    return (
      <input
        type={type}
        className={cn(
          "border-input file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
          className,
        )}
        ref={ref}
        {...props}
      />
    );
  };
Input.displayName = "Input";

export { Input };

And the code for the email field:

function Login () {
  const { register, formState: { errors } } = useForm<{email: string}>({
    resolver: zodResolver(z.object({
      email: z.string().email("Invalid email address").min(1, "Email is required"),
    })),
  });

  return <Input
      {...register("email", { required: true })}
      id="email"
      type="email"
      placeholder="[email protected]"
      autoComplete="email"
      required
      className={cn(errors.email ? "border-red-700" : undefined)}
    />
}