@carbon/ibm-products 2.81.0-rc.0 → 2.82.0-rc.0

package/lib/components/ConditionBuilder/ConditionBuilder.js

@@ -0,0 +1,237 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * 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';
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var react = require('@carbon/react');
+var index = require('../../_virtual/index.js');
+var cx = require('classnames');
+var devtools = require('../../global/js/utils/devtools.js');
+var ConditionBuilderContent = require('./ConditionBuilderContent/ConditionBuilderContent.js');
+var ConditionBuilderProvider = require('./ConditionBuilderContext/ConditionBuilderProvider.js');
+var handleKeyboardEvents = require('./utils/handleKeyboardEvents.js');
+var util = require('./utils/util.js');
+
+// Carbon and package components we use.
+/* TODO: @import(s) of carbon components and other package components. */
+
+const componentName = 'ConditionBuilder';
+
+// 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,
+// e.g. prop = defaults.prop,
+// This gathers default values together neatly and ensures non-primitive
+// values are initialized early to avoid react making unnecessary re-renders.
+// Note that default values are not required for props that are 'required',
+// nor for props where the component can apply undefined values reasonably.
+// Default values should be provided when the component needs to make a choice
+// or assumption when a prop is not supplied.
+
+// Default values for props
+// const defaults = {
+//   /* TODO: add defaults for relevant props if needed */
+// };
+
+/**
+ * TODO: A description of the component.
+ */
+
+const ConditionBuilder = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    className,
+    inputConfig,
+    startConditionLabel = 'Add Condition',
+    popOverSearchThreshold,
+    getOptions,
+    initialState,
+    getConditionState,
+    getActionsState,
+    variant = util.NON_HIERARCHICAL_VARIANT,
+    actions,
+    translateWithId,
+    statementConfigCustom,
+    onAddItem,
+    readOnly,
+    ...rest
+  } = _ref;
+  const localRef = React.useRef(null);
+  const conditionBuilderRef = ref || localRef;
+  const handleKeyDownHandler = evt => {
+    handleKeyboardEvents.handleKeyDown(evt, conditionBuilderRef, variant);
+  };
+  return /*#__PURE__*/React.createElement(ConditionBuilderProvider.ConditionBuilderProvider, {
+    inputConfig: inputConfig,
+    popOverSearchThreshold: popOverSearchThreshold,
+    getOptions: getOptions,
+    variant: variant,
+    translateWithId: translateWithId,
+    conditionBuilderRef: conditionBuilderRef,
+    statementConfigCustom: statementConfigCustom,
+    onAddItem: onAddItem,
+    readOnly: !!readOnly
+  }, /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
+    className: cx(util.blockClass,
+    // Apply the block class to the main HTML element
+    className,
+    // Apply any supplied class names to the main HTML element.
+    {
+      [`${util.blockClass}__readonly`]: readOnly
+    }, {
+      // switched classes dependant on props or state
+      // example: [`${blockClass}__here-if-small`]: size === 'sm',
+    }),
+    ref: conditionBuilderRef
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(react.VStack, {
+    className: `${util.blockClass}__${variant}`,
+    onKeyDown: handleKeyDownHandler
+  }, /*#__PURE__*/React.createElement(ConditionBuilderContent.default, {
+    startConditionLabel: startConditionLabel,
+    getConditionState: getConditionState,
+    getActionsState: getActionsState,
+    initialState: initialState,
+    actions: actions
+  }))));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+ConditionBuilder.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+ConditionBuilder.propTypes = {
+  /**
+   * optional array of actions
+   */
+  /**@ts-ignore */
+  actions: index.default.arrayOf(index.default.shape({
+    id: index.default.oneOfType([index.default.string, index.default.number]).isRequired,
+    label: index.default.string.isRequired
+  })),
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index.default.string,
+  /**
+   * This is a callback that gives back the updated action state
+   */
+  getActionsState: index.default.func,
+  /**
+   * This is a callback that gives back updated condition state
+   */
+  getConditionState: index.default.func.isRequired,
+  /**
+  * Callback triggered to dynamically fetch options for a property of type 'option'.
+  * This is invoked when no static options array is provided in the input config.
+  * The function should return a Promise that resolves with an array of options in the required format.
+   */
+  getOptions: index.default.func,
+  /**
+   * Optional prop if you want to pass a saved condition state, pass as "initialState.state".
+   * "initialState.enabledDefault" will populate the builder with the provided initial state before clicking Add Condition button.
+   *
+   *  This state should respect the structure of condition state that is available in getConditionState callback
+   */
+  /**@ts-ignore */
+  initialState: index.default.shape({
+    state: index.default.shape({
+      groups: index.default.arrayOf(index.default.shape({
+        groupOperator: index.default.string,
+        statement: index.default.string,
+        conditions: index.default.arrayOf(index.default.oneOfType([index.default.shape({
+          property: index.default.string,
+          operator: index.default.string,
+          value: index.default.oneOfType([index.default.string, index.default.arrayOf(index.default.shape({
+            id: index.default.string,
+            label: index.default.string
+          })), index.default.shape({
+            id: index.default.string,
+            label: index.default.string
+          })])
+        }), index.default.object]))
+      })),
+      operator: index.default.string
+    }),
+    enabledDefault: index.default.bool
+  }),
+  /**
+   * This is a mandatory prop that defines the input to the condition builder.
+    */
+  /**@ts-ignore */
+  inputConfig: index.default.shape({
+    properties: index.default.arrayOf(index.default.shape({
+      id: index.default.string.isRequired,
+      label: index.default.string.isRequired,
+      icon: index.default.oneOfType([index.default.func, index.default.object]),
+      type: index.default.oneOf(['text', 'textarea', 'number', 'date', 'option', 'time', 'custom']).isRequired,
+      description: index.default.string,
+      //will be displayed on hover of property field
+      getIsDisabled: index.default.func,
+      getIsHidden: index.default.func,
+      config: index.default.shape({
+        options: index.default.arrayOf(index.default.shape({
+          id: index.default.string.isRequired,
+          label: index.default.string.isRequired,
+          icon: index.default.oneOfType([index.default.func, index.default.object])
+        })),
+        component: index.default.func,
+        operators: index.default.arrayOf(index.default.shape({
+          id: index.default.string.isRequired,
+          label: index.default.string.isRequired
+        })),
+        valueFormatter: index.default.func
+      })
+    }))
+  }).isRequired,
+  /**
+   * this is an optional callback triggered before adding any condition , subgroup or group.
+   * User can optionally perform any validation and can stop add action if they return back {preventAdd:true}
+   */
+  onAddItem: index.default.func,
+  /**
+   * Provide an mandatory numeric value that will be used to enable search option in the popovers with list.
+   */
+  popOverSearchThreshold: index.default.number.isRequired,
+  /**
+   * Whether the conditionBuilder should be readOnly
+   */
+  readOnly: index.default.bool,
+  /**
+   * Provide a label to the button that starts condition builder
+   */
+  startConditionLabel: index.default.string,
+  /**
+   * Optional prop for passing custom configuration for statement option from default op
+   */
+  /**@ts-ignore */
+  statementConfigCustom: index.default.arrayOf(index.default.shape({
+    id: index.default.string.isRequired,
+    connector: index.default.oneOf(['and', 'or']).isRequired,
+    label: index.default.string.isRequired,
+    secondaryLabel: index.default.string
+  })),
+  /**
+   * Optional prop, if you need to pass translations to the texts on the component instead of the defined defaults.
+   * This callback function will receive the message id and you need to return the corresponding text for that id.
+   
+   */
+  /**@ts-ignore */
+  translateWithId: index.default.func,
+  /* TODO: add types and DocGen for all props. */
+  /**
+   * Provide the condition builder variant: Non-Hierarchical/ Hierarchical
+   */
+  variant: index.default.oneOf(['Non-Hierarchical', 'Hierarchical'])
+};
+
+exports.ConditionBuilder = ConditionBuilder;

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

@@ -0,0 +1,186 @@
+/**
+ * Copyright IBM Corp. 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 { TextAreaProps, TextInputProps, type DatePickerProps } from '@carbon/react';
+import { CarbonIconType } from '@carbon/icons-react';
+import { NumberInputProps } from '@carbon/react/lib/components/NumberInput/NumberInput';
+import { Dispatch, ForwardedRef, PropsWithChildren, ReactNode, SetStateAction } from 'react';
+export type LogicalOperator = 'and' | 'or';
+export type StatementOperator = 'ifAll' | 'ifAny' | 'unlessAll' | 'unlessAny';
+type CoreOperator = 'is';
+type NumberOperator = 'greater' | 'greaterEqual' | 'lower' | 'lowerEqual';
+type StringOperator = 'startsWith' | 'endsWith';
+type ArrayOperator = 'contains';
+type OptionOperator = 'oneOf';
+type DateOperator = 'before' | 'after';
+export type Operator = LogicalOperator | StatementOperator | CoreOperator | NumberOperator | StringOperator | ArrayOperator | OptionOperator | DateOperator;
+export type OperatorGroups = 'logical' | 'statement' | 'core' | 'number' | 'string' | 'array' | 'option' | 'date';
+export type Operators = {
+    logical: LogicalOperator;
+    statement: StatementOperator;
+    core: CoreOperator;
+    number: NumberOperator;
+    string: StringOperator;
+    array: ArrayOperator;
+    option: OptionOperator;
+    date: DateOperator;
+};
+type Item = {
+    id: string;
+    label: string;
+};
+export type option = Item & {
+    icon?: CarbonIconType;
+};
+export type PropertyConfigOption = {
+    type: 'option';
+    config?: {
+        options?: option[];
+        operators?: (Item & {
+            isMultiSelect?: boolean;
+        })[];
+    };
+};
+export interface PropertyConfigText {
+    type: 'text';
+    config: TextInputProps & {
+        operators?: Item[];
+    };
+}
+export interface PropertyConfigTextArea {
+    type: 'textarea';
+    config: TextAreaProps & {
+        operators?: Item[];
+    };
+}
+export interface PropertyConfigNumber {
+    type: 'number';
+    config: {
+        operators?: Item[];
+        min?: number;
+        max?: number;
+        step?: number;
+        unit?: string;
+    } & NumberInputProps;
+}
+export type PropertyConfigDate = {
+    type: 'date';
+    config: DatePickerProps & {
+        operators?: Item[];
+    };
+};
+export type PropertyConfigTime = {
+    type: 'time';
+    config: {
+        operators?: Item[];
+        timeZones: string[];
+    };
+};
+export type PropertyConfigCustom = {
+    type: 'custom';
+    config: {
+        component: React.ComponentType<any>;
+        operators?: Item[];
+        valueFormatter?: (value: string) => string;
+    };
+};
+export type ConfigType = PropertyConfigOption['config'] | PropertyConfigTextArea['config'] | PropertyConfigText['config'] | PropertyConfigNumber['config'] | PropertyConfigDate['config'] | PropertyConfigTime['config'] | PropertyConfigCustom['config'];
+export type Property = Item & {
+    icon?: CarbonIconType;
+    description?: string;
+    type?: any;
+    config?: any;
+    getIsDisabled?: (args: {
+        conditionState: Condition;
+        group?: ConditionGroup;
+    }) => boolean;
+    getIsHidden?: (args: {
+        conditionState: Condition;
+        group?: ConditionGroup;
+    }) => boolean;
+} & ConfigType;
+export type inputConfig = {
+    properties: Property[];
+};
+export type Option = Item & {
+    icon?: CarbonIconType;
+};
+export type Condition = {
+    property?: string;
+    operator?: Operator | '' | 'INVALID';
+    value?: string | Option[] | Option;
+    id?: string | number;
+    popoverToOpen?: string;
+};
+export type ConditionGroup = {
+    conditions?: (ConditionGroup | Condition)[];
+    groupOperator?: LogicalOperator;
+    statement?: StatementOperator;
+    id: string;
+};
+export type ConditionBuilderState = {
+    groups?: ConditionGroup[];
+    operator?: LogicalOperator;
+};
+export type Action = {
+    id?: string | number;
+    label?: string;
+};
+export type variantsType = 'Non-Hierarchical' | 'Hierarchical';
+export type statementConfig = Item & {
+    connector: 'and' | 'or';
+    secondaryLabel?: string;
+};
+type AddItemType = 'condition' | 'subgroup' | 'group';
+type AddItemConfig = {
+    type: AddItemType;
+    state: ConditionBuilderState;
+    group?: ConditionGroup;
+};
+type ConditionBuilderTextKeys = 'ifText' | 'unlessText' | 'excl_if' | 'and' | 'or' | 'is' | 'ifAll' | 'ifAny' | 'unlessAll' | 'unlessAny' | 'greater' | 'greaterEqual' | 'lower' | 'lowerEqual' | 'startsWith' | 'endsWith' | 'contains' | 'oneOf' | 'before' | 'after' | 'between' | 'addConditionText' | 'addConditionGroupText' | 'addSubgroupText' | 'conditionText' | 'propertyText' | 'operatorText' | 'valueText' | 'connectorText' | 'conditionRowText' | 'conditionRowGroupText' | 'removeConditionText' | 'addConditionRowText' | 'startText' | 'endText' | 'clearSearchText' | 'actionsText' | 'then' | 'removeActionText' | 'addActionText' | 'invalidText' | 'invalidNumberWarnText' | 'conditionBuilderText' | 'actionSectionText' | 'conditionHeadingText' | 'addPropertyText' | 'addOperatorText' | 'addValueText' | 'conditionBuilderHierarchicalText';
+export type ConditionBuilderProps = {
+    inputConfig: inputConfig;
+    initialState?: InitialState;
+    getActionsState?: (state: Action[] | undefined) => void;
+    getConditionState: (state: ConditionBuilderState | undefined) => void;
+    getOptions?: (state: ConditionBuilderState, condition: Condition) => Promise<Option[]>;
+    actions?: Action[];
+    className?: string;
+    popOverSearchThreshold: number;
+    startConditionLabel?: string;
+    variant?: 'Non-Hierarchical' | 'Hierarchical';
+    translateWithId?: (id: ConditionBuilderTextKeys) => string;
+    statementConfigCustom: statementConfig[];
+    onAddItem?: (config: AddItemConfig) => {
+        preventAdd: boolean;
+    };
+    readOnly?: boolean;
+};
+export type InitialState = {
+    state: ConditionBuilderState;
+    enabledDefault?: boolean;
+};
+export interface ConditionBuilderContextInputProps extends PropsWithChildren {
+    children?: ReactNode;
+    inputConfig?: inputConfig;
+    popOverSearchThreshold?: number;
+    getOptions?: (state: ConditionBuilderState, condition: Condition) => Promise<Option[]>;
+    variant?: string;
+    translateWithId?: (id: ConditionBuilderTextKeys) => string;
+    statementConfigCustom?: statementConfig[];
+    conditionBuilderRef?: ForwardedRef<HTMLDivElement>;
+    readOnly?: boolean;
+}
+export type ConditionBuilderContextProps = {
+    rootState?: ConditionBuilderState;
+    setRootState?: Dispatch<SetStateAction<ConditionBuilderState>>;
+    actionState?: Action[];
+    setActionState?: Dispatch<SetStateAction<Action[]>>;
+    onAddItem?: (config: AddItemConfig) => {
+        preventAdd: boolean;
+    };
+} & ConditionBuilderContextInputProps;
+export {};

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

@@ -0,0 +1,26 @@
+/**
+ * Copyright IBM Corp. 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 from 'react';
+import { Action, Option } from '../ConditionBuilder.types';
+interface ConditionBuilderActionsProps {
+    actions: Action[] | Option[];
+    className?: string;
+}
+declare const ConditionBuilderActions: {
+    ({ actions, className, }: ConditionBuilderActionsProps): React.JSX.Element;
+    propTypes: {
+        /**
+         * optional array of object that give the list of actions.
+         */
+        actions: any;
+        /**
+         * Provide an optional class to be applied to the containing node.
+         */
+        className: any;
+    };
+};
+export default ConditionBuilderActions;

package/lib/components/ConditionBuilder/ConditionBuilderActions/ConditionBuilderActions.js

@@ -0,0 +1,143 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * 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 index = require('../../../_virtual/index.js');
+var cx = require('classnames');
+var icons = require('@carbon/react/icons');
+var react = require('@carbon/react');
+var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
+var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuilderProvider.js');
+var ConditionBuilderAdd = require('../ConditionBuilderAdd/ConditionBuilderAdd.js');
+var uuidv4 = require('../../../global/js/utils/uuidv4.js');
+var ConditionBuilderButton = require('../ConditionBuilderButton/ConditionBuilderButton.js');
+var useTranslations = require('../utils/useTranslations.js');
+var ItemOptionForValueField = require('../ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js');
+var util = require('../utils/util.js');
+
+const ConditionBuilderActions = _ref => {
+  let {
+    actions,
+    className
+  } = _ref;
+  const {
+    actionState = [],
+    setActionState,
+    readOnly
+  } = React.useContext(ConditionBuilderProvider.ConditionBuilderContext);
+  const [showDeletionPreview, setShowDeletionPreview] = React.useState(-1);
+  const [actionsText, thenText, andText, removeActionText, addActionText, actionSectionText] = useTranslations.useTranslations(['actionsText', 'then', 'and', 'removeActionText', 'addActionText', 'actionSectionText']);
+  const addActionHandler = () => {
+    if (readOnly) {
+      return;
+    }
+    const action = {
+      id: uuidv4.default(),
+      label: undefined,
+      popoverToOpen: 'valueField'
+    };
+    setActionState?.([...actionState, action]);
+  };
+  const onchangeHandler = (selectedId, actionIndex) => {
+    const action = actions.find(action => action.id === selectedId); //fetch the selected action from the input action array
+
+    // same actions can be added multiple times
+    const newAction = {
+      ...action,
+      id: actionState[actionIndex].id
+    };
+    setActionState?.([...actionState.slice(0, actionIndex), newAction, ...actionState.slice(actionIndex + 1)]);
+  };
+  const onRemove = selectedId => {
+    setActionState?.(actionState.filter(action => action.id !== selectedId));
+  };
+  const handleShowDeletionPreview = index => {
+    setShowDeletionPreview(index);
+  };
+  const handleHideDeletionPreview = () => {
+    setShowDeletionPreview(-1);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, /*#__PURE__*/React.createElement(react.Section, {
+    className: `${util.blockClass}__heading`,
+    level: 4
+  }, /*#__PURE__*/React.createElement(react.Heading, null, actionsText)), /*#__PURE__*/React.createElement("div", {
+    className: `${util.blockClass}__condition-wrapper`,
+    role: "grid",
+    "aria-label": actionSectionText
+  }, actionState?.map((action, index) => /*#__PURE__*/React.createElement("div", {
+    key: action.id,
+    role: "row",
+    className: cx(`${util.blockClass}__condition-block ${util.blockClass}__gap ${util.blockClass}__gap-bottom`, {
+      [`${util.blockClass}__condition__deletion-preview`]: showDeletionPreview == index
+    })
+  }, /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
+    className: `${util.blockClass}__statement-button`,
+    tabIndex: 0,
+    popOverClassName: `${util.blockClass}__gap ${util.blockClass}__connector`,
+    label: index === 0 ? thenText : andText
+  }), /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
+    label: action.label,
+    title: actionsText,
+    condition: action,
+    "data-name": "valueField",
+    type: "option",
+    popOverClassName: `${util.blockClass}__action-block`
+  }, /*#__PURE__*/React.createElement(ItemOptionForValueField.ItemOptionForValueField, {
+    conditionState: {
+      value: action.label
+    },
+    onChange: selection => onchangeHandler(selection.id, index),
+    config: {
+      options: actions
+    }
+  })), !readOnly && /*#__PURE__*/React.createElement("span", {
+    role: "gridcell",
+    "aria-label": removeActionText
+  }, /*#__PURE__*/React.createElement(ConditionBuilderButton.ConditionBuilderButton, {
+    hideLabel: true,
+    label: removeActionText,
+    onClick: () => onRemove(action.id),
+    onMouseEnter: () => handleShowDeletionPreview(index),
+    onMouseLeave: handleHideDeletionPreview,
+    onFocus: () => handleShowDeletionPreview(index),
+    onBlur: handleHideDeletionPreview,
+    renderIcon: icons.Close,
+    className: `${util.blockClass}__close-condition`,
+    "data-name": "closeCondition"
+  })), !readOnly && actionState.length === index + 1 && /*#__PURE__*/React.createElement(ConditionBuilderAdd.default, {
+    onClick: addActionHandler,
+    className: `${util.blockClass}__gap ${util.blockClass}__gap-left`,
+    buttonLabel: addActionText,
+    tabIndex: 0
+  }))), actionState.length === 0 && /*#__PURE__*/React.createElement(ConditionBuilderAdd.default, {
+    onClick: addActionHandler,
+    className: `${util.blockClass}__gap ${util.blockClass}__gap-left`,
+    buttonLabel: addActionText,
+    tabIndex: 0
+  })));
+};
+ConditionBuilderActions.propTypes = {
+  /**
+   * optional array of object that give the list of actions.
+   */
+  actions: index.default.arrayOf(index.default.shape({
+    id: index.default.oneOfType([index.default.string, index.default.number]).isRequired,
+    label: index.default.string.isRequired
+  })),
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index.default.string
+};
+
+exports.default = ConditionBuilderActions;

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

@@ -0,0 +1,65 @@
+/**
+ * Copyright IBM Corp. 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 from 'react';
+import { ConditionGroup } from '../ConditionBuilder.types';
+interface ConditionBuilderAddProps {
+    className?: string;
+    onClick: () => void;
+    addConditionSubGroupHandler?: () => void;
+    showConditionSubGroupPreviewHandler?: () => void;
+    hideConditionSubGroupPreviewHandler?: () => void;
+    showConditionPreviewHandler?: () => void;
+    hideConditionPreviewHandler?: () => void;
+    enableSubGroup?: boolean;
+    buttonLabel?: string;
+    tabIndex?: number;
+    group?: ConditionGroup;
+}
+declare const ConditionBuilderAdd: {
+    ({ className, onClick, addConditionSubGroupHandler, showConditionSubGroupPreviewHandler, hideConditionSubGroupPreviewHandler, showConditionPreviewHandler, hideConditionPreviewHandler, enableSubGroup, buttonLabel, tabIndex, group, }: ConditionBuilderAddProps): React.JSX.Element;
+    propTypes: {
+        /**
+         * handler for hiding sub group preview
+         */
+        addConditionSubGroupHandler: any;
+        /**
+         * handler for hiding sub group preview
+         */ /**
+        * tooltip label for plus button
+        */
+        buttonLabel: any;
+        /**
+         * Provide an optional class to be applied to the containing node.
+         */
+        className: any;
+        /**
+         * boolean to enable sub groups for the tree variant
+         */
+        enableSubGroup: any;
+        /**
+         * handler for hiding sub group preview
+         */
+        hideConditionPreviewHandler: any;
+        hideConditionSubGroupPreviewHandler: any;
+        /**
+         * handler for hiding sub group preview
+         */ /**
+        * callback triggered on click of add button
+        */
+        onClick: any;
+        showConditionPreviewHandler: any;
+        showConditionSubGroupPreviewHandler: any;
+        /**
+         * handler for hiding sub group preview
+         */
+        /**
+         * Tab index
+         */
+        tabIndex: any;
+    };
+};
+export default ConditionBuilderAdd;