chore: update react aria (#1847)

.eslintrc

@@ -8,7 +8,8 @@
   "extends": [
     "@casperiv/eslint-config",
     "@casperiv/eslint-config-react",
-    "@casperiv/eslint-config-next"
+    "@casperiv/eslint-config-next",
+    "plugin:deprecation/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {

apps/client/package.json

@@ -25,12 +25,12 @@
     "@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.1",
+    "@react-aria/label": "^3.7.2",
     "@react-aria/ssr": "^3.8.0",
     "@react-types/shared": "^3.21.0",
-    "@sentry/browser": "^7.74.0",
-    "@sentry/nextjs": "^7.74.0",
-    "@sentry/tracing": "^7.74.0",
+    "@sentry/browser": "^7.74.1",
+    "@sentry/nextjs": "^7.74.1",
+    "@sentry/tracing": "^7.74.1",
     "@snailycad/audit-logger": "workspace:*",
     "@snailycad/config": "^1.74.0",
     "@snailycad/permissions": "workspace:*",
@@ -39,30 +39,30 @@
     "@snailycad/ui": "workspace:*",
     "@snailycad/utils": "^1.74.0",
     "@tailwindcss/typography": "^0.5.10",
-    "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-query": "^5.0.0",
     "@tanstack/react-table": "8.10.7",
-    "@types/color": "^3.0.4",
-    "@types/connect": "^3.4.36",
-    "@types/is-hotkey": "^0.1.7",
-    "@types/leaflet": "^1.9.6",
-    "@types/nprogress": "^0.2.1",
-    "@types/react": "^18.2.28",
-    "@types/react-dom": "^18.2.13",
-    "@types/sortablejs": "^1.15.3",
-    "@types/uuid": "^9.0.5",
+    "@types/color": "^3.0.5",
+    "@types/connect": "^3.4.37",
+    "@types/is-hotkey": "^0.1.8",
+    "@types/leaflet": "^1.9.7",
+    "@types/nprogress": "^0.2.2",
+    "@types/react": "^18.2.29",
+    "@types/react-dom": "^18.2.14",
+    "@types/sortablejs": "^1.15.4",
+    "@types/uuid": "^9.0.6",
     "autoprefixer": "^10.4.16",
     "axios": "^1.5.1",
     "bignumber.js": "^9.1.2",
     "color": "^4.2.3",
     "date-fns": "^2.30.0",
-    "eslint-config-next": "^13.5.4",
+    "eslint-config-next": "^13.5.6",
     "formik": "^2.4.5",
     "hex-color-regex": "^1.1.0",
     "is-hotkey": "^0.2.0",
     "leaflet": "^1.9.4",
     "mdast-util-find-and-replace": "^3.0.1",
-    "next": "13.5.4",
-    "next-intl": "2.20.2",
+    "next": "13.5.6",
+    "next-intl": "2.21.0",
     "nookies": "^2.5.2",
     "nprogress": "^0.2.0",
     "pretty-bytes": "^6.1.1",
@@ -71,7 +71,7 @@
     "react-colorful": "^5.6.1",
     "react-cool-onclickoutside": "^1.7.0",
     "react-cropper": "^2.3.3",
-    "react-diff-viewer-continued": "^3.2.6",
+    "react-diff-viewer-continued": "^3.3.1",
     "react-digit-input": "^2.1.0",
     "react-dom": "18.2.0",
     "react-google-recaptcha-v3": "^1.10.1",
@@ -91,18 +91,18 @@
     "socket.io-client": "^4.7.2",
     "sortablejs": "^1.15.0",
     "storage-factory": "^0.2.1",
-    "use-intl": "^2.20.2",
+    "use-intl": "^2.21.0",
     "uuid": "^9.0.1",
     "zod": "3.22.4",
     "zustand": "^4.4.3"
   },
   "devDependencies": {
     "dotenv": "^16.3.1",
     "postcss": "^8.4.31",
-    "sass": "^1.69.3",
+    "sass": "^1.69.4",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.2.2",
-    "vite": "^4.4.11",
+    "vite": "^4.5.0",
     "vitest": "^0.34.6"
   }
 }

apps/client/src/components/auth/api-verification.tsx

@@ -16,7 +16,6 @@ export function ApiVerification(props: Props) {
 
   const { error } = useQuery({
     refetchOnWindowFocus: false,
-    keepPreviousData: true,
     queryKey: ["api-verification"],
     retry: 0,
     queryFn: async () => {

apps/client/src/components/dispatch/modals/tones-modal.tsx

@@ -46,7 +46,7 @@ export function TonesModal({ types }: Props) {
       });
 
       helpers.resetForm();
-      await queryClient.resetQueries(["active-tones"]);
+      await queryClient.resetQueries({ queryKey: ["active-tones"] });
     }
   }
 
@@ -57,7 +57,7 @@ export function TonesModal({ types }: Props) {
     });
 
     if (json) {
-      await queryClient.resetQueries(["active-tones"]);
+      await queryClient.resetQueries({ queryKey: ["active-tones"] });
       resetForm();
 
       toastMessage({

apps/client/src/components/leo/modals/NameSearchModal/speech-alert.tsx

@@ -43,5 +43,5 @@ export function SpeechAlert(props: SpeechAlertProps) {
     speaked.current = true;
   }, [props]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  return props.children as JSX.Element;
+  return props.children as React.JSX.Element;
 }

apps/client/src/components/modal-buttons/modal-button.tsx

@@ -9,7 +9,10 @@ import type { EmsFdDeputy } from "@snailycad/types";
 import type { ActiveOfficer } from "state/leo-state";
 import { useAuth } from "context/AuthContext";
 
-type ButtonProps = Pick<JSX.IntrinsicElements["button"], "name" | "type" | "title" | "disabled">;
+type ButtonProps = Pick<
+  React.JSX.IntrinsicElements["button"],
+  "name" | "type" | "title" | "disabled"
+>;
 interface Props extends ButtonProps {
   button: ModalButton;
   unit?: ActiveOfficer | EmsFdDeputy | null;

apps/client/src/components/shared/VersionDisplay.tsx

@@ -21,7 +21,7 @@ export function VersionDisplay({ cad }: Props) {
   );
 }
 
-function Link(props: JSX.IntrinsicElements["a"]) {
+function Link(props: React.JSX.IntrinsicElements["a"]) {
   return (
     <a
       {...props}

apps/client/src/components/shared/image-wrapper.tsx

@@ -6,7 +6,7 @@ interface Props extends ImageProps {
 }
 
 export function ImageWrapper(props: Props) {
-  const fallback = (props.fallback ?? null) as JSX.Element;
+  const fallback = (props.fallback ?? null) as React.JSX.Element;
   const [hasError, setHasError] = React.useState(false);
 
   return hasError ? fallback : <Image {...props} onError={() => setHasError(true)} />;

apps/client/src/hooks/realtime/use-active-dispatchers.ts

@@ -46,7 +46,7 @@ export function useActiveDispatchers() {
   useListener(
     { eventName: SocketEvents.UpdateDispatchersState, checkHasListeners: true },
     async () => {
-      await queryClient.resetQueries(["/dispatch"]);
+      await queryClient.resetQueries({ queryKey: ["/dispatch"] });
     },
   );
 

apps/client/src/hooks/use-invalidate-query.ts

@@ -11,7 +11,7 @@ export function useInvalidateQuery<T extends unknown[]>(queryKeyParts: T) {
   const query = queries.find((q) => queryKeyParts.every((k) => q.queryKey.includes(k)));
 
   async function invalidateQuery() {
-    await queryClient.invalidateQueries(query?.queryKey);
+    await queryClient.invalidateQueries({ queryKey: query?.queryKey });
     return queryKeyParts;
   }
 

package.json

@@ -22,6 +22,7 @@
     "@casperiv/eslint-config-next": "8.0.0",
     "@casperiv/eslint-config-react": "8.0.0",
     "eslint": "8.51.0",
+    "eslint-plugin-deprecation": "^2.0.0",
     "lerna": "^7.3.1",
     "lint-staged": "^15.0.1"
   },

packages/ui/package.json

@@ -18,22 +18,22 @@
     "prepublish": "pnpm build"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.4.6",
-    "@storybook/addon-interactions": "^7.4.6",
-    "@storybook/addon-links": "^7.4.6",
+    "@storybook/addon-essentials": "^7.5.0",
+    "@storybook/addon-interactions": "^7.5.0",
+    "@storybook/addon-links": "^7.5.0",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^7.4.6",
-    "@storybook/react": "^7.4.6",
-    "@storybook/react-vite": "^7.4.6",
+    "@storybook/blocks": "^7.5.0",
+    "@storybook/react": "^7.5.0",
+    "@storybook/react-vite": "^7.5.0",
     "@storybook/testing-library": "^0.2.2",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.31",
     "prop-types": "^15.8.1",
-    "storybook": "^7.4.6",
+    "storybook": "^7.5.0",
     "tailwindcss": "^3.3.3",
     "tsup": "6.6.2",
     "typescript": "^5.2.2",
-    "vite": "^4.4.11"
+    "vite": "^4.5.0"
   },
   "tsup": {
     "entry": [
@@ -61,26 +61,26 @@
     "@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.6",
-    "@react-aria/button": "^3.8.3",
-    "@react-aria/calendar": "^3.5.1",
-    "@react-aria/checkbox": "^3.11.1",
-    "@react-aria/combobox": "^3.7.0",
-    "@react-aria/datepicker": "^3.8.0",
-    "@react-aria/dialog": "^3.5.6",
-    "@react-aria/focus": "^3.14.2",
-    "@react-aria/i18n": "^3.8.3",
-    "@react-aria/interactions": "^3.19.0",
-    "@react-aria/label": "^3.7.1",
-    "@react-aria/listbox": "^3.11.0",
-    "@react-aria/menu": "^3.11.0",
-    "@react-aria/overlays": "^3.18.0",
-    "@react-aria/progress": "^3.4.6",
-    "@react-aria/radio": "^3.8.1",
-    "@react-aria/switch": "^3.5.5",
-    "@react-aria/textfield": "^3.12.1",
-    "@react-aria/utils": "^3.21.0",
-    "@react-aria/visually-hidden": "^3.8.5",
+    "@react-aria/breadcrumbs": "^3.5.7",
+    "@react-aria/button": "^3.8.4",
+    "@react-aria/calendar": "^3.5.2",
+    "@react-aria/checkbox": "^3.11.2",
+    "@react-aria/combobox": "^3.7.1",
+    "@react-aria/datepicker": "^3.8.1",
+    "@react-aria/dialog": "^3.5.7",
+    "@react-aria/focus": "^3.14.3",
+    "@react-aria/i18n": "^3.8.4",
+    "@react-aria/interactions": "^3.19.1",
+    "@react-aria/label": "^3.7.2",
+    "@react-aria/listbox": "^3.11.1",
+    "@react-aria/menu": "^3.11.1",
+    "@react-aria/overlays": "^3.18.1",
+    "@react-aria/progress": "^3.4.7",
+    "@react-aria/radio": "^3.8.2",
+    "@react-aria/switch": "^3.5.6",
+    "@react-aria/textfield": "^3.12.2",
+    "@react-aria/utils": "^3.21.1",
+    "@react-aria/visually-hidden": "^3.8.6",
     "@react-stately/calendar": "^3.4.1",
     "@react-stately/collections": "^3.10.2",
     "@react-stately/combobox": "^3.7.1",
@@ -98,8 +98,8 @@
     "@snailycad/config": "^1.74.0",
     "@snailycad/types": "workspace:*",
     "@snailycad/utils": "^1.74.0",
-    "@types/react": "^18.2.28",
-    "@types/react-dom": "^18.2.13",
+    "@types/react": "^18.2.29",
+    "@types/react-dom": "^18.2.14",
     "class-variance-authority": "^0.7.0",
     "formik": "^2.4.5",
     "mxcn": "^2.0.0",
@@ -114,10 +114,10 @@
   "peerDependencies": {
     "date-fns": ">=2.30.0",
     "next": "*",
-    "next-intl": ">=2.20.2",
+    "next-intl": ">=2.21.0",
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0",
-    "use-intl": ">=2.20.2"
+    "use-intl": ">=2.21.0"
   },
   "sideEffects": false
 }

packages/ui/src/components/button/button.tsx

@@ -34,7 +34,7 @@ export const buttonVariants = cva(
   },
 );
 
-type BaseButtonProps = Omit<JSX.IntrinsicElements["button"], "onPress"> & AriaButtonProps;
+type BaseButtonProps = Omit<React.JSX.IntrinsicElements["button"], "onPress"> & AriaButtonProps;
 export type ButtonVariantProps = VariantProps<typeof buttonVariants>;
 export type ButtonProps = BaseButtonProps & ButtonVariantProps;
 

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

@@ -80,7 +80,7 @@ export function DatePickerField({ value: _value, ...rest }: Props) {
             )}
           >
             {isMounted ? <DateField errorMessage={rest.errorMessage} {...fieldProps} /> : null}
-            {state.validationState === "invalid" && (
+            {state.isInvalid && (
               <ExclamationCircle className="w-6 h-6 text-red-500 absolute right-1" />
             )}
           </div>

packages/ui/src/components/inputs/checkbox.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { cn } from "mxcn";
 
-type Props = JSX.IntrinsicElements["input"];
+type Props = React.JSX.IntrinsicElements["input"];
 
 export const Checkbox = React.forwardRef<HTMLInputElement, Props>((props, ref) => (
   <input

packages/ui/src/components/inputs/input.tsx

@@ -1,7 +1,7 @@
 import { cn } from "mxcn";
 import * as React from "react";
 
-type Props = Omit<JSX.IntrinsicElements["input"], "id"> & {
+type Props = Omit<React.JSX.IntrinsicElements["input"], "id"> & {
   errorMessage?: string | null;
 };
 

packages/ui/src/components/inputs/textarea.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { cn } from "mxcn";
 
-type Props = Omit<JSX.IntrinsicElements["textarea"], "id" | "ref"> & {
+type Props = Omit<React.JSX.IntrinsicElements["textarea"], "id" | "ref"> & {
   errorMessage?: string | null;
 };
 

packages/ui/src/components/multi-form/multi-form-step.tsx

@@ -4,7 +4,7 @@ export interface MultiFormStepItem<FormValues extends FormikValues> {
   title: string;
   id: string;
   isRequired?: boolean;
-  children(formikState: FormikProps<FormValues>): JSX.Element | null;
+  children(formikState: FormikProps<FormValues>): React.JSX.Element | null;
 }
 
 export function MultiFormStep<FormValues extends FormikValues>(