@elliemae/ds-query-builder 2.2.0-alpha.4 → 3.0.0-next.2

package/cjs/DSQueryBuilder.js

@@ -1,118 +1,98 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+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');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+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,
+    displayOutput: displayOutput,
+    displayOutputLabel: displayOutputLabel,
+    fields: fields,
+    fieldsSharedActions: fieldsSharedActions,
+    format: format,
+    groupFilterMethod: groupFilterMethod,
+    handleDrop: handleDrop,
+    handleDropFilter: handleDropFilter,
+    handleDropGroup: handleDropGroup,
+    handleFieldChange: handleFieldChange,
+    handleRuleContainerOperator: handleRuleContainerOperator,
+    handleRuleContainerUnGroup: handleRuleContainerUnGroup,
+    init: init,
+    onAddFilter: onAddFilter,
+    onAddRuleContainer: onAddRuleContainer,
+    onChange: onChange,
+    onRemoveFilter: onRemoveFilter,
+    ruleContainerClassName: ruleContainerClassName,
+    singleRow: singleRow,
+    toolTipZIndex: toolTipZIndex
+  });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var DSQueryBuilder_exports = {};
-__export(DSQueryBuilder_exports, {
-  DSQueryBuilder: () => DSQueryBuilder,
-  DSQueryBuilderWithSchema: () => DSQueryBuilderWithSchema,
-  QB_ADD_FILTER_METHOD_TYPES: () => import_types.QB_ADD_FILTER_METHOD_TYPES,
-  QB_DEFAULT_VALUES_OPTIONS: () => import_selectors.QB_DEFAULT_VALUES_OPTIONS,
-  QB_DRAG_LOCATIONS: () => import_types.QB_DRAG_LOCATIONS,
-  QB_DRAG_TYPES: () => import_types.QB_DRAG_TYPES,
-  QB_EXPORT_FORMAT_TYPES: () => import_types.QB_EXPORT_FORMAT_TYPES,
-  QB_FIELD_OPTIONS: () => import_selectors.QB_FIELD_OPTIONS,
-  QB_FIELD_SHARED_ACTIONS: () => import_types.QB_FIELD_SHARED_ACTIONS,
-  QB_FIELD_TYPES: () => import_types.QB_FIELD_TYPES,
-  QB_GROUP_CONDITION_TYPES: () => import_types.QB_GROUP_CONDITION_TYPES,
-  QB_GROUP_FILTER_METHOD_TYPES: () => import_types.QB_GROUP_FILTER_METHOD_TYPES,
-  QB_LOAN_VALUES_OPTIONS: () => import_selectors.QB_LOAN_VALUES_OPTIONS,
-  QB_OPERATOR_OPTIONS: () => import_selectors.QB_OPERATOR_OPTIONS,
-  QB_OPERATOR_TYPES: () => import_types.QB_OPERATOR_TYPES,
-  QB_SUBJECT_VALUES_OPTIONS: () => import_selectors.QB_SUBJECT_VALUES_OPTIONS,
-  QueryBuilderFormat: () => import_format.default,
-  default: () => DSQueryBuilder_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_react_desc = require("react-desc");
-var import_QueryBuilderImpl = __toESM(require("./components/QueryBuilderImpl"));
-var import_types = require("./components/helpers/types");
-var import_selectors = require("./components/helpers/selectors");
-var import_format = __toESM(require("./components/format/format"));
-var import_propTypes = require("./propTypes");
-const DSQueryBuilder = ({
-  containerProps = {},
-  addFilterMethod = import_types.QB_ADD_FILTER_METHOD_TYPES.IN_PLACE,
-  groupFilterMethod = import_types.QB_GROUP_FILTER_METHOD_TYPES.IN_PLACE,
-  onChange = () => null,
-  fields = [],
-  fieldsSharedActions = {
-    onFieldChange: [],
-    onOperatorChange: [],
-    onValueChange: []
-  },
-  format = import_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
-}) => /* @__PURE__ */ import_react.default.createElement(import_QueryBuilderImpl.default, {
-  addFilterMethod,
-  containerProps,
-  displayFixedOutput,
-  displayOutput,
-  displayOutputLabel,
-  fields,
-  fieldsSharedActions,
-  format,
-  groupFilterMethod,
-  handleDrop,
-  handleDropFilter,
-  handleDropGroup,
-  handleFieldChange,
-  handleRuleContainerOperator,
-  handleRuleContainerUnGroup,
-  init,
-  onAddFilter,
-  onAddRuleContainer,
-  onChange,
-  onRemoveFilter,
-  ruleContainerClassName,
-  singleRow,
-  toolTipZIndex
-});
-DSQueryBuilder.propTypes = import_propTypes.props;
-const DSQueryBuilderWithSchema = (0, import_react_desc.describe)(DSQueryBuilder);
-DSQueryBuilderWithSchema.propTypes = import_propTypes.props;
-var DSQueryBuilder_default = DSQueryBuilder;
-module.exports = __toCommonJS(DSQueryBuilder_exports);
-//# sourceMappingURL=DSQueryBuilder.js.map
+
+const DSQueryBuilderWithSchema = reactDesc.describe(DSQueryBuilder);
+DSQueryBuilderWithSchema.propTypes = propTypes.props;
+
+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;

package/cjs/components/AndOrController/AndOrController.js

@@ -1,58 +1,55 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var AndOrController_exports = {};
-__export(AndOrController_exports, {
-  default: () => AndOrController_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_ds_classnames = require("@elliemae/ds-classnames");
-var import_ds_tooltip = __toESM(require("@elliemae/ds-tooltip"));
-var import_ds_popper = require("@elliemae/ds-popper");
-var import_ds_form = require("@elliemae/ds-form");
-var import_ds_button = __toESM(require("@elliemae/ds-button"));
-var import_ds_icons = require("@elliemae/ds-icons");
-var import_ds_icon = require("@elliemae/ds-icon");
-var import_constants = require("../helpers/constants");
-var import_ToolBarAnimation = require("../ToolBarAnimation/ToolBarAnimation");
-var import_DragContainerController = __toESM(require("../DragContainerController/DragContainerController"));
-const { cssClassName, classNameBlock, classNameElement, mainModifier, classNameBlockModifier } = (0, import_ds_classnames.convertPropToCssClassName)("query-builder-and-or-controller");
-class AndOrController extends import_react.Component {
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var dsClassnames = require('@elliemae/ds-classnames');
+var DSTooltip = require('@elliemae/ds-tooltip');
+var dsPopper = require('@elliemae/ds-popper');
+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 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 _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var DSTooltip__default = /*#__PURE__*/_interopDefaultLegacy(DSTooltip);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+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
+ *
+ * @param e
+ * @param isOpen
+ */
+
+class AndOrController extends React.Component {
   constructor(props) {
     super(props);
-    this.handleMouseEnterRow = (e) => {
-      this.handleTooltipRow(true);
+
+    this.handleMouseEnterRow = e => {
+      this.handleTooltipRow(true); // this.handleMouseMove(e)
     };
-    this.handleMouseMove = (e) => {
-      if (!this.contenerRef.current)
-        return;
+
+    this.handleMouseMove = e => {
+      if (!this.contenerRef.current) return;
       const mouse = e.clientY;
-      const { height } = this.contenerRef.current.getBoundingClientRect();
+      const {
+        height
+      } = this.contenerRef.current.getBoundingClientRect();
       const delta = height / 2;
       const topDiff = this.myRef.current.getBoundingClientRect().top;
       const refHeight = this.myRef.current.getBoundingClientRect().height;
@@ -60,22 +57,30 @@ class AndOrController extends import_react.Component {
         top: mouse - topDiff - refHeight / 2 - delta
       });
     };
+
     this.handleMouseLeaveRow = () => {
       this.handleTooltipRow(false);
     };
-    this.handleTooltipRow = (isOpen) => {
-      this.setState({ isOpen });
-      const { handleTooltipGroup } = this.props;
+
+    this.handleTooltipRow = isOpen => {
+      this.setState({
+        isOpen
+      });
+      const {
+        handleTooltipGroup
+      } = this.props;
       handleTooltipGroup(isOpen);
     };
-    this.contenerRef = import_react.default.createRef();
-    this.myRef = import_react.default.createRef();
+
+    this.contenerRef = /*#__PURE__*/React__default["default"].createRef();
+    this.myRef = /*#__PURE__*/React__default["default"].createRef();
     this.state = {
       isOpen: false,
       top: 0,
       right: -2
     };
   }
+
   render() {
     const {
       handleRuleContainerOperator,
@@ -99,110 +104,119 @@ class AndOrController extends import_react.Component {
       isMain,
       toolTipZIndex
     } = this.props;
-    const { isOpen, top, right } = this.state;
-    return /* @__PURE__ */ import_react.default.createElement("div", {
-      ref: this.myRef,
-      className: `${cssClassName} ${mainModifier(condition ? "active" : "default")} step-${step}  ${isMain ? "is-main-group-join" : ""}`,
-      onMouseLeave: this.handleMouseLeaveRow
-    }, /* @__PURE__ */ import_react.default.createElement("div", {
-      className: `${classNameBlock("content")} step-${step}`
-    }, /* @__PURE__ */ import_react.default.createElement(import_ds_tooltip.default, {
-      delayClose,
-      delayOpen,
-      interactionType: toolBarInteractionType,
+    const {
       isOpen,
-      onOpen: this.handleTooltipRow,
-      placement: toolBarPosition,
-      springAnimationComponent: /* @__PURE__ */ import_react.default.createElement(import_ToolBarAnimation.ToolBarAnimation, {
-        duration: toolBarAnimationDuration
-      }),
-      step,
-      title: /* @__PURE__ */ import_react.default.createElement("div", {
-        ref: this.contenerRef,
-        className: classNameBlock("actions"),
-        style: {
-          transition: "0.2s",
-          position: "absolute",
-          top: `${top}px`,
-          right: `${right}px`
-        }
-      }, /* @__PURE__ */ import_react.default.createElement(import_ds_button.default, {
-        buttonType: buttonActionType,
-        className: classNameElement("add-rule"),
-        icon: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.QueryAdd, null),
-        onClick: onAddFilter,
-        size: buttonActionSize,
-        containerProps: {
-          "data-testid": "query-add-button"
-        }
-      }), allowUnGroup && /* @__PURE__ */ import_react.default.createElement(import_ds_button.default, {
-        buttonType: "text",
-        className: classNameElement("ungroup"),
-        icon: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ParenthesisRemove, null),
-        onClick: handleRuleContainerUnGroup,
-        size: buttonActionSize,
-        containerProps: {
-          "data-testid": "parenthesis-remove-button"
-        }
-      }), /* @__PURE__ */ import_react.default.createElement(import_ds_form.DSToggle, {
-        checked: condition,
-        className: classNameElement("and-or-toggle"),
-        labelOff,
-        labelOn,
-        onChange: (e) => handleRuleContainerOperator(e.target.checked),
-        size: toogleActionSize,
-        containerProps: {
-          "data-testid": "and-or-toggle-button"
-        }
-      })),
-      tooltipType: import_ds_tooltip.TooltipType.TOOLBAR,
-      triggerComponent: /* @__PURE__ */ import_react.default.createElement("div", {
-        className: `${classNameBlock("trigger-controller")} ${showDragController ? classNameBlockModifier("draggable", "trigger-controller") : ""} step-${step}`
-      }, /* @__PURE__ */ import_react.default.createElement("div", {
-        className: classNameElement("condition-display")
-      }, /* @__PURE__ */ import_react.default.createElement("span", {
-        className: classNameElement("condition-display-label")
-      }, condition ? labelOn : labelOff), /* @__PURE__ */ import_react.default.createElement("span", {
-        className: classNameElement("condition-display-step")
-      }, step), /* @__PURE__ */ import_react.default.createElement("div", {
-        className: "separator"
-      }), /* @__PURE__ */ import_react.default.createElement(import_ds_icons.MoreOptionsVert, {
-        color: import_ds_icon.DSIconColors.NEUTRAL,
-        onClick: this.handleMouseEnterRow,
-        size: import_ds_icon.DSIconSizes.S,
-        containerProps: {
-          "data-testid": "and-or-more-options-button"
-        }
-      })), showDragController && /* @__PURE__ */ import_react.default.createElement(import_DragContainerController.default, {
-        multipleSize,
-        onClick: this.handleMouseEnterRow
-      })),
-      zIndex: toolTipZIndex
-    })));
+      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)
+      }, void 0, /*#__PURE__*/_jsx__default["default"](DSTooltip__default["default"], {
+        delayClose: delayClose,
+        delayOpen: delayOpen,
+        interactionType: toolBarInteractionType,
+        isOpen: isOpen,
+        onOpen: this.handleTooltipRow,
+        placement: toolBarPosition,
+        springAnimationComponent: /*#__PURE__*/_jsx__default["default"](ToolBarAnimation.ToolBarAnimation, {
+          duration: toolBarAnimationDuration
+        }),
+        step: step,
+        title: /*#__PURE__*/jsxRuntime.jsxs("div", {
+          ref: this.contenerRef,
+          className: classNameBlock('actions'),
+          style: {
+            transition: '0.2s',
+            position: 'absolute',
+            top: "".concat(top, "px"),
+            right: "".concat(right, "px")
+          },
+          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__*/_jsx__default["default"]("div", {
+          className: "".concat(classNameBlock('trigger-controller'), " ").concat(showDragController ? classNameBlockModifier('draggable', 'trigger-controller') : '', " step-").concat(step)
+        }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
+          className: classNameElement('condition-display')
+        }, void 0, /*#__PURE__*/_jsx__default["default"]("span", {
+          className: classNameElement('condition-display-label')
+        }, void 0, condition ? labelOn : labelOff), /*#__PURE__*/_jsx__default["default"]("span", {
+          className: classNameElement('condition-display-step')
+        }, void 0, step), _div || (_div = /*#__PURE__*/_jsx__default["default"]("div", {
+          className: "separator"
+        })), /*#__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__*/_jsx__default["default"](DragContainerController, {
+          multipleSize: multipleSize,
+          onClick: this.handleMouseEnterRow
+        })),
+        zIndex: toolTipZIndex
+      }))
+    });
   }
+
 }
+
 AndOrController.defaultProps = {
   isMain: false,
   handleRuleContainerOperator: () => null,
   handleRuleContainerUnGroup: () => null,
   handleTooltipGroup: () => null,
-  labelOn: "AND",
-  labelOff: "OR",
+  labelOn: 'AND',
+  labelOff: 'OR',
   condition: true,
   showDragController: true,
   allowUnGroup: true,
-  buttonActionSize: import_ds_icon.DSIconSizes.M,
-  buttonActionType: "text",
-  toogleActionSize: import_ds_icon.DSIconSizes.S,
+  buttonActionSize: dsIcon.DSIconSizes.M,
+  buttonActionType: 'text',
+  toogleActionSize: dsIcon.DSIconSizes.S,
   onAddFilter: () => null,
   multipleSize: false,
-  delayClose: import_constants.DELAY_CLOSE,
-  delayOpen: import_constants.DELAY_OPEN,
+  delayClose: constants.DELAY_CLOSE,
+  delayOpen: constants.DELAY_OPEN,
   step: null,
-  toolBarAnimationDuration: import_constants.TOOLBAR_ANIMATION_DURATION,
-  toolBarInteractionType: import_ds_popper.PopperInteractions.CLICK,
-  toolBarPosition: import_ds_popper.PopperPositions.LEFT
+  toolBarAnimationDuration: constants.TOOLBAR_ANIMATION_DURATION,
+  toolBarInteractionType: dsPopper.PopperInteractions.CLICK,
+  toolBarPosition: dsPopper.PopperPositions.LEFT
 };
-var AndOrController_default = AndOrController;
-module.exports = __toCommonJS(AndOrController_exports);
-//# sourceMappingURL=AndOrController.js.map
+
+module.exports = AndOrController;