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

package/es/components/ConditionBuilder/ConditionBlock/ConditionBlock.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useContext, useState } from 'react';
 import { Close } from '@carbon/react/icons';
 import { ConditionBuilderItem } from '../ConditionBuilderItem/ConditionBuilderItem.js';
@@ -13,7 +13,7 @@ import PropTypes from '../../../node_modules/prop-types/index.js';
 import { blockClass, translateWithId, statementConfig, operatorConfig } from '../ConditionBuilderContext/DataConfigs.js';
 import { ConditionBuilderItemOption } from '../ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js';
 import cx from 'classnames';
-import ConditionConnector from '../ConditionConnector/ConditionConnector.js';
+import ConditionConnector from '../ConditionBuilderConnector/ConditionConnector.js';
 import { ConditionBuilderItemNumber } from '../ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js';
 import { ConditionBuilderItemText } from '../ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.js';
 import { ConditionBuilderItemDate } from '../ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js';
@@ -23,6 +23,7 @@ import { focusThisField } from '../utils/util.js';
 import { ConditionBuilderItemTime } from '../ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js';
 import ConditionBuilderAdd from '../ConditionBuilderAdd/ConditionBuilderAdd.js';
 
+var _div;
 /**
  * This component build each block of condition consisting of property, operator value and close button.
  */
@@ -40,11 +41,19 @@ var ConditionBlock = function ConditionBlock(props) {
     isStatement = props.isStatement,
     group = props.group,
     onStatementChange = props.onStatementChange,
-    addConditionHandler = props.addConditionHandler,
     conditionIndex = props.conditionIndex,
+    addConditionHandler = props.addConditionHandler,
+    _addConditionSubGroupHandler = props.addConditionSubGroupHandler,
+    aria = props.aria,
+    hideConditionSubGroupPreviewHandler = props.hideConditionSubGroupPreviewHandler,
+    showConditionSubGroupPreviewHandler = props.showConditionSubGroupPreviewHandler,
+    hideConditionPreviewHandler = props.hideConditionPreviewHandler,
+    showConditionPreviewHandler = props.showConditionPreviewHandler,
     isLastCondition = props.isLastCondition;
   var _useContext = useContext(ConditionBuilderContext),
-    inputConfig = _useContext.inputConfig;
+    inputConfig = _useContext.inputConfig,
+    variant = _useContext.variant;
+  //Below possible input types expected for value field.
   var itemComponents = {
     option: ConditionBuilderItemOption,
     text: ConditionBuilderItemText,
@@ -69,14 +78,17 @@ var ConditionBlock = function ConditionBlock(props) {
     type = _getCurrentConfig.type,
     config = _getCurrentConfig.config,
     label = _getCurrentConfig.label;
-  var ItemComponent = property ? itemComponents[type] : null;
+  var ItemComponent;
+  //   if (type == 'custom') {
+  //     ItemComponent = config.component;
+  //   } else {
+  ItemComponent = property ? itemComponents[type] : null;
+  //}
+
   var onStatementChangeHandler = function onStatementChangeHandler(v, evt) {
     focusThisField(evt);
     onStatementChange(v);
   };
-  var onConnectorOperatorChangeHandler = function onConnectorOperatorChangeHandler(op) {
-    onConnectorOperatorChange(op);
-  };
   var onPropertyChangeHandler = function onPropertyChangeHandler(newProperty) {
     onChange(_objectSpread2(_objectSpread2({}, condition), {}, {
       property: newProperty,
@@ -109,21 +121,32 @@ var ConditionBlock = function ConditionBlock(props) {
       return operator.type.indexOf(type) != -1 || operator.type == 'all';
     });
   };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: cx("".concat(blockClass, "__condition-block conditionBlockWrapper ").concat(blockClass, "__gap ").concat(blockClass, "__gap-bottom"), _defineProperty({}, "".concat(blockClass, "__condition__deletion-preview"), showDeletionPreview)),
-    key: conditionIndex,
+  var getAriaAttributes = function getAriaAttributes() {
+    return variant == 'tree' ? {
+      'aria-level': aria.level,
+      'aria-posinset': aria.posinset,
+      'aria-setsize': aria.setsize
+    } : {};
+  };
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: cx("".concat(blockClass, "__condition-block"), _defineProperty({}, "".concat(blockClass, "__condition__deletion-preview"), showDeletionPreview), _defineProperty({}, "".concat(blockClass, "__gap-bottom"), variant == 'tree' && !(conditionIndex + 1 >= group.conditions.length)), _defineProperty({}, "".concat(blockClass, "__gap ").concat(blockClass, "__gap-bottom"), variant == 'sentence')),
     role: "row",
     "aria-label": translateWithId('condition_row'),
     tabIndex: -1
-  }, isStatement && /*#__PURE__*/React__default.createElement(ConditionBuilderItem
-  //   open={false}
-  , {
+  }, getAriaAttributes()), conjunction ? /*#__PURE__*/React__default.createElement(ConditionConnector, {
+    className: "".concat(blockClass, "__gap"),
+    operator: conjunction,
+    onChange: function onChange(op) {
+      return onConnectorOperatorChange(op);
+    }
+  }) : _div || (_div = /*#__PURE__*/React__default.createElement("div", {
+    role: "gridcell"
+  })), isStatement && /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
     label: group.statement,
     title: translateWithId('condition'),
     "data-name": "connectorField",
     popOverClassName: "".concat(blockClass, "__gap"),
-    className: "".concat(blockClass, "__statement-button"),
-    tabIndex: 0
+    className: "".concat(blockClass, "__statement-button")
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderItemOption, {
     conditionState: {
       value: group.statement,
@@ -133,11 +156,7 @@ var ConditionBlock = function ConditionBlock(props) {
     config: {
       options: statementConfig
     }
-  })), conjunction && /*#__PURE__*/React__default.createElement(ConditionConnector, {
-    className: "".concat(blockClass, "__gap"),
-    operator: conjunction,
-    onChange: onConnectorOperatorChangeHandler
-  }), /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
+  })), /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
     label: label,
     title: translateWithId('property'),
     renderIcon: icon !== null && icon !== void 0 ? icon : null,
@@ -184,7 +203,8 @@ var ConditionBlock = function ConditionBlock(props) {
       value: value
     },
     onChange: onValueChangeHandler,
-    config: config
+    config: config,
+    "data-name": "valueField"
   })), /*#__PURE__*/React__default.createElement("span", {
     role: "gridcell",
     "aria-label": translateWithId('remove_condition')
@@ -202,9 +222,15 @@ var ConditionBlock = function ConditionBlock(props) {
   })), isLastCondition(conditionIndex, group.conditions) && /*#__PURE__*/React__default.createElement(ConditionBuilderAdd, {
     onClick: function onClick() {
       addConditionHandler(conditionIndex);
-    }
-    //addConditionSubGroupHandler={()=>{addConditionSubGroupHandler(conditionIndex)}}
-    ,
+    },
+    addConditionSubGroupHandler: function addConditionSubGroupHandler() {
+      _addConditionSubGroupHandler(conditionIndex);
+    },
+    showConditionSubGroupPreviewHandler: showConditionSubGroupPreviewHandler,
+    hideConditionSubGroupPreviewHandler: hideConditionSubGroupPreviewHandler,
+    enableSubGroup: variant == 'tree',
+    showConditionPreviewHandler: showConditionPreviewHandler,
+    hideConditionPreviewHandler: hideConditionPreviewHandler,
     className: "".concat(blockClass, "__gap ").concat(blockClass, "__gap-left")
   }));
 };
@@ -215,16 +241,14 @@ ConditionBlock.propTypes = {
    */
   addConditionHandler: PropTypes.func,
   /**
-   * object hold aria attributes
+   * callback to add a new condition subgroup
    */
-  aria: PropTypes.object,
+  addConditionSubGroupHandler: PropTypes.func,
   /**
-   * object that hold the current condition
+   * object hold aria attributes
    */
+  aria: PropTypes.object,
   condition: PropTypes.object,
-  /**
-   * index of the current condition
-   */
   conditionIndex: PropTypes.number,
   /**
    * string that decides to show the condition connector
@@ -235,8 +259,13 @@ ConditionBlock.propTypes = {
    */
   group: PropTypes.object,
   /**
-   * callback to add a new condition
+   * handler for hiding sub group preview
+   */
+  hideConditionPreviewHandler: PropTypes.func,
+  /**
+   * handler for hiding sub group preview
    */
+  hideConditionSubGroupPreviewHandler: PropTypes.func,
   isLastCondition: PropTypes.func,
   /**
    *  boolean that decides to show the statement(if/ excl.if)
@@ -257,7 +286,19 @@ ConditionBlock.propTypes = {
   /**
    * callback to handle the statement(if/ excl.if) change
    */
-  onStatementChange: PropTypes.func
+  onStatementChange: PropTypes.func,
+  /**
+   * handler for showing add condition preview
+   */
+  showConditionPreviewHandler: PropTypes.func,
+  /**
+   * handler for showing sub group preview
+   */
+  showConditionSubGroupPreviewHandler: PropTypes.func,
+  /**
+   * object that hold the current condition
+   */
+  state: PropTypes.object
 };
 
 export { ConditionBlock$1 as default };

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

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

package/es/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js

@@ -5,36 +5,119 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default from 'react';
-import { AddAlt } from '@carbon/react/icons';
+import { slicedToArray as _slicedToArray, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState } from 'react';
+import { AddAlt, TextNewLine } from '@carbon/react/icons';
 import { ConditionBuilderButton } from '../ConditionBuilderButton/ConditionBuilderButton.js';
 import PropTypes from '../../../node_modules/prop-types/index.js';
-import { blockClass, translateWithId } from '../ConditionBuilderContext/DataConfigs.js';
+import { translateWithId, blockClass } from '../ConditionBuilderContext/DataConfigs.js';
 
 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 = useState(false),
+    _useState2 = _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': translateWithId('add-condition')
+  } : {};
   return /*#__PURE__*/React__default.createElement("div", {
-    className: className,
-    role: "gridcell"
-  }, /*#__PURE__*/React__default.createElement(ConditionBuilderButton, {
+    className: "".concat(className, " ").concat(blockClass, "__add-button-wrapper"),
+    role: !enableSubGroup ? 'gridcell' : 'none',
+    "aria-label": !enableSubGroup ? translateWithId('add_condition_row') : undefined,
+    onMouseEnter: showAddSubGroup,
+    onMouseLeave: hideAddSubGroup,
+    onFocus: showAddSubGroup,
+    onBlur: hideAddSubGroup
+  }, /*#__PURE__*/React__default.createElement(ConditionBuilderButton, _extends({
     renderIcon: AddAlt,
-    onClick: onClick,
+    onClick: onClickHandler
+  }, previewHandlers(), {
     className: "".concat(blockClass, "__add-button"),
     hideLabel: true,
-    label: translateWithId('add-condition')
-  }));
+    "data-name": "addButton",
+    label: buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : translateWithId('add-condition'),
+    wrapperProps: wrapperProps
+  })), isAddSubgroup && enableSubGroup && /*#__PURE__*/React__default.createElement(ConditionBuilderButton, _extends({
+    renderIcon: TextNewLine,
+    onClick: addConditionSubGroupHandler,
+    className: "".concat(blockClass, "__add-condition-group ").concat(blockClass, "__gap-left"),
+    hideLabel: true,
+    label: translateWithId('add-condition'),
+    wrapperProps: wrapperProps
+  }, previewHandlersForSubgroup())));
 };
 var ConditionBuilderAdd$1 = ConditionBuilderAdd;
 ConditionBuilderAdd.propTypes = {
+  /**
+   * handler for hiding sub group preview
+   */
+  addConditionSubGroupHandler: PropTypes.func,
+  /**
+   * handler for hiding sub group preview
+   */ /**
+      * tooltip label for plus button
+      */
+  buttonLabel: PropTypes.string,
   /**
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
   /**
-   * callback triggered on click of add button
+   * boolean to enable sub groups for the tree variant
+   */
+  enableSubGroup: PropTypes.bool,
+  /**
+   * handler for hiding sub group preview
+   */
+  hideConditionPreviewHandler: PropTypes.func,
+  hideConditionSubGroupPreviewHandler: PropTypes.func,
+  /**
+   * handler for hiding sub group preview
+   */ /**
+      * callback triggered on click of add button
+      */
+  onClick: PropTypes.func,
+  showConditionPreviewHandler: PropTypes.func,
+  showConditionSubGroupPreviewHandler: PropTypes.func
+  /**
+   * handler for hiding sub group preview
    */
-  onClick: PropTypes.func
 };
 
 export { ConditionBuilderAdd$1 as default };

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

@@ -5,16 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends, defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import cx from 'classnames';
 import PropTypes from '../../../node_modules/prop-types/index.js';
 import { Tooltip } from '@carbon/react';
 import { blockClass } from '../ConditionBuilderContext/DataConfigs.js';
 
-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,
@@ -22,21 +21,29 @@ var ConditionBuilderButton = function ConditionBuilderButton(_ref) {
     Icon = _ref.renderIcon,
     onClick = _ref.onClick,
     showToolTip = _ref.showToolTip,
-    rest = _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.createElement("button", _extends({
+    return /*#__PURE__*/React__default.createElement("button", {
       // role={'gridcell'}
       tabIndex: -1,
       className: cx([className, "".concat(blockClass, "__button"), _defineProperty({}, "".concat(blockClass, "__text-ellipsis"), showToolTip && !hideLabel)]),
       type: "button",
-      onClick: onClick
-    }, rest), Icon && (_Icon || (_Icon = /*#__PURE__*/React__default.createElement(Icon, null))), !hideLabel && label);
+      onClick: onClick,
+      onBlur: onBlur,
+      onFocus: onFocus,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave
+    }, Icon && (_Icon || (_Icon = /*#__PURE__*/React__default.createElement(Icon, null))), !hideLabel && (_span || (_span = /*#__PURE__*/React__default.createElement("span", null, label))));
   };
   return hideLabel || showToolTip ? /*#__PURE__*/React__default.createElement(Tooltip, _extends({
     label: label,
     align: tooltipAlign,
     className: "".concat(blockClass, "__con-tooltip")
-  }, rest.wrapperProps), Button()) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, Button());
+  }, wrapperProps), Button()) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, Button());
 };
 ConditionBuilderButton.propTypes = {
   /**
@@ -51,10 +58,17 @@ ConditionBuilderButton.propTypes = {
    * label of the button
    */
   label: PropTypes.string,
+  /**
+   * mouse events callbacks
+   */
+  onBlur: PropTypes.func,
   /**
    * callback triggered on click of add button
    */
   onClick: PropTypes.func,
+  onFocus: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func,
   /**
    * Optional prop to allow overriding the icon rendering.
    */
@@ -68,7 +82,11 @@ ConditionBuilderButton.propTypes = {
   /**
    * tooltip position
    */
-  tooltipAlign: PropTypes.string
+  tooltipAlign: PropTypes.string,
+  /**
+   * optional props for tree grid to add role and aria-label to wrapper span
+   */
+  wrapperProps: PropTypes.object
 };
 
 export { ConditionBuilderButton };

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

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

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

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

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

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

package/es/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<{