@carbon/ibm-products 2.36.0 → 2.37.0

package/lib/_virtual/_rollupPluginBabelHelpers.js

@@ -165,7 +165,7 @@ function _regeneratorRuntime() {
   function makeInvokeMethod(e, r, n) {
     var o = h;
     return function (i, a) {
-      if (o === f) throw new Error("Generator is already running");
+      if (o === f) throw Error("Generator is already running");
       if (o === s) {
         if ("throw" === i) throw a;
         return {
@@ -307,7 +307,7 @@ function _regeneratorRuntime() {
           } else if (c) {
             if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
           } else {
-            if (!u) throw new Error("try statement without catch or finally");
+            if (!u) throw Error("try statement without catch or finally");
             if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
           }
         }
@@ -347,7 +347,7 @@ function _regeneratorRuntime() {
           return o;
         }
       }
-      throw new Error("illegal catch attempt");
+      throw Error("illegal catch attempt");
     },
     delegateYield: function (e, r, n) {
       return this.delegate = {
@@ -370,7 +370,7 @@ function _toPrimitive(t, r) {
 }
 function _toPropertyKey(t) {
   var i = _toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : String(i);
+  return "symbol" == typeof i ? i : i + "";
 }
 function _typeof(o) {
   "@babel/helpers - typeof";
@@ -445,12 +445,11 @@ function _objectDestructuringEmpty(obj) {
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
+  for (var key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
   }
   return target;
 }

package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.d.ts

@@ -1,10 +1,11 @@
-export function BreadcrumbWithOverflow({ breadcrumbs, className, maxVisible, noTrailingSlash, overflowAriaLabel, ...other }: {
+export function BreadcrumbWithOverflow({ breadcrumbs, className, maxVisible, noTrailingSlash, overflowAriaLabel, overflowTooltipAlign, ...other }: {
     [x: string]: any;
     breadcrumbs: any;
     className: any;
     maxVisible: any;
     noTrailingSlash: any;
     overflowAriaLabel: any;
+    overflowTooltipAlign: any;
 }): import("react/jsx-runtime").JSX.Element;
 export namespace BreadcrumbWithOverflow {
     export namespace propTypes {
@@ -34,6 +35,7 @@ export namespace BreadcrumbWithOverflow {
         let maxVisible: PropTypes.Requireable<number>;
         let noTrailingSlash: PropTypes.Requireable<boolean>;
         let overflowAriaLabel: any;
+        let overflowTooltipAlign: any;
     }
     export { componentName as displayName };
 }

package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -27,7 +27,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _TooltipTrigger;
-var _excluded = ["breadcrumbs", "className", "maxVisible", "noTrailingSlash", "overflowAriaLabel"],
+var _excluded = ["breadcrumbs", "className", "maxVisible", "noTrailingSlash", "overflowAriaLabel", "overflowTooltipAlign"],
   _excluded2 = ["label", "key", "title", "id"],
   _excluded3 = ["className", "key", "label", "title"];
 
@@ -47,6 +47,7 @@ exports.BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
     maxVisible = _ref.maxVisible,
     noTrailingSlash = _ref.noTrailingSlash,
     overflowAriaLabel = _ref.overflowAriaLabel,
+    overflowTooltipAlign = _ref.overflowTooltipAlign,
     other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var carbonPrefix = react.usePrefix();
   var _useState = React.useState(3),
@@ -71,6 +72,7 @@ exports.BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
     return /*#__PURE__*/React__default["default"].createElement(react.BreadcrumbItem, {
       key: "breadcrumb-overflow-".concat(internalId.current)
     }, /*#__PURE__*/React__default["default"].createElement(react.OverflowMenu, {
+      align: overflowTooltipAlign,
       "aria-label": overflowAriaLabel,
       iconDescription: overflowAriaLabel // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
       ,
@@ -328,6 +330,10 @@ exports.BreadcrumbWithOverflow.propTypes = {
   overflowAriaLabel: index["default"].string.isRequired.if(function (_ref6) {
     var breadcrumbs = _ref6.breadcrumbs;
     return breadcrumbs.length > 1;
-  })
+  }),
+  /**
+   * overflowTooltipAlign: align tooltip position
+   */
+  overflowTooltipAlign: react.Tooltip.propTypes.align
 };
 exports.BreadcrumbWithOverflow.displayName = componentName;

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

@@ -0,0 +1,21 @@
+export default ConditionBlock;
+/**
+ * This component build each block of condition consisting of property, operator value and close button.
+ */
+declare function ConditionBlock(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace ConditionBlock {
+    namespace propTypes {
+        let addConditionHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        let aria: PropTypes.Requireable<object>;
+        let conditionIndex: PropTypes.Requireable<number>;
+        let conjunction: PropTypes.Requireable<string>;
+        let group: PropTypes.Requireable<object>;
+        let isStatement: PropTypes.Requireable<boolean>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let onConnectorOperatorChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let onRemove: PropTypes.Requireable<(...args: any[]) => any>;
+        let onStatementChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let state: PropTypes.Requireable<object>;
+    }
+}
+import PropTypes from 'prop-types';

package/lib/components/ConditionBuilder/ConditionBlock/ConditionBlock.js

@@ -0,0 +1,270 @@
+/**
+ * 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 icons = require('@carbon/react/icons');
+var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
+var index = require('../../../node_modules/prop-types/index.js');
+var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
+var ConditionBuilderItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js');
+var cx = require('classnames');
+var ConditionConnector = require('../ConditionConnector/ConditionConnector.js');
+var ConditionBuilderItemNumber = require('../ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js');
+var ConditionBuilderItemText = require('../ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.js');
+var ConditionBuilderItemDate = require('../ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js');
+var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuilderProvider.js');
+var ConditionBuilderButton = require('../ConditionBuilderButton/ConditionBuilderButton.js');
+var util = require('../utils/util.js');
+var ConditionBuilderItemTime = require('../ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js');
+var ConditionBuilderAdd = require('../ConditionBuilderAdd/ConditionBuilderAdd.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);
+
+/**
+ * This component build each block of condition consisting of property, operator value and close button.
+ */
+
+var ConditionBlock = function ConditionBlock(props) {
+  var _props$state = props.state,
+    property = _props$state.property,
+    value = _props$state.value,
+    operator = _props$state.operator;
+  var onRemove = props.onRemove,
+    onChange = props.onChange,
+    state = props.state,
+    conjunction = props.conjunction,
+    onConnectorOperatorChange = props.onConnectorOperatorChange,
+    isStatement = props.isStatement,
+    group = props.group,
+    onStatementChange = props.onStatementChange,
+    addConditionHandler = props.addConditionHandler,
+    conditionIndex = props.conditionIndex;
+  var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
+    inputConfig = _useContext.inputConfig;
+  var itemComponents = {
+    option: ConditionBuilderItemOption.ConditionBuilderItemOption,
+    text: ConditionBuilderItemText.ConditionBuilderItemText,
+    number: ConditionBuilderItemNumber.ConditionBuilderItemNumber,
+    date: ConditionBuilderItemDate.ConditionBuilderItemDate,
+    time: ConditionBuilderItemTime.ConditionBuilderItemTime
+  };
+  var _useState = React.useState(false),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    showDeletionPreview = _useState2[0],
+    setShowDeletionPreview = _useState2[1];
+
+  //filtering the current property to access its properties and config options
+  var getCurrentConfig = function getCurrentConfig(property) {
+    var _inputConfig$properti, _inputConfig$properti2;
+    return (_inputConfig$properti = (_inputConfig$properti2 = inputConfig.properties) === null || _inputConfig$properti2 === void 0 ? void 0 : _inputConfig$properti2.filter(function (eachProperty) {
+      var _eachProperty$label;
+      return ((_eachProperty$label = eachProperty.label) === null || _eachProperty$label === void 0 ? void 0 : _eachProperty$label.toUpperCase()) == (property === null || property === void 0 ? void 0 : property.toUpperCase());
+    })[0]) !== null && _inputConfig$properti !== void 0 ? _inputConfig$properti : {};
+  };
+  var isLastCondition = function isLastCondition(conditionIndex, conditionArr) {
+    return conditionIndex + 1 >= conditionArr.length || conditionArr.length - 1 != conditionIndex && conditionArr[conditionIndex + 1].conditions;
+  };
+  var _getCurrentConfig = getCurrentConfig(property),
+    icon = _getCurrentConfig.icon,
+    type = _getCurrentConfig.type,
+    config = _getCurrentConfig.config,
+    label = _getCurrentConfig.label;
+  var ItemComponent = property ? itemComponents[type] : null;
+  var onStatementChangeHandler = function onStatementChangeHandler(v, e) {
+    util.focusThisField(e);
+    onStatementChange(v);
+  };
+  var onConnectorOperatorChangeHandler = function onConnectorOperatorChangeHandler(op) {
+    onConnectorOperatorChange(op);
+  };
+  var onPropertyChangeHandler = function onPropertyChangeHandler(newProperty) {
+    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+      property: newProperty,
+      operator: undefined,
+      value: '',
+      popoverToOpen: 'operatorField'
+    }));
+  };
+  var onOperatorChangeHandler = function onOperatorChangeHandler(newOperator) {
+    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+      operator: newOperator,
+      value: undefined,
+      popoverToOpen: 'valueField'
+    }));
+  };
+  var onValueChangeHandler = function onValueChangeHandler(newValue) {
+    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+      value: newValue,
+      popoverToOpen: ''
+    }));
+  };
+  var handleShowDeletionPreview = function handleShowDeletionPreview() {
+    setShowDeletionPreview(true);
+  };
+  var handleHideDeletionPreview = function handleHideDeletionPreview() {
+    setShowDeletionPreview(false);
+  };
+  var getOperators = function getOperators() {
+    return DataConfigs.operatorConfig.filter(function (operator) {
+      return operator.type.indexOf(type) != -1 || operator.type == 'all';
+    });
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: cx__default["default"]("".concat(DataConfigs.blockClass, "__condition-block conditionBlockWrapper ").concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-bottom"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__condition-builder-condition__deletion-preview"), showDeletionPreview)),
+    key: conditionIndex,
+    role: "row",
+    "aria-label": DataConfigs.translateWithId('condition_row'),
+    tabIndex: -1
+  }, isStatement && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem
+  //   open={false}
+  , {
+    label: group.statement,
+    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: group.statement,
+      label: DataConfigs.translateWithId('condition')
+    },
+    onChange: onStatementChangeHandler,
+    config: {
+      options: DataConfigs.statementConfig
+    }
+  })), conjunction && /*#__PURE__*/React__default["default"].createElement(ConditionConnector["default"], {
+    className: "".concat(DataConfigs.blockClass, "__gap"),
+    operator: conjunction,
+    onChange: onConnectorOperatorChangeHandler
+  }), /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
+    label: label,
+    title: DataConfigs.translateWithId('property'),
+    renderIcon: icon !== null && icon !== void 0 ? icon : null,
+    className: "".concat(DataConfigs.blockClass, "__property-field"),
+    "data-name": "propertyField",
+    state: state,
+    type: type
+  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
+    conditionState: {
+      value: property,
+      label: DataConfigs.translateWithId('property')
+    },
+    onChange: onPropertyChangeHandler,
+    config: {
+      options: inputConfig.properties
+    }
+  })), property && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
+    label: operator,
+    title: DataConfigs.translateWithId('operator'),
+    "data-name": "operatorField",
+    state: state,
+    type: type
+  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
+    config: {
+      options: getOperators()
+    },
+    conditionState: {
+      value: operator,
+      label: DataConfigs.translateWithId('operator')
+    },
+    onChange: onOperatorChangeHandler
+  })), property && operator && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
+    label: value,
+    type: type,
+    title: label,
+    showToolTip: true,
+    "data-name": "valueField",
+    state: state,
+    config: config
+  }, /*#__PURE__*/React__default["default"].createElement(ItemComponent, {
+    conditionState: {
+      property: property,
+      operator: operator,
+      value: value
+    },
+    onChange: onValueChangeHandler,
+    config: config
+  })), /*#__PURE__*/React__default["default"].createElement("span", {
+    role: "gridcell",
+    "aria-label": DataConfigs.translateWithId('remove_condition')
+  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, {
+    hideLabel: true,
+    label: DataConfigs.translateWithId('remove_condition'),
+    onClick: onRemove,
+    onMouseEnter: handleShowDeletionPreview,
+    onMouseLeave: handleHideDeletionPreview,
+    onFocus: handleShowDeletionPreview,
+    onBlur: handleHideDeletionPreview,
+    renderIcon: icons.Close,
+    className: "".concat(DataConfigs.blockClass, "__close-condition"),
+    "data-name": "closeCondition"
+  })), isLastCondition(conditionIndex, group.conditions) && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderAdd["default"], {
+    onClick: function onClick() {
+      addConditionHandler(conditionIndex);
+    }
+    //addConditionSubGroupHandler={()=>{addConditionSubGroupHandler(conditionIndex)}}
+    ,
+    className: "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-left")
+  }));
+};
+var ConditionBlock$1 = ConditionBlock;
+ConditionBlock.propTypes = {
+  /**
+   * callback to add a new condition
+   */
+  addConditionHandler: index["default"].func,
+  /**
+   * object hold aria attributes
+   */
+  aria: index["default"].object,
+  /**
+   * index of the current condition
+   */
+  conditionIndex: index["default"].number,
+  /**
+   * string that decides to show the condition connector
+   */
+  conjunction: index["default"].string,
+  /**
+   * object that hold the current group object where is condition is part of
+   */
+  group: index["default"].object,
+  /**
+   *  boolean that decides to show the statement(if/ excl.if)
+   */
+  isStatement: index["default"].bool,
+  /**
+   * callback to update the current condition of the state tree
+   */
+  onChange: index["default"].func,
+  /**
+   * callback to handle the connector(and/or) change
+   */
+  onConnectorOperatorChange: index["default"].func,
+  /**
+   * callback for Remove a condition
+   */
+  onRemove: index["default"].func,
+  /**
+   * callback to handle the statement(if/ excl.if) change
+   */
+  onStatementChange: index["default"].func,
+  /**
+   * object that hold the current condition
+   */
+  state: index["default"].object
+};
+
+exports["default"] = ConditionBlock$1;

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';