Fix types post-React 19 upgrade

src/components/Avatar/Avatar.stories.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
 
 import { Avatar as AvatarComponent } from "./Avatar";
 
@@ -33,35 +33,38 @@ export default {
   },
 } as Meta<typeof AvatarComponent>;
 
-const Template: StoryFn<typeof AvatarComponent> = (args) => (
-  <AvatarComponent {...args} />
-);
+type Story = StoryObj<typeof AvatarComponent>;
 
-export const Round = Template.bind({});
-Round.args = {
-  type: "round",
+export const Round: Story = {
+  args: {
+    type: "round",
+  },
 };
 
-export const Square = Template.bind({});
-Square.args = {
-  type: "square",
+export const Square: Story = {
+  args: {
+    type: "square",
+  },
 };
 
-export const Button = Template.bind({});
-Button.args = {
-  type: "round",
-  onClick: () => console.log("clicked!"),
+export const Button: Story = {
+  args: {
+    type: "round",
+    onClick: () => console.log("clicked!"),
+  },
 };
 
-export const NoImageFallback = Template.bind({});
-NoImageFallback.args = {
-  src: "",
+export const NoImageFallback: Story = {
+  args: {
+    src: "",
+  },
 };
 
-export const LargeNoImageFallback = Template.bind({});
-LargeNoImageFallback.args = {
-  src: "",
-  size: "128px",
+export const LargeNoImageFallback: Story = {
+  args: {
+    src: "",
+    size: "128px",
+  },
 };
 
 const ImageLessCollection: StoryFn<typeof AvatarComponent> = (args) => (
@@ -81,8 +84,10 @@ const ImageLessCollection: StoryFn<typeof AvatarComponent> = (args) => (
   </>
 );
 
-export const AllAvatars = ImageLessCollection.bind({});
-AllAvatars.args = {
-  src: "",
-  size: "36px",
+export const AllAvatars: Story = {
+  render: ImageLessCollection,
+  args: {
+    src: "",
+    size: "36px",
+  },
 };

src/components/Avatar/Avatar.tsx

@@ -15,20 +15,16 @@ limitations under the License.
 */
 
 import classnames from "classnames";
-import React, { forwardRef } from "react";
+import React, { ComponentProps, forwardRef } from "react";
 import { getInitialLetter } from "../../utils/string";
-import { SuspenseImg } from "../../utils/SuspenseImg";
 import styles from "./Avatar.module.css";
 import { useIdColorHash } from "./useIdColorHash";
 
-type AvatarProps = (
-  | JSX.IntrinsicElements["button"]
-  | JSX.IntrinsicElements["span"]
-) & {
+type AvatarProps = (ComponentProps<"button"> | ComponentProps<"span">) & {
   /**
    * The avatar image URL, if any.
    */
-  src?: React.ComponentProps<typeof SuspenseImg>["src"];
+  src?: React.ComponentProps<"img">["src"];
   /**
    * The Matrix ID, Room ID, or Alias to generate the color when no image source
    * is provided. Also used as a fallback when name is empty.
@@ -62,7 +58,7 @@ type AvatarProps = (
   /**
    * Callback when the image has failed to load.
    */
-  onError?: React.ComponentProps<typeof SuspenseImg>["onError"];
+  onError?: React.ComponentProps<"img">["onError"];
 };
 
 /**

src/components/Button/IconButton/IconButton.tsx

@@ -18,43 +18,41 @@ import React, { PropsWithChildren, forwardRef } from "react";
 import classnames from "classnames";
 
 import styles from "./IconButton.module.css";
-import { UnstyledButton } from "../UnstyledButton";
-import { UnstyledButtonPropsFor } from "../UnstyledButton";
+import { UnstyledButton, UnstyledButtonPropsFor } from "../UnstyledButton";
 import { IndicatorIcon } from "../../Icon/IndicatorIcon/IndicatorIcon";
 import { Tooltip } from "../../Tooltip/Tooltip";
 
-type IconButtonProps = UnstyledButtonPropsFor<"button"> &
-  JSX.IntrinsicElements["button"] & {
-    /**
-     * The CSS class name.
-     */
-    className?: string;
-    /**
-     * The size of the button in CSS units, e.g. `"24px"`.
-     * Note that this is the size of the *button* itself: the icon will be 0.75 * this size
-     * @default 32px
-     */
-    size?: CSSStyleDeclaration["height"];
-    /**
-     * The icon button indicator dot displayed on the top right
-     * As in IndicatorIcon
-     */
-    indicator?: "default" | "success" | "critical";
-    /**
-     * Whether the button is interactable
-     */
-    disabled?: boolean;
-    /**
-     * Whether this button triggers a destructive action.
-     * @default false
-     */
-    destructive?: boolean;
-    /**
-     * Optional tooltip for the button
-     */
-    tooltip?: string;
-    subtleBackground?: boolean;
-  };
+type IconButtonProps = UnstyledButtonPropsFor<"button"> & {
+  /**
+   * The CSS class name.
+   */
+  className?: string;
+  /**
+   * The size of the button in CSS units, e.g. `"24px"`.
+   * Note that this is the size of the *button* itself: the icon will be 0.75 * this size
+   * @default 32px
+   */
+  size?: CSSStyleDeclaration["height"];
+  /**
+   * The icon button indicator dot displayed on the top right
+   * As in IndicatorIcon
+   */
+  indicator?: "default" | "success" | "critical";
+  /**
+   * Whether the button is interactable
+   */
+  disabled?: boolean;
+  /**
+   * Whether this button triggers a destructive action.
+   * @default false
+   */
+  destructive?: boolean;
+  /**
+   * Optional tooltip for the button
+   */
+  tooltip?: string;
+  subtleBackground?: boolean;
+};
 
 /**
  * Display an icon as a button. Can render an indicator

src/components/Dropdown/Dropdown.tsx

@@ -268,10 +268,10 @@ const DropdownItem = memo(function DropdownItem({
 function useOpen(): [
   boolean,
   Dispatch<SetStateAction<boolean>>,
-  RefObject<HTMLDivElement>,
+  RefObject<HTMLDivElement | null>,
 ] {
   const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
+  const ref = useRef<HTMLDivElement | null>(null);
 
   // If the user clicks outside the dropdown, close it
   useEffect(() => {

src/components/Form/Controls/EditInPlace/EditInPlace.tsx

@@ -201,7 +201,9 @@ export const EditInPlace = forwardRef<HTMLInputElement, Props>(
     const shouldShowSaveButton =
       state === State.Dirty || state === State.Saving || isFocusWithin;
 
-    const hideTimer = useRef<ReturnType<typeof setTimeout>>();
+    const hideTimer = useRef<ReturnType<typeof setTimeout> | undefined>(
+      undefined,
+    );
 
     useEffect(() => {
       // Start a timer when we switch to the saved state

src/components/Form/PasswordForm.stories.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta } from "@storybook/react";
 import WarningIcon from "@vector-im/compound-design-tokens/assets/web/icons/warning";
 
 import {
@@ -35,7 +35,7 @@ export default {
   tags: ["autodocs"],
   subcomponents: { Progress, PasswordControl, Label, Field },
   decorators: [
-    (Story: StoryFn) => (
+    (Story) => (
       <TooltipProvider>
         <div style={{ maxWidth: "378px" }}>
           <Story />

src/components/Menu/MenuItem.stories.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta } from "@storybook/react";
 import ExtensionsIcon from "@vector-im/compound-design-tokens/assets/web/icons/extensions";
 import ChatIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat";
 import SettingsLabel from "@vector-im/compound-design-tokens/assets/web/icons/settings";
@@ -40,7 +40,7 @@ export default {
     Icon: ChatIcon,
   },
   decorators: [
-    (Story: StoryFn) => (
+    (Story) => (
       <div style={{ width: 300 }}>
         <Story />
       </div>

src/components/Menu/MenuItem.tsx

@@ -89,7 +89,7 @@ export const MenuItem = <C extends MenuItemElement = "button">({
   onClick: onClickProp,
   disabled,
   ...props
-}: Props<C>): JSX.Element => {
+}: Props<C>): React.ReactElement => {
   const Component = as ?? ("button" as ElementType);
   const context = useContext(MenuContext);
 

src/components/Nav/NavItem.stories.tsx

@@ -16,10 +16,10 @@ limitations under the License.
 */
 
 import React from "react";
+import { Meta } from "@storybook/react";
 
 import { NavItem } from "./NavItem";
 import { NavBar } from ".";
-import { StoryFn } from "@storybook/react";
 
 export default {
   title: "Nav/Nav Item",
@@ -31,7 +31,7 @@ export default {
     },
   },
   decorators: [
-    (Story: StoryFn) => (
+    (Story) => (
       <NavBar aria-label="Testing">
         <Story />
       </NavBar>
@@ -43,7 +43,7 @@ export default {
       url: "https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=669-2723&mode=design&t=9Hy0h7BBDH0kJ2Ow-0",
     },
   },
-};
+} satisfies Meta<typeof NavItem>;
 
 export const Default = {
   args: {

src/components/ReleaseAnnouncement/ReleaseAnnouncement.tsx

@@ -106,11 +106,10 @@ function ReleaseAnnouncementAnchor({
     children,
     context.getReferenceProps({
       ref,
-      ...children.props,
       // If the ReleaseAnnouncement is open, we need manually aria-describedby.
       // The RA has the dialog role and it's not adding automatically the aria-describedby.
       ...(context.open && {
-        "aria-describedby": context.getFloatingProps().id,
+        "aria-describedby": context.getFloatingProps().id as string,
       }),
     }),
   );

src/components/Tooltip/Tooltip.stories.tsx

@@ -60,7 +60,7 @@ export default {
     ),
   },
   decorators: [
-    (Story: StoryFn) => (
+    (Story) => (
       <div style={{ padding: 100 }}>
         <TooltipProvider>
           <Story />

src/components/Tooltip/Tooltip.tsx

@@ -184,7 +184,7 @@ const TooltipAnchor: FC<TooltipAnchorProps> = ({
     if (!isValidElement(children)) return;
 
     if (isTriggerInteractive) {
-      const props = context.getReferenceProps({ ref, ...children.props });
+      const props = context.getReferenceProps({ ref });
       return cloneElement(children, props);
     } else {
       // For a non-interactive trigger, we want most of the props to go on the
@@ -202,7 +202,7 @@ const TooltipAnchor: FC<TooltipAnchorProps> = ({
       } = props;
       return (
         <span tabIndex={nonInteractiveTriggerTabIndex} {...spanProps}>
-          {cloneElement(children as ReactElement, {
+          {cloneElement(children as ReactElement<Record<string, unknown>>, {
             "aria-labelledby": labelId,
             "aria-describedby": descriptionId,
           })}

src/components/Tooltip/useTooltip.ts

@@ -183,7 +183,7 @@ export function useTooltip({
   });
 
   // On touch screens, show the tooltip on a long press
-  const pressTimer = useRef<number>();
+  const pressTimer = useRef<number | undefined>(undefined);
   useEffect(() => () => window.clearTimeout(pressTimer.current), []);
   const press = useMemo(() => {
     const onTouchEnd = () => {