Replace deprecated @react/auto-id with react18 useId hook (#6557)

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: lkostrowski

.changeset/khaki-towns-begin.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Removed deprecated @reach/auto-id dependency and replaced it with built-in React useId hook. This is purely technical change.

package.json

@@ -86,7 +86,6 @@
     "@material-ui/styles": "^4.11.5",
     "@radix-ui/react-portal": "^1.1.10",
     "@radix-ui/react-radio-group": "^1.3.8",
-    "@reach/auto-id": "^0.16.0",
     "@react-editor-js/core": "2.1.0",
     "@saleor/macaw-ui": "npm:@saleor/macaw-ui@0.7.4",
     "@saleor/macaw-ui-next": "npm:@saleor/macaw-ui@1.4.2",

pnpm-lock.yaml

@@ -1,6 +1,5 @@
 import { type LogLevels, type OutputData } from "@editorjs/editorjs";
 import { FormControl, FormHelperText } from "@material-ui/core";
-import { useId } from "@reach/auto-id";
 import { type EditorCore, type Props as ReactEditorJSProps } from "@react-editor-js/core";
 import { Box } from "@saleor/macaw-ui-next";
 import clsx from "clsx";
@@ -40,7 +39,8 @@ const RichTextEditor = ({
   ...props
 }: RichTextEditorProps) => {
   const classes = useStyles({});
-  const id = useId(defaultId);
+  const generatedId = React.useId();
+  const id = defaultId ?? generatedId;
   const ref = React.useRef<EditorCore | null>(null);
   const [isFocused, setIsFocused] = React.useState(false);
   const [hasValue, setHasValue] = React.useState(false);
@@ -60,7 +60,7 @@ const RichTextEditor = ({
       return (editorRef.current = editor);
     }
   }, []);
-  // We need to render FormControl first to get id from @reach/auto-id
+  // Wait until after the initial render before running rerender-dependent editor updates.
   const hasRendered = useHasRendered();
 
   // EditorJS does not rerender when default value changes,

src/components/RichTextEditor/RichTextEditor.tsx

@@ -1,6 +1,6 @@
 import { type LogLevels } from "@editorjs/editorjs";
-import { useId } from "@reach/auto-id";
 import clsx from "clsx";
+import { useId } from "react";
 import { createReactEditorJS } from "react-editor-js";
 
 import { tools } from "./consts";
@@ -21,8 +21,9 @@ const RichTextEditorContent = ({
   ...props
 }: RichTextEditorContentProps) => {
   const classes = useStyles({});
-  const id = useId(defaultId);
-  // We need to render FormControl first to get id from @reach/auto-id
+  const generatedId = useId();
+  const id = defaultId ?? generatedId;
+  // Delay EditorJS rendering until after mount to avoid client-only rendering issues.
   const hasRendered = useHasRendered();
 
   if (!hasRendered) {

src/components/RichTextEditor/RichTextEditorContent.tsx

@@ -1,8 +1,8 @@
 import { formatMoneyAmount } from "@dashboard/components/Money";
 import useLocale from "@dashboard/hooks/useLocale";
 import { type IMoney } from "@dashboard/utils/intl";
-import { useId } from "@reach/auto-id";
 import { Box, Skeleton, Text, Toggle } from "@saleor/macaw-ui-next";
+import { useId } from "react";
 import { FormattedMessage } from "react-intl";
 
 import { useGrantRefundContext } from "../context";

src/orders/components/OrderGrantRefundPage/components/ShippingInluded.tsx

@@ -6,10 +6,10 @@ import {
   TransactionActionEnum,
   type TransactionItemFragment,
 } from "@dashboard/graphql";
-import { useId } from "@reach/auto-id";
 import { Button, makeStyles } from "@saleor/macaw-ui";
 import { Text } from "@saleor/macaw-ui-next";
 import * as React from "react";
+import { useId } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import OrderTransaction from "../../OrderTransaction";