@carbon/ibm-products 2.36.0 → 2.37.0

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.d.ts

@@ -0,0 +1,11 @@
+export function ConditionBuilderItemDate({ conditionState, onChange }: {
+    conditionState: any;
+    onChange: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace ConditionBuilderItemDate {
+    namespace propTypes {
+        let conditionState: PropTypes.Requireable<object>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from 'prop-types';

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js

@@ -0,0 +1,59 @@
+/**
+ * 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, { useRef } from 'react';
+import { DatePicker, DatePickerInput } from '@carbon/react';
+import { pkg } from '../../../../settings.js';
+import PropTypes from '../../../../node_modules/prop-types/index.js';
+import { translateWithId } from '../../ConditionBuilderContext/DataConfigs.js';
+
+var blockClass = "".concat(pkg.prefix, "--condition-builder");
+var ConditionBuilderItemDate = function ConditionBuilderItemDate(_ref) {
+  var conditionState = _ref.conditionState,
+    onChange = _ref.onChange;
+  var DatePickerInputRef = useRef();
+  var datePickerType = conditionState.operator == 'between' ? 'range' : 'single';
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__condition-builder-item-date ")
+  }, datePickerType == 'single' && /*#__PURE__*/React__default.createElement(DatePicker, {
+    ref: DatePickerInputRef,
+    dateFormat: "d/m/Y",
+    datePickerType: "single",
+    onClose: onChange,
+    value: conditionState.value
+  }, /*#__PURE__*/React__default.createElement(DatePickerInput, {
+    id: "datePicker",
+    placeholder: "dd/mm/yyyy",
+    labelText: conditionState.property
+  })), datePickerType == 'range' && /*#__PURE__*/React__default.createElement(DatePicker, {
+    ref: DatePickerInputRef,
+    dateFormat: "d/m/Y",
+    datePickerType: datePickerType,
+    onClose: onChange,
+    value: conditionState.value
+  }, /*#__PURE__*/React__default.createElement(DatePickerInput, {
+    id: "datePickerStart",
+    placeholder: "dd/mm/yyyy",
+    labelText: translateWithId('start')
+  }), /*#__PURE__*/React__default.createElement(DatePickerInput, {
+    id: "datePickerEnd",
+    placeholder: "dd/mm/yyyy",
+    labelText: translateWithId('end')
+  })));
+};
+ConditionBuilderItemDate.propTypes = {
+  /**
+   * current condition object
+   */
+  conditionState: PropTypes.object,
+  /**
+   * callback to update state oin date change
+   */
+  onChange: PropTypes.func
+};
+
+export { ConditionBuilderItemDate };

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.d.ts

@@ -0,0 +1,13 @@
+export function ConditionBuilderItemNumber({ conditionState, config, onChange, }: {
+    conditionState: any;
+    config: any;
+    onChange: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace ConditionBuilderItemNumber {
+    namespace propTypes {
+        let conditionState: PropTypes.Requireable<object>;
+        let config: PropTypes.Requireable<object>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from 'prop-types';

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js

@@ -0,0 +1,52 @@
+/**
+ * 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 { NumberInput } from '@carbon/react';
+import { pkg } from '../../../../settings.js';
+import PropTypes from '../../../../node_modules/prop-types/index.js';
+
+var blockClass = "".concat(pkg.prefix, "--condition-builder");
+var ConditionBuilderItemNumber = function ConditionBuilderItemNumber(_ref) {
+  var _conditionState$prope;
+  var conditionState = _ref.conditionState,
+    config = _ref.config,
+    onChange = _ref.onChange;
+  var onChangeHandler = function onChangeHandler(e, _ref2) {
+    var value = _ref2.value;
+    onChange(value + '');
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__condition-builder-item-number")
+  }, /*#__PURE__*/React__default.createElement(NumberInput, {
+    label: conditionState.property,
+    hideLabel: true,
+    id: (_conditionState$prope = conditionState.property) === null || _conditionState$prope === void 0 ? void 0 : _conditionState$prope.replace(/\s/g, ''),
+    value: conditionState.value ? conditionState.value.split(' ')[0] : conditionState.value,
+    min: config.min,
+    max: config.max,
+    step: config.step,
+    allowEmpty: true,
+    onChange: onChangeHandler
+  }));
+};
+ConditionBuilderItemNumber.propTypes = {
+  /**
+   * current condition object
+   */
+  conditionState: PropTypes.object,
+  /**
+   * current config object that this property is part of
+   */
+  config: PropTypes.object,
+  /**
+   * callback to update state oin date change
+   */
+  onChange: PropTypes.func
+};
+
+export { ConditionBuilderItemNumber };

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.d.ts

@@ -0,0 +1,13 @@
+export function ConditionBuilderItemOption({ conditionState, config, onChange, }: {
+    conditionState?: {} | undefined;
+    config?: {} | undefined;
+    onChange: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace ConditionBuilderItemOption {
+    namespace propTypes {
+        let conditionState: PropTypes.Requireable<object>;
+        let config: PropTypes.Requireable<object>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from 'prop-types';

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js

@@ -0,0 +1,162 @@
+/**
+ * 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, toConsumableArray as _toConsumableArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useContext, useState, useEffect } from 'react';
+import { Search, Button, SelectSkeleton } from '@carbon/react';
+import { CheckboxCheckedFilled, Checkbox, Checkmark } from '@carbon/react/icons';
+import PropTypes from '../../../../node_modules/prop-types/index.js';
+import { ConditionBuilderContext } from '../../ConditionBuilderContext/ConditionBuilderProvider.js';
+import { blockClass, translateWithId } from '../../ConditionBuilderContext/DataConfigs.js';
+
+var _CheckboxCheckedFille, _Checkbox, _SelectSkeleton;
+var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
+  var _ref$conditionState = _ref.conditionState,
+    conditionState = _ref$conditionState === void 0 ? {} : _ref$conditionState,
+    _ref$config = _ref.config,
+    config = _ref$config === void 0 ? {} : _ref$config,
+    onChange = _ref.onChange;
+  var multiSelectable = conditionState.operator === 'one-of';
+  var _useContext = useContext(ConditionBuilderContext),
+    popOverSearchThreshold = _useContext.popOverSearchThreshold,
+    getOptions = _useContext.getOptions;
+  var _useState = useState(config.options),
+    _useState2 = _slicedToArray(_useState, 2),
+    allOptions = _useState2[0],
+    setAllOptions = _useState2[1];
+  var _useState3 = useState(config.options),
+    _useState4 = _slicedToArray(_useState3, 2),
+    filteredItems = _useState4[0],
+    setFilteredItems = _useState4[1];
+  var selection = Array.isArray(conditionState.value) ? conditionState.value : conditionState.value !== undefined ? [conditionState.value] : [];
+  useEffect(function () {
+    if (!allOptions && getOptions) {
+      var fetchData = /*#__PURE__*/function () {
+        var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+          var response;
+          return _regeneratorRuntime().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return getOptions(conditionState);
+              case 2:
+                response = _context.sent;
+                if ((response === null || response === void 0 ? void 0 : response.length) > 0 && Object.keys(response[0]).includes('label') && Object.keys(response[0]).includes('id')) {
+                  setAllOptions(response);
+                  setFilteredItems(response);
+                }
+              case 4:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        return function fetchData() {
+          return _ref2.apply(this, arguments);
+        };
+      }();
+      fetchData(); // Call the async method
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var handleSelectAll = function handleSelectAll(e) {
+    if (e.currentTarget.dataset.selectedAll == 'false') {
+      onChange(undefined);
+    } else {
+      onChange(allOptions.map(function (op) {
+        return op.id;
+      }));
+    }
+  };
+  var onSearchChangeHandler = function onSearchChangeHandler(e) {
+    var value = e.target.value;
+    var _filteredItems = allOptions.filter(function (opt) {
+      return opt.label.toLowerCase().includes(value.toLowerCase());
+    });
+    setFilteredItems(_filteredItems);
+  };
+  var onClickHandler = function onClickHandler(e, option, isSelected) {
+    if (multiSelectable) {
+      if (isSelected) {
+        var items = selection.filter(function (v) {
+          return v !== option.id;
+        });
+        onChange(items.length > 0 ? items : undefined, e);
+      } else {
+        onChange([].concat(_toConsumableArray(selection), [option.id]), e);
+      }
+    } else {
+      onChange(option.id, e);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, allOptions && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__condition-builder-item-option")
+  }, (config.includeSearch || allOptions.length > popOverSearchThreshold) && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__condition-builder-item-option__search")
+  }, /*#__PURE__*/React__default.createElement(Search, {
+    size: "sm",
+    labelText: translateWithId('clear_search'),
+    closeButtonLabelText: translateWithId('clear_search'),
+    onChange: onSearchChangeHandler
+  })), multiSelectable && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__multiselectSelectionStatusContainer")
+  }, /*#__PURE__*/React__default.createElement("h4", null, /*#__PURE__*/React__default.createElement("label", null, selection.length, "/", allOptions.length, " Selected")), /*#__PURE__*/React__default.createElement(Button, {
+    kind: 'ghost',
+    size: 'sm',
+    "data-selected-all": "".concat(selection.length == 0 ? true : false),
+    onClick: handleSelectAll,
+    className: "".concat(blockClass, "__selectAll-button")
+  }, selection.length == 0 ? 'Select all' : 'Deselect all')), /*#__PURE__*/React__default.createElement("ul", {
+    "aria-label": conditionState.label ? conditionState.label : conditionState.property ? conditionState.property : translateWithId('property'),
+    role: "listbox",
+    "data-multi-select": multiSelectable
+  }, filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.map(function (option) {
+    var isSelected = selection.includes(option.id);
+    var Icon = option.icon;
+    return /*#__PURE__*/React__default.createElement("li", {
+      tabIndex: 0,
+      key: option.id,
+      role: "option",
+      "aria-selected": isSelected,
+      className: "".concat(blockClass, "__condition-builder-item-option__option"),
+      onKeyUp: function onKeyUp() {
+        return false;
+      },
+      onClick: function onClick(e) {
+        return onClickHandler(e, option, isSelected);
+      }
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(blockClass, "__condition-builder-item-option__option-content")
+    }, multiSelectable ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
+      className: "".concat(blockClass, "__option-check-box")
+    }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React__default.createElement(CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React__default.createElement(Checkbox, null))), /*#__PURE__*/React__default.createElement("span", {
+      className: "".concat(blockClass, "__condition-builder-item-option__option-label")
+    }, option.label), Icon && /*#__PURE__*/React__default.createElement("span", {
+      className: "".concat(blockClass, "__option-icon")
+    }, /*#__PURE__*/React__default.createElement(Icon, null))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
+      className: "".concat(blockClass, "__condition-builder-item-option__option-label")
+    }, Icon && /*#__PURE__*/React__default.createElement(Icon, null), option.label), isSelected && /*#__PURE__*/React__default.createElement(Checkmark, {
+      className: "".concat(blockClass, "__condition-builder-checkmark")
+    }))));
+  }))), !allOptions && (_SelectSkeleton || (_SelectSkeleton = /*#__PURE__*/React__default.createElement(SelectSkeleton, null))));
+};
+ConditionBuilderItemOption.propTypes = {
+  /**
+   * current condition object
+   */
+  conditionState: PropTypes.object,
+  /**
+   * current config object that this property is part of
+   */
+  config: PropTypes.object,
+  /**
+   * callback to update state oin date change
+   */
+  onChange: PropTypes.func
+};
+
+export { ConditionBuilderItemOption };

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.d.ts

@@ -0,0 +1,11 @@
+export function ConditionBuilderItemText({ conditionState, onChange }: {
+    conditionState: any;
+    onChange: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace ConditionBuilderItemText {
+    namespace propTypes {
+        let conditionState: PropTypes.Requireable<object>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from 'prop-types';

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.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 { TextInput } from '@carbon/react';
+import PropTypes from '../../../../node_modules/prop-types/index.js';
+import { blockClass } from '../../ConditionBuilderContext/DataConfigs.js';
+
+var ConditionBuilderItemText = function ConditionBuilderItemText(_ref) {
+  var _conditionState$value, _conditionState$prope;
+  var conditionState = _ref.conditionState,
+    _onChange = _ref.onChange;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__condition-builder-item-text")
+  }, /*#__PURE__*/React__default.createElement(TextInput, {
+    labelText: conditionState.property,
+    hideLabel: true,
+    value: (_conditionState$value = conditionState.value) !== null && _conditionState$value !== void 0 ? _conditionState$value : '',
+    id: (_conditionState$prope = conditionState.property) === null || _conditionState$prope === void 0 ? void 0 : _conditionState$prope.replace(/\s/g, ''),
+    onChange: function onChange(e) {
+      _onChange(e.target.value);
+    }
+  }));
+};
+ConditionBuilderItemText.propTypes = {
+  /**
+   * current condition object
+   */
+  conditionState: PropTypes.object,
+  /**
+   * callback to update state oin date change
+   */
+  onChange: PropTypes.func
+};
+
+export { ConditionBuilderItemText };

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.d.ts

@@ -0,0 +1,11 @@
+export function ConditionBuilderItemTime({ onChange, config }: {
+    onChange: any;
+    config: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace ConditionBuilderItemTime {
+    namespace propTypes {
+        let config: PropTypes.Requireable<object>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from 'prop-types';

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js

@@ -0,0 +1,82 @@
+/**
+ * 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 } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState, useEffect } from 'react';
+import { TimePicker, TimePickerSelect, SelectItem } from '@carbon/react';
+import PropTypes from '../../../../node_modules/prop-types/index.js';
+import { blockClass } from '../../ConditionBuilderContext/DataConfigs.js';
+
+var _SelectItem, _SelectItem2;
+var ConditionBuilderItemTime = function ConditionBuilderItemTime(_ref) {
+  var _config$timeZones, _config$timeZones2;
+  var onChange = _ref.onChange,
+    config = _ref.config;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    timeValue = _useState2[0],
+    setTimeValue = _useState2[1];
+  var _useState3 = useState('AM'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dayZoneValue = _useState4[0],
+    setDayZoneValue = _useState4[1];
+  var _useState5 = useState(config === null || config === void 0 || (_config$timeZones = config.timeZones) === null || _config$timeZones === void 0 ? void 0 : _config$timeZones[0]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    timeZoneValue = _useState6[0],
+    setTimeZoneValue = _useState6[1];
+  useEffect(function () {
+    var timeToUpdate = "".concat(timeValue !== null && timeValue !== void 0 ? timeValue : '', " ").concat(dayZoneValue !== null && dayZoneValue !== void 0 ? dayZoneValue : '', " ").concat(timeZoneValue !== null && timeZoneValue !== void 0 ? timeZoneValue : '');
+    onChange(timeValue ? timeToUpdate : undefined);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [timeValue, dayZoneValue, timeZoneValue]);
+  var setTimeZone = function setTimeZone(e) {
+    setTimeZoneValue(e.target.value);
+  };
+  var setDayZone = function setDayZone(e) {
+    setDayZoneValue(e.target.value);
+  };
+  var setTime = function setTime(e) {
+    setTimeValue(e.target.value);
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__condition-builder-item-time")
+  }, /*#__PURE__*/React__default.createElement(TimePicker, {
+    id: "time-picker",
+    labelText: "Select a time",
+    onChange: setTime
+  }, /*#__PURE__*/React__default.createElement(TimePickerSelect, {
+    id: "time-picker-day-zone",
+    onChange: setDayZone
+  }, _SelectItem || (_SelectItem = /*#__PURE__*/React__default.createElement(SelectItem, {
+    value: "AM",
+    text: "AM"
+  })), _SelectItem2 || (_SelectItem2 = /*#__PURE__*/React__default.createElement(SelectItem, {
+    value: "PM",
+    text: "PM"
+  }))), /*#__PURE__*/React__default.createElement(TimePickerSelect, {
+    id: "time-picker-select-2",
+    onChange: setTimeZone
+  }, config === null || config === void 0 || (_config$timeZones2 = config.timeZones) === null || _config$timeZones2 === void 0 ? void 0 : _config$timeZones2.map(function (timeZone, index) {
+    return /*#__PURE__*/React__default.createElement(SelectItem, {
+      key: index,
+      value: timeZone,
+      text: timeZone
+    });
+  }))));
+};
+ConditionBuilderItemTime.propTypes = {
+  /**
+   * current config object that this property is part of
+   */
+  config: PropTypes.object,
+  /**
+   * callback to update state oin date change
+   */
+  onChange: PropTypes.func
+};
+
+export { ConditionBuilderItemTime };

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

@@ -0,0 +1,15 @@
+export default ConditionConnector;
+declare function ConditionConnector({ operator, className, onChange, ...rest }: {
+    [x: string]: any;
+    operator: any;
+    className: any;
+    onChange: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace ConditionConnector {
+    namespace propTypes {
+        let className: PropTypes.Requireable<string>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let operator: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from 'prop-types';

package/es/components/ConditionBuilder/ConditionConnector/ConditionConnector.js

@@ -0,0 +1,85 @@
+/**
+ * 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 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useCallback } from 'react';
+import { ConditionBuilderItem } from '../ConditionBuilderItem/ConditionBuilderItem.js';
+import { ConditionBuilderItemOption } from '../ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js';
+import { translateWithId, connectorConfig } from '../ConditionBuilderContext/DataConfigs.js';
+import { pkg } from '../../../settings.js';
+import PropTypes from '../../../node_modules/prop-types/index.js';
+import { focusThisField } from '../utils/util.js';
+
+var _excluded = ["operator", "className", "onChange"];
+var blockClass = "".concat(pkg.prefix, "--condition-builder");
+function ConditionConnector(_ref) {
+  var operator = _ref.operator,
+    className = _ref.className,
+    onChange = _ref.onChange,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var handleConnectorHover = useCallback(function (parentGroup, isHover) {
+    if (isHover) {
+      parentGroup.classList.add('hoveredConnector');
+    } else {
+      parentGroup.classList.remove('hoveredConnector');
+    }
+  }, []);
+  var activeConnectorHandler = function activeConnectorHandler(e) {
+    var parentGroup = e.currentTarget.closest('.eachGroup');
+    handleConnectorHover(parentGroup, true);
+  };
+  var inActiveConnectorHandler = function inActiveConnectorHandler(e) {
+    var parentGroup = e.currentTarget.closest('.eachGroup');
+    handleConnectorHover(parentGroup, false);
+  };
+  var onChangeHandler = function onChangeHandler(op, e) {
+    onChange(op);
+    focusThisField(e);
+  };
+  return (
+    /*#__PURE__*/
+    // <div className={className} {...rest}>
+    React__default.createElement(ConditionBuilderItem, _extends({
+      label: operator,
+      title: translateWithId('connector'),
+      "data-name": "connectorField",
+      onMouseEnter: activeConnectorHandler,
+      onMouseLeave: inActiveConnectorHandler,
+      onFocus: activeConnectorHandler,
+      onBlur: inActiveConnectorHandler
+    }, rest, {
+      popOverClassName: className,
+      className: "".concat(blockClass, "__connector-button ")
+    }), /*#__PURE__*/React__default.createElement(ConditionBuilderItemOption, {
+      config: {
+        options: connectorConfig
+      },
+      conditionState: {
+        value: operator,
+        label: translateWithId('connector')
+      },
+      onChange: onChangeHandler
+    }))
+    // </div>
+  );
+}
+ConditionConnector.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * callback to update the current condition of the state tree
+   */
+  onChange: PropTypes.func,
+  /**
+   * string that defines the connector operator (and/or)
+   */
+  operator: PropTypes.string
+};
+
+export { ConditionConnector as default };

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

@@ -0,0 +1,24 @@
+export default ConditionGroupBuilder;
+/**
+ *
+ *  state - this is the current group that is being rendered . This can be a inner group or outer group
+ * All the inner components of group are called from here.
+ * @returns
+ */
+declare function ConditionGroupBuilder({ state, aria, onRemove, onChange, conditionBuilderRef, }: {
+    state: any;
+    aria: any;
+    onRemove: any;
+    onChange: any;
+    conditionBuilderRef: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace ConditionGroupBuilder {
+    namespace propTypes {
+        let aria: PropTypes.Requireable<object>;
+        let conditionBuilderRef: 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';