@carbon/ibm-products 2.37.0 → 2.38.0

package/es/components/ConditionBuilder/ConditionBlock/ConditionBlock.js

@@ -28,20 +28,21 @@ import ConditionBuilderAdd from '../ConditionBuilderAdd/ConditionBuilderAdd.js';
  */
 
 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 = useContext(ConditionBuilderContext),
     inputConfig = _useContext.inputConfig;
   var itemComponents = {
@@ -60,13 +61,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,
@@ -81,7 +78,7 @@ var ConditionBlock = function ConditionBlock(props) {
     onConnectorOperatorChange(op);
   };
   var onPropertyChangeHandler = function onPropertyChangeHandler(newProperty) {
-    onChange(_objectSpread2(_objectSpread2({}, state), {}, {
+    onChange(_objectSpread2(_objectSpread2({}, condition), {}, {
       property: newProperty,
       operator: undefined,
       value: '',
@@ -89,14 +86,14 @@ var ConditionBlock = function ConditionBlock(props) {
     }));
   };
   var onOperatorChangeHandler = function onOperatorChangeHandler(newOperator) {
-    onChange(_objectSpread2(_objectSpread2({}, state), {}, {
+    onChange(_objectSpread2(_objectSpread2({}, condition), {}, {
       operator: newOperator,
       value: undefined,
       popoverToOpen: 'valueField'
     }));
   };
   var onValueChangeHandler = function onValueChangeHandler(newValue) {
-    onChange(_objectSpread2(_objectSpread2({}, state), {}, {
+    onChange(_objectSpread2(_objectSpread2({}, condition), {}, {
       value: newValue,
       popoverToOpen: ''
     }));
@@ -125,7 +122,8 @@ var ConditionBlock = function ConditionBlock(props) {
     title: translateWithId('condition'),
     "data-name": "connectorField",
     popOverClassName: "".concat(blockClass, "__gap"),
-    className: "".concat(blockClass, "__statement-button")
+    className: "".concat(blockClass, "__statement-button"),
+    tabIndex: 0
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderItemOption, {
     conditionState: {
       value: group.statement,
@@ -145,7 +143,7 @@ var ConditionBlock = function ConditionBlock(props) {
     renderIcon: icon !== null && icon !== void 0 ? icon : null,
     className: "".concat(blockClass, "__property-field"),
     "data-name": "propertyField",
-    state: state,
+    condition: condition,
     type: type
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderItemOption, {
     conditionState: {
@@ -160,7 +158,7 @@ var ConditionBlock = function ConditionBlock(props) {
     label: operator,
     title: translateWithId('operator'),
     "data-name": "operatorField",
-    state: state,
+    condition: condition,
     type: type
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderItemOption, {
     config: {
@@ -177,7 +175,7 @@ var ConditionBlock = function ConditionBlock(props) {
     title: label,
     showToolTip: true,
     "data-name": "valueField",
-    state: state,
+    condition: condition,
     config: config
   }, /*#__PURE__*/React__default.createElement(ItemComponent, {
     conditionState: {
@@ -220,6 +218,10 @@ ConditionBlock.propTypes = {
    * object hold aria attributes
    */
   aria: PropTypes.object,
+  /**
+   * object that hold the current condition
+   */
+  condition: PropTypes.object,
   /**
    * index of the current condition
    */
@@ -232,6 +234,10 @@ ConditionBlock.propTypes = {
    * object that hold the current group object where is condition is part of
    */
   group: PropTypes.object,
+  /**
+   * callback to add a new condition
+   */
+  isLastCondition: PropTypes.func,
   /**
    *  boolean that decides to show the statement(if/ excl.if)
    */
@@ -251,11 +257,7 @@ ConditionBlock.propTypes = {
   /**
    * callback to handle the statement(if/ excl.if) change
    */
-  onStatementChange: PropTypes.func,
-  /**
-   * object that hold the current condition
-   */
-  state: PropTypes.object
+  onStatementChange: PropTypes.func
 };
 
 export { ConditionBlock$1 as default };

package/es/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js

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

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useContext, useState, useEffect, useCallback } from 'react';
 import PropTypes from '../../../node_modules/prop-types/index.js';
 import { Button } from '@carbon/react';
@@ -23,16 +23,16 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
   var _useContext = useContext(ConditionBuilderContext),
     rootState = _useContext.rootState,
     setRootState = _useContext.setRootState;
-  var _useState = useState(true),
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isConditionBuilderActive = _useState2[0],
     setIsConditionBuilderActive = _useState2[1];
   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);
@@ -40,26 +40,16 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [rootState, conditionBuilderRef]);
-  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 : 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 = useCallback(function (groupIndex) {
+  var _onRemove = useCallback(function (groupId) {
     setRootState(_objectSpread2(_objectSpread2({}, rootState), {}, {
-      groups: rootState.groups.filter(function (group, gIndex) {
-        return groupIndex !== gIndex;
+      groups: rootState.groups.filter(function (group) {
+        return groupId !== group.id;
       })
     }));
   }, [setRootState, rootState]);
@@ -68,16 +58,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(_toConsumableArray(rootState.groups.slice(0, groupIndex)), [updatedGroup], _toConsumableArray(rootState.groups.slice(groupIndex + 1)));
     setRootState(_objectSpread2(_objectSpread2({}, rootState), {}, {
-      groups: rootState.groups.map(function (group, gIndex) {
-        return groupIndex === gIndex ? updatedGroup : group;
-      })
+      groups: groups
     }));
   };
   return /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__content-container"),
     tabIndex: -1
-  }, isConditionBuilderActive && /*#__PURE__*/React__default.createElement(Button, {
+  }, !isConditionBuilderActive && /*#__PURE__*/React__default.createElement(Button, {
     className: "".concat(blockClass, "__condition-builder"),
     renderIcon: function renderIcon(props) {
       return /*#__PURE__*/React__default.createElement(Add, _extends({
@@ -90,15 +79,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.createElement(ConditionGroupBuilder, {
+      className: "".concat(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/es/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/es/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.js

@@ -8,17 +8,20 @@
 import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, createContext } from 'react';
 import PropTypes from '../../../node_modules/prop-types/index.js';
+import uuidv4 from '../../../global/js/utils/uuidv4.js';
 
 var emptyState = {
   groups: [{
     groupSeparateOperator: null,
     groupOperator: 'and',
     statement: 'if',
+    id: uuidv4(),
     conditions: [{
       property: undefined,
       operator: '',
       value: '',
-      popoverToOpen: 'propertyField'
+      popoverToOpen: 'propertyField',
+      id: uuidv4()
     }]
   }]
 };

package/es/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>;
     }

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

@@ -13,7 +13,7 @@ import { Add } from '@carbon/react/icons';
 import { valueRenderers, translateWithId, blockClass } from '../ConditionBuilderContext/DataConfigs.js';
 import { ConditionBuilderButton } from '../ConditionBuilderButton/ConditionBuilderButton.js';
 
-var _excluded = ["children", "className", "label", "renderIcon", "title", "type", "showToolTip", "state", "popOverClassName", "config"];
+var _excluded = ["children", "className", "label", "renderIcon", "title", "type", "showToolTip", "condition", "popOverClassName", "config"];
 var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -22,7 +22,7 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
     title = _ref.title,
     type = _ref.type,
     showToolTip = _ref.showToolTip,
-    state = _ref.state,
+    condition = _ref.condition,
     popOverClassName = _ref.popOverClassName,
     config = _ref.config,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -45,17 +45,17 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
      * rest['data-name'] holds the current field name
      * popoverToOpen hold the next popover to be opened if required
      */
-    if (state) {
+    if (condition) {
       var currentField = rest['data-name'];
       //if any condition is changed, state prop is triggered
-      if (state.popoverToOpen && currentField !== state.popoverToOpen) {
+      if (condition.popoverToOpen && currentField !== condition.popoverToOpen) {
         // close the previous popover
         setOpen(false);
-      } else if (currentField == 'valueField' && type == 'option' && state.operator !== 'one-of') {
+      } else if (currentField == 'valueField' && type == 'option' && condition.operator !== 'one-of') {
         //close the current popover if the field is valueField and  is a single select dropdown. For all other inputs ,popover need to be open on value changes.
         setOpen(false);
       }
-      if (state.popoverToOpen == currentField) {
+      if (condition.popoverToOpen == currentField) {
         //current popover need to be opened
         setOpen(true);
       }
@@ -65,7 +65,7 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
       setOpen(false);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state, label]);
+  }, [condition, label]);
   useEffect(function () {
     //this will focus the first input field in the popover
     if (open && contentRef.current) {
@@ -113,6 +113,10 @@ ConditionBuilderItem.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
+  /**
+   * current condition state object
+   */
+  condition: PropTypes.object,
   /**
    * this is the config object again the current property from inputConfig
    */
@@ -134,10 +138,6 @@ ConditionBuilderItem.propTypes = {
    * show tool tip
    */
   showToolTip: PropTypes.bool,
-  /**
-   * current condition state object
-   */
-  state: PropTypes.object,
   /**
    * title of the popover
    */

package/es/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.d.ts

@@ -5,20 +5,22 @@ export default ConditionGroupBuilder;
  * All the inner components of group are called from here.
  * @returns
  */
-declare function ConditionGroupBuilder({ state, aria, onRemove, onChange, conditionBuilderRef, }: {
-    state: any;
+declare function ConditionGroupBuilder({ group, aria, onRemove, onChange, conditionBuilderRef, className, }: {
+    group: any;
     aria: any;
     onRemove: any;
     onChange: any;
     conditionBuilderRef: any;
+    className: any;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace ConditionGroupBuilder {
     namespace propTypes {
         let aria: PropTypes.Requireable<object>;
+        let className: PropTypes.Requireable<string>;
         let conditionBuilderRef: PropTypes.Requireable<object>;
+        let group: PropTypes.Requireable<object>;
         let onChange: PropTypes.Requireable<(...args: any[]) => any>;
         let onRemove: PropTypes.Requireable<(...args: any[]) => any>;
-        let state: PropTypes.Requireable<object>;
     }
 }
 import PropTypes from 'prop-types';

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

@@ -10,6 +10,7 @@ import React__default from 'react';
 import ConditionBlock from '../ConditionBlock/ConditionBlock.js';
 import PropTypes from '../../../node_modules/prop-types/index.js';
 import { blockClass, translateWithId } from '../ConditionBuilderContext/DataConfigs.js';
+import uuidv4 from '../../../global/js/utils/uuidv4.js';
 
 /**
  *
@@ -18,17 +19,18 @@ import { blockClass, translateWithId } from '../ConditionBuilderContext/DataConf
  * @returns
  */
 var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
-  var _state$conditions;
-  var state = _ref.state,
+  var _group$conditions;
+  var group = _ref.group,
     aria = _ref.aria,
     onRemove = _ref.onRemove,
     onChange = _ref.onChange,
-    conditionBuilderRef = _ref.conditionBuilderRef;
-  var onRemoveHandler = function onRemoveHandler(conditionIndex, e) {
-    if (state.conditions.length > 1) {
-      onChange(_objectSpread2(_objectSpread2({}, state), {}, {
-        conditions: state.conditions.filter(function (condition, cIndex) {
-          return conditionIndex !== cIndex;
+    conditionBuilderRef = _ref.conditionBuilderRef,
+    className = _ref.className;
+  var onRemoveHandler = function onRemoveHandler(conditionId, e) {
+    if (group.conditions.length > 1) {
+      onChange(_objectSpread2(_objectSpread2({}, group), {}, {
+        conditions: group.conditions.filter(function (condition) {
+          return conditionId !== condition.id;
         })
       }));
       handleFocusOnClose(e);
@@ -36,23 +38,27 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       onRemove();
     }
   };
-  var onChangeHandler = function onChangeHandler(updatedConditions, conditionIndex) {
-    onChange(_objectSpread2(_objectSpread2({}, state), {}, {
-      conditions: state.conditions.map(function (condition, cIndex) {
-        return conditionIndex === cIndex ? updatedConditions : condition;
-      })
+  var onChangeHandler = function onChangeHandler(updatedCondition, conditionIndex) {
+    var updatedConditions = [].concat(_toConsumableArray(group.conditions.slice(0, conditionIndex)), [updatedCondition], _toConsumableArray(group.conditions.slice(conditionIndex + 1)));
+    onChange(_objectSpread2(_objectSpread2({}, group), {}, {
+      conditions: updatedConditions
     }));
   };
   var addConditionHandler = function addConditionHandler(conditionIndex) {
-    onChange(_objectSpread2(_objectSpread2({}, state), {}, {
-      conditions: [].concat(_toConsumableArray(state.conditions.slice(0, conditionIndex + 1)), [{
-        property: undefined,
-        operator: '',
-        value: '',
-        popoverToOpen: 'propertyField'
-      }], _toConsumableArray(state.conditions.slice(conditionIndex + 1)))
+    var newCondition = {
+      property: undefined,
+      operator: '',
+      value: '',
+      popoverToOpen: 'propertyField',
+      id: uuidv4()
+    };
+    onChange(_objectSpread2(_objectSpread2({}, group), {}, {
+      conditions: [].concat(_toConsumableArray(group.conditions.slice(0, conditionIndex + 1)), [newCondition], _toConsumableArray(group.conditions.slice(conditionIndex + 1)))
     }));
   };
+  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"]');
@@ -61,40 +67,39 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     }
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: " ".concat(blockClass, "__condition-builder__group eachGroup")
+    className: "".concat(className, "  eachGroup")
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__condition-wrapper"),
     role: "grid",
     "aria-label": translateWithId('condition_builder_group')
-  }, state === null || state === void 0 || (_state$conditions = state.conditions) === null || _state$conditions === void 0 ? void 0 : _state$conditions.map(function (eachCondition, conditionIndex) {
+  }, group === null || group === void 0 || (_group$conditions = group.conditions) === null || _group$conditions === void 0 ? void 0 : _group$conditions.map(function (eachCondition, conditionIndex) {
     return /*#__PURE__*/React__default.createElement("div", {
-      key: conditionIndex
+      key: eachCondition.id
     }, eachCondition.conditions && /*#__PURE__*/React__default.createElement(ConditionGroupBuilder, {
+      className: "".concat(blockClass, "__condition-builder__group"),
       aria: {
         level: aria.level + 1,
         posinset: conditionIndex + 1,
-        setsize: state.conditions.length
+        setsize: group.conditions.length
       },
-      state: eachCondition,
-      onChange: function onChange(updatedConditions) {
-        onChangeHandler(updatedConditions, conditionIndex);
+      group: eachCondition,
+      onChange: function onChange(updatedCondition) {
+        onChangeHandler(updatedCondition, conditionIndex);
       },
       onRemove: function onRemove(e) {
-        onRemoveHandler(conditionIndex, e);
+        onRemoveHandler(eachCondition.id, e);
       },
-      conditionBuilderRef: conditionBuilderRef,
-      key: conditionIndex
+      conditionBuilderRef: conditionBuilderRef
     }), !eachCondition.conditions && /*#__PURE__*/React__default.createElement(ConditionBlock, {
-      key: conditionIndex,
-      conjunction: conditionIndex > 0 ? state.groupOperator : undefined,
+      conjunction: conditionIndex > 0 ? group.groupOperator : undefined,
       aria: {
         level: aria.level + 1,
         posinset: conditionIndex + 1,
-        setsize: state.conditions.length
+        setsize: group.conditions.length
       },
       isStatement: conditionIndex == 0,
-      state: eachCondition,
-      group: state,
+      condition: eachCondition,
+      group: group,
       conditionIndex: conditionIndex,
       className: "".concat(blockClass, "__gap ").concat(blockClass, "__gap-bottom"),
       onChange: function onChange(updatedConditions) {
@@ -102,18 +107,19 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       },
       addConditionHandler: addConditionHandler,
       onRemove: function onRemove(e) {
-        onRemoveHandler(conditionIndex, e);
+        onRemoveHandler(eachCondition.id, e);
       },
       onConnectorOperatorChange: function onConnectorOperatorChange(op) {
-        onChange(_objectSpread2(_objectSpread2({}, state), {}, {
+        onChange(_objectSpread2(_objectSpread2({}, group), {}, {
           groupOperator: op
         }));
       },
       onStatementChange: function onStatementChange(updatedStatement) {
-        onChange(_objectSpread2(_objectSpread2({}, state), {}, {
+        onChange(_objectSpread2(_objectSpread2({}, group), {}, {
           statement: updatedStatement
         }));
-      }
+      },
+      isLastCondition: isLastCondition
     }));
   })));
 };
@@ -123,10 +129,18 @@ ConditionGroupBuilder.propTypes = {
    * object contains the aria attributes
    */
   aria: PropTypes.object,
+  /**
+   * Provide an  class to be applied to the containing node.
+   */
+  className: PropTypes.string,
   /**
    * ref of condition builder
    */
   conditionBuilderRef: PropTypes.object,
+  /**
+   * group defines the current group
+   */
+  group: PropTypes.object,
   /**
   
    * callback to update the current condition of the state tree
@@ -135,11 +149,7 @@ ConditionGroupBuilder.propTypes = {
   /**
    * call back to remove the particular group from the state tree
    */
-  onRemove: PropTypes.func,
-  /**
-   * state defines the current group
-   */
-  state: PropTypes.object
+  onRemove: PropTypes.func
 };
 
 export { ConditionGroupBuilder$1 as default };