@carbon/ibm-products 2.46.0 → 2.47.0-rc.0

package/lib/components/Coachmark/utils/enums.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
 /**
  * Reserved for future expansion, i.e. "RING".
  */

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

@@ -20,6 +20,7 @@ declare namespace ConditionBlock {
         let onConnectorOperatorChange: PropTypes.Requireable<(...args: any[]) => any>;
         let onRemove: PropTypes.Requireable<(...args: any[]) => any>;
         let onStatementChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let setShowDeletionPreviewForSubgroups: PropTypes.Requireable<(...args: any[]) => any>;
         let showConditionPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
         let showConditionSubGroupPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
         let state: PropTypes.Requireable<object>;

package/lib/components/ConditionBuilder/ConditionBlock/ConditionBlock.js

@@ -61,7 +61,8 @@ var ConditionBlock = function ConditionBlock(props) {
     showConditionSubGroupPreviewHandler = props.showConditionSubGroupPreviewHandler,
     hideConditionPreviewHandler = props.hideConditionPreviewHandler,
     showConditionPreviewHandler = props.showConditionPreviewHandler,
-    isLastCondition = props.isLastCondition;
+    isLastCondition = props.isLastCondition,
+    setShowDeletionPreviewForSubgroups = props.setShowDeletionPreviewForSubgroups;
   var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
     inputConfig = _useContext.inputConfig,
     variant = _useContext.variant,
@@ -102,6 +103,15 @@ var ConditionBlock = function ConditionBlock(props) {
     textarea: ConditionBuilderItemText.ConditionBuilderItemText
   };
   var ItemComponent = property ? itemComponents[type] : null;
+  React.useEffect(function () {
+    var _group$conditions, _group$conditions2;
+    if (showDeletionPreview && (group === null || group === void 0 || (_group$conditions = group.conditions) === null || _group$conditions === void 0 ? void 0 : _group$conditions.length) > 1 && group !== null && group !== void 0 && (_group$conditions2 = group.conditions) !== null && _group$conditions2 !== void 0 && _group$conditions2[1].conditions && group.conditions[1].id !== condition.id) {
+      setShowDeletionPreviewForSubgroups === null || setShowDeletionPreviewForSubgroups === void 0 || setShowDeletionPreviewForSubgroups(true);
+    } else {
+      setShowDeletionPreviewForSubgroups === null || setShowDeletionPreviewForSubgroups === void 0 || setShowDeletionPreviewForSubgroups(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showDeletionPreview]);
   var onStatementChangeHandler = function onStatementChangeHandler(v, evt) {
     util.focusThisField(evt, conditionBuilderRef);
     onStatementChange(v);
@@ -121,10 +131,9 @@ var ConditionBlock = function ConditionBlock(props) {
       popoverToOpen: util.checkIsValid(newOperator) ? 'valueField' : ''
     }));
   };
-  var onValueChangeHandler = function onValueChangeHandler(newValue, evt) {
+  var onValueChangeHandler = function onValueChangeHandler(newValue) {
     var currentCondition = _rollupPluginBabelHelpers.objectSpread2({}, condition);
     delete currentCondition.popoverToOpen;
-    util.focusThisField(evt, conditionBuilderRef);
     onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, currentCondition), {}, {
       value: newValue
     }));
@@ -317,6 +326,10 @@ ConditionBlock.propTypes = {
    * callback to handle the statement(if/ excl.if) change
    */
   onStatementChange: index["default"].func,
+  /**
+   * method to set ShowDeletionPreviewForSubgroups
+   */
+  setShowDeletionPreviewForSubgroups: index["default"].func,
   /**
    * handler for showing add condition preview
    */

package/lib/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js

@@ -96,11 +96,11 @@ var ConditionBuilderAdd = function ConditionBuilderAdd(_ref) {
   })), enableSubGroup && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, _rollupPluginBabelHelpers["extends"]({
     renderIcon: icons.TextNewLine,
     onClick: addConditionSubGroupHandler,
-    className: cx__default["default"]("".concat(DataConfigs.blockClass, "__add-condition-sub-group ").concat(DataConfigs.blockClass, "__gap-left")),
+    className: cx__default["default"]("".concat(DataConfigs.blockClass, "__add-condition-sub-group")),
     hideLabel: true,
     label: addSubgroupText,
     wrapperProps: wrapperProps,
-    wrapperClassName: cx__default["default"]("".concat(DataConfigs.blockClass, "__add-condition-sub-group-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__add-condition-sub-group-wrapper--show"), isAddSubgroup))
+    wrapperClassName: cx__default["default"]("".concat(DataConfigs.blockClass, "__add-condition-sub-group-wrapper ").concat(DataConfigs.blockClass, "__gap-left"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__add-condition-sub-group-wrapper--show"), isAddSubgroup))
   }, previewHandlersForSubgroup())));
 };
 var ConditionBuilderAdd$1 = ConditionBuilderAdd;

package/lib/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js

@@ -42,11 +42,11 @@ var ConditionBuilderButton = function ConditionBuilderButton(_ref) {
     wrapperClassName = _ref.wrapperClassName,
     tabIndex = _ref.tabIndex,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var carbonPrefix = react.usePrefix();
   var Button = function Button() {
     var _rest$dataName;
     var dataName = (_rest$dataName = rest['data-name']) !== null && _rest$dataName !== void 0 ? _rest$dataName : '';
     return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
-      // role={'gridcell'}
       tabIndex: tabIndex != undefined ? tabIndex : -1,
       className: cx__default["default"]([className, "".concat(DataConfigs.blockClass, "__button"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__text-ellipsis"), showToolTip && !hideLabel && !isInvalid), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__invalid-input"), isInvalid)]),
       type: "button",
@@ -61,8 +61,10 @@ var ConditionBuilderButton = function ConditionBuilderButton(_ref) {
   return hideLabel || showToolTip ? /*#__PURE__*/React__default["default"].createElement(react.Tooltip, _rollupPluginBabelHelpers["extends"]({
     label: label,
     align: tooltipAlign,
-    className: "".concat(wrapperClassName)
-  }, wrapperProps), Button()) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, Button());
+    className: "".concat(wrapperClassName, " ").concat(DataConfigs.blockClass, "__tooltip ").concat(carbonPrefix, "--icon-tooltip")
+  }, wrapperProps, {
+    leaveDelayMs: 0
+  }), Button()) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, Button());
 };
 ConditionBuilderButton.propTypes = {
   /**

package/lib/components/ConditionBuilder/ConditionBuilderConnector/ConditionConnector.js

@@ -18,6 +18,7 @@ var index = require('../../../node_modules/prop-types/index.js');
 var util = require('../utils/util.js');
 var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuilderProvider.js');
 var useTranslations = require('../utils/useTranslations.js');
+var ConditionBuilderButton = require('../ConditionBuilderButton/ConditionBuilderButton.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -56,7 +57,9 @@ var ConditionConnector = function ConditionConnector(_ref) {
   };
   return variant == 'tree' ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(className, " ").concat(DataConfigs.blockClass, "__connector--disabled")
-  }, operator) :
+  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, {
+    label: operator
+  })) :
   /*#__PURE__*/
   // <div className={className} {...rest}>
   React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, _rollupPluginBabelHelpers["extends"]({

package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js

@@ -30,7 +30,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _GroupConnector;
 var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
-  var _rootState$groups2;
+  var _rootState$groups3;
   var startConditionLabel = _ref.startConditionLabel,
     getConditionState = _ref.getConditionState,
     getActionsState = _ref.getActionsState,
@@ -118,6 +118,11 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
       groups: [].concat(_rollupPluginBabelHelpers.toConsumableArray(rootState.groups), [newGroup])
     }));
   };
+  var getColorIndex = function getColorIndex() {
+    var _rootState$groups$len, _rootState$groups2;
+    var groupLength = (_rootState$groups$len = rootState === null || rootState === void 0 || (_rootState$groups2 = rootState.groups) === null || _rootState$groups2 === void 0 ? void 0 : _rootState$groups2.length) !== null && _rootState$groups$len !== void 0 ? _rootState$groups$len : 0;
+    return groupLength % 5;
+  };
   if (!isConditionBuilderActive) {
     return /*#__PURE__*/React__default["default"].createElement(react.Button, {
       className: "".concat(DataConfigs.blockClass, "__addConditionText-button"),
@@ -137,7 +142,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
     className: "".concat(DataConfigs.blockClass, "__content-container"),
     role: "treegrid",
     "aria-label": "condition builder tree"
-  }, rootState && (rootState === null || rootState === void 0 || (_rootState$groups2 = rootState.groups) === null || _rootState$groups2 === void 0 ? void 0 : _rootState$groups2.map(function (eachGroup, groupIndex) {
+  }, rootState && (rootState === null || rootState === void 0 || (_rootState$groups3 = rootState.groups) === null || _rootState$groups3 === void 0 ? void 0 : _rootState$groups3.map(function (eachGroup, groupIndex) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: eachGroup.id,
       className: "".concat(DataConfigs.blockClass, "__group-wrapper")
@@ -177,6 +182,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
     }
   })), showConditionGroupPreview && /*#__PURE__*/React__default["default"].createElement(ConditionPreview["default"], {
     previewType: "newGroup",
+    colorIndex: getColorIndex(),
     group: {
       groupOperator: rootState.operator
     }

package/lib/components/ConditionBuilder/ConditionBuilderContext/translationObject.d.ts

@@ -39,4 +39,7 @@ export namespace translationsObject {
     let conditionBuilderText: string;
     let actionSectionText: string;
     let conditionHeadingText: string;
+    let addPropertyText: string;
+    let addOperatorText: string;
+    let addValueText: string;
 }

package/lib/components/ConditionBuilder/ConditionBuilderContext/translationObject.js

@@ -36,7 +36,7 @@ var translationsObject = {
   connectorText: 'Connector',
   conditionRowText: 'Condition row',
   conditionRowGroupText: 'Condition row group',
-  removeConditionText: 'Remove condition',
+  removeConditionText: 'Delete condition',
   addConditionRowText: 'Add condition row',
   startText: 'Start',
   endText: 'End',
@@ -49,7 +49,10 @@ var translationsObject = {
   invalidNumberWarnText: 'Invalid number, must be 0 or greater',
   conditionBuilderText: 'Condition Builder',
   actionSectionText: 'Action Section',
-  conditionHeadingText: 'Condition'
+  conditionHeadingText: 'Condition',
+  addPropertyText: 'Add property',
+  addOperatorText: 'Add operator',
+  addValueText: 'Add value'
 };
 
 exports.translationsObject = translationsObject;

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

@@ -44,11 +44,14 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
-  var _useTranslations = useTranslations.useTranslations(['invalidText', 'addConditionText', label]),
-    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 3),
+  var _useTranslations = useTranslations.useTranslations(['invalidText', 'addConditionText', 'addPropertyText', 'addOperatorText', 'addValueText', label]),
+    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 6),
     invalidText = _useTranslations2[0],
     addConditionText = _useTranslations2[1],
-    labelText = _useTranslations2[2];
+    addPropertyText = _useTranslations2[2],
+    addOperatorText = _useTranslations2[3],
+    addValueText = _useTranslations2[4],
+    labelText = _useTranslations2[5];
   var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
     conditionBuilderRef = _useContext.conditionBuilderRef;
   var getPropertyDetails = function getPropertyDetails() {
@@ -133,6 +136,19 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
       manageInvalidSelection();
     }
   };
+  var getLabel = function getLabel() {
+    if (propertyLabel) {
+      return propertyLabel;
+    } else if (rest['data-name'] === 'propertyField') {
+      return addPropertyText;
+    } else if (rest['data-name'] === 'operatorField') {
+      return addOperatorText;
+    } else if (rest['data-name'] === 'valueField') {
+      return addValueText;
+    } else {
+      return addConditionText;
+    }
+  };
   return /*#__PURE__*/React__default["default"].createElement(react.Popover, {
     open: open,
     isTabTip: true,
@@ -141,7 +157,7 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
     ref: popoverRef,
     onRequestClose: closePopover
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, _rollupPluginBabelHelpers["extends"]({
-    label: propertyLabel !== null && propertyLabel !== void 0 ? propertyLabel : addConditionText,
+    label: getLabel(),
     hideLabel: !label ? true : false,
     onClick: togglePopover,
     className: className,

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

@@ -59,6 +59,10 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
     showConditionSubGroupPreview = _useState4[0],
     setShowConditionSubGroupPreview = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+    showDeletionPreviewForSubgroups = _useState6[0],
+    setShowDeletionPreviewForSubgroups = _useState6[1];
   var conditionBuilderContentRef = React.useRef();
   var onRemoveHandler = function onRemoveHandler(conditionId, evt, conditionIndex) {
     if (group.conditions.length > 1) {
@@ -89,9 +93,11 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
             groupedItems.conditions.push(item);
           }
         });
-        onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
-          conditions: [].concat(_rollupPluginBabelHelpers.toConsumableArray(groupedItems.conditions), _rollupPluginBabelHelpers.toConsumableArray(groupedItems.groups))
-        }));
+        onRemove(evt);
+        // onChange({
+        //   ...group,
+        //   conditions: [...groupedItems.conditions, ...groupedItems.groups],
+        // });
       } else {
         onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
           conditions: group.conditions.filter(function (condition) {
@@ -164,10 +170,11 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
         };
         setTimeout(function () {
           var currentRowToFocus = conditionBuilderContentRef.current.querySelector("[role=\"row\"][aria-level=\"".concat(rowIdentity.ariaLevel, "\"][aria-posinset=\"").concat(rowIdentity.ariaPosInSet, "\"]"));
-          util.manageTabIndexAndFocus(currentRowToFocus, conditionBuilderRef);
+          util.manageTabIndexAndFocus(currentRowToFocus === null || currentRowToFocus === void 0 ? void 0 : currentRowToFocus.querySelector('[data-name="closeCondition"]'), conditionBuilderRef);
         }, 0);
       } else if ((prevRows === null || prevRows === void 0 ? void 0 : prevRows.length) > 1) {
-        util.manageTabIndexAndFocus(prevRows[prevRows.length - 2], conditionBuilderRef);
+        var _prevRows;
+        util.manageTabIndexAndFocus((_prevRows = prevRows[prevRows.length - 2]) === null || _prevRows === void 0 ? void 0 : _prevRows.querySelector('[data-name="closeCondition"]'), conditionBuilderRef);
       }
     }
   };
@@ -288,7 +295,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
         key: eachCondition.id
       }, eachCondition.conditions ? /*#__PURE__*/React__default["default"].createElement("div", {
-        className: cx__default["default"]("".concat(DataConfigs.blockClass, "__condition-block subgroup  ").concat(DataConfigs.blockClass, "__gap"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__gap-bottom"), group.conditions.length < conditionIndex + 1))
+        className: cx__default["default"]("".concat(DataConfigs.blockClass, "__condition-block subgroup  ").concat(DataConfigs.blockClass, "__gap"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__gap-bottom"), group.conditions.length < conditionIndex + 1), "".concat(DataConfigs.blockClass, "__subgroup_deletionPreview"), showDeletionPreviewForSubgroups), {})
       }, /*#__PURE__*/React__default["default"].createElement(ConditionConnector["default"], {
         className: "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-bottom ").concat(DataConfigs.blockClass, "__groupConnector"),
         operator: group.groupOperator,
@@ -336,7 +343,8 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
           _showConditionPreviewHandler(conditionIndex);
         },
         hideConditionPreviewHandler: hideConditionPreviewHandler,
-        isLastCondition: isLastCondition
+        isLastCondition: isLastCondition,
+        setShowDeletionPreviewForSubgroups: setShowDeletionPreviewForSubgroups
       })), conditionIndex == showConditionSubGroupPreview && (_ConditionPreview || (_ConditionPreview = /*#__PURE__*/React__default["default"].createElement(ConditionPreview["default"], {
         previewType: "subGroup",
         group: group

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

@@ -1,10 +1,12 @@
 export default ConditionPreview;
-declare function ConditionPreview({ previewType, group }: {
+declare function ConditionPreview({ previewType, group, colorIndex }: {
     previewType: any;
     group: any;
+    colorIndex: any;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace ConditionPreview {
     namespace propTypes {
+        let colorIndex: PropTypes.Requireable<number>;
         let group: PropTypes.Requireable<object>;
         let previewType: PropTypes.Requireable<string>;
     }

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

@@ -27,7 +27,8 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var ConditionPreview = function ConditionPreview(_ref) {
   var _ConditionBuilderItem, _ConditionBuilderItem2, _ConditionBuilderItem3;
   var previewType = _ref.previewType,
-    group = _ref.group;
+    group = _ref.group,
+    colorIndex = _ref.colorIndex;
   var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     animate = _useState2[0],
@@ -59,6 +60,7 @@ var ConditionPreview = function ConditionPreview(_ref) {
     className: "".concat(DataConfigs.blockClass, "__statement-button"),
     label: group.groupOperator
   })), /*#__PURE__*/React__default["default"].createElement("div", {
+    "data-color-index": colorIndex,
     "aria-hidden": true,
     className: cx__default["default"](["".concat(DataConfigs.blockClass, "__group ").concat(DataConfigs.blockClass, "__condition-wrapper ").concat(DataConfigs.blockClass, "__group-preview ").concat(DataConfigs.blockClass, "__group-wrapper "), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__group-preview-animate"), animate)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -67,7 +69,7 @@ var ConditionPreview = function ConditionPreview(_ref) {
     className: "".concat(DataConfigs.blockClass, "__statement-button"),
     label: ifText
   })), getConditionSection())), previewType == 'subGroup' && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cx__default["default"](["".concat(DataConfigs.blockClass, "__group__row ").concat(DataConfigs.blockClass, "__group-preview "), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__group-preview-animate"), animate)])
+    className: cx__default["default"](["".concat(DataConfigs.blockClass, "__group__row ").concat(DataConfigs.blockClass, "__group-preview ").concat(DataConfigs.blockClass, "__gap-bottom"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__group-preview-animate"), animate)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(DataConfigs.blockClass, "__condition-block  ").concat(DataConfigs.blockClass, "__gap")
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
@@ -80,7 +82,7 @@ var ConditionPreview = function ConditionPreview(_ref) {
     className: "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__groupConnector"),
     operator: ifText
   }), getConditionSection()))), previewType == 'condition' && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cx__default["default"](["".concat(DataConfigs.blockClass, "__group__row ").concat(DataConfigs.blockClass, "__group-preview "), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__group-preview-animate"), animate)])
+    className: cx__default["default"](["".concat(DataConfigs.blockClass, "__group__row ").concat(DataConfigs.blockClass, "__group-preview ").concat(DataConfigs.blockClass, "__gap-bottom"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__group-preview-animate"), animate)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(DataConfigs.blockClass, "__condition-block  ").concat(DataConfigs.blockClass, "__gap")
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
@@ -91,6 +93,10 @@ var ConditionPreview = function ConditionPreview(_ref) {
 };
 var ConditionPreview$1 = ConditionPreview;
 ConditionPreview.propTypes = {
+  /**
+   * index of the color for next group
+   */
+  colorIndex: index["default"].number,
   /**
    * current conditional group
    */

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

@@ -39,12 +39,18 @@ var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentCont
   var allItems = [];
   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('ul').querySelectorAll('li')).indexOf(evt.target) === 1) {
+        parentContainer.querySelector(".".concat(DataConfigs.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);
@@ -72,12 +78,19 @@ var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentCont
       }
       break;
     case 'Enter':
-      if (isMultiSelect !== 'true') {
+      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
+          (_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 || _document$activeEleme2.click();
+        }
+        evt.preventDefault();
+      } else {
+        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$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 || _document$activeEleme2.click();
+          (_document$activeEleme3 = document.activeElement) === null || _document$activeEleme3 === void 0 || _document$activeEleme3.click();
         }
       }
       break;
@@ -88,7 +101,7 @@ var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentCont
   }
 };
 var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, conditionBuilderRef, variant) {
-  var _document$activeEleme3;
+  var _document$activeEleme4;
   switch (evt.key) {
     case 'ArrowRight':
       evt.preventDefault();
@@ -148,9 +161,9 @@ var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, co
       }
       break;
     case 'Enter':
-      if (((_document$activeEleme3 = document.activeElement) === null || _document$activeEleme3 === void 0 || (_document$activeEleme3 = _document$activeEleme3.querySelectorAll("button")) === null || _document$activeEleme3 === void 0 ? void 0 : _document$activeEleme3.length) === 1) {
-        var _document$activeEleme4;
-        (_document$activeEleme4 = document.activeElement) === null || _document$activeEleme4 === void 0 || (_document$activeEleme4 = _document$activeEleme4.querySelectorAll("button")[0]) === null || _document$activeEleme4 === void 0 || _document$activeEleme4.click();
+      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;
   }

package/lib/components/DataSpreadsheet/types/index.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
 export type Size = 'xs' | 'sm' | 'md' | 'lg';
 export type Theme = 'light' | 'dark';
 export interface SpreadsheetColumn {

package/lib/components/Datagrid/Datagrid/DatagridBody.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Copyright IBM Corp. 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 { DataGridState } from '../types';
 declare const DatagridBody: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
 export default DatagridBody;

package/lib/components/Datagrid/Datagrid/DatagridContent.js

@@ -49,7 +49,8 @@ var DatagridContent = function DatagridContent(_ref) {
   var _useContext2 = React.useContext(FilterProvider.FilterContext),
     filterTags = _useContext2.filterTags,
     EventEmitter = _useContext2.EventEmitter,
-    panelOpen = _useContext2.panelOpen;
+    panelOpen = _useContext2.panelOpen,
+    contextTableId = _useContext2.tableId;
   var activeCellId = inlineEditState.activeCellId,
     gridActive = inlineEditState.gridActive,
     editId = inlineEditState.editId,
@@ -160,7 +161,7 @@ var DatagridContent = function DatagridContent(_ref) {
     }
   }, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
   useSubscribeToEventEmitter["default"](constants.CLEAR_SINGLE_FILTER, function (id) {
-    return FilterProvider.clearSingleFilter(id, setAllFilters, state);
+    return FilterProvider.clearSingleFilter(id, setAllFilters, state, contextTableId);
   });
   var renderFilterSummary = function renderFilterSummary() {
     return state.filters.length > 0 && /*#__PURE__*/React__default["default"].createElement(FilterSummary["default"], {

package/lib/components/Datagrid/Datagrid/DatagridRefBody.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Copyright IBM Corp. 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 { DataGridState } from '../types';
 declare const DatagridRefBody: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
 export default DatagridRefBody;

package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -58,7 +58,7 @@ var SelectAll = function SelectAll(datagridState) {
     onAllRowSelect = datagridState.onAllRowSelect;
   var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
   if (hideSelectAll || radio) {
-    return /*#__PURE__*/React__default["default"].createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement("th", {
       className: cx__default["default"]("".concat(blockClass, "__head-hidden-select-all"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), /* istanbul ignore next */
       isFirstColumnStickyLeft && Number(windowSize) > 671))
     });
@@ -95,15 +95,14 @@ var SelectAll = function SelectAll(datagridState) {
     onAllRowSelect === null || onAllRowSelect === void 0 || onAllRowSelect(rows, event);
     return onChange === null || onChange === void 0 ? void 0 : onChange(event);
   };
-  return /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement(react.TableSelectAll, _rollupPluginBabelHelpers["extends"]({}, selectProps, {
     className: cx__default["default"]("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), /* istanbul ignore next */
-    isFirstColumnStickyLeft && Number(windowSize) > 671))
-  }, /*#__PURE__*/React__default["default"].createElement(react.TableSelectAll, _rollupPluginBabelHelpers["extends"]({}, selectProps, {
+    isFirstColumnStickyLeft && Number(windowSize) > 671)),
     name: "".concat(tableId, "-select-all-checkbox-name"),
     onSelect: handleSelectAllChange,
     disabled: isFetching || (selectProps === null || selectProps === void 0 ? void 0 : selectProps.disabled),
     id: "".concat(tableId, "-select-all-checkbox-id")
-  })));
+  }));
 };
 
 exports.SelectAll = SelectAll;

package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Copyright IBM Corp. 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 { DataGridState } from '../types';
 declare const DatagridSimpleBody: (datagridState: DataGridState) => import("react/jsx-runtime").JSX.Element;
 export default DatagridSimpleBody;

package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -52,7 +52,9 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
   /* istanbul ignore next */
   var handleVirtualGridResize = function handleVirtualGridResize() {
     var gridRefElement = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current;
-    if (gridRefElement) {
+    // isHidden checks for an edge case where if the table is hidden by something like a Tab that the width can't be calculated to 0
+    var isHidden = (gridRefElement === null || gridRefElement === void 0 ? void 0 : gridRefElement.offsetParent) === null;
+    if (gridRefElement && !isHidden) {
       var _gridRefElement$clien;
       gridRefElement.style.width = gridRefElement === null || gridRefElement === void 0 || (_gridRefElement$clien = gridRefElement.clientWidth) === null || _gridRefElement$clien === void 0 ? void 0 : _gridRefElement$clien.toString();
     }

package/lib/components/Datagrid/Datagrid/DraggableElement.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Copyright IBM Corp. 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 { PropsWithChildren, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 interface DraggableElementProps extends PropsWithChildren {

package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js

@@ -194,7 +194,7 @@ var FilterPanel = function FilterPanel(_ref) {
   }, [filterPanelMinHeight]);
 
   // tableId is passed in from the event emitter from the FilterSummary component
-  // in  DatagridContent
+  // in DatagridContent
   useSubscribeToEventEmitter["default"](constants.CLEAR_FILTERS, function (tableId) {
     reset(tableId);
   });

package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.d.ts

@@ -1,8 +1,9 @@
 export const FilterContext: React.Context<any>;
-export function clearSingleFilter({ key, value }: {
+export function clearSingleFilter({ key, value, tableId }: {
     key: any;
     value: any;
-}, setAllFilters: any, state: any): void;
+    tableId: any;
+}, setAllFilters: any, state: any, contextTableId: any): void;
 export function FilterProvider({ children, filters, filterProps, tableId }: {
     children: any;
     filters: any;