Raise minimum React version (#1992)

sumup-oss · Apr 22, 2023 · 0b7fb45 · 0b7fb45
1 parent 1267c69
commit 0b7fb45
Show file tree

Hide file tree

Showing 48 changed files with 408 additions and 398 deletions.
diff --git a/.changeset/chilled-walls-learn.md b/.changeset/chilled-walls-learn.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': major
+---
+
+Raised the minimum version of the `react` and `react-dom` peer dependencies to >=18.
diff --git a/.changeset/popular-eels-fetch.md b/.changeset/popular-eels-fetch.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Deprecated the `uniqueId` util. Use the official [`useId` hook](https://beta.reactjs.org/reference/react/useId) instead.
diff --git a/.storybook/themes.ts b/.storybook/themes.ts
@@ -1,6 +1,6 @@
 import { create } from '@storybook/theming';
 import { light as theme } from '@sumup/design-tokens';
-import { Link } from './components';
+import Link from './components/Link';
 
 const brand = {
   brandTitle: 'Circuit UI',

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/circuit-ui/components/Carousel/__snapshots__/Carousel.spec.js.snap b/packages/circuit-ui/components/Carousel/__snapshots__/Carousel.spec.js.snap
@@ -556,14 +556,14 @@ exports[`Carousel styles should render with children as a function 1`] = `
         class="circuit-42 circuit-43"
       >
         <span
-          aria-labelledby="progress-bar_6"
+          aria-labelledby=":r2:"
           class="circuit-44"
           loop=""
           role="progressbar"
         />
         <span
           class="circuit-45"
-          id="progress-bar_6"
+          id=":r2:"
         >
           1 / 3
         </span>
@@ -1242,14 +1242,14 @@ exports[`Carousel styles should render with children as a node 1`] = `
         class="circuit-42 circuit-43"
       >
         <span
-          aria-labelledby="progress-bar_8"
+          aria-labelledby=":r3:"
           class="circuit-44"
           loop=""
           role="progressbar"
         />
         <span
           class="circuit-45"
-          id="progress-bar_8"
+          id=":r3:"
         >
           1 / 3
         </span>
@@ -1927,14 +1927,14 @@ exports[`Carousel styles should render with default paused styles 1`] = `
         class="circuit-42 circuit-43"
       >
         <span
-          aria-labelledby="progress-bar_4"
+          aria-labelledby=":r1:"
           class="circuit-44"
           loop=""
           role="progressbar"
         />
         <span
           class="circuit-45"
-          id="progress-bar_4"
+          id=":r1:"
         >
           1 / 3
         </span>
@@ -2583,14 +2583,14 @@ exports[`Carousel styles should render with default styles 1`] = `
         class="circuit-42 circuit-43"
       >
         <span
-          aria-labelledby="progress-bar_2"
+          aria-labelledby=":r0:"
           class="circuit-44"
           loop=""
           role="progressbar"
         />
         <span
           class="circuit-45"
-          id="progress-bar_2"
+          id=":r0:"
         >
           1 / 3
         </span>

diff --git a/packages/circuit-ui/components/Checkbox/Checkbox.tsx b/packages/circuit-ui/components/Checkbox/Checkbox.tsx
@@ -13,13 +13,12 @@
  * limitations under the License.
  */
 
-import { InputHTMLAttributes, Ref, forwardRef } from 'react';
+import { InputHTMLAttributes, Ref, forwardRef, useId } from 'react';
 import { css } from '@emotion/react';
 import { Checkmark } from '@sumup/icons';
 
 import styled, { StyleProps } from '../../styles/styled';
 import { hideVisually, focusOutline } from '../../styles/style-mixins';
-import { uniqueId } from '../../util/id';
 import { useClickEvent, TrackingProps } from '../../hooks/useClickEvent';
 import { FieldValidationHint, FieldWrapper } from '../FieldAtoms';
 import { deprecate } from '../../util/logger';
@@ -219,8 +218,9 @@ export const Checkbox = forwardRef(
       throw new AccessibilityError('Checkbox', 'The `label` prop is missing.');
     }
 
-    const id = customId || uniqueId('checkbox_');
-    const validationHintId = uniqueId('validation_hint-');
+    const id = useId();
+    const checkboxId = customId || id;
+    const validationHintId = useId();
     const descriptionIds = `${
       descriptionId ? `${descriptionId} ` : ''
     }${validationHintId}`;
@@ -230,7 +230,7 @@ export const Checkbox = forwardRef(
       <CheckboxWrapper className={className} style={style} disabled={disabled}>
         <CheckboxInput
           {...props}
-          id={id}
+          id={checkboxId}
           name={name}
           value={value}
           type="checkbox"
@@ -240,7 +240,7 @@ export const Checkbox = forwardRef(
           aria-describedby={descriptionIds}
           onChange={handleChange}
         />
-        <CheckboxLabel htmlFor={id}>
+        <CheckboxLabel htmlFor={checkboxId}>
           {label || children}
           <Checkmark aria-hidden="true" />
         </CheckboxLabel>

diff --git a/packages/circuit-ui/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap b/packages/circuit-ui/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap
@@ -123,16 +123,16 @@ exports[`Checkbox Styles should render with checked styles 1`] = `
     class="circuit-0"
   >
     <input
-      aria-describedby="validation_hint-4"
+      aria-describedby=":r3:"
       checked=""
       class="circuit-1"
-      id="checkbox_3"
+      id=":r2:"
       type="checkbox"
       value=""
     />
     <label
       class="circuit-2"
-      for="checkbox_3"
+      for=":r2:"
     >
       Label
       <svg
@@ -280,15 +280,15 @@ exports[`Checkbox Styles should render with default styles 1`] = `
     class="circuit-0"
   >
     <input
-      aria-describedby="validation_hint-2"
+      aria-describedby=":r1:"
       class="circuit-1"
-      id="checkbox_1"
+      id=":r0:"
       type="checkbox"
       value=""
     />
     <label
       class="circuit-2"
-      for="checkbox_1"
+      for=":r0:"
     >
       Label
       <svg
@@ -436,16 +436,16 @@ exports[`Checkbox Styles should render with disabled styles 1`] = `
     class="cui-field-disabled circuit-0"
   >
     <input
-      aria-describedby="validation_hint-6"
+      aria-describedby=":r5:"
       class="circuit-1"
       disabled=""
-      id="checkbox_5"
+      id=":r4:"
       type="checkbox"
       value=""
     />
     <label
       class="circuit-2"
-      for="checkbox_5"
+      for=":r4:"
     >
       Label
       <svg
@@ -636,15 +636,15 @@ exports[`Checkbox Styles should render with invalid styles and an error message
     class="circuit-0"
   >
     <input
-      aria-describedby="validation_hint-8"
+      aria-describedby=":r7:"
       class="circuit-1"
-      id="checkbox_7"
+      id=":r6:"
       type="checkbox"
       value=""
     />
     <label
       class="circuit-2"
-      for="checkbox_7"
+      for=":r6:"
     >
       Label
       <svg
@@ -667,7 +667,7 @@ exports[`Checkbox Styles should render with invalid styles and an error message
     >
       <span
         class="circuit-3"
-        id="validation_hint-8"
+        id=":r7:"
       >
         <div
           class="circuit-4"

diff --git a/packages/circuit-ui/components/CurrencyInput/CurrencyInput.tsx b/packages/circuit-ui/components/CurrencyInput/CurrencyInput.tsx
@@ -13,14 +13,13 @@
  * limitations under the License.
  */
 
-import { Ref, forwardRef } from 'react';
+import { Ref, forwardRef, useId } from 'react';
 import { resolveCurrencyFormat } from '@sumup/intl';
 import { NumericFormat, NumericFormatProps } from 'react-number-format';
 
 import styled from '../../styles/styled';
 import Input from '../Input';
 import { InputProps } from '../Input/Input';
-import { uniqueId } from '../../util/id';
 
 import { formatPlaceholder } from './CurrencyInputService';
 
@@ -93,7 +92,7 @@ export const CurrencyInput = forwardRef(
     }: CurrencyInputProps,
     ref: CurrencyInputProps['ref'],
   ) => {
-    const currencySymbolId = uniqueId('currency-symbol_');
+    const currencySymbolId = useId();
     const descriptionIds = `${
       descriptionId ? `${descriptionId} ` : ''
     }${currencySymbolId}`;

diff --git a/packages/circuit-ui/components/CurrencyInput/__snapshots__/CurrencyInput.spec.tsx.snap b/packages/circuit-ui/components/CurrencyInput/__snapshots__/CurrencyInput.spec.tsx.snap
@@ -111,7 +111,7 @@ exports[`CurrencyInput Styles should render a currency as a prefix 1`] = `
   >
     <label
       class="circuit-1"
-      for="input_14"
+      for=":r7:"
     >
       <span
         class="circuit-2 circuit-3"
@@ -124,14 +124,14 @@ exports[`CurrencyInput Styles should render a currency as a prefix 1`] = `
     >
       <span
         class="circuit-5"
-        id="currency-symbol_11"
+        id=":r6:"
       >
         CHF
       </span>
       <input
-        aria-describedby="currency-symbol_11 validation-hint_15"
+        aria-describedby=":r6: :r8:"
         class="circuit-6"
-        id="input_14"
+        id=":r7:"
         inputmode="decimal"
         type="text"
         value=""
@@ -260,7 +260,7 @@ exports[`CurrencyInput Styles should render a currency as a suffix 1`] = `
   >
     <label
       class="circuit-1"
-      for="input_9"
+      for=":r4:"
     >
       <span
         class="circuit-2 circuit-3"
@@ -272,16 +272,16 @@ exports[`CurrencyInput Styles should render a currency as a suffix 1`] = `
       class="circuit-4"
     >
       <input
-        aria-describedby="currency-symbol_6 validation-hint_10"
+        aria-describedby=":r3: :r5:"
         class="circuit-5"
-        id="input_9"
+        id=":r4:"
         inputmode="decimal"
         type="text"
         value=""
       />
       <span
         class="circuit-6"
-        id="currency-symbol_6"
+        id=":r3:"
       >
         €
       </span>
@@ -405,7 +405,7 @@ exports[`CurrencyInput Styles should render with default styles and format 1`] =
   >
     <label
       class="circuit-1"
-      for="input_4"
+      for=":r1:"
     >
       <span
         class="circuit-2 circuit-3"
@@ -418,14 +418,14 @@ exports[`CurrencyInput Styles should render with default styles and format 1`] =
     >
       <span
         class="circuit-5"
-        id="currency-symbol_1"
+        id=":r0:"
       >
         $
       </span>
       <input
-        aria-describedby="currency-symbol_1 validation-hint_5"
+        aria-describedby=":r0: :r2:"
         class="circuit-6"
-        id="input_4"
+        id=":r1:"
         inputmode="decimal"
         type="text"
         value=""

diff --git a/packages/circuit-ui/components/ImageInput/ImageInput.tsx b/packages/circuit-ui/components/ImageInput/ImageInput.tsx
@@ -20,13 +20,13 @@ import {
   ChangeEvent,
   ClipboardEvent,
   DragEvent,
+  useId,
 } from 'react';
 import { css } from '@emotion/react';
 import { Delete, Plus } from '@sumup/icons';
 
 import { ClickEvent } from '../../types/events';
 import styled, { StyleProps } from '../../styles/styled';
-import { uniqueId } from '../../util/id';
 import { focusOutline, hideVisually } from '../../styles/style-mixins';
 import { FieldWrapper, FieldLabel, FieldValidationHint } from '../FieldAtoms';
 import IconButton, { IconButtonProps } from '../IconButton';
@@ -339,8 +339,9 @@ export const ImageInput = ({
   }
 
   const inputRef = useRef<HTMLInputElement>(null);
-  const id = customId || uniqueId('image-input_');
-  const validationHintId = uniqueId('validation-hint_');
+  const id = useId();
+  const inputId = customId || id;
+  const validationHintId = useId();
   const descriptionIds = `${
     descriptionId ? `${descriptionId} ` : ''
   }${validationHintId}`;
@@ -436,7 +437,7 @@ export const ImageInput = ({
       <InputWrapper onPaste={handlePaste}>
         <HiddenInput
           ref={inputRef}
-          id={id}
+          id={inputId}
           type="file"
           accept="image/*"
           onChange={handleInputChange}
@@ -450,7 +451,7 @@ export const ImageInput = ({
           isLoading={isLoading}
           isDragging={isDragging}
           invalid={invalid}
-          htmlFor={id}
+          htmlFor={inputId}
           onDragEnter={handleDragging}
           onDragOver={handleDragging}
           onDragLeave={handleDragLeave}