@carbon/ibm-products 2.40.0 → 2.40.1-canary.6

package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js

@@ -67,7 +67,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
     className: "".concat(blockClass, "__content-container"),
     tabIndex: -1
   }, !isConditionBuilderActive && /*#__PURE__*/React__default.createElement(Button, {
-    className: "".concat(blockClass, "__condition-builder"),
+    className: "".concat(blockClass, "__add-condition-button"),
     renderIcon: function renderIcon(props) {
       return /*#__PURE__*/React__default.createElement(Add, _extends({
         size: 16
@@ -79,7 +79,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
     onClick: onStartConditionBuilder
   }, startConditionLabel), rootState && (rootState === null || rootState === void 0 || (_rootState$groups2 = rootState.groups) === null || _rootState$groups2 === void 0 ? void 0 : _rootState$groups2.map(function (eachGroup, groupIndex) {
     return /*#__PURE__*/React__default.createElement(ConditionGroupBuilder, {
-      className: "".concat(blockClass, "__condition-builder__group"),
+      className: "".concat(blockClass, "__group"),
       key: groupIndex,
       aria: {
         level: 1,

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js

@@ -69,7 +69,7 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
   useEffect(function () {
     //this will focus the first input field in the popover
     if (open && contentRef.current) {
-      var firstFocusableElement = contentRef.current.querySelector('input, button,li');
+      var firstFocusableElement = contentRef.current.querySelector('input');
       if (firstFocusableElement) {
         firstFocusableElement.focus();
       }
@@ -95,11 +95,11 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
     renderIcon: renderIcon ? renderIcon : label == undefined ? Add : null,
     showToolTip: showToolTip
   }, rest)), /*#__PURE__*/React__default.createElement(PopoverContent, {
-    className: "".concat(blockClass, "__condition-builder-item__content"),
+    className: "".concat(blockClass, "__item__content"),
     role: "dialog",
     "aria-label": "".concat(title)
   }, /*#__PURE__*/React__default.createElement(Layer, null, /*#__PURE__*/React__default.createElement("h1", {
-    className: "".concat(blockClass, "__condition-builder-item__title")
+    className: "".concat(blockClass, "__item__title")
   }, title), /*#__PURE__*/React__default.createElement("div", {
     ref: contentRef
   }, open && children))));

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

@@ -18,7 +18,7 @@ var ConditionBuilderItemDate = function ConditionBuilderItemDate(_ref) {
   var DatePickerInputRef = useRef();
   var datePickerType = conditionState.operator == 'between' ? 'range' : 'single';
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__condition-builder-item-date ")
+    className: "".concat(blockClass, "__item-date ")
   }, datePickerType == 'single' && /*#__PURE__*/React__default.createElement(DatePicker, {
     ref: DatePickerInputRef,
     dateFormat: "d/m/Y",

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

@@ -21,7 +21,7 @@ var ConditionBuilderItemNumber = function ConditionBuilderItemNumber(_ref) {
     onChange(value + '');
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__condition-builder-item-number")
+    className: "".concat(blockClass, "__item-number")
   }, /*#__PURE__*/React__default.createElement(NumberInput, {
     label: conditionState.property,
     hideLabel: true,

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js

@@ -6,7 +6,7 @@
  */
 
 import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useContext, useState, useEffect } from 'react';
+import React__default, { useContext, useState, useRef, useEffect } from 'react';
 import { Search, Button, SelectSkeleton } from '@carbon/react';
 import { CheckboxCheckedFilled, Checkbox, Checkmark } from '@carbon/react/icons';
 import PropTypes from '../../../../node_modules/prop-types/index.js';
@@ -33,6 +33,7 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
     filteredItems = _useState4[0],
     setFilteredItems = _useState4[1];
   var selection = Array.isArray(conditionState.value) ? conditionState.value : conditionState.value !== undefined ? [conditionState.value] : [];
+  var contentRef = useRef();
   useEffect(function () {
     if (!allOptions && getOptions) {
       var fetchData = /*#__PURE__*/function () {
@@ -63,8 +64,18 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var handleSelectAll = function handleSelectAll(e) {
-    if (e.currentTarget.dataset.selectedAll == 'false') {
+  useEffect(function () {
+    //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();
+    }
+    // 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) {
@@ -72,31 +83,32 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
       }));
     }
   };
-  var onSearchChangeHandler = function onSearchChangeHandler(e) {
-    var value = e.target.value;
+  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);
   };
-  var onClickHandler = function onClickHandler(e, option, isSelected) {
+  var onClickHandler = function onClickHandler(evt, option, isSelected) {
     if (multiSelectable) {
       if (isSelected) {
         var items = selection.filter(function (v) {
           return v !== option.id;
         });
-        onChange(items.length > 0 ? items : undefined, e);
+        onChange(items.length > 0 ? items : undefined, evt);
       } else {
-        onChange([].concat(_toConsumableArray(selection), [option.id]), e);
+        onChange([].concat(_toConsumableArray(selection), [option.id]), evt);
       }
     } else {
-      onChange(option.id, e);
+      onChange(option.id, evt);
     }
   };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, allOptions && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__condition-builder-item-option")
+    className: "".concat(blockClass, "__item-option"),
+    ref: contentRef
   }, (config.includeSearch || allOptions.length > popOverSearchThreshold) && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__condition-builder-item-option__search")
+    className: "".concat(blockClass, "__item-option__search")
   }, /*#__PURE__*/React__default.createElement(Search, {
     size: "sm",
     labelText: translateWithId('clear_search'),
@@ -122,25 +134,25 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
       key: option.id,
       role: "option",
       "aria-selected": isSelected,
-      className: "".concat(blockClass, "__condition-builder-item-option__option"),
+      className: "".concat(blockClass, "__item-option__option"),
       onKeyUp: function onKeyUp() {
         return false;
       },
-      onClick: function onClick(e) {
-        return onClickHandler(e, option, isSelected);
+      onClick: function onClick(evt) {
+        return onClickHandler(evt, option, isSelected);
       }
     }, /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(blockClass, "__condition-builder-item-option__option-content")
+      className: "".concat(blockClass, "__item-option__option-content")
     }, multiSelectable ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
       className: "".concat(blockClass, "__option-check-box")
     }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React__default.createElement(CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React__default.createElement(Checkbox, null))), /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(blockClass, "__condition-builder-item-option__option-label")
+      className: "".concat(blockClass, "__item-option__option-label")
     }, option.label), Icon && /*#__PURE__*/React__default.createElement("span", {
       className: "".concat(blockClass, "__option-icon")
     }, /*#__PURE__*/React__default.createElement(Icon, null))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(blockClass, "__condition-builder-item-option__option-label")
+      className: "".concat(blockClass, "__item-option__option-label")
     }, Icon && /*#__PURE__*/React__default.createElement(Icon, null), option.label), isSelected && /*#__PURE__*/React__default.createElement(Checkmark, {
-      className: "".concat(blockClass, "__condition-builder-checkmark")
+      className: "".concat(blockClass, "__checkmark")
     }))));
   }))), !allOptions && (_SelectSkeleton || (_SelectSkeleton = /*#__PURE__*/React__default.createElement(SelectSkeleton, null))));
 };

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

@@ -15,14 +15,14 @@ var ConditionBuilderItemText = function ConditionBuilderItemText(_ref) {
   var conditionState = _ref.conditionState,
     _onChange = _ref.onChange;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__condition-builder-item-text")
+    className: "".concat(blockClass, "__item-text")
   }, /*#__PURE__*/React__default.createElement(TextInput, {
     labelText: conditionState.property,
     hideLabel: true,
     value: (_conditionState$value = conditionState.value) !== null && _conditionState$value !== void 0 ? _conditionState$value : '',
     id: (_conditionState$prope = conditionState.property) === null || _conditionState$prope === void 0 ? void 0 : _conditionState$prope.replace(/\s/g, ''),
-    onChange: function onChange(e) {
-      _onChange(e.target.value);
+    onChange: function onChange(evt) {
+      _onChange(evt.target.value);
     }
   }));
 };

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

@@ -33,17 +33,17 @@ var ConditionBuilderItemTime = function ConditionBuilderItemTime(_ref) {
     onChange(timeValue ? timeToUpdate : undefined);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [timeValue, dayZoneValue, timeZoneValue]);
-  var setTimeZone = function setTimeZone(e) {
-    setTimeZoneValue(e.target.value);
+  var setTimeZone = function setTimeZone(evt) {
+    setTimeZoneValue(evt.target.value);
   };
-  var setDayZone = function setDayZone(e) {
-    setDayZoneValue(e.target.value);
+  var setDayZone = function setDayZone(evt) {
+    setDayZoneValue(evt.target.value);
   };
-  var setTime = function setTime(e) {
-    setTimeValue(e.target.value);
+  var setTime = function setTime(evt) {
+    setTimeValue(evt.target.value);
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__condition-builder-item-time")
+    className: "".concat(blockClass, "__item-time")
   }, /*#__PURE__*/React__default.createElement(TimePicker, {
     id: "time-picker",
     labelText: "Select a time",

package/es/components/ConditionBuilder/ConditionConnector/ConditionConnector.js

@@ -28,17 +28,17 @@ function ConditionConnector(_ref) {
       parentGroup.classList.remove('hoveredConnector');
     }
   }, []);
-  var activeConnectorHandler = function activeConnectorHandler(e) {
-    var parentGroup = e.currentTarget.closest('.eachGroup');
+  var activeConnectorHandler = function activeConnectorHandler(evt) {
+    var parentGroup = evt.currentTarget.closest('.eachGroup');
     handleConnectorHover(parentGroup, true);
   };
-  var inActiveConnectorHandler = function inActiveConnectorHandler(e) {
-    var parentGroup = e.currentTarget.closest('.eachGroup');
+  var inActiveConnectorHandler = function inActiveConnectorHandler(evt) {
+    var parentGroup = evt.currentTarget.closest('.eachGroup');
     handleConnectorHover(parentGroup, false);
   };
-  var onChangeHandler = function onChangeHandler(op, e) {
+  var onChangeHandler = function onChangeHandler(op, evt) {
     onChange(op);
-    focusThisField(e);
+    focusThisField(evt);
   };
   return (
     /*#__PURE__*/

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

@@ -26,16 +26,16 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     onChange = _ref.onChange,
     conditionBuilderRef = _ref.conditionBuilderRef,
     className = _ref.className;
-  var onRemoveHandler = function onRemoveHandler(conditionId, e) {
+  var onRemoveHandler = function onRemoveHandler(conditionId, evt) {
     if (group.conditions.length > 1) {
       onChange(_objectSpread2(_objectSpread2({}, group), {}, {
         conditions: group.conditions.filter(function (condition) {
           return conditionId !== condition.id;
         })
       }));
-      handleFocusOnClose(e);
+      handleFocusOnClose(evt);
     } else {
-      onRemove();
+      onRemove(evt);
     }
   };
   var onChangeHandler = function onChangeHandler(updatedCondition, conditionIndex) {
@@ -59,9 +59,9 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
   var isLastCondition = function isLastCondition(conditionIndex, conditionArr) {
     return conditionIndex + 1 >= conditionArr.length || conditionArr.length - 1 != conditionIndex && conditionArr[conditionIndex + 1].conditions;
   };
-  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"]');
+  var handleFocusOnClose = function handleFocusOnClose(evt) {
+    var _evt$currentTarget;
+    var previousClose = (_evt$currentTarget = evt.currentTarget) === null || _evt$currentTarget === void 0 || (_evt$currentTarget = _evt$currentTarget.closest('[role="row"]')) === null || _evt$currentTarget === void 0 || (_evt$currentTarget = _evt$currentTarget.parentElement) === null || _evt$currentTarget === void 0 || (_evt$currentTarget = _evt$currentTarget.previousSibling) === null || _evt$currentTarget === void 0 ? void 0 : _evt$currentTarget.querySelector('[data-name="closeCondition"]');
     if (previousClose) {
       previousClose.focus();
     }
@@ -76,7 +76,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     return /*#__PURE__*/React__default.createElement("div", {
       key: eachCondition.id
     }, eachCondition.conditions && /*#__PURE__*/React__default.createElement(ConditionGroupBuilder, {
-      className: "".concat(blockClass, "__condition-builder__group"),
+      className: "".concat(blockClass, "__group"),
       aria: {
         level: aria.level + 1,
         posinset: conditionIndex + 1,
@@ -86,8 +86,8 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       onChange: function onChange(updatedCondition) {
         onChangeHandler(updatedCondition, conditionIndex);
       },
-      onRemove: function onRemove(e) {
-        onRemoveHandler(eachCondition.id, e);
+      onRemove: function onRemove(evt) {
+        onRemoveHandler(eachCondition.id, evt);
       },
       conditionBuilderRef: conditionBuilderRef
     }), !eachCondition.conditions && /*#__PURE__*/React__default.createElement(ConditionBlock, {
@@ -106,8 +106,8 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
         onChangeHandler(updatedConditions, conditionIndex);
       },
       addConditionHandler: addConditionHandler,
-      onRemove: function onRemove(e) {
-        onRemoveHandler(eachCondition.id, e);
+      onRemove: function onRemove(evt) {
+        onRemoveHandler(eachCondition.id, evt);
       },
       onConnectorOperatorChange: function onConnectorOperatorChange(op) {
         onChange(_objectSpread2(_objectSpread2({}, group), {}, {

package/es/components/ConditionBuilder/utils/checkForHoldingKey.d.ts

@@ -0,0 +1 @@
+export function checkForHoldingKey(evt: any, key: any): any;

package/es/components/ConditionBuilder/utils/checkForHoldingKey.js

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ */
+
+var checkForHoldingKey = function checkForHoldingKey(evt, key) {
+  // possible key inputs: altKey,ctrlKey,metaKey,shiftKey
+  if (key === 'cmd') {
+    return evt.metaKey || evt.ctrlKey;
+  }
+  return evt[key];
+};
+
+export { checkForHoldingKey };

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

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

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

@@ -0,0 +1,125 @@
+/**
+ * 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.
+ */
+
+import { toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { blockClass } from '../ConditionBuilderContext/DataConfigs.js';
+import { checkForHoldingKey } from './checkForHoldingKey.js';
+import { focusThisField, traverseReverse, traverseClockVise } from './util.js';
+
+var handleKeyDown = function handleKeyDown(evt, conditionBuilderRef) {
+  var activeElement = document.activeElement;
+  if (activeElement.closest("[role=\"dialog\"]")) {
+    handleKeyPressForPopover(evt, activeElement.closest("[role=\"dialog\"]"));
+  } else {
+    handleKeyPressForMainContent(evt, conditionBuilderRef);
+  }
+};
+var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentContainer) {
+  var _parentContainer$quer;
+  var key = evt.key;
+  var isHoldingShiftKey = checkForHoldingKey(evt, 'shiftKey');
+  var isMultiSelect = (_parentContainer$quer = parentContainer.querySelector('ul')) === null || _parentContainer$quer === void 0 ? void 0 : _parentContainer$quer.dataset.multiSelect;
+  var allItems = [];
+  switch (key) {
+    case 'ArrowUp':
+      //traverse through the popover options, search box, selectAll button
+      parentContainer.querySelectorAll("[role=\"option\"]").forEach(function (eachElem, index, allElements) {
+        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) {
+        traverseClockVise(eachElem, index, allElements);
+      });
+      break;
+    case 'Tab':
+      allItems = [].concat(_toConsumableArray(Array.from(parentContainer.querySelectorAll(".".concat(blockClass, "__selectAll-button,[role=\"searchbox\"]")))), [parentContainer.querySelector("[role=\"option\"]")]);
+      allItems.forEach(function (eachElem, index, allElements) {
+        if (isHoldingShiftKey) {
+          traverseReverse(eachElem, index, allElements, true, true);
+        } else {
+          traverseClockVise(eachElem, index, allElements, true, true);
+        }
+      });
+      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, else trigger click
+          (_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 || _document$activeEleme2.click();
+          focusThisField(evt);
+        }
+      }
+      break;
+    case 'Escape':
+      //focus the corresponding field in which the popover is triggered
+      focusThisField(evt);
+      break;
+  }
+};
+var getRows = function getRows(conditionBuilderRef) {
+  return Array.from(conditionBuilderRef.current.querySelectorAll('[role="row"]'));
+};
+var getRowIndex = function getRowIndex(element, conditionBuilderRef) {
+  var rows = getRows(conditionBuilderRef);
+  return rows.findIndex(function (row) {
+    return row.contains(element);
+  });
+};
+var handleRowNavigation = function handleRowNavigation(evt, conditionBuilderRef) {
+  var rows = getRows(conditionBuilderRef);
+  var currentRowIndex = getRowIndex(evt.target, conditionBuilderRef);
+  navigateToNextRowCell(evt, currentRowIndex, rows);
+};
+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 nextRowIndex = currentRowIndex;
+  if (evt.key === 'ArrowUp') {
+    nextRowIndex = currentRowIndex == 0 ? currentRowIndex : currentRowIndex - 1;
+  }
+  if (evt.key === 'ArrowDown') {
+    nextRowIndex = currentRowIndex === rows.length - 1 ? rows.length - 1 : currentRowIndex + 1;
+  }
+  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') {
+          traverseClockVise(eachElem, index, allElements);
+        } else {
+          traverseReverse(eachElem, index, allElements);
+        }
+      });
+      break;
+    case 'ArrowUp':
+    case 'ArrowDown':
+      handleRowNavigation(evt, conditionBuilderRef);
+      break;
+  }
+};
+
+export { handleKeyDown };

package/es/components/ConditionBuilder/utils/util.d.ts

@@ -1,4 +1,4 @@
-export function focusThisField(e: any): void;
+export function focusThisField(evt: any): void;
 export function focusThisItem(currentElement: any): void;
 export function traverseClockVise(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any): void;
 export function traverseReverse(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any): void;

package/es/components/ConditionBuilder/utils/util.js

@@ -5,12 +5,41 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var focusThisField = function focusThisField(e) {
+var focusThisField = function focusThisField(evt) {
   setTimeout(function () {
-    var _e$target$closest, _e$target$closest2;
-    (_e$target$closest = e.target.closest('[role="gridcell"]')) === null || _e$target$closest === void 0 || (_e$target$closest = _e$target$closest.querySelector('button')) === null || _e$target$closest === void 0 || _e$target$closest.click();
-    (_e$target$closest2 = e.target.closest('[role="gridcell"]')) === null || _e$target$closest2 === void 0 || (_e$target$closest2 = _e$target$closest2.querySelector('button')) === null || _e$target$closest2 === void 0 || _e$target$closest2.focus();
+    var _evt$target$closest, _evt$target$closest2;
+    (_evt$target$closest = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest === void 0 || (_evt$target$closest = _evt$target$closest.querySelector('button')) === null || _evt$target$closest === void 0 || _evt$target$closest.click();
+    (_evt$target$closest2 = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest2 === void 0 || (_evt$target$closest2 = _evt$target$closest2.querySelector('button')) === null || _evt$target$closest2 === void 0 || _evt$target$closest2.focus();
   }, 0);
 };
+var focusThisItem = function focusThisItem(currentElement) {
+  setTimeout(function () {
+    //document.activeElement.setAttribute('tabindex', '-1');
+    // currentElement.setAttribute('tabindex', '0');
+    currentElement === null || currentElement === void 0 || currentElement.focus();
+  }, 0);
+};
+var traverseClockVise = function traverseClockVise(eachElem, index, allElements, rotate, trapFocus) {
+  if (eachElem == document.activeElement) {
+    if (index !== allElements.length - 1) {
+      focusThisItem(allElements[index + 1]);
+    } else {
+      focusThisItem(allElements[rotate ? 0 : allElements.length - 1]);
+    }
+  } else if (Array.from(allElements).indexOf(document.activeElement) == -1 && trapFocus) {
+    focusThisItem(allElements[0]);
+  }
+};
+var traverseReverse = function traverseReverse(eachElem, index, allElements, rotate, trapFocus) {
+  if (eachElem == document.activeElement) {
+    if (index !== 0) {
+      focusThisItem(allElements[index - 1]);
+    } else {
+      focusThisItem(allElements[rotate ? allElements.length - 1 : 0]);
+    }
+  } else if (Array.from(allElements).indexOf(document.activeElement) == -1 && trapFocus) {
+    focusThisItem(allElements[allElements.length - 1]);
+  }
+};
 
-export { focusThisField };
+export { focusThisField, focusThisItem, traverseClockVise, traverseReverse };

package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -20,7 +20,7 @@ import { useInitialColumnSort } from '../useInitialColumnSort.js';
 var _th;
 var _excluded = ["role"],
   _excluded2 = ["className", "role"],
-  _excluded3 = ["role", "className"];
+  _excluded3 = ["role"];
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var getAccessibilityProps = function getAccessibilityProps(header) {
   var props = {};
@@ -176,11 +176,10 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     var originalCol = visibleColumns[index];
     var _header$getHeaderProp = header.getHeaderProps();
       _header$getHeaderProp.role;
-      var headerClassName = _header$getHeaderProp.className,
-      headerProps = _objectWithoutProperties(_header$getHeaderProp, _excluded3);
+      var headerProps = _objectWithoutProperties(_header$getHeaderProp, _excluded3);
     var resizerProps = header === null || header === void 0 || (_header$getResizerPro = header.getResizerProps) === null || _header$getResizerPro === void 0 ? void 0 : _header$getResizerPro.call(header);
     return /*#__PURE__*/React__default.createElement(TableHeader, _extends({}, headerProps, {
-      className: cx(headerClassName, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header.isSorted), "".concat(blockClass, "__header-actions-column"), header.isAction), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/React__default.isValidElement(header.slug))),
+      className: cx(header.className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header.isSorted), "".concat(blockClass, "__header-actions-column"), header.isAction), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/React__default.isValidElement(header.slug))),
       key: header.id,
       "aria-hidden": header.id === 'spacer' && 'true'
     }, getAccessibilityProps(header)), header.render('Header'), renderSlug(header.slug), resizerProps && !header.isAction && /*#__PURE__*/React__default.createElement(ResizeHeader, {