@carbon/react 1.70.0 → 1.71.0

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

@@ -2,6 +2,10 @@ import React, { type ReactNode, type MouseEvent, type KeyboardEvent, type HTMLAt
 export interface TileProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     className?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `Tile` component
+     */
+    decorator?: ReactNode;
     /** @deprecated */
     light?: boolean;
     /**
@@ -10,7 +14,8 @@ export interface TileProps extends HTMLAttributes<HTMLDivElement> {
      */
     hasRoundedCorners?: boolean;
     /**
-     * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
+     * @deprecated please use `decorator` instead.
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `Tile` component
      */
     slug?: ReactNode;
 }
@@ -18,6 +23,10 @@ export declare const Tile: React.ForwardRefExoticComponent<TileProps & React.Ref
 export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
     children?: ReactNode;
     className?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component or set the boolean to True for an AILabel icon to be rendered inside the `ClickableTile` component
+     */
+    decorator?: boolean | ReactNode;
     /** @deprecated */
     light?: boolean;
     /**
@@ -56,6 +65,7 @@ export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
      */
     rel?: string;
     /**
+     * @deprecated please use `decorator` instead.
      * **Experimental**: Specify if a `Slug` icon should be rendered inside the `ClickableTile`
      */
     slug?: boolean;
@@ -64,6 +74,10 @@ export declare const ClickableTile: React.ForwardRefExoticComponent<ClickableTil
 export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     className?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `SelectableTile` component
+     */
+    decorator?: ReactNode;
     /** @deprecated */
     light?: boolean;
     /**
@@ -101,6 +115,7 @@ export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
      */
     selected?: boolean;
     /**
+     * @deprecated please use `decorator` instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
      */
     slug?: ReactNode;
@@ -122,6 +137,10 @@ export declare const SelectableTile: React.ForwardRefExoticComponent<SelectableT
 export interface ExpandableTileProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     className?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `ExpandableTile` component
+     */
+    decorator?: ReactNode;
     /** @deprecated */
     light?: boolean;
     /**
@@ -146,6 +165,7 @@ export interface ExpandableTileProps extends HTMLAttributes<HTMLDivElement> {
      */
     onKeyUp?(event: KeyboardEvent): void;
     /**
+     * @deprecated please use `decorator` instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `ExpandableTile` component
      */
     slug?: ReactNode;

package/lib/components/Tile/Tile.js

@@ -34,11 +34,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _rect, _path, _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
+var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
 const Tile = /*#__PURE__*/React__default["default"].forwardRef(function Tile(_ref, ref) {
   let {
     children,
     className,
+    decorator,
     light = false,
     slug,
     hasRoundedCorners = false,
@@ -48,12 +49,16 @@ const Tile = /*#__PURE__*/React__default["default"].forwardRef(function Tile(_re
   const tileClasses = cx__default["default"](`${prefix}--tile`, {
     [`${prefix}--tile--light`]: light,
     [`${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
   }, className);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: tileClasses,
     ref: ref
-  }, rest), children, slug);
+  }, rest), children, slug, decorator && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--tile--inner-decorator`
+  }, decorator));
 });
 Tile.displayName = 'Tile';
 Tile.propTypes = {
@@ -65,6 +70,10 @@ Tile.propTypes = {
    * The CSS class names.
    */
   className: PropTypes__default["default"].string,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `Tile` component
+   */
+  decorator: PropTypes__default["default"].node,
   /**
    * **Experimental**: Specify if the `Tile` component should be rendered with rounded corners. Only valid
    * when `slug` prop is present
@@ -80,13 +89,14 @@ Tile.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `Tile` component
    */
-  slug: PropTypes__default["default"].node
+  slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop for `Tile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.')
 };
 const ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function ClickableTile(_ref2, ref) {
   let {
     children,
     className,
     clicked = false,
+    decorator,
     disabled,
     href,
     light,
@@ -102,7 +112,9 @@ const ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function
     [`${prefix}--tile--is-clicked`]: clicked,
     [`${prefix}--tile--light`]: light,
     [`${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
   }, className);
   const [isSelected, setIsSelected] = React.useState(clicked);
   function handleOnClick(evt) {
@@ -117,25 +129,6 @@ const ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function
     }
     onKeyDown(evt);
   }
-
-  // To Do: Replace with an an icon from `@carbon/react`
-  // since the hollow slug in `ClickableTile` is not interactive
-  const hollowSlugIcon = /*#__PURE__*/React__default["default"].createElement("svg", {
-    className: `${prefix}--tile--slug-icon`,
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, _rect || (_rect = /*#__PURE__*/React__default["default"].createElement("rect", {
-    x: "0.5",
-    y: "0.5",
-    width: "23",
-    height: "23"
-  })), _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
-    d: "M13.2436 16H11.5996L10.9276 13.864H7.95164L7.29164 16H5.68364L8.49164 7.624H10.4596L13.2436 16ZM10.5436 12.508L9.46364 9.064H9.40364L8.33564 12.508H10.5436ZM17.9341 16H14.1301V14.728H15.2341V8.896H14.1301V7.624H17.9341V8.896H16.8181V14.728H17.9341V16Z",
-    fill: "#161616"
-  })));
   const v12DefaultIcons = index.useFeatureFlag('enable-v12-tile-default-icons');
   if (v12DefaultIcons) {
     if (!Icon) {
@@ -157,9 +150,14 @@ const ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function
     onKeyDown: handleOnKeyDown,
     ref: ref,
     disabled: disabled
-  }, rest), slug ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, rest), slug || decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--tile-content`
-  }, children) : children, slug && hollowSlugIcon, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
+  }, children) : children, (slug === true || decorator === true) && /*#__PURE__*/React__default["default"].createElement(iconsReact.AiLabel, {
+    size: "24",
+    className: `${prefix}--tile--ai-label-icon`
+  }), /*#__PURE__*/React__default["default"].isValidElement(decorator) && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--tile--inner-decorator`
+  }, decorator), Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
     className: iconClasses,
     "aria-hidden": "true"
   }));
@@ -178,6 +176,10 @@ ClickableTile.propTypes = {
    * Boolean for whether a tile has been clicked.
    */
   clicked: PropTypes__default["default"].bool,
+  /**
+   * **Experimental**: Provide a `decorator` component or set the boolean to True for an AILabel icon to be rendered inside the `ClickableTile` component
+   */
+  decorator: PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].node]),
   /**
    * Specify whether the ClickableTile should be disabled
    */
@@ -219,6 +221,7 @@ const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
   let {
     children,
     className,
+    decorator,
     disabled,
     id,
     light,
@@ -242,14 +245,16 @@ const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     [`${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
   }, className);
 
   // TODO: rename to handleClick when handleClick prop is deprecated
   function handleOnClick(evt) {
     evt.preventDefault();
     evt?.persist?.();
-    if (slug && slugRef.current && slugRef.current.contains(evt.target)) {
+    if (normalizedDecorator && decoratorRef.current && decoratorRef.current.contains(evt.target)) {
       return;
     }
     setIsSelected(!isSelected);
@@ -276,13 +281,13 @@ const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     setPrevSelected(selected);
   }
 
-  // Slug is always size `xs`
-  const slugRef = React.useRef(null);
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+  // AILabel is always size `xs`
+  const decoratorRef = React.useRef(null);
+  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',
-      ref: slugRef
+      ref: decoratorRef
     });
   }
   return (
@@ -307,12 +312,18 @@ const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
       as: "label",
       htmlFor: id,
       className: `${prefix}--tile-content`
-    }, children), normalizedSlug)
+    }, children), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
+      className: `${prefix}--tile--inner-decorator`
+    }, normalizedDecorator) : '')
   );
 });
 SelectableTile.propTypes = {
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `SelectableTile` component
+   */
+  decorator: PropTypes__default["default"].node,
   /**
    * Specify whether the SelectableTile should be disabled
    */
@@ -335,7 +346,7 @@ SelectableTile.propTypes = {
    * The `name` of the `<input>`.
    * @deprecated
    */
-  name: PropTypes__default["default"].string,
+  name: deprecate["default"](PropTypes__default["default"].string, 'The `name` property is no longer used.  It will be removed in the next major release.'),
   /**
    * The empty handler of the `<input>`.
    */
@@ -355,7 +366,7 @@ SelectableTile.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
    */
-  slug: PropTypes__default["default"].node,
+  slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop for `SelectableTile` 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 wrapper element
    */
@@ -368,13 +379,14 @@ SelectableTile.propTypes = {
    * The value of the `<input>`.
    * @deprecated
    */
-  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]).isRequired
+  value: deprecate["default"](PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]), 'The `value` property is no longer used.  It will be removed in the next major release.`')
 };
 const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(function ExpandableTile(_ref4, forwardRef) {
   let {
     tabIndex = 0,
     className,
     children,
+    decorator,
     expanded = false,
     tileMaxHeight = 0,
     // eslint-disable-line
@@ -449,7 +461,9 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     [`${prefix}--tile--is-expanded`]: isExpanded,
     [`${prefix}--tile--light`]: light,
     [`${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
   }, className);
   const chevronInteractiveClassNames = cx__default["default"](`${prefix}--tile__chevron`, `${prefix}--tile__chevron--interactive`);
   const childrenAsArray = getChildren();
@@ -476,10 +490,10 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
 
     // Interactive elements or elements that are given a role should be treated
     // the same because elements with a role can not be rendered inside a `button`
-    if (!useNoInteractiveChildren.getInteractiveContent(belowTheFold.current) && !useNoInteractiveChildren.getRoleContent(belowTheFold.current) && !useNoInteractiveChildren.getInteractiveContent(aboveTheFold.current) && !useNoInteractiveChildren.getRoleContent(aboveTheFold.current) && !slug) {
+    if (!useNoInteractiveChildren.getInteractiveContent(belowTheFold.current) && !useNoInteractiveChildren.getRoleContent(belowTheFold.current) && !useNoInteractiveChildren.getInteractiveContent(aboveTheFold.current) && !useNoInteractiveChildren.getRoleContent(aboveTheFold.current) && !(slug || decorator)) {
       setInteractive(false);
     }
-  }, [slug]);
+  }, [slug, decorator]);
   useIsomorphicEffect["default"](() => {
     if (!tile.current) {
       return;
@@ -503,10 +517,10 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
   }, []);
   const belowTheFoldId = useId.useId('expandable-tile-interactive');
 
-  // 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'
     });
   }
@@ -516,7 +530,9 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     className: interactiveClassNames
   }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: tileContent
-  }, normalizedSlug, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--tile--inner-decorator`
+  }, normalizedDecorator) : '', /*#__PURE__*/React__default["default"].createElement("div", {
     ref: aboveTheFold,
     className: `${prefix}--tile-content`
   }, childrenAsArray[0]), /*#__PURE__*/React__default["default"].createElement("button", {
@@ -559,6 +575,10 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
 ExpandableTile.propTypes = {
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `ExpandableTile` component
+   */
+  decorator: PropTypes__default["default"].node,
   /**
    * `true` if the tile is expanded.
    */
@@ -588,7 +608,7 @@ ExpandableTile.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `ExpandableTile` component
    */
-  slug: PropTypes__default["default"].node,
+  slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop for `ExpandableTile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.'),
   /**
    * The `tabindex` attribute.
    */

package/lib/components/UIShell/SideNavMenuItem.d.ts

@@ -4,7 +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 React, { ComponentProps } from 'react';
+import React, { ElementType, ComponentProps } from 'react';
 import Link from './Link';
 interface SideNavMenuItemProps extends ComponentProps<typeof Link> {
     /**
@@ -25,6 +25,10 @@ interface SideNavMenuItemProps extends ComponentProps<typeof Link> {
      * Optionally provide an href for the underlying li`
      */
     href?: string;
+    /**
+     * Optional component to render instead of default Link
+     */
+    as?: ElementType;
 }
 declare const SideNavMenuItem: React.ForwardRefExoticComponent<Omit<SideNavMenuItemProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export default SideNavMenuItem;

package/lib/components/UIShell/SideNavMenuItem.js

@@ -28,6 +28,7 @@ const SideNavMenuItem = /*#__PURE__*/React__default["default"].forwardRef(functi
   const {
     children,
     className: customClassName,
+    as: Component = Link["default"],
     isActive,
     ...rest
   } = props;
@@ -38,7 +39,7 @@ const SideNavMenuItem = /*#__PURE__*/React__default["default"].forwardRef(functi
   });
   return /*#__PURE__*/React__default["default"].createElement("li", {
     className: className
-  }, /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
+  }, /*#__PURE__*/React__default["default"].createElement(Component, _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: linkClassName,
     ref: ref
   }), /*#__PURE__*/React__default["default"].createElement(SideNavLinkText["default"], null, children)));
@@ -62,7 +63,11 @@ SideNavMenuItem.propTypes = {
    * has an href that is the same as the current page. Can also pass in
    * `aria-current="page"`, as well.
    */
-  isActive: PropTypes__default["default"].bool
+  isActive: PropTypes__default["default"].bool,
+  /**
+   * Optional component to render instead of default Link
+   */
+  as: PropTypes__default["default"].elementType
 };
 
 exports["default"] = SideNavMenuItem;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.70.0",
+  "version": "1.71.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -50,14 +50,14 @@
   "dependencies": {
     "@babel/runtime": "^7.24.7",
     "@carbon/feature-flags": "^0.24.0",
-    "@carbon/icons-react": "^11.52.0",
+    "@carbon/icons-react": "^11.53.0",
     "@carbon/layout": "^11.28.0",
-    "@carbon/styles": "^1.69.0",
+    "@carbon/styles": "^1.70.0",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
     "copy-to-clipboard": "^3.3.1",
-    "downshift": "8.5.0",
+    "downshift": "9.0.8",
     "flatpickr": "4.6.13",
     "invariant": "^2.2.3",
     "lodash.debounce": "^4.0.8",
@@ -146,5 +146,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "aa67ac9b298f921c558984fa6abbb90c33e9ef93"
+  "gitHead": "ab3eba8531c341d5ee5d956b962d7cce04944ac3"
 }