@carbon/ibm-products 2.43.2-canary.19 → 2.43.2-canary.20

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

@@ -0,0 +1,109 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { slicedToArray as _slicedToArray } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useContext, useRef, useState, useEffect } from 'react';
+import { Search } from '@carbon/react';
+import { Checkmark } from '@carbon/react/icons';
+import PropTypes from '../../../../node_modules/prop-types/index.js';
+import { ConditionBuilderContext } from '../../ConditionBuilderContext/ConditionBuilderProvider.js';
+import { blockClass, translateWithId } from '../../ConditionBuilderContext/DataConfigs.js';
+
+var ItemOption = function ItemOption(_ref) {
+  var _ref$conditionState = _ref.conditionState,
+    conditionState = _ref$conditionState === void 0 ? {} : _ref$conditionState,
+    _ref$config = _ref.config,
+    config = _ref$config === void 0 ? {} : _ref$config,
+    onChange = _ref.onChange;
+  var _useContext = useContext(ConditionBuilderContext),
+    popOverSearchThreshold = _useContext.popOverSearchThreshold;
+  var contentRef = useRef();
+  var allOptions = config.options;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchValue = _useState2[0],
+    setSearchValue = _useState2[1];
+  var selection = conditionState.value;
+  var filteredItems = allOptions === null || allOptions === void 0 ? void 0 : allOptions.filter(function (opt) {
+    return opt.label.toLowerCase().includes(searchValue.toLowerCase());
+  });
+  useEffect(function () {
+    //this will focus the first input field in the popover
+
+    if (contentRef.current) {
+      var firstFocusableElement = contentRef.current.querySelector('input, button,li');
+      if (firstFocusableElement) {
+        firstFocusableElement.focus();
+      }
+    }
+  }, [allOptions]);
+  var onClickHandler = function onClickHandler(evt, option) {
+    onChange(option.id, evt);
+  };
+  var onSearchChangeHandler = function onSearchChangeHandler(evt) {
+    var value = evt.target.value;
+    setSearchValue(value);
+  };
+  var getAriaLabel = function getAriaLabel() {
+    return conditionState.label ? conditionState.label : conditionState.property ? conditionState.property : translateWithId('property');
+  };
+  if (!allOptions) {
+    return;
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__item-option"),
+    ref: contentRef
+  }, allOptions.length > popOverSearchThreshold && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__item-option__search")
+  }, /*#__PURE__*/React__default.createElement(Search, {
+    size: "sm",
+    labelText: translateWithId('clear_search'),
+    closeButtonLabelText: translateWithId('clear_search'),
+    onChange: onSearchChangeHandler
+  })), /*#__PURE__*/React__default.createElement("ul", {
+    "aria-label": getAriaLabel(),
+    role: "listbox"
+  }, filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.map(function (option) {
+    var isSelected = selection === option.id;
+    var Icon = option.icon;
+    return /*#__PURE__*/React__default.createElement("li", {
+      tabIndex: 0,
+      key: option.id,
+      role: "option",
+      "aria-selected": isSelected,
+      className: "".concat(blockClass, "__item-option__option"),
+      onKeyUp: function onKeyUp() {
+        return false;
+      },
+      onClick: function onClick(evt) {
+        return onClickHandler(evt, option);
+      }
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(blockClass, "__item-option__option-content")
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "".concat(blockClass, "__item-option__option-label")
+    }, Icon && /*#__PURE__*/React__default.createElement(Icon, null), option.label), isSelected && /*#__PURE__*/React__default.createElement(Checkmark, {
+      className: "".concat(blockClass, "__checkmark")
+    })));
+  })));
+};
+ItemOption.propTypes = {
+  /**
+   * current condition object
+   */
+  conditionState: PropTypes.object,
+  /**
+   * current config object that this property is part of
+   */
+  config: PropTypes.object,
+  /**
+   * callback to update state oin date change
+   */
+  onChange: PropTypes.func
+};
+
+export { ItemOption };

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/{ConditionBuilderItemOption.d.ts → ItemOptionForValueField.d.ts}

@@ -1,9 +1,9 @@
-export function ConditionBuilderItemOption({ conditionState, config, onChange, }: {
+export function ItemOptionForValueField({ conditionState, config, onChange, }: {
     conditionState?: {} | undefined;
     config?: {} | undefined;
     onChange: any;
 }): import("react/jsx-runtime").JSX.Element;
-export namespace ConditionBuilderItemOption {
+export namespace ItemOptionForValueField {
     namespace propTypes {
         let conditionState: PropTypes.Requireable<object>;
         let config: PropTypes.Requireable<object>;

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/{ConditionBuilderItemOption.js → ItemOptionForValueField.js}

@@ -6,35 +6,58 @@
  */
 
 import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useContext, useState, useRef, useEffect } from 'react';
-import { Search, Button, SelectSkeleton } from '@carbon/react';
+import React__default, { useContext, useRef, useState, useEffect } from 'react';
+import { SelectSkeleton, Search, Button } from '@carbon/react';
 import { CheckboxCheckedFilled, Checkbox, Checkmark } from '@carbon/react/icons';
 import PropTypes from '../../../../node_modules/prop-types/index.js';
 import { ConditionBuilderContext } from '../../ConditionBuilderContext/ConditionBuilderProvider.js';
 import { blockClass, translateWithId } from '../../ConditionBuilderContext/DataConfigs.js';
 
-var _CheckboxCheckedFille, _Checkbox, _SelectSkeleton;
-var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
+var _SelectSkeleton, _CheckboxCheckedFille, _Checkbox;
+var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
   var _ref$conditionState = _ref.conditionState,
     conditionState = _ref$conditionState === void 0 ? {} : _ref$conditionState,
     _ref$config = _ref.config,
     config = _ref$config === void 0 ? {} : _ref$config,
     onChange = _ref.onChange;
-  var multiSelectable = conditionState.operator === 'one-of';
+  var multiSelectable = conditionState.operator === 'one_of';
   var _useContext = useContext(ConditionBuilderContext),
     popOverSearchThreshold = _useContext.popOverSearchThreshold,
-    getOptions = _useContext.getOptions;
+    getOptions = _useContext.getOptions,
+    rootState = _useContext.rootState;
+  var contentRef = useRef();
   var _useState = useState(config.options),
     _useState2 = _slicedToArray(_useState, 2),
     allOptions = _useState2[0],
     setAllOptions = _useState2[1];
-  var _useState3 = useState(config.options),
+  var _useState3 = useState(''),
     _useState4 = _slicedToArray(_useState3, 2),
-    filteredItems = _useState4[0],
-    setFilteredItems = _useState4[1];
+    searchValue = _useState4[0],
+    setSearchValue = _useState4[1];
+  var filteredItems = allOptions === null || allOptions === void 0 ? void 0 : allOptions.filter(function (opt) {
+    return opt.label.toLowerCase().includes(searchValue.toLowerCase());
+  });
   var selection = Array.isArray(conditionState.value) ? conditionState.value : conditionState.value !== undefined ? [conditionState.value] : [];
-  var contentRef = useRef();
   useEffect(function () {
+    // if(rest['data-name'] == 'valueField'){
+    //   const fetchData = async () => {
+    //     const response = await config.options(conditionState);
+    //     if (
+    //       response?.length > 0 &&
+    //       Object.keys(response[0]).includes('label') &&
+    //       Object.keys(response[0]).includes('id')
+    //     ) {
+    //       setAllOptions(response);
+    //       setFilteredItems(response);
+    //     }
+    //   };
+
+    //   fetchData(); // Call the async method
+    // }else{
+    //   setAllOptions(config.options);
+    //       setFilteredItems(config.options);
+    // }
+
     if (!allOptions && getOptions) {
       var fetchData = /*#__PURE__*/function () {
         var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
@@ -43,12 +66,11 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
                 _context.next = 2;
-                return getOptions(conditionState);
+                return getOptions(rootState, conditionState);
               case 2:
                 response = _context.sent;
                 if ((response === null || response === void 0 ? void 0 : response.length) > 0 && Object.keys(response[0]).includes('label') && Object.keys(response[0]).includes('id')) {
                   setAllOptions(response);
-                  setFilteredItems(response);
                 }
               case 4:
               case "end":
@@ -68,46 +90,47 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
     //this will focus the first input field in the popover
 
     if (contentRef.current) {
-      var _contentRef$current;
-      var firstFocusableElement = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.querySelector('input, button,li');
-      firstFocusableElement === null || firstFocusableElement === void 0 || firstFocusableElement.focus();
+      var firstFocusableElement = contentRef.current.querySelector('input, button,li');
+      if (firstFocusableElement) {
+        firstFocusableElement.focus();
+      }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [allOptions]);
   var handleSelectAll = function handleSelectAll(evt) {
     if (evt.currentTarget.dataset.selectedAll == 'false') {
       onChange(undefined);
     } else {
-      onChange(allOptions.map(function (op) {
-        return op.id;
-      }));
+      onChange(allOptions);
     }
   };
   var onSearchChangeHandler = function onSearchChangeHandler(evt) {
     var value = evt.target.value;
-    var _filteredItems = allOptions.filter(function (opt) {
-      return opt.label.toLowerCase().includes(value.toLowerCase());
-    });
-    setFilteredItems(_filteredItems);
+    setSearchValue(value);
   };
   var onClickHandler = function onClickHandler(evt, option, isSelected) {
     if (multiSelectable) {
       if (isSelected) {
         var items = selection.filter(function (v) {
-          return v !== option.id;
+          return v.id !== option.id;
         });
         onChange(items.length > 0 ? items : undefined, evt);
       } else {
-        onChange([].concat(_toConsumableArray(selection), [option.id]), evt);
+        onChange([].concat(_toConsumableArray(selection), [option]), evt);
       }
     } else {
-      onChange(option.id, evt);
+      onChange(option, evt);
     }
   };
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, allOptions && /*#__PURE__*/React__default.createElement("div", {
+  var getAriaLabel = function getAriaLabel() {
+    return conditionState.label ? conditionState.label : conditionState.property ? conditionState.property : translateWithId('property');
+  };
+  if (!allOptions) {
+    return _SelectSkeleton || (_SelectSkeleton = /*#__PURE__*/React__default.createElement(SelectSkeleton, null));
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__item-option"),
     ref: contentRef
-  }, (config.includeSearch || allOptions.length > popOverSearchThreshold) && /*#__PURE__*/React__default.createElement("div", {
+  }, allOptions.length > popOverSearchThreshold && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__item-option__search")
   }, /*#__PURE__*/React__default.createElement(Search, {
     size: "sm",
@@ -123,11 +146,13 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
     onClick: handleSelectAll,
     className: "".concat(blockClass, "__selectAll-button")
   }, selection.length == 0 ? 'Select all' : 'Deselect all')), /*#__PURE__*/React__default.createElement("ul", {
-    "aria-label": conditionState.label ? conditionState.label : conditionState.property ? conditionState.property : translateWithId('property'),
+    "aria-label": getAriaLabel(),
     role: "listbox",
     "data-multi-select": multiSelectable
   }, filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.map(function (option) {
-    var isSelected = selection.includes(option.id);
+    var isSelected = selection.map(function (option) {
+      return option.id;
+    }).includes(option.id);
     var Icon = option.icon;
     return /*#__PURE__*/React__default.createElement("li", {
       tabIndex: 0,
@@ -154,9 +179,9 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
     }, Icon && /*#__PURE__*/React__default.createElement(Icon, null), option.label), isSelected && /*#__PURE__*/React__default.createElement(Checkmark, {
       className: "".concat(blockClass, "__checkmark")
     }))));
-  }))), !allOptions && (_SelectSkeleton || (_SelectSkeleton = /*#__PURE__*/React__default.createElement(SelectSkeleton, null))));
+  })));
 };
-ConditionBuilderItemOption.propTypes = {
+ItemOptionForValueField.propTypes = {
   /**
    * current condition object
    */
@@ -171,4 +196,4 @@ ConditionBuilderItemOption.propTypes = {
   onChange: PropTypes.func
 };
 
-export { ConditionBuilderItemOption };
+export { ItemOptionForValueField };

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

@@ -12,15 +12,14 @@ import PropTypes from '../../../node_modules/prop-types/index.js';
 import cx from 'classnames';
 import { blockClass, translateWithId, statementConfig } from '../ConditionBuilderContext/DataConfigs.js';
 import { ConditionBuilderItem } from '../ConditionBuilderItem/ConditionBuilderItem.js';
-import { ConditionBuilderItemOption } from '../ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js';
 import { focusThisField } from '../utils/util.js';
 import ConditionConnector from '../ConditionBuilderConnector/ConditionConnector.js';
 import { ConditionBuilderContext } from '../ConditionBuilderContext/ConditionBuilderProvider.js';
 import uuidv4 from '../../../global/js/utils/uuidv4.js';
 import ConditionPreview from '../ConditionPreview/ConditionPreview.js';
+import { ItemOption } from '../ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js';
 
 var _ConditionPreview, _ConditionPreview2;
-
 /**
  *
  *  state - this is the current group that is being rendered . This can be a inner group or outer group
@@ -85,7 +84,6 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
   var addConditionSubGroupHandler = function addConditionSubGroupHandler(conditionIndex) {
     onChange(_objectSpread2(_objectSpread2({}, group), {}, {
       conditions: [].concat(_toConsumableArray(group.conditions.slice(0, conditionIndex + 1)), [{
-        groupSeparateOperator: null,
         groupOperator: 'and',
         statement: 'if',
         conditions: [{
@@ -178,7 +176,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       "data-name": "connectorField",
       popOverClassName: "".concat(blockClass, "__gap"),
       className: "".concat(blockClass, "__statement-button")
-    }, /*#__PURE__*/React__default.createElement(ConditionBuilderItemOption, {
+    }, /*#__PURE__*/React__default.createElement(ItemOption, {
       conditionState: {
         value: group.statement,
         label: translateWithId('condition')
@@ -214,7 +212,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
           onRemoveHandler(eachCondition.id, e);
         },
         conditionBuilderRef: conditionBuilderRef
-      })) : /*#__PURE__*/React__default.createElement(ConditionBlock, {
+      })) : /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(ConditionBlock, {
         conjunction: conditionIndex > 0 ? group.groupOperator : undefined,
         aria: {
           level: aria.level + 1,
@@ -244,7 +242,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
         },
         hideConditionPreviewHandler: hideConditionPreviewHandler,
         isLastCondition: isLastCondition
-      }), conditionIndex == showConditionSubGroupPreview && (_ConditionPreview || (_ConditionPreview = /*#__PURE__*/React__default.createElement(ConditionPreview, {
+      })), conditionIndex == showConditionSubGroupPreview && (_ConditionPreview || (_ConditionPreview = /*#__PURE__*/React__default.createElement(ConditionPreview, {
         previewType: "subGroup"
       }))), conditionIndex == showConditionPreview && (_ConditionPreview2 || (_ConditionPreview2 = /*#__PURE__*/React__default.createElement(ConditionPreview, {
         previewType: "condition"

package/es/components/ConditionBuilder/ConditionPreview/ConditionPreview.js

@@ -5,7 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default from 'react';
+import { slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState, useEffect } from 'react';
+import cx from 'classnames';
 import PropTypes from '../../../node_modules/prop-types/index.js';
 import { blockClass, translateWithId } from '../ConditionBuilderContext/DataConfigs.js';
 import { ConditionBuilderItem } from '../ConditionBuilderItem/ConditionBuilderItem.js';
@@ -13,6 +15,13 @@ import ConditionConnector from '../ConditionBuilderConnector/ConditionConnector.
 
 var ConditionPreview = function ConditionPreview(_ref) {
   var previewType = _ref.previewType;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    animate = _useState2[0],
+    setAnimate = _useState2[1];
+  useEffect(function () {
+    setAnimate(true);
+  }, []);
   var getConditionSection = function getConditionSection() {
     return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
       label: translateWithId('property')
@@ -23,20 +32,20 @@ var ConditionPreview = function ConditionPreview(_ref) {
     }));
   };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, previewType == 'newGroup' && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__group__row ").concat(blockClass, "__group-preview  ")
+    className: cx(["".concat(blockClass, "__group__row ").concat(blockClass, "__group-preview "), _defineProperty({}, "".concat(blockClass, "__group-preview-animate"), animate)])
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
     className: "".concat(blockClass, "__statement-button"),
     label: translateWithId('and')
   })), /*#__PURE__*/React__default.createElement("div", {
     "aria-hidden": true,
-    className: "".concat(blockClass, "__group ").concat(blockClass, "__condition-wrapper ").concat(blockClass, "__group-preview ").concat(blockClass, "__group-wrapper")
+    className: cx(["".concat(blockClass, "__group ").concat(blockClass, "__condition-wrapper ").concat(blockClass, "__group-preview ").concat(blockClass, "__group-wrapper "), _defineProperty({}, "".concat(blockClass, "__group-preview-animate"), animate)])
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__gap")
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
     className: "".concat(blockClass, "__statement-button"),
     label: translateWithId('if')
   })), getConditionSection())), previewType == 'subGroup' && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__group-preview")
+    className: cx(["".concat(blockClass, "__group__row ").concat(blockClass, "__group-preview "), _defineProperty({}, "".concat(blockClass, "__group-preview-animate"), animate)])
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__condition-block  ").concat(blockClass, "__gap")
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
@@ -49,7 +58,7 @@ var ConditionPreview = function ConditionPreview(_ref) {
     className: "".concat(blockClass, "__gap ").concat(blockClass, "__groupConnector"),
     operator: translateWithId('if')
   }), getConditionSection()))), previewType == 'condition' && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__group-preview")
+    className: cx(["".concat(blockClass, "__group__row ").concat(blockClass, "__group-preview "), _defineProperty({}, "".concat(blockClass, "__group-preview-animate"), animate)])
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__condition-block  ").concat(blockClass, "__gap")
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {

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

@@ -7,8 +7,7 @@
 
 import { toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { blockClass } from '../ConditionBuilderContext/DataConfigs.js';
-import { checkForHoldingKey } from './checkForHoldingKey.js';
-import { focusThisField, traverseReverse, traverseClockVise } from './util.js';
+import { checkForHoldingKey, focusThisField, traverseReverse, traverseClockVise } from './util.js';
 
 var handleKeyDown = function handleKeyDown(evt, conditionBuilderRef) {
   var activeElement = document.activeElement;

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

@@ -3,3 +3,4 @@ export function focusThisItem(currentElement: any): void;
 export function traverseClockVise(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any): void;
 export function traverseReverse(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any): void;
 export function checkForHoldingKey(evt: any, key: any): any;
+export function checkDuplicateAction(actionState: any, selectedId: any, currentActionId: any): boolean;

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

@@ -41,5 +41,20 @@ var traverseReverse = function traverseReverse(eachElem, index, allElements, rot
     focusThisItem(allElements[allElements.length - 1]);
   }
 };
+var checkForHoldingKey = function checkForHoldingKey(evt, key) {
+  // possible key inputs: altKey,ctrlKey,metaKey,shiftKey
+  if (key === 'cmd') {
+    return evt.metaKey || evt.ctrlKey;
+  }
+  return evt[key];
+};
+var checkDuplicateAction = function checkDuplicateAction(actionState, selectedId, currentActionId) {
+  if (selectedId !== currentActionId && actionState.find(function (eachAction) {
+    return eachAction.id === selectedId;
+  })) {
+    return true;
+  }
+  return false;
+};
 
-export { focusThisField, focusThisItem, traverseClockVise, traverseReverse };
+export { checkDuplicateAction, checkForHoldingKey, focusThisField, focusThisItem, traverseClockVise, traverseReverse };

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

@@ -15,7 +15,6 @@ var icons = require('@carbon/react/icons');
 var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
 var index = require('../../../node_modules/prop-types/index.js');
 var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
-var ConditionBuilderItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js');
 var cx = require('classnames');
 var ConditionConnector = require('../ConditionBuilderConnector/ConditionConnector.js');
 var ConditionBuilderItemNumber = require('../ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js');
@@ -26,6 +25,8 @@ var ConditionBuilderButton = require('../ConditionBuilderButton/ConditionBuilder
 var util = require('../utils/util.js');
 var ConditionBuilderItemTime = require('../ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js');
 var ConditionBuilderAdd = require('../ConditionBuilderAdd/ConditionBuilderAdd.js');
+var ItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js');
+var ItemOptionForValueField = require('../ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -33,6 +34,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _div;
+
 /**
  * This component build each block of condition consisting of property, operator value and close button.
  */
@@ -62,14 +64,6 @@ var ConditionBlock = function ConditionBlock(props) {
   var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
     inputConfig = _useContext.inputConfig,
     variant = _useContext.variant;
-  //Below possible input types expected for value field.
-  var itemComponents = {
-    option: ConditionBuilderItemOption.ConditionBuilderItemOption,
-    text: ConditionBuilderItemText.ConditionBuilderItemText,
-    number: ConditionBuilderItemNumber.ConditionBuilderItemNumber,
-    date: ConditionBuilderItemDate.ConditionBuilderItemDate,
-    time: ConditionBuilderItemTime.ConditionBuilderItemTime
-  };
   var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     showDeletionPreview = _useState2[0],
@@ -87,13 +81,17 @@ var ConditionBlock = function ConditionBlock(props) {
     type = _getCurrentConfig.type,
     config = _getCurrentConfig.config,
     label = _getCurrentConfig.label;
-  var ItemComponent;
-  //   if (type == 'custom') {
-  //     ItemComponent = config.component;
-  //   } else {
-  ItemComponent = property ? itemComponents[type] : null;
-  //}
 
+  //Below possible input types expected for value field.
+  var itemComponents = {
+    text: ConditionBuilderItemText.ConditionBuilderItemText,
+    number: ConditionBuilderItemNumber.ConditionBuilderItemNumber,
+    date: ConditionBuilderItemDate.ConditionBuilderItemDate,
+    time: ConditionBuilderItemTime.ConditionBuilderItemTime,
+    option: ItemOptionForValueField.ItemOptionForValueField,
+    custom: config === null || config === void 0 ? void 0 : config.component
+  };
+  var ItemComponent = property ? itemComponents[type] : null;
   var onStatementChangeHandler = function onStatementChangeHandler(v, evt) {
     util.focusThisField(evt);
     onStatementChange(v);
@@ -114,9 +112,10 @@ var ConditionBlock = function ConditionBlock(props) {
     }));
   };
   var onValueChangeHandler = function onValueChangeHandler(newValue) {
-    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, condition), {}, {
-      value: newValue,
-      popoverToOpen: ''
+    var currentCondition = _rollupPluginBabelHelpers.objectSpread2({}, condition);
+    delete currentCondition.popoverToOpen;
+    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, currentCondition), {}, {
+      value: newValue
     }));
   };
   var handleShowDeletionPreview = function handleShowDeletionPreview() {
@@ -126,6 +125,9 @@ var ConditionBlock = function ConditionBlock(props) {
     setShowDeletionPreview(false);
   };
   var getOperators = function getOperators() {
+    if (config !== null && config !== void 0 && config.operators) {
+      return config.operators;
+    }
     return DataConfigs.operatorConfig.filter(function (operator) {
       return operator.type.indexOf(type) != -1 || operator.type == 'all';
     });
@@ -156,7 +158,7 @@ var ConditionBlock = function ConditionBlock(props) {
     "data-name": "connectorField",
     popOverClassName: "".concat(DataConfigs.blockClass, "__gap"),
     className: "".concat(DataConfigs.blockClass, "__statement-button")
-  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
+  }, /*#__PURE__*/React__default["default"].createElement(ItemOption.ItemOption, {
     conditionState: {
       value: group.statement,
       label: DataConfigs.translateWithId('condition')
@@ -173,7 +175,7 @@ var ConditionBlock = function ConditionBlock(props) {
     "data-name": "propertyField",
     condition: condition,
     type: type
-  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
+  }, /*#__PURE__*/React__default["default"].createElement(ItemOption.ItemOption, {
     conditionState: {
       value: property,
       label: DataConfigs.translateWithId('property')
@@ -188,7 +190,7 @@ var ConditionBlock = function ConditionBlock(props) {
     "data-name": "operatorField",
     condition: condition,
     type: type
-  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
+  }, /*#__PURE__*/React__default["default"].createElement(ItemOption.ItemOption, {
     config: {
       options: getOperators()
     },