@carbon/ibm-products 2.43.2-canary.7 → 2.43.2-canary.72

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

@@ -10,10 +10,11 @@ import React__default, { useRef, useState, useEffect } from 'react';
 import { Popover, PopoverContent, Layer } from '@carbon/react';
 import PropTypes from '../../../node_modules/prop-types/index.js';
 import { Add } from '@carbon/react/icons';
-import { valueRenderers, translateWithId, blockClass } from '../ConditionBuilderContext/DataConfigs.js';
+import { blockClass, valueRenderers } from '../ConditionBuilderContext/DataConfigs.js';
 import { ConditionBuilderButton } from '../ConditionBuilderButton/ConditionBuilderButton.js';
+import { useTranslations } from '../utils/useTranslations.js';
 
-var _excluded = ["children", "className", "label", "renderIcon", "title", "type", "showToolTip", "condition", "popOverClassName", "config"];
+var _excluded = ["children", "className", "label", "renderIcon", "title", "type", "showToolTip", "condition", "popOverClassName", "config", "renderChildren"];
 var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -25,21 +26,41 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
     condition = _ref.condition,
     popOverClassName = _ref.popOverClassName,
     config = _ref.config,
+    renderChildren = _ref.renderChildren,
     rest = _objectWithoutProperties(_ref, _excluded);
   var contentRef = useRef(null);
-  var _useState = useState(label),
+  var popoverRef = useRef(null);
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    propertyLabel = _useState2[0],
-    setPropertyLabel = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    open = _useState4[0],
-    setOpen = _useState4[1];
-  useEffect(function () {
-    var propertyId = rest['data-name'] == 'valueField' && type ? valueRenderers[type](label, config) : label;
-    setPropertyLabel(translateWithId(propertyId));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [label]);
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useTranslations = useTranslations(['invalidText', 'addConditionText', label, 'invalidDateText']),
+    _useTranslations2 = _slicedToArray(_useTranslations, 4),
+    invalidText = _useTranslations2[0],
+    addConditionText = _useTranslations2[1],
+    labelText = _useTranslations2[2],
+    invalidDateText = _useTranslations2[3];
+  var getPropertyDetails = function getPropertyDetails() {
+    if (label === 'INVALID') {
+      return {
+        propertyLabel: invalidText,
+        isInvalid: true
+      };
+    } else if (label === 'INVALID_DATE') {
+      return {
+        propertyLabel: invalidDateText,
+        isInvalid: true
+      };
+    }
+    var propertyId = rest['data-name'] == 'valueField' && type ? valueRenderers[type](label, config) : labelText;
+    return {
+      isInvalid: false,
+      propertyLabel: propertyId
+    };
+  };
+  var _getPropertyDetails = getPropertyDetails(),
+    propertyLabel = _getPropertyDetails.propertyLabel,
+    isInvalid = _getPropertyDetails.isInvalid;
   useEffect(function () {
     /**
      * rest['data-name'] holds the current field name
@@ -50,59 +71,68 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
       //if any condition is changed, state prop is triggered
       if (condition.popoverToOpen && currentField !== condition.popoverToOpen) {
         // close the previous popover
-        setOpen(false);
-      } else if (currentField == 'valueField' && type == 'option' && condition.operator !== 'one-of') {
+        closePopover();
+      } else if (currentField == 'valueField' && type == 'option' && condition.operator !== 'oneOf') {
         //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);
+        closePopover();
       }
       if (condition.popoverToOpen == currentField) {
         //current popover need to be opened
-        setOpen(true);
+        openPopOver();
       }
     } else {
       // when we change any statement(if/ excl.if) which is not part of condition state, label change is triggered.
       //close popOver when statement is changed.
-      setOpen(false);
+      closePopover();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [condition, label]);
   useEffect(function () {
     //this will focus the first input field in the popover
     if (open && contentRef.current) {
-      var firstFocusableElement = contentRef.current.querySelector('input');
+      var firstFocusableElement = contentRef.current.querySelector('input,textarea');
       if (firstFocusableElement) {
         firstFocusableElement.focus();
       }
     }
   }, [contentRef, open]);
+  var closePopover = function closePopover() {
+    return setOpen(false);
+  };
+  var openPopOver = function openPopOver() {
+    return setOpen(true);
+  };
+  var togglePopover = function togglePopover() {
+    return setOpen(!open);
+  };
   return /*#__PURE__*/React__default.createElement(Popover, {
     open: open,
     isTabTip: true,
     role: "gridcell",
     className: popOverClassName,
-    onRequestClose: function onRequestClose() {
-      setOpen(false);
-    }
+    ref: popoverRef,
+    onRequestClose: closePopover
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderButton, _extends({
-    label: propertyLabel !== null && propertyLabel !== void 0 ? propertyLabel : translateWithId('add-condition'),
+    label: propertyLabel !== null && propertyLabel !== void 0 ? propertyLabel : addConditionText,
     hideLabel: !label ? true : false,
-    onClick: function onClick() {
-      children ? setOpen(!open) : null;
-    },
+    onClick: togglePopover,
     className: className,
     "aria-haspopup": true,
     "aria-expanded": open,
     renderIcon: renderIcon ? renderIcon : label == undefined ? Add : null,
-    showToolTip: showToolTip
-  }, rest)), /*#__PURE__*/React__default.createElement(PopoverContent, {
+    showToolTip: showToolTip,
+    isInvalid: isInvalid,
+    condition: condition
+  }, rest)), open && /*#__PURE__*/React__default.createElement(PopoverContent, {
     className: "".concat(blockClass, "__item__content"),
     role: "dialog",
-    "aria-label": "".concat(title)
+    "aria-label": title
   }, /*#__PURE__*/React__default.createElement(Layer, null, /*#__PURE__*/React__default.createElement("h1", {
     className: "".concat(blockClass, "__item__title")
   }, title), /*#__PURE__*/React__default.createElement("div", {
-    ref: contentRef
-  }, open && children))));
+    ref: contentRef,
+    className: "".concat(blockClass, "__popover-content")
+  }, renderChildren ? renderChildren(popoverRef) : children))));
 };
 ConditionBuilderItem.propTypes = {
   /**
@@ -125,11 +155,15 @@ ConditionBuilderItem.propTypes = {
   /**
    * text to be displayed in the field
    */
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
   /**
    * class name for popover
    */
   popOverClassName: PropTypes.string,
+  /**
+   * callback prop that returns the jsx for children
+   */
+  renderChildren: PropTypes.func,
   /**
    * Optional prop to allow overriding the icon rendering.
    */

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.d.ts

@@ -1,11 +1,13 @@
-export function ConditionBuilderItemDate({ conditionState, onChange }: {
+export function ConditionBuilderItemDate({ conditionState, onChange, parentRef, }: {
     conditionState: any;
     onChange: any;
+    parentRef: any;
 }): import("react/jsx-runtime").JSX.Element;
 export namespace ConditionBuilderItemDate {
     namespace propTypes {
         let conditionState: PropTypes.Requireable<object>;
         let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let parentRef: PropTypes.Requireable<object>;
     }
 }
 import PropTypes from 'prop-types';

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

@@ -5,26 +5,36 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { slicedToArray as _slicedToArray } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef } from 'react';
 import { DatePicker, DatePickerInput } from '@carbon/react';
 import { pkg } from '../../../../settings.js';
 import PropTypes from '../../../../node_modules/prop-types/index.js';
-import { translateWithId } from '../../ConditionBuilderContext/DataConfigs.js';
+import { useTranslations } from '../../utils/useTranslations.js';
 
 var blockClass = "".concat(pkg.prefix, "--condition-builder");
 var ConditionBuilderItemDate = function ConditionBuilderItemDate(_ref) {
   var conditionState = _ref.conditionState,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    parentRef = _ref.parentRef;
   var DatePickerInputRef = useRef();
+  var _useTranslations = useTranslations(['startText', 'endText']),
+    _useTranslations2 = _slicedToArray(_useTranslations, 2),
+    startText = _useTranslations2[0],
+    endText = _useTranslations2[1];
   var datePickerType = conditionState.operator == 'between' ? 'range' : 'single';
+  var onCloseHandler = function onCloseHandler(selectedDate) {
+    onChange(selectedDate && selectedDate.length > 0 ? selectedDate : 'INVALID_DATE');
+  };
   return /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__item-date ")
   }, datePickerType == 'single' && /*#__PURE__*/React__default.createElement(DatePicker, {
     ref: DatePickerInputRef,
     dateFormat: "d/m/Y",
     datePickerType: "single",
-    onClose: onChange,
-    value: conditionState.value
+    value: conditionState.value,
+    onClose: onCloseHandler,
+    appendTo: parentRef === null || parentRef === void 0 ? void 0 : parentRef.current
   }, /*#__PURE__*/React__default.createElement(DatePickerInput, {
     id: "datePicker",
     placeholder: "dd/mm/yyyy",
@@ -33,16 +43,17 @@ var ConditionBuilderItemDate = function ConditionBuilderItemDate(_ref) {
     ref: DatePickerInputRef,
     dateFormat: "d/m/Y",
     datePickerType: datePickerType,
-    onClose: onChange,
-    value: conditionState.value
+    onClose: onCloseHandler,
+    value: conditionState.value,
+    appendTo: parentRef === null || parentRef === void 0 ? void 0 : parentRef.current
   }, /*#__PURE__*/React__default.createElement(DatePickerInput, {
     id: "datePickerStart",
     placeholder: "dd/mm/yyyy",
-    labelText: translateWithId('start')
+    labelText: startText
   }), /*#__PURE__*/React__default.createElement(DatePickerInput, {
     id: "datePickerEnd",
     placeholder: "dd/mm/yyyy",
-    labelText: translateWithId('end')
+    labelText: endText
   })));
 };
 ConditionBuilderItemDate.propTypes = {
@@ -53,7 +64,11 @@ ConditionBuilderItemDate.propTypes = {
   /**
    * callback to update state oin date change
    */
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  /**
+   * reference to the popover node
+   */
+  parentRef: PropTypes.object
 };
 
 export { ConditionBuilderItemDate };

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

@@ -5,34 +5,52 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { slicedToArray as _slicedToArray, extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import { NumberInput } from '@carbon/react';
-import { pkg } from '../../../../settings.js';
 import PropTypes from '../../../../node_modules/prop-types/index.js';
+import { blockClass } from '../../ConditionBuilderContext/DataConfigs.js';
+import { useTranslations } from '../../utils/useTranslations.js';
 
-var blockClass = "".concat(pkg.prefix, "--condition-builder");
 var ConditionBuilderItemNumber = function ConditionBuilderItemNumber(_ref) {
   var _conditionState$prope;
   var conditionState = _ref.conditionState,
     config = _ref.config,
     onChange = _ref.onChange;
+  var _useTranslations = useTranslations(['invalidNumberWarnText']),
+    _useTranslations2 = _slicedToArray(_useTranslations, 1),
+    invalidNumberWarnText = _useTranslations2[0];
   var onChangeHandler = function onChangeHandler(e, _ref2) {
     var value = _ref2.value;
-    onChange(value + '');
+    if (!isNaN(value) && checkIfValid(value)) {
+      var _config$unit;
+      onChange("".concat(value, " ").concat((_config$unit = config.unit) !== null && _config$unit !== void 0 ? _config$unit : ''));
+    } else {
+      onChange('INVALID');
+    }
+  };
+  var checkIfValid = function checkIfValid(value) {
+    if (value > config.max || value < config.min) {
+      return false;
+    }
+    return true;
+  };
+  var getDefaultValue = function getDefaultValue() {
+    var _conditionState$value;
+    return (_conditionState$value = conditionState.value) === null || _conditionState$value === void 0 || (_conditionState$value = _conditionState$value.split(' ')) === null || _conditionState$value === void 0 ? void 0 : _conditionState$value[0];
   };
   return /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__item-number")
-  }, /*#__PURE__*/React__default.createElement(NumberInput, {
+  }, /*#__PURE__*/React__default.createElement(NumberInput, _extends({
     label: conditionState.property,
     hideLabel: true,
     id: (_conditionState$prope = conditionState.property) === null || _conditionState$prope === void 0 ? void 0 : _conditionState$prope.replace(/\s/g, ''),
-    value: conditionState.value ? conditionState.value.split(' ')[0] : conditionState.value,
-    min: config.min,
-    max: config.max,
-    step: config.step,
+    invalidText: invalidNumberWarnText,
     allowEmpty: true,
     onChange: onChangeHandler
-  }));
+  }, config, {
+    defaultValue: getDefaultValue()
+  })));
 };
 ConditionBuilderItemNumber.propTypes = {
   /**

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.d.ts

@@ -0,0 +1,13 @@
+export function ItemOption({ conditionState, config, onChange }: {
+    conditionState?: {} | undefined;
+    config?: {} | undefined;
+    onChange: any;
+}): import("react/jsx-runtime").JSX.Element | undefined;
+export namespace ItemOption {
+    namespace propTypes {
+        let conditionState: PropTypes.Requireable<object>;
+        let config: PropTypes.Requireable<object>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from 'prop-types';

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

@@ -0,0 +1,114 @@
+/**
+ * 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 } from '../../ConditionBuilderContext/DataConfigs.js';
+import { useTranslations } from '../../utils/useTranslations.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 _useTranslations = useTranslations(['propertyText', 'clearSearchText']),
+    _useTranslations2 = _slicedToArray(_useTranslations, 2),
+    propertyText = _useTranslations2[0],
+    clearSearchText = _useTranslations2[1];
+  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 : propertyText;
+  };
+  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: clearSearchText,
+    closeButtonLabelText: clearSearchText,
+    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,63 @@
  */
 
 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';
+import { blockClass } from '../../ConditionBuilderContext/DataConfigs.js';
+import { useTranslations } from '../../utils/useTranslations.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 === 'oneOf';
   var _useContext = useContext(ConditionBuilderContext),
     popOverSearchThreshold = _useContext.popOverSearchThreshold,
-    getOptions = _useContext.getOptions;
+    getOptions = _useContext.getOptions,
+    rootState = _useContext.rootState;
+  var _useTranslations = useTranslations(['propertyText', 'clearSearchText']),
+    _useTranslations2 = _slicedToArray(_useTranslations, 2),
+    propertyText = _useTranslations2[0],
+    clearSearchText = _useTranslations2[1];
+  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 +71,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,51 +95,52 @@ 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 : propertyText;
+  };
+  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",
-    labelText: translateWithId('clear_search'),
-    closeButtonLabelText: translateWithId('clear_search'),
+    labelText: clearSearchText,
+    closeButtonLabelText: clearSearchText,
     onChange: onSearchChangeHandler
   })), multiSelectable && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__multiselectSelectionStatusContainer")
@@ -123,11 +151,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 +184,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 +201,4 @@ ConditionBuilderItemOption.propTypes = {
   onChange: PropTypes.func
 };
 
-export { ConditionBuilderItemOption };
+export { ItemOptionForValueField };