@carbon/ibm-products 2.43.2-canary.116 → 2.43.2-canary.118

package/es/components/ConditionBuilder/ConditionBlock/ConditionBlock.js

@@ -6,7 +6,7 @@
  */
 
 import { slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useContext, useState, useEffect } from 'react';
+import React__default, { useContext, useState } from 'react';
 import { Close } from '@carbon/react/icons';
 import { ConditionBuilderItem } from '../ConditionBuilderItem/ConditionBuilderItem.js';
 import PropTypes from '../../../node_modules/prop-types/index.js';
@@ -52,8 +52,7 @@ var ConditionBlock = function ConditionBlock(props) {
     showConditionSubGroupPreviewHandler = props.showConditionSubGroupPreviewHandler,
     hideConditionPreviewHandler = props.hideConditionPreviewHandler,
     showConditionPreviewHandler = props.showConditionPreviewHandler,
-    isLastCondition = props.isLastCondition,
-    setShowDeletionPreviewForSubgroups = props.setShowDeletionPreviewForSubgroups;
+    isLastCondition = props.isLastCondition;
   var _useContext = useContext(ConditionBuilderContext),
     inputConfig = _useContext.inputConfig,
     variant = _useContext.variant,
@@ -62,6 +61,10 @@ var ConditionBlock = function ConditionBlock(props) {
     _useState2 = _slicedToArray(_useState, 2),
     showDeletionPreview = _useState2[0],
     setShowDeletionPreview = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showAllActions = _useState4[0],
+    setShowAllActions = _useState4[1];
   var _useTranslations = useTranslations(['conditionRowText', 'conditionText', 'propertyText', 'operatorText', 'removeConditionText']),
     _useTranslations2 = _slicedToArray(_useTranslations, 5),
     conditionRowText = _useTranslations2[0],
@@ -94,15 +97,12 @@ var ConditionBlock = function ConditionBlock(props) {
     textarea: ConditionBuilderItemText
   };
   var ItemComponent = property ? itemComponents[type] : null;
-  useEffect(function () {
-    var _group$conditions, _group$conditions2;
-    if (showDeletionPreview && (group === null || group === void 0 || (_group$conditions = group.conditions) === null || _group$conditions === void 0 ? void 0 : _group$conditions.length) > 1 && group !== null && group !== void 0 && (_group$conditions2 = group.conditions) !== null && _group$conditions2 !== void 0 && _group$conditions2[1].conditions && group.conditions[1].id !== condition.id) {
-      setShowDeletionPreviewForSubgroups === null || setShowDeletionPreviewForSubgroups === void 0 || setShowDeletionPreviewForSubgroups(true);
-    } else {
-      setShowDeletionPreviewForSubgroups === null || setShowDeletionPreviewForSubgroups === void 0 || setShowDeletionPreviewForSubgroups(false);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [showDeletionPreview]);
+  var showAllActionsHandler = function showAllActionsHandler() {
+    setShowAllActions(true);
+  };
+  var hideAllActionsHandler = function hideAllActionsHandler() {
+    setShowAllActions(false);
+  };
   var onStatementChangeHandler = function onStatementChangeHandler(v, evt) {
     focusThisField(evt, conditionBuilderRef);
     onStatementChange(v);
@@ -135,6 +135,12 @@ var ConditionBlock = function ConditionBlock(props) {
   var handleHideDeletionPreview = function handleHideDeletionPreview() {
     setShowDeletionPreview(false);
   };
+  var manageActionButtons = function manageActionButtons(conditionIndex, conditions) {
+    if (variant === 'tree') {
+      return true;
+    }
+    return isLastCondition(conditionIndex, conditions);
+  };
   var getOperators = function getOperators() {
     if (config !== null && config !== void 0 && config.operators) {
       return config.operators;
@@ -165,10 +171,15 @@ var ConditionBlock = function ConditionBlock(props) {
     });
   };
   return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: cx("".concat(blockClass, "__condition-block"), _defineProperty({}, "".concat(blockClass, "__condition__deletion-preview"), showDeletionPreview), _defineProperty({}, "".concat(blockClass, "__gap-bottom"), variant == 'tree' && !(conditionIndex + 1 >= group.conditions.length)), _defineProperty({}, "".concat(blockClass, "__gap ").concat(blockClass, "__gap-bottom"), variant == 'sentence')),
+    className: cx("".concat(blockClass, "__condition-block"), _defineProperty({}, "".concat(blockClass, "__condition__deletion-preview"), showDeletionPreview), _defineProperty({}, "".concat(blockClass, "__gap-bottom"), variant == 'tree'), _defineProperty({}, "".concat(blockClass, "__gap ").concat(blockClass, "__gap-bottom"), variant == 'sentence'), _defineProperty({}, "".concat(blockClass, "__condition--interacting"), showAllActions)),
     role: "row",
     "aria-label": conditionRowText
-  }, getAriaAttributes()), conjunction ? /*#__PURE__*/React__default.createElement(ConditionConnector, {
+  }, getAriaAttributes(), {
+    tabIndex: -1,
+    onMouseEnter: showAllActionsHandler,
+    onMouseLeave: hideAllActionsHandler,
+    onBlur: hideAllActionsHandler
+  }), conjunction ? /*#__PURE__*/React__default.createElement(ConditionConnector, {
     className: "".concat(blockClass, "__gap"),
     operator: conjunction,
     onChange: function onChange(op) {
@@ -181,7 +192,8 @@ var ConditionBlock = function ConditionBlock(props) {
     title: conditionText,
     "data-name": "connectorField",
     popOverClassName: "".concat(blockClass, "__gap"),
-    className: "".concat(blockClass, "__statement-button")
+    className: "".concat(blockClass, "__statement-button"),
+    tabIndex: 0
   }, /*#__PURE__*/React__default.createElement(ItemOption, {
     conditionState: {
       value: group.statement,
@@ -249,7 +261,7 @@ var ConditionBlock = function ConditionBlock(props) {
     renderIcon: Close,
     className: "".concat(blockClass, "__close-condition"),
     "data-name": "closeCondition"
-  })), isLastCondition(conditionIndex, group.conditions) && /*#__PURE__*/React__default.createElement(ConditionBuilderAdd, {
+  })), manageActionButtons(conditionIndex, group.conditions) && /*#__PURE__*/React__default.createElement(ConditionBuilderAdd, {
     onClick: function onClick() {
       addConditionHandler(conditionIndex);
     },
@@ -317,10 +329,6 @@ ConditionBlock.propTypes = {
    * callback to handle the statement(if/ excl.if) change
    */
   onStatementChange: PropTypes.func,
-  /**
-   * method to set ShowDeletionPreviewForSubgroups
-   */
-  setShowDeletionPreviewForSubgroups: PropTypes.func,
   /**
    * handler for showing add condition preview
    */

package/es/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState } from 'react';
+import { slicedToArray as _slicedToArray, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
 import cx from 'classnames';
 import { AddAlt, TextNewLine } from '@carbon/react/icons';
 import { ConditionBuilderButton } from '../ConditionBuilderButton/ConditionBuilderButton.js';
@@ -25,21 +25,11 @@ var ConditionBuilderAdd = function ConditionBuilderAdd(_ref) {
     enableSubGroup = _ref.enableSubGroup,
     buttonLabel = _ref.buttonLabel,
     tabIndex = _ref.tabIndex;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isAddSubgroup = _useState2[0],
-    setIsAddSubgroup = _useState2[1];
   var _useTranslations = useTranslations(['addConditionText', 'addConditionRowText', 'addSubgroupText']),
     _useTranslations2 = _slicedToArray(_useTranslations, 3),
     addConditionText = _useTranslations2[0],
     addConditionRowText = _useTranslations2[1],
     addSubgroupText = _useTranslations2[2];
-  var showAddSubGroup = function showAddSubGroup() {
-    setIsAddSubgroup(true);
-  };
-  var hideAddSubGroup = function hideAddSubGroup() {
-    setIsAddSubgroup(false);
-  };
   var onClickHandler = function onClickHandler() {
     hideConditionPreviewHandler === null || hideConditionPreviewHandler === void 0 || hideConditionPreviewHandler();
     onClick();
@@ -69,11 +59,7 @@ var ConditionBuilderAdd = function ConditionBuilderAdd(_ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(className, " ").concat(blockClass, "__add-button-wrapper"),
     role: !enableSubGroup ? 'gridcell' : 'none',
-    "aria-label": getAriaLabel(),
-    onMouseEnter: showAddSubGroup,
-    onMouseLeave: hideAddSubGroup,
-    onFocus: showAddSubGroup,
-    onBlur: hideAddSubGroup
+    "aria-label": getAriaLabel()
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderButton, _extends({
     renderIcon: AddAlt,
     onClick: onClickHandler
@@ -83,7 +69,8 @@ var ConditionBuilderAdd = function ConditionBuilderAdd(_ref) {
     hideLabel: true,
     "data-name": "addButton",
     label: buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : addConditionText,
-    tabIndex: tabIndex
+    tabIndex: tabIndex,
+    wrapperClassName: "".concat(blockClass, "__add-condition-wrapper")
   })), enableSubGroup && /*#__PURE__*/React__default.createElement(ConditionBuilderButton, _extends({
     renderIcon: TextNewLine,
     onClick: addConditionSubGroupHandler,
@@ -91,7 +78,7 @@ var ConditionBuilderAdd = function ConditionBuilderAdd(_ref) {
     hideLabel: true,
     label: addSubgroupText,
     wrapperProps: wrapperProps,
-    wrapperClassName: cx("".concat(blockClass, "__add-condition-sub-group-wrapper ").concat(blockClass, "__gap-left"), _defineProperty({}, "".concat(blockClass, "__add-condition-sub-group-wrapper--show"), isAddSubgroup))
+    wrapperClassName: "".concat(blockClass, "__add-condition-sub-group-wrapper ").concat(blockClass, "__gap-left")
   }, previewHandlersForSubgroup())));
 };
 var ConditionBuilderAdd$1 = ConditionBuilderAdd;

package/es/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js

@@ -50,56 +50,50 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     showConditionSubGroupPreview = _useState4[0],
     setShowConditionSubGroupPreview = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    showDeletionPreviewForSubgroups = _useState6[0],
-    setShowDeletionPreviewForSubgroups = _useState6[1];
+  useState(false);
   var conditionBuilderContentRef = useRef();
   var onRemoveHandler = function onRemoveHandler(conditionId, evt, conditionIndex) {
     if (group.conditions.length > 1) {
       variant == 'tree' ? handleFocusOnCloseTree(evt) : handleFocusOnClose(evt, conditionIndex);
-      if (group.conditions[1].conditions && group.conditions[1].id !== conditionId) {
-        //when we remove every plain conditions of a group without deleting  the subgroup, we need to restructure the group
-        //the inner group become outer group and same level subgroups become plain conditions
-
-        //ensure we are deleting last condition , not the subgroup
+      if (!checkGroupHaveCondition(group.conditions, conditionId)) {
+        //when we delete the last  condition of a group without deleting  the subgroup, we need to restructure the group.
+        //we will shift the group one level up. The subgroups will open up as conditions.
 
         //spreading out the condition inside the subgroup
-        var allConditions = group.conditions.reduce(function (acc, item) {
-          if (item.conditions) {
-            return acc.concat(item.conditions);
+        var allConditions = group.conditions.reduce(function (acc, condition) {
+          if (condition.conditions) {
+            //this is a subgroup
+            return acc.concat(condition.conditions);
           }
           return acc;
         }, []);
-
-        //we always have conditions first and then subgroups, so ordering accordingly
-        var groupedItems = {
-          groups: [],
-          conditions: []
-        };
-        allConditions.forEach(function (item) {
-          if (item.conditions) {
-            groupedItems.groups.push(item);
-          } else {
-            groupedItems.conditions.push(item);
-          }
-        });
-        onRemove(evt);
-        // onChange({
-        //   ...group,
-        //   conditions: [...groupedItems.conditions, ...groupedItems.groups],
-        // });
+        onChange(_objectSpread2(_objectSpread2({}, group), {}, {
+          conditions: allConditions
+        }));
       } else {
+        var filteredConditions = group.conditions.filter(function (condition) {
+          return conditionId !== condition.id;
+        });
+        //This is to handle a edge case.
+        //When a group has structure as 1 condition,1 subgroup, 1 condition and if we delete first condition,
+        //the group will start with a subgroup. To avoid this,opening up that subgroup.
+        if (filteredConditions !== null && filteredConditions !== void 0 && filteredConditions[0].conditions) {
+          filteredConditions.splice.apply(filteredConditions, [0, 1].concat(_toConsumableArray(filteredConditions[0].conditions)));
+        }
         onChange(_objectSpread2(_objectSpread2({}, group), {}, {
-          conditions: group.conditions.filter(function (condition) {
-            return conditionId !== condition.id;
-          })
+          conditions: filteredConditions
         }));
       }
     } else {
       onRemove(evt);
     }
   };
+  //check to identify a group without a plain condition
+  var checkGroupHaveCondition = function checkGroupHaveCondition(conditions, conditionId) {
+    return conditions.find(function (eachCondition) {
+      return !eachCondition.conditions && eachCondition.id !== conditionId;
+    });
+  };
   var onChangeHandler = function onChangeHandler(updatedCondition, conditionIndex) {
     var updatedConditions = [].concat(_toConsumableArray(group.conditions.slice(0, conditionIndex)), [updatedCondition], _toConsumableArray(group.conditions.slice(conditionIndex + 1)));
     onChange(_objectSpread2(_objectSpread2({}, group), {}, {
@@ -286,7 +280,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       return /*#__PURE__*/React__default.createElement(Fragment, {
         key: eachCondition.id
       }, eachCondition.conditions ? /*#__PURE__*/React__default.createElement("div", {
-        className: cx("".concat(blockClass, "__condition-block subgroup  ").concat(blockClass, "__gap"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__gap-bottom"), group.conditions.length < conditionIndex + 1), "".concat(blockClass, "__subgroup_deletionPreview"), showDeletionPreviewForSubgroups), {})
+        className: cx("".concat(blockClass, "__condition-block subgroup  ").concat(blockClass, "__gap"), _defineProperty({}, "".concat(blockClass, "__gap-bottom"), group.conditions.length < conditionIndex + 1), {})
       }, /*#__PURE__*/React__default.createElement(ConditionConnector, {
         className: "".concat(blockClass, "__gap ").concat(blockClass, "__gap-bottom ").concat(blockClass, "__groupConnector"),
         operator: group.groupOperator,
@@ -334,8 +328,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
           _showConditionPreviewHandler(conditionIndex);
         },
         hideConditionPreviewHandler: hideConditionPreviewHandler,
-        isLastCondition: isLastCondition,
-        setShowDeletionPreviewForSubgroups: setShowDeletionPreviewForSubgroups
+        isLastCondition: isLastCondition
       })), conditionIndex == showConditionSubGroupPreview && (_ConditionPreview || (_ConditionPreview = /*#__PURE__*/React__default.createElement(ConditionPreview, {
         previewType: "subGroup",
         group: group

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

@@ -20,7 +20,6 @@ declare namespace ConditionBlock {
         let onConnectorOperatorChange: PropTypes.Requireable<(...args: any[]) => any>;
         let onRemove: PropTypes.Requireable<(...args: any[]) => any>;
         let onStatementChange: PropTypes.Requireable<(...args: any[]) => any>;
-        let setShowDeletionPreviewForSubgroups: PropTypes.Requireable<(...args: any[]) => any>;
         let showConditionPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
         let showConditionSubGroupPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
         let state: PropTypes.Requireable<object>;

package/lib/components/ConditionBuilder/ConditionBlock/ConditionBlock.js

@@ -61,8 +61,7 @@ var ConditionBlock = function ConditionBlock(props) {
     showConditionSubGroupPreviewHandler = props.showConditionSubGroupPreviewHandler,
     hideConditionPreviewHandler = props.hideConditionPreviewHandler,
     showConditionPreviewHandler = props.showConditionPreviewHandler,
-    isLastCondition = props.isLastCondition,
-    setShowDeletionPreviewForSubgroups = props.setShowDeletionPreviewForSubgroups;
+    isLastCondition = props.isLastCondition;
   var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
     inputConfig = _useContext.inputConfig,
     variant = _useContext.variant,
@@ -71,6 +70,10 @@ var ConditionBlock = function ConditionBlock(props) {
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     showDeletionPreview = _useState2[0],
     setShowDeletionPreview = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+    showAllActions = _useState4[0],
+    setShowAllActions = _useState4[1];
   var _useTranslations = useTranslations.useTranslations(['conditionRowText', 'conditionText', 'propertyText', 'operatorText', 'removeConditionText']),
     _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 5),
     conditionRowText = _useTranslations2[0],
@@ -103,15 +106,12 @@ var ConditionBlock = function ConditionBlock(props) {
     textarea: ConditionBuilderItemText.ConditionBuilderItemText
   };
   var ItemComponent = property ? itemComponents[type] : null;
-  React.useEffect(function () {
-    var _group$conditions, _group$conditions2;
-    if (showDeletionPreview && (group === null || group === void 0 || (_group$conditions = group.conditions) === null || _group$conditions === void 0 ? void 0 : _group$conditions.length) > 1 && group !== null && group !== void 0 && (_group$conditions2 = group.conditions) !== null && _group$conditions2 !== void 0 && _group$conditions2[1].conditions && group.conditions[1].id !== condition.id) {
-      setShowDeletionPreviewForSubgroups === null || setShowDeletionPreviewForSubgroups === void 0 || setShowDeletionPreviewForSubgroups(true);
-    } else {
-      setShowDeletionPreviewForSubgroups === null || setShowDeletionPreviewForSubgroups === void 0 || setShowDeletionPreviewForSubgroups(false);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [showDeletionPreview]);
+  var showAllActionsHandler = function showAllActionsHandler() {
+    setShowAllActions(true);
+  };
+  var hideAllActionsHandler = function hideAllActionsHandler() {
+    setShowAllActions(false);
+  };
   var onStatementChangeHandler = function onStatementChangeHandler(v, evt) {
     util.focusThisField(evt, conditionBuilderRef);
     onStatementChange(v);
@@ -144,6 +144,12 @@ var ConditionBlock = function ConditionBlock(props) {
   var handleHideDeletionPreview = function handleHideDeletionPreview() {
     setShowDeletionPreview(false);
   };
+  var manageActionButtons = function manageActionButtons(conditionIndex, conditions) {
+    if (variant === 'tree') {
+      return true;
+    }
+    return isLastCondition(conditionIndex, conditions);
+  };
   var getOperators = function getOperators() {
     if (config !== null && config !== void 0 && config.operators) {
       return config.operators;
@@ -174,10 +180,15 @@ var ConditionBlock = function ConditionBlock(props) {
     });
   };
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-    className: cx__default["default"]("".concat(DataConfigs.blockClass, "__condition-block"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__condition__deletion-preview"), showDeletionPreview), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__gap-bottom"), variant == 'tree' && !(conditionIndex + 1 >= group.conditions.length)), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-bottom"), variant == 'sentence')),
+    className: cx__default["default"]("".concat(DataConfigs.blockClass, "__condition-block"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__condition__deletion-preview"), showDeletionPreview), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__gap-bottom"), variant == 'tree'), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-bottom"), variant == 'sentence'), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__condition--interacting"), showAllActions)),
     role: "row",
     "aria-label": conditionRowText
-  }, getAriaAttributes()), conjunction ? /*#__PURE__*/React__default["default"].createElement(ConditionConnector["default"], {
+  }, getAriaAttributes(), {
+    tabIndex: -1,
+    onMouseEnter: showAllActionsHandler,
+    onMouseLeave: hideAllActionsHandler,
+    onBlur: hideAllActionsHandler
+  }), conjunction ? /*#__PURE__*/React__default["default"].createElement(ConditionConnector["default"], {
     className: "".concat(DataConfigs.blockClass, "__gap"),
     operator: conjunction,
     onChange: function onChange(op) {
@@ -190,7 +201,8 @@ var ConditionBlock = function ConditionBlock(props) {
     title: conditionText,
     "data-name": "connectorField",
     popOverClassName: "".concat(DataConfigs.blockClass, "__gap"),
-    className: "".concat(DataConfigs.blockClass, "__statement-button")
+    className: "".concat(DataConfigs.blockClass, "__statement-button"),
+    tabIndex: 0
   }, /*#__PURE__*/React__default["default"].createElement(ItemOption.ItemOption, {
     conditionState: {
       value: group.statement,
@@ -258,7 +270,7 @@ var ConditionBlock = function ConditionBlock(props) {
     renderIcon: icons.Close,
     className: "".concat(DataConfigs.blockClass, "__close-condition"),
     "data-name": "closeCondition"
-  })), isLastCondition(conditionIndex, group.conditions) && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderAdd["default"], {
+  })), manageActionButtons(conditionIndex, group.conditions) && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderAdd["default"], {
     onClick: function onClick() {
       addConditionHandler(conditionIndex);
     },
@@ -326,10 +338,6 @@ ConditionBlock.propTypes = {
    * callback to handle the statement(if/ excl.if) change
    */
   onStatementChange: index["default"].func,
-  /**
-   * method to set ShowDeletionPreviewForSubgroups
-   */
-  setShowDeletionPreviewForSubgroups: index["default"].func,
   /**
    * handler for showing add condition preview
    */

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

@@ -34,21 +34,11 @@ var ConditionBuilderAdd = function ConditionBuilderAdd(_ref) {
     enableSubGroup = _ref.enableSubGroup,
     buttonLabel = _ref.buttonLabel,
     tabIndex = _ref.tabIndex;
-  var _useState = React.useState(false),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    isAddSubgroup = _useState2[0],
-    setIsAddSubgroup = _useState2[1];
   var _useTranslations = useTranslations.useTranslations(['addConditionText', 'addConditionRowText', 'addSubgroupText']),
     _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 3),
     addConditionText = _useTranslations2[0],
     addConditionRowText = _useTranslations2[1],
     addSubgroupText = _useTranslations2[2];
-  var showAddSubGroup = function showAddSubGroup() {
-    setIsAddSubgroup(true);
-  };
-  var hideAddSubGroup = function hideAddSubGroup() {
-    setIsAddSubgroup(false);
-  };
   var onClickHandler = function onClickHandler() {
     hideConditionPreviewHandler === null || hideConditionPreviewHandler === void 0 || hideConditionPreviewHandler();
     onClick();
@@ -78,11 +68,7 @@ var ConditionBuilderAdd = function ConditionBuilderAdd(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(className, " ").concat(DataConfigs.blockClass, "__add-button-wrapper"),
     role: !enableSubGroup ? 'gridcell' : 'none',
-    "aria-label": getAriaLabel(),
-    onMouseEnter: showAddSubGroup,
-    onMouseLeave: hideAddSubGroup,
-    onFocus: showAddSubGroup,
-    onBlur: hideAddSubGroup
+    "aria-label": getAriaLabel()
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, _rollupPluginBabelHelpers["extends"]({
     renderIcon: icons.AddAlt,
     onClick: onClickHandler
@@ -92,7 +78,8 @@ var ConditionBuilderAdd = function ConditionBuilderAdd(_ref) {
     hideLabel: true,
     "data-name": "addButton",
     label: buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : addConditionText,
-    tabIndex: tabIndex
+    tabIndex: tabIndex,
+    wrapperClassName: "".concat(DataConfigs.blockClass, "__add-condition-wrapper")
   })), enableSubGroup && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, _rollupPluginBabelHelpers["extends"]({
     renderIcon: icons.TextNewLine,
     onClick: addConditionSubGroupHandler,
@@ -100,7 +87,7 @@ var ConditionBuilderAdd = function ConditionBuilderAdd(_ref) {
     hideLabel: true,
     label: addSubgroupText,
     wrapperProps: wrapperProps,
-    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))
+    wrapperClassName: "".concat(DataConfigs.blockClass, "__add-condition-sub-group-wrapper ").concat(DataConfigs.blockClass, "__gap-left")
   }, previewHandlersForSubgroup())));
 };
 var ConditionBuilderAdd$1 = ConditionBuilderAdd;

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

@@ -59,56 +59,50 @@ 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];
+  React.useState(false);
   var conditionBuilderContentRef = React.useRef();
   var onRemoveHandler = function onRemoveHandler(conditionId, evt, conditionIndex) {
     if (group.conditions.length > 1) {
       variant == 'tree' ? handleFocusOnCloseTree(evt) : handleFocusOnClose(evt, conditionIndex);
-      if (group.conditions[1].conditions && group.conditions[1].id !== conditionId) {
-        //when we remove every plain conditions of a group without deleting  the subgroup, we need to restructure the group
-        //the inner group become outer group and same level subgroups become plain conditions
-
-        //ensure we are deleting last condition , not the subgroup
+      if (!checkGroupHaveCondition(group.conditions, conditionId)) {
+        //when we delete the last  condition of a group without deleting  the subgroup, we need to restructure the group.
+        //we will shift the group one level up. The subgroups will open up as conditions.
 
         //spreading out the condition inside the subgroup
-        var allConditions = group.conditions.reduce(function (acc, item) {
-          if (item.conditions) {
-            return acc.concat(item.conditions);
+        var allConditions = group.conditions.reduce(function (acc, condition) {
+          if (condition.conditions) {
+            //this is a subgroup
+            return acc.concat(condition.conditions);
           }
           return acc;
         }, []);
-
-        //we always have conditions first and then subgroups, so ordering accordingly
-        var groupedItems = {
-          groups: [],
-          conditions: []
-        };
-        allConditions.forEach(function (item) {
-          if (item.conditions) {
-            groupedItems.groups.push(item);
-          } else {
-            groupedItems.conditions.push(item);
-          }
-        });
-        onRemove(evt);
-        // onChange({
-        //   ...group,
-        //   conditions: [...groupedItems.conditions, ...groupedItems.groups],
-        // });
+        onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
+          conditions: allConditions
+        }));
       } else {
+        var filteredConditions = group.conditions.filter(function (condition) {
+          return conditionId !== condition.id;
+        });
+        //This is to handle a edge case.
+        //When a group has structure as 1 condition,1 subgroup, 1 condition and if we delete first condition,
+        //the group will start with a subgroup. To avoid this,opening up that subgroup.
+        if (filteredConditions !== null && filteredConditions !== void 0 && filteredConditions[0].conditions) {
+          filteredConditions.splice.apply(filteredConditions, [0, 1].concat(_rollupPluginBabelHelpers.toConsumableArray(filteredConditions[0].conditions)));
+        }
         onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
-          conditions: group.conditions.filter(function (condition) {
-            return conditionId !== condition.id;
-          })
+          conditions: filteredConditions
         }));
       }
     } else {
       onRemove(evt);
     }
   };
+  //check to identify a group without a plain condition
+  var checkGroupHaveCondition = function checkGroupHaveCondition(conditions, conditionId) {
+    return conditions.find(function (eachCondition) {
+      return !eachCondition.conditions && eachCondition.id !== conditionId;
+    });
+  };
   var onChangeHandler = function onChangeHandler(updatedCondition, conditionIndex) {
     var updatedConditions = [].concat(_rollupPluginBabelHelpers.toConsumableArray(group.conditions.slice(0, conditionIndex)), [updatedCondition], _rollupPluginBabelHelpers.toConsumableArray(group.conditions.slice(conditionIndex + 1)));
     onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
@@ -295,7 +289,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(_rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__gap-bottom"), group.conditions.length < conditionIndex + 1), "".concat(DataConfigs.blockClass, "__subgroup_deletionPreview"), showDeletionPreviewForSubgroups), {})
+        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), {})
       }, /*#__PURE__*/React__default["default"].createElement(ConditionConnector["default"], {
         className: "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-bottom ").concat(DataConfigs.blockClass, "__groupConnector"),
         operator: group.groupOperator,
@@ -343,8 +337,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
           _showConditionPreviewHandler(conditionIndex);
         },
         hideConditionPreviewHandler: hideConditionPreviewHandler,
-        isLastCondition: isLastCondition,
-        setShowDeletionPreviewForSubgroups: setShowDeletionPreviewForSubgroups
+        isLastCondition: isLastCondition
       })), conditionIndex == showConditionSubGroupPreview && (_ConditionPreview || (_ConditionPreview = /*#__PURE__*/React__default["default"].createElement(ConditionPreview["default"], {
         previewType: "subGroup",
         group: group

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.43.2-canary.116+832233109",
+  "version": "2.43.2-canary.118+357fb5d96",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -81,7 +81,7 @@
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.5.0",
+    "jest-config-ibm-cloud-cognitive": "^1.6.0-rc.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.14.12",
@@ -96,7 +96,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.20.0",
-    "@carbon/ibm-products-styles": "^2.42.0",
+    "@carbon/ibm-products-styles": "^2.39.1-canary.128+357fb5d96",
     "@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": "832233109aca76f9e4a48ed7e7dbd0eac70c46b1"
+  "gitHead": "357fb5d964dd83cdff78b7be3615e9de19db922f"
 }

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

@@ -38,20 +38,12 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   .#{$block-class}__button:not(
     .#{$block-class}__statement-button,
     .#{$block-class}__connector-button,
-    .#{$block-class}__add-button
+    .#{$block-class}__add-button,
+    .#{$block-class}__add-condition-sub-group
   ) {
   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(