@carbon/react 1.70.0 → 1.71.0

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,22 @@ 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);
+  let numberOfPages;
+  switch (size) {
+    case 'md':
+      numberOfPages = itemsShown === 4 ? itemsShown : 5;
+      break;
+    case 'sm':
+      numberOfPages = Math.max(4, Math.min(itemsShown, 7));
+      break;
+    default:
+      numberOfPages = 4;
+      break;
+  }
   const [currentPage, setCurrentPage] = React.useState(page);
-  const [itemsDisplayedOnPage, setItemsDisplayedOnPage] = React.useState(itemsShown >= 4 ? itemsShown : 4);
+  const [itemsDisplayedOnPage, setItemsDisplayedOnPage] = React.useState(itemsShown >= 4 && !isSm ? itemsShown : numberOfPages);
   const [cuts, setCuts] = React.useState(calculateCuts(currentPage, totalItems, itemsDisplayedOnPage));
   const prevPage = usePrevious(currentPage);
   const prefix = usePrefix.usePrefix();
@@ -235,9 +251,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 : numberOfPages;
+    setItemsDisplayedOnPage(Math.max(itemsToBeShown, 4));
+    setCuts(calculateCuts(currentPage, totalItems, Math.max(itemsToBeShown, 4)));
+  }, [totalItems, itemsShown, isSm, size]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // update cuts if necessary whenever currentPage changes
   React.useEffect(() => {
@@ -396,7 +413,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/RadioButton/RadioButton.d.ts

@@ -15,6 +15,10 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Provide an optional className to be applied to the containing node
      */
     className?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `RadioButton` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify whether the `<RadioButton>` should be checked by default
      */
@@ -55,6 +59,7 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
      */
     onClick?: (evt: React.MouseEvent<HTMLInputElement>) => void;
     /**
+     * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButton` component
      */
     slug?: ReactNode;

package/lib/components/RadioButton/RadioButton.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 require('../Text/index.js');
+var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var useId = require('../../internal/useId.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
@@ -28,6 +29,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 const RadioButton = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
   const {
     className,
+    decorator,
     disabled,
     hideLabel,
     id,
@@ -51,13 +53,14 @@ const RadioButton = /*#__PURE__*/React__default["default"].forwardRef((props, re
   });
   const wrapperClasses = cx__default["default"](className, `${prefix}--radio-button-wrapper`, {
     [`${prefix}--radio-button-wrapper--label-${labelPosition}`]: labelPosition !== 'right',
-    [`${prefix}--radio-button-wrapper--slug`]: slug
+    [`${prefix}--radio-button-wrapper--slug`]: slug,
+    [`${prefix}--radio-button-wrapper--decorator`]: decorator
   });
   const inputRef = React.useRef(null);
-  let normalizedSlug;
-  if (slug && /*#__PURE__*/React__default["default"].isValidElement(slug)) {
-    const size = slug.props?.['kind'] === 'inline' ? 'md' : 'mini';
-    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    const size = normalizedDecorator.props?.['kind'] === 'inline' ? 'md' : 'mini';
+    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
       size
     });
   }
@@ -80,7 +83,9 @@ const RadioButton = /*#__PURE__*/React__default["default"].forwardRef((props, re
     className: `${prefix}--radio-button__appearance`
   }), labelText && /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     className: innerLabelClasses
-  }, labelText, normalizedSlug)));
+  }, labelText, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--radio-button-wrapper-inner--decorator`
+  }, normalizedDecorator) : '')));
 });
 RadioButton.displayName = 'RadioButton';
 RadioButton.propTypes = {
@@ -92,6 +97,10 @@ RadioButton.propTypes = {
    * Provide an optional className to be applied to the containing node
    */
   className: PropTypes__default["default"].string,
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `RadioButton` component
+   */
+  decorator: PropTypes__default["default"].node,
   /**
    * Specify whether the `<RadioButton>` should be checked by default
    */
@@ -138,7 +147,7 @@ RadioButton.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButton` component
    */
-  slug: PropTypes__default["default"].node,
+  slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   /**
    * Specify the value of the `<RadioButton>`
    */

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

@@ -17,6 +17,10 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
      * Provide an optional className to be applied to the container node
      */
     className?: string;
+    /**
+     * **Experimental**: Provide a decorator component to be rendered inside the `RadioButtonGroup` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify the `<RadioButton>` to be selected by default
      */
@@ -64,6 +68,7 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
      */
     readOnly?: boolean;
     /**
+     * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
      */
     slug?: ReactNode;

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -16,6 +16,7 @@ var cx = require('classnames');
 var index = require('../Text/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var iconsReact = require('@carbon/icons-react');
+var deprecate = require('../../prop-types/deprecate.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var useId = require('../../internal/useId.js');
 
@@ -29,6 +30,7 @@ const RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef((prop
   const {
     children,
     className,
+    decorator,
     defaultSelected,
     disabled,
     helperText,
@@ -97,7 +99,8 @@ const RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef((prop
     [`${prefix}--radio-button-group--readonly`]: readOnly,
     [`${prefix}--radio-button-group--invalid`]: !readOnly && invalid,
     [`${prefix}--radio-button-group--warning`]: showWarning,
-    [`${prefix}--radio-button-group--slug`]: slug
+    [`${prefix}--radio-button-group--slug`]: slug,
+    [`${prefix}--radio-button-group--decorator`]: decorator
   });
   const helperClasses = cx__default["default"](`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled
@@ -109,10 +112,10 @@ const RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef((prop
   }, helperText) : null;
   const divRef = React.useRef(null);
 
-  // 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',
       kind: 'default'
     });
@@ -127,7 +130,9 @@ const RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef((prop
     "aria-describedby": showHelper && helperText ? helperId : undefined
   }, rest), legendText && /*#__PURE__*/React__default["default"].createElement(index.Legend, {
     className: `${prefix}--label`
-  }, legendText, normalizedSlug), getRadioButtons()), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, legendText, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--radio-button-group-inner--decorator`
+  }, normalizedDecorator) : ''), getRadioButtons()), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--radio-button__validation-msg`
   }, !readOnly && invalid && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
     className: `${prefix}--radio-button__invalid-icon`
@@ -148,6 +153,10 @@ RadioButtonGroup.propTypes = {
    * Provide an optional className to be applied to the container node
    */
   className: PropTypes__default["default"].string,
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `RadioButtonGroup` component
+   */
+  decorator: PropTypes__default["default"].node,
   /**
    * Specify the `<RadioButton>` to be selected by default
    */
@@ -201,7 +210,7 @@ RadioButtonGroup.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
    */
-  slug: PropTypes__default["default"].node,
+  slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   /**
    * Specify the value that is currently selected in the group
    */

package/lib/components/RadioTile/RadioTile.d.ts

@@ -18,6 +18,10 @@ export interface RadioTileProps {
      * Provide an optional `className` to be applied to the underlying `<label>`.
      */
     className?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `RadioTile` component
+     */
+    decorator?: React.ReactNode;
     /**
      * Specify whether the `RadioTile` should be disabled.
      */
@@ -48,6 +52,7 @@ export interface RadioTileProps {
      */
     onChange?: (value: string | number, name: string | undefined, event: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>) => void;
     /**
+     * @deprecated please use `decorator` instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
      */
     slug?: React.ReactNode;

package/lib/components/RadioTile/RadioTile.js

@@ -35,6 +35,7 @@ const RadioTile = /*#__PURE__*/React__default["default"].forwardRef(function Rad
   let {
     children,
     className: customClassName,
+    decorator,
     disabled,
     light,
     checked,
@@ -55,7 +56,9 @@ const RadioTile = /*#__PURE__*/React__default["default"].forwardRef(function Rad
     [`${prefix}--tile--light`]: light,
     [`${prefix}--tile--disabled`]: disabled,
     [`${prefix}--tile--slug`]: slug,
-    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners
+    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
+    [`${prefix}--tile--decorator`]: decorator,
+    [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
   });
   const v12TileRadioIcons = index.useFeatureFlag('enable-v12-tile-radio-icons');
   function icon() {
@@ -79,10 +82,10 @@ const RadioTile = /*#__PURE__*/React__default["default"].forwardRef(function Rad
     }
   }
 
-  // Slug is always size `xs`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+  // AILabel is always size `xs`
+  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: 'xs'
     });
   }
@@ -106,7 +109,9 @@ const RadioTile = /*#__PURE__*/React__default["default"].forwardRef(function Rad
     className: `${prefix}--tile__checkmark`
   }, icon()), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     className: `${prefix}--tile-content`
-  }, children), normalizedSlug));
+  }, children), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--tile--inner-decorator`
+  }, normalizedDecorator) : ''));
 });
 RadioTile.displayName = 'RadioTile';
 RadioTile.propTypes = {
@@ -122,6 +127,10 @@ RadioTile.propTypes = {
    * Provide an optional `className` to be applied to the underlying `<label>`.
    */
   className: PropTypes__default["default"].string,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `RadioTile` component
+   */
+  decorator: PropTypes__default["default"].node,
   /**
    * Specify whether the `RadioTile` should be disabled.
    */
@@ -154,9 +163,9 @@ RadioTile.propTypes = {
    */
   required: PropTypes__default["default"].bool,
   /**
-   * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioTile` component
    */
-  slug: PropTypes__default["default"].node,
+  slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop for `RadioTile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.'),
   /**
    * Specify the tab index of the underlying `<input>`.
    */

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/Tag/DismissibleTag.d.ts

@@ -13,6 +13,10 @@ export interface DismissibleTagBaseProps {
      * Provide a custom className that is applied to the containing <span>
      */
     className?: string;
+    /**
+     * **Experimental:** Provide a `decorator` component to be rendered inside the `DismissibleTag` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify if the `DismissibleTag` is disabled
      */
@@ -36,6 +40,7 @@ export interface DismissibleTagBaseProps {
      */
     size?: keyof typeof SIZES;
     /**
+     * @deprecated please use `decorator` instead.
      * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
      */
     slug?: ReactNode;
@@ -58,12 +63,16 @@ export interface DismissibleTagBaseProps {
 }
 export type DismissibleTagProps<T extends React.ElementType> = PolymorphicProps<T, DismissibleTagBaseProps>;
 declare const DismissibleTag: {
-    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, title, onClose, slug, size, text, tagTitle, type, ...other }: DismissibleTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, decorator, disabled, id, renderIcon, title, onClose, slug, size, text, tagTitle, type, ...other }: DismissibleTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Provide a custom className that is applied to the containing <span>
          */
         className: PropTypes.Requireable<string>;
+        /**
+         * **Experimental:** Provide a `decorator` component to be rendered inside the `DismissibleTag` component
+         */
+        decorator: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * Specify if the `DismissibleTag` is disabled
          */
@@ -89,7 +98,7 @@ declare const DismissibleTag: {
         /**
          * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
          */
-        slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        slug: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
         /**
          * Provide text to be rendered inside of a the tag.
          */

package/lib/components/Tag/DismissibleTag.js

@@ -15,6 +15,7 @@ var React = require('react');
 var cx = require('classnames');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var deprecate = require('../../prop-types/deprecate.js');
 var Tag = require('./Tag.js');
 var iconsReact = require('@carbon/icons-react');
 require('../Tooltip/DefinitionTooltip.js');
@@ -33,6 +34,7 @@ var _Close;
 const DismissibleTag = _ref => {
   let {
     className,
+    decorator,
     disabled,
     id,
     renderIcon,
@@ -60,9 +62,9 @@ const DismissibleTag = _ref => {
       onClose(event);
     }
   };
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+  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: 'sm',
       kind: 'inline'
     });
@@ -89,7 +91,9 @@ const DismissibleTag = _ref => {
   }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     title: tagTitle ? tagTitle : text,
     className: `${prefix}--tag__label`
-  }, text), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
+  }, text), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--tag__decorator`
+  }, normalizedDecorator) : '', /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
     label: isEllipsisApplied ? dismissLabel : title,
     align: "bottom",
     className: tooltipClasses,
@@ -108,6 +112,10 @@ DismissibleTag.propTypes = {
    * Provide a custom className that is applied to the containing <span>
    */
   className: PropTypes__default["default"].string,
+  /**
+   * **Experimental:** Provide a `decorator` component to be rendered inside the `DismissibleTag` component
+   */
+  decorator: PropTypes__default["default"].node,
   /**
    * Specify if the `DismissibleTag` is disabled
    */
@@ -133,7 +141,7 @@ DismissibleTag.propTypes = {
   /**
    * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
    */
-  slug: PropTypes__default["default"].node,
+  slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   /**
    * Provide text to be rendered inside of a the tag.
    */

package/lib/components/Tag/Tag.d.ts

@@ -34,6 +34,10 @@ export interface TagBaseProps {
      * Provide a custom className that is applied to the containing <span>
      */
     className?: string;
+    /**
+     * **Experimental:** Provide a `decorator` component to be rendered inside the `Tag` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify if the `Tag` is disabled
      */
@@ -61,6 +65,7 @@ export interface TagBaseProps {
      */
     size?: keyof typeof SIZES;
     /**
+     * @deprecated please use `decorator` instead.
      * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
      */
     slug?: ReactNode;

package/lib/components/Tag/Tag.js

@@ -54,6 +54,7 @@ const Tag = /*#__PURE__*/React__default["default"].forwardRef(function Tag(_ref,
   let {
     children,
     className,
+    decorator,
     id,
     type,
     filter,
@@ -97,10 +98,10 @@ const Tag = /*#__PURE__*/React__default["default"].forwardRef(function Tag(_ref,
     }
   };
 
-  // Slug is always size `md` and `inline`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel' && !isInteractiveTag) {
-    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+  // AILabel is always size `sm` and `inline`
+  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel' && !isInteractiveTag) {
+    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
       size: 'sm',
       kind: 'inline'
     });
@@ -115,7 +116,7 @@ const Tag = /*#__PURE__*/React__default["default"].forwardRef(function Tag(_ref,
     }, /*#__PURE__*/React__default["default"].createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default["default"].createElement(Text.Text, {
       title: typeof children === 'string' ? children : undefined,
       className: `${prefix}--tag__label`
-    }, children !== null && children !== undefined ? children : typeText), normalizedSlug, /*#__PURE__*/React__default["default"].createElement("button", {
+    }, children !== null && children !== undefined ? children : typeText), normalizedDecorator, /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
       className: `${prefix}--tag__close-icon`,
       onClick: handleClose,
@@ -146,7 +147,9 @@ const Tag = /*#__PURE__*/React__default["default"].forwardRef(function Tag(_ref,
   }, children !== null && children !== undefined ? children : typeText)) : /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     title: children !== null && children !== undefined && typeof children === 'string' ? children : typeText,
     className: labelClasses
-  }, children !== null && children !== undefined ? children : typeText), normalizedSlug);
+  }, children !== null && children !== undefined ? children : typeText), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--tag__decorator`
+  }, normalizedDecorator) : '');
 });
 Tag.propTypes = {
   /**
@@ -162,6 +165,10 @@ Tag.propTypes = {
    * Provide a custom className that is applied to the containing <span>
    */
   className: PropTypes__default["default"].string,
+  /**
+   * **Experimental:** Provide a `decorator` component to be rendered inside the `Tag` component
+   */
+  decorator: PropTypes__default["default"].node,
   /**
    * Specify if the `Tag` is disabled
    */
@@ -191,7 +198,7 @@ Tag.propTypes = {
   /**
    * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
    */
-  slug: PropTypes__default["default"].node,
+  slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   /**
    * Text to show on clear filters
    */

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;