chore: upgrade React.js (#1943)

apps/client/package.json

@@ -20,14 +20,14 @@
   "dependencies": {
     "@casperiv/use-socket.io": "6.0.1",
     "@casperiv/useful": "^3.0.0",
-    "@headlessui/react": "^1.7.17",
+    "@headlessui/react": "^2.0.4",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toolbar": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@react-aria/label": "^3.7.8",
     "@react-aria/ssr": "^3.9.4",
-    "@react-types/shared": "^3.22.0",
+    "@react-types/shared": "^3.23.1",
     "@sentry/browser": "^7.81.1",
     "@sentry/nextjs": "^7.81.1",
     "@sentry/tracing": "^7.81.1",
@@ -46,8 +46,8 @@
     "@types/is-hotkey": "^0.1.10",
     "@types/leaflet": "^1.9.12",
     "@types/nprogress": "^0.2.3",
-    "@types/react": "18.2.34",
-    "@types/react-dom": "18.2.14",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
     "@types/sortablejs": "^1.15.8",
     "@types/uuid": "^9.0.8",
     "autoprefixer": "^10.4.19",
@@ -67,28 +67,28 @@
     "nookies": "^2.5.2",
     "nprogress": "^0.2.0",
     "pretty-bytes": "^6.1.1",
-    "react": "18.2.0",
+    "react": "18.3.1",
     "react-bootstrap-icons": "^1.11.4",
     "react-colorful": "^5.6.1",
     "react-cool-onclickoutside": "^1.7.0",
     "react-cropper": "^2.3.3",
     "react-diff-viewer-continued": "^3.4.0",
     "react-digit-input": "^2.1.0",
-    "react-dom": "18.2.0",
+    "react-dom": "18.3.1",
     "react-google-recaptcha-v3": "^1.10.1",
     "react-hot-toast": "^2.4.1",
     "react-leaflet": "^4.2.1",
     "react-markdown": "^9.0.1",
     "react-select": "^5.8.0",
     "react-sortablejs": "^6.1.4",
-    "react-use": "^17.4.0",
+    "react-use": "^17.5.0",
     "remark-emoji": "^4.0.1",
     "remark-external-links": "^9.0.1",
     "remark-gfm": "^4.0.0",
     "remark-github": "^12.0.0",
-    "slate": "^0.100.0",
+    "slate": "^0.103.0",
     "slate-history": "^0.100.0",
-    "slate-react": "^0.101.0",
+    "slate-react": "^0.105.0",
     "socket.io-client": "^4.7.5",
     "sortablejs": "^1.15.2",
     "storage-factory": "^0.2.1",

apps/client/src/components/dispatch/map/units/player-marker.tsx

@@ -122,6 +122,7 @@ export function PlayerMarker({ player, handleToggle }: Props) {
 
   return (
     <Marker
+      // @ts-expect-error incompatible types with React
       ref={(ref) => (player.ref = ref)}
       icon={playerIcon}
       key={player.identifier}

apps/client/src/components/editor/editor.tsx

@@ -71,6 +71,7 @@ export function Editor(props: EditorProps) {
   );
   const renderLeaf = React.useCallback((props: RenderLeafProps) => <EditorLeaf {...props} />, []);
   const editor = React.useMemo(
+    // @ts-expect-error - Missing types in Slate
     () => withChecklists(withShortcuts(withHistory(withReact(createEditor())))),
     [],
   );
@@ -131,6 +132,7 @@ export function Editor(props: EditorProps) {
       )}
     >
       <Slate
+        // @ts-expect-error - Missing types in Slate
         editor={editor}
         initialValue={props.value as Descendant[]}
         onValueChange={(value) => {

apps/client/src/components/editor/elements/checklist-item.tsx

@@ -11,6 +11,7 @@ export function CheckListItemElement({ attributes, children, element }: Props) {
   const readOnly = useReadOnly();
 
   function handleSelectionChange(isSelected: boolean) {
+    // @ts-expect-error - Missing types in Slate
     const path = ReactEditor.findPath(editor, element);
 
     Transforms.setNodes(editor, { checked: isSelected }, { at: path });

packages/ui/package.json

@@ -30,15 +30,15 @@
     "@storybook/react-vite": "^7.5.3",
     "@storybook/test-runner": "^0.15.2",
     "@storybook/testing-library": "^0.2.2",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.19",
     "monaco-editor": "^0.44.0",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.38",
     "prop-types": "^15.8.1",
     "storybook": "^7.5.3",
-    "tailwindcss": "^3.3.5",
+    "tailwindcss": "^3.4.4",
     "tsup": "6.6.2",
     "typescript": "^5.3.2",
-    "vite": "^5.0.2"
+    "vite": "^5.2.13"
   },
   "tsup": {
     "entry": [
@@ -62,70 +62,70 @@
     "next-intl": "2.22.1",
     "use-intl": "2.22.1",
     "@casperiv/useful": "^3.0.0",
-    "@internationalized/date": "^3.5.0",
+    "@internationalized/date": "^3.5.4",
     "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-tabs": "^1.0.4",
-    "@react-aria/breadcrumbs": "^3.5.8",
-    "@react-aria/button": "^3.9.0",
-    "@react-aria/calendar": "^3.5.3",
+    "@react-aria/breadcrumbs": "^3.5.13",
+    "@react-aria/button": "^3.9.5",
+    "@react-aria/calendar": "^3.5.8",
     "@react-aria/checkbox": "^3.12.0",
     "@react-aria/combobox": "^3.8.0",
     "@react-aria/datepicker": "^3.9.0",
-    "@react-aria/dialog": "^3.5.8",
+    "@react-aria/dialog": "^3.5.14",
     "@react-aria/focus": "^3.15.0",
     "@react-aria/i18n": "^3.9.0",
     "@react-aria/interactions": "^3.20.0",
-    "@react-aria/label": "^3.7.3",
+    "@react-aria/label": "^3.7.8",
     "@react-aria/listbox": "^3.11.2",
     "@react-aria/menu": "^3.11.2",
     "@react-aria/overlays": "^3.19.0",
-    "@react-aria/progress": "^3.4.8",
+    "@react-aria/progress": "^3.4.13",
     "@react-aria/radio": "^3.9.0",
     "@react-aria/switch": "^3.5.7",
     "@react-aria/textfield": "^3.13.0",
     "@react-aria/utils": "^3.22.0",
-    "@react-aria/visually-hidden": "^3.8.7",
+    "@react-aria/visually-hidden": "^3.8.12",
     "@react-stately/calendar": "^3.4.2",
-    "@react-stately/collections": "^3.10.3",
-    "@react-stately/combobox": "^3.8.0",
-    "@react-stately/data": "^3.11.0",
-    "@react-stately/datepicker": "^3.9.0",
-    "@react-stately/list": "^3.10.1",
+    "@react-stately/collections": "^3.10.7",
+    "@react-stately/combobox": "^3.8.4",
+    "@react-stately/data": "^3.11.4",
+    "@react-stately/datepicker": "^3.9.4",
+    "@react-stately/list": "^3.10.5",
     "@react-stately/menu": "^3.5.7",
-    "@react-stately/overlays": "^3.6.4",
-    "@react-stately/radio": "^3.10.0",
-    "@react-stately/select": "^3.6.0",
-    "@react-stately/toggle": "^3.7.0",
+    "@react-stately/overlays": "^3.6.7",
+    "@react-stately/radio": "^3.10.4",
+    "@react-stately/select": "^3.6.4",
+    "@react-stately/toggle": "^3.7.4",
     "@react-types/combobox": "^3.9.0",
-    "@react-types/overlays": "^3.8.4",
-    "@react-types/select": "^3.9.0",
+    "@react-types/overlays": "^3.8.7",
+    "@react-types/select": "^3.9.4",
     "@react-types/shared": "^3.22.0",
     "@snailycad/config": "workspace:*",
     "@snailycad/types": "workspace:*",
     "@snailycad/utils": "workspace:*",
-    "@types/react": "18.2.34",
-    "@types/react-dom": "18.2.14",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
     "class-variance-authority": "^0.7.0",
-    "formik": "^2.4.5",
+    "formik": "^2.4.6",
     "mxcn": "^2.0.0",
-    "react-bootstrap-icons": "^1.10.3",
+    "react-bootstrap-icons": "^1.11.4",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
-    "react-use": "^17.4.0",
-    "rimraf": "^5.0.5",
-    "tailwind-merge": "^2.0.0",
-    "tslib": "^2.6.2"
+    "react-use": "^17.5.0",
+    "rimraf": "^5.0.7",
+    "tailwind-merge": "^2.3.0",
+    "tslib": "^2.6.3"
   },
   "peerDependencies": {
     "date-fns": ">=2.30.0",
     "next": "*",
     "next-intl": "2.22.1",
-    "react": ">=18.2.0",
-    "react-dom": ">=18.2.0",
+    "react": ">=18.3.1",
+    "react-dom": ">=18.3.1",
     "use-intl": "2.22.1"
   },
   "sideEffects": false

packages/ui/src/components/dnd/draggable.tsx

@@ -28,6 +28,7 @@ export function Draggable(props: Props) {
   }, [isDragging]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
+    // @ts-expect-error - React versions are different
     <div ref={drag} style={{ opacity }}>
       {props.children({ isDragging })}
     </div>

packages/ui/src/components/dnd/droppable.tsx

@@ -23,6 +23,7 @@ export function Droppable<Item>(props: Props<Item>) {
   const isActive = isOver && _canDrop;
 
   return (
+    // @ts-expect-error - React versions are different
     <div className={cn(isActive && "outline outline-2 outline-offset-[5px] rounded-sm")} ref={drop}>
       {props.children}
     </div>

packages/ui/src/components/fields/async-list-search-field.tsx

@@ -106,7 +106,7 @@ function AsyncListSearchField<T extends object>(props: AsyncListFieldProps<T>) {
     [props.localValue],
   );
 
-  function handleSelectionChange(key?: Key, value?: string) {
+  function handleSelectionChange(key?: Key | null, value?: string) {
     try {
       if (props.isClearable && key === "cleared") {
         props.onSelectionChange(null);
@@ -222,7 +222,7 @@ function AsyncListSearchField<T extends object>(props: AsyncListFieldProps<T>) {
         ) : null}
       </div>
 
-      {props.errorMessage && (
+      {!!props.errorMessage && (
         <ErrorMessage errorMessage={props.errorMessage} errorMessageProps={errorMessageProps} />
       )}
     </div>

packages/ui/src/components/fields/async-list-search-field/actions.tsx

@@ -16,7 +16,7 @@ export function AsyncListSearchFieldActions<T>(props: AsyncListSearchFieldAction
     ? "border-gray-800 dark:border-gray-500"
     : "border-gray-200 dark:border-quinary";
   const errorMessageClassName =
-    props.errorMessage && "!border-red-500 focus:!border-red-700 dark:!focus:border-red-700";
+    !!props.errorMessage && "!border-red-500 focus:!border-red-700 dark:!focus:border-red-700";
 
   const enabledHoverClassName =
     !props.isDisabled && "group-hover:dark:!border-gray-500 group-hover:!border-gray-500";

packages/ui/src/components/fields/date-picker-field.tsx

@@ -60,7 +60,7 @@ export function DatePickerField({ value: _value, ...rest }: Props) {
   } = useDatePicker({ ...rest }, state, triggerRef);
 
   const errorMessageClassName =
-    rest.errorMessage && "!border-red-500 focus:!border-red-700 dark:!focus:border-red-700";
+    !!rest.errorMessage && "!border-red-500 focus:!border-red-700 dark:!focus:border-red-700";
 
   return (
     <ModalProvider>

packages/ui/src/components/fields/select-field.tsx

@@ -104,7 +104,7 @@ export function SelectField<T extends SelectValue>(props: SelectFieldProps<T>) {
                   size: "sm",
                   className: cn(
                     "px-2 cursor-default !rounded-r-none w-full min-h-[39px] h-auto flex items-center justify-between border !bg-white dark:!bg-secondary hover:dark:!bg-secondary hover:dark:!brightness-100 group-hover:dark:!border-gray-500 group-hover:!border-gray-500",
-                    props.errorMessage &&
+                    !!props.errorMessage &&
                       "!border-red-500 focus:!border-red-700 dark:focus:!border-red-700",
                     state.isOpen && "dark:!border-gray-500 !border-gray-500",
                     props.isDisabled && "!cursor-not-allowed opacity-60",

packages/ui/src/components/inputs/select/select-actions.tsx

@@ -44,7 +44,7 @@ export function SelectActions<T extends SelectValue>(props: Props<T>) {
             "px-2 !rounded-none -mx-[1.5px]",
             "group-hover:dark:!border-gray-500 group-hover:!border-gray-500",
             props.state.isOpen && "!border-gray-800 dark:!border-gray-500",
-            props.errorMessage &&
+            !!props.errorMessage &&
               "!border-red-500 focus:!border-red-700 dark:!focus:border-red-700",
           )}
           type="button"
@@ -63,7 +63,8 @@ export function SelectActions<T extends SelectValue>(props: Props<T>) {
           !showClearableButton && "-ml-[1.5px]",
           "group-hover:dark:!border-gray-500 group-hover:!border-gray-500",
           props.state.isOpen && "!border-gray-800 dark:!border-gray-500",
-          props.errorMessage && "!border-red-500 focus:!border-red-700 dark:!focus:border-red-700",
+          !!props.errorMessage &&
+            "!border-red-500 focus:!border-red-700 dark:!focus:border-red-700",
         )}
       >
         <ChevronDown className="w-5 h-5 dark:fill-white" />

packages/ui/src/hooks/select/useMultiSelect.ts

@@ -9,17 +9,27 @@ import type {
   MultiSelectState,
 } from "./useMultiSelectState";
 import type { AriaSelectProps } from "@react-types/select";
+import type { AriaButtonOptions } from "@react-aria/button";
+import type { DOMAttributes, FocusableElement } from "@react-types/shared";
 
 interface MultiSelectProps<T> extends Omit<AriaSelectProps<T>, "onSelectionChange"> {
   disallowEmptySelection?: boolean;
   onSelectionChange?: MultiSelectStateProps<T>["onSelectionChange"];
 }
 
+interface UseMultiSelect {
+  triggerProps: AriaButtonOptions<"button">;
+  labelProps: Record<string, unknown>;
+  errorMessageProps: DOMAttributes<FocusableElement>;
+  valueProps: Record<string, unknown>;
+  menuProps: Record<string, unknown>;
+}
+
 export function useMultiSelect<T>(
   props: MultiSelectProps<T>,
   state: MultiSelectState<T>,
   ref: React.RefObject<HTMLElement>,
-) {
+): UseMultiSelect {
   const { disallowEmptySelection, isDisabled } = props;
 
   const { menuTriggerProps, menuProps } = useMenuTrigger(