Merge pull request #264 from element-hq/t3chguy/react-18-min

.eslintrc.cjs

@@ -18,19 +18,6 @@ module.exports = {
     sourceType: "module",
   },
   rules: {
-    "no-restricted-imports": [
-      "error",
-      {
-        paths: [
-          {
-            name: "react",
-            importNames: ["useId"],
-            message:
-              "'useId' is only available in React 18. Please use the ponyfill from 'utils/useId' instead.",
-          },
-        ],
-      },
-    ],
     "prettier/prettier": "error",
   },
   plugins: ["prettier", "react", "@typescript-eslint", "matrix-org"],

package.json

@@ -119,7 +119,7 @@
     "@fontsource/inter": "^5",
     "@types/react": "*",
     "@vector-im/compound-design-tokens": ">=1.6.1 <2.0.0",
-    "react": "^17 || ^18"
+    "react": "^18"
   },
   "peerDependenciesMeta": {
     "@types/react": {

src/components/Form/Controls/Action/Action.tsx

@@ -15,11 +15,10 @@ limitations under the License.
 */
 
 import classnames from "classnames";
-import React, { forwardRef, ComponentRef, ComponentProps } from "react";
+import React, { forwardRef, ComponentRef, ComponentProps, useId } from "react";
 import styles from "./Action.module.css";
 import { TextInput } from "../Text";
 
-import useId from "../../../../utils/useId";
 import { Control } from "@radix-ui/react-form";
 import { Tooltip } from "../../../Tooltip/Tooltip";
 

src/components/Menu/FloatingMenu.tsx

@@ -15,9 +15,13 @@ limitations under the License.
 */
 
 import classnames from "classnames";
-import React, { ComponentPropsWithoutRef, ReactNode, forwardRef } from "react";
+import React, {
+  ComponentPropsWithoutRef,
+  ReactNode,
+  forwardRef,
+  useId,
+} from "react";
 import styles from "./FloatingMenu.module.css";
-import useId from "../../utils/useId";
 import { Text } from "../Typography/Text";
 
 interface TitleProps {

src/components/Menu/ToggleMenuItem.tsx

@@ -14,10 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ComponentProps, forwardRef, useCallback } from "react";
+import React, { ComponentProps, forwardRef, useCallback, useId } from "react";
 import { MenuItem } from "./MenuItem";
 import { ToggleInput } from "../Form/Controls/Toggle";
-import useId from "../../utils/useId";
 
 type Props = Pick<
   ComponentProps<typeof MenuItem>,

src/components/Progress/Progress.tsx

@@ -14,13 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { forwardRef } from "react";
+import React, { forwardRef, useId } from "react";
 import classNames from "classnames";
 
 import styles from "./Progress.module.css";
 
 import { Root, Indicator } from "@radix-ui/react-progress";
-import useId from "../../utils/useId";
 
 type ProgressProps = {
   /** The size variant of the progress bar */

src/components/Search/Search.tsx

@@ -15,12 +15,11 @@ limitations under the License.
 */
 
 import classnames from "classnames";
-import React, { ComponentProps, forwardRef } from "react";
+import React, { ComponentProps, forwardRef, useId } from "react";
 import styles from "./Search.module.css";
 import { Field, Label } from "../Form";
 
 import SearchIcon from "@vector-im/compound-design-tokens/assets/web/icons/search";
-import useId from "../../utils/useId";
 
 type SearchProps = {
   /**