@carbon/ibm-products 2.43.2-canary.11 → 2.43.2-canary.112

package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/{ConditionBuilderItemOption.js → ItemOptionForValueField.js}

@@ -16,33 +16,61 @@ var icons = require('@carbon/react/icons');
 var index = require('../../../../node_modules/prop-types/index.js');
 var ConditionBuilderProvider = require('../../ConditionBuilderContext/ConditionBuilderProvider.js');
 var DataConfigs = require('../../ConditionBuilderContext/DataConfigs.js');
+var useTranslations = require('../../utils/useTranslations.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _CheckboxCheckedFille, _Checkbox, _SelectSkeleton;
-var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
+var _SelectSkeleton, _CheckboxCheckedFille, _Checkbox;
+var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
   var _ref$conditionState = _ref.conditionState,
     conditionState = _ref$conditionState === void 0 ? {} : _ref$conditionState,
     _ref$config = _ref.config,
     config = _ref$config === void 0 ? {} : _ref$config,
     onChange = _ref.onChange;
-  var multiSelectable = conditionState.operator === 'one-of';
+  var multiSelectable = conditionState.operator === 'oneOf';
   var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
     popOverSearchThreshold = _useContext.popOverSearchThreshold,
-    getOptions = _useContext.getOptions;
+    getOptions = _useContext.getOptions,
+    rootState = _useContext.rootState;
+  var _useTranslations = useTranslations.useTranslations(['propertyText', 'clearSearchText']),
+    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 2),
+    propertyText = _useTranslations2[0],
+    clearSearchText = _useTranslations2[1];
+  var contentRef = React.useRef();
   var _useState = React.useState(config.options),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     allOptions = _useState2[0],
     setAllOptions = _useState2[1];
-  var _useState3 = React.useState(config.options),
+  var _useState3 = React.useState(''),
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    filteredItems = _useState4[0],
-    setFilteredItems = _useState4[1];
+    searchValue = _useState4[0],
+    setSearchValue = _useState4[1];
+  var filteredItems = allOptions === null || allOptions === void 0 ? void 0 : allOptions.filter(function (opt) {
+    return opt.label.toLowerCase().includes(searchValue.toLowerCase());
+  });
   var selection = Array.isArray(conditionState.value) ? conditionState.value : conditionState.value !== undefined ? [conditionState.value] : [];
-  var contentRef = React.useRef();
   React.useEffect(function () {
+    // if(rest['data-name'] == 'valueField'){
+    //   const fetchData = async () => {
+    //     const response = await config.options(conditionState);
+    //     if (
+    //       response?.length > 0 &&
+    //       Object.keys(response[0]).includes('label') &&
+    //       Object.keys(response[0]).includes('id')
+    //     ) {
+    //       setAllOptions(response);
+    //       setFilteredItems(response);
+    //     }
+    //   };
+
+    //   fetchData(); // Call the async method
+    // }else{
+    //   setAllOptions(config.options);
+    //       setFilteredItems(config.options);
+    // }
+
     if (!allOptions && getOptions) {
       var fetchData = /*#__PURE__*/function () {
         var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee() {
@@ -51,12 +79,11 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
                 _context.next = 2;
-                return getOptions(conditionState);
+                return getOptions(rootState, conditionState);
               case 2:
                 response = _context.sent;
                 if ((response === null || response === void 0 ? void 0 : response.length) > 0 && Object.keys(response[0]).includes('label') && Object.keys(response[0]).includes('id')) {
                   setAllOptions(response);
-                  setFilteredItems(response);
                 }
               case 4:
               case "end":
@@ -76,51 +103,55 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
     //this will focus the first input field in the popover
 
     if (contentRef.current) {
-      var _contentRef$current;
-      var firstFocusableElement = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.querySelector('input, button,li');
-      firstFocusableElement === null || firstFocusableElement === void 0 || firstFocusableElement.focus();
+      var firstFocusableElement = contentRef.current.querySelector('input, button,li');
+      if (firstFocusableElement) {
+        firstFocusableElement.focus();
+      }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [allOptions]);
   var handleSelectAll = function handleSelectAll(evt) {
     if (evt.currentTarget.dataset.selectedAll == 'false') {
       onChange(undefined);
     } else {
-      onChange(allOptions.map(function (op) {
-        return op.id;
-      }));
+      onChange(allOptions);
     }
   };
   var onSearchChangeHandler = function onSearchChangeHandler(evt) {
     var value = evt.target.value;
-    var _filteredItems = allOptions.filter(function (opt) {
-      return opt.label.toLowerCase().includes(value.toLowerCase());
-    });
-    setFilteredItems(_filteredItems);
+    setSearchValue(value);
   };
   var onClickHandler = function onClickHandler(evt, option, isSelected) {
+    var updatedSelections = selection.filter(function (item) {
+      return item !== 'INVALID';
+    });
     if (multiSelectable) {
       if (isSelected) {
-        var items = selection.filter(function (v) {
-          return v !== option.id;
+        var items = updatedSelections.filter(function (v) {
+          return v.id !== option.id;
         });
-        onChange(items.length > 0 ? items : undefined, evt);
+        onChange(items.length > 0 ? items : undefined);
       } else {
-        onChange([].concat(_rollupPluginBabelHelpers.toConsumableArray(selection), [option.id]), evt);
+        onChange([].concat(_rollupPluginBabelHelpers.toConsumableArray(updatedSelections), [option]));
       }
     } else {
-      onChange(option.id, evt);
+      onChange(option, evt);
     }
   };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, allOptions && /*#__PURE__*/React__default["default"].createElement("div", {
+  var getAriaLabel = function getAriaLabel() {
+    return conditionState.label ? conditionState.label : conditionState.property ? conditionState.property : propertyText;
+  };
+  if (!allOptions) {
+    return _SelectSkeleton || (_SelectSkeleton = /*#__PURE__*/React__default["default"].createElement(react.SelectSkeleton, null));
+  }
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(DataConfigs.blockClass, "__item-option"),
     ref: contentRef
-  }, (config.includeSearch || allOptions.length > popOverSearchThreshold) && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, allOptions.length > popOverSearchThreshold && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(DataConfigs.blockClass, "__item-option__search")
   }, /*#__PURE__*/React__default["default"].createElement(react.Search, {
     size: "sm",
-    labelText: DataConfigs.translateWithId('clear_search'),
-    closeButtonLabelText: DataConfigs.translateWithId('clear_search'),
+    labelText: clearSearchText,
+    closeButtonLabelText: clearSearchText,
     onChange: onSearchChangeHandler
   })), multiSelectable && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(DataConfigs.blockClass, "__multiselectSelectionStatusContainer")
@@ -131,11 +162,13 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
     onClick: handleSelectAll,
     className: "".concat(DataConfigs.blockClass, "__selectAll-button")
   }, selection.length == 0 ? 'Select all' : 'Deselect all')), /*#__PURE__*/React__default["default"].createElement("ul", {
-    "aria-label": conditionState.label ? conditionState.label : conditionState.property ? conditionState.property : DataConfigs.translateWithId('property'),
+    "aria-label": getAriaLabel(),
     role: "listbox",
     "data-multi-select": multiSelectable
   }, filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.map(function (option) {
-    var isSelected = selection.includes(option.id);
+    var isSelected = selection.map(function (option) {
+      return option.id;
+    }).includes(option.id);
     var Icon = option.icon;
     return /*#__PURE__*/React__default["default"].createElement("li", {
       tabIndex: 0,
@@ -162,9 +195,9 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
     }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, null), option.label), isSelected && /*#__PURE__*/React__default["default"].createElement(icons.Checkmark, {
       className: "".concat(DataConfigs.blockClass, "__checkmark")
     }))));
-  }))), !allOptions && (_SelectSkeleton || (_SelectSkeleton = /*#__PURE__*/React__default["default"].createElement(react.SelectSkeleton, null))));
+  })));
 };
-ConditionBuilderItemOption.propTypes = {
+ItemOptionForValueField.propTypes = {
   /**
    * current condition object
    */
@@ -179,4 +212,4 @@ ConditionBuilderItemOption.propTypes = {
   onChange: index["default"].func
 };
 
-exports.ConditionBuilderItemOption = ConditionBuilderItemOption;
+exports.ItemOptionForValueField = ItemOptionForValueField;

package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.d.ts

@@ -1,11 +1,15 @@
-export function ConditionBuilderItemText({ conditionState, onChange }: {
+export function ConditionBuilderItemText({ conditionState, onChange, config, type, }: {
     conditionState: any;
     onChange: any;
+    config: any;
+    type: any;
 }): import("react/jsx-runtime").JSX.Element;
 export namespace ConditionBuilderItemText {
     namespace propTypes {
         let conditionState: PropTypes.Requireable<object>;
+        let config: PropTypes.Requireable<object>;
         let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let type: PropTypes.Requireable<string>;
     }
 }
 import PropTypes from 'prop-types';

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

@@ -9,40 +9,53 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var react = require('@carbon/react');
 var index = require('../../../../node_modules/prop-types/index.js');
 var DataConfigs = require('../../ConditionBuilderContext/DataConfigs.js');
+var util = require('../../utils/util.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var ConditionBuilderItemText = function ConditionBuilderItemText(_ref) {
-  var _conditionState$value, _conditionState$prope;
+  var _conditionState$prope;
   var conditionState = _ref.conditionState,
-    _onChange = _ref.onChange;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__item-text")
-  }, /*#__PURE__*/React__default["default"].createElement(react.TextInput, {
+    _onChange = _ref.onChange,
+    config = _ref.config,
+    type = _ref.type;
+  var inputProps = _rollupPluginBabelHelpers.objectSpread2({
     labelText: conditionState.property,
     hideLabel: true,
-    value: (_conditionState$value = conditionState.value) !== null && _conditionState$value !== void 0 ? _conditionState$value : '',
+    value: util.checkIsValid(conditionState.value) ? conditionState.value : '',
     id: (_conditionState$prope = conditionState.property) === null || _conditionState$prope === void 0 ? void 0 : _conditionState$prope.replace(/\s/g, ''),
     onChange: function onChange(evt) {
       _onChange(evt.target.value);
     }
-  }));
+  }, config);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(DataConfigs.blockClass, "__item-text")
+  }, type == 'textarea' ? /*#__PURE__*/React__default["default"].createElement(react.TextArea, inputProps) : /*#__PURE__*/React__default["default"].createElement(react.TextInput, inputProps));
 };
 ConditionBuilderItemText.propTypes = {
   /**
    * current condition object
    */
   conditionState: index["default"].object,
+  /**
+   * config of the current property
+   */
+  config: index["default"].object,
   /**
    * callback to update state oin date change
    */
-  onChange: index["default"].func
+  onChange: index["default"].func,
+  /**
+   * current input type
+   */
+  type: index["default"].string
 };
 
 exports.ConditionBuilderItemText = ConditionBuilderItemText;

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

@@ -66,7 +66,7 @@ var ConditionBuilderItemTime = function ConditionBuilderItemTime(_ref) {
     value: "PM",
     text: "PM"
   }))), /*#__PURE__*/React__default["default"].createElement(react.TimePickerSelect, {
-    id: "time-picker-select-2",
+    id: "time-picker-time-zone",
     onChange: setTimeZone
   }, config === null || config === void 0 || (_config$timeZones2 = config.timeZones) === null || _config$timeZones2 === void 0 ? void 0 : _config$timeZones2.map(function (timeZone, index) {
     return /*#__PURE__*/React__default["default"].createElement(react.SelectItem, {

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

@@ -5,19 +5,17 @@ export default ConditionGroupBuilder;
  * All the inner components of group are called from here.
  * @returns
  */
-declare function ConditionGroupBuilder({ group, aria, onRemove, onChange, conditionBuilderRef, className, }: {
+declare function ConditionGroupBuilder({ group, aria, onRemove, onChange, className, }: {
     group: any;
     aria: any;
     onRemove: any;
     onChange: any;
-    conditionBuilderRef: any;
     className: any;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace ConditionGroupBuilder {
     namespace propTypes {
         let aria: PropTypes.Requireable<object>;
         let className: PropTypes.Requireable<string>;
-        let conditionBuilderRef: PropTypes.Requireable<object>;
         let group: PropTypes.Requireable<object>;
         let onChange: PropTypes.Requireable<(...args: any[]) => any>;
         let onRemove: PropTypes.Requireable<(...args: any[]) => any>;

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

@@ -16,20 +16,19 @@ var index = require('../../../node_modules/prop-types/index.js');
 var cx = require('classnames');
 var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
 var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
-var ConditionBuilderItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js');
 var util = require('../utils/util.js');
 var ConditionConnector = require('../ConditionBuilderConnector/ConditionConnector.js');
 var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuilderProvider.js');
 var uuidv4 = require('../../../global/js/utils/uuidv4.js');
 var ConditionPreview = require('../ConditionPreview/ConditionPreview.js');
+var ItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js');
+var useTranslations = require('../utils/useTranslations.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _ConditionPreview, _ConditionPreview2;
-
 /**
  *
  *  state - this is the current group that is being rendered . This can be a inner group or outer group
@@ -38,14 +37,20 @@ var _ConditionPreview, _ConditionPreview2;
  */
 
 var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
+  var _ConditionPreview, _ConditionPreview2;
   var group = _ref.group,
     aria = _ref.aria,
     onRemove = _ref.onRemove,
     onChange = _ref.onChange,
-    conditionBuilderRef = _ref.conditionBuilderRef,
     className = _ref.className;
+  var _useTranslations = useTranslations.useTranslations(['conditionBuilderGroupText', 'conditionText', 'conditionBuilderText']),
+    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 3),
+    conditionBuilderGroupText = _useTranslations2[0],
+    conditionText = _useTranslations2[1],
+    conditionBuilderText = _useTranslations2[2];
   var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
-    variant = _useContext.variant;
+    variant = _useContext.variant,
+    conditionBuilderRef = _useContext.conditionBuilderRef;
   var _useState = React.useState(-1),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     showConditionPreview = _useState2[0],
@@ -54,14 +59,52 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
     showConditionSubGroupPreview = _useState4[0],
     setShowConditionSubGroupPreview = _useState4[1];
-  var onRemoveHandler = function onRemoveHandler(conditionId, evt) {
+  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) {
-      onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
-        conditions: group.conditions.filter(function (condition) {
-          return conditionId !== condition.id;
-        })
-      }));
-      handleFocusOnClose(evt);
+      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
+
+        //spreading out the condition inside the subgroup
+        var allConditions = group.conditions.reduce(function (acc, item) {
+          if (item.conditions) {
+            return acc.concat(item.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],
+        // });
+      } else {
+        onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
+          conditions: group.conditions.filter(function (condition) {
+            return conditionId !== condition.id;
+          })
+        }));
+      }
     } else {
       onRemove(evt);
     }
@@ -84,17 +127,60 @@ 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) {
-    var _e$currentTarget;
-    var previousClose = (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 || (_e$currentTarget = _e$currentTarget.closest('[role="row"]')) === null || _e$currentTarget === void 0 || (_e$currentTarget = _e$currentTarget.previousSibling) === null || _e$currentTarget === void 0 ? void 0 : _e$currentTarget.querySelector('[data-name="closeCondition"]');
-    if (previousClose) {
-      previousClose.focus();
+  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) {
+      util.manageTabIndexAndFocus(currentGroupCloseButtons[conditionIndex - 1], conditionBuilderRef);
+    } else {
+      util.manageTabIndexAndFocus(currentGroupCloseButtons[conditionIndex + 1], conditionBuilderRef);
+    }
+  };
+  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"))) {
+      util.manageTabIndexAndFocus(nextElement === null || nextElement === void 0 ? void 0 : nextElement.querySelector('[data-name="closeCondition"]'), conditionBuilderRef);
+    } else if (prevElement !== null && prevElement !== void 0 && prevElement.classList.contains("".concat(DataConfigs.blockClass, "__condition-block"))) {
+      util.manageTabIndexAndFocus(prevElement === null || prevElement === void 0 ? void 0 : prevElement.querySelector('[data-name="closeCondition"]'), conditionBuilderRef);
+    }
+    //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) {
+        //since there are no condition in current group, this group will move one level up
+
+        var rowIdentity = {
+          ariaLevel: Number(nextRow.ariaLevel) - 1,
+          ariaPosInSet: nextRow.ariaPosInSet
+        };
+        setTimeout(function () {
+          var currentRowToFocus = conditionBuilderContentRef.current.querySelector("[role=\"row\"][aria-level=\"".concat(rowIdentity.ariaLevel, "\"][aria-posinset=\"").concat(rowIdentity.ariaPosInSet, "\"]"));
+          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) {
+        var _prevRows;
+        util.manageTabIndexAndFocus((_prevRows = prevRows[prevRows.length - 2]) === null || _prevRows === void 0 ? void 0 : _prevRows.querySelector('[data-name="closeCondition"]'), conditionBuilderRef);
+      }
     }
   };
   var addConditionSubGroupHandler = function addConditionSubGroupHandler(conditionIndex) {
     onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
       conditions: [].concat(_rollupPluginBabelHelpers.toConsumableArray(group.conditions.slice(0, conditionIndex + 1)), [{
-        groupSeparateOperator: null,
         groupOperator: 'and',
         statement: 'if',
         conditions: [{
@@ -124,7 +210,12 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     setShowConditionPreview(-1);
   };
   var onStatementChangeHandler = function onStatementChangeHandler(updatedStatement) {
+    var _statementConfig$find;
+    var groupOperator = (_statementConfig$find = DataConfigs.statementConfig.find(function (statement) {
+      return statement.id == updatedStatement;
+    })) === null || _statementConfig$find === void 0 ? void 0 : _statementConfig$find.connector;
     onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
+      groupOperator: groupOperator,
       statement: updatedStatement
     }));
   };
@@ -140,7 +231,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "".concat(DataConfigs.blockClass, "__condition-wrapper"),
       role: "grid",
-      "aria-label": DataConfigs.translateWithId('condition_builder_group')
+      "aria-label": conditionBuilderText
     }, group === null || group === void 0 || (_group$conditions = group.conditions) === null || _group$conditions === void 0 ? void 0 : _group$conditions.map(function (eachCondition, conditionIndex) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         key: eachCondition.id,
@@ -161,7 +252,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,
@@ -174,7 +265,8 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "".concat(className, " ").concat(DataConfigs.blockClass, "__condition-wrapper"),
       role: aria.level === 1 ? 'rowgroup' : undefined,
-      "aria-label": aria.level == 1 ? DataConfigs.translateWithId('condition_builder_group') : undefined
+      "aria-label": aria.level == 1 ? conditionBuilderGroupText : undefined,
+      ref: conditionBuilderContentRef
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       tabIndex: 0,
       role: "row",
@@ -183,17 +275,17 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       "aria-setsize": aria.setsize
     }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
       label: group.statement,
-      title: DataConfigs.translateWithId('condition'),
+      title: conditionText,
       "data-name": "connectorField",
       popOverClassName: "".concat(DataConfigs.blockClass, "__gap"),
       className: "".concat(DataConfigs.blockClass, "__statement-button")
-    }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
+    }, /*#__PURE__*/React__default["default"].createElement(ItemOption.ItemOption, {
       conditionState: {
         value: group.statement,
-        label: DataConfigs.translateWithId('condition')
+        label: conditionText
       },
       onChange: function onChange(v, evt) {
-        util.focusThisField(evt);
+        util.focusThisField(evt, conditionBuilderRef);
         onStatementChangeHandler(v);
       },
       config: {
@@ -203,9 +295,9 @@ 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, "__groupConnector"),
+        className: "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-bottom ").concat(DataConfigs.blockClass, "__groupConnector"),
         operator: group.groupOperator,
         "aria-hidden": true
       }), /*#__PURE__*/React__default["default"].createElement(ConditionGroupBuilder, {
@@ -221,9 +313,8 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
         },
         onRemove: function onRemove(e) {
           onRemoveHandler(eachCondition.id, e);
-        },
-        conditionBuilderRef: conditionBuilderRef
-      })) : /*#__PURE__*/React__default["default"].createElement(ConditionBlock["default"], {
+        }
+      })) : /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(ConditionBlock["default"], {
         conjunction: conditionIndex > 0 ? group.groupOperator : undefined,
         aria: {
           level: aria.level + 1,
@@ -252,11 +343,14 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
           _showConditionPreviewHandler(conditionIndex);
         },
         hideConditionPreviewHandler: hideConditionPreviewHandler,
-        isLastCondition: isLastCondition
-      }), conditionIndex == showConditionSubGroupPreview && (_ConditionPreview || (_ConditionPreview = /*#__PURE__*/React__default["default"].createElement(ConditionPreview["default"], {
-        previewType: "subGroup"
+        isLastCondition: isLastCondition,
+        setShowDeletionPreviewForSubgroups: setShowDeletionPreviewForSubgroups
+      })), conditionIndex == showConditionSubGroupPreview && (_ConditionPreview || (_ConditionPreview = /*#__PURE__*/React__default["default"].createElement(ConditionPreview["default"], {
+        previewType: "subGroup",
+        group: group
       }))), conditionIndex == showConditionPreview && (_ConditionPreview2 || (_ConditionPreview2 = /*#__PURE__*/React__default["default"].createElement(ConditionPreview["default"], {
-        previewType: "condition"
+        previewType: "condition",
+        group: group
       }))));
     }));
   };
@@ -275,11 +369,6 @@ ConditionGroupBuilder.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: index["default"].string,
-  /**
-  className: PropTypes.string,
-   * ref of condition builder
-   */
-  conditionBuilderRef: index["default"].object,
   group: index["default"].object,
   /**
    * callback to update the current condition of the state tree

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

@@ -1,9 +1,13 @@
 export default ConditionPreview;
-declare function ConditionPreview({ previewType }: {
+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>;
     }
 }