@carbon/ibm-products 2.36.0 → 2.37.0

package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -18,7 +18,7 @@ import '../../global/js/utils/props-helper.js';
 import { TooltipTrigger } from '../TooltipTrigger/TooltipTrigger.js';
 
 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"];
 
@@ -38,6 +38,7 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
     maxVisible = _ref.maxVisible,
     noTrailingSlash = _ref.noTrailingSlash,
     overflowAriaLabel = _ref.overflowAriaLabel,
+    overflowTooltipAlign = _ref.overflowTooltipAlign,
     other = _objectWithoutProperties(_ref, _excluded);
   var carbonPrefix = usePrefix();
   var _useState = useState(3),
@@ -62,6 +63,7 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
     return /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
       key: "breadcrumb-overflow-".concat(internalId.current)
     }, /*#__PURE__*/React__default.createElement(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"
       ,
@@ -319,7 +321,11 @@ BreadcrumbWithOverflow.propTypes = {
   overflowAriaLabel: PropTypes.string.isRequired.if(function (_ref6) {
     var breadcrumbs = _ref6.breadcrumbs;
     return breadcrumbs.length > 1;
-  })
+  }),
+  /**
+   * overflowTooltipAlign: align tooltip position
+   */
+  overflowTooltipAlign: Tooltip.propTypes.align
 };
 BreadcrumbWithOverflow.displayName = componentName;
 

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

@@ -0,0 +1,261 @@
+/**
+ * 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 { slicedToArray as _slicedToArray, 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';
+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 { ConditionBuilderItemNumber } from '../ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js';
+import { ConditionBuilderItemText } from '../ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.js';
+import { ConditionBuilderItemDate } from '../ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js';
+import { ConditionBuilderContext } from '../ConditionBuilderContext/ConditionBuilderProvider.js';
+import { ConditionBuilderButton } from '../ConditionBuilderButton/ConditionBuilderButton.js';
+import { focusThisField } from '../utils/util.js';
+import { ConditionBuilderItemTime } from '../ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js';
+import ConditionBuilderAdd from '../ConditionBuilderAdd/ConditionBuilderAdd.js';
+
+/**
+ * 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 = useContext(ConditionBuilderContext),
+    inputConfig = _useContext.inputConfig;
+  var itemComponents = {
+    option: ConditionBuilderItemOption,
+    text: ConditionBuilderItemText,
+    number: ConditionBuilderItemNumber,
+    date: ConditionBuilderItemDate,
+    time: ConditionBuilderItemTime
+  };
+  var _useState = useState(false),
+    _useState2 = _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) {
+    focusThisField(e);
+    onStatementChange(v);
+  };
+  var onConnectorOperatorChangeHandler = function onConnectorOperatorChangeHandler(op) {
+    onConnectorOperatorChange(op);
+  };
+  var onPropertyChangeHandler = function onPropertyChangeHandler(newProperty) {
+    onChange(_objectSpread2(_objectSpread2({}, state), {}, {
+      property: newProperty,
+      operator: undefined,
+      value: '',
+      popoverToOpen: 'operatorField'
+    }));
+  };
+  var onOperatorChangeHandler = function onOperatorChangeHandler(newOperator) {
+    onChange(_objectSpread2(_objectSpread2({}, state), {}, {
+      operator: newOperator,
+      value: undefined,
+      popoverToOpen: 'valueField'
+    }));
+  };
+  var onValueChangeHandler = function onValueChangeHandler(newValue) {
+    onChange(_objectSpread2(_objectSpread2({}, state), {}, {
+      value: newValue,
+      popoverToOpen: ''
+    }));
+  };
+  var handleShowDeletionPreview = function handleShowDeletionPreview() {
+    setShowDeletionPreview(true);
+  };
+  var handleHideDeletionPreview = function handleHideDeletionPreview() {
+    setShowDeletionPreview(false);
+  };
+  var getOperators = function getOperators() {
+    return operatorConfig.filter(function (operator) {
+      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-builder-condition__deletion-preview"), showDeletionPreview)),
+    key: conditionIndex,
+    role: "row",
+    "aria-label": translateWithId('condition_row'),
+    tabIndex: -1
+  }, isStatement && /*#__PURE__*/React__default.createElement(ConditionBuilderItem
+  //   open={false}
+  , {
+    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')
+    },
+    onChange: onStatementChangeHandler,
+    config: {
+      options: statementConfig
+    }
+  })), conjunction && /*#__PURE__*/React__default.createElement(ConditionConnector, {
+    className: "".concat(blockClass, "__gap"),
+    operator: conjunction,
+    onChange: onConnectorOperatorChangeHandler
+  }), /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
+    label: label,
+    title: translateWithId('property'),
+    renderIcon: icon !== null && icon !== void 0 ? icon : null,
+    className: "".concat(blockClass, "__property-field"),
+    "data-name": "propertyField",
+    state: state,
+    type: type
+  }, /*#__PURE__*/React__default.createElement(ConditionBuilderItemOption, {
+    conditionState: {
+      value: property,
+      label: translateWithId('property')
+    },
+    onChange: onPropertyChangeHandler,
+    config: {
+      options: inputConfig.properties
+    }
+  })), property && /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
+    label: operator,
+    title: translateWithId('operator'),
+    "data-name": "operatorField",
+    state: state,
+    type: type
+  }, /*#__PURE__*/React__default.createElement(ConditionBuilderItemOption, {
+    config: {
+      options: getOperators()
+    },
+    conditionState: {
+      value: operator,
+      label: translateWithId('operator')
+    },
+    onChange: onOperatorChangeHandler
+  })), property && operator && /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
+    label: value,
+    type: type,
+    title: label,
+    showToolTip: true,
+    "data-name": "valueField",
+    state: state,
+    config: config
+  }, /*#__PURE__*/React__default.createElement(ItemComponent, {
+    conditionState: {
+      property: property,
+      operator: operator,
+      value: value
+    },
+    onChange: onValueChangeHandler,
+    config: config
+  })), /*#__PURE__*/React__default.createElement("span", {
+    role: "gridcell",
+    "aria-label": translateWithId('remove_condition')
+  }, /*#__PURE__*/React__default.createElement(ConditionBuilderButton, {
+    hideLabel: true,
+    label: translateWithId('remove_condition'),
+    onClick: onRemove,
+    onMouseEnter: handleShowDeletionPreview,
+    onMouseLeave: handleHideDeletionPreview,
+    onFocus: handleShowDeletionPreview,
+    onBlur: handleHideDeletionPreview,
+    renderIcon: Close,
+    className: "".concat(blockClass, "__close-condition"),
+    "data-name": "closeCondition"
+  })), isLastCondition(conditionIndex, group.conditions) && /*#__PURE__*/React__default.createElement(ConditionBuilderAdd, {
+    onClick: function onClick() {
+      addConditionHandler(conditionIndex);
+    }
+    //addConditionSubGroupHandler={()=>{addConditionSubGroupHandler(conditionIndex)}}
+    ,
+    className: "".concat(blockClass, "__gap ").concat(blockClass, "__gap-left")
+  }));
+};
+var ConditionBlock$1 = ConditionBlock;
+ConditionBlock.propTypes = {
+  /**
+   * callback to add a new condition
+   */
+  addConditionHandler: PropTypes.func,
+  /**
+   * object hold aria attributes
+   */
+  aria: PropTypes.object,
+  /**
+   * index of the current condition
+   */
+  conditionIndex: PropTypes.number,
+  /**
+   * string that decides to show the condition connector
+   */
+  conjunction: PropTypes.string,
+  /**
+   * object that hold the current group object where is condition is part of
+   */
+  group: PropTypes.object,
+  /**
+   *  boolean that decides to show the statement(if/ excl.if)
+   */
+  isStatement: PropTypes.bool,
+  /**
+   * callback to update the current condition of the state tree
+   */
+  onChange: PropTypes.func,
+  /**
+   * callback to handle the connector(and/or) change
+   */
+  onConnectorOperatorChange: PropTypes.func,
+  /**
+   * callback for Remove a condition
+   */
+  onRemove: PropTypes.func,
+  /**
+   * callback to handle the statement(if/ excl.if) change
+   */
+  onStatementChange: PropTypes.func,
+  /**
+   * object that hold the current condition
+   */
+  state: PropTypes.object
+};
+
+export { ConditionBlock$1 as default };

package/es/components/ConditionBuilder/ConditionBuilder.js

@@ -6,22 +6,21 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React__default, { useRef } from 'react';
 import { VStack } from '@carbon/react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
-import { pkg } from '../../settings.js';
 import ConditionBuilderContent from './ConditionBuilderContent/ConditionBuilderContent.js';
-import { ConditionBuilderProvider } from './ConditionBuilderContext/DataTreeContext.js';
+import { ConditionBuilderProvider } from './ConditionBuilderContext/ConditionBuilderProvider.js';
+import { pkg } from '../../settings.js';
+import { blockClass } from './ConditionBuilderContext/DataConfigs.js';
 
-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(pkg.prefix, "--condition-builder");
 var componentName = 'ConditionBuilder';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
@@ -49,10 +48,18 @@ var ConditionBuilder = /*#__PURE__*/React__default.forwardRef(function (_ref, re
     inputConfig = _ref.inputConfig,
     startConditionLabel = _ref.startConditionLabel,
     popOverSearchThreshold = _ref.popOverSearchThreshold,
+    getOptions = _ref.getOptions,
+    initialState = _ref.initialState,
+    getConditionState = _ref.getConditionState,
+    variant = _ref.variant,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var localRef = useRef();
+  var conditionBuilderRef = ref || localRef;
   return /*#__PURE__*/React__default.createElement(ConditionBuilderProvider, {
     inputConfig: inputConfig,
-    popOverSearchThreshold: popOverSearchThreshold
+    popOverSearchThreshold: popOverSearchThreshold,
+    getOptions: getOptions,
+    variant: variant
   }, /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass,
     // Apply the block class to the main HTML element
@@ -63,10 +70,15 @@ var ConditionBuilder = /*#__PURE__*/React__default.forwardRef(function (_ref, re
       // switched classes dependant on props or state
       // example: [`${blockClass}__here-if-small`]: size === 'sm',
     }),
-    ref: ref,
-    role: "main"
-  }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(VStack, null, /*#__PURE__*/React__default.createElement(ConditionBuilderContent, {
-    startConditionLabel: startConditionLabel
+    role: "main",
+    ref: conditionBuilderRef
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(VStack, {
+    className: "".concat(blockClass, "__").concat(variant)
+  }, /*#__PURE__*/React__default.createElement(ConditionBuilderContent, {
+    startConditionLabel: startConditionLabel,
+    conditionBuilderRef: conditionBuilderRef,
+    getConditionState: getConditionState,
+    initialState: initialState
   }))));
 });
 
@@ -90,6 +102,20 @@ ConditionBuilder.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
+  getConditionState: PropTypes.func.isRequired,
+  getOptions: PropTypes.func,
+  initialState: PropTypes.shape({
+    groups: PropTypes.arrayOf(PropTypes.shape({
+      groupSeparateOperator: PropTypes.string,
+      groupOperator: PropTypes.string,
+      statement: PropTypes.string,
+      conditions: PropTypes.arrayOf(PropTypes.shape({
+        property: PropTypes.string,
+        operator: PropTypes.string,
+        value: PropTypes.string
+      }))
+    }))
+  }),
   /**
    * This is a mandatory prop that defines the input to the condition builder.
    
@@ -98,13 +124,13 @@ ConditionBuilder.propTypes = {
     properties: PropTypes.arrayOf(PropTypes.shape({
       id: PropTypes.string,
       label: PropTypes.string,
-      icon: PropTypes.func,
-      type: PropTypes.oneOf(['text', 'number', 'date', 'option']),
+      icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      type: PropTypes.oneOf(['text', 'number', 'date', 'option', 'time']),
       config: PropTypes.shape({
         options: PropTypes.arrayOf(PropTypes.shape({
           id: PropTypes.string,
           label: PropTypes.string,
-          icon: PropTypes.func
+          icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
         })),
         includeSearch: PropTypes.bool
       })
@@ -117,9 +143,12 @@ ConditionBuilder.propTypes = {
   /**
    * Provide a label to the button that starts condition builder
    */
-  startConditionLabel: PropTypes.string.isRequired
-
+  startConditionLabel: PropTypes.string.isRequired,
   /* TODO: add types and DocGen for all props. */
+  /**
+   * Provide the condition builder variant: sentence/ tree
+   */
+  variant: PropTypes.string.isRequired
 };
 
 export { ConditionBuilder };

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

@@ -0,0 +1,40 @@
+/**
+ * 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 { AddAlt } 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';
+
+var ConditionBuilderAdd = function ConditionBuilderAdd(_ref) {
+  var className = _ref.className,
+    onClick = _ref.onClick;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: className
+  }, /*#__PURE__*/React__default.createElement(ConditionBuilderButton, {
+    renderIcon: AddAlt,
+    onClick: onClick,
+    className: "".concat(blockClass, "__add-button"),
+    hideLabel: true,
+    label: translateWithId('add-condition'),
+    role: "gridcell"
+  }));
+};
+var ConditionBuilderAdd$1 = ConditionBuilderAdd;
+ConditionBuilderAdd.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * callback triggered on click of add button
+   */
+  onClick: PropTypes.func
+};
+
+export { ConditionBuilderAdd$1 as default };

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

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

package/es/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js

@@ -0,0 +1,74 @@
+/**
+ * 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 { objectWithoutProperties as _objectWithoutProperties, 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 className = _ref.className,
+    label = _ref.label,
+    hideLabel = _ref.hideLabel,
+    tooltipAlign = _ref.tooltipAlign,
+    Icon = _ref.renderIcon,
+    onClick = _ref.onClick,
+    showToolTip = _ref.showToolTip,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var Button = function Button() {
+    return /*#__PURE__*/React__default.createElement("button", _extends({}, rest, {
+      // role={'gridcell'}
+      tabIndex: -1,
+      className: cx([className, "".concat(blockClass, "__condition-builder-button"), _defineProperty({}, "".concat(blockClass, "__text-ellipsis"), showToolTip && !hideLabel)]),
+      type: "button",
+      onClick: onClick
+    }), Icon && (_Icon || (_Icon = /*#__PURE__*/React__default.createElement(Icon, null))), !hideLabel && 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());
+};
+ConditionBuilderButton.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * decides if label and tooltip to be hidden
+   */
+  hideLabel: PropTypes.bool,
+  /**
+   * label of the button
+   */
+  label: PropTypes.string,
+  /**
+   * callback triggered on click of add button
+   */
+  onClick: PropTypes.func,
+  /**
+   * Optional prop to allow overriding the icon rendering.
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   */
+  /**
+   *decides if  tooltip to be shown
+   */
+  showToolTip: PropTypes.bool,
+  /**
+   * tooltip position
+   */
+  tooltipAlign: PropTypes.string
+};
+
+export { ConditionBuilderButton };

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

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