@carbon/ibm-products 2.38.0-alpha.5 → 2.38.0

package/lib/components/Coachmark/CoachmarkOverlay.js

@@ -39,7 +39,6 @@ var defaults = {
   kind: enums.COACHMARK_OVERLAY_KIND.FLOATING,
   theme: 'light'
 };
-
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Novice to Pro components.
@@ -61,7 +60,7 @@ exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     a11yDragMode = _useState2[0],
     setA11yDragMode = _useState2[1];
-  var overlayRef = React.useRef();
+  var overlayRef = React.useRef(null);
   var coachmark = context.useCoachmark();
   var isBeacon = kind === enums.COACHMARK_OVERLAY_KIND.TOOLTIP;
   var isDraggable = kind === enums.COACHMARK_OVERLAY_KIND.FLOATING;
@@ -94,20 +93,21 @@ exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var styledTune = {};
   if (isBeacon || isDraggable) {
     if (coachmark.targetRect) {
-      styledTune = {
-        left: coachmark.targetRect.x + window.scrollX,
-        top: coachmark.targetRect.y + window.scrollY
-      };
+      styledTune.left = coachmark.targetRect.x + window.scrollX;
+      styledTune.top = coachmark.targetRect.y + window.scrollY;
     }
-    if (isBeacon) {
-      // Compensate for radius of beacon
-      styledTune.left += 16;
-      styledTune.top += 16;
-    } else if (isDraggable) {
-      // Compensate for width and height of target element
-      var offsetTune = constants.getOffsetTune(coachmark, kind);
-      styledTune.left += offsetTune.left;
-      styledTune.top += offsetTune.top;
+    if (styledTune.left && styledTune.top) {
+      if (isBeacon) {
+        // Compensate for radius of beacon
+        styledTune.left += 16;
+        styledTune.top += 16;
+      }
+      if (isDraggable) {
+        // Compensate for width and height of target element
+        var offsetTune = constants.getOffsetTune(coachmark, kind);
+        styledTune.left += offsetTune.left;
+        styledTune.top += offsetTune.top;
+      }
     }
   }
   function handleDragBounds(x, y) {
@@ -132,6 +132,9 @@ exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }
   function handleDrag(movementX, movementY) {
     var overlay = overlayRef.current;
+    if (!overlay) {
+      return;
+    }
     var _overlay$getBoundingC = overlay.getBoundingClientRect(),
       x = _overlay$getBoundingC.x,
       y = _overlay$getBoundingC.y;

package/lib/components/Coachmark/CoachmarkTagline.d.ts

@@ -1,6 +1,31 @@
+/**
+ * Copyright IBM Corp. 2023, 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 React from 'react';
+interface CoachmarkTaglineProps {
+    /**
+     * Tooltip text and aria label for the Close button icon.
+     */
+    closeIconDescription?: string;
+    /**
+     * Function to call when the close button is clicked.
+     */
+    onClose?: () => void;
+    /**
+     * Determines the theme of the component.
+     */
+    theme?: 'light' | 'dark';
+    /**
+     * The title of the tagline.
+     */
+    title: string;
+}
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Novice to Pro components.
  */
-export let CoachmarkTagline: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CoachmarkTagline: React.ForwardRefExoticComponent<CoachmarkTaglineProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/Coachmark/CoachmarkTagline.js

@@ -35,7 +35,6 @@ var defaults = {
   onClose: function onClose() {},
   theme: 'light'
 };
-
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Novice to Pro components.

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

@@ -11,27 +11,27 @@ export declare enum BEACON_KIND {
  * @param FIXED is fixed to the bottom-right of the viewport.
  * @param STACKED is fixed to the bottom-right of the viewport, includes links to show more, stackable Coachmarks if included.
  */
-export declare const COACHMARK_OVERLAY_KIND: {
-    TOOLTIP: string;
-    FLOATING: string;
-    FIXED: string;
-    STACKED: string;
-};
+export declare enum COACHMARK_OVERLAY_KIND {
+    TOOLTIP = "tooltip",
+    FLOATING = "floating",
+    FIXED = "fixed",
+    STACKED = "stacked"
+}
 /**
  * Where to render the Coachmark relative to its target.
  * Applies only to Floating and Tooltip Coachmarks.
  */
-export declare const COACHMARK_ALIGNMENT: {
-    BOTTOM: string;
-    BOTTOM_LEFT: string;
-    BOTTOM_RIGHT: string;
-    LEFT: string;
-    LEFT_TOP: string;
-    LEFT_BOTTOM: string;
-    RIGHT: string;
-    RIGHT_TOP: string;
-    RIGHT_BOTTOM: string;
-    TOP: string;
-    TOP_LEFT: string;
-    TOP_RIGHT: string;
-};
+export declare enum COACHMARK_ALIGNMENT {
+    BOTTOM = "bottom",
+    BOTTOM_LEFT = "bottom-left",
+    BOTTOM_RIGHT = "bottom-right",
+    LEFT = "left",
+    LEFT_TOP = "left-top",
+    LEFT_BOTTOM = "left-bottom",
+    RIGHT = "right",
+    RIGHT_TOP = "right-top",
+    RIGHT_BOTTOM = "right-bottom",
+    TOP = "top",
+    TOP_LEFT = "top-left",
+    TOP_RIGHT = "top-right"
+}

package/lib/components/Coachmark/utils/enums.js

@@ -18,30 +18,32 @@ Object.defineProperty(exports, '__esModule', { value: true });
  * @param FIXED is fixed to the bottom-right of the viewport.
  * @param STACKED is fixed to the bottom-right of the viewport, includes links to show more, stackable Coachmarks if included.
  */
-var COACHMARK_OVERLAY_KIND = {
-  TOOLTIP: 'tooltip',
-  FLOATING: 'floating',
-  FIXED: 'fixed',
-  STACKED: 'stacked'
-};
+var COACHMARK_OVERLAY_KIND = /*#__PURE__*/function (COACHMARK_OVERLAY_KIND) {
+  COACHMARK_OVERLAY_KIND["TOOLTIP"] = "tooltip";
+  COACHMARK_OVERLAY_KIND["FLOATING"] = "floating";
+  COACHMARK_OVERLAY_KIND["FIXED"] = "fixed";
+  COACHMARK_OVERLAY_KIND["STACKED"] = "stacked";
+  return COACHMARK_OVERLAY_KIND;
+}({});
 /**
  * Where to render the Coachmark relative to its target.
  * Applies only to Floating and Tooltip Coachmarks.
  */
-var COACHMARK_ALIGNMENT = {
-  BOTTOM: 'bottom',
-  BOTTOM_LEFT: 'bottom-left',
-  BOTTOM_RIGHT: 'bottom-right',
-  LEFT: 'left',
-  LEFT_TOP: 'left-top',
-  LEFT_BOTTOM: 'left-bottom',
-  RIGHT: 'right',
-  RIGHT_TOP: 'right-top',
-  RIGHT_BOTTOM: 'right-bottom',
-  TOP: 'top',
-  TOP_LEFT: 'top-left',
-  TOP_RIGHT: 'top-right'
-};
+var COACHMARK_ALIGNMENT = /*#__PURE__*/function (COACHMARK_ALIGNMENT) {
+  COACHMARK_ALIGNMENT["BOTTOM"] = "bottom";
+  COACHMARK_ALIGNMENT["BOTTOM_LEFT"] = "bottom-left";
+  COACHMARK_ALIGNMENT["BOTTOM_RIGHT"] = "bottom-right";
+  COACHMARK_ALIGNMENT["LEFT"] = "left";
+  COACHMARK_ALIGNMENT["LEFT_TOP"] = "left-top";
+  COACHMARK_ALIGNMENT["LEFT_BOTTOM"] = "left-bottom";
+  COACHMARK_ALIGNMENT["RIGHT"] = "right";
+  COACHMARK_ALIGNMENT["RIGHT_TOP"] = "right-top";
+  COACHMARK_ALIGNMENT["RIGHT_BOTTOM"] = "right-bottom";
+  COACHMARK_ALIGNMENT["TOP"] = "top";
+  COACHMARK_ALIGNMENT["TOP_LEFT"] = "top-left";
+  COACHMARK_ALIGNMENT["TOP_RIGHT"] = "top-right";
+  return COACHMARK_ALIGNMENT;
+}({});
 
 exports.COACHMARK_ALIGNMENT = COACHMARK_ALIGNMENT;
 exports.COACHMARK_OVERLAY_KIND = COACHMARK_OVERLAY_KIND;

package/lib/components/CoachmarkFixed/CoachmarkFixed.d.ts

@@ -1,8 +1,48 @@
+/**
+ * Copyright IBM Corp. 2023, 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 React, { ReactNode } from 'react';
+interface CoachmarkFixedProps {
+    /**
+     * CoachmarkFixed should use a single CoachmarkOverlayElements component as a child.
+     */
+    children: ReactNode;
+    /**
+     * Optional class name for this component.
+     */
+    className?: string;
+    /**
+     * Function to call when the Coachmark closes.
+     */
+    onClose?: () => void;
+    /**
+     * By default, the Coachmark will be appended to the end of `document.body`.
+     * The Coachmark will remain persistent as the user navigates the app until
+     * the user closes the Coachmark.
+     *
+     * Alternatively, the app developer can tightly couple the Coachmark to a DOM
+     * element or other component by specifying a CSS selector. The Coachmark will
+     * remain visible as long as that element remains visible or mounted. When the
+     * element is hidden or component is unmounted, the Coachmark will disappear.
+     */
+    portalTarget?: string;
+    /**
+     * The tagline title which will be fixed to the bottom right of the window and will serve as the display trigger.
+     */
+    tagline: string;
+    /**
+     * Determines the theme of the component.
+     */
+    theme?: 'light' | 'dark';
+}
 /**
  * Fixed coachmarks are used to call out specific functionality or concepts
  * within the UI that may not be intuitive but are important for the
  * user to gain understanding of the product's main value and discover new use cases.
  * This variant allows the a coachmark overlay to be displayed by interacting with the tagline.
  */
-export let CoachmarkFixed: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CoachmarkFixed: React.ForwardRefExoticComponent<CoachmarkFixedProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/CoachmarkFixed/CoachmarkFixed.js

@@ -59,7 +59,7 @@ exports.CoachmarkFixed = /*#__PURE__*/React__default["default"].forwardRef(funct
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var overlayRef = React.useRef();
+  var overlayRef = React.useRef(null);
   var portalNode = portalTarget ? (_document$querySelect = document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector('body') : document.querySelector('body');
   var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
@@ -181,7 +181,9 @@ exports.CoachmarkFixed = /*#__PURE__*/React__default["default"].forwardRef(funct
     onTransitionEnd: handleTransitionEnd,
     theme: theme,
     className: cx__default["default"](fixedIsVisible && "".concat(overlayBlockClass, "--is-visible"), overlayBlockClass)
-  }, children), portalNode)));
+  }, children),
+  // Default to `document.body` when `portalNode` is `null`
+  portalNode || document.body)));
 });
 
 // Return a placeholder if not released and not enabled by feature flag

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

@@ -7,15 +7,16 @@ declare namespace ConditionBlock {
     namespace propTypes {
         let addConditionHandler: PropTypes.Requireable<(...args: any[]) => any>;
         let aria: PropTypes.Requireable<object>;
+        let condition: PropTypes.Requireable<object>;
         let conditionIndex: PropTypes.Requireable<number>;
         let conjunction: PropTypes.Requireable<string>;
         let group: PropTypes.Requireable<object>;
+        let isLastCondition: PropTypes.Requireable<(...args: any[]) => any>;
         let isStatement: PropTypes.Requireable<boolean>;
         let onChange: PropTypes.Requireable<(...args: any[]) => any>;
         let onConnectorOperatorChange: PropTypes.Requireable<(...args: any[]) => any>;
         let onRemove: PropTypes.Requireable<(...args: any[]) => any>;
         let onStatementChange: PropTypes.Requireable<(...args: any[]) => any>;
-        let state: PropTypes.Requireable<object>;
     }
 }
 import PropTypes from 'prop-types';

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

@@ -37,20 +37,21 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
  */
 
 var ConditionBlock = function ConditionBlock(props) {
-  var _props$state = props.state,
-    property = _props$state.property,
-    value = _props$state.value,
-    operator = _props$state.operator;
+  var _props$condition = props.condition,
+    property = _props$condition.property,
+    value = _props$condition.value,
+    operator = _props$condition.operator;
   var onRemove = props.onRemove,
     onChange = props.onChange,
-    state = props.state,
+    condition = props.condition,
     conjunction = props.conjunction,
     onConnectorOperatorChange = props.onConnectorOperatorChange,
     isStatement = props.isStatement,
     group = props.group,
     onStatementChange = props.onStatementChange,
     addConditionHandler = props.addConditionHandler,
-    conditionIndex = props.conditionIndex;
+    conditionIndex = props.conditionIndex,
+    isLastCondition = props.isLastCondition;
   var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
     inputConfig = _useContext.inputConfig;
   var itemComponents = {
@@ -69,13 +70,9 @@ var ConditionBlock = function ConditionBlock(props) {
   var getCurrentConfig = function getCurrentConfig(property) {
     var _inputConfig$properti, _inputConfig$properti2;
     return (_inputConfig$properti = (_inputConfig$properti2 = inputConfig.properties) === null || _inputConfig$properti2 === void 0 ? void 0 : _inputConfig$properti2.filter(function (eachProperty) {
-      var _eachProperty$label;
-      return ((_eachProperty$label = eachProperty.label) === null || _eachProperty$label === void 0 ? void 0 : _eachProperty$label.toUpperCase()) == (property === null || property === void 0 ? void 0 : property.toUpperCase());
+      return eachProperty.id == property;
     })[0]) !== null && _inputConfig$properti !== void 0 ? _inputConfig$properti : {};
   };
-  var isLastCondition = function isLastCondition(conditionIndex, conditionArr) {
-    return conditionIndex + 1 >= conditionArr.length || conditionArr.length - 1 != conditionIndex && conditionArr[conditionIndex + 1].conditions;
-  };
   var _getCurrentConfig = getCurrentConfig(property),
     icon = _getCurrentConfig.icon,
     type = _getCurrentConfig.type,
@@ -90,7 +87,7 @@ var ConditionBlock = function ConditionBlock(props) {
     onConnectorOperatorChange(op);
   };
   var onPropertyChangeHandler = function onPropertyChangeHandler(newProperty) {
-    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, condition), {}, {
       property: newProperty,
       operator: undefined,
       value: '',
@@ -98,14 +95,14 @@ var ConditionBlock = function ConditionBlock(props) {
     }));
   };
   var onOperatorChangeHandler = function onOperatorChangeHandler(newOperator) {
-    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, condition), {}, {
       operator: newOperator,
       value: undefined,
       popoverToOpen: 'valueField'
     }));
   };
   var onValueChangeHandler = function onValueChangeHandler(newValue) {
-    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, condition), {}, {
       value: newValue,
       popoverToOpen: ''
     }));
@@ -134,7 +131,8 @@ var ConditionBlock = function ConditionBlock(props) {
     title: DataConfigs.translateWithId('condition'),
     "data-name": "connectorField",
     popOverClassName: "".concat(DataConfigs.blockClass, "__gap"),
-    className: "".concat(DataConfigs.blockClass, "__statement-button")
+    className: "".concat(DataConfigs.blockClass, "__statement-button"),
+    tabIndex: 0
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
     conditionState: {
       value: group.statement,
@@ -154,7 +152,7 @@ var ConditionBlock = function ConditionBlock(props) {
     renderIcon: icon !== null && icon !== void 0 ? icon : null,
     className: "".concat(DataConfigs.blockClass, "__property-field"),
     "data-name": "propertyField",
-    state: state,
+    condition: condition,
     type: type
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
     conditionState: {
@@ -169,7 +167,7 @@ var ConditionBlock = function ConditionBlock(props) {
     label: operator,
     title: DataConfigs.translateWithId('operator'),
     "data-name": "operatorField",
-    state: state,
+    condition: condition,
     type: type
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
     config: {
@@ -186,7 +184,7 @@ var ConditionBlock = function ConditionBlock(props) {
     title: label,
     showToolTip: true,
     "data-name": "valueField",
-    state: state,
+    condition: condition,
     config: config
   }, /*#__PURE__*/React__default["default"].createElement(ItemComponent, {
     conditionState: {
@@ -229,6 +227,10 @@ ConditionBlock.propTypes = {
    * object hold aria attributes
    */
   aria: index["default"].object,
+  /**
+   * object that hold the current condition
+   */
+  condition: index["default"].object,
   /**
    * index of the current condition
    */
@@ -241,6 +243,10 @@ ConditionBlock.propTypes = {
    * object that hold the current group object where is condition is part of
    */
   group: index["default"].object,
+  /**
+   * callback to add a new condition
+   */
+  isLastCondition: index["default"].func,
   /**
    *  boolean that decides to show the statement(if/ excl.if)
    */
@@ -260,11 +266,7 @@ ConditionBlock.propTypes = {
   /**
    * callback to handle the statement(if/ excl.if) change
    */
-  onStatementChange: index["default"].func,
-  /**
-   * object that hold the current condition
-   */
-  state: index["default"].object
+  onStatementChange: index["default"].func
 };
 
 exports["default"] = ConditionBlock$1;

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

@@ -33,13 +33,13 @@ var ConditionBuilderButton = function ConditionBuilderButton(_ref) {
     showToolTip = _ref.showToolTip,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var Button = function Button() {
-    return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
       // role={'gridcell'}
       tabIndex: -1,
       className: cx__default["default"]([className, "".concat(DataConfigs.blockClass, "__condition-builder-button"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__text-ellipsis"), showToolTip && !hideLabel)]),
       type: "button",
       onClick: onClick
-    }), Icon && (_Icon || (_Icon = /*#__PURE__*/React__default["default"].createElement(Icon, null))), !hideLabel && label);
+    }, rest), Icon && (_Icon || (_Icon = /*#__PURE__*/React__default["default"].createElement(Icon, null))), !hideLabel && label);
   };
   return hideLabel || showToolTip ? /*#__PURE__*/React__default["default"].createElement(react.Tooltip, _rollupPluginBabelHelpers["extends"]({
     label: label,

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

@@ -31,16 +31,16 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
   var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
     rootState = _useContext.rootState,
     setRootState = _useContext.setRootState;
-  var _useState = React.useState(true),
+  var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     isConditionBuilderActive = _useState2[0],
     setIsConditionBuilderActive = _useState2[1];
   React.useEffect(function () {
     var _rootState$groups;
     if (rootState !== null && rootState !== void 0 && (_rootState$groups = rootState.groups) !== null && _rootState$groups !== void 0 && _rootState$groups.length) {
-      setIsConditionBuilderActive(false);
-    } else {
       setIsConditionBuilderActive(true);
+    } else {
+      setIsConditionBuilderActive(false);
     }
     if (getConditionState) {
       getConditionState(rootState);
@@ -48,26 +48,16 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [rootState, conditionBuilderRef]);
-  React.useEffect(function () {
-    if (isConditionBuilderActive == false) {
-      if (conditionBuilderRef.current) {
-        var initial = conditionBuilderRef.current.querySelector('[role="gridcell"] button');
-        if (initial) {
-          initial.setAttribute('tabindex', '0');
-        }
-      }
-    }
-  }, [isConditionBuilderActive, conditionBuilderRef]);
   var onStartConditionBuilder = function onStartConditionBuilder() {
     //when add condition button is clicked.
-    setIsConditionBuilderActive(false);
+    setIsConditionBuilderActive(true);
     setRootState(initialState !== null && initialState !== void 0 ? initialState : ConditionBuilderProvider.emptyState); //here we can set an empty skeleton object for an empty condition builder,
     //or we can even pre-populate some existing builder and continue editing
   };
-  var _onRemove = React.useCallback(function (groupIndex) {
+  var _onRemove = React.useCallback(function (groupId) {
     setRootState(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rootState), {}, {
-      groups: rootState.groups.filter(function (group, gIndex) {
-        return groupIndex !== gIndex;
+      groups: rootState.groups.filter(function (group) {
+        return groupId !== group.id;
       })
     }));
   }, [setRootState, rootState]);
@@ -76,16 +66,15 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
      * This method is triggered from inner components. This will be called every time when any change is to be updated in the rootState.
      * This gets the updated group as argument.
      */
+    var groups = [].concat(_rollupPluginBabelHelpers.toConsumableArray(rootState.groups.slice(0, groupIndex)), [updatedGroup], _rollupPluginBabelHelpers.toConsumableArray(rootState.groups.slice(groupIndex + 1)));
     setRootState(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rootState), {}, {
-      groups: rootState.groups.map(function (group, gIndex) {
-        return groupIndex === gIndex ? updatedGroup : group;
-      })
+      groups: groups
     }));
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(DataConfigs.blockClass, "__content-container"),
     tabIndex: -1
-  }, isConditionBuilderActive && /*#__PURE__*/React__default["default"].createElement(react.Button, {
+  }, !isConditionBuilderActive && /*#__PURE__*/React__default["default"].createElement(react.Button, {
     className: "".concat(DataConfigs.blockClass, "__condition-builder"),
     renderIcon: function renderIcon(props) {
       return /*#__PURE__*/React__default["default"].createElement(icons.Add, _rollupPluginBabelHelpers["extends"]({
@@ -98,15 +87,16 @@ 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["default"].createElement(ConditionGroupBuilder["default"], {
+      className: "".concat(DataConfigs.blockClass, "__condition-builder__group"),
       key: groupIndex,
       aria: {
         level: 1,
         posinset: groupIndex * 2 + 1,
         setsize: rootState.groups.length * 2
       },
-      state: eachGroup,
+      group: eachGroup,
       onRemove: function onRemove() {
-        _onRemove(groupIndex);
+        _onRemove(eachGroup.id);
       },
       onChange: function onChange(updatedGroup) {
         onChangeHandler(updatedGroup, groupIndex);

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

@@ -3,11 +3,13 @@ export namespace emptyState {
         groupSeparateOperator: null;
         groupOperator: string;
         statement: string;
+        id: any;
         conditions: {
             property: undefined;
             operator: string;
             value: string;
             popoverToOpen: string;
+            id: any;
         }[];
     }[];
 }

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

@@ -12,6 +12,7 @@ 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 uuidv4 = require('../../../global/js/utils/uuidv4.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -22,11 +23,13 @@ var emptyState = {
     groupSeparateOperator: null,
     groupOperator: 'and',
     statement: 'if',
+    id: uuidv4["default"](),
     conditions: [{
       property: undefined,
       operator: '',
       value: '',
-      popoverToOpen: 'propertyField'
+      popoverToOpen: 'propertyField',
+      id: uuidv4["default"]()
     }]
   }]
 };

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

@@ -1,4 +1,4 @@
-export function ConditionBuilderItem({ children, className, label, renderIcon, title, type, showToolTip, state, popOverClassName, config, ...rest }: {
+export function ConditionBuilderItem({ children, className, label, renderIcon, title, type, showToolTip, condition, popOverClassName, config, ...rest }: {
     [x: string]: any;
     children: any;
     className: any;
@@ -7,7 +7,7 @@ export function ConditionBuilderItem({ children, className, label, renderIcon, t
     title: any;
     type: any;
     showToolTip: any;
-    state: any;
+    condition: any;
     popOverClassName: any;
     config: any;
 }): import("react/jsx-runtime").JSX.Element;
@@ -15,12 +15,12 @@ export namespace ConditionBuilderItem {
     namespace propTypes {
         let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         let className: PropTypes.Requireable<string>;
+        let condition: PropTypes.Requireable<object>;
         let config: PropTypes.Requireable<object>;
         let label: PropTypes.Requireable<NonNullable<string | any[] | null | undefined>>;
         let popOverClassName: PropTypes.Requireable<string>;
         let renderIcon: PropTypes.Requireable<object>;
         let showToolTip: PropTypes.Requireable<boolean>;
-        let state: PropTypes.Requireable<object>;
         let title: PropTypes.Requireable<string>;
         let type: PropTypes.Requireable<string>;
     }