@elliemae/ds-query-builder 1.60.0 → 2.0.0-alpha.12

package/cjs/DSQueryBuilder.js

@@ -2,144 +2,53 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
 var reactDesc = require('react-desc');
-var components_QueryBuilderImpl = require('./components/QueryBuilderImpl.js');
-var components_helpers_types = require('./components/helpers/types.js');
-var components_helpers_selectors = require('./components/helpers/selectors.js');
-var components_format_format = require('./components/format/format.js');
+var QueryBuilderImpl = require('./components/QueryBuilderImpl.js');
+var types = require('./components/helpers/types.js');
+var selectors = require('./components/helpers/selectors.js');
+var format = require('./components/format/format.js');
 var propTypes = require('./propTypes.js');
-require('@babel/runtime/helpers/extends');
-require('@babel/runtime/helpers/objectWithoutProperties');
-require('@babel/runtime/helpers/defineProperty');
-require('@babel/runtime/helpers/classCallCheck');
-require('@babel/runtime/helpers/createClass');
-require('@babel/runtime/helpers/inherits');
-require('@babel/runtime/helpers/possibleConstructorReturn');
-require('@babel/runtime/helpers/getPrototypeOf');
-require('./components/Nestable/Nestable.js');
-require('@babel/runtime/helpers/assertThisInitialized');
-require('prop-types');
-require('classnames');
-require('@elliemae/ds-shared/utils');
-require('@elliemae/ds-utilities');
-require('./components/Nestable/actions/tryIncreaseDepth.js');
-require('./components/Nestable/actions/tryDecreaseDepth.js');
-require('./components/Nestable/actions/moveItem.js');
-require('react-addons-update');
-require('./components/Nestable/actions/paths.js');
-require('@babel/runtime/helpers/toConsumableArray');
-require('./components/Nestable/actions/events.js');
-require('./components/Nestable/actions/getItemOptions.js');
-require('./components/Nestable/NestableItem.js');
-require('./components/QueryBuilderContext/QueryBuilderContext.js');
-require('./components/helpers/store.js');
-require('./components/helpers/actions.js');
-require('./components/AndOrController/AndOrController.js');
-require('@elliemae/ds-classnames');
-require('@elliemae/ds-tooltip');
-require('@elliemae/ds-popper');
-require('@elliemae/ds-form');
-require('@elliemae/ds-button');
-require('@elliemae/ds-icons');
-require('@elliemae/ds-icon');
-require('./components/helpers/constants.js');
-require('./components/ToolBarAnimation/ToolBarAnimation.js');
-require('@elliemae/ds-shared/Animations/GrowRight');
-require('./components/DragContainerController/DragContainerController.js');
-require('./components/QueryBuilderItem/QueryBuilderItem.js');
-require('./components/QueryBuilderRow/QueryBuilderRow.js');
-require('./components/helpers/dependencies.js');
-require('lodash');
-require('@elliemae/ds-utilities/operators');
-require('./components/ConditionController/ConditionController.js');
-require('./components/DragControllerRow/DragControllerRow.js');
-require('./components/DisplayOutput/DisplayOutput.js');
-require('@babel/runtime/helpers/typeof');
-require('@elliemae/ds-grid');
-require('@elliemae/ds-accordion');
-require('./components/format/sqlFormat.js');
-require('./components/format/xmlFormat.js');
-require('./components/format/sqlSafeFormat.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-var DSQueryBuilder = function DSQueryBuilder(_ref) {
-  var _ref$containerProps = _ref.containerProps,
-      containerProps = _ref$containerProps === void 0 ? {} : _ref$containerProps,
-      _ref$addFilterMethod = _ref.addFilterMethod,
-      addFilterMethod = _ref$addFilterMethod === void 0 ? components_helpers_types.QB_ADD_FILTER_METHOD_TYPES.IN_PLACE : _ref$addFilterMethod,
-      _ref$groupFilterMetho = _ref.groupFilterMethod,
-      groupFilterMethod = _ref$groupFilterMetho === void 0 ? components_helpers_types.QB_GROUP_FILTER_METHOD_TYPES.IN_PLACE : _ref$groupFilterMetho,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {
-    return null;
-  } : _ref$onChange,
-      _ref$fields = _ref.fields,
-      fields = _ref$fields === void 0 ? [] : _ref$fields,
-      _ref$fieldsSharedActi = _ref.fieldsSharedActions,
-      fieldsSharedActions = _ref$fieldsSharedActi === void 0 ? {
-    onFieldChange: [],
-    onOperatorChange: [],
-    onValueChange: []
-  } : _ref$fieldsSharedActi,
-      _ref$format = _ref.format,
-      format = _ref$format === void 0 ? components_helpers_types.QB_EXPORT_FORMAT_TYPES.DEFAULT : _ref$format,
-      _ref$init = _ref.init,
-      init = _ref$init === void 0 ? null : _ref$init,
-      _ref$ruleContainerCla = _ref.ruleContainerClassName,
-      ruleContainerClassName = _ref$ruleContainerCla === void 0 ? '' : _ref$ruleContainerCla,
-      _ref$handleDrop = _ref.handleDrop,
-      handleDrop = _ref$handleDrop === void 0 ? function () {
-    return null;
-  } : _ref$handleDrop,
-      _ref$handleDropFilter = _ref.handleDropFilter,
-      handleDropFilter = _ref$handleDropFilter === void 0 ? function () {
-    return null;
-  } : _ref$handleDropFilter,
-      _ref$handleDropGroup = _ref.handleDropGroup,
-      handleDropGroup = _ref$handleDropGroup === void 0 ? function () {
-    return null;
-  } : _ref$handleDropGroup,
-      _ref$handleFieldChang = _ref.handleFieldChange,
-      handleFieldChange = _ref$handleFieldChang === void 0 ? function () {
-    return null;
-  } : _ref$handleFieldChang,
-      _ref$handleRuleContai = _ref.handleRuleContainerOperator,
-      handleRuleContainerOperator = _ref$handleRuleContai === void 0 ? function () {
-    return null;
-  } : _ref$handleRuleContai,
-      _ref$handleRuleContai2 = _ref.handleRuleContainerUnGroup,
-      handleRuleContainerUnGroup = _ref$handleRuleContai2 === void 0 ? function () {
-    return null;
-  } : _ref$handleRuleContai2,
-      _ref$onAddFilter = _ref.onAddFilter,
-      onAddFilter = _ref$onAddFilter === void 0 ? function () {
-    return null;
-  } : _ref$onAddFilter,
-      _ref$onAddRuleContain = _ref.onAddRuleContainer,
-      onAddRuleContainer = _ref$onAddRuleContain === void 0 ? function () {
-    return null;
-  } : _ref$onAddRuleContain,
-      _ref$onRemoveFilter = _ref.onRemoveFilter,
-      onRemoveFilter = _ref$onRemoveFilter === void 0 ? function () {
-    return null;
-  } : _ref$onRemoveFilter,
-      displayFixedOutput = _ref.displayFixedOutput,
-      _ref$displayOutput = _ref.displayOutput,
-      displayOutput = _ref$displayOutput === void 0 ? false : _ref$displayOutput,
-      _ref$displayOutputLab = _ref.displayOutputLabel,
-      displayOutputLabel = _ref$displayOutputLab === void 0 ? {
-    show: 'Show output',
-    hide: 'Hide output'
-  } : _ref$displayOutputLab,
-      _ref$singleRow = _ref.singleRow,
-      singleRow = _ref$singleRow === void 0 ? false : _ref$singleRow,
-      _ref$toolTipZIndex = _ref.toolTipZIndex,
-      toolTipZIndex = _ref$toolTipZIndex === void 0 ? 110 : _ref$toolTipZIndex;
-  return /*#__PURE__*/React__default['default'].createElement(components_QueryBuilderImpl, {
+const DSQueryBuilder = _ref => {
+  let {
+    containerProps = {},
+    addFilterMethod = types.QB_ADD_FILTER_METHOD_TYPES.IN_PLACE,
+    groupFilterMethod = types.QB_GROUP_FILTER_METHOD_TYPES.IN_PLACE,
+    onChange = () => null,
+    fields = [],
+    fieldsSharedActions = {
+      onFieldChange: [],
+      onOperatorChange: [],
+      onValueChange: []
+    },
+    format = types.QB_EXPORT_FORMAT_TYPES.DEFAULT,
+    init = null,
+    ruleContainerClassName = '',
+    handleDrop = () => null,
+    handleDropFilter = () => null,
+    handleDropGroup = () => null,
+    handleFieldChange = () => null,
+    handleRuleContainerOperator = () => null,
+    handleRuleContainerUnGroup = () => null,
+    onAddFilter = () => null,
+    onAddRuleContainer = () => null,
+    onRemoveFilter = () => null,
+    displayFixedOutput,
+    displayOutput = false,
+    displayOutputLabel = {
+      show: 'Show output',
+      hide: 'Hide output'
+    },
+    singleRow = false,
+    toolTipZIndex = 110
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](QueryBuilderImpl, {
     addFilterMethod: addFilterMethod,
     containerProps: containerProps,
     displayFixedOutput: displayFixedOutput,
@@ -166,26 +75,24 @@ var DSQueryBuilder = function DSQueryBuilder(_ref) {
   });
 };
 
-DSQueryBuilder.propTypes = propTypes.props;
-var DSQueryBuilderWithSchema = reactDesc.describe(DSQueryBuilder);
+const DSQueryBuilderWithSchema = reactDesc.describe(DSQueryBuilder);
 DSQueryBuilderWithSchema.propTypes = propTypes.props;
 
-exports.QB_ADD_FILTER_METHOD_TYPES = components_helpers_types.QB_ADD_FILTER_METHOD_TYPES;
-exports.QB_DRAG_LOCATIONS = components_helpers_types.QB_DRAG_LOCATIONS;
-exports.QB_DRAG_TYPES = components_helpers_types.QB_DRAG_TYPES;
-exports.QB_EXPORT_FORMAT_TYPES = components_helpers_types.QB_EXPORT_FORMAT_TYPES;
-exports.QB_FIELD_SHARED_ACTIONS = components_helpers_types.QB_FIELD_SHARED_ACTIONS;
-exports.QB_FIELD_TYPES = components_helpers_types.QB_FIELD_TYPES;
-exports.QB_GROUP_CONDITION_TYPES = components_helpers_types.QB_GROUP_CONDITION_TYPES;
-exports.QB_GROUP_FILTER_METHOD_TYPES = components_helpers_types.QB_GROUP_FILTER_METHOD_TYPES;
-exports.QB_OPERATOR_TYPES = components_helpers_types.QB_OPERATOR_TYPES;
-exports.QB_DEFAULT_VALUES_OPTIONS = components_helpers_selectors.QB_DEFAULT_VALUES_OPTIONS;
-exports.QB_FIELD_OPTIONS = components_helpers_selectors.QB_FIELD_OPTIONS;
-exports.QB_LOAN_VALUES_OPTIONS = components_helpers_selectors.QB_LOAN_VALUES_OPTIONS;
-exports.QB_OPERATOR_OPTIONS = components_helpers_selectors.QB_OPERATOR_OPTIONS;
-exports.QB_SUBJECT_VALUES_OPTIONS = components_helpers_selectors.QB_SUBJECT_VALUES_OPTIONS;
-exports.QueryBuilderFormat = components_format_format;
+exports.QB_ADD_FILTER_METHOD_TYPES = types.QB_ADD_FILTER_METHOD_TYPES;
+exports.QB_DRAG_LOCATIONS = types.QB_DRAG_LOCATIONS;
+exports.QB_DRAG_TYPES = types.QB_DRAG_TYPES;
+exports.QB_EXPORT_FORMAT_TYPES = types.QB_EXPORT_FORMAT_TYPES;
+exports.QB_FIELD_SHARED_ACTIONS = types.QB_FIELD_SHARED_ACTIONS;
+exports.QB_FIELD_TYPES = types.QB_FIELD_TYPES;
+exports.QB_GROUP_CONDITION_TYPES = types.QB_GROUP_CONDITION_TYPES;
+exports.QB_GROUP_FILTER_METHOD_TYPES = types.QB_GROUP_FILTER_METHOD_TYPES;
+exports.QB_OPERATOR_TYPES = types.QB_OPERATOR_TYPES;
+exports.QB_DEFAULT_VALUES_OPTIONS = selectors.QB_DEFAULT_VALUES_OPTIONS;
+exports.QB_FIELD_OPTIONS = selectors.QB_FIELD_OPTIONS;
+exports.QB_LOAN_VALUES_OPTIONS = selectors.QB_LOAN_VALUES_OPTIONS;
+exports.QB_OPERATOR_OPTIONS = selectors.QB_OPERATOR_OPTIONS;
+exports.QB_SUBJECT_VALUES_OPTIONS = selectors.QB_SUBJECT_VALUES_OPTIONS;
+exports.QueryBuilderFormat = format;
 exports.DSQueryBuilder = DSQueryBuilder;
 exports.DSQueryBuilderWithSchema = DSQueryBuilderWithSchema;
-exports['default'] = DSQueryBuilder;
-//# sourceMappingURL=DSQueryBuilder.js.map
+exports["default"] = DSQueryBuilder;

package/cjs/components/AndOrController/AndOrController.js

@@ -1,10 +1,6 @@
 'use strict';
 
-var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
-var _createClass = require('@babel/runtime/helpers/createClass');
-var _inherits = require('@babel/runtime/helpers/inherits');
-var _possibleConstructorReturn = require('@babel/runtime/helpers/possibleConstructorReturn');
-var _getPrototypeOf = require('@babel/runtime/helpers/getPrototypeOf');
+var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var dsClassnames = require('@elliemae/ds-classnames');
 var DSTooltip = require('@elliemae/ds-tooltip');
@@ -13,33 +9,26 @@ var dsForm = require('@elliemae/ds-form');
 var DSButton = require('@elliemae/ds-button');
 var dsIcons = require('@elliemae/ds-icons');
 var dsIcon = require('@elliemae/ds-icon');
-var components_helpers_constants = require('../helpers/constants.js');
-var components_ToolBarAnimation_ToolBarAnimation = require('../ToolBarAnimation/ToolBarAnimation.js');
-var components_DragContainerController_DragContainerController = require('../DragContainerController/DragContainerController.js');
-require('@babel/runtime/helpers/extends');
-require('@elliemae/ds-shared/Animations/GrowRight');
+var constants = require('../helpers/constants.js');
+var ToolBarAnimation = require('../ToolBarAnimation/ToolBarAnimation.js');
+var DragContainerController = require('../DragContainerController/DragContainerController.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _classCallCheck__default = /*#__PURE__*/_interopDefaultLegacy(_classCallCheck);
-var _createClass__default = /*#__PURE__*/_interopDefaultLegacy(_createClass);
-var _inherits__default = /*#__PURE__*/_interopDefaultLegacy(_inherits);
-var _possibleConstructorReturn__default = /*#__PURE__*/_interopDefaultLegacy(_possibleConstructorReturn);
-var _getPrototypeOf__default = /*#__PURE__*/_interopDefaultLegacy(_getPrototypeOf);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var DSTooltip__default = /*#__PURE__*/_interopDefaultLegacy(DSTooltip);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var _convertPropToCssClas = dsClassnames.convertPropToCssClassName('query-builder-and-or-controller'),
-    cssClassName = _convertPropToCssClas.cssClassName,
-    classNameBlock = _convertPropToCssClas.classNameBlock,
-    classNameElement = _convertPropToCssClas.classNameElement,
-    mainModifier = _convertPropToCssClas.mainModifier,
-    classNameBlockModifier = _convertPropToCssClas.classNameBlockModifier;
+var _QueryAdd, _ParenthesisRemove, _div;
+const {
+  cssClassName,
+  classNameBlock,
+  classNameElement,
+  mainModifier,
+  classNameBlockModifier
+} = dsClassnames.convertPropToCssClassName('query-builder-and-or-controller');
 /**
  * condition-display-step: required to avoid the cache of the trigger
  *
@@ -47,113 +36,99 @@ var _convertPropToCssClas = dsClassnames.convertPropToCssClassName('query-builde
  * @param isOpen
  */
 
+class AndOrController extends React.Component {
+  constructor(props) {
+    super(props);
 
-var AndOrController = /*#__PURE__*/function (_Component) {
-  _inherits__default['default'](AndOrController, _Component);
-
-  var _super = _createSuper(AndOrController);
-
-  function AndOrController(props) {
-    var _this;
-
-    _classCallCheck__default['default'](this, AndOrController);
-
-    _this = _super.call(this, props);
-
-    _this.handleMouseEnterRow = function (e) {
-      _this.handleTooltipRow(true); // this.handleMouseMove(e)
-
+    this.handleMouseEnterRow = e => {
+      this.handleTooltipRow(true); // this.handleMouseMove(e)
     };
 
-    _this.handleMouseMove = function (e) {
-      if (!_this.contenerRef.current) return;
-      var mouse = e.clientY;
-
-      var _this$contenerRef$cur = _this.contenerRef.current.getBoundingClientRect(),
-          height = _this$contenerRef$cur.height;
-
-      var delta = height / 2;
-
-      var topDiff = _this.myRef.current.getBoundingClientRect().top;
-
-      var refHeight = _this.myRef.current.getBoundingClientRect().height;
-
-      _this.setState({
+    this.handleMouseMove = e => {
+      if (!this.contenerRef.current) return;
+      const mouse = e.clientY;
+      const {
+        height
+      } = this.contenerRef.current.getBoundingClientRect();
+      const delta = height / 2;
+      const topDiff = this.myRef.current.getBoundingClientRect().top;
+      const refHeight = this.myRef.current.getBoundingClientRect().height;
+      this.setState({
         top: mouse - topDiff - refHeight / 2 - delta
       });
     };
 
-    _this.handleMouseLeaveRow = function () {
-      _this.handleTooltipRow(false);
+    this.handleMouseLeaveRow = () => {
+      this.handleTooltipRow(false);
     };
 
-    _this.handleTooltipRow = function (isOpen) {
-      _this.setState({
-        isOpen: isOpen
+    this.handleTooltipRow = isOpen => {
+      this.setState({
+        isOpen
       });
-
-      var handleTooltipGroup = _this.props.handleTooltipGroup;
+      const {
+        handleTooltipGroup
+      } = this.props;
       handleTooltipGroup(isOpen);
     };
 
-    _this.contenerRef = /*#__PURE__*/React__default['default'].createRef();
-    _this.myRef = /*#__PURE__*/React__default['default'].createRef();
-    _this.state = {
+    this.contenerRef = /*#__PURE__*/React__default["default"].createRef();
+    this.myRef = /*#__PURE__*/React__default["default"].createRef();
+    this.state = {
       isOpen: false,
       top: 0,
       right: -2
     };
-    return _this;
   }
 
-  _createClass__default['default'](AndOrController, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          handleRuleContainerOperator = _this$props.handleRuleContainerOperator,
-          handleRuleContainerUnGroup = _this$props.handleRuleContainerUnGroup,
-          labelOn = _this$props.labelOn,
-          labelOff = _this$props.labelOff,
-          condition = _this$props.condition,
-          showDragController = _this$props.showDragController,
-          allowUnGroup = _this$props.allowUnGroup,
-          buttonActionSize = _this$props.buttonActionSize,
-          buttonActionType = _this$props.buttonActionType,
-          toogleActionSize = _this$props.toogleActionSize,
-          onAddFilter = _this$props.onAddFilter,
-          multipleSize = _this$props.multipleSize,
-          delayClose = _this$props.delayClose,
-          delayOpen = _this$props.delayOpen,
-          step = _this$props.step,
-          toolBarAnimationDuration = _this$props.toolBarAnimationDuration,
-          toolBarInteractionType = _this$props.toolBarInteractionType,
-          toolBarPosition = _this$props.toolBarPosition,
-          isMain = _this$props.isMain,
-          toolTipZIndex = _this$props.toolTipZIndex;
-      var _this$state = this.state,
-          isOpen = _this$state.isOpen,
-          top = _this$state.top,
-          right = _this$state.right;
-      return /*#__PURE__*/React__default['default'].createElement("div", {
-        ref: this.myRef,
-        className: "".concat(cssClassName, " ").concat(mainModifier(condition ? 'active' : 'default'), " step-").concat(step, "  ").concat(isMain ? 'is-main-group-join' : '') // onMouseEnter={this.handleMouseEnterRow}
-        ,
-        onMouseLeave: this.handleMouseLeaveRow // onMouseMove={this.handleMouseMove}
-
-      }, /*#__PURE__*/React__default['default'].createElement("div", {
+  render() {
+    const {
+      handleRuleContainerOperator,
+      handleRuleContainerUnGroup,
+      labelOn,
+      labelOff,
+      condition,
+      showDragController,
+      allowUnGroup,
+      buttonActionSize,
+      buttonActionType,
+      toogleActionSize,
+      onAddFilter,
+      multipleSize,
+      delayClose,
+      delayOpen,
+      step,
+      toolBarAnimationDuration,
+      toolBarInteractionType,
+      toolBarPosition,
+      isMain,
+      toolTipZIndex
+    } = this.props;
+    const {
+      isOpen,
+      top,
+      right
+    } = this.state;
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: this.myRef,
+      className: "".concat(cssClassName, " ").concat(mainModifier(condition ? 'active' : 'default'), " step-").concat(step, "  ").concat(isMain ? 'is-main-group-join' : '') // onMouseEnter={this.handleMouseEnterRow}
+      ,
+      onMouseLeave: this.handleMouseLeaveRow // onMouseMove={this.handleMouseMove}
+      ,
+      children: /*#__PURE__*/_jsx__default["default"]("div", {
         className: "".concat(classNameBlock('content'), " step-").concat(step)
-      }, /*#__PURE__*/React__default['default'].createElement(DSTooltip__default['default'], {
+      }, void 0, /*#__PURE__*/_jsx__default["default"](DSTooltip__default["default"], {
         delayClose: delayClose,
         delayOpen: delayOpen,
         interactionType: toolBarInteractionType,
         isOpen: isOpen,
         onOpen: this.handleTooltipRow,
         placement: toolBarPosition,
-        springAnimationComponent: /*#__PURE__*/React__default['default'].createElement(components_ToolBarAnimation_ToolBarAnimation.ToolBarAnimation, {
+        springAnimationComponent: /*#__PURE__*/_jsx__default["default"](ToolBarAnimation.ToolBarAnimation, {
           duration: toolBarAnimationDuration
         }),
         step: step,
-        title: /*#__PURE__*/React__default['default'].createElement("div", {
+        title: /*#__PURE__*/jsxRuntime.jsxs("div", {
           ref: this.contenerRef,
           className: classNameBlock('actions'),
           style: {
@@ -161,79 +136,71 @@ var AndOrController = /*#__PURE__*/function (_Component) {
             position: 'absolute',
             top: "".concat(top, "px"),
             right: "".concat(right, "px")
-          }
-        }, /*#__PURE__*/React__default['default'].createElement(DSButton__default['default'], {
-          buttonType: buttonActionType,
-          className: classNameElement('add-rule'),
-          icon: /*#__PURE__*/React__default['default'].createElement(dsIcons.QueryAdd, null),
-          onClick: onAddFilter,
-          size: buttonActionSize,
-          containerProps: {
-            'data-testid': 'query-add-button'
-          }
-        }), allowUnGroup && /*#__PURE__*/React__default['default'].createElement(DSButton__default['default'], {
-          buttonType: "text",
-          className: classNameElement('ungroup'),
-          icon: /*#__PURE__*/React__default['default'].createElement(dsIcons.ParenthesisRemove, null),
-          onClick: handleRuleContainerUnGroup,
-          size: buttonActionSize,
-          containerProps: {
-            'data-testid': 'parenthesis-remove-button'
-          }
-        }), /*#__PURE__*/React__default['default'].createElement(dsForm.DSToggle, {
-          checked: condition,
-          className: classNameElement('and-or-toggle'),
-          labelOff: labelOff,
-          labelOn: labelOn,
-          onChange: function onChange(e) {
-            return handleRuleContainerOperator(e.target.checked);
           },
-          size: toogleActionSize,
-          containerProps: {
-            'data-testid': 'and-or-toggle-button'
-          }
-        })),
+          children: [/*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+            buttonType: buttonActionType,
+            className: classNameElement('add-rule'),
+            icon: _QueryAdd || (_QueryAdd = /*#__PURE__*/_jsx__default["default"](dsIcons.QueryAdd, {})),
+            onClick: onAddFilter,
+            size: buttonActionSize,
+            containerProps: {
+              'data-testid': 'query-add-button'
+            }
+          }), allowUnGroup && /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+            buttonType: "text",
+            className: classNameElement('ungroup'),
+            icon: _ParenthesisRemove || (_ParenthesisRemove = /*#__PURE__*/_jsx__default["default"](dsIcons.ParenthesisRemove, {})),
+            onClick: handleRuleContainerUnGroup,
+            size: buttonActionSize,
+            containerProps: {
+              'data-testid': 'parenthesis-remove-button'
+            }
+          }), /*#__PURE__*/_jsx__default["default"](dsForm.DSToggle, {
+            checked: condition,
+            className: classNameElement('and-or-toggle'),
+            labelOff: labelOff,
+            labelOn: labelOn,
+            onChange: e => handleRuleContainerOperator(e.target.checked),
+            size: toogleActionSize,
+            containerProps: {
+              'data-testid': 'and-or-toggle-button'
+            }
+          })]
+        }),
         tooltipType: DSTooltip.TooltipType.TOOLBAR,
-        triggerComponent: /*#__PURE__*/React__default['default'].createElement("div", {
+        triggerComponent: /*#__PURE__*/_jsx__default["default"]("div", {
           className: "".concat(classNameBlock('trigger-controller'), " ").concat(showDragController ? classNameBlockModifier('draggable', 'trigger-controller') : '', " step-").concat(step)
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
+        }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
           className: classNameElement('condition-display')
-        }, /*#__PURE__*/React__default['default'].createElement("span", {
+        }, void 0, /*#__PURE__*/_jsx__default["default"]("span", {
           className: classNameElement('condition-display-label')
-        }, condition ? labelOn : labelOff), /*#__PURE__*/React__default['default'].createElement("span", {
+        }, void 0, condition ? labelOn : labelOff), /*#__PURE__*/_jsx__default["default"]("span", {
           className: classNameElement('condition-display-step')
-        }, step), /*#__PURE__*/React__default['default'].createElement("div", {
+        }, void 0, step), _div || (_div = /*#__PURE__*/_jsx__default["default"]("div", {
           className: "separator"
-        }), /*#__PURE__*/React__default['default'].createElement(dsIcons.MoreOptionsVert, {
+        })), /*#__PURE__*/_jsx__default["default"](dsIcons.MoreOptionsVert, {
           color: dsIcon.DSIconColors.NEUTRAL,
           onClick: this.handleMouseEnterRow,
           size: dsIcon.DSIconSizes.S,
           containerProps: {
             'data-testid': 'and-or-more-options-button'
           }
-        })), showDragController && /*#__PURE__*/React__default['default'].createElement(components_DragContainerController_DragContainerController, {
+        })), showDragController && /*#__PURE__*/_jsx__default["default"](DragContainerController, {
           multipleSize: multipleSize,
           onClick: this.handleMouseEnterRow
         })),
         zIndex: toolTipZIndex
-      })));
-    }
-  }]);
+      }))
+    });
+  }
 
-  return AndOrController;
-}(React.Component);
+}
 
 AndOrController.defaultProps = {
   isMain: false,
-  handleRuleContainerOperator: function handleRuleContainerOperator() {
-    return null;
-  },
-  handleRuleContainerUnGroup: function handleRuleContainerUnGroup() {
-    return null;
-  },
-  handleTooltipGroup: function handleTooltipGroup() {
-    return null;
-  },
+  handleRuleContainerOperator: () => null,
+  handleRuleContainerUnGroup: () => null,
+  handleTooltipGroup: () => null,
   labelOn: 'AND',
   labelOff: 'OR',
   condition: true,
@@ -242,17 +209,14 @@ AndOrController.defaultProps = {
   buttonActionSize: dsIcon.DSIconSizes.M,
   buttonActionType: 'text',
   toogleActionSize: dsIcon.DSIconSizes.S,
-  onAddFilter: function onAddFilter() {
-    return null;
-  },
+  onAddFilter: () => null,
   multipleSize: false,
-  delayClose: components_helpers_constants.DELAY_CLOSE,
-  delayOpen: components_helpers_constants.DELAY_OPEN,
+  delayClose: constants.DELAY_CLOSE,
+  delayOpen: constants.DELAY_OPEN,
   step: null,
-  toolBarAnimationDuration: components_helpers_constants.TOOLBAR_ANIMATION_DURATION,
+  toolBarAnimationDuration: constants.TOOLBAR_ANIMATION_DURATION,
   toolBarInteractionType: dsPopper.PopperInteractions.CLICK,
   toolBarPosition: dsPopper.PopperPositions.LEFT
 };
 
 module.exports = AndOrController;
-//# sourceMappingURL=AndOrController.js.map