@carbon/react 1.71.0-rc.0 → 1.71.0

package/lib/components/FluidTextInput/FluidPasswordInput.js

@@ -89,5 +89,9 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText: PropTypes__default["default"].node
+  warnText: PropTypes__default["default"].node,
+  /**
+   * Whether or not the component is readonly
+   */
+  readOnly: PropTypes__default["default"].bool
 });

package/lib/components/FluidTextInput/FluidTextInput.d.ts

@@ -65,6 +65,10 @@ export interface FluidTextInputProps {
      * Provide the text that is displayed when the control is in warning state
      */
     warnText?: React.ReactNode;
+    /**
+     * Whether or not the component is readonly
+     */
+    readOnly?: boolean;
 }
 declare const FluidTextInput: React.ForwardRefExoticComponent<FluidTextInputProps & React.RefAttributes<HTMLInputElement>>;
 export default FluidTextInput;

package/lib/components/FluidTextInput/FluidTextInput.js

@@ -107,7 +107,11 @@ FluidTextInput.propTypes = {
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText: PropTypes__default["default"].node
+  warnText: PropTypes__default["default"].node,
+  /**
+   * Whether or not the component is readonly
+   */
+  readOnly: PropTypes__default["default"].bool
 };
 
 exports["default"] = FluidTextInput;

package/lib/components/FluidTimePicker/FluidTimePicker.d.ts

@@ -40,6 +40,10 @@ export interface FluidTimePickerProps extends FluidTextInputProps {
      * Provide the text that is displayed when the control is in warning state
      */
     warnText?: React.ReactNode;
+    /**
+     * Specify if the component is readonly
+     */
+    readOnly?: boolean;
 }
 declare const FluidTimePicker: React.ForwardRefExoticComponent<FluidTimePickerProps & React.RefAttributes<HTMLInputElement>>;
 export default FluidTimePicker;

package/lib/components/FluidTimePicker/FluidTimePicker.js

@@ -34,6 +34,7 @@ const FluidTimePicker = /*#__PURE__*/React__default["default"].forwardRef(functi
     invalidText,
     warn,
     warnText,
+    readOnly,
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -53,6 +54,19 @@ const FluidTimePicker = /*#__PURE__*/React__default["default"].forwardRef(functi
     }
   };
   const error = invalid || warn;
+  const childrenWithProps = () => {
+    if (disabled) {
+      return React__default["default"].Children.toArray(children).map(child => /*#__PURE__*/React__default["default"].cloneElement(child, {
+        disabled: true
+      }));
+    }
+    if (readOnly) {
+      return React__default["default"].Children.toArray(children).map(child => /*#__PURE__*/React__default["default"].cloneElement(child, {
+        readOnly: true
+      }));
+    }
+    return children;
+  };
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -60,12 +74,10 @@ const FluidTimePicker = /*#__PURE__*/React__default["default"].forwardRef(functi
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--time-picker__input`
   }, /*#__PURE__*/React__default["default"].createElement(FluidTextInput["default"], _rollupPluginBabelHelpers["extends"]({
-    ref: ref
-  }, other))), disabled ? React__default["default"].Children.toArray(children).map(child => {
-    return /*#__PURE__*/React__default["default"].cloneElement(child, {
-      disabled
-    });
-  }) : children), error && /*#__PURE__*/React__default["default"].createElement("hr", {
+    ref: ref,
+    readOnly: readOnly,
+    disabled: disabled
+  }, other))), childrenWithProps()), error && /*#__PURE__*/React__default["default"].createElement("hr", {
     className: `${prefix}--time-picker__divider`
   }), error && /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--form-requirement`
@@ -108,7 +120,11 @@ FluidTimePicker.propTypes = {
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText: PropTypes__default["default"].node
+  warnText: PropTypes__default["default"].node,
+  /**
+   * Whether or not the component is readonly
+   */
+  readOnly: PropTypes__default["default"].bool
 };
 
 exports["default"] = FluidTimePicker;

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

@@ -39,6 +39,10 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
      * Specify whether the Modal is for dangerous actions
      */
     danger?: boolean;
+    /**
+     * **Experimental**: Provide a decorator component to be rendered inside the `Modal` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify whether the modal contains scrolling content
      */
@@ -151,6 +155,7 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
      */
     size?: ModalSize;
     /**
+     * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `Modal` component
      */
     slug?: ReactNode;

package/lib/components/Modal/Modal.js

@@ -31,6 +31,7 @@ var noopFn = require('../../internal/noopFn.js');
 require('../Text/index.js');
 var index = require('../FeatureFlags/index.js');
 var events = require('../../tools/events.js');
+var deprecate = require('../../prop-types/deprecate.js');
 var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
@@ -48,6 +49,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     'aria-label': ariaLabelProp,
     children,
     className,
+    decorator,
     modalHeading = '',
     modalLabel = '',
     modalAriaLabel,
@@ -154,7 +156,8 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     [`${prefix}--modal-tall`]: !passiveModal,
     'is-visible': open,
     [`${prefix}--modal--danger`]: danger,
-    [`${prefix}--modal--slug`]: slug
+    [`${prefix}--modal--slug`]: slug,
+    [`${prefix}--modal--decorator`]: decorator
   }, className);
   const containerClasses = cx__default["default"](`${prefix}--modal-container`, {
     [`${prefix}--modal-container--${size}`]: size,
@@ -238,10 +241,10 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     };
   }, []);
 
-  // Slug is always size `sm`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+  // AILabel always size `sm`
+  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'
     });
   }
@@ -278,7 +281,9 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     as: "h2",
     id: modalHeadingId,
     className: `${prefix}--modal-header__heading`
-  }, modalHeading), normalizedSlug, !passiveModal && modalButton), /*#__PURE__*/React__default["default"].createElement(index$1.Layer, _rollupPluginBabelHelpers["extends"]({
+  }, modalHeading), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--modal--inner__decorator`
+  }, normalizedDecorator) : '', !passiveModal && modalButton), /*#__PURE__*/React__default["default"].createElement(index$1.Layer, _rollupPluginBabelHelpers["extends"]({
     ref: contentRef,
     id: modalBodyId,
     className: contentClasses
@@ -359,6 +364,10 @@ Modal.propTypes = {
    * Specify whether the Modal is for dangerous actions
    */
   danger: PropTypes__default["default"].bool,
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `Modal` component
+   */
+  decorator: PropTypes__default["default"].node,
   /**
    * Specify whether the modal contains scrolling content
    */
@@ -489,10 +498,7 @@ Modal.propTypes = {
    * Specify the size variant.
    */
   size: PropTypes__default["default"].oneOf(ModalSizes),
-  /**
-   * **Experimental**: Provide a `Slug` component to be rendered inside the `Modal` 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.')
 };
 
 exports.ModalSizes = ModalSizes;

package/lib/components/PaginationNav/PaginationNav.js

@@ -193,8 +193,20 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
   } = _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 && !isSm ? 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();
@@ -239,10 +251,10 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
 
   // re-calculate cuts if props.totalItems or props.itemsShown change
   React.useEffect(() => {
-    const itemsToBeShown = itemsShown >= 4 && !isSm ? itemsShown : 4;
+    const itemsToBeShown = itemsShown >= 4 && !isSm ? itemsShown : numberOfPages;
     setItemsDisplayedOnPage(Math.max(itemsToBeShown, 4));
     setCuts(calculateCuts(currentPage, totalItems, Math.max(itemsToBeShown, 4)));
-  }, [totalItems, itemsShown, isSm]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [totalItems, itemsShown, isSm, size]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // update cuts if necessary whenever currentPage changes
   React.useEffect(() => {

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/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;