ref(tsc): remove HTMLProps type intersection (#32697)

* ref(tsc): remove HTMLProps type intersection

* ref(hovercard): make handlers optional

* ref(props): alias props and use HTMLAttributes

* fix(tsc): use correct htmlattributes

static/app/components/alert.tsx

@@ -7,7 +7,7 @@ import {IconChevron} from 'sentry/icons';
 import space from 'sentry/styles/space';
 import {Theme} from 'sentry/utils/theme';
 
-export interface AlertProps extends React.HTMLProps<HTMLDivElement> {
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   expand?: React.ReactNode[];
   expandIcon?: React.ReactNode;
   icon?: React.ReactNode;

static/app/components/badge.tsx

@@ -4,12 +4,10 @@ import styled from '@emotion/styled';
 import space from 'sentry/styles/space';
 import type {Theme} from 'sentry/utils/theme';
 
-type Props = React.HTMLProps<HTMLSpanElement> & {
-  children?: React.ReactNode;
-  className?: string;
+interface Props extends React.HTMLAttributes<HTMLSpanElement> {
   text?: string | number | null;
   type?: keyof Theme['badge'];
-};
+}
 
 const Badge = styled(({children, text, ...props}: Props) => (
   <span {...props}>{children ?? text}</span>

static/app/components/charts/loadingPanel.tsx

@@ -3,9 +3,9 @@ import styled from '@emotion/styled';
 
 import LoadingMask from 'sentry/components/loadingMask';
 
-type Props = {
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
   height?: string;
-} & React.HTMLProps<HTMLDivElement>;
+}
 
 const LoadingPanel = styled(({height: _height, ...props}: Props) => (
   <div {...props}>

static/app/components/checkbox.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-const Checkbox = (props: React.HTMLProps<HTMLInputElement>) => (
+const Checkbox = (props: React.InputHTMLAttributes<HTMLInputElement>) => (
   <input type="checkbox" {...props} />
 );
 

static/app/components/checkboxFancy/checkboxFancy.tsx

@@ -5,12 +5,12 @@ import styled from '@emotion/styled';
 import {IconCheckmark, IconSubtract} from 'sentry/icons';
 import {Theme} from 'sentry/utils/theme';
 
-type Props = Omit<React.HTMLProps<HTMLDivElement>, 'size'> & {
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
   isChecked?: boolean;
   isDisabled?: boolean;
   isIndeterminate?: boolean;
   size?: string;
-};
+}
 
 const disabledStyles = (p: Props & {theme: Theme}) =>
   p.isDisabled &&

static/app/components/deprecatedforms/input.tsx

@@ -2,9 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import omit from 'lodash/omit';
 
-type Props = {
-  className?: string;
-} & React.HTMLProps<HTMLInputElement>;
+interface Props extends React.InputHTMLAttributes<HTMLInputElement> {}
 
 export default function Input({className, ...otherProps}: Props) {
   return (

static/app/components/duration.tsx

@@ -2,12 +2,12 @@ import * as React from 'react';
 
 import {getDuration, getExactDuration} from 'sentry/utils/formatters';
 
-type Props = React.HTMLProps<HTMLSpanElement> & {
+interface Props extends React.HTMLAttributes<HTMLSpanElement> {
   seconds: number;
   abbreviation?: boolean;
   exact?: boolean;
   fixedDigits?: number;
-};
+}
 
 const Duration = ({seconds, fixedDigits, abbreviation, exact, ...props}: Props) => (
   <span {...props}>

static/app/components/hovercard.tsx

@@ -127,10 +127,10 @@ function Hovercard(props: HovercardProps): React.ReactElement {
   // If show is not set, then visibility state is uncontrolled
   const isVisible = props.show === undefined ? visible : props.show;
 
-  const hoverProps = useMemo((): Pick<
-    React.HTMLProps<HTMLDivElement>,
-    'onMouseEnter' | 'onMouseLeave'
-  > => {
+  const hoverProps = useMemo((): {
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+  } => {
     // If show is not set, then visibility state is controlled by mouse events
     if (props.show === undefined) {
       return {

static/app/components/menuItem.tsx

@@ -70,7 +70,9 @@ type MenuItemProps = {
   withBorder?: boolean;
 };
 
-type Props = MenuItemProps & Omit<React.HTMLProps<HTMLLIElement>, keyof MenuItemProps>;
+interface Props
+  extends MenuItemProps,
+    Omit<React.HTMLAttributes<HTMLLIElement>, 'onSelect'> {}
 
 const MenuItem = ({
   header,
@@ -168,14 +170,14 @@ const MenuItem = ({
   );
 };
 
-type MenuListItemProps = {
+interface MenuListItemProps extends React.HTMLAttributes<HTMLLIElement> {
   disabled?: boolean;
   divider?: boolean;
   header?: boolean;
   isActive?: boolean;
   noAnchor?: boolean;
   withBorder?: boolean;
-} & React.HTMLProps<HTMLLIElement>;
+}
 
 function getListItemStyles(props: MenuListItemProps & {theme: Theme}) {
   const common = `

static/app/components/navTabs.tsx

@@ -1,12 +1,9 @@
 import * as React from 'react';
 import classnames from 'classnames';
 
-type Props = {
-  className?: string;
+interface NavProps extends React.HTMLAttributes<HTMLUListElement> {
   underlined?: boolean;
-};
-
-type NavProps = Omit<React.HTMLProps<HTMLUListElement>, keyof Props> & Props;
+}
 
 function NavTabs({underlined, className, ...tabProps}: NavProps) {
   const mergedClassName = classnames('nav nav-tabs', className, {