@carbon/ibm-products 2.43.2-canary.63 → 2.43.2-canary.66

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

@@ -59,8 +59,9 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     showConditionSubGroupPreview = _useState4[0],
     setShowConditionSubGroupPreview = _useState4[1];
   var conditionBuilderContentRef = React.useRef();
-  var onRemoveHandler = function onRemoveHandler(conditionId, evt) {
+  var onRemoveHandler = function onRemoveHandler(conditionId, evt, conditionIndex) {
     if (group.conditions.length > 1) {
+      variant == 'tree' ? handleFocusOnCloseTree(evt) : handleFocusOnClose(evt, conditionIndex);
       onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
         conditions: group.conditions.filter(function (condition) {
           return conditionId !== condition.id;
@@ -88,6 +89,52 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       conditions: [].concat(_rollupPluginBabelHelpers.toConsumableArray(group.conditions.slice(0, conditionIndex + 1)), [newCondition], _rollupPluginBabelHelpers.toConsumableArray(group.conditions.slice(conditionIndex + 1)))
     }));
   };
+  var handleFocusOnClose = function handleFocusOnClose(e, conditionIndex) {
+    var _e$currentTarget$clos;
+    //get all close buttons.
+    //if the last condition is closing, focus the second last one.
+    //or focus the next one.
+    var currentGroupCloseButtons = (_e$currentTarget$clos = e.currentTarget.closest(".".concat(DataConfigs.blockClass, "__group"))) === null || _e$currentTarget$clos === void 0 ? void 0 : _e$currentTarget$clos.querySelectorAll('[data-name="closeCondition"]');
+    if (conditionIndex == currentGroupCloseButtons.length - 1) {
+      var _currentGroupCloseBut;
+      (_currentGroupCloseBut = currentGroupCloseButtons[conditionIndex - 1]) === null || _currentGroupCloseBut === void 0 || _currentGroupCloseBut.focus();
+    } else {
+      var _currentGroupCloseBut2;
+      (_currentGroupCloseBut2 = currentGroupCloseButtons[conditionIndex + 1]) === null || _currentGroupCloseBut2 === void 0 || _currentGroupCloseBut2.focus();
+    }
+  };
+  var handleFocusOnCloseTree = function handleFocusOnCloseTree(evt) {
+    var _evt$currentTarget, _evt$currentTarget2, _conditionBuilderCont, _conditionBuilderCont2;
+    //getting the current aria-level and aria-posinset.
+    var currentLevel = (_evt$currentTarget = evt.currentTarget) === null || _evt$currentTarget === void 0 || (_evt$currentTarget = _evt$currentTarget.closest('[role="row"]')) === null || _evt$currentTarget === void 0 ? void 0 : _evt$currentTarget.getAttribute('aria-level');
+    var currentPos = (_evt$currentTarget2 = evt.currentTarget) === null || _evt$currentTarget2 === void 0 || (_evt$currentTarget2 = _evt$currentTarget2.closest('[role="row"]')) === null || _evt$currentTarget2 === void 0 ? void 0 : _evt$currentTarget2.getAttribute('aria-posinset');
+
+    //finding the next and previous items in same level
+    var nextElement = (_conditionBuilderCont = conditionBuilderContentRef.current) === null || _conditionBuilderCont === void 0 ? void 0 : _conditionBuilderCont.querySelector("[aria-level=\"".concat(currentLevel, "\"][aria-posinset=\"").concat(Number(currentPos) + 1, "\"]"));
+    var prevElement = (_conditionBuilderCont2 = conditionBuilderContentRef.current) === null || _conditionBuilderCont2 === void 0 ? void 0 : _conditionBuilderCont2.querySelector("[aria-level=\"".concat(currentLevel, "\"][aria-posinset=\"").concat(Number(currentPos) - 1, "\"]"));
+    //checking if next level is a valid condition. If then, focus the close button inside that condition
+    //Otherwise , check the previous item is a valid condition
+
+    if (nextElement !== null && nextElement !== void 0 && nextElement.classList.contains("".concat(DataConfigs.blockClass, "__condition-block"))) {
+      var _nextElement$querySel;
+      nextElement === null || nextElement === void 0 || (_nextElement$querySel = nextElement.querySelector('[data-name="closeCondition"]')) === null || _nextElement$querySel === void 0 || _nextElement$querySel.focus();
+    } else if (prevElement !== null && prevElement !== void 0 && prevElement.classList.contains("".concat(DataConfigs.blockClass, "__condition-block"))) {
+      var _prevElement$querySel;
+      prevElement === null || prevElement === void 0 || (_prevElement$querySel = prevElement.querySelector('[data-name="closeCondition"]')) === null || _prevElement$querySel === void 0 || _prevElement$querySel.focus();
+    }
+    //If there are no valid condition in this group, focus next or previous row
+    else {
+      var _conditionBuilderCont3, _conditionBuilderCont4;
+      var prevRows = (_conditionBuilderCont3 = conditionBuilderContentRef.current) === null || _conditionBuilderCont3 === void 0 ? void 0 : _conditionBuilderCont3.querySelectorAll("[aria-level=\"".concat(Number(currentLevel) - 1, "\"][role=\"row\"]"));
+      var nextRow = (_conditionBuilderCont4 = conditionBuilderContentRef.current) === null || _conditionBuilderCont4 === void 0 ? void 0 : _conditionBuilderCont4.querySelector("[aria-level=\"".concat(Number(currentLevel) + 1, "\"][role=\"row\"]"));
+      if (nextRow) {
+        nextRow === null || nextRow === void 0 || nextRow.focus();
+      } else if ((prevRows === null || prevRows === void 0 ? void 0 : prevRows.length) > 1) {
+        var _prevRows;
+        (_prevRows = prevRows[prevRows.length - 2]) === null || _prevRows === void 0 || _prevRows.focus();
+      }
+    }
+  };
   var addConditionSubGroupHandler = function addConditionSubGroupHandler(conditionIndex) {
     onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
       conditions: [].concat(_rollupPluginBabelHelpers.toConsumableArray(group.conditions.slice(0, conditionIndex + 1)), [{
@@ -162,7 +209,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
         },
         addConditionHandler: addConditionHandler,
         onRemove: function onRemove(e) {
-          onRemoveHandler(eachCondition.id, e);
+          onRemoveHandler(eachCondition.id, e, conditionIndex);
         },
         onConnectorOperatorChange: onConnectorOperatorChange,
         onStatementChange: onStatementChangeHandler,

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

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

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

@@ -13,14 +13,22 @@ var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHel
 var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
 var util = require('./util.js');
 
-var handleKeyDown = function handleKeyDown(evt, conditionBuilderRef) {
+var handleKeyDown = function handleKeyDown(evt, conditionBuilderRef, variant) {
   var activeElement = document.activeElement;
+  if (excludeKeyPress(evt)) {
+    return;
+  }
   if (activeElement.closest("[role=\"dialog\"]")) {
     handleKeyPressForPopover(evt, activeElement.closest("[role=\"dialog\"]"));
   } else {
-    handleKeyPressForMainContent(evt, conditionBuilderRef);
+    handleKeyPressForMainContent(evt, conditionBuilderRef, variant);
   }
 };
+//skipping keyboard handling for date and time fields to get take carbon's
+var excludeKeyPress = function excludeKeyPress(evt) {
+  var _evt$target$closest, _evt$target$closest2;
+  return !['Escape'].includes(evt.key) && (((_evt$target$closest = evt.target.closest(".".concat(DataConfigs.blockClass, "__item-date"))) === null || _evt$target$closest === void 0 ? void 0 : _evt$target$closest.length) || ((_evt$target$closest2 = evt.target.closest(".".concat(DataConfigs.blockClass, "__item-time"))) === null || _evt$target$closest2 === void 0 ? void 0 : _evt$target$closest2.length));
+};
 var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentContainer) {
   var _parentContainer$quer;
   var key = evt.key;
@@ -66,8 +74,8 @@ var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentCont
         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);
+          (_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 || _document$activeEleme2.click();
         }
       }
       break;
@@ -77,8 +85,70 @@ var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentCont
       break;
   }
 };
+var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, conditionBuilderRef, variant) {
+  switch (evt.key) {
+    case 'ArrowRight':
+      evt.preventDefault();
+      if (variant == 'tree') {
+        var _evt$target$closest3;
+        var allCellsInRow = Array.from((_evt$target$closest3 = evt.target.closest('[role="row"]')) === null || _evt$target$closest3 === void 0 ? void 0 : _evt$target$closest3.querySelectorAll('[role="gridcell"] button'));
+        if (evt.target.getAttribute('role') == 'row') {
+          //when current focus is on a row, then we need to enter inside and focus the first cell of that row
+          if (allCellsInRow.length === 1) {
+            handleRowNavigationTree(evt, conditionBuilderRef, variant);
+            //focus next row
+          } else {
+            var _allCellsInRow$;
+            (_allCellsInRow$ = allCellsInRow[0]) === null || _allCellsInRow$ === void 0 || _allCellsInRow$.focus();
+          }
+        } else {
+          //finding the next cell to be focussed
+          //next cell = current cell index + 1
+
+          var currentItemIndex = allCellsInRow.indexOf(evt.target);
+          if (currentItemIndex < allCellsInRow.length - 1) {
+            util.focusThisItem(allCellsInRow[currentItemIndex + 1]);
+          }
+        }
+      } else {
+        handleCellNavigation(evt, conditionBuilderRef);
+      }
+      break;
+    case 'ArrowLeft':
+      evt.preventDefault();
+      if (variant == 'tree') {
+        if (evt.target.getAttribute('role') !== 'row') {
+          var _evt$target$closest4;
+          //when any cell is focussed, arrow left will select the previous cell or current row
+
+          var allItems = Array.from((_evt$target$closest4 = evt.target.closest('[role="row"]')) === null || _evt$target$closest4 === void 0 ? void 0 : _evt$target$closest4.querySelectorAll('[role="gridcell"] button'));
+          var _currentItemIndex = allItems.indexOf(evt.target);
+          if (_currentItemIndex > 0) {
+            util.focusThisItem(allItems[_currentItemIndex - 1]);
+          } else {
+            //focus the row
+            var wrapper = evt.target.closest("[role=\"row\"]");
+            wrapper.focus();
+          }
+        }
+      } else {
+        handleCellNavigation(evt, conditionBuilderRef);
+      }
+      break;
+    case 'ArrowUp':
+    case 'ArrowDown':
+      evt.preventDefault();
+      if (variant == 'tree') {
+        handleRowNavigationTree(evt, conditionBuilderRef, variant);
+      } else {
+        handleRowNavigation(evt, conditionBuilderRef, variant);
+      }
+      break;
+  }
+};
 var getRows = function getRows(conditionBuilderRef) {
-  return Array.from(conditionBuilderRef.current.querySelectorAll('[role="row"]'));
+  var _conditionBuilderRef$;
+  return Array.from((_conditionBuilderRef$ = conditionBuilderRef.current) === null || _conditionBuilderRef$ === void 0 ? void 0 : _conditionBuilderRef$.querySelectorAll('[role="row"]'));
 };
 var getRowIndex = function getRowIndex(element, conditionBuilderRef) {
   var rows = getRows(conditionBuilderRef);
@@ -86,14 +156,39 @@ var getRowIndex = function getRowIndex(element, conditionBuilderRef) {
     return row.contains(element);
   });
 };
-var handleRowNavigation = function handleRowNavigation(evt, conditionBuilderRef) {
+var handleRowNavigation = function handleRowNavigation(evt, conditionBuilderRef, variant) {
   var rows = getRows(conditionBuilderRef);
   var currentRowIndex = getRowIndex(evt.target, conditionBuilderRef);
-  navigateToNextRowCell(evt, currentRowIndex, rows);
+  navigateToNextRowCell(evt, currentRowIndex, rows, variant);
 };
-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
+function handleRowNavigationTree(evt, conditionBuilderRef, variant) {
+  var rows = getRows(conditionBuilderRef);
+  var currentRowIndex = getRowIndex(evt.target, conditionBuilderRef);
+  var nextRowIndex = currentRowIndex;
+  if (evt.target.getAttribute('role') == 'row') {
+    if (['ArrowDown', 'ArrowRight'].includes(evt.key)) {
+      nextRowIndex += 1;
+    } else if (evt.key === 'ArrowUp') {
+      nextRowIndex -= 1;
+    }
+
+    //maintaining selection for first and last rows
+    if (nextRowIndex < 0) {
+      nextRowIndex = 0;
+    } else if (nextRowIndex >= rows.length) {
+      nextRowIndex = rows.length - 1;
+    }
+    if (nextRowIndex !== currentRowIndex) {
+      rows[currentRowIndex].setAttribute('tabindex', '-1');
+      rows[nextRowIndex].setAttribute('tabindex', '0');
+      rows[nextRowIndex].focus();
+    }
+  } else {
+    navigateToNextRowCell(evt, currentRowIndex, rows, variant);
+  }
+}
+var navigateToNextRowCell = function navigateToNextRowCell(evt, currentRowIndex, rows, variant) {
+  //when the current focussed element is a cell of any row, arrow up/down will focus the next row same cell.
 
   var nextRowIndex = currentRowIndex;
   if (evt.key === 'ArrowUp') {
@@ -104,25 +199,22 @@ var navigateToNextRowCell = function navigateToNextRowCell(evt, currentRowIndex,
   }
   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;
+  if (nextRow !== null && nextRow !== void 0 && nextRow.querySelector("[data-name=\"".concat(itemName, "\"]"))) {
+    var _nextRow$querySelecto;
+    nextRow === null || nextRow === void 0 || (_nextRow$querySelecto = nextRow.querySelector("[data-name=\"".concat(itemName, "\"]"))) === null || _nextRow$querySelecto === void 0 || _nextRow$querySelecto.focus();
+  } else if (variant === 'tree') {
+    //when the next row is a if statement , then that row is focused. From any cell of last row of an group , arrow down select the next row (if)
+    nextRow === null || nextRow === void 0 || nextRow.focus();
   }
 };
+var handleCellNavigation = function handleCellNavigation(evt, conditionBuilderRef) {
+  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);
+    }
+  });
+};
 
 exports.handleKeyDown = handleKeyDown;

package/lib/components/EditTearsheet/EditTearsheet.d.ts

@@ -51,7 +51,8 @@ interface EditTearsheetProps extends PropsWithChildren {
      */
     onFormChange?: (formIndex: number) => number;
     /**
-     * Specify a handler for submitting the tearsheet.
+     * Specify a handler for submitting the tearsheet. Throughout its execution
+     * the submit button will be disabled and include a loading indicator.
      */
     onRequestSubmit: () => void;
     /**

package/lib/components/EditTearsheet/EditTearsheet.js

@@ -68,10 +68,45 @@ exports.EditTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$sideNavAriaLabel = _ref.sideNavAriaLabel,
     sideNavAriaLabel = _ref$sideNavAriaLabel === void 0 ? defaults.sideNavAriaLabel : _ref$sideNavAriaLabel,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var _useState = React.useState(false),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    isSubmitting = _useState2[0],
+    setIsSubmitting = _useState2[1];
+  var handleOnRequestSubmit = /*#__PURE__*/function () {
+    var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee() {
+      return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setIsSubmitting(true);
+            _context.prev = 1;
+            _context.next = 4;
+            return onRequestSubmit();
+          case 4:
+            _context.next = 9;
+            break;
+          case 6:
+            _context.prev = 6;
+            _context.t0 = _context["catch"](1);
+            console.warn("".concat(componentName, " submit error: ").concat(_context.t0));
+          case 9:
+            setIsSubmitting(false);
+          case 10:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[1, 6]]);
+    }));
+    return function handleOnRequestSubmit() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
   var actions = [{
     key: 'edit-action-button-submit',
     label: submitButtonText,
-    onClick: onRequestSubmit,
+    onClick: function onClick() {
+      return handleOnRequestSubmit();
+    },
+    loading: isSubmitting,
     kind: 'primary'
   }, {
     key: 'edit-action-button-cancel',
@@ -79,14 +114,14 @@ exports.EditTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onClick: onClose,
     kind: 'ghost'
   }];
-  var _useState = React.useState(0),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    currentForm = _useState2[0],
-    setCurrentForm = _useState2[1];
-  var _useState3 = React.useState([]),
+  var _useState3 = React.useState(0),
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    formTitles = _useState4[0],
-    setFormTitles = _useState4[1];
+    currentForm = _useState4[0],
+    setCurrentForm = _useState4[1];
+  var _useState5 = React.useState([]),
+    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+    formTitles = _useState6[0],
+    setFormTitles = _useState6[1];
   var contentRef = React.useRef(null);
   var handleCurrentForm = function handleCurrentForm(formIndex) {
     setCurrentForm(formIndex);

package/lib/components/SearchBar/SearchBar.d.ts

@@ -17,7 +17,7 @@ interface SearchBarProps extends PropsWithChildren {
      */
     hideScopesLabel?: boolean;
     /** @type {string} The label text for the search text input. */
-    labelText?: string;
+    labelText: string;
     /** @type {Function} Function handler for when the user changes their query search. */
     onChange?: (event: any) => void;
     /** @type {Function} Function handler for when the user submits a search. */

package/lib/components/SearchBar/SearchBar.js

@@ -144,7 +144,7 @@ exports.SearchBar = /*#__PURE__*/React__default["default"].forwardRef(function (
   })) : null, /*#__PURE__*/React__default["default"].createElement(react.Search, {
     className: "".concat(blockClass, "__input"),
     closeButtonLabelText: clearButtonLabelText,
-    labelText: labelText || '',
+    labelText: labelText,
     name: "search-input",
     onChange: handleInputChange,
     placeholder: placeholderText,
@@ -197,7 +197,7 @@ exports.SearchBar.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    */
   hideScopesLabel: index["default"].bool,
   /** @type {string} The label text for the search text input. */
-  labelText: index["default"].string,
+  labelText: index["default"].string.isRequired,
   /** @type {Function} Function handler for when the user changes their query search. */
   onChange: index["default"].func,
   /** @type {Function} Function handler for when the user submits a search. */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.43.2-canary.63+34c8712c7",
+  "version": "2.43.2-canary.66+2df7a1428",
   "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.39.1-canary.73+34c8712c7",
+    "@carbon/ibm-products-styles": "^2.39.1-canary.76+2df7a1428",
     "@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": "34c8712c78f96f4a564947c87db829202aae6073"
+  "gitHead": "2df7a14288468af06ff51086047d3531832e4427"
 }

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

@@ -49,7 +49,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 }
 .#{$block-class}__condition-block {
   display: flex;
-  width: max-content;
+  width: fit-content;
   flex-direction: row;
 }
 .#{$block-class}__content-container {

package/scss/components/ConditionBuilder/styles/_conditionBuilderItem.scss

@@ -216,7 +216,7 @@ $colors: (
     > :nth-child(2)
     .#{$block-class}__button:not(
       .#{$block-class}__add-button,
-      .#{$block-class}__add_condition_group
+      .#{$block-class}__add-condition-sub-group
     ) {
     /* stylelint-disable-next-line carbon/theme-token-use */
     box-shadow: inset 0 #{$spacing-01} 0 0 var(--#{$block-class}__condition-wrapper-color);
@@ -234,7 +234,7 @@ $colors: (
   align-self: center;
   margin-left: auto;
 }
-.#{$block-class}__add_condition_group-wrapper {
+.#{$block-class}__add-condition-sub-group-wrapper {
   z-index: -1;
   width: 0;
   margin-left: -50%;
@@ -243,7 +243,7 @@ $colors: (
   // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
   transition: all linear $duration-fast-02;
 }
-.#{$block-class}__add_condition_group-wrapper--show {
+.#{$block-class}__add-condition-sub-group-wrapper--show {
   z-index: 0;
   width: auto;
   margin-left: 0;
@@ -254,5 +254,7 @@ $colors: (
 }
 .#{$block-class}__invalid-input {
   display: flex;
+}
+.#{$block-class}__invalid-input > svg {
   color: $support-warning;
 }