@carbon/ibm-products 2.48.0-rc.0 → 2.49.0-rc.0

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

@@ -15,8 +15,8 @@ var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
 var index = require('../../../../node_modules/prop-types/index.js');
 var ConditionBuilderProvider = require('../../ConditionBuilderContext/ConditionBuilderProvider.js');
-var DataConfigs = require('../../ConditionBuilderContext/DataConfigs.js');
 var useTranslations = require('../../utils/useTranslations.js');
+var util = require('../../utils/util.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -38,7 +38,7 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
     _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 2),
     propertyText = _useTranslations2[0],
     clearSearchText = _useTranslations2[1];
-  var contentRef = React.useRef();
+  var contentRef = React.useRef(null);
   var _useState = React.useState(config.options),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     allOptions = _useState2[0],
@@ -105,7 +105,7 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
     if (contentRef.current) {
       var firstFocusableElement = contentRef.current.querySelector('input, button,li');
       if (firstFocusableElement) {
-        firstFocusableElement.focus();
+        firstFocusableElement === null || firstFocusableElement === void 0 || firstFocusableElement.focus();
       }
     }
   }, [allOptions]);
@@ -144,23 +144,23 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
     return _SelectSkeleton || (_SelectSkeleton = /*#__PURE__*/React__default["default"].createElement(react.SelectSkeleton, null));
   }
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__item-option"),
+    className: "".concat(util.blockClass, "__item-option"),
     ref: contentRef
-  }, allOptions.length > popOverSearchThreshold && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__item-option__search")
+  }, popOverSearchThreshold && allOptions.length > popOverSearchThreshold && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(util.blockClass, "__item-option__search")
   }, /*#__PURE__*/React__default["default"].createElement(react.Search, {
     size: "sm",
     labelText: clearSearchText,
     closeButtonLabelText: clearSearchText,
     onChange: onSearchChangeHandler
   })), multiSelectable && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__multiselectSelectionStatusContainer")
+    className: "".concat(util.blockClass, "__multiselectSelectionStatusContainer")
   }, /*#__PURE__*/React__default["default"].createElement("h4", null, /*#__PURE__*/React__default["default"].createElement("label", null, selection.length, "/", allOptions.length, " Selected")), /*#__PURE__*/React__default["default"].createElement(react.Button, {
     kind: 'ghost',
     size: 'sm',
     "data-selected-all": "".concat(selection.length == 0 ? true : false),
     onClick: handleSelectAll,
-    className: "".concat(DataConfigs.blockClass, "__selectAll-button")
+    className: "".concat(util.blockClass, "__selectAll-button")
   }, selection.length == 0 ? 'Select all' : 'Deselect all')), /*#__PURE__*/React__default["default"].createElement("ul", {
     "aria-label": getAriaLabel(),
     role: "listbox",
@@ -175,7 +175,7 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
       key: option.id,
       role: "option",
       "aria-selected": isSelected,
-      className: "".concat(DataConfigs.blockClass, "__item-option__option"),
+      className: "".concat(util.blockClass, "__item-option__option"),
       onKeyUp: function onKeyUp() {
         return false;
       },
@@ -183,17 +183,17 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
         return onClickHandler(evt, option, isSelected);
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "".concat(DataConfigs.blockClass, "__item-option__option-content")
+      className: "".concat(util.blockClass, "__item-option__option-content")
     }, multiSelectable ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "".concat(DataConfigs.blockClass, "__option-check-box")
+      className: "".concat(util.blockClass, "__option-check-box")
     }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React__default["default"].createElement(icons.CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React__default["default"].createElement(icons.Checkbox, null))), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "".concat(DataConfigs.blockClass, "__item-option__option-label")
+      className: "".concat(util.blockClass, "__item-option__option-label")
     }, option.label), Icon && /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "".concat(DataConfigs.blockClass, "__option-icon")
+      className: "".concat(util.blockClass, "__option-icon")
     }, /*#__PURE__*/React__default["default"].createElement(Icon, null))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "".concat(DataConfigs.blockClass, "__item-option__option-label")
+      className: "".concat(util.blockClass, "__item-option__option-label")
     }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, null), option.label), isSelected && /*#__PURE__*/React__default["default"].createElement(icons.Checkmark, {
-      className: "".concat(DataConfigs.blockClass, "__checkmark")
+      className: "".concat(util.blockClass, "__checkmark")
     }))));
   })));
 };

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

@@ -1,15 +1,36 @@
-export function ConditionBuilderItemText({ conditionState, onChange, config, type, }: {
-    conditionState: any;
-    onChange: any;
-    config: any;
-    type: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace ConditionBuilderItemText {
-    namespace propTypes {
-        let conditionState: PropTypes.Requireable<object>;
-        let config: PropTypes.Requireable<object>;
-        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        let type: PropTypes.Requireable<string>;
-    }
-}
+/**
+ * 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 PropTypes from 'prop-types';
+import { Condition, PropertyConfigText, PropertyConfigTextArea } from '../../ConditionBuilder.types';
+interface ConditionBuilderItemTextProps {
+    conditionState: Condition;
+    config: PropertyConfigText | PropertyConfigTextArea;
+    onChange: (value: string) => void;
+    type: 'textarea' | 'text';
+}
+export declare const ConditionBuilderItemText: {
+    ({ conditionState, onChange, config, type, }: ConditionBuilderItemTextProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * current condition object
+         */
+        conditionState: PropTypes.Requireable<object>;
+        /**
+         * config of the current property
+         */
+        config: PropTypes.Requireable<object>;
+        /**
+         * callback to update state oin date change
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * current input type
+         */
+        type: PropTypes.Requireable<string>;
+    };
+};
+export {};

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

@@ -13,7 +13,6 @@ var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabel
 var React = require('react');
 var react = require('@carbon/react');
 var index = require('../../../../node_modules/prop-types/index.js');
-var DataConfigs = require('../../ConditionBuilderContext/DataConfigs.js');
 var util = require('../../utils/util.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -26,17 +25,17 @@ var ConditionBuilderItemText = function ConditionBuilderItemText(_ref) {
     _onChange = _ref.onChange,
     config = _ref.config,
     type = _ref.type;
-  var inputProps = _rollupPluginBabelHelpers.objectSpread2({
-    labelText: conditionState.property,
+  var inputProps = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), {}, {
     hideLabel: true,
     value: util.checkIsValid(conditionState.value) ? conditionState.value : '',
     id: (_conditionState$prope = conditionState.property) === null || _conditionState$prope === void 0 ? void 0 : _conditionState$prope.replace(/\s/g, ''),
     onChange: function onChange(evt) {
       _onChange(evt.target.value);
-    }
-  }, config);
+    },
+    labelText: conditionState.property
+  });
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__item-text")
+    className: "".concat(util.blockClass, "__item-text")
   }, type == 'textarea' ? /*#__PURE__*/React__default["default"].createElement(react.TextArea, inputProps) : /*#__PURE__*/React__default["default"].createElement(react.TextInput, inputProps));
 };
 ConditionBuilderItemText.propTypes = {

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

@@ -1,11 +1,26 @@
-export function ConditionBuilderItemTime({ onChange, config }: {
-    onChange: any;
-    config: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace ConditionBuilderItemTime {
-    namespace propTypes {
-        let config: PropTypes.Requireable<object>;
-        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-}
+/**
+ * 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 PropTypes from 'prop-types';
+import { PropertyConfigTime } from '../../ConditionBuilder.types';
+interface ConditionBuilderItemTime {
+    onChange: (value: string | undefined) => void;
+    config: PropertyConfigTime['config'];
+}
+export declare const ConditionBuilderItemTime: {
+    ({ onChange, config, }: ConditionBuilderItemTime): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * current config object that this property is part of
+         */
+        config: PropTypes.Requireable<object>;
+        /**
+         * callback to update state oin date change
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+};
+export {};

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

@@ -13,7 +13,7 @@ var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabel
 var React = require('react');
 var react = require('@carbon/react');
 var index = require('../../../../node_modules/prop-types/index.js');
-var DataConfigs = require('../../ConditionBuilderContext/DataConfigs.js');
+var util = require('../../utils/util.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -51,7 +51,7 @@ var ConditionBuilderItemTime = function ConditionBuilderItemTime(_ref) {
     setTimeValue(evt.target.value);
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__item-time")
+    className: "".concat(util.blockClass, "__item-time")
   }, /*#__PURE__*/React__default["default"].createElement(react.TimePicker, {
     id: "time-picker",
     labelText: "Select a time",

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

@@ -1,24 +1,51 @@
-export default ConditionGroupBuilder;
+/**
+ * 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 PropTypes from 'prop-types';
+import { ConditionGroup } from '../ConditionBuilder.types';
 /**
  *
  *  state - this is the current group that is being rendered . This can be a inner group or outer group
  * All the inner components of group are called from here.
  * @returns
  */
-declare function ConditionGroupBuilder({ group, aria, onRemove, onChange, className, }: {
-    group: any;
-    aria: any;
-    onRemove: any;
-    onChange: 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 group: PropTypes.Requireable<object>;
-        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        let onRemove: PropTypes.Requireable<(...args: any[]) => any>;
-    }
+interface ConditionGroupBuilderProps {
+    group: ConditionGroup;
+    onRemove: (e: Event) => void;
+    onChange: (group: ConditionGroup) => void;
+    className?: string;
+    aria: {
+        level: number;
+        posinset: number;
+        setsize: number;
+    };
 }
-import PropTypes from 'prop-types';
+declare const ConditionGroupBuilder: {
+    ({ group, aria, onRemove, onChange, className, }: ConditionGroupBuilderProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * object contains the aria attributes
+         */
+        aria: PropTypes.Requireable<object>;
+        /**
+         * state defines the current group
+         */
+        /**
+         * Provide an optional class to be applied to the containing node.
+         */
+        className: PropTypes.Requireable<string>;
+        group: PropTypes.Requireable<object>;
+        /**
+         * callback to update the current condition of the state tree
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * call back to remove the particular group from the state tree
+         */
+        onRemove: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+};
+export default ConditionGroupBuilder;

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

@@ -14,7 +14,6 @@ var React = require('react');
 var ConditionBlock = require('../ConditionBlock/ConditionBlock.js');
 var index = require('../../../node_modules/prop-types/index.js');
 var cx = require('classnames');
-var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
 var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
 var util = require('../utils/util.js');
 var ConditionConnector = require('../ConditionBuilderConnector/ConditionConnector.js');
@@ -23,6 +22,7 @@ var uuidv4 = require('../../../global/js/utils/uuidv4.js');
 var ConditionPreview = require('../ConditionPreview/ConditionPreview.js');
 var ItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js');
 var useTranslations = require('../utils/useTranslations.js');
+var useDataConfigs = require('../utils/useDataConfigs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -48,6 +48,8 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     conditionBuilderGroupText = _useTranslations2[0],
     conditionText = _useTranslations2[1],
     conditionBuilderText = _useTranslations2[2];
+  var _useDataConfigs = useDataConfigs.useDataConfigs(),
+    statementConfig = _useDataConfigs.statementConfig;
   var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
     variant = _useContext.variant,
     conditionBuilderRef = _useContext.conditionBuilderRef;
@@ -60,23 +62,25 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     showConditionSubGroupPreview = _useState4[0],
     setShowConditionSubGroupPreview = _useState4[1];
   React.useState(false);
-  var conditionBuilderContentRef = React.useRef();
+  var conditionBuilderContentRef = React.useRef(null);
   var onRemoveHandler = function onRemoveHandler(conditionId, evt, conditionIndex) {
-    if (group.conditions.length > 1) {
-      variant == 'tree' ? handleFocusOnCloseTree(evt) : handleFocusOnClose(evt, conditionIndex);
+    if (group && group.conditions && group.conditions.length > 1) {
+      variant == util.HIERARCHICAL_VARIANT ? handleFocusOnCloseHierarchical(evt) : handleFocusOnClose(evt, conditionIndex);
       if (!checkGroupHaveCondition(group.conditions, conditionId)) {
+        var _group$conditions;
         //when we delete the last  condition of a group without deleting  the subgroup, we need to restructure the group.
         //we will shift the group one level up. The subgroups will open up as conditions.
 
         //spreading out the condition inside the subgroup
-        var allConditions = group.conditions.reduce(function (acc, condition) {
-          if (condition.conditions) {
+        var allConditions = group === null || group === void 0 || (_group$conditions = group.conditions) === null || _group$conditions === void 0 ? void 0 : _group$conditions.reduce(function (acc, condition) {
+          var _condition = condition;
+          if (_condition.conditions) {
             //this is a subgroup
-            return acc.concat(condition.conditions);
+            return acc.concat(_condition.conditions);
           }
           return acc;
         }, []);
-        onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
+        onChange === null || onChange === void 0 || onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
           conditions: allConditions
         }));
       } else {
@@ -86,15 +90,16 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
         //This is to handle a edge case.
         //When a group has structure as 1 condition,1 subgroup, 1 condition and if we delete first condition,
         //the group will start with a subgroup. To avoid this,opening up that subgroup.
-        if (filteredConditions !== null && filteredConditions !== void 0 && filteredConditions[0].conditions) {
-          filteredConditions.splice.apply(filteredConditions, [0, 1].concat(_rollupPluginBabelHelpers.toConsumableArray(filteredConditions[0].conditions)));
+        if ((filteredConditions === null || filteredConditions === void 0 ? void 0 : filteredConditions[0]).conditions) {
+          var firstFilteredConditions = filteredConditions[0];
+          filteredConditions.splice.apply(filteredConditions, [0, 1].concat(_rollupPluginBabelHelpers.toConsumableArray(firstFilteredConditions === null || firstFilteredConditions === void 0 ? void 0 : firstFilteredConditions.conditions)));
         }
-        onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
+        onChange === null || onChange === void 0 || onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
           conditions: filteredConditions
         }));
       }
     } else {
-      onRemove(evt);
+      onRemove === null || onRemove === void 0 || onRemove(evt);
     }
   };
   //check to identify a group without a plain condition
@@ -104,9 +109,11 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     });
   };
   var onChangeHandler = function onChangeHandler(updatedCondition, conditionIndex) {
-    var updatedConditions = [].concat(_rollupPluginBabelHelpers.toConsumableArray(group.conditions.slice(0, conditionIndex)), [updatedCondition], _rollupPluginBabelHelpers.toConsumableArray(group.conditions.slice(conditionIndex + 1)));
-    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
-      conditions: updatedConditions
+    var _group$id;
+    var updatedConditions = [].concat(_rollupPluginBabelHelpers.toConsumableArray(group !== null && group !== void 0 && group.conditions ? group.conditions.slice(0, conditionIndex) : []), [updatedCondition], _rollupPluginBabelHelpers.toConsumableArray(group !== null && group !== void 0 && group.conditions ? group.conditions.slice(conditionIndex + 1) : []));
+    onChange === null || onChange === void 0 || onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
+      conditions: updatedConditions,
+      id: (_group$id = group === null || group === void 0 ? void 0 : group.id) !== null && _group$id !== void 0 ? _group$id : uuidv4["default"]()
     }));
   };
   var addConditionHandler = function addConditionHandler(conditionIndex) {
@@ -117,8 +124,8 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       popoverToOpen: 'propertyField',
       id: uuidv4["default"]()
     };
-    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
-      conditions: [].concat(_rollupPluginBabelHelpers.toConsumableArray(group.conditions.slice(0, conditionIndex + 1)), [newCondition], _rollupPluginBabelHelpers.toConsumableArray(group.conditions.slice(conditionIndex + 1)))
+    onChange === null || onChange === void 0 || onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
+      conditions: [].concat(_rollupPluginBabelHelpers.toConsumableArray(group.conditions ? group.conditions.slice(0, conditionIndex + 1) : []), [newCondition], _rollupPluginBabelHelpers.toConsumableArray(group.conditions ? group.conditions.slice(conditionIndex + 1) : []))
     }));
   };
   var handleFocusOnClose = function handleFocusOnClose(e, conditionIndex) {
@@ -126,14 +133,14 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     //get all close buttons.
     //if the last condition is closing, focus the second last one.
     //or focus the next one.
-    var currentGroupCloseButtons = (_e$currentTarget$clos = e.currentTarget.closest(".".concat(DataConfigs.blockClass, "__group"))) === null || _e$currentTarget$clos === void 0 ? void 0 : _e$currentTarget$clos.querySelectorAll('[data-name="closeCondition"]');
+    var currentGroupCloseButtons = (_e$currentTarget$clos = e.currentTarget.closest(".".concat(util.blockClass, "__group"))) === null || _e$currentTarget$clos === void 0 ? void 0 : _e$currentTarget$clos.querySelectorAll('[data-name="closeCondition"]');
     if (conditionIndex == currentGroupCloseButtons.length - 1) {
       util.manageTabIndexAndFocus(currentGroupCloseButtons[conditionIndex - 1], conditionBuilderRef);
     } else {
       util.manageTabIndexAndFocus(currentGroupCloseButtons[conditionIndex + 1], conditionBuilderRef);
     }
   };
-  var handleFocusOnCloseTree = function handleFocusOnCloseTree(evt) {
+  var handleFocusOnCloseHierarchical = function handleFocusOnCloseHierarchical(evt) {
     var _evt$currentTarget, _evt$currentTarget2, _conditionBuilderCont, _conditionBuilderCont2;
     //getting the current aria-level and aria-posinset.
     var currentLevel = (_evt$currentTarget = evt.currentTarget) === null || _evt$currentTarget === void 0 || (_evt$currentTarget = _evt$currentTarget.closest('[role="row"]')) === null || _evt$currentTarget === void 0 ? void 0 : _evt$currentTarget.getAttribute('aria-level');
@@ -145,9 +152,9 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     //checking if next level is a valid condition. If then, focus the close button inside that condition
     //Otherwise , check the previous item is a valid condition
 
-    if (nextElement !== null && nextElement !== void 0 && nextElement.classList.contains("".concat(DataConfigs.blockClass, "__condition-block"))) {
+    if (nextElement !== null && nextElement !== void 0 && nextElement.classList.contains("".concat(util.blockClass, "__condition-block"))) {
       util.manageTabIndexAndFocus(nextElement === null || nextElement === void 0 ? void 0 : nextElement.querySelector('[data-name="closeCondition"]'), conditionBuilderRef);
-    } else if (prevElement !== null && prevElement !== void 0 && prevElement.classList.contains("".concat(DataConfigs.blockClass, "__condition-block"))) {
+    } else if (prevElement !== null && prevElement !== void 0 && prevElement.classList.contains("".concat(util.blockClass, "__condition-block"))) {
       util.manageTabIndexAndFocus(prevElement === null || prevElement === void 0 ? void 0 : prevElement.querySelector('[data-name="closeCondition"]'), conditionBuilderRef);
     }
     //If there are no valid condition in this group, focus next or previous row
@@ -163,10 +170,11 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
           ariaPosInSet: nextRow.ariaPosInSet
         };
         setTimeout(function () {
-          var currentRowToFocus = conditionBuilderContentRef.current.querySelector("[role=\"row\"][aria-level=\"".concat(rowIdentity.ariaLevel, "\"][aria-posinset=\"").concat(rowIdentity.ariaPosInSet, "\"]"));
+          var _conditionBuilderCont5;
+          var currentRowToFocus = (_conditionBuilderCont5 = conditionBuilderContentRef.current) === null || _conditionBuilderCont5 === void 0 ? void 0 : _conditionBuilderCont5.querySelector("[role=\"row\"][aria-level=\"".concat(rowIdentity.ariaLevel, "\"][aria-posinset=\"").concat(rowIdentity.ariaPosInSet, "\"]"));
           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) {
+      } else if (prevRows !== null && prevRows !== void 0 && prevRows.length && prevRows.length > 1) {
         var _prevRows;
         util.manageTabIndexAndFocus((_prevRows = prevRows[prevRows.length - 2]) === null || _prevRows === void 0 ? void 0 : _prevRows.querySelector('[data-name="closeCondition"]'), conditionBuilderRef);
       }
@@ -174,9 +182,9 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
   };
   var addConditionSubGroupHandler = function addConditionSubGroupHandler(conditionIndex) {
     onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
-      conditions: [].concat(_rollupPluginBabelHelpers.toConsumableArray(group.conditions.slice(0, conditionIndex + 1)), [{
+      conditions: [].concat(_rollupPluginBabelHelpers.toConsumableArray(group.conditions ? group.conditions.slice(0, conditionIndex + 1) : []), [{
+        statement: 'ifAll',
         groupOperator: 'and',
-        statement: 'if',
         conditions: [{
           property: undefined,
           operator: '',
@@ -185,7 +193,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
           id: uuidv4["default"]()
         }],
         id: uuidv4["default"]()
-      }], _rollupPluginBabelHelpers.toConsumableArray(group.conditions.slice(conditionIndex + 1)))
+      }], _rollupPluginBabelHelpers.toConsumableArray(group.conditions ? group.conditions.slice(conditionIndex + 1) : []))
     }));
   };
   var isLastCondition = function isLastCondition(conditionIndex, conditionArr) {
@@ -205,7 +213,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
   };
   var onStatementChangeHandler = function onStatementChangeHandler(updatedStatement) {
     var _statementConfig$find;
-    var groupOperator = (_statementConfig$find = DataConfigs.statementConfig.find(function (statement) {
+    var groupOperator = (_statementConfig$find = statementConfig.find(function (statement) {
       return statement.id == updatedStatement;
     })) === null || _statementConfig$find === void 0 ? void 0 : _statementConfig$find.connector;
     onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
@@ -218,24 +226,25 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       groupOperator: op
     }));
   };
-  var getSentenceVariant = function getSentenceVariant() {
-    var _group$conditions;
+  var getNonHierarchicalVariant = function getNonHierarchicalVariant() {
+    var _group$conditions2;
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "".concat(className, "  eachGroup")
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "".concat(DataConfigs.blockClass, "__condition-wrapper"),
+      className: "".concat(util.blockClass, "__condition-wrapper"),
       role: "grid",
       "aria-label": conditionBuilderText
-    }, group === null || group === void 0 || (_group$conditions = group.conditions) === null || _group$conditions === void 0 ? void 0 : _group$conditions.map(function (eachCondition, conditionIndex) {
+    }, group === null || group === void 0 || (_group$conditions2 = group.conditions) === null || _group$conditions2 === void 0 ? void 0 : _group$conditions2.map(function (eachCondition, conditionIndex) {
+      var _group$conditions3;
       return /*#__PURE__*/React__default["default"].createElement("div", {
         key: eachCondition.id,
-        className: "".concat(DataConfigs.blockClass, "__group-wrapper")
+        className: "".concat(util.blockClass, "__group-wrapper")
       }, /*#__PURE__*/React__default["default"].createElement(ConditionBlock["default"], {
         conjunction: conditionIndex > 0 ? group.groupOperator : undefined,
         aria: {
           level: aria.level + 1,
           posinset: conditionIndex + 1,
-          setsize: group.conditions.length
+          setsize: group === null || group === void 0 || (_group$conditions3 = group.conditions) === null || _group$conditions3 === void 0 ? void 0 : _group$conditions3.length
         },
         isStatement: conditionIndex == 0,
         condition: eachCondition,
@@ -254,10 +263,10 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       }));
     })));
   };
-  var getTreeVariant = function getTreeVariant() {
-    var _group$conditions2;
+  var getHierarchicalVariant = function getHierarchicalVariant() {
+    var _group$conditions4;
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "".concat(className, " ").concat(DataConfigs.blockClass, "__condition-wrapper"),
+      className: "".concat(className, " ").concat(util.blockClass, "__condition-wrapper"),
       role: aria.level === 1 ? 'rowgroup' : undefined,
       "aria-label": aria.level == 1 ? conditionBuilderGroupText : undefined,
       ref: conditionBuilderContentRef
@@ -271,8 +280,8 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       label: group.statement,
       title: conditionText,
       "data-name": "connectorField",
-      popOverClassName: "".concat(DataConfigs.blockClass, "__gap"),
-      className: "".concat(DataConfigs.blockClass, "__statement-button")
+      popOverClassName: "".concat(util.blockClass, "__gap"),
+      className: "".concat(util.blockClass, "__statement-button")
     }, /*#__PURE__*/React__default["default"].createElement(ItemOption.ItemOption, {
       conditionState: {
         value: group.statement,
@@ -283,37 +292,39 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
         onStatementChangeHandler(v);
       },
       config: {
-        options: DataConfigs.statementConfig
+        options: statementConfig,
+        isStatement: true
       }
-    }))), group === null || group === void 0 || (_group$conditions2 = group.conditions) === null || _group$conditions2 === void 0 ? void 0 : _group$conditions2.map(function (eachCondition, conditionIndex) {
+    }))), group === null || group === void 0 || (_group$conditions4 = group.conditions) === null || _group$conditions4 === void 0 ? void 0 : _group$conditions4.map(function (eachCondition, conditionIndex) {
+      var _group$conditions$len, _group$conditions5, _group$conditions$len2, _group$conditions6;
       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(util.blockClass, "__condition-block subgroup  ").concat(util.blockClass, "__gap"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(util.blockClass, "__gap-bottom"), group && group.conditions && group.conditions.length < conditionIndex + 1), {})
       }, /*#__PURE__*/React__default["default"].createElement(ConditionConnector["default"], {
-        className: "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-bottom ").concat(DataConfigs.blockClass, "__groupConnector"),
+        className: "".concat(util.blockClass, "__gap ").concat(util.blockClass, "__gap-bottom ").concat(util.blockClass, "__groupConnector"),
         operator: group.groupOperator,
         "aria-hidden": true
       }), /*#__PURE__*/React__default["default"].createElement(ConditionGroupBuilder, {
         aria: {
           level: aria.level + 1,
           posinset: conditionIndex + 1,
-          setsize: group.conditions.length
+          setsize: (_group$conditions$len = (_group$conditions5 = group.conditions) === null || _group$conditions5 === void 0 ? void 0 : _group$conditions5.length) !== null && _group$conditions$len !== void 0 ? _group$conditions$len : 0
         },
-        className: "".concat(DataConfigs.blockClass, "__group"),
+        className: "".concat(util.blockClass, "__group"),
         group: eachCondition,
         onChange: function onChange(updatedConditions) {
           onChangeHandler(updatedConditions, conditionIndex);
         },
         onRemove: function onRemove(e) {
-          onRemoveHandler(eachCondition.id, e);
+          onRemoveHandler(eachCondition.id, e, conditionIndex);
         }
       })) : /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(ConditionBlock["default"], {
         conjunction: conditionIndex > 0 ? group.groupOperator : undefined,
         aria: {
           level: aria.level + 1,
           posinset: conditionIndex + 1,
-          setsize: group.conditions.length
+          setsize: (_group$conditions$len2 = (_group$conditions6 = group.conditions) === null || _group$conditions6 === void 0 ? void 0 : _group$conditions6.length) !== null && _group$conditions$len2 !== void 0 ? _group$conditions$len2 : 0
         },
         isStatement: false,
         condition: eachCondition,
@@ -325,7 +336,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
           onChangeHandler(updatedConditions, conditionIndex);
         },
         onRemove: function onRemove(e) {
-          onRemoveHandler(eachCondition.id, e);
+          onRemoveHandler(eachCondition.id, e, conditionIndex);
         },
         onConnectorOperatorChange: onConnectorOperatorChange,
         onStatementChange: onStatementChangeHandler,
@@ -347,9 +358,8 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       }))));
     }));
   };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, variant == 'tree' && getTreeVariant(), variant == 'sentence' && getSentenceVariant());
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, variant == util.HIERARCHICAL_VARIANT && getHierarchicalVariant(), variant == util.NON_HIERARCHICAL_VARIANT && getNonHierarchicalVariant());
 };
-var ConditionGroupBuilder$1 = ConditionGroupBuilder;
 ConditionGroupBuilder.propTypes = {
   /**
    * object contains the aria attributes
@@ -373,4 +383,4 @@ ConditionGroupBuilder.propTypes = {
   onRemove: index["default"].func
 };
 
-exports["default"] = ConditionGroupBuilder$1;
+exports["default"] = ConditionGroupBuilder;