@carbon/ibm-products 2.42.1-canary.2 → 2.42.1-canary.22

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

@@ -9,6 +9,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var icons = require('@carbon/react/icons');
 var ConditionBuilderButton = require('../ConditionBuilderButton/ConditionBuilderButton.js');
@@ -21,28 +22,110 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var ConditionBuilderAdd = function ConditionBuilderAdd(_ref) {
   var className = _ref.className,
-    onClick = _ref.onClick;
+    onClick = _ref.onClick,
+    addConditionSubGroupHandler = _ref.addConditionSubGroupHandler,
+    showConditionSubGroupPreviewHandler = _ref.showConditionSubGroupPreviewHandler,
+    hideConditionSubGroupPreviewHandler = _ref.hideConditionSubGroupPreviewHandler,
+    showConditionPreviewHandler = _ref.showConditionPreviewHandler,
+    hideConditionPreviewHandler = _ref.hideConditionPreviewHandler,
+    enableSubGroup = _ref.enableSubGroup,
+    buttonLabel = _ref.buttonLabel;
+  var _useState = React.useState(false),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    isAddSubgroup = _useState2[0],
+    setIsAddSubgroup = _useState2[1];
+  var showAddSubGroup = function showAddSubGroup() {
+    setIsAddSubgroup(true);
+  };
+  var hideAddSubGroup = function hideAddSubGroup() {
+    setIsAddSubgroup(false);
+  };
+  var onClickHandler = function onClickHandler() {
+    hideConditionPreviewHandler === null || hideConditionPreviewHandler === void 0 || hideConditionPreviewHandler();
+    onClick();
+  };
+  var previewHandlers = function previewHandlers() {
+    return enableSubGroup ? {
+      onMouseEnter: showConditionPreviewHandler,
+      onMouseLeave: hideConditionPreviewHandler,
+      onFocus: showConditionPreviewHandler,
+      onBlur: hideConditionPreviewHandler
+    } : {};
+  };
+  var previewHandlersForSubgroup = function previewHandlersForSubgroup() {
+    return {
+      onMouseEnter: showConditionSubGroupPreviewHandler,
+      onMouseLeave: hideConditionSubGroupPreviewHandler,
+      onFocus: showConditionSubGroupPreviewHandler,
+      onBlur: hideConditionSubGroupPreviewHandler
+    };
+  };
+  var wrapperProps = enableSubGroup ? {
+    role: 'gridcell',
+    'aria-label': DataConfigs.translateWithId('add-condition')
+  } : {};
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: className,
-    role: "gridcell"
-  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, {
+    className: "".concat(className, " ").concat(DataConfigs.blockClass, "__add-button-wrapper"),
+    role: !enableSubGroup ? 'gridcell' : 'none',
+    "aria-label": !enableSubGroup ? DataConfigs.translateWithId('add_condition_row') : undefined,
+    onMouseEnter: showAddSubGroup,
+    onMouseLeave: hideAddSubGroup,
+    onFocus: showAddSubGroup,
+    onBlur: hideAddSubGroup
+  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, _rollupPluginBabelHelpers["extends"]({
     renderIcon: icons.AddAlt,
-    onClick: onClick,
+    onClick: onClickHandler
+  }, previewHandlers(), {
     className: "".concat(DataConfigs.blockClass, "__add-button"),
     hideLabel: true,
-    label: DataConfigs.translateWithId('add-condition')
-  }));
+    "data-name": "addButton",
+    label: buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : DataConfigs.translateWithId('add-condition'),
+    wrapperProps: wrapperProps
+  })), isAddSubgroup && enableSubGroup && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, _rollupPluginBabelHelpers["extends"]({
+    renderIcon: icons.TextNewLine,
+    onClick: addConditionSubGroupHandler,
+    className: "".concat(DataConfigs.blockClass, "__add-condition-group ").concat(DataConfigs.blockClass, "__gap-left"),
+    hideLabel: true,
+    label: DataConfigs.translateWithId('add-condition'),
+    wrapperProps: wrapperProps
+  }, previewHandlersForSubgroup())));
 };
 var ConditionBuilderAdd$1 = ConditionBuilderAdd;
 ConditionBuilderAdd.propTypes = {
+  /**
+   * handler for hiding sub group preview
+   */
+  addConditionSubGroupHandler: index["default"].func,
+  /**
+   * handler for hiding sub group preview
+   */ /**
+      * tooltip label for plus button
+      */
+  buttonLabel: index["default"].string,
   /**
    * Provide an optional class to be applied to the containing node.
    */
   className: index["default"].string,
   /**
-   * callback triggered on click of add button
+   * boolean to enable sub groups for the tree variant
+   */
+  enableSubGroup: index["default"].bool,
+  /**
+   * handler for hiding sub group preview
+   */
+  hideConditionPreviewHandler: index["default"].func,
+  hideConditionSubGroupPreviewHandler: index["default"].func,
+  /**
+   * handler for hiding sub group preview
+   */ /**
+      * callback triggered on click of add button
+      */
+  onClick: index["default"].func,
+  showConditionPreviewHandler: index["default"].func,
+  showConditionSubGroupPreviewHandler: index["default"].func
+  /**
+   * handler for hiding sub group preview
    */
-  onClick: index["default"].func
 };
 
 exports["default"] = ConditionBuilderAdd$1;

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

@@ -1,5 +1,4 @@
-export function ConditionBuilderButton({ className, label, hideLabel, tooltipAlign, renderIcon: Icon, onClick, showToolTip, ...rest }: {
-    [x: string]: any;
+export function ConditionBuilderButton({ className, label, hideLabel, tooltipAlign, renderIcon: Icon, onClick, showToolTip, wrapperProps, onBlur, onFocus, onMouseEnter, onMouseLeave, }: {
     className: any;
     label: any;
     hideLabel: any;
@@ -7,16 +6,26 @@ export function ConditionBuilderButton({ className, label, hideLabel, tooltipAli
     renderIcon: any;
     onClick: any;
     showToolTip: any;
+    wrapperProps: any;
+    onBlur: any;
+    onFocus: any;
+    onMouseEnter: any;
+    onMouseLeave: 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 onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         let onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        let onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        let onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        let onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
         let renderIcon: PropTypes.Requireable<object>;
         let showToolTip: PropTypes.Requireable<boolean>;
         let tooltipAlign: PropTypes.Requireable<string>;
+        let wrapperProps: PropTypes.Requireable<object>;
     }
 }
 import PropTypes from 'prop-types';

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

@@ -21,9 +21,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 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 _Icon, _span;
   var className = _ref.className,
     label = _ref.label,
     hideLabel = _ref.hideLabel,
@@ -31,21 +30,29 @@ var ConditionBuilderButton = function ConditionBuilderButton(_ref) {
     Icon = _ref.renderIcon,
     onClick = _ref.onClick,
     showToolTip = _ref.showToolTip,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+    wrapperProps = _ref.wrapperProps,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave;
   var Button = function Button() {
-    return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+    return /*#__PURE__*/React__default["default"].createElement("button", {
       // role={'gridcell'}
       tabIndex: -1,
       className: cx__default["default"]([className, "".concat(DataConfigs.blockClass, "__button"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__text-ellipsis"), showToolTip && !hideLabel)]),
       type: "button",
-      onClick: onClick
-    }, rest), Icon && (_Icon || (_Icon = /*#__PURE__*/React__default["default"].createElement(Icon, null))), !hideLabel && label);
+      onClick: onClick,
+      onBlur: onBlur,
+      onFocus: onFocus,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave
+    }, Icon && (_Icon || (_Icon = /*#__PURE__*/React__default["default"].createElement(Icon, null))), !hideLabel && (_span || (_span = /*#__PURE__*/React__default["default"].createElement("span", null, 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());
+  }, wrapperProps), Button()) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, Button());
 };
 ConditionBuilderButton.propTypes = {
   /**
@@ -60,10 +67,17 @@ ConditionBuilderButton.propTypes = {
    * label of the button
    */
   label: index["default"].string,
+  /**
+   * mouse events callbacks
+   */
+  onBlur: index["default"].func,
   /**
    * callback triggered on click of add button
    */
   onClick: index["default"].func,
+  onFocus: index["default"].func,
+  onMouseEnter: index["default"].func,
+  onMouseLeave: index["default"].func,
   /**
    * Optional prop to allow overriding the icon rendering.
    */
@@ -77,7 +91,11 @@ ConditionBuilderButton.propTypes = {
   /**
    * tooltip position
    */
-  tooltipAlign: index["default"].string
+  tooltipAlign: index["default"].string,
+  /**
+   * optional props for tree grid to add role and aria-label to wrapper span
+   */
+  wrapperProps: index["default"].object
 };
 
 exports.ConditionBuilderButton = ConditionBuilderButton;

package/lib/components/ConditionBuilder/{ConditionConnector → ConditionBuilderConnector}/ConditionConnector.js

@@ -14,21 +14,22 @@ var React = require('react');
 var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
 var ConditionBuilderItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js');
 var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
-var settings = require('../../../settings.js');
 var index = require('../../../node_modules/prop-types/index.js');
 var util = require('../utils/util.js');
+var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuilderProvider.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _excluded = ["operator", "className", "onChange"];
-var blockClass = "".concat(settings.pkg.prefix, "--condition-builder");
-function ConditionConnector(_ref) {
+var ConditionConnector = function ConditionConnector(_ref) {
   var operator = _ref.operator,
     className = _ref.className,
     onChange = _ref.onChange,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
+    variant = _useContext.variant;
   var handleConnectorHover = React.useCallback(function (parentGroup, isHover) {
     if (isHover) {
       parentGroup.classList.add('hoveredConnector');
@@ -48,33 +49,37 @@ function ConditionConnector(_ref) {
     onChange(op);
     util.focusThisField(evt);
   };
-  return (
-    /*#__PURE__*/
-    // <div className={className} {...rest}>
-    React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, _rollupPluginBabelHelpers["extends"]({
-      label: operator,
-      title: DataConfigs.translateWithId('connector'),
-      "data-name": "connectorField",
-      onMouseEnter: activeConnectorHandler,
-      onMouseLeave: inActiveConnectorHandler,
-      onFocus: activeConnectorHandler,
-      onBlur: inActiveConnectorHandler
-    }, rest, {
-      popOverClassName: className,
-      className: "".concat(blockClass, "__connector-button ")
-    }), /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
-      config: {
-        options: DataConfigs.connectorConfig
-      },
-      conditionState: {
-        value: operator,
-        label: DataConfigs.translateWithId('connector')
-      },
-      onChange: onChangeHandler
-    }))
-    // </div>
-  );
-}
+  return variant == 'tree' ? /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(className, " ").concat(DataConfigs.blockClass, "__connector-disabled")
+  }, operator) :
+  /*#__PURE__*/
+  // <div className={className} {...rest}>
+  React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, _rollupPluginBabelHelpers["extends"]({
+    label: operator,
+    title: DataConfigs.translateWithId('connector'),
+    "data-name": "connectorField",
+    onMouseEnter: activeConnectorHandler,
+    onMouseLeave: inActiveConnectorHandler,
+    onFocus: activeConnectorHandler,
+    onBlur: inActiveConnectorHandler
+  }, rest, {
+    popOverClassName: className,
+    className: "".concat(DataConfigs.blockClass, "__connector-button ")
+  }), /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
+    config: {
+      options: DataConfigs.connectorConfig
+    },
+    conditionState: {
+      value: operator,
+      label: DataConfigs.translateWithId('connector')
+    },
+    onChange: onChangeHandler
+  }))
+
+  // </div>
+  ;
+};
+var ConditionConnector$1 = ConditionConnector;
 ConditionConnector.propTypes = {
   /**
    * Provide an optional class to be applied to the containing node.
@@ -90,4 +95,4 @@ ConditionConnector.propTypes = {
   operator: index["default"].string
 };
 
-exports["default"] = ConditionConnector;
+exports["default"] = ConditionConnector$1;

package/lib/components/ConditionBuilder/ConditionBuilderConnector/GroupConnector.d.ts

@@ -0,0 +1,2 @@
+export default GroupConnector;
+declare function GroupConnector(): import("react/jsx-runtime").JSX.Element;

package/lib/components/ConditionBuilder/ConditionBuilderConnector/GroupConnector.js

@@ -0,0 +1,52 @@
+/**
+ * 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 ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
+var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
+var ConditionBuilderItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js');
+var util = require('../utils/util.js');
+var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuilderProvider.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var GroupConnector = function GroupConnector() {
+  var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
+    rootState = _useContext.rootState;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(DataConfigs.blockClass, "__group-separator"),
+    role: "row",
+    tabIndex: -1,
+    "aria-level": 1
+  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
+    label: rootState.operator,
+    title: DataConfigs.translateWithId('condition'),
+    "data-name": "connectorField",
+    popOverClassName: "".concat(DataConfigs.blockClass, "__gap"),
+    className: "".concat(DataConfigs.blockClass, "__statement-button")
+  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
+    conditionState: {
+      value: rootState.operator,
+      label: DataConfigs.translateWithId('condition')
+    },
+    onChange: function onChange(v, e) {
+      util.focusThisField(e);
+    },
+    config: {
+      options: DataConfigs.connectorConfig
+    }
+  })));
+};
+var GroupConnector$1 = GroupConnector;
+
+exports["default"] = GroupConnector$1;

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

@@ -7,7 +7,12 @@ declare function ConditionBuilderContent({ startConditionLabel, conditionBuilder
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace ConditionBuilderContent {
     namespace propTypes {
+        let actions: PropTypes.Requireable<(PropTypes.InferProps<{
+            id: PropTypes.Requireable<number>;
+            label: PropTypes.Requireable<string>;
+        }> | null | undefined)[]>;
         let conditionBuilderRef: PropTypes.Requireable<object>;
+        let getActionsState: PropTypes.Requireable<(...args: any[]) => any>;
         let getConditionState: PropTypes.Validator<(...args: any[]) => any>;
         let initialState: PropTypes.Requireable<PropTypes.InferProps<{
             groups: PropTypes.Requireable<(PropTypes.InferProps<{

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

@@ -17,24 +17,37 @@ var icons = require('@carbon/react/icons');
 var ConditionGroupBuilder = require('../ConditionGroupBuilder/ConditionGroupBuilder.js');
 var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuilderProvider.js');
 var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
+var ConditionBuilderButton = require('../ConditionBuilderButton/ConditionBuilderButton.js');
+var uuidv4 = require('../../../global/js/utils/uuidv4.js');
+var ConditionPreview = require('../ConditionPreview/ConditionPreview.js');
+var GroupConnector = require('../ConditionBuilderConnector/GroupConnector.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+var _Heading, _GroupConnector, _ConditionPreview;
 var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
   var _rootState$groups2;
   var startConditionLabel = _ref.startConditionLabel,
     conditionBuilderRef = _ref.conditionBuilderRef,
     getConditionState = _ref.getConditionState,
     initialState = _ref.initialState;
+  // const { rootState, setRootState, variant, actionState } = useContext(
+  //   ConditionBuilderContext
+  // );
   var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
     rootState = _useContext.rootState,
-    setRootState = _useContext.setRootState;
+    setRootState = _useContext.setRootState,
+    variant = _useContext.variant;
   var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     isConditionBuilderActive = _useState2[0],
     setIsConditionBuilderActive = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+    showConditionGroupPreview = _useState4[0],
+    setShowConditionGroupPreview = _useState4[1];
   React.useEffect(function () {
     var _rootState$groups;
     if (rootState !== null && rootState !== void 0 && (_rootState$groups = rootState.groups) !== null && _rootState$groups !== void 0 && _rootState$groups.length) {
@@ -47,7 +60,12 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rootState, conditionBuilderRef]);
+  }, [rootState]);
+
+  // useEffect(() => {
+  //   getActionsState?.(actionState);
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [actionState]);
   var onStartConditionBuilder = function onStartConditionBuilder() {
     //when add condition button is clicked.
     setIsConditionBuilderActive(true);
@@ -71,10 +89,28 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
       groups: groups
     }));
   };
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__content-container"),
-    tabIndex: -1
-  }, !isConditionBuilderActive && /*#__PURE__*/React__default["default"].createElement(react.Button, {
+  var addConditionGroupHandler = function addConditionGroupHandler() {
+    var newGroup = {
+      groupSeparateOperator: 'and',
+      // 'or'|'and'|'null',
+      groupOperator: 'and',
+      //'and|or',
+      statement: 'if',
+      // 'if|exclude if',
+      id: uuidv4["default"](),
+      conditions: [{
+        property: undefined,
+        operator: '',
+        value: '',
+        popoverToOpen: 'propertyField',
+        id: uuidv4["default"]()
+      }]
+    };
+    setRootState(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rootState), {}, {
+      groups: [].concat(_rollupPluginBabelHelpers.toConsumableArray(rootState.groups), [newGroup])
+    }));
+  };
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !isConditionBuilderActive && /*#__PURE__*/React__default["default"].createElement(react.Button, {
     className: "".concat(DataConfigs.blockClass, "__add-condition-button"),
     renderIcon: function renderIcon(props) {
       return /*#__PURE__*/React__default["default"].createElement(icons.Add, _rollupPluginBabelHelpers["extends"]({
@@ -85,10 +121,22 @@ var ConditionBuilderContent = 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 (eachGroup, groupIndex) {
-    return /*#__PURE__*/React__default["default"].createElement(ConditionGroupBuilder["default"], {
+  }, startConditionLabel), isConditionBuilderActive &&
+  /*#__PURE__*/
+  // <h5 >Condition</h5>
+  React__default["default"].createElement(react.Section, {
+    className: "".concat(DataConfigs.blockClass, "__heading"),
+    level: 4
+  }, _Heading || (_Heading = /*#__PURE__*/React__default["default"].createElement(react.Heading, null, "Condition"))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(DataConfigs.blockClass, "__content-container"),
+    role: "treegrid",
+    "aria-label": "condition builder tree"
+  }, 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("div", {
+      key: eachGroup.id,
+      className: "".concat(DataConfigs.blockClass, "__group-wrapper")
+    }, /*#__PURE__*/React__default["default"].createElement(ConditionGroupBuilder["default"], {
       className: "".concat(DataConfigs.blockClass, "__group"),
-      key: groupIndex,
       aria: {
         level: 1,
         posinset: groupIndex * 2 + 1,
@@ -102,15 +150,48 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
         onChangeHandler(updatedGroup, groupIndex);
       },
       conditionBuilderRef: conditionBuilderRef
-    });
-  })));
+    }), groupIndex < rootState.groups.length - 1 && (_GroupConnector || (_GroupConnector = /*#__PURE__*/React__default["default"].createElement(GroupConnector["default"], null))));
+  })), isConditionBuilderActive && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, variant == 'tree' && /*#__PURE__*/React__default["default"].createElement("div", {
+    role: "row",
+    tabIndex: -1,
+    "aria-level": 1
+  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, {
+    renderIcon: icons.TextNewLine,
+    onClick: addConditionGroupHandler,
+    onMouseEnter: function onMouseEnter() {
+      setShowConditionGroupPreview(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      setShowConditionGroupPreview(false);
+    },
+    className: "".concat(DataConfigs.blockClass, "__add-condition-group "),
+    hideLabel: true,
+    label: DataConfigs.translateWithId('add-condition-sub-group'),
+    wrapperProps: {
+      role: 'gridcell',
+      'aria-label': DataConfigs.translateWithId('add-condition-sub-group')
+    }
+  })), showConditionGroupPreview && (_ConditionPreview || (_ConditionPreview = /*#__PURE__*/React__default["default"].createElement(ConditionPreview["default"], {
+    previewType: "newGroup"
+  }))))));
 };
 var ConditionBuilderContent$1 = ConditionBuilderContent;
 ConditionBuilderContent.propTypes = {
+  /**
+   * optional array of object that give the list of actions.
+   */
+  actions: index["default"].arrayOf(index["default"].shape({
+    id: index["default"].number,
+    label: index["default"].string
+  })),
   /**
    * ref of condition builder
    */
   conditionBuilderRef: index["default"].object,
+  /**
+   * callback functions that will provide the updated action state back.
+   */
+  getActionsState: index["default"].func,
   /**
    * This is a callback function that returns the updated state
    */

package/lib/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.d.ts

@@ -1,4 +1,5 @@
 export namespace emptyState {
+    let operator: string;
     let groups: {
         groupSeparateOperator: null;
         groupOperator: string;

package/lib/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.js

@@ -19,6 +19,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var emptyState = {
+  operator: 'or',
   groups: [{
     groupSeparateOperator: null,
     groupOperator: 'and',

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

@@ -17,9 +17,12 @@ export namespace translationsObject {
         after: string;
         between: string;
         'add-condition': string;
+        'add-condition-group': string;
+        'add-condition-sub-group': string;
         condition: string;
         property: string;
         operator: string;
+        value: string;
         connector: string;
         condition_row: string;
         remove_condition: string;
@@ -27,5 +30,9 @@ export namespace translationsObject {
         start: string;
         end: string;
         clear_search: string;
+        actions: string;
+        then: string;
+        remove_action: string;
+        add_action: string;
     };
 }

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

@@ -28,16 +28,23 @@ var translationsObject = {
     after: 'is after',
     between: 'is between',
     'add-condition': 'Add Condition',
+    'add-condition-group': 'Add Condition Group',
+    'add-condition-sub-group': 'Add Condition sub group',
     condition: 'Condition',
     property: 'Property',
     operator: 'Operator',
+    value: 'Value',
     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'
+    clear_search: 'Clear search input',
+    actions: 'Actions',
+    then: 'then',
+    remove_action: 'Remove Action',
+    add_action: 'Add action'
   }
 };
 

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

@@ -95,7 +95,7 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
     label: propertyLabel !== null && propertyLabel !== void 0 ? propertyLabel : DataConfigs.translateWithId('add-condition'),
     hideLabel: !label ? true : false,
     onClick: function onClick() {
-      setOpen(!open);
+      children ? setOpen(!open) : null;
     },
     className: className,
     "aria-haspopup": true,