@carbon/ibm-products 2.43.2-canary.304 → 2.43.2-canary.306

package/lib/components/ProductiveCard/ProductiveCard.js

@@ -50,6 +50,10 @@ exports.ProductiveCard.propTypes = {
    * Determines if the action icons are on the top or bottom of the card
    */
   actionsPlacement: index.default.oneOf(['top', 'bottom']),
+  /**
+   * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
+   */
+  aiLabel: index.default.oneOfType([index.default.node, index.default.bool]),
   /**
    * Content that shows in the body of the card
    */

package/lib/components/SimpleHeader/SimpleHeader.d.ts

@@ -20,7 +20,7 @@ export function SimpleHeader({ breadcrumbs, className, title, noTrailingSlash, m
     maxVisible: any;
     overflowAriaLabel: any;
     overflowTooltipAlign: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace SimpleHeader {
     namespace propTypes {
         export let breadcrumbs: PropTypes.Requireable<(PropTypes.InferProps<{
@@ -43,4 +43,5 @@ export namespace SimpleHeader {
         export let title: PropTypes.Requireable<string>;
     }
 }
+import React from 'react';
 import PropTypes from 'prop-types';

package/lib/components/TagOverflow/TagOverflow.d.ts

@@ -7,6 +7,9 @@
 import React, { ReactNode, RefObject } from 'react';
 export interface TagOverflowItem {
     className?: string;
+    /**
+     * @deprecated The `filter` prop is no longer going to be used. To use DismissibleTags, pass in an onClose function.
+     */
     filter?: boolean;
     id: string;
     label: string;

package/lib/components/TagOverflow/TagOverflow.js

@@ -23,7 +23,7 @@ var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
 var _excluded = ["align", "allTagsModalAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTarget", "allTagsModalTitle", "autoAlign", "className", "containingElementRef", "items", "maxVisible", "measurementOffset", "multiline", "overflowAlign", "overflowClassName", "overflowType", "onOverflowTagChange", "showAllTagsLabel", "tagComponent"],
   _excluded2 = ["className", "id"],
   _excluded3 = ["tagType"],
-  _excluded4 = ["id", "label", "tagType", "onClose"];
+  _excluded4 = ["id", "label", "tagType", "onClose", "filter"];
 var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow");
 var componentName = 'TagOverflow';
 var allTagsModalSearchThreshold = 10;
@@ -183,6 +183,7 @@ exports.TagOverflow = /*#__PURE__*/React.forwardRef(function (props, ref) {
         label = item.label,
         tagType = item.tagType,
         _onClose = item.onClose,
+        filter = item.filter,
         other = _rollupPluginBabelHelpers.objectWithoutProperties(item, _excluded4);
       // If there is no template prop, then render items as Tags
       return /*#__PURE__*/React.createElement("div", {
@@ -193,12 +194,16 @@ exports.TagOverflow = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }, /*#__PURE__*/React.createElement(react.Tooltip, {
         align: overflowAlign,
         label: label
-      }, /*#__PURE__*/React.createElement(react.Tag, _rollupPluginBabelHelpers.extends({}, other, {
+      }, typeof _onClose === 'function' || filter ? /*#__PURE__*/React.createElement(react.DismissibleTag, _rollupPluginBabelHelpers.extends({}, other, {
         className: "".concat(blockClass, "__item--tag"),
         type: tagType,
         onClose: function onClose() {
           return handleTagOnClose(_onClose, index);
-        }
+        },
+        text: label
+      })) : /*#__PURE__*/React.createElement(react.Tag, _rollupPluginBabelHelpers.extends({}, other, {
+        className: "".concat(blockClass, "__item--tag"),
+        type: tagType
       }), label)));
     }
   }), /*#__PURE__*/React.createElement("span", {

package/lib/components/TagOverflow/TagOverflowModal.d.ts

@@ -11,6 +11,10 @@ interface TagOverflowModalProps {
     className?: string;
     modalAriaLabel?: string;
     onClose?: () => void;
+    onTagClose?: (params: {
+        label: string;
+        id: any;
+    }) => void;
     open?: boolean;
     overflowType?: 'default' | 'tag';
     portalTarget?: ReactNode;
@@ -19,13 +23,14 @@ interface TagOverflowModalProps {
     title?: string;
 }
 export declare const TagOverflowModal: {
-    ({ allTags, className, title, modalAriaLabel, onClose, open, overflowType, portalTarget: portalTargetIn, searchLabel, searchPlaceholder, ...rest }: TagOverflowModalProps): any;
+    ({ allTags, className, title, modalAriaLabel, onClose, onTagClose, open, overflowType, portalTarget: portalTargetIn, searchLabel, searchPlaceholder, ...rest }: TagOverflowModalProps): any;
     propTypes: {
         allTags: PropTypes.Requireable<(PropTypes.InferProps<{
             label: PropTypes.Validator<string>;
         }> | null | undefined)[]>;
         className: PropTypes.Requireable<string>;
         onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        onTagClose: PropTypes.Requireable<(...args: any[]) => any>;
         open: PropTypes.Requireable<boolean>;
         overflowType: PropTypes.Requireable<string>;
         portalTarget: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/lib/components/TagOverflow/TagOverflowModal.js

@@ -16,7 +16,7 @@ var settings = require('../../settings.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
 var usePortalTarget = require('../../global/js/hooks/usePortalTarget.js');
 
-var _excluded = ["allTags", "className", "title", "modalAriaLabel", "onClose", "open", "overflowType", "portalTarget", "searchLabel", "searchPlaceholder"];
+var _excluded = ["allTags", "className", "title", "modalAriaLabel", "onClose", "onTagClose", "open", "overflowType", "portalTarget", "searchLabel", "searchPlaceholder"];
 var componentName = 'TagOverflowModal';
 var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow-modal");
 
@@ -34,6 +34,7 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
     _ref$modalAriaLabel = _ref.modalAriaLabel,
     modalAriaLabel = _ref$modalAriaLabel === void 0 ? defaults.modalAriaLabel : _ref$modalAriaLabel,
     onClose = _ref.onClose,
+    onTagClose = _ref.onTagClose,
     open = _ref.open,
     overflowType = _ref.overflowType,
     portalTargetIn = _ref.portalTarget,
@@ -84,11 +85,20 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
   }, getFilteredItems().map(function (_ref2) {
     var label = _ref2.label,
       id = _ref2.id,
-      filter = _ref2.filter;
-    var isFilterable = overflowType === 'tag' ? filter : false;
-    return /*#__PURE__*/React.createElement(react.Tag, {
+      filter = _ref2.filter,
+      onClose = _ref2.onClose;
+    var isFilterable = overflowType === 'tag' && (typeof onClose === 'function' || filter);
+    return isFilterable ? /*#__PURE__*/React.createElement(react.DismissibleTag, {
       key: id,
-      filter: isFilterable
+      text: label,
+      onClose: function onClose() {
+        return onTagClose === null || onTagClose === void 0 ? void 0 : onTagClose({
+          label: label,
+          id: id
+        });
+      }
+    }) : /*#__PURE__*/React.createElement(react.Tag, {
+      key: id
     }, label);
   }), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__fade")
@@ -100,6 +110,7 @@ TagOverflowModal.propTypes = {
   }))),
   className: index.default.string,
   onClose: index.default.func,
+  onTagClose: index.default.func,
   open: index.default.bool,
   overflowType: index.default.oneOf(['default', 'tag']),
   portalTarget: index.default.node,

package/lib/components/TagOverflow/TagOverflowPopover.js

@@ -90,17 +90,25 @@ var TagOverflowPopover = /*#__PURE__*/React.forwardRef(function (props, ref) {
       _onClose = _ref.onClose,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded2);
     var typeValue = overflowType === 'tag' ? 'high-contrast' : tagType;
-    var isFilterable = overflowType === 'tag' ? filter : false;
+    var isFilterable = overflowType === 'tag' && (typeof _onClose === 'function' || filter);
+    var tag;
+    if (isFilterable) {
+      tag = /*#__PURE__*/React.createElement(react.DismissibleTag, _rollupPluginBabelHelpers.extends({}, other, {
+        onClose: function onClose() {
+          return _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+        },
+        type: typeValue,
+        text: label
+      }));
+    } else {
+      tag = /*#__PURE__*/React.createElement(react.Tag, _rollupPluginBabelHelpers.extends({}, other, {
+        type: typeValue
+      }), label);
+    }
     return /*#__PURE__*/React.createElement("li", {
       className: cx("".concat(blockClass, "__tag-item"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__tag-item--default"), overflowType === 'default'), "".concat(blockClass, "__tag-item--tag"), overflowType === 'tag')),
       key: id
-    }, overflowType === 'tag' ? /*#__PURE__*/React.createElement(react.Tag, _rollupPluginBabelHelpers.extends({}, other, {
-      onClose: function onClose() {
-        return _onClose === null || _onClose === void 0 ? void 0 : _onClose();
-      },
-      type: typeValue,
-      filter: isFilterable
-    }), label) : label);
+    }, overflowType === 'tag' ? tag : label);
   })), ((_overflowTags$length = overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.length) !== null && _overflowTags$length !== void 0 ? _overflowTags$length : 0) > (allTagsModalSearchThreshold !== null && allTagsModalSearchThreshold !== void 0 ? allTagsModalSearchThreshold : 0) && /*#__PURE__*/React.createElement(react.Link, {
     className: "".concat(blockClass, "__show-all-tags-link"),
     href: "",

package/lib/components/TagSet/TagSet.d.ts

@@ -6,6 +6,10 @@ type OverflowType = 'default' | 'tag';
 type TagType = {
     label: string;
     type?: keyof typeof tagTypes;
+    /**
+     * @deprecated Use the `onClose` function instead to render as a DismissibleTag
+     */
+    filter?: boolean;
 } & TagBaseProps;
 export interface TagSetProps extends PropsWithChildren {
     /**

package/lib/components/TagSet/TagSet.js

@@ -20,8 +20,8 @@ var settings = require('../../settings.js');
 var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
 
 var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAutoAlign", "overflowAlign", "overflowClassName", "overflowType", "allTagsModalAriaLabel", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "onOverflowClick", "tags", "containingElementRef", "measurementOffset", "onOverflowTagChange"],
-  _excluded2 = ["label", "id"],
-  _excluded3 = ["label", "onClose"];
+  _excluded2 = ["label", "id", "filter", "onClose"],
+  _excluded3 = ["label", "onClose", "filter"];
 var componentName = 'TagSet';
 var blockClass = "".concat(settings.pkg.prefix, "--tag-set");
 var allTagsModalSearchThreshold = 10;
@@ -110,6 +110,8 @@ exports.TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setHiddenSizingTags(tags && tags.length > 0 ? tags.map(function (_ref2, index) {
       var label = _ref2.label,
         id = _ref2.id,
+        filter = _ref2.filter,
+        onClose = _ref2.onClose,
         other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
       return /*#__PURE__*/React.createElement("div", {
         key: index,
@@ -119,7 +121,10 @@ exports.TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             newSizingTags[index] = el;
           }
         }
-      }, /*#__PURE__*/React.createElement(react.Tag, _rollupPluginBabelHelpers.extends({}, other, {
+      }, typeof onClose === 'function' || filter ? /*#__PURE__*/React.createElement(react.DismissibleTag, _rollupPluginBabelHelpers.extends({}, other, {
+        "data-original-id": id,
+        text: label
+      })) : /*#__PURE__*/React.createElement(react.Tag, _rollupPluginBabelHelpers.extends({}, other, {
         // ensure id is not duplicated
         "data-original-id": id
       }), label));
@@ -138,15 +143,22 @@ exports.TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var newDisplayedTags = tags && tags.length > 0 ? tags.map(function (_ref3, index) {
       var label = _ref3.label,
         _onClose = _ref3.onClose,
+        filter = _ref3.filter,
         other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref3, _excluded3);
       if (index == tags.length - 1 && other.size) {
         size = other.size;
       }
+      if (typeof _onClose === 'function' || filter) {
+        return /*#__PURE__*/React.createElement(react.DismissibleTag, _rollupPluginBabelHelpers.extends({}, other, {
+          key: "displayed-tag-".concat(index),
+          onClose: function onClose() {
+            return handleTagOnClose(_onClose, index);
+          },
+          text: label
+        }));
+      }
       return /*#__PURE__*/React.createElement(react.Tag, _rollupPluginBabelHelpers.extends({}, other, {
-        key: "displayed-tag-".concat(index),
-        onClose: function onClose() {
-          return handleTagOnClose(_onClose, index);
-        }
+        key: "displayed-tag-".concat(index)
       }), label);
     }) : [];
 

package/lib/components/TagSet/TagSetModal.js

@@ -98,7 +98,6 @@ var TagSetModal = function TagSetModal(_ref) {
     var label = _ref2.label,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
     return /*#__PURE__*/React.createElement(react.Tag, _rollupPluginBabelHelpers.extends({}, other, {
-      filter: false,
       key: "all-tags-".concat(index)
     }), label);
   }), /*#__PURE__*/React.createElement("div", {

package/lib/components/TooltipTrigger/TooltipTrigger.d.ts

@@ -2,7 +2,7 @@ export function TooltipTrigger({ children, className, ...rest }: {
     [x: string]: any;
     children: any;
     className: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace TooltipTrigger {
     export { componentName as displayName };
     export namespace propTypes {
@@ -10,6 +10,7 @@ export namespace TooltipTrigger {
         let className: PropTypes.Requireable<string>;
     }
 }
+import React from 'react';
 declare const componentName: "TooltipTrigger";
 import PropTypes from 'prop-types';
 export {};

package/lib/components/_Canary/Canary.d.ts

@@ -2,11 +2,12 @@ export function Canary({ className, componentName, ...rest }: {
     [x: string]: any;
     className: any;
     componentName: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace Canary {
     namespace propTypes {
         let className: PropTypes.Requireable<string>;
         let componentName: PropTypes.Validator<string>;
     }
 }
+import React from 'react';
 import PropTypes from 'prop-types';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.43.2-canary.304+b0b3c1cf4",
+  "version": "2.43.2-canary.306+18b47c72f",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -96,7 +96,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.22.0",
-    "@carbon/ibm-products-styles": "^2.39.1-canary.314+b0b3c1cf4",
+    "@carbon/ibm-products-styles": "^2.48.0-rc.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -120,5 +120,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "b0b3c1cf40199e7458584ea1d9093224264e1f4c"
+  "gitHead": "18b47c72ff381db130897da6a2d1f0aa86fd6d85"
 }

package/scss/components/Card/_card.scss

@@ -5,6 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+// NOTE: Please do not remove the duplicate `slug` and `ai-label` classes. We need both until slug is fully deprecated
+
 // Standard imports.
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
@@ -148,16 +150,19 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   right: $spacing-05;
 }
 
-.#{$block-class}__header-container--has-slug {
+.#{$block-class}__header-container--has-slug,
+.#{$block-class}__header-container--has-ai-label {
   width: 100%;
   padding-right: $spacing-07;
 }
 
-.#{$block-class}__header-container--has-slug.#{$block-class}__header-container--has-actions {
+.#{$block-class}__header-container--has-slug.#{$block-class}__header-container--has-actions,
+.#{$block-class}__header-container--has-ai-label.#{$block-class}__header-container--has-actions {
   padding-right: $spacing-08;
 }
 
-.#{$block-class}__header-container--has-slug.#{$block-class}__header-container--large-tile-or-label {
+.#{$block-class}__header-container--has-slug.#{$block-class}__header-container--large-tile-or-label,
+.#{$block-class}__header-container--has-ai-label.#{$block-class}__header-container--large-tile-or-label {
   padding-right: $spacing-09;
 }
 
@@ -170,7 +175,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   pointer-events: none;
 }
 
-.#{$block-class}--has-slug {
+.#{$block-class}--has-slug,
+.#{$block-class}--has-ai-label {
   @include utilities.ai-popover-gradient('default', 0, 'layer');
 
   border: 1px solid transparent;
@@ -178,7 +184,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
     0 4px 10px 2px $ai-drop-shadow;
 }
 
-.#{$block-class}__clickable.#{$block-class}--has-slug::before {
+.#{$block-class}__clickable.#{$block-class}--has-slug::before,
+.#{$block-class}__clickable.#{$block-class}--has-ai-label::before {
   @include utilities.ai-popover-gradient('hover', 0, 'layer');
 
   position: absolute;
@@ -193,7 +200,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   transition: opacity $duration-fast-02 motion(standard, productive);
 }
 
-.#{$block-class}__clickable.#{$block-class}--has-slug:hover::before {
+.#{$block-class}__clickable.#{$block-class}--has-slug:hover::before,
+.#{$block-class}__clickable.#{$block-class}--has-ai-label:hover::before {
   opacity: 1;
 }