@carbon/react 1.71.0-rc.0 → 1.71.0

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/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.71.0-rc.0",
+  "version": "1.71.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -50,9 +50,9 @@
   "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.70.0-rc.0",
+    "@carbon/styles": "^1.70.0",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -146,5 +146,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "d3bd715a72872535c5b4156720828fe1cd9365f5"
+  "gitHead": "ab3eba8531c341d5ee5d956b962d7cce04944ac3"
 }