@carbon/react 1.57.0 → 1.58.0-rc.0

package/lib/components/DataTable/TableHeader.d.ts

@@ -4,14 +4,13 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { ReactNodeLike } from 'prop-types';
-import React, { type MouseEventHandler } from 'react';
+import React, { type MouseEventHandler, ReactNode } from 'react';
 import { sortStates } from './state/sorting';
 import { ReactAttr } from '../../types/common';
 import { DataTableSortState } from './state/sortStates';
 export type TableHeaderTranslationKey = 'carbon.table.header.icon.description';
 export interface TableHeaderTranslationArgs {
-    header: React.ReactNode;
+    header: ReactNode;
     isSortHeader?: boolean;
     sortDirection?: DataTableSortState;
     sortStates: typeof sortStates;
@@ -20,7 +19,7 @@ interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonEl
     /**
      * Pass in children that will be embedded in the table header label
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Specify an optional className to be applied to the container node
      */
@@ -56,7 +55,7 @@ interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonEl
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `TableSlugRow` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * Specify which direction we are currently sorting by, should be one of DESC,
      * NONE, or ASC.

package/lib/components/DataTable/TableSlugRow.d.ts

@@ -4,7 +4,8 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import PropTypes, { ReactNodeLike } from 'prop-types';
+import PropTypes from 'prop-types';
+import { ReactNode } from 'react';
 export interface TableSlugRowProps {
     /**
      * The CSS class names of the cell that wraps the underlying input control
@@ -13,7 +14,7 @@ export interface TableSlugRowProps {
     /**
      * Provide a `Slug` component to be rendered inside the `TableSlugRow` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
 }
 declare const TableSlugRow: {
     ({ className, slug }: TableSlugRowProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/DatePicker/DatePicker.d.ts

@@ -4,8 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { ReactNodeLike } from 'prop-types';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import flatpickr from 'flatpickr';
 import { DateLimit, DateOption } from 'flatpickr/dist/types/options';
 export type DatePickerTypes = 'simple' | 'single' | 'range';
@@ -34,7 +33,7 @@ interface DatePickerProps {
     /**
      * The child nodes.
      */
-    children: React.ReactNode | object;
+    children: ReactNode | object;
     /**
      * The CSS class names.
      */
@@ -74,7 +73,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.
      */
@@ -129,7 +128,7 @@ interface DatePickerProps {
     /**
      * Provide the text that is displayed when the control is in warning state (Fluid only)
      */
-    warnText?: ReactNodeLike;
+    warnText?: ReactNode;
 }
 declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
 export default DatePicker;

package/lib/components/Dropdown/Dropdown.d.ts

@@ -6,7 +6,6 @@
  */
 import React, { ReactNode } from 'react';
 import { UseSelectProps } from 'downshift';
-import { ReactNodeLike } from 'prop-types';
 import { type ListBoxMenuIconTranslationKey, ListBoxSize, ListBoxType } from '../ListBox';
 import { ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'id' | 'onChange';
@@ -40,7 +39,7 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      * 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
      */
@@ -61,7 +60,7 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
     /**
      * Message which is displayed if the value is invalid.
      */
-    invalidText?: React.ReactNode;
+    invalidText?: ReactNode;
     /**
      * Function to render items as custom components instead of strings.
      * Defaults to null and is overridden by a getter
@@ -114,12 +113,12 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
     /**
      * **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
      */
@@ -135,7 +134,7 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
     /**
      * Provide the text that is displayed when the control is in warning state
      */
-    warnText?: React.ReactNode;
+    warnText?: ReactNode;
 }
 export type DropdownTranslationKey = ListBoxMenuIconTranslationKey;
 type DropdownComponentProps<ItemType> = React.PropsWithoutRef<React.PropsWithChildren<DropdownProps<ItemType>> & React.RefAttributes<HTMLButtonElement>>;

package/lib/components/IconButton/index.d.ts

@@ -4,8 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { ReactNodeLike } from 'prop-types';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { ButtonSize } from '../Button';
 export declare const IconButtonKinds: readonly ["primary", "secondary", "ghost", "tertiary"];
 export type IconButtonKind = (typeof IconButtonKinds)[number];
@@ -17,7 +16,7 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
     /**
      * 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
      */
@@ -52,7 +51,7 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
      * 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
      */

package/lib/components/ListBox/next/ListBoxTrigger.js

@@ -37,6 +37,7 @@ const defaultTranslateWithId = id => defaultTranslations[id];
  * `ListBoxTrigger` is used to orient the icon up or down depending on the
  * state of the menu for a given `ListBox`
  */
+
 const ListBoxTrigger = /*#__PURE__*/React__default["default"].forwardRef(function ListBoxTrigger(_ref, ref) {
   let {
     isOpen,

package/lib/components/Menu/Menu.js

@@ -140,7 +140,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
     }
   }
   function focusItem(e) {
-    const currentItem = focusableItems.findIndex(item => item.ref.current.contains(document.activeElement));
+    const currentItem = focusableItems.findIndex(item => item.ref?.current?.contains(document.activeElement));
     let indexToFocus = currentItem;
 
     // if currentItem is -1, no menu item is focused yet.

package/lib/components/Menu/MenuItem.js

@@ -34,6 +34,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _CaretLeft, _CaretRight;
 const hoverIntentDelay = 150; // in ms
+const leaveIntentDelay = 300; // in ms
 
 const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, forwardRef) {
   let {
@@ -59,6 +60,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, forwardRe
   const hasChildren = Boolean(children);
   const [submenuOpen, setSubmenuOpen] = React.useState(false);
   const hoverIntentTimeout = React.useRef(null);
+  const leaveIntentTimeout = React.useRef(null);
   const isDisabled = disabled && !hasChildren;
   const isDanger = kind === 'danger' && !hasChildren;
   function registerItem() {
@@ -113,6 +115,11 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, forwardRe
     }
   }
   function handleMouseEnter() {
+    if (leaveIntentTimeout.current) {
+      // When mouse reenters before closing keep sub menu open
+      clearTimeout(leaveIntentTimeout.current);
+      leaveIntentTimeout.current = null;
+    }
     hoverIntentTimeout.current = setTimeout(() => {
       openSubmenu();
     }, hoverIntentDelay);
@@ -120,8 +127,12 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, forwardRe
   function handleMouseLeave() {
     if (hoverIntentTimeout.current) {
       clearTimeout(hoverIntentTimeout.current);
-      closeSubmenu();
-      menuItem.current?.focus();
+      // Avoid closing the sub menu as soon as mouse leaves
+      // prevents accidental closure due to scroll bar
+      leaveIntentTimeout.current = setTimeout(() => {
+        closeSubmenu();
+        menuItem.current?.focus();
+      }, leaveIntentDelay);
     }
   }
   function handleKeyDown(e) {

package/lib/components/Modal/Modal.d.ts

@@ -4,14 +4,13 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { ReactNodeLike } from 'prop-types';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { ReactAttr } from '../../types/common';
 import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
 export declare const ModalSizes: readonly ["xs", "sm", "md", "lg"];
 export type ModalSize = (typeof ModalSizes)[number];
 export interface ModalSecondaryButton {
-    buttonText?: string | React.ReactNode;
+    buttonText?: string | ReactNode;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 export interface ModalProps extends ReactAttr<HTMLDivElement> {
@@ -27,7 +26,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
      */
@@ -75,11 +74,11 @@ 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.
      * @deprecated this property is unused
@@ -124,11 +123,11 @@ 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
      */
@@ -154,7 +153,7 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `Modal` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
 }
 declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/lib/components/MultiSelect/FilterableMultiSelect.d.ts

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { type UseComboboxProps, type UseMultipleSelectionProps } from 'downshift';
-import { ReactNodeLike } from 'prop-types';
 import { ReactNode, FunctionComponent, ReactElement } from 'react';
 import { type ItemBase, type SortingPropTypes } from './MultiSelectPropTypes';
 export interface FilterableMultiSelectProps<Item extends ItemBase> extends SortingPropTypes<Item> {
@@ -143,7 +142,7 @@ export interface FilterableMultiSelectProps<Item extends ItemBase> extends Sorti
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * Provide text to be used in a `<label>` element that is tied to the
      * combobox via ARIA attributes.

package/lib/components/MultiSelect/MultiSelect.d.ts

@@ -5,11 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { UseSelectProps } from 'downshift';
-import { ReactNodeLike } from 'prop-types';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { ListBoxSize, ListBoxType } from '../ListBox';
 import { ListBoxProps } from '../ListBox/ListBox';
-import { OnChangeData } from '../Dropdown';
 import type { InternationalProps } from '../../types/common';
 interface SharedOptions {
     locale: string;
@@ -49,6 +47,9 @@ interface MultiSelectSortingProps<ItemType> {
      */
     sortItems?(items: ReadonlyArray<ItemType>, options: SortItemsOptions<ItemType>): ItemType[];
 }
+interface OnChangeData<ItemType> {
+    selectedItems: ItemType[] | null;
+}
 export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, InternationalProps<'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection'> {
     className?: string;
     /**
@@ -79,7 +80,7 @@ export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<Item
      * 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
      */
@@ -100,7 +101,7 @@ export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<Item
     /**
      * If invalid, what is the error?
      */
-    invalidText?: React.ReactNode;
+    invalidText?: ReactNode;
     /**
      * Function to render items as custom components instead of strings.
      * Defaults to null and is overridden by a getter
@@ -121,7 +122,7 @@ export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<Item
      * 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.
      *
@@ -170,12 +171,12 @@ export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<Item
     /**
      * **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.
      */
@@ -191,7 +192,7 @@ export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<Item
     /**
      * Provide the text that is displayed when the control is in warning state
      */
-    warnText?: React.ReactNode;
+    warnText?: ReactNode;
 }
 type MultiSelectComponentProps<ItemType> = React.PropsWithChildren<MultiSelectProps<ItemType>> & React.RefAttributes<HTMLButtonElement>;
 interface MultiSelectComponent {

package/lib/components/Notification/Notification.d.ts

@@ -388,8 +388,8 @@ export interface ActionableNotificationProps extends HTMLAttributes<HTMLDivEleme
      */
     closeOnEscape?: boolean;
     /**
-     * @deprecated use StaticNotification once it's available. Issue #15532
-     * Specify if focus should be moved to the component when the notification contains actions
+     * @deprecated This prop will be removed in the next major version, v12.
+     * Specify if focus should be moved to the component on render. To meet the spec for alertdialog, this must always be true. If you're setting this to false, explore using StaticNotification instead. https://github.com/carbon-design-system/carbon/pull/15532
      */
     hasFocus?: boolean;
     /**

package/lib/components/NumberInput/NumberInput.d.ts

@@ -4,7 +4,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { ReactNodeLike } from 'prop-types';
 import React, { ReactNode } from 'react';
 export declare const translationIds: {
     'increment.number': string;
@@ -111,7 +110,7 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `TextInput` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * Specify how much the values should increase/decrease upon clicking on up/down button
      */

package/lib/components/PasswordInput/index.d.ts

@@ -0,0 +1,3 @@
+import ControlledPasswordInput from '../TextInput/ControlledPasswordInput';
+import PasswordInput from '../TextInput/PasswordInput';
+export { ControlledPasswordInput, PasswordInput };

package/lib/components/Popover/index.d.ts

@@ -6,10 +6,16 @@
  */
 import React, { type ForwardedRef, type WeakValidationMap, type ElementType } from 'react';
 import { type PolymorphicProps } from '../../types/common';
-export type PopoverAlignment = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
+/**
+ * Deprecated popover alignment values.
+ * @deprecated Use NewPopoverAlignment instead.
+ */
+export type DeprecatedPopoverAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
+export type NewPopoverAlignment = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
+export type PopoverAlignment = DeprecatedPopoverAlignment | NewPopoverAlignment;
 interface PopoverBaseProps {
     /**
-     * Specify how the popover should align with the trigger element
+     * Specify how the popover should align with the trigger element.
      */
     align?: PopoverAlignment;
     /**

package/lib/components/Popover/index.js

@@ -12,6 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
+var deprecateValuesWithin = require('../../prop-types/deprecateValuesWithin.js');
 var React = require('react');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
@@ -35,6 +36,25 @@ const PopoverContext = /*#__PURE__*/React__default["default"].createContext({
   },
   autoAlign: null
 });
+
+/**
+ * Deprecated popover alignment values.
+ * @deprecated Use NewPopoverAlignment instead.
+ */
+
+const propMappingFunction = deprecatedValue => {
+  const mapping = {
+    'top-left': 'top-start',
+    'top-right': 'top-end',
+    'bottom-left': 'bottom-start',
+    'bottom-right': 'bottom-end',
+    'left-bottom': 'left-end',
+    'left-top': 'left-start',
+    'right-bottom': 'right-end',
+    'right-top': 'right-start'
+  };
+  return mapping[deprecatedValue];
+};
 const Popover = /*#__PURE__*/React__default["default"].forwardRef(function PopoverRenderFunction(_ref, forwardRef) {
   let {
     isTabTip,
@@ -233,8 +253,9 @@ if (process.env.NODE_ENV !== "production") {
 Popover.propTypes = {
   /**
    * Specify how the popover should align with the trigger element
+   
    */
-  align: PropTypes__default["default"].oneOf(['top', 'top-left',
+  align: deprecateValuesWithin["default"](PropTypes__default["default"].oneOf(['top', 'top-left',
   // deprecated use top-start instead
   'top-right',
   // deprecated use top-end instead
@@ -256,6 +277,10 @@ Popover.propTypes = {
 
   // new values to match floating-ui
   'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
+  //allowed prop values
+  ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'],
+  //optional mapper function
+  propMappingFunction),
   /**
    * Provide a custom element or component to render the top-level node for the
    * component.

package/lib/components/RadioButton/RadioButton.d.ts

@@ -4,8 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { ReactNodeLike } from 'prop-types';
-import React from 'react';
+import React, { ReactNode } from 'react';
 type ExcludedAttributes = 'onChange';
 export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
     /**
@@ -41,7 +40,7 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Provide label text to be read by screen readers when interacting with the
      * control
      */
-    labelText: ReactNodeLike;
+    labelText: ReactNode;
     /**
      * Provide a name for the underlying `<input>` node
      */
@@ -58,7 +57,7 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButton` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * Specify the value of the `<RadioButton>`
      */

package/lib/components/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -4,15 +4,14 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { ReactNodeLike } from 'prop-types';
-import React from 'react';
+import React, { ReactNode } from 'react';
 export declare const RadioButtonGroupContext: React.Context<null>;
 type ExcludedAttributes = 'onChange';
 export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HTMLFieldSetElement>, ExcludedAttributes> {
     /**
      * Provide a collection of `<RadioButton>` components to render in the group
      */
-    children?: ReactNodeLike;
+    children?: ReactNode;
     /**
      * Provide an optional className to be applied to the container node
      */
@@ -28,7 +27,7 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
     /**
      * Provide text that is used alongside the control label for additional help
      */
-    helperText?: ReactNodeLike;
+    helperText?: ReactNode;
     /**
      * Specify whether the control is currently invalid
      */
@@ -36,7 +35,7 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
     /**
      * Provide the text that is displayed when the control is in an invalid state
      */
-    invalidText?: ReactNodeLike;
+    invalidText?: ReactNode;
     /**
      * Provide where label text should be placed
      */
@@ -45,7 +44,7 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
      * Provide a legend to the RadioButtonGroup input that you are
      * exposing to the user
      */
-    legendText?: ReactNodeLike;
+    legendText?: ReactNode;
     /**
      * Specify the name of the underlying `<input>` nodes
      */
@@ -66,7 +65,7 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * Specify whether the control is currently in warning state
      */
@@ -74,7 +73,7 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
     /**
      * Provide the text that is displayed when the control is in warning state
      */
-    warnText?: ReactNodeLike;
+    warnText?: ReactNode;
     /**
      * Specify the value that is currently selected in the group
      */

package/lib/components/Select/Select.d.ts

@@ -4,7 +4,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { ReactNodeLike } from 'prop-types';
 import React, { ChangeEventHandler, ComponentPropsWithRef, ReactNode } from 'react';
 type ExcludedAttributes = 'size';
 interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttributes> {
@@ -80,7 +79,7 @@ interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttr
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `Dropdown` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * Specify whether the control is currently in warning state
      */

package/lib/components/Slider/Slider.d.ts

@@ -4,8 +4,8 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { type KeyboardEventHandler, PureComponent } from 'react';
-import PropTypes, { ReactNodeLike } from 'prop-types';
+import React, { type KeyboardEventHandler, PureComponent, ReactNode } from 'react';
+import PropTypes from 'prop-types';
 /**
  * Distinguish two handles by lower and upper positions.
  */
@@ -26,7 +26,7 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
     /**
      * The child nodes.
      */
-    children?: ReactNodeLike;
+    children?: ReactNode;
     /**
      * The CSS class name for the slider, set on the wrapping div.
      */
@@ -58,11 +58,11 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
     /**
      * Provide the text that is displayed when the Slider is in an invalid state
      */
-    invalidText?: React.ReactNode;
+    invalidText?: ReactNode;
     /**
      * The label for the slider.
      */
-    labelText?: ReactNodeLike;
+    labelText?: ReactNode;
     /**
      * @deprecated
      * `true` to use the light version.

package/lib/components/Slider/Slider.js

@@ -474,7 +474,7 @@ class Slider extends React.PureComponent {
         });
         if (adjustedValue !== targetValue) {
           this.setState({
-            correctedValue: targetValue,
+            correctedValue: targetValue.toString(),
             correctedPosition: handlePosition
           });
         } else {