@carbon/ibm-products 2.40.0 → 2.40.1-canary.11

package/lib/components/ConditionBuilder/utils/checkForHoldingKey.js

@@ -0,0 +1,20 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var checkForHoldingKey = function checkForHoldingKey(evt, key) {
+  // possible key inputs: altKey,ctrlKey,metaKey,shiftKey
+  if (key === 'cmd') {
+    return evt.metaKey || evt.ctrlKey;
+  }
+  return evt[key];
+};
+
+exports.checkForHoldingKey = checkForHoldingKey;

package/lib/components/ConditionBuilder/utils/handleKeyboardEvents.d.ts

@@ -0,0 +1 @@
+export function handleKeyDown(evt: any, conditionBuilderRef: any): void;

package/lib/components/ConditionBuilder/utils/handleKeyboardEvents.js

@@ -0,0 +1,129 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
+var checkForHoldingKey = require('./checkForHoldingKey.js');
+var util = require('./util.js');
+
+var handleKeyDown = function handleKeyDown(evt, conditionBuilderRef) {
+  var activeElement = document.activeElement;
+  if (activeElement.closest("[role=\"dialog\"]")) {
+    handleKeyPressForPopover(evt, activeElement.closest("[role=\"dialog\"]"));
+  } else {
+    handleKeyPressForMainContent(evt, conditionBuilderRef);
+  }
+};
+var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentContainer) {
+  var _parentContainer$quer;
+  var key = evt.key;
+  var isHoldingShiftKey = checkForHoldingKey.checkForHoldingKey(evt, 'shiftKey');
+  var isMultiSelect = (_parentContainer$quer = parentContainer.querySelector('ul')) === null || _parentContainer$quer === void 0 ? void 0 : _parentContainer$quer.dataset.multiSelect;
+  var allItems = [];
+  switch (key) {
+    case 'ArrowUp':
+      //traverse through the popover options, search box, selectAll button
+      parentContainer.querySelectorAll("[role=\"option\"]").forEach(function (eachElem, index, allElements) {
+        util.traverseReverse(eachElem, index, allElements);
+      });
+      break;
+    case 'ArrowDown':
+      //traverse through the popover options, search box, selectAll button
+      parentContainer.querySelectorAll("[role=\"option\"]").forEach(function (eachElem, index, allElements) {
+        util.traverseClockVise(eachElem, index, allElements);
+      });
+      break;
+    case 'Tab':
+      allItems = [].concat(_rollupPluginBabelHelpers.toConsumableArray(Array.from(parentContainer.querySelectorAll(".".concat(DataConfigs.blockClass, "__selectAll-button,[role=\"searchbox\"]")))), [parentContainer.querySelector("[role=\"option\"]")]);
+      allItems.forEach(function (eachElem, index, allElements) {
+        if (isHoldingShiftKey) {
+          util.traverseReverse(eachElem, index, allElements, true, true);
+        } else {
+          util.traverseClockVise(eachElem, index, allElements, true, true);
+        }
+      });
+      evt.preventDefault();
+      break;
+    case ' ':
+      if (isMultiSelect === 'true') {
+        if (document.activeElement.type !== 'button') {
+          var _document$activeEleme;
+          //for button , enter key is click which already handled by framework, for other elements trigger click
+          (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 || _document$activeEleme.click();
+        }
+        evt.preventDefault();
+      }
+      break;
+    case 'Enter':
+      if (isMultiSelect !== 'true') {
+        if (document.activeElement.type !== 'button') {
+          var _document$activeEleme2;
+          //for button , enter key is click which already handled by framework, else trigger click
+          (_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 || _document$activeEleme2.click();
+          util.focusThisField(evt);
+        }
+      }
+      break;
+    case 'Escape':
+      //focus the corresponding field in which the popover is triggered
+      util.focusThisField(evt);
+      break;
+  }
+};
+var getRows = function getRows(conditionBuilderRef) {
+  return Array.from(conditionBuilderRef.current.querySelectorAll('[role="row"]'));
+};
+var getRowIndex = function getRowIndex(element, conditionBuilderRef) {
+  var rows = getRows(conditionBuilderRef);
+  return rows.findIndex(function (row) {
+    return row.contains(element);
+  });
+};
+var handleRowNavigation = function handleRowNavigation(evt, conditionBuilderRef) {
+  var rows = getRows(conditionBuilderRef);
+  var currentRowIndex = getRowIndex(evt.target, conditionBuilderRef);
+  navigateToNextRowCell(evt, currentRowIndex, rows);
+};
+var navigateToNextRowCell = function navigateToNextRowCell(evt, currentRowIndex, rows) {
+  var _nextRow$querySelecto;
+  //when the focussed element is a cell of the row which has only 1 cell (connector or statement) , focus the next row
+
+  var nextRowIndex = currentRowIndex;
+  if (evt.key === 'ArrowUp') {
+    nextRowIndex = currentRowIndex == 0 ? currentRowIndex : currentRowIndex - 1;
+  }
+  if (evt.key === 'ArrowDown') {
+    nextRowIndex = currentRowIndex === rows.length - 1 ? rows.length - 1 : currentRowIndex + 1;
+  }
+  var nextRow = rows[nextRowIndex];
+  var itemName = evt.target.dataset.name;
+  nextRow === null || nextRow === void 0 || (_nextRow$querySelecto = nextRow.querySelector("[data-name=\"".concat(itemName, "\"]"))) === null || _nextRow$querySelecto === void 0 || _nextRow$querySelecto.focus();
+};
+var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, conditionBuilderRef) {
+  switch (evt.key) {
+    case 'ArrowRight':
+    case 'ArrowLeft':
+      conditionBuilderRef.current.querySelectorAll("[role=\"gridcell\"] button").forEach(function (eachElem, index, allElements) {
+        if (evt.key === 'ArrowRight') {
+          util.traverseClockVise(eachElem, index, allElements);
+        } else {
+          util.traverseReverse(eachElem, index, allElements);
+        }
+      });
+      break;
+    case 'ArrowUp':
+    case 'ArrowDown':
+      handleRowNavigation(evt, conditionBuilderRef);
+      break;
+  }
+};
+
+exports.handleKeyDown = handleKeyDown;

package/lib/components/ConditionBuilder/utils/util.d.ts

@@ -1,4 +1,4 @@
-export function focusThisField(e: any): void;
+export function focusThisField(evt: any): void;
 export function focusThisItem(currentElement: any): void;
 export function traverseClockVise(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any): void;
 export function traverseReverse(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any): void;

package/lib/components/ConditionBuilder/utils/util.js

@@ -9,12 +9,44 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var focusThisField = function focusThisField(e) {
+var focusThisField = function focusThisField(evt) {
   setTimeout(function () {
-    var _e$target$closest, _e$target$closest2;
-    (_e$target$closest = e.target.closest('[role="gridcell"]')) === null || _e$target$closest === void 0 || (_e$target$closest = _e$target$closest.querySelector('button')) === null || _e$target$closest === void 0 || _e$target$closest.click();
-    (_e$target$closest2 = e.target.closest('[role="gridcell"]')) === null || _e$target$closest2 === void 0 || (_e$target$closest2 = _e$target$closest2.querySelector('button')) === null || _e$target$closest2 === void 0 || _e$target$closest2.focus();
+    var _evt$target$closest, _evt$target$closest2;
+    (_evt$target$closest = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest === void 0 || (_evt$target$closest = _evt$target$closest.querySelector('button')) === null || _evt$target$closest === void 0 || _evt$target$closest.click();
+    (_evt$target$closest2 = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest2 === void 0 || (_evt$target$closest2 = _evt$target$closest2.querySelector('button')) === null || _evt$target$closest2 === void 0 || _evt$target$closest2.focus();
   }, 0);
 };
+var focusThisItem = function focusThisItem(currentElement) {
+  setTimeout(function () {
+    //document.activeElement.setAttribute('tabindex', '-1');
+    // currentElement.setAttribute('tabindex', '0');
+    currentElement === null || currentElement === void 0 || currentElement.focus();
+  }, 0);
+};
+var traverseClockVise = function traverseClockVise(eachElem, index, allElements, rotate, trapFocus) {
+  if (eachElem == document.activeElement) {
+    if (index !== allElements.length - 1) {
+      focusThisItem(allElements[index + 1]);
+    } else {
+      focusThisItem(allElements[rotate ? 0 : allElements.length - 1]);
+    }
+  } else if (Array.from(allElements).indexOf(document.activeElement) == -1 && trapFocus) {
+    focusThisItem(allElements[0]);
+  }
+};
+var traverseReverse = function traverseReverse(eachElem, index, allElements, rotate, trapFocus) {
+  if (eachElem == document.activeElement) {
+    if (index !== 0) {
+      focusThisItem(allElements[index - 1]);
+    } else {
+      focusThisItem(allElements[rotate ? allElements.length - 1 : 0]);
+    }
+  } else if (Array.from(allElements).indexOf(document.activeElement) == -1 && trapFocus) {
+    focusThisItem(allElements[allElements.length - 1]);
+  }
+};
 
 exports.focusThisField = focusThisField;
+exports.focusThisItem = focusThisItem;
+exports.traverseClockVise = traverseClockVise;
+exports.traverseReverse = traverseReverse;

package/lib/components/Datagrid/Datagrid/DatagridContent.js

@@ -96,7 +96,7 @@ var DatagridContent = function DatagridContent(_ref) {
   var renderTable = function renderTable() {
     var _getTableProps;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(react.Table, _rollupPluginBabelHelpers["extends"]({}, getTableProps(), {
-      className: cx__default["default"](withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-is-resizing"), typeof (columnResizing === null || columnResizing === void 0 ? void 0 : columnResizing.isResizingColumn) === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
+      className: cx__default["default"](withVirtualScroll ? "".concat(blockClass, "__table-virtual-scroll") : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-is-resizing"), typeof (columnResizing === null || columnResizing === void 0 ? void 0 : columnResizing.isResizingColumn) === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
       role: withInlineEdit ? 'grid' : undefined,
       tabIndex: withInlineEdit ? 0 : -1,
       onKeyDown: /* istanbul ignore next */
@@ -115,7 +115,7 @@ var DatagridContent = function DatagridContent(_ref) {
         return handleGridFocus.handleGridFocus(inlineEditState, dispatch);
       },
       title: title
-    }), !withVirtualScroll && /*#__PURE__*/React__default["default"].createElement(DatagridHead["default"], datagridState), /*#__PURE__*/React__default["default"].createElement(DatagridBody["default"], _rollupPluginBabelHelpers["extends"]({}, datagridState, {
+    }), (!withVirtualScroll || withVirtualScroll && !isFetching && !contentRows.length) && /*#__PURE__*/React__default["default"].createElement(DatagridHead["default"], datagridState), /*#__PURE__*/React__default["default"].createElement(DatagridBody["default"], _rollupPluginBabelHelpers["extends"]({}, datagridState, {
       rows: contentRows
     }))), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && renderPagination());
   };

package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -29,7 +29,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var _th;
 var _excluded = ["role"],
   _excluded2 = ["className", "role"],
-  _excluded3 = ["role", "className"];
+  _excluded3 = ["role"];
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var getAccessibilityProps = function getAccessibilityProps(header) {
   var props = {};
@@ -185,11 +185,10 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     var originalCol = visibleColumns[index];
     var _header$getHeaderProp = header.getHeaderProps();
       _header$getHeaderProp.role;
-      var headerClassName = _header$getHeaderProp.className,
-      headerProps = _rollupPluginBabelHelpers.objectWithoutProperties(_header$getHeaderProp, _excluded3);
+      var headerProps = _rollupPluginBabelHelpers.objectWithoutProperties(_header$getHeaderProp, _excluded3);
     var resizerProps = header === null || header === void 0 || (_header$getResizerPro = header.getResizerProps) === null || _header$getResizerPro === void 0 ? void 0 : _header$getResizerPro.call(header);
     return /*#__PURE__*/React__default["default"].createElement(react.TableHeader, _rollupPluginBabelHelpers["extends"]({}, headerProps, {
-      className: cx__default["default"](headerClassName, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header.isSorted), "".concat(blockClass, "__header-actions-column"), header.isAction), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/React__default["default"].isValidElement(header.slug))),
+      className: cx__default["default"](header.className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header.isSorted), "".concat(blockClass, "__header-actions-column"), header.isAction), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/React__default["default"].isValidElement(header.slug))),
       key: header.id,
       "aria-hidden": header.id === 'spacer' && 'true'
     }, getAccessibilityProps(header)), header.render('Header'), renderSlug(header.slug), resizerProps && !header.isAction && /*#__PURE__*/React__default["default"].createElement(ResizeHeader, {

package/lib/components/PageHeader/PageHeader.js

@@ -36,6 +36,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["actionBarItems", "actionBarMenuOptionsClass", "actionBarOverflowAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTitle", "hasBackgroundAlways", "breadcrumbOverflowAriaLabel", "breadcrumbs", "children", "className", "collapseHeader", "collapseHeaderIconDescription", "collapseTitle", "disableBreadcrumbScroll", "enableBreadcrumbScroll", "expandHeaderIconDescription", "fullWidthGrid", "hasCollapseHeaderToggle", "narrowGrid", "navigation", "pageActions", "pageActionsOverflowLabel", "pageActionsMenuOptionsClass", "showAllTagsLabel", "subtitle", "tags", "title", "withoutBackground", "breadcrumbOverflowTooltipAlign"];
 var componentName = 'PageHeader';
+settings.pkg.component.ActionBar = true;
 
 // Default values for props
 var defaults = {

package/lib/components/TagOverflow/TagOverflow.js

@@ -28,13 +28,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["items", "tagComponent", "align", "showAllTagsLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTarget", "allTagsModalTitle", "className", "containingElementRef", "measurementOffset", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "onOverflowTagChange"],
-  _excluded2 = ["className", "id"];
+  _excluded2 = ["className", "id"],
+  _excluded3 = ["tagType"],
+  _excluded4 = ["id", "label", "tagType", "onClose"];
 var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow");
 var componentName = 'TagOverflow';
 var allTagsModalSearchThreshold = 10;
 
-// TODO: support prop overflowType
-
 // Default values for props
 var defaults = {
   items: [],
@@ -173,39 +173,53 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
       visibleItemsArr = (_visibleItemsArr = visibleItemsArr) === null || _visibleItemsArr === void 0 ? void 0 : _visibleItemsArr.slice(0, maxVisible);
     }
     var hiddenItems = items === null || items === void 0 ? void 0 : items.slice(visibleItemsArr.length);
-    var overflowItemsArr = hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.map(function (item) {
-      return {
-        type: item.tagType,
-        label: item.label,
-        id: item.id
-      };
+    var overflowItemsArr = hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.map(function (_ref2) {
+      var tagType = _ref2.tagType,
+        other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded3);
+      return _rollupPluginBabelHelpers.objectSpread2({
+        type: tagType
+      }, other);
     });
     setVisibleItems(visibleItemsArr);
     setOverflowItems(overflowItemsArr);
     onOverflowTagChange === null || onOverflowTagChange === void 0 || onOverflowTagChange(overflowItemsArr);
   }, [containerWidth, items, maxVisible, getVisibleItems, onOverflowTagChange]);
+  var handleTagOnClose = React.useCallback(function (onClose, index) {
+    onClose === null || onClose === void 0 || onClose();
+    if (index <= visibleItems.length - 1) {
+      setPopoverOpen(false);
+    }
+  }, [visibleItems]);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: cx__default["default"](blockClass, className, "".concat(blockClass, "--align-").concat(align), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--multiline"), multiline)),
     ref: containerRef,
     role: "main"
-  }, devtools.getDevtoolsProps(componentName)), visibleItems.length > 0 && visibleItems.map(function (item) {
+  }, devtools.getDevtoolsProps(componentName)), visibleItems.length > 0 && visibleItems.map(function (item, index) {
     // Render custom components
     if (tagComponent) {
       return getCustomComponent(item);
     } else {
+      var id = item.id,
+        label = item.label,
+        tagType = item.tagType,
+        _onClose = item.onClose,
+        other = _rollupPluginBabelHelpers.objectWithoutProperties(item, _excluded4);
       // If there is no template prop, then render items as Tags
       return /*#__PURE__*/React__default["default"].createElement("div", {
         ref: function ref(node) {
-          return itemRefHandler(item.id, node);
+          return itemRefHandler(id, node);
         },
-        key: item.id
+        key: id
       }, /*#__PURE__*/React__default["default"].createElement(react.Tooltip, {
-        align: "bottom",
-        label: item.label
-      }, /*#__PURE__*/React__default["default"].createElement(react.Tag, {
+        align: overflowAlign,
+        label: label
+      }, /*#__PURE__*/React__default["default"].createElement(react.Tag, _rollupPluginBabelHelpers["extends"]({}, other, {
         className: "".concat(blockClass, "__item--tag"),
-        type: item.tagType
-      }, item.label)));
+        type: tagType,
+        onClose: function onClose() {
+          return handleTagOnClose(_onClose, index);
+        }
+      }), label)));
     }
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(blockClass, "__indicator"),
@@ -227,6 +241,7 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
     open: showAllModalOpen,
     title: allTagsModalTitle,
     onClose: handleModalClose,
+    overflowType: overflowType,
     searchLabel: allTagsModalSearchLabel,
     searchPlaceholder: allTagsModalSearchPlaceholderText,
     portalTarget: allTagsModalTarget
@@ -245,8 +260,8 @@ var tagTypes = Object.keys(constants.TYPES);
  * The strings shown in the showAllModal are only shown if we have more than allTagsModalSearchLThreshold
  * @returns null if no problems
  */
-var string_required_if_more_than_10_tags = propsHelper.isRequiredIf(index["default"].string, function (_ref2) {
-  var items = _ref2.items;
+var string_required_if_more_than_10_tags = propsHelper.isRequiredIf(index["default"].string, function (_ref3) {
+  var items = _ref3.items;
   return items && items.length > allTagsModalSearchThreshold;
 });
 

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

@@ -1,10 +1,11 @@
-export function TagOverflowModal({ allTags, className, title, onClose, open, portalTarget: portalTargetIn, searchLabel, searchPlaceholder, ...rest }: {
+export function TagOverflowModal({ allTags, className, title, onClose, open, overflowType, portalTarget: portalTargetIn, searchLabel, searchPlaceholder, ...rest }: {
     [x: string]: any;
     allTags: any;
     className: any;
     title: any;
     onClose: any;
     open: any;
+    overflowType: any;
     portalTarget: any;
     searchLabel?: string | undefined;
     searchPlaceholder: any;
@@ -17,6 +18,7 @@ export namespace TagOverflowModal {
         let className: PropTypes.Requireable<string>;
         let onClose: PropTypes.Requireable<(...args: any[]) => any>;
         let open: PropTypes.Requireable<boolean>;
+        let overflowType: PropTypes.Requireable<string>;
         let portalTarget: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         let searchLabel: PropTypes.Requireable<string>;
         let searchPlaceholder: PropTypes.Requireable<string>;

package/lib/components/TagOverflow/TagOverflowModal.js

@@ -23,8 +23,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["allTags", "className", "title", "onClose", "open", "portalTarget", "searchLabel", "searchPlaceholder"],
-  _excluded2 = ["label", "id"];
+var _excluded = ["allTags", "className", "title", "onClose", "open", "overflowType", "portalTarget", "searchLabel", "searchPlaceholder"],
+  _excluded2 = ["label", "id", "filter"];
 var componentName = 'TagOverflowModal';
 var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow-modal");
 
@@ -39,6 +39,7 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
     title = _ref.title,
     onClose = _ref.onClose,
     open = _ref.open,
+    overflowType = _ref.overflowType,
     portalTargetIn = _ref.portalTarget,
     _ref$searchLabel = _ref.searchLabel,
     searchLabel = _ref$searchLabel === void 0 ? defaults.searchLabel : _ref$searchLabel,
@@ -50,23 +51,13 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
     setSearch = _useState2[1];
   var renderPortalUse = usePortalTarget.usePortalTarget(portalTargetIn);
   var getFilteredItems = function getFilteredItems() {
-    var newFilteredModalTags = [];
-    if (open) {
-      if (search === '') {
-        newFilteredModalTags = allTags.slice(0);
-      } else {
-        var lCaseSearch = search.toLocaleLowerCase();
-        allTags.forEach(function (tag) {
-          var _tag$dataSearch, _tag$label;
-          var dataSearch = (_tag$dataSearch = tag['data-search']) === null || _tag$dataSearch === void 0 || (_tag$dataSearch = _tag$dataSearch.toLocaleLowerCase()) === null || _tag$dataSearch === void 0 ? void 0 : _tag$dataSearch.indexOf(lCaseSearch);
-          var labelSearch = (_tag$label = tag.label) === null || _tag$label === void 0 || (_tag$label = _tag$label.toLocaleLowerCase()) === null || _tag$label === void 0 ? void 0 : _tag$label.indexOf(lCaseSearch);
-          if (dataSearch > -1 || labelSearch > -1) {
-            newFilteredModalTags.push(tag);
-          }
-        });
-      }
+    if (open && search) {
+      return allTags.filter(function (tag) {
+        var _tag$label;
+        return (_tag$label = tag.label) === null || _tag$label === void 0 || (_tag$label = _tag$label.toLocaleLowerCase()) === null || _tag$label === void 0 ? void 0 : _tag$label.includes(search.toLocaleLowerCase());
+      });
     }
-    return newFilteredModalTags;
+    return allTags;
   };
   var handleSearch = function handleSearch(evt) {
     setSearch(evt.target.value || '');
@@ -95,10 +86,12 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
   }, getFilteredItems().map(function (_ref2) {
     var label = _ref2.label,
       id = _ref2.id,
+      filter = _ref2.filter,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
+    var isFilterable = overflowType === 'tag' ? filter : false;
     return /*#__PURE__*/React__default["default"].createElement(react.Tag, _rollupPluginBabelHelpers["extends"]({}, other, {
-      filter: false,
-      key: id
+      key: id,
+      filter: isFilterable
     }), label);
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__fade")
@@ -111,6 +104,7 @@ TagOverflowModal.propTypes = {
   className: index["default"].string,
   onClose: index["default"].func,
   open: index["default"].bool,
+  overflowType: index["default"].oneOf(['default', 'tag']),
   portalTarget: index["default"].node,
   searchLabel: index["default"].string,
   searchPlaceholder: index["default"].string,

package/lib/components/TagOverflow/TagOverflowPopover.js

@@ -22,7 +22,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen"];
+var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen"],
+  _excluded2 = ["label", "id", "tagType", "filter", "onClose"];
 var componentName = 'TagOverflowPopover';
 var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow-popover");
 
@@ -89,11 +90,25 @@ var TagOverflowPopover = /*#__PURE__*/React__default["default"].forwardRef(funct
     className: "".concat(blockClass, "__content")
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
     className: "".concat(blockClass, "__tag-list")
-  }, getOverflowPopoverItems().map(function (tag) {
+  }, getOverflowPopoverItems().map(function (_ref2) {
+    var label = _ref2.label,
+      id = _ref2.id,
+      tagType = _ref2.tagType,
+      filter = _ref2.filter,
+      _onClose = _ref2.onClose,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
+    var typeValue = overflowType === 'tag' ? 'high-contrast' : tagType;
+    var isFilterable = overflowType === 'tag' ? filter : false;
     return /*#__PURE__*/React__default["default"].createElement("li", {
       className: cx__default["default"]("".concat(blockClass, "__tag-item"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__tag-item--default"), overflowType === 'default'), "".concat(blockClass, "__tag-item--tag"), overflowType === 'tag')),
-      key: tag.id
-    }, tag.label);
+      key: id
+    }, overflowType === 'tag' ? /*#__PURE__*/React__default["default"].createElement(react.Tag, _rollupPluginBabelHelpers["extends"]({}, other, {
+      onClose: function onClose() {
+        return _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+      },
+      type: typeValue,
+      filter: isFilterable
+    }), label) : label);
   })), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/React__default["default"].createElement(react.Link, {
     className: "".concat(blockClass, "__show-all-tags-link"),
     href: "",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.40.0",
+  "version": "2.40.1-canary.11+a3ea28039",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -92,7 +92,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
-    "@carbon/ibm-products-styles": "^2.37.1",
+    "@carbon/ibm-products-styles": "^2.37.2-canary.11+a3ea28039",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -116,5 +116,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "2fbbfdc269add9b97a3eac30e5570b91ec80fd82"
+  "gitHead": "a3ea280390a9f2be86be1db8c7d0e2e34db39606"
 }

package/scss/components/ConditionBuilder/styles/_conditionBuilderCondition.scss

@@ -20,8 +20,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   outline-offset: 0;
 }
 
-.#{$block-class}__condition-builder-condition__deletion-preview
-  .#{$block-class}__condition-builder-button:not(
+.#{$block-class}__condition__deletion-preview
+  .#{$block-class}__button:not(
     .#{$block-class}__statement-button,
     .#{$block-class}__connector-button
   ) {
@@ -29,8 +29,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   color: $tag-color-red;
 }
 
-.#{$block-class}__condition-builder-condition__deletion-preview
-  .#{$block-class}__condition-builder-button:not(
+.#{$block-class}__condition__deletion-preview
+  .#{$block-class}__button:not(
     .#{$block-class}__statement-button,
     .#{$block-class}__connector-button
   ):hover {