@carbon/ibm-products 2.42.1-canary.7 → 2.43.0

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

@@ -8,25 +8,38 @@
 import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends, toConsumableArray as _toConsumableArray } 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 { Button, Section, Heading } from '@carbon/react';
+import { Add, TextNewLine } from '@carbon/react/icons';
 import ConditionGroupBuilder from '../ConditionGroupBuilder/ConditionGroupBuilder.js';
 import { ConditionBuilderContext, emptyState } from '../ConditionBuilderContext/ConditionBuilderProvider.js';
-import { blockClass } from '../ConditionBuilderContext/DataConfigs.js';
+import { blockClass, translateWithId } from '../ConditionBuilderContext/DataConfigs.js';
+import { ConditionBuilderButton } from '../ConditionBuilderButton/ConditionBuilderButton.js';
+import uuidv4 from '../../../global/js/utils/uuidv4.js';
+import ConditionPreview from '../ConditionPreview/ConditionPreview.js';
+import GroupConnector from '../ConditionBuilderConnector/GroupConnector.js';
 
+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 = useContext(ConditionBuilderContext),
     rootState = _useContext.rootState,
-    setRootState = _useContext.setRootState;
+    setRootState = _useContext.setRootState,
+    variant = _useContext.variant;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isConditionBuilderActive = _useState2[0],
     setIsConditionBuilderActive = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showConditionGroupPreview = _useState4[0],
+    setShowConditionGroupPreview = _useState4[1];
   useEffect(function () {
     var _rootState$groups;
     if (rootState !== null && rootState !== void 0 && (_rootState$groups = rootState.groups) !== null && _rootState$groups !== void 0 && _rootState$groups.length) {
@@ -39,7 +52,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);
@@ -63,10 +81,28 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
       groups: groups
     }));
   };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__content-container"),
-    tabIndex: -1
-  }, !isConditionBuilderActive && /*#__PURE__*/React__default.createElement(Button, {
+  var addConditionGroupHandler = function addConditionGroupHandler() {
+    var newGroup = {
+      groupSeparateOperator: 'and',
+      // 'or'|'and'|'null',
+      groupOperator: 'and',
+      //'and|or',
+      statement: 'if',
+      // 'if|exclude if',
+      id: uuidv4(),
+      conditions: [{
+        property: undefined,
+        operator: '',
+        value: '',
+        popoverToOpen: 'propertyField',
+        id: uuidv4()
+      }]
+    };
+    setRootState(_objectSpread2(_objectSpread2({}, rootState), {}, {
+      groups: [].concat(_toConsumableArray(rootState.groups), [newGroup])
+    }));
+  };
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !isConditionBuilderActive && /*#__PURE__*/React__default.createElement(Button, {
     className: "".concat(blockClass, "__add-condition-button"),
     renderIcon: function renderIcon(props) {
       return /*#__PURE__*/React__default.createElement(Add, _extends({
@@ -77,10 +113,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.createElement(ConditionGroupBuilder, {
+  }, startConditionLabel), isConditionBuilderActive &&
+  /*#__PURE__*/
+  // <h5 >Condition</h5>
+  React__default.createElement(Section, {
+    className: "".concat(blockClass, "__heading"),
+    level: 4
+  }, _Heading || (_Heading = /*#__PURE__*/React__default.createElement(Heading, null, "Condition"))), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(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.createElement("div", {
+      key: eachGroup.id,
+      className: "".concat(blockClass, "__group-wrapper")
+    }, /*#__PURE__*/React__default.createElement(ConditionGroupBuilder, {
       className: "".concat(blockClass, "__group"),
-      key: groupIndex,
       aria: {
         level: 1,
         posinset: groupIndex * 2 + 1,
@@ -94,15 +142,48 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
         onChangeHandler(updatedGroup, groupIndex);
       },
       conditionBuilderRef: conditionBuilderRef
-    });
-  })));
+    }), groupIndex < rootState.groups.length - 1 && (_GroupConnector || (_GroupConnector = /*#__PURE__*/React__default.createElement(GroupConnector, null))));
+  })), isConditionBuilderActive && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, variant == 'tree' && /*#__PURE__*/React__default.createElement("div", {
+    role: "row",
+    tabIndex: -1,
+    "aria-level": 1
+  }, /*#__PURE__*/React__default.createElement(ConditionBuilderButton, {
+    renderIcon: TextNewLine,
+    onClick: addConditionGroupHandler,
+    onMouseEnter: function onMouseEnter() {
+      setShowConditionGroupPreview(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      setShowConditionGroupPreview(false);
+    },
+    className: "".concat(blockClass, "__add-condition-group "),
+    hideLabel: true,
+    label: translateWithId('add-condition-sub-group'),
+    wrapperProps: {
+      role: 'gridcell',
+      'aria-label': translateWithId('add-condition-sub-group')
+    }
+  })), showConditionGroupPreview && (_ConditionPreview || (_ConditionPreview = /*#__PURE__*/React__default.createElement(ConditionPreview, {
+    previewType: "newGroup"
+  }))))));
 };
 var ConditionBuilderContent$1 = ConditionBuilderContent;
 ConditionBuilderContent.propTypes = {
+  /**
+   * optional array of object that give the list of actions.
+   */
+  actions: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.number,
+    label: PropTypes.string
+  })),
   /**
    * ref of condition builder
    */
   conditionBuilderRef: PropTypes.object,
+  /**
+   * callback functions that will provide the updated action state back.
+   */
+  getActionsState: PropTypes.func,
   /**
    * This is a callback function that returns the updated state
    */

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

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

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

@@ -11,6 +11,7 @@ import PropTypes from '../../../node_modules/prop-types/index.js';
 import uuidv4 from '../../../global/js/utils/uuidv4.js';
 
 var emptyState = {
+  operator: 'or',
   groups: [{
     groupSeparateOperator: null,
     groupOperator: 'and',

package/es/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/es/components/ConditionBuilder/ConditionBuilderContext/translationObject.js

@@ -24,16 +24,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/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js

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

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

@@ -5,12 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useContext, useState, Fragment } from 'react';
 import ConditionBlock from '../ConditionBlock/ConditionBlock.js';
 import PropTypes from '../../../node_modules/prop-types/index.js';
-import { blockClass, translateWithId } from '../ConditionBuilderContext/DataConfigs.js';
+import cx from 'classnames';
+import { blockClass, translateWithId, statementConfig } from '../ConditionBuilderContext/DataConfigs.js';
+import { ConditionBuilderItem } from '../ConditionBuilderItem/ConditionBuilderItem.js';
+import { ConditionBuilderItemOption } from '../ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js';
+import { focusThisField } from '../utils/util.js';
+import ConditionConnector from '../ConditionBuilderConnector/ConditionConnector.js';
+import { ConditionBuilderContext } from '../ConditionBuilderContext/ConditionBuilderProvider.js';
 import uuidv4 from '../../../global/js/utils/uuidv4.js';
+import ConditionPreview from '../ConditionPreview/ConditionPreview.js';
+
+var _ConditionPreview, _ConditionPreview2;
 
 /**
  *
@@ -18,14 +27,24 @@ import uuidv4 from '../../../global/js/utils/uuidv4.js';
  * All the inner components of group are called from here.
  * @returns
  */
+
 var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
-  var _group$conditions;
   var group = _ref.group,
     aria = _ref.aria,
     onRemove = _ref.onRemove,
     onChange = _ref.onChange,
     conditionBuilderRef = _ref.conditionBuilderRef,
     className = _ref.className;
+  var _useContext = useContext(ConditionBuilderContext),
+    variant = _useContext.variant;
+  var _useState = useState(-1),
+    _useState2 = _slicedToArray(_useState, 2),
+    showConditionPreview = _useState2[0],
+    setShowConditionPreview = _useState2[1];
+  var _useState3 = useState(-1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showConditionSubGroupPreview = _useState4[0],
+    setShowConditionSubGroupPreview = _useState4[1];
   var onRemoveHandler = function onRemoveHandler(conditionId, evt) {
     if (group.conditions.length > 1) {
       onChange(_objectSpread2(_objectSpread2({}, group), {}, {
@@ -56,72 +75,183 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       conditions: [].concat(_toConsumableArray(group.conditions.slice(0, conditionIndex + 1)), [newCondition], _toConsumableArray(group.conditions.slice(conditionIndex + 1)))
     }));
   };
-  var isLastCondition = function isLastCondition(conditionIndex, conditionArr) {
-    return conditionIndex + 1 >= conditionArr.length || conditionArr.length - 1 != conditionIndex && conditionArr[conditionIndex + 1].conditions;
-  };
-  var handleFocusOnClose = function handleFocusOnClose(evt) {
-    var _evt$currentTarget;
-    var previousClose = (_evt$currentTarget = evt.currentTarget) === null || _evt$currentTarget === void 0 || (_evt$currentTarget = _evt$currentTarget.closest('[role="row"]')) === null || _evt$currentTarget === void 0 || (_evt$currentTarget = _evt$currentTarget.parentElement) === null || _evt$currentTarget === void 0 || (_evt$currentTarget = _evt$currentTarget.previousSibling) === null || _evt$currentTarget === void 0 ? void 0 : _evt$currentTarget.querySelector('[data-name="closeCondition"]');
+  var handleFocusOnClose = function handleFocusOnClose(e) {
+    var _e$currentTarget;
+    var previousClose = (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 || (_e$currentTarget = _e$currentTarget.closest('[role="row"]')) === null || _e$currentTarget === void 0 || (_e$currentTarget = _e$currentTarget.previousSibling) === null || _e$currentTarget === void 0 ? void 0 : _e$currentTarget.querySelector('[data-name="closeCondition"]');
     if (previousClose) {
       previousClose.focus();
     }
   };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(className, "  eachGroup")
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__condition-wrapper"),
-    role: "grid",
-    "aria-label": translateWithId('condition_builder_group')
-  }, group === null || group === void 0 || (_group$conditions = group.conditions) === null || _group$conditions === void 0 ? void 0 : _group$conditions.map(function (eachCondition, conditionIndex) {
+  var addConditionSubGroupHandler = function addConditionSubGroupHandler(conditionIndex) {
+    onChange(_objectSpread2(_objectSpread2({}, group), {}, {
+      conditions: [].concat(_toConsumableArray(group.conditions.slice(0, conditionIndex + 1)), [{
+        groupSeparateOperator: null,
+        groupOperator: 'and',
+        statement: 'if',
+        conditions: [{
+          property: undefined,
+          operator: '',
+          value: '',
+          popoverToOpen: 'propertyField',
+          id: uuidv4()
+        }],
+        id: uuidv4()
+      }], _toConsumableArray(group.conditions.slice(conditionIndex + 1)))
+    }));
+  };
+  var isLastCondition = function isLastCondition(conditionIndex, conditionArr) {
+    return conditionIndex + 1 >= conditionArr.length || conditionArr.length - 1 != conditionIndex && conditionArr[conditionIndex + 1].conditions;
+  };
+  var _showConditionSubGroupPreviewHandler = function showConditionSubGroupPreviewHandler(conditionIndex) {
+    setShowConditionSubGroupPreview(conditionIndex);
+  };
+  var hideConditionSubGroupPreviewHandler = function hideConditionSubGroupPreviewHandler() {
+    setShowConditionSubGroupPreview(-1);
+  };
+  var _showConditionPreviewHandler = function showConditionPreviewHandler(conditionIndex) {
+    setShowConditionPreview(conditionIndex);
+  };
+  var hideConditionPreviewHandler = function hideConditionPreviewHandler() {
+    setShowConditionPreview(-1);
+  };
+  var onStatementChangeHandler = function onStatementChangeHandler(updatedStatement) {
+    onChange(_objectSpread2(_objectSpread2({}, group), {}, {
+      statement: updatedStatement
+    }));
+  };
+  var onConnectorOperatorChange = function onConnectorOperatorChange(op) {
+    onChange(_objectSpread2(_objectSpread2({}, group), {}, {
+      groupOperator: op
+    }));
+  };
+  var getSentenceVariant = function getSentenceVariant() {
+    var _group$conditions;
     return /*#__PURE__*/React__default.createElement("div", {
-      key: eachCondition.id
-    }, eachCondition.conditions && /*#__PURE__*/React__default.createElement(ConditionGroupBuilder, {
-      className: "".concat(blockClass, "__group"),
-      aria: {
-        level: aria.level + 1,
-        posinset: conditionIndex + 1,
-        setsize: group.conditions.length
-      },
-      group: eachCondition,
-      onChange: function onChange(updatedCondition) {
-        onChangeHandler(updatedCondition, conditionIndex);
-      },
-      onRemove: function onRemove(evt) {
-        onRemoveHandler(eachCondition.id, evt);
-      },
-      conditionBuilderRef: conditionBuilderRef
-    }), !eachCondition.conditions && /*#__PURE__*/React__default.createElement(ConditionBlock, {
-      conjunction: conditionIndex > 0 ? group.groupOperator : undefined,
-      aria: {
-        level: aria.level + 1,
-        posinset: conditionIndex + 1,
-        setsize: group.conditions.length
-      },
-      isStatement: conditionIndex == 0,
-      condition: eachCondition,
-      group: group,
-      conditionIndex: conditionIndex,
-      className: "".concat(blockClass, "__gap ").concat(blockClass, "__gap-bottom"),
-      onChange: function onChange(updatedConditions) {
-        onChangeHandler(updatedConditions, conditionIndex);
-      },
-      addConditionHandler: addConditionHandler,
-      onRemove: function onRemove(evt) {
-        onRemoveHandler(eachCondition.id, evt);
-      },
-      onConnectorOperatorChange: function onConnectorOperatorChange(op) {
-        onChange(_objectSpread2(_objectSpread2({}, group), {}, {
-          groupOperator: op
-        }));
+      className: "".concat(className, "  eachGroup")
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(blockClass, "__condition-wrapper"),
+      role: "grid",
+      "aria-label": translateWithId('condition_builder_group')
+    }, group === null || group === void 0 || (_group$conditions = group.conditions) === null || _group$conditions === void 0 ? void 0 : _group$conditions.map(function (eachCondition, conditionIndex) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: eachCondition.id,
+        className: "".concat(blockClass, "__group-wrapper")
+      }, /*#__PURE__*/React__default.createElement(ConditionBlock, {
+        conjunction: conditionIndex > 0 ? group.groupOperator : undefined,
+        aria: {
+          level: aria.level + 1,
+          posinset: conditionIndex + 1,
+          setsize: group.conditions.length
+        },
+        isStatement: conditionIndex == 0,
+        condition: eachCondition,
+        group: group,
+        conditionIndex: conditionIndex,
+        onChange: function onChange(updatedConditions) {
+          onChangeHandler(updatedConditions, conditionIndex);
+        },
+        addConditionHandler: addConditionHandler,
+        onRemove: function onRemove(e) {
+          onRemoveHandler(eachCondition.id, e);
+        },
+        onConnectorOperatorChange: onConnectorOperatorChange,
+        onStatementChange: onStatementChangeHandler,
+        isLastCondition: isLastCondition
+      }));
+    })));
+  };
+  var getTreeVariant = function getTreeVariant() {
+    var _group$conditions2;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(className, " ").concat(blockClass, "__condition-wrapper"),
+      role: aria.level === 1 ? 'rowgroup' : undefined,
+      "aria-label": aria.level == 1 ? translateWithId('condition_builder_group') : undefined
+    }, /*#__PURE__*/React__default.createElement("div", {
+      tabIndex: 0,
+      role: "row",
+      "aria-level": aria.level,
+      "aria-posinset": aria.posinset,
+      "aria-setsize": aria.setsize
+    }, /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
+      label: group.statement,
+      title: translateWithId('condition'),
+      "data-name": "connectorField",
+      popOverClassName: "".concat(blockClass, "__gap"),
+      className: "".concat(blockClass, "__statement-button")
+    }, /*#__PURE__*/React__default.createElement(ConditionBuilderItemOption, {
+      conditionState: {
+        value: group.statement,
+        label: translateWithId('condition')
       },
-      onStatementChange: function onStatementChange(updatedStatement) {
-        onChange(_objectSpread2(_objectSpread2({}, group), {}, {
-          statement: updatedStatement
-        }));
+      onChange: function onChange(v, evt) {
+        focusThisField(evt);
+        onStatementChangeHandler(v);
       },
-      isLastCondition: isLastCondition
+      config: {
+        options: statementConfig
+      }
+    }))), group === null || group === void 0 || (_group$conditions2 = group.conditions) === null || _group$conditions2 === void 0 ? void 0 : _group$conditions2.map(function (eachCondition, conditionIndex) {
+      return /*#__PURE__*/React__default.createElement(Fragment, {
+        key: eachCondition.id
+      }, eachCondition.conditions ? /*#__PURE__*/React__default.createElement("div", {
+        className: cx("".concat(blockClass, "__condition-block subgroup  ").concat(blockClass, "__gap"), _defineProperty({}, "".concat(blockClass, "__gap-bottom"), group.conditions.length < conditionIndex + 1))
+      }, /*#__PURE__*/React__default.createElement(ConditionConnector, {
+        className: "".concat(blockClass, "__gap ").concat(blockClass, "__groupConnector"),
+        operator: group.groupOperator,
+        "aria-hidden": true
+      }), /*#__PURE__*/React__default.createElement(ConditionGroupBuilder, {
+        aria: {
+          level: aria.level + 1,
+          posinset: conditionIndex + 1,
+          setsize: group.conditions.length
+        },
+        className: "".concat(blockClass, "__group"),
+        group: eachCondition,
+        onChange: function onChange(updatedConditions) {
+          onChangeHandler(updatedConditions, conditionIndex);
+        },
+        onRemove: function onRemove(e) {
+          onRemoveHandler(eachCondition.id, e);
+        },
+        conditionBuilderRef: conditionBuilderRef
+      })) : /*#__PURE__*/React__default.createElement(ConditionBlock, {
+        conjunction: conditionIndex > 0 ? group.groupOperator : undefined,
+        aria: {
+          level: aria.level + 1,
+          posinset: conditionIndex + 1,
+          setsize: group.conditions.length
+        },
+        isStatement: false,
+        condition: eachCondition,
+        group: group,
+        conditionIndex: conditionIndex,
+        addConditionHandler: addConditionHandler,
+        addConditionSubGroupHandler: addConditionSubGroupHandler,
+        onChange: function onChange(updatedConditions) {
+          onChangeHandler(updatedConditions, conditionIndex);
+        },
+        onRemove: function onRemove(e) {
+          onRemoveHandler(eachCondition.id, e);
+        },
+        onConnectorOperatorChange: onConnectorOperatorChange,
+        onStatementChange: onStatementChangeHandler,
+        showConditionSubGroupPreviewHandler: function showConditionSubGroupPreviewHandler() {
+          _showConditionSubGroupPreviewHandler(conditionIndex);
+        },
+        hideConditionSubGroupPreviewHandler: hideConditionSubGroupPreviewHandler,
+        showConditionPreviewHandler: function showConditionPreviewHandler() {
+          _showConditionPreviewHandler(conditionIndex);
+        },
+        hideConditionPreviewHandler: hideConditionPreviewHandler,
+        isLastCondition: isLastCondition
+      }), conditionIndex == showConditionSubGroupPreview && (_ConditionPreview || (_ConditionPreview = /*#__PURE__*/React__default.createElement(ConditionPreview, {
+        previewType: "subGroup"
+      }))), conditionIndex == showConditionPreview && (_ConditionPreview2 || (_ConditionPreview2 = /*#__PURE__*/React__default.createElement(ConditionPreview, {
+        previewType: "condition"
+      }))));
     }));
-  })));
+  };
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, variant == 'tree' && getTreeVariant(), variant == 'sentence' && getSentenceVariant());
 };
 var ConditionGroupBuilder$1 = ConditionGroupBuilder;
 ConditionGroupBuilder.propTypes = {
@@ -130,19 +260,19 @@ ConditionGroupBuilder.propTypes = {
    */
   aria: PropTypes.object,
   /**
-   * Provide an  class to be applied to the containing node.
+   * state defines the current group
+   */
+  /**
+   * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
   /**
+  className: PropTypes.string,
    * ref of condition builder
    */
   conditionBuilderRef: PropTypes.object,
-  /**
-   * group defines the current group
-   */
   group: PropTypes.object,
   /**
-  
    * callback to update the current condition of the state tree
    */
   onChange: PropTypes.func,

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

@@ -0,0 +1,10 @@
+export default ConditionPreview;
+declare function ConditionPreview({ previewType }: {
+    previewType: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace ConditionPreview {
+    namespace propTypes {
+        let previewType: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from 'prop-types';

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

@@ -0,0 +1,69 @@
+/**
+ * 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 React__default from 'react';
+import PropTypes from '../../../node_modules/prop-types/index.js';
+import { blockClass, translateWithId } from '../ConditionBuilderContext/DataConfigs.js';
+import { ConditionBuilderItem } from '../ConditionBuilderItem/ConditionBuilderItem.js';
+import ConditionConnector from '../ConditionBuilderConnector/ConditionConnector.js';
+
+var ConditionPreview = function ConditionPreview(_ref) {
+  var previewType = _ref.previewType;
+  var getConditionSection = function getConditionSection() {
+    return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
+      label: translateWithId('property')
+    }), /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
+      label: translateWithId('operator')
+    }), /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
+      label: translateWithId('value')
+    }));
+  };
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, previewType == 'newGroup' && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__group__row ").concat(blockClass, "__group-preview  ")
+  }, /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
+    className: "".concat(blockClass, "__statement-button"),
+    label: translateWithId('and')
+  })), /*#__PURE__*/React__default.createElement("div", {
+    "aria-hidden": true,
+    className: "".concat(blockClass, "__group ").concat(blockClass, "__condition-wrapper ").concat(blockClass, "__group-preview ").concat(blockClass, "__group-wrapper")
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__gap")
+  }, /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
+    className: "".concat(blockClass, "__statement-button"),
+    label: translateWithId('if')
+  })), getConditionSection())), previewType == 'subGroup' && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__group-preview")
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__condition-block  ").concat(blockClass, "__gap")
+  }, /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
+    label: translateWithId('and'),
+    className: "".concat(blockClass, "__statement-button"),
+    popOverClassName: "".concat(blockClass, "__gap")
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__group ").concat(blockClass, "__condition-wrapper")
+  }, /*#__PURE__*/React__default.createElement(ConditionConnector, {
+    className: "".concat(blockClass, "__gap ").concat(blockClass, "__groupConnector"),
+    operator: translateWithId('if')
+  }), getConditionSection()))), previewType == 'condition' && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__group-preview")
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__condition-block  ").concat(blockClass, "__gap")
+  }, /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
+    label: translateWithId('and'),
+    className: "".concat(blockClass, "__statement-button"),
+    popOverClassName: "".concat(blockClass, "__gap")
+  }), getConditionSection())));
+};
+var ConditionPreview$1 = ConditionPreview;
+ConditionPreview.propTypes = {
+  /**
+   * type of review to be displayed
+   */
+  previewType: PropTypes.oneOf(['condition', 'subGroup', 'newGroup'])
+};
+
+export { ConditionPreview$1 as default };

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

@@ -2,3 +2,4 @@ export function focusThisField(evt: any): void;
 export function focusThisItem(currentElement: any): void;
 export function traverseClockVise(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any): void;
 export function traverseReverse(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any): void;
+export function checkForHoldingKey(evt: any, key: any): any;