@carbon/ibm-products 2.44.0 → 2.45.0-rc.1

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

@@ -16,12 +16,13 @@ var index = require('../../../node_modules/prop-types/index.js');
 var icons = require('@carbon/react/icons');
 var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
 var ConditionBuilderButton = require('../ConditionBuilderButton/ConditionBuilderButton.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 _excluded = ["children", "className", "label", "renderIcon", "title", "type", "showToolTip", "condition", "popOverClassName", "config"];
+var _excluded = ["children", "className", "label", "renderIcon", "title", "type", "showToolTip", "condition", "popOverClassName", "config", "renderChildren"];
 var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -33,23 +34,36 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
     condition = _ref.condition,
     popOverClassName = _ref.popOverClassName,
     config = _ref.config,
+    renderChildren = _ref.renderChildren,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var contentRef = React.useRef(null);
+  var popoverRef = React.useRef(null);
   var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
+  var _useTranslations = useTranslations.useTranslations(['invalidText', 'addConditionText', label, 'invalidDateText']),
+    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 4),
+    invalidText = _useTranslations2[0],
+    addConditionText = _useTranslations2[1],
+    labelText = _useTranslations2[2],
+    invalidDateText = _useTranslations2[3];
   var getPropertyDetails = function getPropertyDetails() {
     if (label === 'INVALID') {
       return {
-        propertyLabel: DataConfigs.translateWithId('invalid_text'),
+        propertyLabel: invalidText,
+        isInvalid: true
+      };
+    } else if (label === 'INVALID_DATE') {
+      return {
+        propertyLabel: invalidDateText,
         isInvalid: true
       };
     }
-    var propertyId = rest['data-name'] == 'valueField' && type ? DataConfigs.valueRenderers[type](label, config) : label;
+    var propertyId = rest['data-name'] == 'valueField' && type ? DataConfigs.valueRenderers[type](label, config) : labelText;
     return {
       isInvalid: false,
-      propertyLabel: DataConfigs.translateWithId(propertyId)
+      propertyLabel: propertyId
     };
   };
   var _getPropertyDetails = getPropertyDetails(),
@@ -65,60 +79,68 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
       //if any condition is changed, state prop is triggered
       if (condition.popoverToOpen && currentField !== condition.popoverToOpen) {
         // close the previous popover
-        setOpen(false);
-      } else if (currentField == 'valueField' && type == 'option' && condition.operator !== 'one_of') {
+        closePopover();
+      } else if (currentField == 'valueField' && type == 'option' && condition.operator !== 'oneOf') {
         //close the current popover if the field is valueField and  is a single select dropdown. For all other inputs ,popover need to be open on value changes.
-        setOpen(false);
+        closePopover();
       }
       if (condition.popoverToOpen == currentField) {
         //current popover need to be opened
-        setOpen(true);
+        openPopOver();
       }
     } else {
       // when we change any statement(if/ excl.if) which is not part of condition state, label change is triggered.
       //close popOver when statement is changed.
-      setOpen(false);
+      closePopover();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [condition, label]);
   React.useEffect(function () {
     //this will focus the first input field in the popover
     if (open && contentRef.current) {
-      var firstFocusableElement = contentRef.current.querySelector('input');
+      var firstFocusableElement = contentRef.current.querySelector('input,textarea');
       if (firstFocusableElement) {
         firstFocusableElement.focus();
       }
     }
   }, [contentRef, open]);
+  var closePopover = function closePopover() {
+    return setOpen(false);
+  };
+  var openPopOver = function openPopOver() {
+    return setOpen(true);
+  };
+  var togglePopover = function togglePopover() {
+    return setOpen(!open);
+  };
   return /*#__PURE__*/React__default["default"].createElement(react.Popover, {
     open: open,
     isTabTip: true,
     role: "gridcell",
     className: popOverClassName,
-    onRequestClose: function onRequestClose() {
-      setOpen(false);
-    }
+    ref: popoverRef,
+    onRequestClose: closePopover
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, _rollupPluginBabelHelpers["extends"]({
-    label: propertyLabel !== null && propertyLabel !== void 0 ? propertyLabel : DataConfigs.translateWithId('add_condition'),
+    label: propertyLabel !== null && propertyLabel !== void 0 ? propertyLabel : addConditionText,
     hideLabel: !label ? true : false,
-    onClick: function onClick() {
-      children ? setOpen(!open) : null;
-    },
+    onClick: togglePopover,
     className: className,
     "aria-haspopup": true,
     "aria-expanded": open,
     renderIcon: renderIcon ? renderIcon : label == undefined ? icons.Add : null,
     showToolTip: showToolTip,
-    isInvalid: isInvalid
-  }, rest)), /*#__PURE__*/React__default["default"].createElement(react.PopoverContent, {
+    isInvalid: isInvalid,
+    condition: condition
+  }, rest)), open && /*#__PURE__*/React__default["default"].createElement(react.PopoverContent, {
     className: "".concat(DataConfigs.blockClass, "__item__content"),
     role: "dialog",
-    "aria-label": "".concat(title)
+    "aria-label": title
   }, /*#__PURE__*/React__default["default"].createElement(react.Layer, null, /*#__PURE__*/React__default["default"].createElement("h1", {
     className: "".concat(DataConfigs.blockClass, "__item__title")
   }, title), /*#__PURE__*/React__default["default"].createElement("div", {
-    ref: contentRef
-  }, open && children))));
+    ref: contentRef,
+    className: "".concat(DataConfigs.blockClass, "__popover-content")
+  }, renderChildren ? renderChildren(popoverRef) : children))));
 };
 ConditionBuilderItem.propTypes = {
   /**
@@ -146,6 +168,10 @@ ConditionBuilderItem.propTypes = {
    * class name for popover
    */
   popOverClassName: index["default"].string,
+  /**
+   * callback prop that returns the jsx for children
+   */
+  renderChildren: index["default"].func,
   /**
    * Optional prop to allow overriding the icon rendering.
    */

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

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

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

@@ -9,11 +9,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var react = require('@carbon/react');
 var settings = require('../../../../settings.js');
 var index = require('../../../../node_modules/prop-types/index.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 }; }
 
@@ -22,17 +23,26 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var blockClass = "".concat(settings.pkg.prefix, "--condition-builder");
 var ConditionBuilderItemDate = function ConditionBuilderItemDate(_ref) {
   var conditionState = _ref.conditionState,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    parentRef = _ref.parentRef;
   var DatePickerInputRef = React.useRef();
+  var _useTranslations = useTranslations.useTranslations(['startText', 'endText']),
+    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 2),
+    startText = _useTranslations2[0],
+    endText = _useTranslations2[1];
   var datePickerType = conditionState.operator == 'between' ? 'range' : 'single';
+  var onCloseHandler = function onCloseHandler(selectedDate) {
+    onChange(selectedDate && selectedDate.length > 0 ? selectedDate : 'INVALID_DATE');
+  };
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__item-date ")
   }, datePickerType == 'single' && /*#__PURE__*/React__default["default"].createElement(react.DatePicker, {
     ref: DatePickerInputRef,
     dateFormat: "d/m/Y",
     datePickerType: "single",
-    onClose: onChange,
-    value: conditionState.value
+    value: conditionState.value,
+    onClose: onCloseHandler,
+    appendTo: parentRef === null || parentRef === void 0 ? void 0 : parentRef.current
   }, /*#__PURE__*/React__default["default"].createElement(react.DatePickerInput, {
     id: "datePicker",
     placeholder: "dd/mm/yyyy",
@@ -41,16 +51,17 @@ var ConditionBuilderItemDate = function ConditionBuilderItemDate(_ref) {
     ref: DatePickerInputRef,
     dateFormat: "d/m/Y",
     datePickerType: datePickerType,
-    onClose: onChange,
-    value: conditionState.value
+    onClose: onCloseHandler,
+    value: conditionState.value,
+    appendTo: parentRef === null || parentRef === void 0 ? void 0 : parentRef.current
   }, /*#__PURE__*/React__default["default"].createElement(react.DatePickerInput, {
     id: "datePickerStart",
     placeholder: "dd/mm/yyyy",
-    labelText: DataConfigs.translateWithId('start')
+    labelText: startText
   }), /*#__PURE__*/React__default["default"].createElement(react.DatePickerInput, {
     id: "datePickerEnd",
     placeholder: "dd/mm/yyyy",
-    labelText: DataConfigs.translateWithId('end')
+    labelText: endText
   })));
 };
 ConditionBuilderItemDate.propTypes = {
@@ -61,7 +72,11 @@ ConditionBuilderItemDate.propTypes = {
   /**
    * callback to update state oin date change
    */
-  onChange: index["default"].func
+  onChange: index["default"].func,
+  /**
+   * reference to the popover node
+   */
+  parentRef: index["default"].object
 };
 
 exports.ConditionBuilderItemDate = ConditionBuilderItemDate;

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

@@ -9,10 +9,12 @@
 
 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 useTranslations = require('../../utils/useTranslations.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -23,9 +25,12 @@ var ConditionBuilderItemNumber = function ConditionBuilderItemNumber(_ref) {
   var conditionState = _ref.conditionState,
     config = _ref.config,
     onChange = _ref.onChange;
+  var _useTranslations = useTranslations.useTranslations(['invalidNumberWarnText']),
+    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 1),
+    invalidNumberWarnText = _useTranslations2[0];
   var onChangeHandler = function onChangeHandler(e, _ref2) {
     var value = _ref2.value;
-    if (checkIfValid(value)) {
+    if (!isNaN(value) && checkIfValid(value)) {
       var _config$unit;
       onChange("".concat(value, " ").concat((_config$unit = config.unit) !== null && _config$unit !== void 0 ? _config$unit : ''));
     } else {
@@ -44,18 +49,16 @@ var ConditionBuilderItemNumber = function ConditionBuilderItemNumber(_ref) {
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(DataConfigs.blockClass, "__item-number")
-  }, /*#__PURE__*/React__default["default"].createElement(react.NumberInput, {
+  }, /*#__PURE__*/React__default["default"].createElement(react.NumberInput, _rollupPluginBabelHelpers["extends"]({
     label: conditionState.property,
     hideLabel: true,
-    defaultValue: getDefaultValue(),
     id: (_conditionState$prope = conditionState.property) === null || _conditionState$prope === void 0 ? void 0 : _conditionState$prope.replace(/\s/g, ''),
-    min: config.min,
-    max: config.max,
-    step: config.step,
-    invalidText: DataConfigs.translateWithId('text_invalid_number'),
+    invalidText: invalidNumberWarnText,
     allowEmpty: true,
     onChange: onChangeHandler
-  }));
+  }, config, {
+    defaultValue: getDefaultValue()
+  })));
 };
 ConditionBuilderItemNumber.propTypes = {
   /**

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

@@ -16,6 +16,7 @@ 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 }; }
 
@@ -30,6 +31,10 @@ var ItemOption = function ItemOption(_ref) {
   var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
     popOverSearchThreshold = _useContext.popOverSearchThreshold;
   var contentRef = React.useRef();
+  var _useTranslations = useTranslations.useTranslations(['propertyText', 'clearSearchText']),
+    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 2),
+    propertyText = _useTranslations2[0],
+    clearSearchText = _useTranslations2[1];
   var allOptions = config.options;
   var _useState = React.useState(''),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
@@ -57,7 +62,7 @@ var ItemOption = function ItemOption(_ref) {
     setSearchValue(value);
   };
   var getAriaLabel = function getAriaLabel() {
-    return conditionState.label ? conditionState.label : conditionState.property ? conditionState.property : DataConfigs.translateWithId('property');
+    return conditionState.label ? conditionState.label : conditionState.property ? conditionState.property : propertyText;
   };
   if (!allOptions) {
     return;
@@ -69,8 +74,8 @@ var ItemOption = function ItemOption(_ref) {
     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
   })), /*#__PURE__*/React__default["default"].createElement("ul", {
     "aria-label": getAriaLabel(),

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

@@ -16,6 +16,7 @@ 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 }; }
 
@@ -28,11 +29,15 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
     _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,
     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),
@@ -130,7 +135,7 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
     }
   };
   var getAriaLabel = function getAriaLabel() {
-    return conditionState.label ? conditionState.label : conditionState.property ? conditionState.property : DataConfigs.translateWithId('property');
+    return conditionState.label ? conditionState.label : conditionState.property ? conditionState.property : propertyText;
   };
   if (!allOptions) {
     return _SelectSkeleton || (_SelectSkeleton = /*#__PURE__*/React__default["default"].createElement(react.SelectSkeleton, null));
@@ -142,8 +147,8 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
     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")

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,6 +9,7 @@
 
 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');
@@ -21,10 +22,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ConditionBuilderItemText = function ConditionBuilderItemText(_ref) {
   var _conditionState$value, _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 : '',
@@ -32,17 +33,28 @@ var ConditionBuilderItemText = function ConditionBuilderItemText(_ref) {
     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.js

@@ -22,13 +22,13 @@ var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuil
 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
@@ -37,12 +37,17 @@ 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(['condition_builder_group', 'conditionText']),
+    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 2),
+    conditionBuilderGroupText = _useTranslations2[0],
+    conditionText = _useTranslations2[1];
   var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
     variant = _useContext.variant;
   var _useState = React.useState(-1),
@@ -53,14 +58,15 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
     showConditionSubGroupPreview = _useState4[0],
     setShowConditionSubGroupPreview = _useState4[1];
-  var onRemoveHandler = function onRemoveHandler(conditionId, evt) {
+  var conditionBuilderContentRef = React.useRef();
+  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;
         })
       }));
-      handleFocusOnClose(evt);
     } else {
       onRemove(evt);
     }
@@ -83,11 +89,50 @@ 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) {
+      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) {
@@ -122,7 +167,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
     }));
   };
@@ -138,7 +188,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": conditionBuilderGroupText
     }, 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,
@@ -159,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,
@@ -172,7 +222,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",
@@ -181,14 +232,14 @@ 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(ItemOption.ItemOption, {
       conditionState: {
         value: group.statement,
-        label: DataConfigs.translateWithId('condition')
+        label: conditionText
       },
       onChange: function onChange(v, evt) {
         util.focusThisField(evt);
@@ -252,9 +303,11 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
         hideConditionPreviewHandler: hideConditionPreviewHandler,
         isLastCondition: isLastCondition
       })), conditionIndex == showConditionSubGroupPreview && (_ConditionPreview || (_ConditionPreview = /*#__PURE__*/React__default["default"].createElement(ConditionPreview["default"], {
-        previewType: "subGroup"
+        previewType: "subGroup",
+        group: group
       }))), conditionIndex == showConditionPreview && (_ConditionPreview2 || (_ConditionPreview2 = /*#__PURE__*/React__default["default"].createElement(ConditionPreview["default"], {
-        previewType: "condition"
+        previewType: "condition",
+        group: group
       }))));
     }));
   };