fix(16054): replaces ReactNodeLike with ReactNode (#16465)

carbon-design-system · May 15, 2024 · 0d27e71 · 0d27e71
1 parent 1771cb6
commit 0d27e71
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 31 deletions.
diff --git a/packages/react/src/components/DatePicker/DatePicker.tsx b/packages/react/src/components/DatePicker/DatePicker.tsx
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import PropTypes, { ReactNodeLike } from 'prop-types';
+import PropTypes from 'prop-types';
 import React, {
   useContext,
   useEffect,
@@ -14,6 +14,7 @@ import React, {
   useCallback,
   useState,
   ForwardedRef,
+  ReactNode,
 } from 'react';
 import cx from 'classnames';
 import flatpickr from 'flatpickr';
@@ -215,7 +216,7 @@ interface DatePickerProps {
   /**
    * The child nodes.
    */
-  children: React.ReactNode | object;
+  children: ReactNode | object;
 
   /**
    * The CSS class names.
@@ -264,7 +265,7 @@ interface DatePickerProps {
   /**
    * Provide the text that is displayed when the control is in error state (Fluid Only)
    */
-  invalidText?: ReactNodeLike;
+  invalidText?: ReactNode;
 
   /**
    * `true` to use the light version.
@@ -396,7 +397,7 @@ interface DatePickerProps {
   /**
    * Provide the text that is displayed when the control is in warning state (Fluid only)
    */
-  warnText?: ReactNodeLike;
+  warnText?: ReactNode;
 }
 
 const DatePicker = React.forwardRef(function DatePicker(

diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx
@@ -22,7 +22,7 @@ import {
   UseSelectStateChangeTypes,
 } from 'downshift';
 import cx from 'classnames';
-import PropTypes, { ReactNodeLike } from 'prop-types';
+import PropTypes from 'prop-types';
 import {
   Checkmark,
   WarningAltFilled,
@@ -111,7 +111,7 @@ export interface DropdownProps<ItemType>
    * Provide helper text that is used alongside the control label for
    * additional help
    */
-  helperText?: React.ReactNode;
+  helperText?: ReactNode;
 
   /**
    * Specify whether the title text should be hidden or not
@@ -137,7 +137,7 @@ export interface DropdownProps<ItemType>
   /**
    * Message which is displayed if the value is invalid.
    */
-  invalidText?: React.ReactNode;
+  invalidText?: ReactNode;
 
   /**
    * Function to render items as custom components instead of strings.
@@ -201,13 +201,13 @@ export interface DropdownProps<ItemType>
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `Dropdown` component
    */
-  slug?: ReactNodeLike;
+  slug?: ReactNode;
 
   /**
    * Provide the title text that will be read by a screen reader when
    * visiting this control
    */
-  titleText?: React.ReactNode;
+  titleText?: ReactNode;
 
   /**
    * Callback function for translating ListBoxMenuIcon SVG title
@@ -230,7 +230,7 @@ export interface DropdownProps<ItemType>
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText?: React.ReactNode;
+  warnText?: ReactNode;
 }
 
 export type DropdownTranslationKey = ListBoxMenuIconTranslationKey;

diff --git a/packages/react/src/components/IconButton/index.tsx b/packages/react/src/components/IconButton/index.tsx
@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import PropTypes, { ReactNodeLike } from 'prop-types';
-import React, { ForwardedRef } from 'react';
+import PropTypes from 'prop-types';
+import React, { ForwardedRef, ReactNode } from 'react';
 import { ButtonSize } from '../Button';
 import classNames from 'classnames';
 import { Tooltip } from '../Tooltip';
@@ -44,7 +44,7 @@ interface IconButtonProps
   /**
    * Provide an icon or asset to be rendered inside of the IconButton
    */
-  children?: React.ReactNode;
+  children?: ReactNode;
 
   /**
    * Specify an optional className to be added to your Button
@@ -88,7 +88,7 @@ interface IconButtonProps
    * This means that if you have text in the child node it will not be
    * announced to the screen reader.
    */
-  label: ReactNodeLike;
+  label: ReactNode;
 
   /**
    * Specify the duration in milliseconds to delay before hiding the tooltip

diff --git a/packages/react/src/components/Modal/Modal.tsx b/packages/react/src/components/Modal/Modal.tsx
@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import PropTypes, { ReactNodeLike } from 'prop-types';
-import React, { useRef, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import React, { useRef, useEffect, useState, ReactNode } from 'react';
 import classNames from 'classnames';
 import { Close } from '@carbon/icons-react';
 import toggleClass from '../../tools/toggleClass';
@@ -37,7 +37,7 @@ export const ModalSizes = ['xs', 'sm', 'md', 'lg'] as const;
 export type ModalSize = (typeof ModalSizes)[number];
 
 export interface ModalSecondaryButton {
-  buttonText?: string | React.ReactNode;
+  buttonText?: string | ReactNode;
 
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
@@ -57,7 +57,7 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
   /**
    * Provide the contents of your Modal
    */
-  children?: React.ReactNode;
+  children?: ReactNode;
 
   /**
    * Specify an optional className to be applied to the modal root node
@@ -117,12 +117,12 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
   /**
    * Specify the content of the modal header title.
    */
-  modalHeading?: React.ReactNode;
+  modalHeading?: ReactNode;
 
   /**
    * Specify the content of the modal header label.
    */
-  modalLabel?: React.ReactNode;
+  modalLabel?: ReactNode;
 
   /**
    * Specify a handler for keypresses.
@@ -177,12 +177,12 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
   /**
    * Specify the text for the primary button
    */
-  primaryButtonText?: React.ReactNode;
+  primaryButtonText?: ReactNode;
 
   /**
    * Specify the text for the secondary button
    */
-  secondaryButtonText?: React.ReactNode;
+  secondaryButtonText?: ReactNode;
 
   /**
    * Specify an array of config objects for secondary buttons
@@ -214,7 +214,7 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `Modal` component
    */
-  slug?: ReactNodeLike;
+  slug?: ReactNode;
 }
 
 const Modal = React.forwardRef(function Modal(
@@ -372,7 +372,7 @@ const Modal = React.forwardRef(function Modal(
       Array.isArray(secondaryButtons) && secondaryButtons.length === 2,
   });
 
-  const asStringOrUndefined = (node: React.ReactNode): string | undefined => {
+  const asStringOrUndefined = (node: ReactNode): string | undefined => {
     return typeof node === 'string' ? node : undefined;
   };
   const modalLabelStr = asStringOrUndefined(modalLabel);

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -14,13 +14,14 @@ import {
   UseSelectStateChangeTypes,
 } from 'downshift';
 import isEqual from 'lodash.isequal';
-import PropTypes, { ReactNodeLike } from 'prop-types';
+import PropTypes from 'prop-types';
 import React, {
   ForwardedRef,
   useContext,
   useRef,
   useState,
   useMemo,
+  ReactNode,
 } from 'react';
 import ListBox, {
   ListBoxSize,
@@ -182,7 +183,7 @@ export interface MultiSelectProps<ItemType>
    * Provide helper text that is used alongside the control label for
    * additional help
    */
-  helperText?: React.ReactNode;
+  helperText?: ReactNode;
 
   /**
    * Specify whether the title text should be hidden or not
@@ -208,7 +209,7 @@ export interface MultiSelectProps<ItemType>
   /**
    * If invalid, what is the error?
    */
-  invalidText?: React.ReactNode;
+  invalidText?: ReactNode;
 
   /**
    * Function to render items as custom components instead of strings.
@@ -233,7 +234,7 @@ export interface MultiSelectProps<ItemType>
    * Generic `label` that will be used as the textual representation of what
    * this field is for
    */
-  label: NonNullable<React.ReactNode>;
+  label: NonNullable<ReactNode>;
 
   /**
    * `true` to use the light version.
@@ -292,13 +293,13 @@ export interface MultiSelectProps<ItemType>
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `MultiSelect` component
    */
-  slug?: ReactNodeLike;
+  slug?: ReactNode;
 
   /**
    * Provide text to be used in a `<label>` element that is tied to the
    * multiselect via ARIA attributes.
    */
-  titleText?: React.ReactNode;
+  titleText?: ReactNode;
 
   /**
    * Specify 'inline' to create an inline multi-select.
@@ -318,7 +319,7 @@ export interface MultiSelectProps<ItemType>
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText?: React.ReactNode;
+  warnText?: ReactNode;
 }
 
 const MultiSelect = React.forwardRef(