@carbon/react 1.70.0-rc.0 → 1.71.0-rc.0

package/lib/components/Notification/Notification.js

@@ -26,6 +26,7 @@ var noopFn = require('../../internal/noopFn.js');
 var wrapFocus = require('../../internal/wrapFocus.js');
 var index = require('../FeatureFlags/index.js');
 var warning = require('../../internal/warning.js');
+var deprecateValuesWithin = require('../../prop-types/deprecateValuesWithin.js');
 var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
@@ -703,6 +704,19 @@ ActionableNotification.propTypes = {
  * ==================
  */
 
+/**
+ * Deprecated callout kind values.
+ * @deprecated Use NewKindProps instead.
+ */
+
+const propMappingFunction = deprecatedValue => {
+  const mapping = {
+    error: 'warning',
+    // only redirect error -> warning
+    success: 'info' // only redirect success -> info
+  };
+  return mapping[deprecatedValue];
+};
 function Callout(_ref8) {
   let {
     actionButtonLabel,
@@ -713,7 +727,7 @@ function Callout(_ref8) {
     subtitle,
     statusIconDescription,
     className,
-    kind = 'error',
+    kind = 'info',
     lowContrast,
     ...rest
   } = _ref8;
@@ -769,7 +783,7 @@ Callout.propTypes = {
   /**
    * Specify what state the notification represents
    */
-  kind: PropTypes__default["default"].oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt']),
+  kind: deprecateValuesWithin["default"](PropTypes__default["default"].oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt']), ['warning', 'info'], propMappingFunction),
   /**
    * Specify whether you are using the low contrast variant of the Callout.
    */

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

@@ -24,6 +24,10 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Specify an optional className to be applied to the wrapper node
      */
     className?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `TextInput` component
+     */
+    decorator?: ReactNode;
     /**
      * Optional starting value for uncontrolled state
      */
@@ -113,6 +117,7 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      */
     size?: 'sm' | 'md' | 'lg';
     /**
+     * @deprecated please use `decorator` instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `TextInput` component
      */
     slug?: ReactNode;

package/lib/components/NumberInput/NumberInput.js

@@ -47,6 +47,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
   const {
     allowEmpty = false,
     className: customClassName,
+    decorator,
     disabled = false,
     disableWheel: disableWheelProp = false,
     defaultValue = 0,
@@ -122,7 +123,8 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
   const [incrementNumLabel, decrementNumLabel] = [t('increment.number'), t('decrement.number')];
   const wrapperClasses = cx__default["default"](`${prefix}--number__input-wrapper`, {
     [`${prefix}--number__input-wrapper--warning`]: normalizedProps.warn,
-    [`${prefix}--number__input-wrapper--slug`]: slug
+    [`${prefix}--number__input-wrapper--slug`]: slug,
+    [`${prefix}--number__input-wrapper--decorator`]: decorator
   });
   const iconClasses = cx__default["default"]({
     [`${prefix}--number__invalid`]: normalizedProps.invalid || normalizedProps.warn,
@@ -196,18 +198,18 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
     }
   }
 
-  // Slug is always size `mini`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+  // AILabel always size `mini`
+  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
       size: 'mini'
     });
   }
 
   // Need to update the internal value when the revert button is clicked
   let isRevertActive;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    isRevertActive = normalizedSlug.props.revertActive;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    isRevertActive = normalizedDecorator.props.revertActive;
   }
   React.useEffect(() => {
     if (!isRevertActive && slug && defaultValue) {
@@ -262,7 +264,9 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
     step: step,
     type: "number",
     value: value
-  })), normalizedSlug, Icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+  })), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--number__input-inner-wrapper--decorator`
+  }, normalizedDecorator) : '', Icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
     className: iconClasses
   }) : null, !hideSteppers && /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--number__controls`
@@ -307,6 +311,10 @@ NumberInput.propTypes = {
    * Specify an optional className to be applied to the wrapper node
    */
   className: PropTypes__default["default"].string,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `NumberInput` component
+   */
+  decorator: PropTypes__default["default"].node,
   /**
    * Optional starting value for uncontrolled state
    */
@@ -389,7 +397,7 @@ NumberInput.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `NumberInput` component
    */
-  slug: PropTypes__default["default"].node,
+  slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop for `NumberInput` is no longer needed and has ' + 'been deprecated in v11 in favor of the new `decorator` prop. It will be moved in the next major release.'),
   /**
    * Specify how much the values should increase/decrease upon clicking on up/down button
    */

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -217,7 +217,7 @@ class OverflowMenu extends React__default["default"].Component {
         direction
       } = _ref;
       const enabledIndices = React__default["default"].Children.toArray(this.props.children).reduce((acc, curr, i) => {
-        if ( /*#__PURE__*/React__default["default"].isValidElement(curr) && !curr.props.disabled) {
+        if (/*#__PURE__*/React__default["default"].isValidElement(curr) && !curr.props.disabled) {
           acc.push(i);
         }
         return acc;

package/lib/components/OverflowMenu/next/index.js

@@ -23,6 +23,7 @@ var mergeRefs = require('../../../tools/mergeRefs.js');
 var useId = require('../../../internal/useId.js');
 var usePrefix = require('../../../internal/usePrefix.js');
 var useAttachedMenu = require('../../../internal/useAttachedMenu.js');
+var deprecateValuesWithin = require('../../../prop-types/deprecateValuesWithin.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -31,6 +32,19 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const defaultSize = 'md';
+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 OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function OverflowMenu(_ref, forwardRef) {
   let {
     autoAlign = false,
@@ -172,7 +186,32 @@ OverflowMenu.propTypes = {
   /**
    * Specify how the trigger tooltip should be aligned.
    */
-  tooltipAlignment: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+  tooltipAlignment: deprecateValuesWithin["default"](PropTypes__default["default"].oneOf(['top', 'top-left',
+  // deprecated use top-start instead
+  'top-right',
+  // deprecated use top-end instead
+
+  'bottom', 'bottom-left',
+  // deprecated use bottom-start instead
+  'bottom-right',
+  // deprecated use bottom-end instead
+
+  'left', 'left-bottom',
+  // deprecated use left-end instead
+  'left-top',
+  // deprecated use left-start instead
+
+  'right', 'right-bottom',
+  // deprecated use right-end instead
+  'right-top',
+  // deprecated use right-start instead
+
+  // 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),
   /**
    * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
    */

package/lib/components/Pagination/Pagination.js

@@ -39,7 +39,7 @@ function renderSelectItems(total) {
   let counter = 1;
   const itemArr = [];
   while (counter <= total) {
-    itemArr.push( /*#__PURE__*/React__default["default"].createElement(SelectItem["default"], {
+    itemArr.push(/*#__PURE__*/React__default["default"].createElement(SelectItem["default"], {
       key: counter,
       value: counter,
       text: String(counter)
@@ -255,7 +255,7 @@ const Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pa
     onClick: decrementPage,
     ref: backBtnRef
   }, _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretLeft, null))), /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
-    align: "top-right",
+    align: "top-end",
     disabled: forwardButtonDisabled || isLastPage,
     kind: "ghost",
     className: forwardButtonClasses,

package/lib/components/Pagination/experimental/PageSelector.js

@@ -40,7 +40,7 @@ function PageSelector(_ref) {
   const renderPages = total => {
     const pages = [];
     for (let counter = 1; counter <= total; counter += 1) {
-      pages.push( /*#__PURE__*/React__default["default"].createElement(SelectItem["default"], {
+      pages.push(/*#__PURE__*/React__default["default"].createElement(SelectItem["default"], {
         key: counter,
         value: counter,
         text: String(counter)

package/lib/components/PaginationNav/PaginationNav.d.ts

@@ -28,7 +28,7 @@ interface PaginationNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'on
      */
     disableOverflow?: boolean;
     /**
-     * The number of items to be shown.
+     * The number of items to be shown (minimum of 4 unless props.items < 4).
      */
     itemsShown?: number;
     /**

package/lib/components/PaginationNav/PaginationNav.js

@@ -16,6 +16,8 @@ var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var index = require('../IconButton/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var layout = require('@carbon/layout');
+var useMatchMedia = require('../../internal/useMatchMedia.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -189,8 +191,10 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
     translateWithId: t = translateWithId,
     ...rest
   } = _ref4;
+  const smMediaQuery = `(max-width: ${layout.breakpoints.sm.width})`;
+  const isSm = useMatchMedia.useMatchMedia(smMediaQuery);
   const [currentPage, setCurrentPage] = React.useState(page);
-  const [itemsDisplayedOnPage, setItemsDisplayedOnPage] = React.useState(itemsShown >= 4 ? itemsShown : 4);
+  const [itemsDisplayedOnPage, setItemsDisplayedOnPage] = React.useState(itemsShown >= 4 && !isSm ? itemsShown : 4);
   const [cuts, setCuts] = React.useState(calculateCuts(currentPage, totalItems, itemsDisplayedOnPage));
   const prevPage = usePrevious(currentPage);
   const prefix = usePrefix.usePrefix();
@@ -235,9 +239,10 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
 
   // re-calculate cuts if props.totalItems or props.itemsShown change
   React.useEffect(() => {
-    setItemsDisplayedOnPage(itemsShown >= 4 ? itemsShown : 4);
-    setCuts(calculateCuts(currentPage, totalItems, itemsShown));
-  }, [totalItems, itemsShown]); // eslint-disable-line react-hooks/exhaustive-deps
+    const itemsToBeShown = itemsShown >= 4 && !isSm ? itemsShown : 4;
+    setItemsDisplayedOnPage(Math.max(itemsToBeShown, 4));
+    setCuts(calculateCuts(currentPage, totalItems, Math.max(itemsToBeShown, 4)));
+  }, [totalItems, itemsShown, isSm]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // update cuts if necessary whenever currentPage changes
   React.useEffect(() => {
@@ -396,7 +401,7 @@ PaginationNav.propTypes = {
   // eslint-disable-line react/prop-types
 
   /**
-   * The number of items to be shown.
+   * The number of items to be shown (minimum of 4 unless props.items < 4).
    */
   itemsShown: PropTypes__default["default"].number,
   /**

package/lib/components/Popover/index.js

@@ -223,7 +223,7 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
     const isTriggerElement = item?.type === 'button';
     const isTriggerComponent = enableFloatingStyles && displayName && ['ToggletipButton'].includes(displayName);
     const isAllowedTriggerComponent = enableFloatingStyles && !['ToggletipContent', 'PopoverContent'].includes(displayName);
-    if ( /*#__PURE__*/React__default["default"].isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
+    if (/*#__PURE__*/React__default["default"].isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
       const className = item?.props?.className;
       const ref = (item?.props).ref;
       const tabTipClasses = cx__default["default"](`${prefix}--popover--tab-tip__button`, className);
@@ -346,7 +346,7 @@ Popover.propTypes = {
    */
   open: PropTypes__default["default"].bool.isRequired
 };
-function PopoverContentRenderFunction( // eslint-disable-next-line react/prop-types
+function PopoverContentRenderFunction(// eslint-disable-next-line react/prop-types
 _ref2, forwardRef) {
   let {
     className,

package/lib/components/SkeletonText/SkeletonText.js

@@ -66,7 +66,7 @@ const SkeletonText = _ref => {
   }, [lineCountNumber, paragraph, refs, width, widthNum, widthPercent, widthPx]);
   const lines = [];
   for (let i = 0; i < lineCountNumber; i++) {
-    lines.push( /*#__PURE__*/React__default["default"].createElement("p", _rollupPluginBabelHelpers["extends"]({
+    lines.push(/*#__PURE__*/React__default["default"].createElement("p", _rollupPluginBabelHelpers["extends"]({
       className: skeletonTextClasses,
       key: i,
       ref: el => refs.current = [...refs.current, el]

package/lib/components/Tabs/Tabs.js

@@ -357,6 +357,41 @@ function TabList(_ref4) {
       setActiveIndex(selectedIndex);
     }
   }
+
+  /**
+   * Scroll the tab into view if it is not already visible
+   * @param tab - The tab to scroll into view
+   * @returns {void}
+   */
+  function scrollTabIntoView(tab) {
+    if (!isScrollable || !ref.current) {
+      return;
+    }
+    if (tab) {
+      // The width of the "scroll buttons"
+      const {
+        width: tabWidth
+      } = tab.getBoundingClientRect();
+
+      // The start and end position of the selected tab
+      const start = tab.offsetLeft;
+      const end = tab.offsetLeft + tabWidth;
+
+      // The start and end of the visible area for the tabs
+      const visibleStart = ref.current.scrollLeft + buttonWidth;
+      const visibleEnd = ref.current.scrollLeft + ref.current.clientWidth - buttonWidth;
+
+      // The beginning of the tab is clipped and not visible
+      if (start < visibleStart) {
+        setScrollLeft(start - buttonWidth);
+      }
+
+      // The end of the tab is clipped and not visible
+      if (end > visibleEnd) {
+        setScrollLeft(end + buttonWidth - ref.current.clientWidth);
+      }
+    }
+  }
   useEffectOnce.useEffectOnce(() => {
     const tab = tabs.current[selectedIndex];
     if (scrollIntoView && tab) {
@@ -388,12 +423,12 @@ function TabList(_ref4) {
   });
   useIsomorphicEffect["default"](() => {
     if (ref.current) {
-      //adding 1 in calculation for firefox support
+      // adding 1 in calculation for firefox support
       setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth + 1);
     }
     function handler() {
       if (ref.current) {
-        //adding 1 in calculation for firefox support
+        // adding 1 in calculation for firefox support
         setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth + 1);
       }
     }
@@ -411,36 +446,18 @@ function TabList(_ref4) {
       ref.current.scrollLeft = scrollLeft;
     }
   }, [scrollLeft]);
+
+  // scroll manual tabs when active index changes (focus outline movement)
   useIsomorphicEffect["default"](() => {
-    if (!isScrollable || !ref.current) {
-      return;
-    }
     const tab = activation === 'manual' ? tabs.current[activeIndex] : tabs.current[selectedIndex];
-    if (tab) {
-      // The width of the "scroll buttons"
-
-      // The start and end position of the selected tab
-      const {
-        width: tabWidth
-      } = tab.getBoundingClientRect();
-      const start = tab.offsetLeft;
-      const end = tab.offsetLeft + tabWidth;
-
-      // The start and end of the visible area for the tabs
-      const visibleStart = ref.current.scrollLeft + buttonWidth;
-      const visibleEnd = ref.current.scrollLeft + ref.current.clientWidth - buttonWidth;
-
-      // The beginning of the tab is clipped and not visible
-      if (start < visibleStart) {
-        setScrollLeft(start - buttonWidth);
-      }
+    scrollTabIntoView(tab);
+  }, [activation, activeIndex]);
 
-      // The end of the tab is clipped and not visible
-      if (end > visibleEnd) {
-        setScrollLeft(end + buttonWidth - ref.current.clientWidth);
-      }
-    }
-  }, [activation, activeIndex, selectedIndex, isScrollable, children]);
+  // scroll tabs when selected index changes
+  useIsomorphicEffect["default"](() => {
+    const tab = tabs.current[selectedIndex];
+    scrollTabIntoView(tab);
+  }, [selectedIndex, isScrollable, children]);
   usePressable.usePressable(previousButton, {
     onPress(_ref6) {
       let {

package/lib/components/TextArea/TextArea.d.ts

@@ -15,6 +15,10 @@ export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaEle
      * Specify the `cols` attribute for the underlying `<textarea>` node
      */
     cols?: number;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `TextArea` component
+     */
+    decorator?: ReactNode;
     /**
      * Optionally provide the default value of the `<textarea>`
      */
@@ -90,6 +94,7 @@ export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaEle
      */
     rows?: number;
     /**
+     * @deprecated please use `decorator` instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `TextArea` component
      */
     slug?: ReactNode;

package/lib/components/TextArea/TextArea.js

@@ -35,6 +35,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwardRef) => {
   const {
     className,
+    decorator,
     disabled = false,
     id,
     labelText,
@@ -164,7 +165,8 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
     [`${prefix}--text-area__wrapper--cols`]: other.cols,
     [`${prefix}--text-area__wrapper--readonly`]: other.readOnly,
     [`${prefix}--text-area__wrapper--warn`]: warn,
-    [`${prefix}--text-area__wrapper--slug`]: slug
+    [`${prefix}--text-area__wrapper--slug`]: slug,
+    [`${prefix}--text-area__wrapper--decorator`]: decorator
   });
   const labelClasses = cx__default["default"](`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel && !isFluid,
@@ -263,10 +265,10 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
     ref: ref
   }));
 
-  // Slug is always size `mini`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+  // AILabel is always size `mini`
+  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
       size: 'mini'
     });
   }
@@ -281,7 +283,9 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
     className: `${prefix}--text-area__invalid-icon`
   }), warn && !invalid && !isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
     className: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`
-  }), input, normalizedSlug, /*#__PURE__*/React__default["default"].createElement("span", {
+  }), input, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--text-area__inner-wrapper--decorator`
+  }, normalizedDecorator) : '', /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--text-area__counter-alert`,
     role: "alert",
     "aria-live": "assertive",
@@ -306,6 +310,10 @@ TextArea.propTypes = {
    * Specify the method used for calculating the counter number
    */
   counterMode: PropTypes__default["default"].oneOf(['character', 'word']),
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `TextArea` component
+   */
+  decorator: PropTypes__default["default"].node,
   /**
    * Optionally provide the default value of the `<textarea>`
    */
@@ -382,7 +390,7 @@ TextArea.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `TextArea` component
    */
-  slug: PropTypes__default["default"].node,
+  slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop for `TextArea` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.'),
   /**
    * Provide the current value of the `<textarea>`
    */

package/lib/components/TextInput/TextInput.d.ts

@@ -11,6 +11,10 @@ export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
      * Specify an optional className to be applied to the `<input>` node
      */
     className?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `TextInput` component
+     */
+    decorator?: ReactNode;
     /**
      * Optionally provide the default value of the `<input>`
      */
@@ -86,6 +90,7 @@ export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
      */
     size?: 'sm' | 'md' | 'lg' | 'xl';
     /**
+     * @deprecated please use `decorator` instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `TextInput` component
      */
     slug?: ReactNode;

package/lib/components/TextInput/TextInput.js

@@ -33,6 +33,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 const TextInput = /*#__PURE__*/React__default["default"].forwardRef(function TextInput(_ref, ref) {
   let {
     className,
+    decorator,
     disabled = false,
     helperText,
     hideLabel,
@@ -125,7 +126,8 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef(function Tex
   });
   const fieldWrapperClasses = cx__default["default"](`${prefix}--text-input__field-wrapper`, {
     [`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn,
-    [`${prefix}--text-input__field-wrapper--slug`]: slug
+    [`${prefix}--text-input__field-wrapper--slug`]: slug,
+    [`${prefix}--text-input__field-wrapper--decorator`]: decorator
   });
   const iconClasses = cx__default["default"]({
     [`${prefix}--text-input__invalid-icon`]: normalizedProps.invalid || normalizedProps.warn,
@@ -189,10 +191,10 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef(function Tex
   }, [ariaAnnouncement, prevAnnouncement]);
   const Icon = normalizedProps.icon;
 
-  // Slug is always size `mini`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+  // AILabel is always size `mini`
+  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
       size: 'mini'
     });
   }
@@ -207,7 +209,9 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef(function Tex
     "data-invalid": normalizedProps.invalid || null
   }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
     className: iconClasses
-  }), input, normalizedSlug, /*#__PURE__*/React__default["default"].createElement("span", {
+  }), input, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--text-input__field-inner-wrapper--decorator`
+  }, normalizedDecorator) : '', /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--text-input__counter-alert`,
     role: "alert",
     "aria-live": "assertive",
@@ -225,6 +229,10 @@ TextInput.propTypes = {
    * Specify an optional className to be applied to the `<input>` node
    */
   className: PropTypes__default["default"].string,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `TextInput` component
+   */
+  decorator: PropTypes__default["default"].node,
   /**
    * Optionally provide the default value of the `<input>`
    */
@@ -300,7 +308,7 @@ TextInput.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `TextInput` component
    */
-  slug: PropTypes__default["default"].node,
+  slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop for `TextInput` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.'),
   /**
    * Specify the type of the `<input>`
    */

package/lib/components/TreeView/TreeNode.js

@@ -73,7 +73,7 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, forwar
     }
   };
   const nodesWithProps = React__default["default"].Children.map(children, node => {
-    if ( /*#__PURE__*/React__default["default"].isValidElement(node)) {
+    if (/*#__PURE__*/React__default["default"].isValidElement(node)) {
       return /*#__PURE__*/React__default["default"].cloneElement(node, {
         active,
         depth: depth + 1,

package/lib/components/TreeView/TreeView.js

@@ -131,7 +131,7 @@ const TreeView = _ref => {
       sharedNodeProps.tabIndex = 0;
       focusTarget = true;
     }
-    if ( /*#__PURE__*/React__default["default"].isValidElement(node)) {
+    if (/*#__PURE__*/React__default["default"].isValidElement(node)) {
       return /*#__PURE__*/React__default["default"].cloneElement(node, sharedNodeProps);
     }
   });

package/lib/components/UIShell/HeaderMenu.js

@@ -134,7 +134,7 @@ class HeaderMenu extends React__default["default"].Component {
      * sequence when they might not want to go through all the items.
      */
     _rollupPluginBabelHelpers.defineProperty(this, "_renderMenuItem", (item, index) => {
-      if ( /*#__PURE__*/React__default["default"].isValidElement(item)) {
+      if (/*#__PURE__*/React__default["default"].isValidElement(item)) {
         return /*#__PURE__*/React__default["default"].cloneElement(item, {
           ref: this.handleItemRef(index)
         });

package/lib/components/UIShell/SideNav.js

@@ -106,7 +106,7 @@ function SideNavRenderFunction(_ref, ref) {
   childrenToRender = React__default["default"].Children.map(children, child => {
     // if we are controlled, check for if we have hovered over or the expanded state, else just use the expanded state (uncontrolled)
     const currentExpansionState = controlled ? expandedViaHoverState || expanded : expanded;
-    if ( /*#__PURE__*/React.isValidElement(child)) {
+    if (/*#__PURE__*/React.isValidElement(child)) {
       const childJsxElement = child;
       // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
       return /*#__PURE__*/React__default["default"].cloneElement(childJsxElement, {

package/lib/components/UIShell/SideNavItems.js

@@ -30,7 +30,7 @@ const SideNavItems = _ref => {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"]([`${prefix}--side-nav__items`], customClassName);
   const childrenWithExpandedState = React__default["default"].Children.map(children, child => {
-    if ( /*#__PURE__*/React__default["default"].isValidElement(child)) {
+    if (/*#__PURE__*/React__default["default"].isValidElement(child)) {
       // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
       const childDisplayName = child.type?.displayName;
       return /*#__PURE__*/React__default["default"].cloneElement(child, {