get rid of suppressHydrationWarning

brainly · Jul 29, 2024 · 0ff67fe · 0ff67fe
1 parent 1218c69
commit 0ff67fe
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 38 deletions.
diff --git a/src/components/card-interactive/CardCheckbox.tsx b/src/components/card-interactive/CardCheckbox.tsx
@@ -1,8 +1,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import Checkbox from '../form-elements/checkbox/Checkbox';
-import generateRandomString from '../../js/generateRandomString';
-
 export interface CardCheckboxPropsType
   extends Omit<React.ComponentPropsWithoutRef<'label'>, 'onChange'> {
   /**
@@ -160,7 +158,8 @@ export const CardCheckboxRoot = React.forwardRef<
       isControlled ? checked : defaultChecked
     );
 
-    const cardId = React.useMemo(() => id || generateRandomString(), [id]);
+    const genId = React.useId();
+    const cardId = id || genId;
 
     const cssVariables = {
       '--card-width': width,
@@ -205,7 +204,6 @@ export const CardCheckboxRoot = React.forwardRef<
           // On iOS the :active pseudo state is triggered only when there is a touch event set on the HTML element
           // and we use active pseudo class to provide press feedback.
           onTouchStart={() => null}
-          suppressHydrationWarning
           {...props}
         >
           <input
@@ -223,7 +221,6 @@ export const CardCheckboxRoot = React.forwardRef<
             aria-invalid={invalid ? true : undefined}
             aria-labelledby={ariaLabelledBy || `label-${cardId}`}
             aria-describedby={ariaDescribedBy}
-            suppressHydrationWarning
           />
           <div className="sg-card-interactive__border">
             <div className="sg-card-interactive__background">{children}</div>

diff --git a/src/components/card-interactive/CardRadio.tsx b/src/components/card-interactive/CardRadio.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import Radio from '../form-elements/radio/Radio';
-import generateRandomString from '../../js/generateRandomString';
 import {useCardRadioGroupContext} from './CardRadioGroupContext';
 import type {StyleType} from './types';
 
@@ -128,7 +127,8 @@ const CardRadio = React.forwardRef<HTMLInputElement, CardRadioPropsType>(
   ) => {
     const context = useCardRadioGroupContext();
 
-    const cardId = React.useMemo(() => id || generateRandomString(), [id]);
+    const genId = React.useId();
+    const cardId = id || genId;
     const isChecked = context.value === value;
     const isRequired = context.required || required;
     const isDisabled = context.disabled || disabled;
@@ -169,7 +169,6 @@ const CardRadio = React.forwardRef<HTMLInputElement, CardRadioPropsType>(
           // On iOS the :active pseudo state is triggered only when there is a touch event set on the HTML element
           // and we use active pseudo class to provide press feedback.
           onTouchStart={() => null}
-          suppressHydrationWarning
           {...props}
         >
           <input
@@ -186,7 +185,6 @@ const CardRadio = React.forwardRef<HTMLInputElement, CardRadioPropsType>(
             aria-invalid={isInvalid}
             aria-labelledby={ariaLabelledBy || `label-${cardId}`}
             aria-describedby={ariaDescribedBy}
-            suppressHydrationWarning
           />
           <div className="sg-card-interactive__border">
             <div className="sg-card-interactive__background">{children}</div>

diff --git a/src/components/icons/Icon.tsx b/src/components/icons/Icon.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import {generateId} from '../utils';
 
 export type IconTypeType =
   | 'academic_cap'
@@ -547,10 +546,6 @@ export type IconPropsType =
       | 'description'
     >);
 
-function generateIdSuffix(type: string) {
-  return `${type}-${generateId()}`;
-}
-
 const Icon = ({
   color = ICON_COLOR['icon-white'],
   size = 24,
@@ -572,7 +567,9 @@ const Icon = ({
   );
   const iconType = `#icon-${type}`;
   const Tag = as;
-  const idSuffix = generateIdSuffix(type);
+
+  const id = React.useId();
+  const idSuffix = `${type}-${id}`;
   const titleId = `title-${idSuffix}`;
   const defaultTitle = String(type).replace(/_/g, ' ');
   const descId = `desc-${idSuffix}`;
@@ -581,7 +578,6 @@ const Icon = ({
     ? undefined
     : [title, description].filter(Boolean).join(', ');
 
-  // suppressHydrationWarning is used until 'useId' hook is available
   return (
     <Tag {...props} className={iconClass} aria-label={ariaLabel}>
       {type ? (
@@ -590,9 +586,8 @@ const Icon = ({
           role="img"
           aria-labelledby={labelledBy}
           focusable="false"
-          suppressHydrationWarning
         >
-          <text id={titleId} visibility="hidden" suppressHydrationWarning>
+          <text id={titleId} visibility="hidden">
             {title || defaultTitle}
           </text>
           {description && <desc id={descId}>{description}</desc>}

diff --git a/src/components/select-menu/SelectMenu.tsx b/src/components/select-menu/SelectMenu.tsx
@@ -6,7 +6,7 @@ import {
   useMergeRefs,
 } from '@floating-ui/react';
 
-import {isTouchScreen, __DEV__, invariant, generateId} from '../utils';
+import {isTouchScreen, __DEV__, invariant} from '../utils';
 import Icon from '../icons/Icon';
 import SubjectIcon from '../subject-icons/SubjectIcon';
 import type {IconTypeType as SubjectIconTypeType} from '../subject-icons/SubjectIcon';
@@ -208,15 +208,17 @@ const SelectMenu = React.forwardRef<HTMLDivElement, SelectMenuPropsType>(
       ...additionalProps
     } = props;
 
-    const {current: id} = React.useRef<string>(`select-${generateId()}`);
+    const id = React.useId()
+
+    const selectId = `select-${id}`
 
     if (__DEV__) {
       invariant(
         !(valid && invalid),
         `Select cannot be valid and invalid at the same time.`
       );
     }
-    const wrapperId = `${id}-wrapper`;
+    const wrapperId = `${selectId}-wrapper`;
     const popupClassName = 'sg-select-menu__popup';
     const popupContentClassName = 'sg-select-menu__options-wrapper';
     const selectElementClassName = 'sg-select-menu__element';
@@ -415,11 +417,10 @@ const SelectMenu = React.forwardRef<HTMLDivElement, SelectMenuPropsType>(
         id={wrapperId}
         className={selectClass}
         onClick={onClick}
-        suppressHydrationWarning
       >
         <div
           ref={selectRef}
-          id={id}
+          id={selectId}
           className={selectElementClassName}
           role="combobox"
           tabIndex={!disabled ? 0 : -1}
@@ -429,7 +430,6 @@ const SelectMenu = React.forwardRef<HTMLDivElement, SelectMenuPropsType>(
           aria-expanded={isExpanded}
           aria-haspopup="listbox"
           data-status={status}
-          suppressHydrationWarning
           {...interactions.getReferenceProps({
             // Handle keyboard
             onKeyDown(event) {

diff --git a/src/components/subject-icons/SubjectIcon.tsx b/src/components/subject-icons/SubjectIcon.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import classNames from 'classnames';
 import type {IconColorType} from '../icons/Icon';
 import {ICON_COLOR} from '../icons/Icon';
-import {generateId} from '../utils';
 
 export type IconTypeType =
   | 'accountancy'
@@ -185,7 +184,7 @@ const SubjectIcon = ({
   title,
   ...props
 }: SubjectIconPropsType) => {
-  const {current: id} = React.useRef(generateId());
+  const id = React.useId()
   const iconClass = classNames(
     'sg-subject-icon',
     {
@@ -205,9 +204,8 @@ const SubjectIcon = ({
       className={iconClass}
       aria-labelledby={titleId}
       role="img"
-      suppressHydrationWarning
     >
-      <text id={titleId} visibility="hidden" suppressHydrationWarning>
+      <text id={titleId} visibility="hidden">
         {title || defaultTitle}
       </text>
       <use xlinkHref={iconType} aria-hidden="true" />

diff --git a/src/components/text/Link.tsx b/src/components/text/Link.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import {__DEV__, invariant, generateId} from '../utils';
+import {__DEV__, invariant} from '../utils';
 import Text from './Text';
 import type {TextColorType, TextSizeType} from './Text';
 import {
@@ -111,7 +111,7 @@ const Link = (props: LinkPropsType) => {
     hideNewTabIndicator = false,
     ...additionalProps
   } = props;
-  const {current: labelId} = React.useRef(generateId());
+  const labelId = React.useId();
   let textSize: ResponsivePropType<TextSizeType> | undefined;
 
   if (typeof size === 'object') {
@@ -163,7 +163,6 @@ const Link = (props: LinkPropsType) => {
     className
   );
 
-  // suppressHydrationWarning is used until 'useId' hook is available
   if (as === 'button') {
     return (
       <Text
@@ -172,12 +171,7 @@ const Link = (props: LinkPropsType) => {
         className={linkClass}
         size={textSize}
       >
-        <span
-          id={labelId}
-          aria-label={ariaLabel}
-          aria-hidden
-          suppressHydrationWarning
-        >
+        <span id={labelId} aria-label={ariaLabel} aria-hidden>
           {children}
         </span>
         <button
@@ -186,7 +180,6 @@ const Link = (props: LinkPropsType) => {
           disabled={disabled}
           type="button"
           aria-labelledby={labelId}
-          suppressHydrationWarning
         />
       </Text>
     );