@carbon/react 1.70.0 → 1.71.0

package/es/components/Tag/DismissibleTag.js

@@ -11,6 +11,7 @@ import React__default, { useRef, useState, useLayoutEffect } from 'react';
 import cx from 'classnames';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import deprecate from '../../prop-types/deprecate.js';
 import Tag, { SIZES, TYPES } from './Tag.js';
 import { Close } from '@carbon/icons-react';
 import '../Tooltip/DefinitionTooltip.js';
@@ -23,6 +24,7 @@ var _Close;
 const DismissibleTag = _ref => {
   let {
     className,
+    decorator,
     disabled,
     id,
     renderIcon,
@@ -50,9 +52,9 @@ const DismissibleTag = _ref => {
       onClose(event);
     }
   };
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size: 'sm',
       kind: 'inline'
     });
@@ -79,7 +81,9 @@ const DismissibleTag = _ref => {
   }, /*#__PURE__*/React__default.createElement(Text, {
     title: tagTitle ? tagTitle : text,
     className: `${prefix}--tag__label`
-  }, text), normalizedSlug, /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, text), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--tag__decorator`
+  }, normalizedDecorator) : '', /*#__PURE__*/React__default.createElement(Tooltip, {
     label: isEllipsisApplied ? dismissLabel : title,
     align: "bottom",
     className: tooltipClasses,
@@ -98,6 +102,10 @@ DismissibleTag.propTypes = {
    * Provide a custom className that is applied to the containing <span>
    */
   className: PropTypes.string,
+  /**
+   * **Experimental:** Provide a `decorator` component to be rendered inside the `DismissibleTag` component
+   */
+  decorator: PropTypes.node,
   /**
    * Specify if the `DismissibleTag` is disabled
    */
@@ -123,7 +131,7 @@ DismissibleTag.propTypes = {
   /**
    * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
    */
-  slug: PropTypes.node,
+  slug: deprecate(PropTypes.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/es/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/es/components/Tag/Tag.js

@@ -44,6 +44,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef(function Tag(_ref, forwardRef
   let {
     children,
     className,
+    decorator,
     id,
     type,
     filter,
@@ -87,10 +88,10 @@ const Tag = /*#__PURE__*/React__default.forwardRef(function Tag(_ref, forwardRef
     }
   };
 
-  // Slug is always size `md` and `inline`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel' && !isInteractiveTag) {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel is always size `sm` and `inline`
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel' && !isInteractiveTag) {
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size: 'sm',
       kind: 'inline'
     });
@@ -105,7 +106,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef(function Tag(_ref, forwardRef
     }, /*#__PURE__*/React__default.createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default.createElement(Text, {
       title: typeof children === 'string' ? children : undefined,
       className: `${prefix}--tag__label`
-    }, children !== null && children !== undefined ? children : typeText), normalizedSlug, /*#__PURE__*/React__default.createElement("button", {
+    }, children !== null && children !== undefined ? children : typeText), normalizedDecorator, /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: `${prefix}--tag__close-icon`,
       onClick: handleClose,
@@ -136,7 +137,9 @@ const Tag = /*#__PURE__*/React__default.forwardRef(function Tag(_ref, forwardRef
   }, children !== null && children !== undefined ? children : typeText)) : /*#__PURE__*/React__default.createElement(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.createElement("div", {
+    className: `${prefix}--tag__decorator`
+  }, normalizedDecorator) : '');
 });
 Tag.propTypes = {
   /**
@@ -152,6 +155,10 @@ Tag.propTypes = {
    * Provide a custom className that is applied to the containing <span>
    */
   className: PropTypes.string,
+  /**
+   * **Experimental:** Provide a `decorator` component to be rendered inside the `Tag` component
+   */
+  decorator: PropTypes.node,
   /**
    * Specify if the `Tag` is disabled
    */
@@ -181,7 +188,7 @@ Tag.propTypes = {
   /**
    * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
    */
-  slug: PropTypes.node,
+  slug: deprecate(PropTypes.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/es/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/es/components/TextArea/TextArea.js

@@ -25,6 +25,7 @@ import { Text } from '../Text/Text.js';
 const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
   const {
     className,
+    decorator,
     disabled = false,
     id,
     labelText,
@@ -154,7 +155,8 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     [`${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(`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel && !isFluid,
@@ -253,10 +255,10 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     ref: ref
   }));
 
-  // Slug is always size `mini`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel is always size `mini`
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size: 'mini'
     });
   }
@@ -271,7 +273,9 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     className: `${prefix}--text-area__invalid-icon`
   }), warn && !invalid && !isFluid && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
     className: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`
-  }), input, normalizedSlug, /*#__PURE__*/React__default.createElement("span", {
+  }), input, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--text-area__inner-wrapper--decorator`
+  }, normalizedDecorator) : '', /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--text-area__counter-alert`,
     role: "alert",
     "aria-live": "assertive",
@@ -296,6 +300,10 @@ TextArea.propTypes = {
    * Specify the method used for calculating the counter number
    */
   counterMode: PropTypes.oneOf(['character', 'word']),
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `TextArea` component
+   */
+  decorator: PropTypes.node,
   /**
    * Optionally provide the default value of the `<textarea>`
    */
@@ -372,7 +380,7 @@ TextArea.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `TextArea` component
    */
-  slug: PropTypes.node,
+  slug: deprecate(PropTypes.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/es/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/es/components/TextInput/TextInput.js

@@ -23,6 +23,7 @@ import { Text } from '../Text/Text.js';
 const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref, ref) {
   let {
     className,
+    decorator,
     disabled = false,
     helperText,
     hideLabel,
@@ -115,7 +116,8 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
   });
   const fieldWrapperClasses = cx(`${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({
     [`${prefix}--text-input__invalid-icon`]: normalizedProps.invalid || normalizedProps.warn,
@@ -179,10 +181,10 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
   }, [ariaAnnouncement, prevAnnouncement]);
   const Icon = normalizedProps.icon;
 
-  // Slug is always size `mini`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel is always size `mini`
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size: 'mini'
     });
   }
@@ -197,7 +199,9 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
     "data-invalid": normalizedProps.invalid || null
   }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
     className: iconClasses
-  }), input, normalizedSlug, /*#__PURE__*/React__default.createElement("span", {
+  }), input, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--text-input__field-inner-wrapper--decorator`
+  }, normalizedDecorator) : '', /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--text-input__counter-alert`,
     role: "alert",
     "aria-live": "assertive",
@@ -215,6 +219,10 @@ TextInput.propTypes = {
    * Specify an optional className to be applied to the `<input>` node
    */
   className: PropTypes.string,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `TextInput` component
+   */
+  decorator: PropTypes.node,
   /**
    * Optionally provide the default value of the `<input>`
    */
@@ -290,7 +298,7 @@ TextInput.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `TextInput` component
    */
-  slug: PropTypes.node,
+  slug: deprecate(PropTypes.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/es/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;