@carbon/ibm-products 2.43.2-canary.3 → 2.43.2-canary.300

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

@@ -9,69 +9,96 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../../node_modules/prop-types/index.js');
-var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
+var cx = require('classnames');
+var index = require('../../../_virtual/index.js');
 var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
 var ConditionConnector = require('../ConditionBuilderConnector/ConditionConnector.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var useTranslations = require('../utils/useTranslations.js');
+var icons = require('@carbon/react/icons');
+var util = require('../utils/util.js');
 
 var ConditionPreview = function ConditionPreview(_ref) {
-  var previewType = _ref.previewType;
+  var _ConditionBuilderItem, _ConditionBuilderItem2, _ConditionBuilderItem3;
+  var previewType = _ref.previewType,
+    group = _ref.group,
+    colorIndex = _ref.colorIndex;
+  var _useState = React.useState(false),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    animate = _useState2[0],
+    setAnimate = _useState2[1];
+  var _useTranslations = useTranslations.useTranslations(['valueText', 'operatorText', 'propertyText', 'ifText']),
+    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 4),
+    propertyText = _useTranslations2[0],
+    operatorText = _useTranslations2[1],
+    valueText = _useTranslations2[2],
+    ifText = _useTranslations2[3];
+  React.useEffect(function () {
+    setAnimate(true);
+  }, []);
   var getConditionSection = function getConditionSection() {
-    return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
-      label: DataConfigs.translateWithId('property')
-    }), /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
-      label: DataConfigs.translateWithId('operator')
-    }), /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
-      label: DataConfigs.translateWithId('value')
-    }));
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(util.blockClass, "__preview-condition")
+    }, _ConditionBuilderItem || (_ConditionBuilderItem = /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
+      label: propertyText,
+      renderIcon: icons.Bee
+    })), _ConditionBuilderItem2 || (_ConditionBuilderItem2 = /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
+      label: operatorText
+    })), _ConditionBuilderItem3 || (_ConditionBuilderItem3 = /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
+      label: valueText
+    })));
   };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, previewType == 'newGroup' && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__group__row ").concat(DataConfigs.blockClass, "__group-preview  ")
-  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
-    className: "".concat(DataConfigs.blockClass, "__statement-button"),
-    label: DataConfigs.translateWithId('and')
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, previewType == 'newGroup' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: cx(["".concat(util.blockClass, "__group__row ").concat(util.blockClass, "__group-preview "), _rollupPluginBabelHelpers.defineProperty({}, "".concat(util.blockClass, "__group-preview-animate"), animate)])
+  }, /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
+    className: "".concat(util.blockClass, "__statement-button"),
+    label: group.groupOperator
+  })), /*#__PURE__*/React.createElement("div", {
+    "data-color-index": colorIndex,
     "aria-hidden": true,
-    className: "".concat(DataConfigs.blockClass, "__group ").concat(DataConfigs.blockClass, "__condition-wrapper ").concat(DataConfigs.blockClass, "__group-preview ").concat(DataConfigs.blockClass, "__group-wrapper")
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__gap")
-  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
-    className: "".concat(DataConfigs.blockClass, "__statement-button"),
-    label: DataConfigs.translateWithId('if')
-  })), getConditionSection())), previewType == 'subGroup' && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__group-preview")
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__condition-block  ").concat(DataConfigs.blockClass, "__gap")
-  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
-    label: DataConfigs.translateWithId('and'),
-    className: "".concat(DataConfigs.blockClass, "__statement-button"),
-    popOverClassName: "".concat(DataConfigs.blockClass, "__gap")
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__group ").concat(DataConfigs.blockClass, "__condition-wrapper")
-  }, /*#__PURE__*/React__default["default"].createElement(ConditionConnector["default"], {
-    className: "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__groupConnector"),
-    operator: DataConfigs.translateWithId('if')
-  }), getConditionSection()))), previewType == 'condition' && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__group-preview")
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__condition-block  ").concat(DataConfigs.blockClass, "__gap")
-  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
-    label: DataConfigs.translateWithId('and'),
-    className: "".concat(DataConfigs.blockClass, "__statement-button"),
-    popOverClassName: "".concat(DataConfigs.blockClass, "__gap")
+    className: cx(["".concat(util.blockClass, "__group ").concat(util.blockClass, "__condition-wrapper ").concat(util.blockClass, "__group-preview ").concat(util.blockClass, "__group-wrapper "), _rollupPluginBabelHelpers.defineProperty({}, "".concat(util.blockClass, "__group-preview-animate"), animate)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(util.blockClass, "__gap")
+  }, /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
+    className: "".concat(util.blockClass, "__statement-button"),
+    label: ifText
+  })), getConditionSection())), previewType == 'subGroup' && /*#__PURE__*/React.createElement("div", {
+    className: cx(["".concat(util.blockClass, "__group__row ").concat(util.blockClass, "__group-preview ").concat(util.blockClass, "__gap-bottom"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(util.blockClass, "__group-preview-animate"), animate)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(util.blockClass, "__condition-block  ").concat(util.blockClass, "__gap")
+  }, /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
+    label: group.groupOperator,
+    className: "".concat(util.blockClass, "__statement-button"),
+    popOverClassName: "".concat(util.blockClass, "__gap")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(util.blockClass, "__group ").concat(util.blockClass, "__condition-wrapper")
+  }, /*#__PURE__*/React.createElement(ConditionConnector.default, {
+    className: "".concat(util.blockClass, "__gap ").concat(util.blockClass, "__groupConnector"),
+    operator: ifText
+  }), getConditionSection()))), previewType == 'condition' && /*#__PURE__*/React.createElement("div", {
+    className: cx(["".concat(util.blockClass, "__group__row ").concat(util.blockClass, "__group-preview ").concat(util.blockClass, "__gap-bottom"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(util.blockClass, "__group-preview-animate"), animate)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(util.blockClass, "__condition-block  ").concat(util.blockClass, "__gap")
+  }, /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
+    label: group.groupOperator,
+    className: "".concat(util.blockClass, "__statement-button"),
+    popOverClassName: "".concat(util.blockClass, "__gap")
   }), getConditionSection())));
 };
-var ConditionPreview$1 = ConditionPreview;
 ConditionPreview.propTypes = {
+  /**
+   * index of the color for next group
+   */
+  colorIndex: index.default.number,
+  /**
+   * current conditional group
+   */
+  group: index.default.object,
   /**
    * type of review to be displayed
    */
-  previewType: index["default"].oneOf(['condition', 'subGroup', 'newGroup'])
+  previewType: index.default.oneOf(['condition', 'subGroup', 'newGroup'])
 };
 
-exports["default"] = ConditionPreview$1;
+exports.default = ConditionPreview;

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

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

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

@@ -7,79 +7,171 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
-var checkForHoldingKey = require('./checkForHoldingKey.js');
 var util = require('./util.js');
 
-var handleKeyDown = function handleKeyDown(evt, conditionBuilderRef) {
+var handleKeyDown = function handleKeyDown(evt, conditionBuilderRef, variant) {
+  var _activeElement$closes;
   var activeElement = document.activeElement;
-  if (activeElement.closest("[role=\"dialog\"]")) {
-    handleKeyPressForPopover(evt, activeElement.closest("[role=\"dialog\"]"));
-  } else {
-    handleKeyPressForMainContent(evt, conditionBuilderRef);
+  if (!((_activeElement$closes = activeElement.closest(".".concat(util.blockClass, "__popover"))) !== null && _activeElement$closes !== void 0 && _activeElement$closes.querySelector('[role="dialog"]'))) {
+    handleKeyPressForMainContent(evt, conditionBuilderRef, variant);
+  }
+};
+var handleKeyDownForPopover = function handleKeyDownForPopover(evt, conditionBuilderRef, popoverRef) {
+  if (excludeKeyPress(evt)) {
+    return;
   }
+  handleKeyPressForPopover(evt, popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current, conditionBuilderRef);
 };
-var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentContainer) {
-  var _parentContainer$quer;
+
+//skipping keyboard handling for date and time fields to get take carbon's
+var excludeKeyPress = function excludeKeyPress(evt) {
+  return !['Escape'].includes(evt.key) && (evt.target.closest(".".concat(util.blockClass, "__item-date")) || evt.target.closest(".".concat(util.blockClass, "__item-time")));
+};
+var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentContainer, conditionBuilderRef) {
+  var _parentContainer$quer, _parentContainer$quer2, _evt$target$closest$q, _evt$target$closest;
   var key = evt.key;
-  var isHoldingShiftKey = checkForHoldingKey.checkForHoldingKey(evt, 'shiftKey');
+  var isHoldingShiftKey = util.checkForHoldingKey(evt, 'shiftKey');
   var isMultiSelect = (_parentContainer$quer = parentContainer.querySelector('ul')) === null || _parentContainer$quer === void 0 ? void 0 : _parentContainer$quer.dataset.multiSelect;
+  var isOptionInput = (_parentContainer$quer2 = parentContainer.querySelectorAll("[role=\"option\"]")) === null || _parentContainer$quer2 === void 0 ? void 0 : _parentContainer$quer2.length;
   var allItems = [];
-  switch (key) {
-    case 'ArrowUp':
-      //traverse through the popover options, search box, selectAll button
-      parentContainer.querySelectorAll("[role=\"option\"]").forEach(function (eachElem, index, allElements) {
-        util.traverseReverse(eachElem, index, allElements);
-      });
-      break;
-    case 'ArrowDown':
-      //traverse through the popover options, search box, selectAll button
-      parentContainer.querySelectorAll("[role=\"option\"]").forEach(function (eachElem, index, allElements) {
-        util.traverseClockVise(eachElem, index, allElements);
-      });
-      break;
-    case 'Tab':
-      allItems = [].concat(_rollupPluginBabelHelpers.toConsumableArray(Array.from(parentContainer.querySelectorAll(".".concat(DataConfigs.blockClass, "__selectAll-button,[role=\"searchbox\"]")))), [parentContainer.querySelector("[role=\"option\"]")]);
-      allItems.forEach(function (eachElem, index, allElements) {
-        if (isHoldingShiftKey) {
-          util.traverseReverse(eachElem, index, allElements, true, true);
+  if (key === 'Escape') {
+    //focus the corresponding field in which the popover is triggered from
+    util.focusThisField(evt, conditionBuilderRef);
+    evt.preventDefault();
+  }
+  if (isOptionInput) {
+    switch (key) {
+      case 'ArrowUp':
+        evt.preventDefault();
+        //traverse through the popover options, search box, selectAll button
+        parentContainer.querySelectorAll("[role=\"option\"]").forEach(function (eachElem, index, allElements) {
+          util.traverseReverse(eachElem, index, allElements, null, null, conditionBuilderRef);
+        });
+        //scroll to top when we reach a the top of the list to make search box visible
+        if (Array.from((_evt$target$closest$q = (_evt$target$closest = evt.target.closest('ul')) === null || _evt$target$closest === void 0 ? void 0 : _evt$target$closest.querySelectorAll('li')) !== null && _evt$target$closest$q !== void 0 ? _evt$target$closest$q : []).indexOf(evt.target) === 1) {
+          parentContainer.querySelector(".".concat(util.blockClass, "__popover-content-wrapper")).scrollTop = 0;
+        }
+        break;
+      case 'ArrowDown':
+        evt.preventDefault();
+        //traverse through the popover options, search box, selectAll button
+        parentContainer.querySelectorAll("[role=\"option\"]").forEach(function (eachElem, index, allElements) {
+          util.traverseClockVise(eachElem, index, allElements, null, null, conditionBuilderRef);
+        });
+        break;
+      case 'Tab':
+        allItems = [].concat(_rollupPluginBabelHelpers.toConsumableArray(Array.from(parentContainer.querySelectorAll(".".concat(util.blockClass, "__selectAll-button,[role=\"searchbox\"]")))), [parentContainer.querySelector("[role=\"option\"]")]);
+        allItems.forEach(function (eachElem, index, allElements) {
+          if (isHoldingShiftKey) {
+            util.traverseReverse(eachElem, index, allElements, true, true, conditionBuilderRef);
+          } else {
+            util.traverseClockVise(eachElem, index, allElements, true, true, conditionBuilderRef);
+          }
+        });
+        evt.preventDefault();
+        break;
+      case ' ':
+        if (isMultiSelect === 'true') {
+          if (document.activeElement.type !== 'button') {
+            var _document$activeEleme;
+            //for button , enter key is click which already handled by framework, for other elements trigger click
+            (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 || _document$activeEleme.click();
+          }
+          evt.preventDefault();
+        }
+        break;
+      case 'Enter':
+        if (isMultiSelect === 'true') {
+          if (document.activeElement.type !== 'button') {
+            var _document$activeEleme2;
+            //for button , enter key is click which already handled by framework, for other elements trigger click
+            evt.preventDefault();
+            (_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 || _document$activeEleme2.click();
+          }
         } else {
-          util.traverseClockVise(eachElem, index, allElements, true, true);
+          if (document.activeElement.type !== 'button') {
+            var _document$activeEleme3;
+            //for button , enter key is click which already handled by framework, else trigger click
+            util.focusThisField(evt, conditionBuilderRef);
+            (_document$activeEleme3 = document.activeElement) === null || _document$activeEleme3 === void 0 || _document$activeEleme3.click();
+          }
         }
-      });
+        break;
+    }
+  }
+};
+var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, conditionBuilderRef, variant) {
+  var _document$activeEleme4;
+  switch (evt.key) {
+    case 'ArrowRight':
       evt.preventDefault();
-      break;
-    case ' ':
-      if (isMultiSelect === 'true') {
-        if (document.activeElement.type !== 'button') {
-          var _document$activeEleme;
-          //for button , enter key is click which already handled by framework, for other elements trigger click
-          (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 || _document$activeEleme.click();
+      if (variant == util.HIERARCHICAL_VARIANT) {
+        var _evt$target$closest2;
+        var allCellsInRow = Array.from((_evt$target$closest2 = evt.target.closest('[role="row"]')) === null || _evt$target$closest2 === void 0 ? void 0 : _evt$target$closest2.querySelectorAll('[role="gridcell"] button'));
+        if (allCellsInRow.length === 1) {
+          evt.target = evt.target.closest('[role="row"]');
+          handleRowNavigationHierarchical(evt, conditionBuilderRef, variant);
+          //focus next row
+        } else 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
+
+          //focus first cell
+          util.manageTabIndexAndFocus(allCellsInRow[0], conditionBuilderRef);
+        } 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], conditionBuilderRef);
+          }
         }
-        evt.preventDefault();
+      } else {
+        handleCellNavigation(evt, conditionBuilderRef);
       }
       break;
-    case 'Enter':
-      if (isMultiSelect !== 'true') {
-        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);
+    case 'ArrowLeft':
+      evt.preventDefault();
+      if (variant == util.HIERARCHICAL_VARIANT) {
+        if (evt.target.getAttribute('role') !== 'row') {
+          var _evt$target$closest3;
+          //when any cell is focussed, arrow left will select the previous cell or current row
+
+          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'));
+          var _currentItemIndex = _allCellsInRow.indexOf(evt.target);
+          if (_currentItemIndex > 0) {
+            util.focusThisItem(_allCellsInRow[_currentItemIndex - 1], conditionBuilderRef);
+          } else {
+            //focus the row
+            var wrapper = evt.target.closest("[role=\"row\"]");
+            util.manageTabIndexAndFocus(wrapper, conditionBuilderRef);
+          }
         }
+      } else {
+        handleCellNavigation(evt, conditionBuilderRef);
       }
       break;
-    case 'Escape':
-      //focus the corresponding field in which the popover is triggered
-      util.focusThisField(evt);
+    case 'ArrowUp':
+    case 'ArrowDown':
+      evt.preventDefault();
+      if (variant == util.HIERARCHICAL_VARIANT) {
+        handleRowNavigationHierarchical(evt, conditionBuilderRef, variant);
+      } else {
+        handleRowNavigation(evt, conditionBuilderRef, variant);
+      }
+      break;
+    case 'Enter':
+      if (((_document$activeEleme4 = document.activeElement) === null || _document$activeEleme4 === void 0 || (_document$activeEleme4 = _document$activeEleme4.querySelectorAll("button")) === null || _document$activeEleme4 === void 0 ? void 0 : _document$activeEleme4.length) === 1) {
+        var _document$activeEleme5;
+        (_document$activeEleme5 = document.activeElement) === null || _document$activeEleme5 === void 0 || (_document$activeEleme5 = _document$activeEleme5.querySelectorAll("button")[0]) === null || _document$activeEleme5 === void 0 || _document$activeEleme5.click();
+      }
       break;
   }
 };
 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);
@@ -87,14 +179,37 @@ 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, conditionBuilderRef);
 };
-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
+var handleRowNavigationHierarchical = function handleRowNavigationHierarchical(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) {
+      util.manageTabIndexAndFocus(rows[nextRowIndex], conditionBuilderRef);
+    }
+  } else {
+    navigateToNextRowCell(evt, currentRowIndex, rows, variant, conditionBuilderRef);
+  }
+};
+var navigateToNextRowCell = function navigateToNextRowCell(evt, currentRowIndex, rows, variant, conditionBuilderRef) {
+  //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') {
@@ -105,25 +220,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, "\"]"))) {
+    util.manageTabIndexAndFocus(nextRow === null || nextRow === void 0 ? void 0 : nextRow.querySelector("[data-name=\"".concat(itemName, "\"]")), conditionBuilderRef);
+  } else if (variant === util.HIERARCHICAL_VARIANT) {
+    //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)
+    util.manageTabIndexAndFocus(nextRow, conditionBuilderRef);
   }
 };
+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, null, null, conditionBuilderRef);
+    } else {
+      util.traverseReverse(eachElem, index, allElements, null, null, conditionBuilderRef);
+    }
+  });
+};
 
 exports.handleKeyDown = handleKeyDown;
+exports.handleKeyDownForPopover = handleKeyDownForPopover;

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

@@ -0,0 +1,18 @@
+export function useDataConfigs(): {
+    statementConfig: {
+        label: string;
+        id: string;
+        connector: string;
+        text1: any;
+        text2: string;
+    }[];
+    connectorConfig: {
+        label: any;
+        id: string;
+    }[];
+    operatorConfig: {
+        label: any;
+        id: string;
+        type: string;
+    }[];
+};

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

@@ -0,0 +1,122 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var useTranslations = require('./useTranslations.js');
+
+var useDataConfigs = function useDataConfigs() {
+  var _useTranslations = useTranslations.useTranslations(['ifAll', 'ifAny', 'unlessAll', 'unlessAny', 'and', 'or', 'is', 'greater', 'greaterEqual', 'lower', 'lowerEqual', 'startsWith', 'endsWith', 'contains', 'oneOf', 'before', 'after', 'between']),
+    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 18),
+    ifAll = _useTranslations2[0],
+    ifAny = _useTranslations2[1],
+    unlessAll = _useTranslations2[2],
+    unlessAny = _useTranslations2[3],
+    and = _useTranslations2[4],
+    or = _useTranslations2[5],
+    is = _useTranslations2[6],
+    greater = _useTranslations2[7],
+    greaterEqual = _useTranslations2[8],
+    lower = _useTranslations2[9],
+    lowerEqual = _useTranslations2[10],
+    startsWith = _useTranslations2[11],
+    endsWith = _useTranslations2[12],
+    contains = _useTranslations2[13],
+    oneOf = _useTranslations2[14],
+    before = _useTranslations2[15],
+    after = _useTranslations2[16],
+    between = _useTranslations2[17];
+  var statementConfig = [{
+    label: 'ifText',
+    id: 'ifAll',
+    connector: 'and',
+    text1: ifAll,
+    text2: '(a && b)'
+  }, {
+    label: 'ifText',
+    id: 'ifAny',
+    connector: 'or',
+    text1: ifAny,
+    text2: '(a || b)'
+  }, {
+    label: 'unlessText',
+    id: 'unlessAll',
+    connector: 'and',
+    text1: unlessAll,
+    text2: '! (a && b)'
+  }, {
+    label: 'unlessText',
+    id: 'unlessAny',
+    connector: 'or',
+    text1: unlessAny,
+    text2: '! (a || b)'
+  }];
+  var connectorConfig = [{
+    label: and,
+    id: 'and'
+  }, {
+    label: or,
+    id: 'or'
+  }];
+  var operatorConfig = [{
+    label: is,
+    id: 'is',
+    type: 'all'
+  }, {
+    label: greater,
+    id: 'greater',
+    type: 'number'
+  }, {
+    label: greaterEqual,
+    id: 'greaterEqual',
+    type: 'number'
+  }, {
+    label: lower,
+    id: 'lower',
+    type: 'number'
+  }, {
+    label: lowerEqual,
+    id: 'lowerEqual',
+    type: 'number'
+  }, {
+    label: startsWith,
+    id: 'startsWith',
+    type: 'text,textarea'
+  }, {
+    label: endsWith,
+    id: 'endsWith',
+    type: 'text,textarea'
+  }, {
+    label: contains,
+    id: 'contains',
+    type: 'text,textarea'
+  }, {
+    label: oneOf,
+    id: 'oneOf',
+    type: 'option'
+  }, {
+    label: before,
+    id: 'before',
+    type: 'date,time'
+  }, {
+    label: after,
+    id: 'after',
+    type: 'date,time'
+  }, {
+    label: between,
+    id: 'between',
+    type: 'date'
+  }];
+  return {
+    statementConfig: statementConfig,
+    connectorConfig: connectorConfig,
+    operatorConfig: operatorConfig
+  };
+};
+
+exports.useDataConfigs = useDataConfigs;

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

@@ -0,0 +1 @@
+export function useTranslations(translationKeys: any, alterTranslationKeyMap: any): any;

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

@@ -0,0 +1,31 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+var React = require('react');
+var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuilderProvider.js');
+var translationObject = require('../ConditionBuilderContext/translationObject.js');
+
+var useTranslations = function useTranslations(translationKeys, alterTranslationKeyMap) {
+  var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
+    translateWithId = _useContext.translateWithId;
+  return translationKeys.map(function (translationKey) {
+    if (alterTranslationKeyMap !== null && alterTranslationKeyMap !== void 0 && alterTranslationKeyMap[translationKey]) {
+      translationKey = alterTranslationKeyMap[translationKey];
+    }
+    if (translateWithId !== null && translateWithId !== void 0 && translateWithId(translationKey)) {
+      return translateWithId(translationKey);
+    } else if (translationObject.translationsObject[translationKey]) {
+      return translationObject.translationsObject[translationKey];
+    } else {
+      return translationKey;
+    }
+  });
+};
+
+exports.useTranslations = useTranslations;