@carbon/react 1.57.0-rc.0 → 1.58.0-rc.0

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/MultiSelect/MultiSelect.js

@@ -626,6 +626,5 @@ MultiSelect.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
-var MultiSelect$1 = MultiSelect;
 
-exports["default"] = MultiSelect$1;
+exports["default"] = MultiSelect;

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

@@ -0,0 +1,62 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 from 'prop-types';
+export declare const sortingPropTypes: {
+    /**
+     * Provide a compare function that is used to determine the ordering of
+     * options. `compareItems` has the following function signature:
+     *
+     * compareFunction :
+     *  (itemA: string, itemB: string, { locale: string }) => number
+     */
+    compareItems: PropTypes.Requireable<(...args: any[]) => any>;
+    /**
+     * Provide a method that sorts all options in the control. Overriding this
+     * prop means that you also have to handle the sort logic for selected versus
+     * un-selected items. If you just want to control ordering, consider the
+     * `compareItems` prop instead.
+     *
+     * `sortItems` has the following signature:
+     *
+     * sortItems :
+     *   (items: Array<Item>, {
+     *     selectedItems: Array<Item>,
+     *     itemToString: Item => string,
+     *     compareItems: (itemA: string, itemB: string, {
+     *       locale: string
+     *     }) => number,
+     *     locale: string,
+     *   }) => Array<Item>
+     */
+    sortItems: PropTypes.Requireable<(...args: any[]) => any>;
+};
+export interface ItemBase {
+    disabled?: boolean;
+}
+export interface SortingPropTypes<Item extends ItemBase> {
+    /**
+     * Provide a compare function that is used
+     * to determine the ordering of options.
+     */
+    compareItems(itemA: string, itemB: string, ctx: {
+        locale: string;
+    }): number;
+    /**
+     * Provide a method that sorts all options in the control. Overriding this
+     * prop means that you also have to handle the sort logic for selected versus
+     * un-selected items. If you just want to control ordering, consider the
+     * `compareItems` prop instead.
+     */
+    sortItems(items: Item[], state: {
+        selectedItems: Item[];
+        itemToString(item: Item): string;
+        compareItems(itemA: string, itemB: string, ctx: {
+            locale: string;
+        }): number;
+        locale: string;
+    }): Item[];
+}

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

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 MultiSelect from './MultiSelect';
+import { default as FilterableMultiSelect } from './FilterableMultiSelect';
+export { FilterableMultiSelect, MultiSelect };
+export default MultiSelect;

package/lib/components/MultiSelect/index.js

@@ -14,6 +14,8 @@ var MultiSelect = require('./MultiSelect.js');
 var FilterableMultiSelect = require('./FilterableMultiSelect.js');
 
 FilterableMultiSelect["default"].displayName = 'MultiSelect.Filterable';
+// @ts-expect-error: The attribute indeed does not exist on the object,
+// but since it is already deprecated, we do not have to fix it.
 MultiSelect["default"].Filterable = FilterableMultiSelect["default"];
 if (process.env.NODE_ENV !== "production") {
   deprecateFieldOnObject.deprecateFieldOnObject(MultiSelect["default"], 'Filterable', FilterableMultiSelect["default"]);

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/Pagination/Pagination.js

@@ -78,10 +78,10 @@ const Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pa
     pageSize: controlledPageSize,
     pageSizeInputDisabled,
     pageSizes: controlledPageSizes,
-    pageText = (page, pagesUnknown) => `page ${pagesUnknown ? '' : page}`,
+    pageText = page => `page ${page}`,
     pagesUnknown = false,
     size = 'md',
-    totalItems = 1,
+    totalItems,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -103,7 +103,7 @@ const Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pa
     [`${prefix}--pagination--${size}`]: size,
     [customClassName]: !!customClassName
   });
-  const totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
+  const totalPages = totalItems ? Math.max(Math.ceil(totalItems / pageSize), 1) : NaN;
   const backButtonDisabled = disabled || page === 1;
   const backButtonClasses = cx__default["default"]({
     [`${prefix}--pagination__button`]: true,
@@ -155,7 +155,7 @@ const Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pa
   }
   function handlePageInputChange(event) {
     const page = Number(event.target.value);
-    if (page > 0 && page <= Math.max(Math.ceil(totalItems / pageSize), 1)) {
+    if (page > 0 && totalItems && page <= Math.max(Math.ceil(totalItems / pageSize), 1)) {
       setPage(page);
       if (onChange) {
         onChange({
@@ -228,11 +228,11 @@ const Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pa
     text: String(sizeObj.text)
   }))), /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--pagination__text ${prefix}--pagination__items-count`
-  }, pagesUnknown ? itemText(pageSize * (page - 1) + 1, page * pageSize) : itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, pagesUnknown || !totalItems ? itemText(pageSize * (page - 1) + 1, page * pageSize) : itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--pagination__right`
   }, pagesUnknown ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${prefix}--pagination__text ${prefix}--pagination__page-text`
-  }, pagesUnknown ? pageText(page, pagesUnknown) : pageRangeText(page, totalPages)) : null, /*#__PURE__*/React__default["default"].createElement(Select["default"], {
+    className: `${prefix}--pagination__text ${prefix}--pagination__page-text ${prefix}--pagination__unknown-pages-text`
+  }, pageText(page)) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Select["default"], {
     id: `${prefix}-pagination-select-${inputId}-right`,
     className: `${prefix}--select__page-number`,
     labelText: `Page number, of ${totalPages} pages`,
@@ -241,9 +241,9 @@ const Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pa
     onChange: handlePageInputChange,
     value: page,
     disabled: pageInputDisabled || disabled
-  }, selectItems), pagesUnknown ? null : /*#__PURE__*/React__default["default"].createElement("span", {
+  }, selectItems), /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--pagination__text`
-  }, pagesUnknown ? pageText(page, pagesUnknown) : pageRangeText(page, totalPages)), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, pageRangeText(page, totalPages))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--pagination__control-buttons`
   }, /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
     align: "top",

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,11 +57,15 @@ 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>`
      */
     value?: string | number;
+    /**
+     * `true` to specify if the input is required.
+     */
+    required?: boolean;
 }
 declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<unknown>>;
 export default RadioButton;

package/lib/components/RadioButton/RadioButton.js

@@ -37,6 +37,7 @@ const RadioButton = /*#__PURE__*/React__default["default"].forwardRef((props, re
     onChange = () => {},
     value = '',
     slug,
+    required,
     ...rest
   } = props;
   const prefix = usePrefix.usePrefix();
@@ -70,7 +71,8 @@ const RadioButton = /*#__PURE__*/React__default["default"].forwardRef((props, re
     ref: mergeRefs["default"](inputRef, ref),
     disabled: disabled,
     value: value,
-    name: name
+    name: name,
+    required: required
   })), /*#__PURE__*/React__default["default"].createElement("label", {
     htmlFor: uniqueId,
     className: `${prefix}--radio-button__label`
@@ -129,6 +131,10 @@ RadioButton.propTypes = {
    * Provide a handler that is invoked when a user clicks on the control
    */
   onClick: PropTypes__default["default"].func,
+  /**
+   * `true` to specify if the control is required.
+   */
+  required: PropTypes__default["default"].bool,
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButton` component
    */

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,11 +73,15 @@ 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
      */
     valueSelected?: string | number;
+    /**
+     * `true` to specify if input selection in group is required.
+     */
+    required?: boolean;
 }
 declare const RadioButtonGroup: React.ForwardRefExoticComponent<RadioButtonGroupProps & React.RefAttributes<unknown>>;
 export default RadioButtonGroup;

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -45,6 +45,7 @@ const RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef((prop
     warn = false,
     warnText,
     slug,
+    required,
     ...rest
   } = props;
   const prefix = usePrefix.usePrefix();
@@ -72,7 +73,8 @@ const RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef((prop
         key: value,
         value: value,
         onChange: handleOnChange,
-        checked: value === selected
+        checked: value === selected,
+        required: required
       };
       if (!selected && radioButton?.props.checked) {
         newProps.checked = true;
@@ -197,6 +199,10 @@ RadioButtonGroup.propTypes = {
    * Whether the RadioButtonGroup should be read-only
    */
   readOnly: PropTypes__default["default"].bool,
+  /**
+   * `true` to specify if radio selection in group is required.
+   */
+  required: PropTypes__default["default"].bool,
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
    */

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 {

package/lib/components/Tag/DismissibleTag.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 PropTypes, { ReactNodeLike } from 'prop-types';
-import React from 'react';
+import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import { PolymorphicProps } from '../../types/common';
 import { SIZES, TYPES } from './Tag';
 export interface DismissibleTagBaseProps {
@@ -42,7 +42,7 @@ export interface DismissibleTagBaseProps {
     /**
      * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * Text to show on clear filters
      */

package/lib/components/Tag/OperationalTag.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 PropTypes, { ReactNodeLike } from 'prop-types';
-import React, { MouseEventHandler } from 'react';
+import PropTypes from 'prop-types';
+import React, { MouseEventHandler, ReactNode } from 'react';
 import { PolymorphicProps } from '../../types/common';
 import { SIZES } from './Tag';
 declare const TYPES: {
@@ -51,7 +51,7 @@ export interface OperationalTagBaseProps {
     /**
      * **Experimental:** Provide a `Slug` component to be rendered inside the `OperationalTag` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * Specify the type of the `Tag`
      */

package/lib/components/Tag/SelectableTag.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 PropTypes, { ReactNodeLike } from 'prop-types';
-import React from 'react';
+import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import { PolymorphicProps } from '../../types/common';
 import { SIZES } from './Tag';
 export interface SelectableTagBaseProps {
@@ -42,7 +42,7 @@ export interface SelectableTagBaseProps {
     /**
      * **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
 }
 export type SelectableTagProps<T extends React.ElementType> = PolymorphicProps<T, SelectableTagBaseProps>;
 declare const SelectableTag: {

package/lib/components/Tag/Tag.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 PropTypes, { ReactNodeLike } from 'prop-types';
-import React from 'react';
+import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import { PolymorphicProps } from '../../types/common';
 export declare const TYPES: {
     red: string;
@@ -64,7 +64,7 @@ export interface TagBaseProps {
     /**
      * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
      */