@carbon/ibm-products 2.43.2-canary.102 → 2.43.2-canary.104

package/lib/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js

@@ -96,11 +96,11 @@ var ConditionBuilderAdd = function ConditionBuilderAdd(_ref) {
   })), enableSubGroup && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, _rollupPluginBabelHelpers["extends"]({
     renderIcon: icons.TextNewLine,
     onClick: addConditionSubGroupHandler,
-    className: cx__default["default"]("".concat(DataConfigs.blockClass, "__add-condition-sub-group ").concat(DataConfigs.blockClass, "__gap-left")),
+    className: cx__default["default"]("".concat(DataConfigs.blockClass, "__add-condition-sub-group")),
     hideLabel: true,
     label: addSubgroupText,
     wrapperProps: wrapperProps,
-    wrapperClassName: cx__default["default"]("".concat(DataConfigs.blockClass, "__add-condition-sub-group-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__add-condition-sub-group-wrapper--show"), isAddSubgroup))
+    wrapperClassName: cx__default["default"]("".concat(DataConfigs.blockClass, "__add-condition-sub-group-wrapper ").concat(DataConfigs.blockClass, "__gap-left"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__add-condition-sub-group-wrapper--show"), isAddSubgroup))
   }, previewHandlersForSubgroup())));
 };
 var ConditionBuilderAdd$1 = ConditionBuilderAdd;

package/lib/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js

@@ -42,11 +42,11 @@ var ConditionBuilderButton = function ConditionBuilderButton(_ref) {
     wrapperClassName = _ref.wrapperClassName,
     tabIndex = _ref.tabIndex,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var carbonPrefix = react.usePrefix();
   var Button = function Button() {
     var _rest$dataName;
     var dataName = (_rest$dataName = rest['data-name']) !== null && _rest$dataName !== void 0 ? _rest$dataName : '';
     return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
-      // role={'gridcell'}
       tabIndex: tabIndex != undefined ? tabIndex : -1,
       className: cx__default["default"]([className, "".concat(DataConfigs.blockClass, "__button"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__text-ellipsis"), showToolTip && !hideLabel && !isInvalid), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__invalid-input"), isInvalid)]),
       type: "button",
@@ -61,8 +61,10 @@ var ConditionBuilderButton = function ConditionBuilderButton(_ref) {
   return hideLabel || showToolTip ? /*#__PURE__*/React__default["default"].createElement(react.Tooltip, _rollupPluginBabelHelpers["extends"]({
     label: label,
     align: tooltipAlign,
-    className: "".concat(wrapperClassName)
-  }, wrapperProps), Button()) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, Button());
+    className: "".concat(wrapperClassName, " ").concat(DataConfigs.blockClass, "__tooltip ").concat(carbonPrefix, "--icon-tooltip")
+  }, wrapperProps, {
+    leaveDelayMs: 0
+  }), Button()) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, Button());
 };
 ConditionBuilderButton.propTypes = {
   /**

package/lib/components/ConditionBuilder/ConditionBuilderConnector/ConditionConnector.js

@@ -18,6 +18,7 @@ var index = require('../../../node_modules/prop-types/index.js');
 var util = require('../utils/util.js');
 var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuilderProvider.js');
 var useTranslations = require('../utils/useTranslations.js');
+var ConditionBuilderButton = require('../ConditionBuilderButton/ConditionBuilderButton.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -56,7 +57,9 @@ var ConditionConnector = function ConditionConnector(_ref) {
   };
   return variant == 'tree' ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(className, " ").concat(DataConfigs.blockClass, "__connector--disabled")
-  }, operator) :
+  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, {
+    label: operator
+  })) :
   /*#__PURE__*/
   // <div className={className} {...rest}>
   React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, _rollupPluginBabelHelpers["extends"]({

package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js

@@ -30,7 +30,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _GroupConnector;
 var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
-  var _rootState$groups2;
+  var _rootState$groups3;
   var startConditionLabel = _ref.startConditionLabel,
     getConditionState = _ref.getConditionState,
     getActionsState = _ref.getActionsState,
@@ -118,6 +118,11 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
       groups: [].concat(_rollupPluginBabelHelpers.toConsumableArray(rootState.groups), [newGroup])
     }));
   };
+  var getColorIndex = function getColorIndex() {
+    var _rootState$groups$len, _rootState$groups2;
+    var groupLength = (_rootState$groups$len = rootState === null || rootState === void 0 || (_rootState$groups2 = rootState.groups) === null || _rootState$groups2 === void 0 ? void 0 : _rootState$groups2.length) !== null && _rootState$groups$len !== void 0 ? _rootState$groups$len : 0;
+    return groupLength % 5;
+  };
   if (!isConditionBuilderActive) {
     return /*#__PURE__*/React__default["default"].createElement(react.Button, {
       className: "".concat(DataConfigs.blockClass, "__addConditionText-button"),
@@ -137,7 +142,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
     className: "".concat(DataConfigs.blockClass, "__content-container"),
     role: "treegrid",
     "aria-label": "condition builder tree"
-  }, rootState && (rootState === null || rootState === void 0 || (_rootState$groups2 = rootState.groups) === null || _rootState$groups2 === void 0 ? void 0 : _rootState$groups2.map(function (eachGroup, groupIndex) {
+  }, rootState && (rootState === null || rootState === void 0 || (_rootState$groups3 = rootState.groups) === null || _rootState$groups3 === void 0 ? void 0 : _rootState$groups3.map(function (eachGroup, groupIndex) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: eachGroup.id,
       className: "".concat(DataConfigs.blockClass, "__group-wrapper")
@@ -177,6 +182,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
     }
   })), showConditionGroupPreview && /*#__PURE__*/React__default["default"].createElement(ConditionPreview["default"], {
     previewType: "newGroup",
+    colorIndex: getColorIndex(),
     group: {
       groupOperator: rootState.operator
     }

package/lib/components/ConditionBuilder/ConditionBuilderContext/translationObject.d.ts

@@ -39,4 +39,7 @@ export namespace translationsObject {
     let conditionBuilderText: string;
     let actionSectionText: string;
     let conditionHeadingText: string;
+    let addPropertyText: string;
+    let addOperatorText: string;
+    let addValueText: string;
 }

package/lib/components/ConditionBuilder/ConditionBuilderContext/translationObject.js

@@ -36,7 +36,7 @@ var translationsObject = {
   connectorText: 'Connector',
   conditionRowText: 'Condition row',
   conditionRowGroupText: 'Condition row group',
-  removeConditionText: 'Remove condition',
+  removeConditionText: 'Delete condition',
   addConditionRowText: 'Add condition row',
   startText: 'Start',
   endText: 'End',
@@ -49,7 +49,10 @@ var translationsObject = {
   invalidNumberWarnText: 'Invalid number, must be 0 or greater',
   conditionBuilderText: 'Condition Builder',
   actionSectionText: 'Action Section',
-  conditionHeadingText: 'Condition'
+  conditionHeadingText: 'Condition',
+  addPropertyText: 'Add property',
+  addOperatorText: 'Add operator',
+  addValueText: 'Add value'
 };
 
 exports.translationsObject = translationsObject;

package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js

@@ -44,11 +44,14 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
-  var _useTranslations = useTranslations.useTranslations(['invalidText', 'addConditionText', label]),
-    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 3),
+  var _useTranslations = useTranslations.useTranslations(['invalidText', 'addConditionText', 'addPropertyText', 'addOperatorText', 'addValueText', label]),
+    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 6),
     invalidText = _useTranslations2[0],
     addConditionText = _useTranslations2[1],
-    labelText = _useTranslations2[2];
+    addPropertyText = _useTranslations2[2],
+    addOperatorText = _useTranslations2[3],
+    addValueText = _useTranslations2[4],
+    labelText = _useTranslations2[5];
   var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
     conditionBuilderRef = _useContext.conditionBuilderRef;
   var getPropertyDetails = function getPropertyDetails() {
@@ -133,6 +136,19 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
       manageInvalidSelection();
     }
   };
+  var getLabel = function getLabel() {
+    if (propertyLabel) {
+      return propertyLabel;
+    } else if (rest['data-name'] === 'propertyField') {
+      return addPropertyText;
+    } else if (rest['data-name'] === 'operatorField') {
+      return addOperatorText;
+    } else if (rest['data-name'] === 'valueField') {
+      return addValueText;
+    } else {
+      return addConditionText;
+    }
+  };
   return /*#__PURE__*/React__default["default"].createElement(react.Popover, {
     open: open,
     isTabTip: true,
@@ -141,7 +157,7 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
     ref: popoverRef,
     onRequestClose: closePopover
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, _rollupPluginBabelHelpers["extends"]({
-    label: propertyLabel !== null && propertyLabel !== void 0 ? propertyLabel : addConditionText,
+    label: getLabel(),
     hideLabel: !label ? true : false,
     onClick: togglePopover,
     className: className,

package/lib/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js

@@ -59,6 +59,10 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
     showConditionSubGroupPreview = _useState4[0],
     setShowConditionSubGroupPreview = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+    showDeletionPreviewForSubgroups = _useState6[0],
+    setShowDeletionPreviewForSubgroups = _useState6[1];
   var conditionBuilderContentRef = React.useRef();
   var onRemoveHandler = function onRemoveHandler(conditionId, evt, conditionIndex) {
     if (group.conditions.length > 1) {
@@ -89,9 +93,11 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
             groupedItems.conditions.push(item);
           }
         });
-        onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
-          conditions: [].concat(_rollupPluginBabelHelpers.toConsumableArray(groupedItems.conditions), _rollupPluginBabelHelpers.toConsumableArray(groupedItems.groups))
-        }));
+        onRemove(evt);
+        // onChange({
+        //   ...group,
+        //   conditions: [...groupedItems.conditions, ...groupedItems.groups],
+        // });
       } else {
         onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
           conditions: group.conditions.filter(function (condition) {
@@ -164,10 +170,11 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
         };
         setTimeout(function () {
           var currentRowToFocus = conditionBuilderContentRef.current.querySelector("[role=\"row\"][aria-level=\"".concat(rowIdentity.ariaLevel, "\"][aria-posinset=\"").concat(rowIdentity.ariaPosInSet, "\"]"));
-          util.manageTabIndexAndFocus(currentRowToFocus, conditionBuilderRef);
+          util.manageTabIndexAndFocus(currentRowToFocus === null || currentRowToFocus === void 0 ? void 0 : currentRowToFocus.querySelector('[data-name="closeCondition"]'), conditionBuilderRef);
         }, 0);
       } else if ((prevRows === null || prevRows === void 0 ? void 0 : prevRows.length) > 1) {
-        util.manageTabIndexAndFocus(prevRows[prevRows.length - 2], conditionBuilderRef);
+        var _prevRows;
+        util.manageTabIndexAndFocus((_prevRows = prevRows[prevRows.length - 2]) === null || _prevRows === void 0 ? void 0 : _prevRows.querySelector('[data-name="closeCondition"]'), conditionBuilderRef);
       }
     }
   };
@@ -288,7 +295,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
         key: eachCondition.id
       }, eachCondition.conditions ? /*#__PURE__*/React__default["default"].createElement("div", {
-        className: cx__default["default"]("".concat(DataConfigs.blockClass, "__condition-block subgroup  ").concat(DataConfigs.blockClass, "__gap"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__gap-bottom"), group.conditions.length < conditionIndex + 1))
+        className: cx__default["default"]("".concat(DataConfigs.blockClass, "__condition-block subgroup  ").concat(DataConfigs.blockClass, "__gap"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__gap-bottom"), group.conditions.length < conditionIndex + 1), "".concat(DataConfigs.blockClass, "__subgroup_deletionPreview"), showDeletionPreviewForSubgroups), {})
       }, /*#__PURE__*/React__default["default"].createElement(ConditionConnector["default"], {
         className: "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-bottom ").concat(DataConfigs.blockClass, "__groupConnector"),
         operator: group.groupOperator,
@@ -336,7 +343,8 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
           _showConditionPreviewHandler(conditionIndex);
         },
         hideConditionPreviewHandler: hideConditionPreviewHandler,
-        isLastCondition: isLastCondition
+        isLastCondition: isLastCondition,
+        setShowDeletionPreviewForSubgroups: setShowDeletionPreviewForSubgroups
       })), conditionIndex == showConditionSubGroupPreview && (_ConditionPreview || (_ConditionPreview = /*#__PURE__*/React__default["default"].createElement(ConditionPreview["default"], {
         previewType: "subGroup",
         group: group

package/lib/components/ConditionBuilder/ConditionPreview/ConditionPreview.d.ts

@@ -1,10 +1,12 @@
 export default ConditionPreview;
-declare function ConditionPreview({ previewType, group }: {
+declare function ConditionPreview({ previewType, group, colorIndex }: {
     previewType: any;
     group: any;
+    colorIndex: any;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace ConditionPreview {
     namespace propTypes {
+        let colorIndex: PropTypes.Requireable<number>;
         let group: PropTypes.Requireable<object>;
         let previewType: PropTypes.Requireable<string>;
     }

package/lib/components/ConditionBuilder/ConditionPreview/ConditionPreview.js

@@ -27,7 +27,8 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var ConditionPreview = function ConditionPreview(_ref) {
   var _ConditionBuilderItem, _ConditionBuilderItem2, _ConditionBuilderItem3;
   var previewType = _ref.previewType,
-    group = _ref.group;
+    group = _ref.group,
+    colorIndex = _ref.colorIndex;
   var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     animate = _useState2[0],
@@ -59,6 +60,7 @@ var ConditionPreview = function ConditionPreview(_ref) {
     className: "".concat(DataConfigs.blockClass, "__statement-button"),
     label: group.groupOperator
   })), /*#__PURE__*/React__default["default"].createElement("div", {
+    "data-color-index": colorIndex,
     "aria-hidden": true,
     className: cx__default["default"](["".concat(DataConfigs.blockClass, "__group ").concat(DataConfigs.blockClass, "__condition-wrapper ").concat(DataConfigs.blockClass, "__group-preview ").concat(DataConfigs.blockClass, "__group-wrapper "), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__group-preview-animate"), animate)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -67,7 +69,7 @@ var ConditionPreview = function ConditionPreview(_ref) {
     className: "".concat(DataConfigs.blockClass, "__statement-button"),
     label: ifText
   })), getConditionSection())), previewType == 'subGroup' && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cx__default["default"](["".concat(DataConfigs.blockClass, "__group__row ").concat(DataConfigs.blockClass, "__group-preview "), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__group-preview-animate"), animate)])
+    className: cx__default["default"](["".concat(DataConfigs.blockClass, "__group__row ").concat(DataConfigs.blockClass, "__group-preview ").concat(DataConfigs.blockClass, "__gap-bottom"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__group-preview-animate"), animate)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(DataConfigs.blockClass, "__condition-block  ").concat(DataConfigs.blockClass, "__gap")
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
@@ -80,7 +82,7 @@ var ConditionPreview = function ConditionPreview(_ref) {
     className: "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__groupConnector"),
     operator: ifText
   }), getConditionSection()))), previewType == 'condition' && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cx__default["default"](["".concat(DataConfigs.blockClass, "__group__row ").concat(DataConfigs.blockClass, "__group-preview "), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__group-preview-animate"), animate)])
+    className: cx__default["default"](["".concat(DataConfigs.blockClass, "__group__row ").concat(DataConfigs.blockClass, "__group-preview ").concat(DataConfigs.blockClass, "__gap-bottom"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__group-preview-animate"), animate)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(DataConfigs.blockClass, "__condition-block  ").concat(DataConfigs.blockClass, "__gap")
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
@@ -91,6 +93,10 @@ var ConditionPreview = function ConditionPreview(_ref) {
 };
 var ConditionPreview$1 = ConditionPreview;
 ConditionPreview.propTypes = {
+  /**
+   * index of the color for next group
+   */
+  colorIndex: index["default"].number,
   /**
    * current conditional group
    */

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

@@ -39,12 +39,18 @@ var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentCont
   var allItems = [];
   switch (key) {
     case 'ArrowUp':
+      evt.preventDefault();
       //traverse through the popover options, search box, selectAll button
       parentContainer.querySelectorAll("[role=\"option\"]").forEach(function (eachElem, index, allElements) {
         util.traverseReverse(eachElem, index, allElements, null, null, conditionBuilderRef);
       });
+      //scroll to top when we reach a the top of the list to make search box visible
+      if (Array.from(evt.target.closest('ul').querySelectorAll('li')).indexOf(evt.target) === 1) {
+        parentContainer.querySelector(".".concat(DataConfigs.blockClass, "__popover-content-wrapper")).scrollTop = 0;
+      }
       break;
     case 'ArrowDown':
+      evt.preventDefault();
       //traverse through the popover options, search box, selectAll button
       parentContainer.querySelectorAll("[role=\"option\"]").forEach(function (eachElem, index, allElements) {
         util.traverseClockVise(eachElem, index, allElements, null, null, conditionBuilderRef);
@@ -72,12 +78,19 @@ var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentCont
       }
       break;
     case 'Enter':
-      if (isMultiSelect !== 'true') {
+      if (isMultiSelect === 'true') {
         if (document.activeElement.type !== 'button') {
           var _document$activeEleme2;
+          //for button , enter key is click which already handled by framework, for other elements trigger click
+          (_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 || _document$activeEleme2.click();
+        }
+        evt.preventDefault();
+      } else {
+        if (document.activeElement.type !== 'button') {
+          var _document$activeEleme3;
           //for button , enter key is click which already handled by framework, else trigger click
           util.focusThisField(evt, conditionBuilderRef);
-          (_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 || _document$activeEleme2.click();
+          (_document$activeEleme3 = document.activeElement) === null || _document$activeEleme3 === void 0 || _document$activeEleme3.click();
         }
       }
       break;
@@ -88,7 +101,7 @@ var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentCont
   }
 };
 var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, conditionBuilderRef, variant) {
-  var _document$activeEleme3;
+  var _document$activeEleme4;
   switch (evt.key) {
     case 'ArrowRight':
       evt.preventDefault();
@@ -148,9 +161,9 @@ var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, co
       }
       break;
     case 'Enter':
-      if (((_document$activeEleme3 = document.activeElement) === null || _document$activeEleme3 === void 0 || (_document$activeEleme3 = _document$activeEleme3.querySelectorAll("button")) === null || _document$activeEleme3 === void 0 ? void 0 : _document$activeEleme3.length) === 1) {
-        var _document$activeEleme4;
-        (_document$activeEleme4 = document.activeElement) === null || _document$activeEleme4 === void 0 || (_document$activeEleme4 = _document$activeEleme4.querySelectorAll("button")[0]) === null || _document$activeEleme4 === void 0 || _document$activeEleme4.click();
+      if (((_document$activeEleme4 = document.activeElement) === null || _document$activeEleme4 === void 0 || (_document$activeEleme4 = _document$activeEleme4.querySelectorAll("button")) === null || _document$activeEleme4 === void 0 ? void 0 : _document$activeEleme4.length) === 1) {
+        var _document$activeEleme5;
+        (_document$activeEleme5 = document.activeElement) === null || _document$activeEleme5 === void 0 || (_document$activeEleme5 = _document$activeEleme5.querySelectorAll("button")[0]) === null || _document$activeEleme5 === void 0 || _document$activeEleme5.click();
       }
       break;
   }

package/lib/components/EmptyStates/EmptyState.d.ts

@@ -1,9 +1,76 @@
-export namespace defaults {
-    let position: string;
-    let size: string;
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference path="../../../src/custom-typings/index.d.ts" />
+import React, { ReactNode } from 'react';
+import '../../global/js/utils/props-helper';
+import { ButtonProps } from '@carbon/react';
+import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
+declare enum sizes {
+    lg = "lg",
+    sm = "sm"
+}
+export declare const defaults: {
+    position: string;
+    size: sizes;
+};
+interface EmptyStateProps {
+    /**
+     * Empty state action button
+     */
+    action?: {
+        kind?: 'primary' | 'secondary' | 'tertiary';
+        renderIcon?: CarbonIconType;
+        onClick?: ButtonProps['onClick'];
+        text?: string;
+    };
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Empty state illustration, specify the `src` for a provided illustration to be displayed. In the case of requiring a light and dark illustration of your own, simply pass the corresponding illustration based on the current theme of your application.
+     * For example: `illustration={appTheme === 'dark' ? darkIllustration : lightIllustration}`
+     */
+    illustration?: string;
+    /**
+     * The alt text for empty state svg images. If not provided , title will be used.
+     */
+    illustrationDescription?: string;
+    /**
+     * Designates the position of the illustration relative to the content
+     */
+    illustrationPosition?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Empty state link object
+     */
+    link?: {
+        text?: string | ReactNode;
+        href?: string;
+    };
+    /**
+     * Empty state size
+     */
+    size?: 'lg' | 'sm';
+    /**
+     * Empty state subtitle
+     */
+    subtitle?: string | ReactNode;
+    /**
+     * Empty state title
+     */
+    title: string | ReactNode;
+    /**
+     * Designates which version of the EmptyState component is being used.
+     * Refer to V2 documentation separately.
+     */
+    v2?: boolean;
 }
 /**
  * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
  */
-export let EmptyState: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/EmptyStates/EmptyState.js

@@ -31,13 +31,15 @@ var _excluded = ["v2"],
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--empty-state");
 var componentName = 'EmptyState';
-
-// Default values for props
+var sizes = /*#__PURE__*/function (sizes) {
+  sizes["lg"] = "lg";
+  sizes["sm"] = "sm";
+  return sizes;
+}(sizes || {}); // Default values for props
 var defaults = {
   position: 'top',
-  size: 'lg'
+  size: sizes.lg
 };
-
 /**
  * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
  */
@@ -73,7 +75,7 @@ exports.EmptyState = /*#__PURE__*/React__default["default"].forwardRef(function
     link: link,
     size: size,
     subtitle: subtitle,
-    title: title
+    title: title !== null && title !== void 0 ? title : ''
   }));
 });
 
@@ -101,6 +103,7 @@ exports.EmptyState.propTypes = {
   /**
    * The alt text for custom provided illustrations
    */
+  /**@ts-ignore*/
   illustrationDescription: index["default"].string.isRequired.if(function (_ref2) {
     var illustration = _ref2.illustration;
     return illustration;

package/lib/components/EmptyStates/EmptyStateV2.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023, 2023
+ * Copyright IBM Corp. 2023, 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.
@@ -44,7 +44,7 @@ interface EmptyStateV2Props {
      * Props for the link. Refer to the Carbon Components link documentation for full list of props.
      */
     link?: {
-        text?: string;
+        text?: string | ReactNode;
     };
     /**
      * Empty state size

package/lib/components/EmptyStates/EmptyStateV2.js

@@ -116,7 +116,7 @@ exports.EmptyStateV2.propTypes = {
    */
   /**@ts-ignore*/
   link: index["default"].shape({
-    text: index["default"].string
+    text: index["default"].oneOfType([index["default"].string, index["default"].node])
   }),
   /**
    * Empty state size

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.43.2-canary.102+5d21bf822",
+  "version": "2.43.2-canary.104+5c1e5682a",
   "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.20.0",
-    "@carbon/ibm-products-styles": "^2.42.0-rc.0",
+    "@carbon/ibm-products-styles": "^2.39.1-canary.114+5c1e5682a",
     "@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": "5d21bf822fff0fef64e06de74c59c37470ffd900"
+  "gitHead": "5c1e5682a1d849f809f252555001adadef3c2800"
 }

package/scss/components/ConditionBuilder/_condition-builder.scss

@@ -73,3 +73,6 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 .#{$block-class}__group-separator {
   width: fit-content;
 }
+.#{$block-class}__tooltip {
+  word-break: break-all;
+}

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

@@ -36,6 +36,15 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   background-color: $tag-background-red;
   color: $tag-color-red;
 }
+.#{$block-class}__subgroup_deletionPreview {
+  .#{$block-class}__group {
+    /* stylelint-disable max-nesting-depth */
+    button {
+      background-color: $tag-background-red;
+      color: $tag-color-red;
+    }
+  }
+}
 
 .#{$block-class}__condition__deletion-preview
   .#{$block-class}__button:not(
@@ -63,6 +72,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 }
 .#{$block-class}__group-preview-animate {
   height: auto;
+  color: $text-secondary;
   opacity: 0.5;
   pointer-events: none;
   transition: all $duration-moderate-02 motion(exit, expressive);
@@ -70,10 +80,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 .#{$block-class}__connector--disabled {
   display: flex;
   min-width: $spacing-10;
-  align-items: center;
   background-color: $layer;
   color: $text-helper;
-  padding-inline: $spacing-03;
+  pointer-events: none;
 }
 .#{$block-class}__condition-wrapper
   > .#{$block-class}__condition-block:last-child