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

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

@@ -19,11 +19,9 @@ import { SteppedAnimatedMedia } from '../SteppedAnimatedMedia/SteppedAnimatedMed
 import { Carousel } from '../Carousel/Carousel.js';
 
 var _excluded = ["className", "children", "isVisible", "media", "nextButtonText", "previousButtonLabel", "closeButtonLabel"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(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,
@@ -136,8 +134,9 @@ var CoachmarkOverlayElements = /*#__PURE__*/React__default.forwardRef(function (
     title: previousButtonLabel,
     disabled: scrollPosition === 0,
     onClick: function onClick() {
+      var _scrollRef$current, _scrollRef$current$sc;
       var targetStep = 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.createElement(Button, {
@@ -146,8 +145,9 @@ var CoachmarkOverlayElements = /*#__PURE__*/React__default.forwardRef(function (
     title: nextButtonText,
     disabled: scrollPosition === 1,
     onClick: function onClick() {
+      var _scrollRef$current2, _scrollRef$current2$s;
       var targetStep = 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.createElement(Button, _extends({
@@ -192,6 +192,7 @@ CoachmarkOverlayElements.propTypes = {
    * If a single media element is required, use `{render}`.
    * If a stepped animation is required, use `{filePaths}`.
    */
+  /**@ts-ignore*/
   media: PropTypes.oneOfType([PropTypes.shape({
     render: PropTypes.func
   }), PropTypes.shape({

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

@@ -28,20 +28,21 @@ import ConditionBuilderAdd from '../ConditionBuilderAdd/ConditionBuilderAdd.js';
  */
 
 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 = useContext(ConditionBuilderContext),
     inputConfig = _useContext.inputConfig;
   var itemComponents = {
@@ -60,13 +61,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,
@@ -81,7 +78,7 @@ var ConditionBlock = function ConditionBlock(props) {
     onConnectorOperatorChange(op);
   };
   var onPropertyChangeHandler = function onPropertyChangeHandler(newProperty) {
-    onChange(_objectSpread2(_objectSpread2({}, state), {}, {
+    onChange(_objectSpread2(_objectSpread2({}, condition), {}, {
       property: newProperty,
       operator: undefined,
       value: '',
@@ -89,14 +86,14 @@ var ConditionBlock = function ConditionBlock(props) {
     }));
   };
   var onOperatorChangeHandler = function onOperatorChangeHandler(newOperator) {
-    onChange(_objectSpread2(_objectSpread2({}, state), {}, {
+    onChange(_objectSpread2(_objectSpread2({}, condition), {}, {
       operator: newOperator,
       value: undefined,
       popoverToOpen: 'valueField'
     }));
   };
   var onValueChangeHandler = function onValueChangeHandler(newValue) {
-    onChange(_objectSpread2(_objectSpread2({}, state), {}, {
+    onChange(_objectSpread2(_objectSpread2({}, condition), {}, {
       value: newValue,
       popoverToOpen: ''
     }));
@@ -125,7 +122,8 @@ var ConditionBlock = function ConditionBlock(props) {
     title: translateWithId('condition'),
     "data-name": "connectorField",
     popOverClassName: "".concat(blockClass, "__gap"),
-    className: "".concat(blockClass, "__statement-button")
+    className: "".concat(blockClass, "__statement-button"),
+    tabIndex: 0
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderItemOption, {
     conditionState: {
       value: group.statement,
@@ -145,7 +143,7 @@ var ConditionBlock = function ConditionBlock(props) {
     renderIcon: icon !== null && icon !== void 0 ? icon : null,
     className: "".concat(blockClass, "__property-field"),
     "data-name": "propertyField",
-    state: state,
+    condition: condition,
     type: type
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderItemOption, {
     conditionState: {
@@ -160,7 +158,7 @@ var ConditionBlock = function ConditionBlock(props) {
     label: operator,
     title: translateWithId('operator'),
     "data-name": "operatorField",
-    state: state,
+    condition: condition,
     type: type
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderItemOption, {
     config: {
@@ -177,7 +175,7 @@ var ConditionBlock = function ConditionBlock(props) {
     title: label,
     showToolTip: true,
     "data-name": "valueField",
-    state: state,
+    condition: condition,
     config: config
   }, /*#__PURE__*/React__default.createElement(ItemComponent, {
     conditionState: {
@@ -220,6 +218,10 @@ ConditionBlock.propTypes = {
    * object hold aria attributes
    */
   aria: PropTypes.object,
+  /**
+   * object that hold the current condition
+   */
+  condition: PropTypes.object,
   /**
    * index of the current condition
    */
@@ -232,6 +234,10 @@ ConditionBlock.propTypes = {
    * object that hold the current group object where is condition is part of
    */
   group: PropTypes.object,
+  /**
+   * callback to add a new condition
+   */
+  isLastCondition: PropTypes.func,
   /**
    *  boolean that decides to show the statement(if/ excl.if)
    */
@@ -251,11 +257,7 @@ ConditionBlock.propTypes = {
   /**
    * callback to handle the statement(if/ excl.if) change
    */
-  onStatementChange: PropTypes.func,
-  /**
-   * object that hold the current condition
-   */
-  state: PropTypes.object
+  onStatementChange: PropTypes.func
 };
 
 export { ConditionBlock$1 as default };

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

@@ -24,13 +24,13 @@ var ConditionBuilderButton = function ConditionBuilderButton(_ref) {
     showToolTip = _ref.showToolTip,
     rest = _objectWithoutProperties(_ref, _excluded);
   var Button = function Button() {
-    return /*#__PURE__*/React__default.createElement("button", _extends({}, rest, {
+    return /*#__PURE__*/React__default.createElement("button", _extends({
       // 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);
+    }, rest), Icon && (_Icon || (_Icon = /*#__PURE__*/React__default.createElement(Icon, null))), !hideLabel && label);
   };
   return hideLabel || showToolTip ? /*#__PURE__*/React__default.createElement(Tooltip, _extends({
     label: label,

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useContext, useState, useEffect, useCallback } from 'react';
 import PropTypes from '../../../node_modules/prop-types/index.js';
 import { Button } from '@carbon/react';
@@ -23,16 +23,16 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
   var _useContext = useContext(ConditionBuilderContext),
     rootState = _useContext.rootState,
     setRootState = _useContext.setRootState;
-  var _useState = useState(true),
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isConditionBuilderActive = _useState2[0],
     setIsConditionBuilderActive = _useState2[1];
   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);
@@ -40,26 +40,16 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [rootState, conditionBuilderRef]);
-  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 : 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 = useCallback(function (groupIndex) {
+  var _onRemove = useCallback(function (groupId) {
     setRootState(_objectSpread2(_objectSpread2({}, rootState), {}, {
-      groups: rootState.groups.filter(function (group, gIndex) {
-        return groupIndex !== gIndex;
+      groups: rootState.groups.filter(function (group) {
+        return groupId !== group.id;
       })
     }));
   }, [setRootState, rootState]);
@@ -68,16 +58,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(_toConsumableArray(rootState.groups.slice(0, groupIndex)), [updatedGroup], _toConsumableArray(rootState.groups.slice(groupIndex + 1)));
     setRootState(_objectSpread2(_objectSpread2({}, rootState), {}, {
-      groups: rootState.groups.map(function (group, gIndex) {
-        return groupIndex === gIndex ? updatedGroup : group;
-      })
+      groups: groups
     }));
   };
   return /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__content-container"),
     tabIndex: -1
-  }, isConditionBuilderActive && /*#__PURE__*/React__default.createElement(Button, {
+  }, !isConditionBuilderActive && /*#__PURE__*/React__default.createElement(Button, {
     className: "".concat(blockClass, "__condition-builder"),
     renderIcon: function renderIcon(props) {
       return /*#__PURE__*/React__default.createElement(Add, _extends({
@@ -90,15 +79,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.createElement(ConditionGroupBuilder, {
+      className: "".concat(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/es/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/es/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.js

@@ -8,17 +8,20 @@
 import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, createContext } from 'react';
 import PropTypes from '../../../node_modules/prop-types/index.js';
+import uuidv4 from '../../../global/js/utils/uuidv4.js';
 
 var emptyState = {
   groups: [{
     groupSeparateOperator: null,
     groupOperator: 'and',
     statement: 'if',
+    id: uuidv4(),
     conditions: [{
       property: undefined,
       operator: '',
       value: '',
-      popoverToOpen: 'propertyField'
+      popoverToOpen: 'propertyField',
+      id: uuidv4()
     }]
   }]
 };

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

@@ -13,7 +13,7 @@ import { Add } from '@carbon/react/icons';
 import { valueRenderers, translateWithId, blockClass } from '../ConditionBuilderContext/DataConfigs.js';
 import { ConditionBuilderButton } from '../ConditionBuilderButton/ConditionBuilderButton.js';
 
-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,
@@ -22,7 +22,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 = _objectWithoutProperties(_ref, _excluded);
@@ -45,17 +45,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);
       }
@@ -65,7 +65,7 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
       setOpen(false);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state, label]);
+  }, [condition, label]);
   useEffect(function () {
     //this will focus the first input field in the popover
     if (open && contentRef.current) {
@@ -113,6 +113,10 @@ ConditionBuilderItem.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
+  /**
+   * current condition state object
+   */
+  condition: PropTypes.object,
   /**
    * this is the config object again the current property from inputConfig
    */
@@ -134,10 +138,6 @@ ConditionBuilderItem.propTypes = {
    * show tool tip
    */
   showToolTip: PropTypes.bool,
-  /**
-   * current condition state object
-   */
-  state: PropTypes.object,
   /**
    * title of the popover
    */

package/es/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';