refactor: replace radix/react-id with useId from react (#4660)

React has builtin useId, now we can get rid of radix package for it.

apps/builder/app/builder/features/breakpoints/width-input.tsx

@@ -1,3 +1,4 @@
+import { useState, type KeyboardEvent, useEffect, useId } from "react";
 import { useStore } from "@nanostores/react";
 import { findApplicableMedia } from "@webstudio-is/css-engine";
 import {
@@ -7,7 +8,6 @@ import {
   Label,
   type NumericScrubValue,
   InputField,
-  useId,
   useScrub,
   handleNumericInputArrowKeys,
 } from "@webstudio-is/design-system";
@@ -16,7 +16,6 @@ import {
   $selectedBreakpointId,
   $selectedBreakpoint,
 } from "~/shared/nano-states";
-import { useState, type KeyboardEvent, useEffect } from "react";
 import { $canvasWidth } from "~/builder/shared/nano-states";
 
 const useEnhancedInput = ({

apps/builder/app/builder/features/settings-panel/controls/check.tsx

@@ -1,5 +1,6 @@
+import { useId } from "react";
 import { useStore } from "@nanostores/react";
-import { Checkbox, CheckboxAndLabel, useId } from "@webstudio-is/design-system";
+import { Checkbox, CheckboxAndLabel } from "@webstudio-is/design-system";
 import {
   BindingControl,
   BindingPopover,

apps/builder/app/builder/features/settings-panel/controls/text.tsx

@@ -1,5 +1,6 @@
+import { useEffect, useId, useRef } from "react";
 import { useStore } from "@nanostores/react";
-import { useId, TextArea } from "@webstudio-is/design-system";
+import { TextArea } from "@webstudio-is/design-system";
 import {
   BindingControl,
   BindingPopover,
@@ -14,7 +15,6 @@ import {
   useBindingState,
   humanizeAttribute,
 } from "../shared";
-import { useEffect, useRef } from "react";
 
 export const TextControl = ({
   meta,

apps/builder/app/builder/features/settings-panel/controls/url.tsx

@@ -1,9 +1,8 @@
-import { type ReactNode, useEffect, useMemo } from "react";
+import { type ReactNode, useEffect, useId, useMemo } from "react";
 import { useStore } from "@nanostores/react";
 import { computed } from "nanostores";
 import {
   theme,
-  useId,
   InputField,
   Flex,
   ToggleGroup,

apps/builder/app/builder/features/settings-panel/settings-section.tsx

@@ -1,6 +1,7 @@
+import { useId } from "react";
 import { useStore } from "@nanostores/react";
 import type { Instance } from "@webstudio-is/sdk";
-import { InputField, useId } from "@webstudio-is/design-system";
+import { InputField } from "@webstudio-is/design-system";
 import { $instances, $registeredComponentMetas } from "~/shared/nano-states";
 import { HorizontalLayout, Label, Row, useLocalValue } from "./shared";
 import { getInstanceLabel } from "~/shared/instance-utils";

apps/builder/app/builder/features/style-panel/sections/space/layout.tsx

@@ -1,5 +1,5 @@
-import { styled, useId } from "@webstudio-is/design-system";
-import { forwardRef } from "react";
+import { styled } from "@webstudio-is/design-system";
+import { forwardRef, useId } from "react";
 import type { ComponentProps, Ref } from "react";
 import type { HoverTarget, SpaceStyleProperty } from "./types";
 import { spaceProperties } from "./properties";

apps/builder/app/builder/features/topbar/publish.tsx

@@ -5,11 +5,11 @@ import {
   useTransition,
   startTransition,
   useRef,
+  useId,
 } from "react";
 import { useStore } from "@nanostores/react";
 import {
   Button,
-  useId,
   Tooltip,
   IconButton,
   Grid,

apps/builder/app/shared/form-utils/use-ids.ts

@@ -1,5 +1,4 @@
-import { useId } from "@webstudio-is/design-system";
-import { useRef } from "react";
+import { useId, useRef } from "react";
 
 export const useIds = <FieldName extends string>(
   fieldNames: readonly FieldName[]

apps/builder/app/shared/share-project/share-project.tsx

@@ -12,7 +12,6 @@ import {
   Switch,
   theme,
   Tooltip,
-  useId,
   Collapsible,
   keyframes,
   Text,
@@ -29,7 +28,13 @@ import {
   PlusIcon,
   InfoCircleIcon,
 } from "@webstudio-is/icons";
-import { Fragment, useState, type ComponentProps, type ReactNode } from "react";
+import {
+  Fragment,
+  useId,
+  useState,
+  type ComponentProps,
+  type ReactNode,
+} from "react";
 import { useIds } from "../form-utils";
 import { CopyToClipboard } from "~/builder/shared/copy-to-clipboard";
 import { isFeatureEnabled } from "@webstudio-is/feature-flags";

packages/design-system/package.json

@@ -36,7 +36,6 @@
     "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
-    "@radix-ui/react-id": "^1.1.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-popper": "^1.2.0",

packages/design-system/src/index.ts

@@ -70,7 +70,6 @@ export * from "./components/pro-badge";
 
 // No need to align
 
-export { useId } from "@radix-ui/react-id";
 export * as Portal from "@radix-ui/react-portal";
 export { Box } from "./components/box";
 export { Flex } from "./components/flex";