@carbon/ibm-products 2.36.0 → 2.37.0

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

@@ -5,18 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useContext, useState, useRef, useEffect } from 'react';
-import { pkg } from '../../../settings.js';
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useContext, useState, useEffect, useCallback } from 'react';
 import PropTypes from '../../../node_modules/prop-types/index.js';
 import { Button } from '@carbon/react';
 import { Add } from '@carbon/react/icons';
-import { ConditionBuilderContext, emptyState } from '../ConditionBuilderContext/DataTreeContext.js';
+import ConditionGroupBuilder from '../ConditionGroupBuilder/ConditionGroupBuilder.js';
+import { ConditionBuilderContext, emptyState } from '../ConditionBuilderContext/ConditionBuilderProvider.js';
+import { blockClass } from '../ConditionBuilderContext/DataConfigs.js';
 
-var blockClass = "".concat(pkg.prefix, "--condition-builder");
-function ConditionBuilderContent(_ref) {
+var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
   var _rootState$groups2;
-  var startConditionLabel = _ref.startConditionLabel;
+  var startConditionLabel = _ref.startConditionLabel,
+    conditionBuilderRef = _ref.conditionBuilderRef,
+    getConditionState = _ref.getConditionState,
+    initialState = _ref.initialState;
   var _useContext = useContext(ConditionBuilderContext),
     rootState = _useContext.rootState,
     setRootState = _useContext.setRootState;
@@ -24,30 +27,56 @@ function ConditionBuilderContent(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isConditionBuilderActive = _useState2[0],
     setIsConditionBuilderActive = _useState2[1];
-  var conditionBuilderRef = useRef();
   useEffect(function () {
     var _rootState$groups;
     if (rootState !== null && rootState !== void 0 && (_rootState$groups = rootState.groups) !== null && _rootState$groups !== void 0 && _rootState$groups.length) {
       setIsConditionBuilderActive(false);
-      if (rootState.groups[0].conditions.length == 1 && rootState.groups[0].conditions[0].property == undefined) {
-        // when the add condition clicked to start the condition building, we by default open the popover of the first property
-        setTimeout(function () {
-          conditionBuilderRef.current.querySelector('.propertyField').click();
-        }, 0);
-      }
     } else {
       setIsConditionBuilderActive(true);
     }
-  }, [rootState]);
+    if (getConditionState) {
+      getConditionState(rootState);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rootState, conditionBuilderRef]);
+  useEffect(function () {
+    if (isConditionBuilderActive == false) {
+      if (conditionBuilderRef.current) {
+        var initial = conditionBuilderRef.current.querySelector('[role="gridcell"] button');
+        if (initial) {
+          initial.setAttribute('tabindex', '0');
+        }
+      }
+    }
+  }, [isConditionBuilderActive, conditionBuilderRef]);
   var onStartConditionBuilder = function onStartConditionBuilder() {
     //when add condition button is clicked.
     setIsConditionBuilderActive(false);
-    setRootState(emptyState); //here we can set an empty skeleton object for an empty condition builder,
+    setRootState(initialState !== null && initialState !== void 0 ? initialState : emptyState); //here we can set an empty skeleton object for an empty condition builder,
     //or we can even pre-populate some existing builder and continue editing
   };
+  var _onRemove = useCallback(function (groupIndex) {
+    setRootState(_objectSpread2(_objectSpread2({}, rootState), {}, {
+      groups: rootState.groups.filter(function (group, gIndex) {
+        return groupIndex !== gIndex;
+      })
+    }));
+  }, [setRootState, rootState]);
+  var onChangeHandler = function onChangeHandler(updatedGroup, groupIndex) {
+    /**
+     * This method is triggered from inner components. This will be called every time when any change is to be updated in the rootState.
+     * This gets the updated group as argument.
+     */
+    setRootState(_objectSpread2(_objectSpread2({}, rootState), {}, {
+      groups: rootState.groups.map(function (group, gIndex) {
+        return groupIndex === gIndex ? updatedGroup : group;
+      })
+    }));
+  };
   return /*#__PURE__*/React__default.createElement("div", {
-    ref: conditionBuilderRef,
-    className: "".concat(blockClass, "__content-container")
+    className: "".concat(blockClass, "__content-container"),
+    tabIndex: -1
   }, isConditionBuilderActive && /*#__PURE__*/React__default.createElement(Button, {
     className: "".concat(blockClass, "__condition-builder"),
     renderIcon: function renderIcon(props) {
@@ -59,34 +88,53 @@ function ConditionBuilderContent(_ref) {
     kind: "ghost",
     size: "sm",
     onClick: onStartConditionBuilder
-  }, startConditionLabel), rootState && (rootState === null || rootState === void 0 || (_rootState$groups2 = rootState.groups) === null || _rootState$groups2 === void 0 ? void 0 : _rootState$groups2.map(function () {
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "conditionBuilder group renders here")
-    // <ConditionBuilderGroup
-    //   state={eachGroup}
-    //   onRemove={() => {
-    //     onRemove(groupIndex);
-    //   }}
-    //   onChange={(updatedGroup) => {
-    //     /**
-    //      * This method is triggered from inner components. This will be called every time when any change is to be updated in the rootState.
-    //      * This gets the updated group as argument.
-    //      */
-    //     setRootState({
-    //       ...rootState,
-    //       groups: rootState.groups.map((group, gIndex) =>
-    //         groupIndex === gIndex ? updatedGroup : group
-    //       ),
-    //     });
-    //   }}
-    //>
-    ;
+  }, startConditionLabel), rootState && (rootState === null || rootState === void 0 || (_rootState$groups2 = rootState.groups) === null || _rootState$groups2 === void 0 ? void 0 : _rootState$groups2.map(function (eachGroup, groupIndex) {
+    return /*#__PURE__*/React__default.createElement(ConditionGroupBuilder, {
+      key: groupIndex,
+      aria: {
+        level: 1,
+        posinset: groupIndex * 2 + 1,
+        setsize: rootState.groups.length * 2
+      },
+      state: eachGroup,
+      onRemove: function onRemove() {
+        _onRemove(groupIndex);
+      },
+      onChange: function onChange(updatedGroup) {
+        onChangeHandler(updatedGroup, groupIndex);
+      },
+      conditionBuilderRef: conditionBuilderRef
+    });
   })));
-}
+};
+var ConditionBuilderContent$1 = ConditionBuilderContent;
 ConditionBuilderContent.propTypes = {
   /**
-   * Provide a label to the button that starts condition builder
+   * ref of condition builder
+   */
+  conditionBuilderRef: PropTypes.object,
+  /**
+   * This is a callback function that returns the updated state
+   */
+  getConditionState: PropTypes.func.isRequired,
+  /**
+   * Optional prop if the condition building need to start from a predefined initial state
+   */
+  initialState: PropTypes.shape({
+    groups: PropTypes.arrayOf(PropTypes.shape({
+      groupSeparateOperator: PropTypes.string,
+      groupOperator: PropTypes.string,
+      statement: PropTypes.string,
+      conditions: PropTypes.arrayOf(PropTypes.shape({
+        property: PropTypes.string,
+        operator: PropTypes.string,
+        value: PropTypes.string
+      }))
+    }))
+  }),
+  /* Provide a label to the button that starts condition builder
    */
   startConditionLabel: PropTypes.string.isRequired
 };
 
-export { ConditionBuilderContent as default };
+export { ConditionBuilderContent$1 as default };

package/es/components/ConditionBuilder/ConditionBuilderContext/{DataTreeContext.d.ts → ConditionBuilderProvider.d.ts}

@@ -7,6 +7,7 @@ export namespace emptyState {
             property: undefined;
             operator: string;
             value: string;
+            popoverToOpen: string;
         }[];
     }[];
 }
@@ -15,23 +16,25 @@ export function ConditionBuilderProvider(props: any): import("react/jsx-runtime"
 export namespace ConditionBuilderProvider {
     namespace propTypes {
         let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        let getOptions: PropTypes.Requireable<(...args: any[]) => any>;
         let inputConfig: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
             properties: PropTypes.Requireable<(PropTypes.InferProps<{
                 id: PropTypes.Requireable<string>;
                 label: PropTypes.Requireable<string>;
-                icon: PropTypes.Requireable<(...args: any[]) => any>;
+                icon: PropTypes.Requireable<object>;
                 type: PropTypes.Requireable<string>;
                 config: PropTypes.Requireable<PropTypes.InferProps<{
                     options: PropTypes.Requireable<(PropTypes.InferProps<{
                         id: PropTypes.Requireable<string>;
                         label: PropTypes.Requireable<string>;
-                        icon: PropTypes.Requireable<(...args: any[]) => any>;
+                        icon: PropTypes.Requireable<object>;
                     }> | null | undefined)[]>;
                     includeSearch: PropTypes.Requireable<boolean>;
                 }>>;
             }> | null | undefined)[]>;
         }>>>;
         let popOverSearchThreshold: PropTypes.Validator<number>;
+        let variant: PropTypes.Validator<string>;
     }
 }
 import React from 'react';

package/es/components/ConditionBuilder/ConditionBuilderContext/{DataTreeContext.js → ConditionBuilderProvider.js}

@@ -17,7 +17,8 @@ var emptyState = {
     conditions: [{
       property: undefined,
       operator: '',
-      value: ''
+      value: '',
+      popoverToOpen: 'propertyField'
     }]
   }]
 };
@@ -50,7 +51,9 @@ var ConditionBuilderProvider = function ConditionBuilderProvider(props) {
       rootState: rootState,
       setRootState: setRootState,
       inputConfig: props.inputConfig,
-      popOverSearchThreshold: props.popOverSearchThreshold
+      popOverSearchThreshold: props.popOverSearchThreshold,
+      getOptions: props.getOptions,
+      variant: props.variant
     }
   },
   // eslint-disable-next-line react/prop-types
@@ -61,28 +64,44 @@ ConditionBuilderProvider.propTypes = {
    * Provide the contents of the ConditionBuilder.
    */
   children: PropTypes.node.isRequired,
+  /**
+   * This is an optional callback function that will be triggered when options array is not passed in the inputConfig against a property. 
+   * This can be a asynchronous function that need  to  return a promise, so it will allow to fetch options from API call.
+   * options has to be in valid format
+   * [{
+          label: 'label',
+          id: 'id',
+        },...] 
+   */
+  getOptions: PropTypes.func,
   /**
    * This is a mandatory prop that defines the input to the condition builder.
-   
+    
    */
   inputConfig: PropTypes.shape({
     properties: PropTypes.arrayOf(PropTypes.shape({
       id: PropTypes.string,
       label: PropTypes.string,
-      icon: PropTypes.func,
-      type: PropTypes.oneOf(['text', 'number', 'date', 'option']),
+      icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      type: PropTypes.oneOf(['text', 'number', 'date', 'option', 'time']),
       config: PropTypes.shape({
         options: PropTypes.arrayOf(PropTypes.shape({
           id: PropTypes.string,
           label: PropTypes.string,
-          icon: PropTypes.func
+          icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
         })),
         includeSearch: PropTypes.bool
       })
     }))
   }).isRequired,
-  popOverSearchThreshold: PropTypes.number.isRequired
-  /* TODO: add types and DocGen for all props. */
+  /**
+   * Provide an mandatory numeric value that will be used to enable search option in the popovers with list.
+   */
+  popOverSearchThreshold: PropTypes.number.isRequired,
+  /**
+   * Provide the condition builder variant: sentence/ tree
+   */
+  variant: PropTypes.string.isRequired
 };
 
 export { ConditionBuilderContext, ConditionBuilderProvider, emptyState };

package/es/components/ConditionBuilder/ConditionBuilderContext/DataConfigs.d.ts

@@ -0,0 +1,22 @@
+export const statementConfig: {
+    label: string;
+    id: string;
+}[];
+export const connectorConfig: {
+    label: string;
+    id: string;
+}[];
+export const operatorConfig: {
+    label: string;
+    id: string;
+    type: string;
+}[];
+export const blockClass: string;
+export function translateWithId(key: any): any;
+export namespace valueRenderers {
+    function text(val: any): any;
+    function time(val: any): any;
+    function number(val: any, config: any): any;
+    function option(value: any): any;
+    function date(value: any): any;
+}

package/es/components/ConditionBuilder/ConditionBuilderContext/DataConfigs.js

@@ -0,0 +1,112 @@
+/**
+ * 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 { pkg } from '../../../settings.js';
+import { translationsObject } from './translationObject.js';
+
+var statementConfig = [{
+  label: 'if',
+  id: 'if'
+}, {
+  label: 'excl.if',
+  id: 'excl.if'
+}];
+var connectorConfig = [{
+  label: 'and',
+  id: 'and'
+}, {
+  label: 'or',
+  id: 'or'
+}];
+//op types : option, text, number, date,
+var operatorConfig = [{
+  label: 'is',
+  id: 'is',
+  type: 'all'
+}, {
+  label: 'is greater than',
+  id: 'greater',
+  type: 'number'
+}, {
+  label: 'is greater than or equal to',
+  id: 'greater-equal',
+  type: 'number'
+}, {
+  label: 'is lower than',
+  id: 'lower',
+  type: 'number'
+}, {
+  label: 'is lower than or equal to',
+  id: 'lower-equal',
+  type: 'number'
+}, {
+  label: 'starts with',
+  id: 'starts-with',
+  type: 'text'
+}, {
+  label: 'ends with',
+  id: 'ends-with',
+  type: 'text'
+}, {
+  label: 'contains',
+  id: 'contains',
+  type: 'text'
+}, {
+  label: 'is one of',
+  id: 'one-of',
+  type: 'option'
+}, {
+  label: 'is before',
+  id: 'before',
+  type: 'date,time'
+}, {
+  label: 'is after',
+  id: 'after',
+  type: 'date,time'
+}, {
+  label: 'is between',
+  id: 'between',
+  type: 'date'
+}];
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(pkg.prefix, "--condition-builder");
+var formatDate = function formatDate(date) {
+  var day = String(date.getDate()).padStart(2, '0');
+  var month = String(date.getMonth() + 1).padStart(2, '0');
+  var year = date.getFullYear();
+  return "".concat(day, "/").concat(month, "/").concat(year);
+};
+var translationsObjectCurrent = translationsObject['en']; // TO DO: need to discuss if language is to be passed as prop
+var translateWithId = function translateWithId(key) {
+  var _translationsObjectCu;
+  return (_translationsObjectCu = translationsObjectCurrent[key]) !== null && _translationsObjectCu !== void 0 ? _translationsObjectCu : key;
+};
+var valueRenderers = {
+  text: function text(val) {
+    return val;
+  },
+  time: function time(val) {
+    return val;
+  },
+  number: function number(val, config) {
+    return config.unit && val ? "".concat(val, " ").concat(config.unit) : val;
+  },
+  option: function option(value) {
+    return Array.isArray(value) ? value.join(', ') : value;
+  },
+  date: function date(value) {
+    if (Array.isArray(value) && value.length > 1) {
+      var start = value !== null && value !== void 0 && value[0] ? formatDate(new Date(value[0])) : '';
+      var end = value !== null && value !== void 0 && value[1] ? formatDate(new Date(value[1])) : '';
+      return "".concat(start, " To ").concat(end);
+    } else {
+      return value && new Date(value) ? formatDate(new Date(value)) : value;
+    }
+  }
+};
+
+export { blockClass, connectorConfig, operatorConfig, statementConfig, translateWithId, valueRenderers };

package/es/components/ConditionBuilder/ConditionBuilderContext/translationObject.d.ts

@@ -0,0 +1,31 @@
+export namespace translationsObject {
+    let en: {
+        if: string;
+        'excl-if': string;
+        and: string;
+        or: string;
+        is: string;
+        greater: string;
+        'greater-equal': string;
+        lower: string;
+        'lower-equal': string;
+        'starts-with': string;
+        'ends-with': string;
+        contains: string;
+        'one-of': string;
+        before: string;
+        after: string;
+        between: string;
+        'add-condition': string;
+        condition: string;
+        property: string;
+        operator: string;
+        connector: string;
+        condition_row: string;
+        remove_condition: string;
+        add_condition_row: string;
+        start: string;
+        end: string;
+        clear_search: string;
+    };
+}

package/es/components/ConditionBuilder/ConditionBuilderContext/translationObject.js

@@ -0,0 +1,40 @@
+/**
+ * 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.
+ */
+
+var translationsObject = {
+  en: {
+    if: 'if',
+    'excl-if': 'excl.if',
+    and: 'and',
+    or: 'or',
+    is: 'is',
+    greater: 'is greater than',
+    'greater-equal': 'is greater than or equal to',
+    lower: 'is lower than',
+    'lower-equal': 'is lower than or equal to',
+    'starts-with': 'starts with',
+    'ends-with': 'ends with',
+    contains: 'contains',
+    'one-of': 'is one of',
+    before: 'is before',
+    after: 'is after',
+    between: 'is between',
+    'add-condition': 'Add Condition',
+    condition: 'Condition',
+    property: 'Property',
+    operator: 'Operator',
+    connector: 'Connector',
+    condition_row: 'Condition row',
+    remove_condition: 'Remove condition',
+    add_condition_row: 'Add condition row',
+    start: 'Start',
+    end: 'End',
+    clear_search: 'Clear search input'
+  }
+};
+
+export { translationsObject };

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

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

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

@@ -0,0 +1,151 @@
+/**
+ * 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 { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+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 { ConditionBuilderButton } from '../ConditionBuilderButton/ConditionBuilderButton.js';
+
+var _excluded = ["children", "className", "label", "renderIcon", "title", "type", "showToolTip", "state", "popOverClassName", "config"];
+var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    label = _ref.label,
+    renderIcon = _ref.renderIcon,
+    title = _ref.title,
+    type = _ref.type,
+    showToolTip = _ref.showToolTip,
+    state = _ref.state,
+    popOverClassName = _ref.popOverClassName,
+    config = _ref.config,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var contentRef = useRef(null);
+  var _useState = useState(label),
+    _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]);
+  useEffect(function () {
+    /**
+     * rest['data-name'] holds the current field name
+     * popoverToOpen hold the next popover to be opened if required
+     */
+    if (state) {
+      var currentField = rest['data-name'];
+      //if any condition is changed, state prop is triggered
+      if (state.popoverToOpen && currentField !== state.popoverToOpen) {
+        // close the previous popover
+        setOpen(false);
+      } else if (currentField == 'valueField' && type == 'option' && state.operator !== 'one-of') {
+        //close the current popover if the field is valueField and  is a single select dropdown. For all other inputs ,popover need to be open on value changes.
+        setOpen(false);
+      }
+      if (state.popoverToOpen == currentField) {
+        //current popover need to be opened
+        setOpen(true);
+      }
+    } 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);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state, label]);
+  useEffect(function () {
+    //this will focus the first input field in the popover
+    if (open && contentRef.current) {
+      var firstFocusableElement = contentRef.current.querySelector('input, button,li');
+      if (firstFocusableElement) {
+        firstFocusableElement.focus();
+      }
+    }
+  }, [contentRef, open]);
+  return /*#__PURE__*/React__default.createElement(Popover, {
+    open: open,
+    isTabTip: true,
+    role: "gridcell",
+    className: popOverClassName,
+    onRequestClose: function onRequestClose() {
+      setOpen(false);
+    }
+  }, /*#__PURE__*/React__default.createElement(ConditionBuilderButton, _extends({
+    label: propertyLabel !== null && propertyLabel !== void 0 ? propertyLabel : translateWithId('add-condition'),
+    hideLabel: !label ? true : false,
+    onClick: function onClick() {
+      setOpen(!open);
+    },
+    className: className,
+    "aria-haspopup": true,
+    "aria-expanded": open,
+    renderIcon: renderIcon ? renderIcon : label == undefined ? Add : null,
+    showToolTip: showToolTip
+  }, rest)), /*#__PURE__*/React__default.createElement(PopoverContent, {
+    className: "".concat(blockClass, "__condition-builder-item__content"),
+    role: "dialog",
+    "aria-label": "".concat(title)
+  }, /*#__PURE__*/React__default.createElement(Layer, null, /*#__PURE__*/React__default.createElement("h1", {
+    className: "".concat(blockClass, "__condition-builder-item__title")
+  }, title), /*#__PURE__*/React__default.createElement("div", {
+    ref: contentRef
+  }, open && children))));
+};
+ConditionBuilderItem.propTypes = {
+  /**
+   * provide the contents of the popover
+   */
+  children: PropTypes.node,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * this is the config object again the current property from inputConfig
+   */
+
+  config: PropTypes.object,
+  /**
+   * text to be displayed in the field
+   */
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  /**
+   * class name for popover
+   */
+  popOverClassName: PropTypes.string,
+  /**
+   * Optional prop to allow overriding the icon rendering.
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * show tool tip
+   */
+  showToolTip: PropTypes.bool,
+  /**
+   * current condition state object
+   */
+  state: PropTypes.object,
+  /**
+   * title of the popover
+   */
+  title: PropTypes.string,
+  /**
+   * input type
+   */
+  type: PropTypes.string
+};
+
+export { ConditionBuilderItem };