@carbon/ibm-products 2.38.0-alpha.5 → 2.39.0

package/lib/components/CoachmarkFixed/CoachmarkFixed.d.ts

@@ -1,8 +1,48 @@
+/**
+ * Copyright IBM Corp. 2023, 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, { ReactNode } from 'react';
+interface CoachmarkFixedProps {
+    /**
+     * CoachmarkFixed should use a single CoachmarkOverlayElements component as a child.
+     */
+    children: ReactNode;
+    /**
+     * Optional class name for this component.
+     */
+    className?: string;
+    /**
+     * Function to call when the Coachmark closes.
+     */
+    onClose?: () => void;
+    /**
+     * By default, the Coachmark will be appended to the end of `document.body`.
+     * The Coachmark will remain persistent as the user navigates the app until
+     * the user closes the Coachmark.
+     *
+     * Alternatively, the app developer can tightly couple the Coachmark to a DOM
+     * element or other component by specifying a CSS selector. The Coachmark will
+     * remain visible as long as that element remains visible or mounted. When the
+     * element is hidden or component is unmounted, the Coachmark will disappear.
+     */
+    portalTarget?: string;
+    /**
+     * The tagline title which will be fixed to the bottom right of the window and will serve as the display trigger.
+     */
+    tagline: string;
+    /**
+     * Determines the theme of the component.
+     */
+    theme?: 'light' | 'dark';
+}
 /**
  * Fixed coachmarks are used to call out specific functionality or concepts
  * within the UI that may not be intuitive but are important for the
  * user to gain understanding of the product's main value and discover new use cases.
  * This variant allows the a coachmark overlay to be displayed by interacting with the tagline.
  */
-export let CoachmarkFixed: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CoachmarkFixed: React.ForwardRefExoticComponent<CoachmarkFixedProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/CoachmarkFixed/CoachmarkFixed.js

@@ -59,7 +59,7 @@ exports.CoachmarkFixed = /*#__PURE__*/React__default["default"].forwardRef(funct
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var overlayRef = React.useRef();
+  var overlayRef = React.useRef(null);
   var portalNode = portalTarget ? (_document$querySelect = document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector('body') : document.querySelector('body');
   var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
@@ -181,7 +181,9 @@ exports.CoachmarkFixed = /*#__PURE__*/React__default["default"].forwardRef(funct
     onTransitionEnd: handleTransitionEnd,
     theme: theme,
     className: cx__default["default"](fixedIsVisible && "".concat(overlayBlockClass, "--is-visible"), overlayBlockClass)
-  }, children), portalNode)));
+  }, children),
+  // Default to `document.body` when `portalNode` is `null`
+  portalNode || document.body)));
 });
 
 // Return a placeholder if not released and not enabled by feature flag

package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts

@@ -1,6 +1,50 @@
+/**
+ * Copyright IBM Corp. 2023, 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, { ReactNode } from 'react';
+interface CoachmarkOverlayElementsProps {
+    /**
+     * CoachmarkOverlayElements should be used with one or many CoachmarkOverlayElement components as children.
+     * @see CoachmarkOverlayElement
+     */
+    children: ReactNode;
+    /**
+     * Optional class name for this component.
+     */
+    className?: string;
+    /**
+     * The visibility of CoachmarkOverlayElements is
+     * managed in the parent component.
+     */
+    isVisible?: boolean;
+    /**
+     * The object describing an image in one of two shapes.
+     * If a single media element is required, use `{render}`.
+     * If a stepped animation is required, use `{filePaths}`.
+     */
+    media?: {
+        render?: () => ReactNode;
+        filePaths?: string[];
+    };
+    /**
+     * The label for the Next button.
+     */
+    nextButtonText?: string;
+    /**
+     * The label for the Previous button.
+     */
+    previousButtonLabel?: string;
+    /**
+     * The label for the Close button.
+     */
+    closeButtonLabel?: string;
+}
 /**
  * Composable container to allow for the displaying of CoachmarkOverlayElement
  * components in a carousel fashion.
  */
-export let CoachmarkOverlayElements: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CoachmarkOverlayElements: React.ForwardRefExoticComponent<CoachmarkOverlayElementsProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js

@@ -28,11 +28,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["className", "children", "isVisible", "media", "nextButtonText", "previousButtonLabel", "closeButtonLabel"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--coachmark-overlay-elements");
 var componentName = 'CoachmarkOverlayElements';
-
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 // Default values can be included here and then assigned to the prop params,
@@ -145,8 +143,9 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React__default["default"].forwar
     title: previousButtonLabel,
     disabled: scrollPosition === 0,
     onClick: function onClick() {
+      var _scrollRef$current, _scrollRef$current$sc;
       var targetStep = lodash.clamp(currentProgStep - 1, progStepFloor, progStepCeil);
-      scrollRef.current.scrollToView(targetStep);
+      scrollRef === null || scrollRef === void 0 || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 || (_scrollRef$current$sc = _scrollRef$current.scrollToView) === null || _scrollRef$current$sc === void 0 || _scrollRef$current$sc.call(_scrollRef$current, targetStep);
       setCurrentProgStep(targetStep);
     }
   }, previousButtonLabel), currentProgStep < progStepCeil ? /*#__PURE__*/React__default["default"].createElement(react.Button, {
@@ -155,8 +154,9 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React__default["default"].forwar
     title: nextButtonText,
     disabled: scrollPosition === 1,
     onClick: function onClick() {
+      var _scrollRef$current2, _scrollRef$current2$s;
       var targetStep = lodash.clamp(currentProgStep + 1, progStepFloor, progStepCeil);
-      scrollRef.current.scrollToView(targetStep);
+      scrollRef === null || scrollRef === void 0 || (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 || (_scrollRef$current2$s = _scrollRef$current2.scrollToView) === null || _scrollRef$current2$s === void 0 || _scrollRef$current2$s.call(_scrollRef$current2, targetStep);
       setCurrentProgStep(targetStep);
     }
   }, nextButtonText) : closeButtonLabel && /*#__PURE__*/React__default["default"].createElement(react.Button, _rollupPluginBabelHelpers["extends"]({
@@ -201,6 +201,7 @@ exports.CoachmarkOverlayElements.propTypes = {
    * If a single media element is required, use `{render}`.
    * If a stepped animation is required, use `{filePaths}`.
    */
+  /**@ts-ignore*/
   media: index["default"].oneOfType([index["default"].shape({
     render: index["default"].func
   }), index["default"].shape({

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

@@ -7,15 +7,16 @@ declare namespace ConditionBlock {
     namespace propTypes {
         let addConditionHandler: PropTypes.Requireable<(...args: any[]) => any>;
         let aria: PropTypes.Requireable<object>;
+        let condition: PropTypes.Requireable<object>;
         let conditionIndex: PropTypes.Requireable<number>;
         let conjunction: PropTypes.Requireable<string>;
         let group: PropTypes.Requireable<object>;
+        let isLastCondition: PropTypes.Requireable<(...args: any[]) => any>;
         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

@@ -37,20 +37,21 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
  */
 
 var ConditionBlock = function ConditionBlock(props) {
-  var _props$state = props.state,
-    property = _props$state.property,
-    value = _props$state.value,
-    operator = _props$state.operator;
+  var _props$condition = props.condition,
+    property = _props$condition.property,
+    value = _props$condition.value,
+    operator = _props$condition.operator;
   var onRemove = props.onRemove,
     onChange = props.onChange,
-    state = props.state,
+    condition = props.condition,
     conjunction = props.conjunction,
     onConnectorOperatorChange = props.onConnectorOperatorChange,
     isStatement = props.isStatement,
     group = props.group,
     onStatementChange = props.onStatementChange,
     addConditionHandler = props.addConditionHandler,
-    conditionIndex = props.conditionIndex;
+    conditionIndex = props.conditionIndex,
+    isLastCondition = props.isLastCondition;
   var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
     inputConfig = _useContext.inputConfig;
   var itemComponents = {
@@ -69,13 +70,9 @@ var ConditionBlock = function ConditionBlock(props) {
   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());
+      return eachProperty.id == property;
     })[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,
@@ -90,7 +87,7 @@ var ConditionBlock = function ConditionBlock(props) {
     onConnectorOperatorChange(op);
   };
   var onPropertyChangeHandler = function onPropertyChangeHandler(newProperty) {
-    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, condition), {}, {
       property: newProperty,
       operator: undefined,
       value: '',
@@ -98,14 +95,14 @@ var ConditionBlock = function ConditionBlock(props) {
     }));
   };
   var onOperatorChangeHandler = function onOperatorChangeHandler(newOperator) {
-    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, condition), {}, {
       operator: newOperator,
       value: undefined,
       popoverToOpen: 'valueField'
     }));
   };
   var onValueChangeHandler = function onValueChangeHandler(newValue) {
-    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, condition), {}, {
       value: newValue,
       popoverToOpen: ''
     }));
@@ -134,7 +131,8 @@ var ConditionBlock = function ConditionBlock(props) {
     title: DataConfigs.translateWithId('condition'),
     "data-name": "connectorField",
     popOverClassName: "".concat(DataConfigs.blockClass, "__gap"),
-    className: "".concat(DataConfigs.blockClass, "__statement-button")
+    className: "".concat(DataConfigs.blockClass, "__statement-button"),
+    tabIndex: 0
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
     conditionState: {
       value: group.statement,
@@ -154,7 +152,7 @@ var ConditionBlock = function ConditionBlock(props) {
     renderIcon: icon !== null && icon !== void 0 ? icon : null,
     className: "".concat(DataConfigs.blockClass, "__property-field"),
     "data-name": "propertyField",
-    state: state,
+    condition: condition,
     type: type
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
     conditionState: {
@@ -169,7 +167,7 @@ var ConditionBlock = function ConditionBlock(props) {
     label: operator,
     title: DataConfigs.translateWithId('operator'),
     "data-name": "operatorField",
-    state: state,
+    condition: condition,
     type: type
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
     config: {
@@ -186,7 +184,7 @@ var ConditionBlock = function ConditionBlock(props) {
     title: label,
     showToolTip: true,
     "data-name": "valueField",
-    state: state,
+    condition: condition,
     config: config
   }, /*#__PURE__*/React__default["default"].createElement(ItemComponent, {
     conditionState: {
@@ -229,6 +227,10 @@ ConditionBlock.propTypes = {
    * object hold aria attributes
    */
   aria: index["default"].object,
+  /**
+   * object that hold the current condition
+   */
+  condition: index["default"].object,
   /**
    * index of the current condition
    */
@@ -241,6 +243,10 @@ ConditionBlock.propTypes = {
    * object that hold the current group object where is condition is part of
    */
   group: index["default"].object,
+  /**
+   * callback to add a new condition
+   */
+  isLastCondition: index["default"].func,
   /**
    *  boolean that decides to show the statement(if/ excl.if)
    */
@@ -260,11 +266,7 @@ ConditionBlock.propTypes = {
   /**
    * callback to handle the statement(if/ excl.if) change
    */
-  onStatementChange: index["default"].func,
-  /**
-   * object that hold the current condition
-   */
-  state: index["default"].object
+  onStatementChange: index["default"].func
 };
 
 exports["default"] = ConditionBlock$1;

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

@@ -33,13 +33,13 @@ var ConditionBuilderButton = function ConditionBuilderButton(_ref) {
     showToolTip = _ref.showToolTip,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var Button = function Button() {
-    return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
       // role={'gridcell'}
       tabIndex: -1,
       className: cx__default["default"]([className, "".concat(DataConfigs.blockClass, "__condition-builder-button"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__text-ellipsis"), showToolTip && !hideLabel)]),
       type: "button",
       onClick: onClick
-    }), Icon && (_Icon || (_Icon = /*#__PURE__*/React__default["default"].createElement(Icon, null))), !hideLabel && label);
+    }, rest), Icon && (_Icon || (_Icon = /*#__PURE__*/React__default["default"].createElement(Icon, null))), !hideLabel && label);
   };
   return hideLabel || showToolTip ? /*#__PURE__*/React__default["default"].createElement(react.Tooltip, _rollupPluginBabelHelpers["extends"]({
     label: label,

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

@@ -31,16 +31,16 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
   var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
     rootState = _useContext.rootState,
     setRootState = _useContext.setRootState;
-  var _useState = React.useState(true),
+  var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     isConditionBuilderActive = _useState2[0],
     setIsConditionBuilderActive = _useState2[1];
   React.useEffect(function () {
     var _rootState$groups;
     if (rootState !== null && rootState !== void 0 && (_rootState$groups = rootState.groups) !== null && _rootState$groups !== void 0 && _rootState$groups.length) {
-      setIsConditionBuilderActive(false);
-    } else {
       setIsConditionBuilderActive(true);
+    } else {
+      setIsConditionBuilderActive(false);
     }
     if (getConditionState) {
       getConditionState(rootState);
@@ -48,26 +48,16 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [rootState, conditionBuilderRef]);
-  React.useEffect(function () {
-    if (isConditionBuilderActive == false) {
-      if (conditionBuilderRef.current) {
-        var initial = conditionBuilderRef.current.querySelector('[role="gridcell"] button');
-        if (initial) {
-          initial.setAttribute('tabindex', '0');
-        }
-      }
-    }
-  }, [isConditionBuilderActive, conditionBuilderRef]);
   var onStartConditionBuilder = function onStartConditionBuilder() {
     //when add condition button is clicked.
-    setIsConditionBuilderActive(false);
+    setIsConditionBuilderActive(true);
     setRootState(initialState !== null && initialState !== void 0 ? initialState : ConditionBuilderProvider.emptyState); //here we can set an empty skeleton object for an empty condition builder,
     //or we can even pre-populate some existing builder and continue editing
   };
-  var _onRemove = React.useCallback(function (groupIndex) {
+  var _onRemove = React.useCallback(function (groupId) {
     setRootState(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rootState), {}, {
-      groups: rootState.groups.filter(function (group, gIndex) {
-        return groupIndex !== gIndex;
+      groups: rootState.groups.filter(function (group) {
+        return groupId !== group.id;
       })
     }));
   }, [setRootState, rootState]);
@@ -76,16 +66,15 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
      * This method is triggered from inner components. This will be called every time when any change is to be updated in the rootState.
      * This gets the updated group as argument.
      */
+    var groups = [].concat(_rollupPluginBabelHelpers.toConsumableArray(rootState.groups.slice(0, groupIndex)), [updatedGroup], _rollupPluginBabelHelpers.toConsumableArray(rootState.groups.slice(groupIndex + 1)));
     setRootState(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rootState), {}, {
-      groups: rootState.groups.map(function (group, gIndex) {
-        return groupIndex === gIndex ? updatedGroup : group;
-      })
+      groups: groups
     }));
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(DataConfigs.blockClass, "__content-container"),
     tabIndex: -1
-  }, isConditionBuilderActive && /*#__PURE__*/React__default["default"].createElement(react.Button, {
+  }, !isConditionBuilderActive && /*#__PURE__*/React__default["default"].createElement(react.Button, {
     className: "".concat(DataConfigs.blockClass, "__condition-builder"),
     renderIcon: function renderIcon(props) {
       return /*#__PURE__*/React__default["default"].createElement(icons.Add, _rollupPluginBabelHelpers["extends"]({
@@ -98,15 +87,16 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
     onClick: onStartConditionBuilder
   }, startConditionLabel), rootState && (rootState === null || rootState === void 0 || (_rootState$groups2 = rootState.groups) === null || _rootState$groups2 === void 0 ? void 0 : _rootState$groups2.map(function (eachGroup, groupIndex) {
     return /*#__PURE__*/React__default["default"].createElement(ConditionGroupBuilder["default"], {
+      className: "".concat(DataConfigs.blockClass, "__condition-builder__group"),
       key: groupIndex,
       aria: {
         level: 1,
         posinset: groupIndex * 2 + 1,
         setsize: rootState.groups.length * 2
       },
-      state: eachGroup,
+      group: eachGroup,
       onRemove: function onRemove() {
-        _onRemove(groupIndex);
+        _onRemove(eachGroup.id);
       },
       onChange: function onChange(updatedGroup) {
         onChangeHandler(updatedGroup, groupIndex);

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

@@ -3,11 +3,13 @@ export namespace emptyState {
         groupSeparateOperator: null;
         groupOperator: string;
         statement: string;
+        id: any;
         conditions: {
             property: undefined;
             operator: string;
             value: string;
             popoverToOpen: string;
+            id: any;
         }[];
     }[];
 }

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

@@ -12,6 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var index = require('../../../node_modules/prop-types/index.js');
+var uuidv4 = require('../../../global/js/utils/uuidv4.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -22,11 +23,13 @@ var emptyState = {
     groupSeparateOperator: null,
     groupOperator: 'and',
     statement: 'if',
+    id: uuidv4["default"](),
     conditions: [{
       property: undefined,
       operator: '',
       value: '',
-      popoverToOpen: 'propertyField'
+      popoverToOpen: 'propertyField',
+      id: uuidv4["default"]()
     }]
   }]
 };

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

@@ -1,4 +1,4 @@
-export function ConditionBuilderItem({ children, className, label, renderIcon, title, type, showToolTip, state, popOverClassName, config, ...rest }: {
+export function ConditionBuilderItem({ children, className, label, renderIcon, title, type, showToolTip, condition, popOverClassName, config, ...rest }: {
     [x: string]: any;
     children: any;
     className: any;
@@ -7,7 +7,7 @@ export function ConditionBuilderItem({ children, className, label, renderIcon, t
     title: any;
     type: any;
     showToolTip: any;
-    state: any;
+    condition: any;
     popOverClassName: any;
     config: any;
 }): import("react/jsx-runtime").JSX.Element;
@@ -15,12 +15,12 @@ export namespace ConditionBuilderItem {
     namespace propTypes {
         let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         let className: PropTypes.Requireable<string>;
+        let condition: PropTypes.Requireable<object>;
         let config: PropTypes.Requireable<object>;
         let label: PropTypes.Requireable<NonNullable<string | any[] | null | undefined>>;
         let popOverClassName: PropTypes.Requireable<string>;
         let renderIcon: PropTypes.Requireable<object>;
         let showToolTip: PropTypes.Requireable<boolean>;
-        let state: PropTypes.Requireable<object>;
         let title: PropTypes.Requireable<string>;
         let type: PropTypes.Requireable<string>;
     }

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

@@ -21,7 +21,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["children", "className", "label", "renderIcon", "title", "type", "showToolTip", "state", "popOverClassName", "config"];
+var _excluded = ["children", "className", "label", "renderIcon", "title", "type", "showToolTip", "condition", "popOverClassName", "config"];
 var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -30,7 +30,7 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
     title = _ref.title,
     type = _ref.type,
     showToolTip = _ref.showToolTip,
-    state = _ref.state,
+    condition = _ref.condition,
     popOverClassName = _ref.popOverClassName,
     config = _ref.config,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
@@ -53,17 +53,17 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
      * rest['data-name'] holds the current field name
      * popoverToOpen hold the next popover to be opened if required
      */
-    if (state) {
+    if (condition) {
       var currentField = rest['data-name'];
       //if any condition is changed, state prop is triggered
-      if (state.popoverToOpen && currentField !== state.popoverToOpen) {
+      if (condition.popoverToOpen && currentField !== condition.popoverToOpen) {
         // close the previous popover
         setOpen(false);
-      } else if (currentField == 'valueField' && type == 'option' && state.operator !== 'one-of') {
+      } else if (currentField == 'valueField' && type == 'option' && condition.operator !== 'one-of') {
         //close the current popover if the field is valueField and  is a single select dropdown. For all other inputs ,popover need to be open on value changes.
         setOpen(false);
       }
-      if (state.popoverToOpen == currentField) {
+      if (condition.popoverToOpen == currentField) {
         //current popover need to be opened
         setOpen(true);
       }
@@ -73,7 +73,7 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
       setOpen(false);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state, label]);
+  }, [condition, label]);
   React.useEffect(function () {
     //this will focus the first input field in the popover
     if (open && contentRef.current) {
@@ -121,6 +121,10 @@ ConditionBuilderItem.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: index["default"].string,
+  /**
+   * current condition state object
+   */
+  condition: index["default"].object,
   /**
    * this is the config object again the current property from inputConfig
    */
@@ -142,10 +146,6 @@ ConditionBuilderItem.propTypes = {
    * show tool tip
    */
   showToolTip: index["default"].bool,
-  /**
-   * current condition state object
-   */
-  state: index["default"].object,
   /**
    * title of the popover
    */

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

@@ -5,20 +5,22 @@ export default ConditionGroupBuilder;
  * All the inner components of group are called from here.
  * @returns
  */
-declare function ConditionGroupBuilder({ state, aria, onRemove, onChange, conditionBuilderRef, }: {
-    state: any;
+declare function ConditionGroupBuilder({ group, aria, onRemove, onChange, conditionBuilderRef, className, }: {
+    group: any;
     aria: any;
     onRemove: any;
     onChange: any;
     conditionBuilderRef: any;
+    className: any;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace ConditionGroupBuilder {
     namespace propTypes {
         let aria: PropTypes.Requireable<object>;
+        let className: PropTypes.Requireable<string>;
         let conditionBuilderRef: PropTypes.Requireable<object>;
+        let group: PropTypes.Requireable<object>;
         let onChange: PropTypes.Requireable<(...args: any[]) => any>;
         let onRemove: PropTypes.Requireable<(...args: any[]) => any>;
-        let state: PropTypes.Requireable<object>;
     }
 }
 import PropTypes from 'prop-types';