chore(deps-dev): bump eslint-plugin-react from 7.21.5 to 7.33.2 (#6226)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Tom Moor <tom.moor@gmail.com>

app/components/ContextMenu/Template.tsx

@@ -201,7 +201,7 @@ function Template({ items, actions, context, ...menu }: Props) {
         }
 
         if (item.type === "heading") {
-          return <Header>{item.title}</Header>;
+          return <Header key={index}>{item.title}</Header>;
         }
 
         const _exhaustiveCheck: never = item;

app/components/Input.tsx

@@ -111,9 +111,8 @@ export const LabelText = styled.div`
   display: inline-block;
 `;
 
-export type Props = React.InputHTMLAttributes<
-  HTMLInputElement | HTMLTextAreaElement
-> & {
+export interface Props
+  extends React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {
   type?: "text" | "email" | "checkbox" | "search" | "textarea";
   labelHidden?: boolean;
   label?: string;
@@ -130,7 +129,7 @@ export type Props = React.InputHTMLAttributes<
   ) => unknown;
   onFocus?: (ev: React.SyntheticEvent) => unknown;
   onBlur?: (ev: React.SyntheticEvent) => unknown;
-};
+}
 
 function Input(
   props: Props,

app/components/InputSelect.tsx

@@ -46,6 +46,10 @@ export type Props = {
   onChange?: (value: string | null) => void;
 };
 
+interface InnerProps extends React.HTMLAttributes<HTMLDivElement> {
+  placement: Placement;
+}
+
 const getOptionFromValue = (options: Option[], value: string | null) =>
   options.find((option) => option.value === value);
 
@@ -147,11 +151,7 @@ const InputSelect = (props: Props) => {
           )}
         </Select>
         <SelectPopover {...select} {...popOver} aria-label={ariaLabel}>
-          {(
-            props: React.HTMLAttributes<HTMLDivElement> & {
-              placement: Placement;
-            }
-          ) => {
+          {(props: InnerProps) => {
             const topAnchor = props.style?.top === "0";
             const rightAnchor = props.placement === "bottom-end";
 

app/components/LocaleTime.tsx

@@ -20,7 +20,7 @@ function eachMinute(fn: () => void) {
   };
 }
 
-type Props = {
+export type Props = {
   children?: React.ReactNode;
   dateTime: string;
   tooltipDelay?: number;

app/components/SearchPopover.tsx

@@ -17,7 +17,9 @@ import useStores from "~/hooks/useStores";
 import { SearchResult } from "~/types";
 import SearchListItem from "./SearchListItem";
 
-type Props = React.HTMLAttributes<HTMLInputElement> & { shareId: string };
+interface Props extends React.HTMLAttributes<HTMLInputElement> {
+  shareId: string;
+}
 
 function SearchPopover({ shareId }: Props) {
   const { t } = useTranslation();

app/components/Sidebar/Right.tsx

@@ -11,10 +11,10 @@ import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";
 import { sidebarAppearDuration } from "~/styles/animations";
 
-type Props = React.HTMLAttributes<HTMLDivElement> & {
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   border?: boolean;
-};
+}
 
 function Right({ children, border, className }: Props) {
   const theme = useTheme();

app/components/Sidebar/components/NavLink.tsx

@@ -29,7 +29,7 @@ const normalizeToLocation = (
 const joinClassnames = (...classnames: (string | undefined)[]) =>
   classnames.filter((i) => i).join(" ");
 
-export type Props = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+export interface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   activeClassName?: string;
   activeStyle?: React.CSSProperties;
   scrollIntoViewIfNeeded?: boolean;
@@ -40,7 +40,7 @@ export type Props = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
   strict?: boolean;
   to: LocationDescriptor;
   onBeforeClick?: () => void;
-};
+}
 
 /**
  * A <Link> wrapper that clicks extra fast and knows if it's "active" or not.

app/components/Switch.tsx

@@ -5,7 +5,7 @@ import { LabelText } from "~/components/Input";
 import Text from "~/components/Text";
 import { undraggableOnDesktop } from "~/styles";
 
-type Props = React.HTMLAttributes<HTMLInputElement> & {
+interface Props extends React.HTMLAttributes<HTMLInputElement> {
   width?: number;
   height?: number;
   label?: string;
@@ -14,8 +14,7 @@ type Props = React.HTMLAttributes<HTMLInputElement> & {
   checked?: boolean;
   disabled?: boolean;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => unknown;
-  id?: string;
-};
+}
 
 function Switch({
   width = 32,

app/components/Time.tsx

@@ -1,10 +1,11 @@
 import * as React from "react";
 import { dateToRelative } from "@shared/utils/date";
+import type { Props as LocaleTimeProps } from "~/components/LocaleTime";
 import lazyWithRetry from "~/utils/lazyWithRetry";
 
 const LocaleTime = lazyWithRetry(() => import("~/components/LocaleTime"));
 
-type Props = React.ComponentProps<typeof LocaleTime> & {
+type Props = LocaleTimeProps & {
   onClick?: () => void;
 };