@carbon/ibm-products 2.36.0-alpha.27 → 2.37.0

package/lib/components/ConditionBuilder/ConditionBuilder.js

@@ -15,22 +15,21 @@ var react = require('@carbon/react');
 var index = require('../../node_modules/prop-types/index.js');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
-var settings = require('../../settings.js');
 var ConditionBuilderContent = require('./ConditionBuilderContent/ConditionBuilderContent.js');
-var DataTreeContext = require('./ConditionBuilderContext/DataTreeContext.js');
+var ConditionBuilderProvider = require('./ConditionBuilderContext/ConditionBuilderProvider.js');
+var settings = require('../../settings.js');
+var DataConfigs = require('./ConditionBuilderContext/DataConfigs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className", "inputConfig", "startConditionLabel", "popOverSearchThreshold"];
+var _excluded = ["className", "inputConfig", "startConditionLabel", "popOverSearchThreshold", "getOptions", "initialState", "getConditionState", "variant"];
 
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
-// The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--condition-builder");
 var componentName = 'ConditionBuilder';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
@@ -58,12 +57,20 @@ exports.ConditionBuilder = /*#__PURE__*/React__default["default"].forwardRef(fun
     inputConfig = _ref.inputConfig,
     startConditionLabel = _ref.startConditionLabel,
     popOverSearchThreshold = _ref.popOverSearchThreshold,
+    getOptions = _ref.getOptions,
+    initialState = _ref.initialState,
+    getConditionState = _ref.getConditionState,
+    variant = _ref.variant,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React__default["default"].createElement(DataTreeContext.ConditionBuilderProvider, {
+  var localRef = React.useRef();
+  var conditionBuilderRef = ref || localRef;
+  return /*#__PURE__*/React__default["default"].createElement(ConditionBuilderProvider.ConditionBuilderProvider, {
     inputConfig: inputConfig,
-    popOverSearchThreshold: popOverSearchThreshold
+    popOverSearchThreshold: popOverSearchThreshold,
+    getOptions: getOptions,
+    variant: variant
   }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    className: cx__default["default"](blockClass,
+    className: cx__default["default"](DataConfigs.blockClass,
     // Apply the block class to the main HTML element
     className,
     // Apply any supplied class names to the main HTML element.
@@ -72,10 +79,15 @@ exports.ConditionBuilder = /*#__PURE__*/React__default["default"].forwardRef(fun
       // switched classes dependant on props or state
       // example: [`${blockClass}__here-if-small`]: size === 'sm',
     }),
-    ref: ref,
-    role: "main"
-  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement(react.VStack, null, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderContent["default"], {
-    startConditionLabel: startConditionLabel
+    role: "main",
+    ref: conditionBuilderRef
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement(react.VStack, {
+    className: "".concat(DataConfigs.blockClass, "__").concat(variant)
+  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderContent["default"], {
+    startConditionLabel: startConditionLabel,
+    conditionBuilderRef: conditionBuilderRef,
+    getConditionState: getConditionState,
+    initialState: initialState
   }))));
 });
 
@@ -99,6 +111,20 @@ exports.ConditionBuilder.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: index["default"].string,
+  getConditionState: index["default"].func.isRequired,
+  getOptions: index["default"].func,
+  initialState: index["default"].shape({
+    groups: index["default"].arrayOf(index["default"].shape({
+      groupSeparateOperator: index["default"].string,
+      groupOperator: index["default"].string,
+      statement: index["default"].string,
+      conditions: index["default"].arrayOf(index["default"].shape({
+        property: index["default"].string,
+        operator: index["default"].string,
+        value: index["default"].string
+      }))
+    }))
+  }),
   /**
    * This is a mandatory prop that defines the input to the condition builder.
    
@@ -107,13 +133,13 @@ exports.ConditionBuilder.propTypes = {
     properties: index["default"].arrayOf(index["default"].shape({
       id: index["default"].string,
       label: index["default"].string,
-      icon: index["default"].func,
-      type: index["default"].oneOf(['text', 'number', 'date', 'option']),
+      icon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+      type: index["default"].oneOf(['text', 'number', 'date', 'option', 'time']),
       config: index["default"].shape({
         options: index["default"].arrayOf(index["default"].shape({
           id: index["default"].string,
           label: index["default"].string,
-          icon: index["default"].func
+          icon: index["default"].oneOfType([index["default"].func, index["default"].object])
         })),
         includeSearch: index["default"].bool
       })
@@ -126,7 +152,10 @@ exports.ConditionBuilder.propTypes = {
   /**
    * Provide a label to the button that starts condition builder
    */
-  startConditionLabel: index["default"].string.isRequired
-
+  startConditionLabel: index["default"].string.isRequired,
   /* TODO: add types and DocGen for all props. */
+  /**
+   * Provide the condition builder variant: sentence/ tree
+   */
+  variant: index["default"].string.isRequired
 };

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

@@ -0,0 +1,12 @@
+export default ConditionBuilderAdd;
+declare function ConditionBuilderAdd({ className, onClick }: {
+    className: any;
+    onClick: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace ConditionBuilderAdd {
+    namespace propTypes {
+        let className: PropTypes.Requireable<string>;
+        let onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from 'prop-types';

package/lib/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js

@@ -0,0 +1,48 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var icons = require('@carbon/react/icons');
+var ConditionBuilderButton = require('../ConditionBuilderButton/ConditionBuilderButton.js');
+var index = require('../../../node_modules/prop-types/index.js');
+var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ConditionBuilderAdd = function ConditionBuilderAdd(_ref) {
+  var className = _ref.className,
+    onClick = _ref.onClick;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: className
+  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, {
+    renderIcon: icons.AddAlt,
+    onClick: onClick,
+    className: "".concat(DataConfigs.blockClass, "__add-button"),
+    hideLabel: true,
+    label: DataConfigs.translateWithId('add-condition'),
+    role: "gridcell"
+  }));
+};
+var ConditionBuilderAdd$1 = ConditionBuilderAdd;
+ConditionBuilderAdd.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index["default"].string,
+  /**
+   * callback triggered on click of add button
+   */
+  onClick: index["default"].func
+};
+
+exports["default"] = ConditionBuilderAdd$1;

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

@@ -0,0 +1,22 @@
+export function ConditionBuilderButton({ className, label, hideLabel, tooltipAlign, renderIcon: Icon, onClick, showToolTip, ...rest }: {
+    [x: string]: any;
+    className: any;
+    label: any;
+    hideLabel: any;
+    tooltipAlign: any;
+    renderIcon: any;
+    onClick: any;
+    showToolTip: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace ConditionBuilderButton {
+    namespace propTypes {
+        let className: PropTypes.Requireable<string>;
+        let hideLabel: PropTypes.Requireable<boolean>;
+        let label: PropTypes.Requireable<string>;
+        let onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        let renderIcon: PropTypes.Requireable<object>;
+        let showToolTip: PropTypes.Requireable<boolean>;
+        let tooltipAlign: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from 'prop-types';

package/lib/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js

@@ -0,0 +1,83 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var cx = require('classnames');
+var index = require('../../../node_modules/prop-types/index.js');
+var react = require('@carbon/react');
+var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["className", "label", "hideLabel", "tooltipAlign", "renderIcon", "onClick", "showToolTip"];
+var ConditionBuilderButton = function ConditionBuilderButton(_ref) {
+  var _Icon;
+  var className = _ref.className,
+    label = _ref.label,
+    hideLabel = _ref.hideLabel,
+    tooltipAlign = _ref.tooltipAlign,
+    Icon = _ref.renderIcon,
+    onClick = _ref.onClick,
+    showToolTip = _ref.showToolTip,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var Button = function Button() {
+    return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
+      // role={'gridcell'}
+      tabIndex: -1,
+      className: cx__default["default"]([className, "".concat(DataConfigs.blockClass, "__condition-builder-button"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__text-ellipsis"), showToolTip && !hideLabel)]),
+      type: "button",
+      onClick: onClick
+    }), Icon && (_Icon || (_Icon = /*#__PURE__*/React__default["default"].createElement(Icon, null))), !hideLabel && label);
+  };
+  return hideLabel || showToolTip ? /*#__PURE__*/React__default["default"].createElement(react.Tooltip, _rollupPluginBabelHelpers["extends"]({
+    label: label,
+    align: tooltipAlign,
+    className: "".concat(DataConfigs.blockClass, "__con-tooltip")
+  }, rest.wrapperProps), Button()) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, Button());
+};
+ConditionBuilderButton.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index["default"].string,
+  /**
+   * decides if label and tooltip to be hidden
+   */
+  hideLabel: index["default"].bool,
+  /**
+   * label of the button
+   */
+  label: index["default"].string,
+  /**
+   * callback triggered on click of add button
+   */
+  onClick: index["default"].func,
+  /**
+   * Optional prop to allow overriding the icon rendering.
+   */
+  renderIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+  /**
+   */
+  /**
+   *decides if  tooltip to be shown
+   */
+  showToolTip: index["default"].bool,
+  /**
+   * tooltip position
+   */
+  tooltipAlign: index["default"].string
+};
+
+exports.ConditionBuilderButton = ConditionBuilderButton;

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

@@ -1,9 +1,26 @@
 export default ConditionBuilderContent;
-declare function ConditionBuilderContent({ startConditionLabel }: {
+declare function ConditionBuilderContent({ startConditionLabel, conditionBuilderRef, getConditionState, initialState, }: {
     startConditionLabel: any;
+    conditionBuilderRef: any;
+    getConditionState: any;
+    initialState: any;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace ConditionBuilderContent {
     namespace propTypes {
+        let conditionBuilderRef: PropTypes.Requireable<object>;
+        let getConditionState: PropTypes.Validator<(...args: any[]) => any>;
+        let initialState: PropTypes.Requireable<PropTypes.InferProps<{
+            groups: PropTypes.Requireable<(PropTypes.InferProps<{
+                groupSeparateOperator: PropTypes.Requireable<string>;
+                groupOperator: PropTypes.Requireable<string>;
+                statement: PropTypes.Requireable<string>;
+                conditions: PropTypes.Requireable<(PropTypes.InferProps<{
+                    property: PropTypes.Requireable<string>;
+                    operator: PropTypes.Requireable<string>;
+                    value: PropTypes.Requireable<string>;
+                }> | null | undefined)[]>;
+            }> | null | undefined)[]>;
+        }>>;
         let startConditionLabel: PropTypes.Validator<string>;
     }
 }

package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js

@@ -11,53 +11,82 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var settings = require('../../../settings.js');
 var index = require('../../../node_modules/prop-types/index.js');
 var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
-var DataTreeContext = require('../ConditionBuilderContext/DataTreeContext.js');
+var ConditionGroupBuilder = require('../ConditionGroupBuilder/ConditionGroupBuilder.js');
+var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuilderProvider.js');
+var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var blockClass = "".concat(settings.pkg.prefix, "--condition-builder");
-function ConditionBuilderContent(_ref) {
+var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
   var _rootState$groups2;
-  var startConditionLabel = _ref.startConditionLabel;
-  var _useContext = React.useContext(DataTreeContext.ConditionBuilderContext),
+  var startConditionLabel = _ref.startConditionLabel,
+    conditionBuilderRef = _ref.conditionBuilderRef,
+    getConditionState = _ref.getConditionState,
+    initialState = _ref.initialState;
+  var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
     rootState = _useContext.rootState,
     setRootState = _useContext.setRootState;
   var _useState = React.useState(true),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     isConditionBuilderActive = _useState2[0],
     setIsConditionBuilderActive = _useState2[1];
-  var conditionBuilderRef = React.useRef();
   React.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]);
+  React.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(DataTreeContext.emptyState); //here we can set an empty skeleton object for an empty condition builder,
+    setRootState(initialState !== null && initialState !== void 0 ? initialState : ConditionBuilderProvider.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 = React.useCallback(function (groupIndex) {
+    setRootState(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.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(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rootState), {}, {
+      groups: rootState.groups.map(function (group, gIndex) {
+        return groupIndex === gIndex ? updatedGroup : group;
+      })
+    }));
+  };
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    ref: conditionBuilderRef,
-    className: "".concat(blockClass, "__content-container")
+    className: "".concat(DataConfigs.blockClass, "__content-container"),
+    tabIndex: -1
   }, isConditionBuilderActive && /*#__PURE__*/React__default["default"].createElement(react.Button, {
-    className: "".concat(blockClass, "__condition-builder"),
+    className: "".concat(DataConfigs.blockClass, "__condition-builder"),
     renderIcon: function renderIcon(props) {
       return /*#__PURE__*/React__default["default"].createElement(icons.Add, _rollupPluginBabelHelpers["extends"]({
         size: 16
@@ -67,34 +96,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["default"].createElement(React__default["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["default"].createElement(ConditionGroupBuilder["default"], {
+      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: index["default"].object,
+  /**
+   * This is a callback function that returns the updated state
+   */
+  getConditionState: index["default"].func.isRequired,
+  /**
+   * Optional prop if the condition building need to start from a predefined initial state
+   */
+  initialState: index["default"].shape({
+    groups: index["default"].arrayOf(index["default"].shape({
+      groupSeparateOperator: index["default"].string,
+      groupOperator: index["default"].string,
+      statement: index["default"].string,
+      conditions: index["default"].arrayOf(index["default"].shape({
+        property: index["default"].string,
+        operator: index["default"].string,
+        value: index["default"].string
+      }))
+    }))
+  }),
+  /* Provide a label to the button that starts condition builder
    */
   startConditionLabel: index["default"].string.isRequired
 };
 
-exports["default"] = ConditionBuilderContent;
+exports["default"] = ConditionBuilderContent$1;

package/lib/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/lib/components/ConditionBuilder/ConditionBuilderContext/{DataTreeContext.js → ConditionBuilderProvider.js}

@@ -25,7 +25,8 @@ var emptyState = {
     conditions: [{
       property: undefined,
       operator: '',
-      value: ''
+      value: '',
+      popoverToOpen: 'propertyField'
     }]
   }]
 };
@@ -58,7 +59,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
@@ -69,28 +72,44 @@ ConditionBuilderProvider.propTypes = {
    * Provide the contents of the ConditionBuilder.
    */
   children: index["default"].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: index["default"].func,
   /**
    * This is a mandatory prop that defines the input to the condition builder.
-   
+    
    */
   inputConfig: index["default"].shape({
     properties: index["default"].arrayOf(index["default"].shape({
       id: index["default"].string,
       label: index["default"].string,
-      icon: index["default"].func,
-      type: index["default"].oneOf(['text', 'number', 'date', 'option']),
+      icon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+      type: index["default"].oneOf(['text', 'number', 'date', 'option', 'time']),
       config: index["default"].shape({
         options: index["default"].arrayOf(index["default"].shape({
           id: index["default"].string,
           label: index["default"].string,
-          icon: index["default"].func
+          icon: index["default"].oneOfType([index["default"].func, index["default"].object])
         })),
         includeSearch: index["default"].bool
       })
     }))
   }).isRequired,
-  popOverSearchThreshold: index["default"].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: index["default"].number.isRequired,
+  /**
+   * Provide the condition builder variant: sentence/ tree
+   */
+  variant: index["default"].string.isRequired
 };
 
 exports.ConditionBuilderContext = ConditionBuilderContext;

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