build(deps-dev): bump react and @types/react

package.json

@@ -59,6 +59,9 @@
     "typescript-eslint": "^8.54.0"
   },
   "resolutions": {
+    "@emotion/react": "11.14.0",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
     "serialize-javascript": "7.0.3",
     "tar": "7.5.11"
   }

packages/components/package.json

@@ -102,9 +102,9 @@
     "@types/identity-obj-proxy": "^3",
     "@types/jest": "^29.5.14",
     "@types/numeral": "^2",
-    "@types/react": "^19",
+    "@types/react": "^19.2.14",
     "@types/react-copy-to-clipboard": "^5",
-    "@types/react-dom": "^19",
+    "@types/react-dom": "^19.2.3",
     "@types/react-loader": "^2",
     "@types/rollup-plugin-peer-deps-external": "^2",
     "@typescript-eslint/eslint-plugin": "^8.59.1",
@@ -124,8 +124,8 @@
     "postcss-modules": "^6.0.1",
     "postcss-preset-env": "^10.4.0",
     "prettier": "^3.8.3",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "react-markdown": "^10.1.0",
     "react-select": "^5.10.2",
     "react-select-event": "^5.5.1",

packages/components/src/ButtonWithPopup/index.tsx

@@ -37,7 +37,7 @@ export default function ButtonWithPopup({
       offsetX={triggerText ? 32 : 0}
       contentStyle={{ width: "10rem" }}
       closeOnDocumentClick
-      trigger={open =>
+      trigger={(open: boolean) =>
         getTriggerButton(
           open,
           triggerText,
@@ -58,7 +58,7 @@ function getTriggerButton(
   triggerText?: string,
   buttonClassName?: string,
   dataCy?: string,
-): JSX.Element {
+): React.JSX.Element {
   return (
     <button
       type="button"

packages/components/src/CommentForm/Inner.tsx

@@ -11,10 +11,10 @@ type Props = CommonProps & {
 };
 
 export default function InnerCommentForm(props: Props) {
-  const onKeyDown = async (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    const enterKey = e.keyCode === KeyCodes.ENTER;
+  const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    const enterKey = (e.keyCode as KeyCodes) === KeyCodes.ENTER;
     if (enterKey && (e.ctrlKey || e.metaKey)) {
-      await props.onSubmit(e);
+      props.onSubmit(e);
     }
   };
 

packages/components/src/CommentForm/types.ts

@@ -3,7 +3,7 @@ import { ReactNode, SyntheticEvent } from "react";
 export type CommonProps = {
   children?: ReactNode;
   ["data-cy"]?: string;
-  onSubmit: (e: SyntheticEvent) => Promise<void>;
+  onSubmit: (e: SyntheticEvent) => void;
   profPic?: ReactNode;
   comment: string;
   setComment: (c: string) => void;

packages/components/src/ErrorMsg/context.tsx

@@ -3,12 +3,12 @@ import React, { createContext, useCallback, useContext, useMemo } from "react";
 type Props = {
   children: React.ReactNode;
   improveErrorMsgFn?: (m: string) => string;
-  renderDifferentComp?: (m: string) => JSX.Element | null;
+  renderDifferentComp?: (m: string) => React.JSX.Element | null;
 };
 
 type ErrorMsgContextType = {
   improveErrorMsg: (m: string) => string;
-  renderDifferentComp?: (m: string) => JSX.Element | null;
+  renderDifferentComp?: (m: string) => React.JSX.Element | null;
 };
 
 const ErrorMsgContext = createContext<ErrorMsgContextType>({

packages/components/src/FormSelect/Async.tsx

@@ -19,7 +19,7 @@ export default function FormSelectAsync<
   rounded = false,
   forMobile = false,
   ...props
-}: AsyncProps<T, OptionType, IsMulti>): JSX.Element {
+}: AsyncProps<T, OptionType, IsMulti>): React.JSX.Element {
   const styles = getCustomStyles<T, OptionType, IsMulti>(
     mono,
     light,

packages/components/src/FormSelect/Grouped.tsx

@@ -21,7 +21,7 @@ export default function FormSelectGrouped<
   forMobile = false,
   selectedOptionFirst = false,
   ...props
-}: GroupedProps<T, OptionType, IsMulti>): JSX.Element {
+}: GroupedProps<T, OptionType, IsMulti>): React.JSX.Element {
   const [selectedGroupIndex, setSelectedGroupIndex] = useState(0);
 
   const styles = getCustomStyles<T, OptionType, IsMulti>(

packages/components/src/FormSelect/components/CustomOption.tsx

@@ -11,7 +11,7 @@ type Props<OptionType> = {
 export default function CustomOption<T, OptionType extends Option<T>>(
   props: Props<OptionType>,
 ) {
-  const label = `${props.labelPrefix}-${props.data.value}`;
+  const label = `${props.labelPrefix}-${String(props.data.value)}`;
   return (
     <div
       className={cx({

packages/components/src/FormSelect/components/MenuList.tsx

@@ -27,7 +27,10 @@ export default function MenuList<
       return false;
     }
     if (!React.isValidElement(group)) return false;
-    return (group.props as any).data?.label === activeGroup?.label;
+    return (
+      (group.props as { data?: { label?: string } }).data?.label ===
+      activeGroup?.label
+    );
   });
 
   return (

packages/components/src/FormSelect/components/Option.tsx

@@ -10,7 +10,7 @@ export default function OptionComponent<
   T,
   OptionType extends Option<T>,
   IsMulti extends boolean,
->(props: OptionProps<OptionType, IsMulti>): JSX.Element {
+>(props: OptionProps<OptionType, IsMulti>): React.JSX.Element {
   return (
     <components.Option {...props}>
       <CustomOption data={props.data} labelPrefix="select-option" />
@@ -22,7 +22,7 @@ export function OptionForGroup<
   T,
   OptionType extends OptionTypeBase<T>,
   IsMulti extends boolean,
->(props: OptionProps<OptionType, IsMulti>): JSX.Element {
+>(props: OptionProps<OptionType, IsMulti>): React.JSX.Element {
   return (
     <components.Option {...props} className={css.option}>
       <FiCheck

packages/components/src/FormSelect/index.tsx

@@ -27,7 +27,7 @@ function FormSelect<T>({
   rounded = false,
   forMobile = false,
   ...props
-}: Props<T, Option<T>>): JSX.Element {
+}: Props<T, Option<T>>): React.JSX.Element {
   const styles = getCustomStyles<T, Option<T>, false>(
     mono,
     light,

packages/components/src/FormSelect/utils.ts

@@ -69,7 +69,7 @@ export function moveSelectedToTopForGroup<
   OptionType extends OptionTypeBase<T>,
 >(
   selectedVal: PropsValue<OptionType> | undefined,
-  options?: OptionsOrGroups<OptionType, GroupBase<OptionType>> | undefined,
+  options?: OptionsOrGroups<OptionType, GroupBase<OptionType>>,
 ): OptionsOrGroups<OptionType, GroupBase<OptionType>> | undefined {
   if (!selectedVal || !options) {
     return options ?? [];
@@ -115,7 +115,7 @@ export function findTabIndexForValue<
   OptionType extends OptionTypeBase<T> = Option<T>,
 >(
   options: OptionsOrGroups<OptionType, GroupBase<OptionType>> | undefined,
-  value?: PropsValue<OptionType> | undefined,
+  value?: PropsValue<OptionType>,
 ): number {
   if (!options || !value) return -1;
 

packages/components/src/Modal/ForForm.tsx

@@ -3,7 +3,7 @@ import { ModalButtons, ModalInner, ModalOuter, OuterProps } from ".";
 import Button from "../Button";
 
 type Props = OuterProps & {
-  onSubmit: (e: SyntheticEvent) => void | Promise<void>;
+  onSubmit: (e: SyntheticEvent) => void;
   err?: Error;
 
   // Button props

packages/components/src/Modal/index.tsx

@@ -8,14 +8,14 @@ import ErrorMsg from "../ErrorMsg";
 import css from "./index.module.css";
 
 type ButtonProps = {
-  onRequestClose: () => void | Promise<void>;
+  onRequestClose: () => void;
   children?: ReactNode;
   err?: Error;
   pill?: boolean;
 };
 
 export type OuterProps = {
-  onRequestClose: () => void | Promise<void>;
+  onRequestClose: () => void;
   children: ReactNode;
   title: string;
   className?: string;

packages/components/src/QueryHandler/index.tsx

@@ -32,14 +32,18 @@ export default function QueryHandler<Q extends object>({
 }: HandlerProps<Q>): ReactElement {
   if (loading) {
     return loaderComponent ? (
-      React.cloneElement(loaderComponent, { loaded: false } as any)
+      React.cloneElement(loaderComponent as ReactElement<{ loaded: boolean }>, {
+        loaded: false,
+      })
     ) : (
       <Loader loaded={false} />
     );
   }
   if (error) {
     return errComponent ? (
-      React.cloneElement(errComponent, { error } as any)
+      React.cloneElement(errComponent as ReactElement<{ error: Error }>, {
+        error,
+      })
     ) : (
       <ErrorMsg err={error} />
     );

packages/components/src/TextareaWithMarkdown/index.tsx

@@ -15,7 +15,9 @@ type Props = {
   onBlur?: () => void;
   maxLength?: number;
   inputref?: React.RefObject<HTMLTextAreaElement | null>;
-  onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => Promise<void>;
+  onKeyDown?: (
+    e: React.KeyboardEvent<HTMLTextAreaElement>,
+  ) => void | Promise<void>;
   ["aria-label"]?: string;
   className?: string;
   name?: string;

packages/components/src/__stories__/FormSelect.stories.tsx

@@ -32,12 +32,14 @@ export const Default: Story = {
     const select = canvas.getByRole("combobox");
     await userEvent.click(select);
 
-    options.forEach(async option => {
-      const optionLabel = await canvas.findByLabelText(
-        `select-option-${option.value}`,
-      );
-      await expect(optionLabel).toHaveTextContent(option.label);
-    });
+    await Promise.all(
+      options.map(async option => {
+        const optionLabel = await canvas.findByLabelText(
+          `select-option-${option.value}`,
+        );
+        await expect(optionLabel).toHaveTextContent(option.label);
+      }),
+    );
   },
 };
 

packages/components/src/__stories__/FormSelectAsync.stories.tsx

@@ -35,12 +35,14 @@ export const Default: Story = {
     const select = canvas.getByRole("combobox");
     await userEvent.click(select);
 
-    options.forEach(async option => {
-      const optionLabel = await canvas.findByLabelText(
-        `select-option-${option.value}`,
-      );
-      await expect(optionLabel).toHaveTextContent(option.label);
-    });
+    await Promise.all(
+      options.map(async option => {
+        const optionLabel = await canvas.findByLabelText(
+          `select-option-${option.value}`,
+        );
+        await expect(optionLabel).toHaveTextContent(option.label);
+      }),
+    );
   },
 };
 

packages/components/src/__stories__/FormSelectGrouped.stories.tsx

@@ -49,22 +49,26 @@ export const Default: Story = {
     const select = canvas.getByRole("combobox");
     await userEvent.click(select);
 
-    options[0].options.forEach(async option => {
-      const optionLabel = await canvas.findByLabelText(
-        `select-option-${option.value}`,
-      );
-      await expect(optionLabel).toHaveTextContent(option.label);
-    });
+    await Promise.all(
+      options[0].options.map(async option => {
+        const optionLabel = await canvas.findByLabelText(
+          `select-option-${option.value}`,
+        );
+        await expect(optionLabel).toHaveTextContent(option.label);
+      }),
+    );
 
     const secondTab = canvas.getByText(options[1].label);
     await userEvent.click(secondTab);
 
-    options[1].options.forEach(async option => {
-      const optionLabel = await canvas.findByLabelText(
-        `select-option-${option.value}`,
-      );
-      await expect(optionLabel).toHaveTextContent(option.label);
-    });
+    await Promise.all(
+      options[1].options.map(async option => {
+        const optionLabel = await canvas.findByLabelText(
+          `select-option-${option.value}`,
+        );
+        await expect(optionLabel).toHaveTextContent(option.label);
+      }),
+    );
   },
 };
 

packages/components/src/__tests__/FormSelect.test.tsx

@@ -1,5 +1,5 @@
 import { loremer, nTimes, randomArrayItem } from "@dolthub/web-utils";
-import { queryByAttribute, screen } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 import { UserEvent } from "@testing-library/user-event";
 import React from "react";
 import selectEvent from "react-select-event";
@@ -71,17 +71,13 @@ async function runRenderTests(
 async function runSelectedOptionFirstTests(
   selected: StringOption,
   user: UserEvent,
-  container: HTMLElement,
 ) {
   expect(await screen.findByText(selected.value)).toBeVisible();
   // expand the options
   await user.click(screen.getByRole("combobox"));
 
-  // Difficult to get the inner MenuList by anything else
-  const menuList = queryByAttribute("class", container, /MenuList/);
-  if (!menuList) {
-    throw Error("MenuList not found");
-  }
+  // The MenuList renders with role="listbox"
+  const menuList = screen.getByRole("listbox");
   // eslint-disable-next-line testing-library/no-node-access
   expect(menuList.firstElementChild).toHaveTextContent(selected.value);
 }
@@ -104,7 +100,7 @@ describe("test FormSelect", () => {
 
     it(`handles selectedOptionFirst ${mock.desc}`, async () => {
       const selected = randomArrayItem(mock.options);
-      const { container, user } = setup(
+      const { user } = setup(
         <FormSelect
           options={mock.options}
           val={selected.value}
@@ -113,7 +109,7 @@ describe("test FormSelect", () => {
         />,
       );
 
-      await runSelectedOptionFirstTests(selected, user, container);
+      await runSelectedOptionFirstTests(selected, user);
     });
 
     it("handles no options", async () => {
@@ -225,7 +221,7 @@ describe("test FormSelect.Grouped", () => {
 
   it(`handles selectedOptionFirst for group`, async () => {
     const selected = randomArrayItem([...groupOptions[0].options]);
-    const { container, user } = setup(
+    const { user } = setup(
       <FormSelect.Grouped
         options={groupOptions}
         value={selected}
@@ -234,7 +230,7 @@ describe("test FormSelect.Grouped", () => {
       />,
     );
 
-    await runSelectedOptionFirstTests(selected, user, container);
+    await runSelectedOptionFirstTests(selected, user);
   });
 
   it("handles no options", async () => {