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

package/esm/components/AndOrController/AndOrController.js

@@ -1,27 +1,46 @@
-import * as React from "react";
-import React2, { Component } from "react";
-import { convertPropToCssClassName } from "@elliemae/ds-classnames";
-import DSTooltip, { TooltipType } from "@elliemae/ds-tooltip";
-import { PopperInteractions as Interaction, PopperPositions as Position } from "@elliemae/ds-popper";
-import { DSToggle } from "@elliemae/ds-form";
-import DSButton from "@elliemae/ds-button";
-import { ParenthesisRemove, MoreOptionsVert, QueryAdd } from "@elliemae/ds-icons";
-import { DSIconColors, DSIconSizes } from "@elliemae/ds-icon";
-import { DELAY_CLOSE, DELAY_OPEN, TOOLBAR_ANIMATION_DURATION } from "../helpers/constants";
-import { ToolBarAnimation } from "../ToolBarAnimation/ToolBarAnimation";
-import DragContainerController from "../DragContainerController/DragContainerController";
-const { cssClassName, classNameBlock, classNameElement, mainModifier, classNameBlockModifier } = convertPropToCssClassName("query-builder-and-or-controller");
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import React, { Component } from 'react';
+import { convertPropToCssClassName } from '@elliemae/ds-classnames';
+import DSTooltip, { TooltipType } from '@elliemae/ds-tooltip';
+import { PopperInteractions, PopperPositions } from '@elliemae/ds-popper';
+import { DSToggle } from '@elliemae/ds-form';
+import DSButton from '@elliemae/ds-button';
+import { QueryAdd, ParenthesisRemove, MoreOptionsVert } from '@elliemae/ds-icons';
+import { DSIconSizes, DSIconColors } from '@elliemae/ds-icon';
+import { DELAY_CLOSE, DELAY_OPEN, TOOLBAR_ANIMATION_DURATION } from '../helpers/constants.js';
+import { ToolBarAnimation } from '../ToolBarAnimation/ToolBarAnimation.js';
+import DragContainerController from '../DragContainerController/DragContainerController.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var _QueryAdd, _ParenthesisRemove, _div;
+const {
+  cssClassName,
+  classNameBlock,
+  classNameElement,
+  mainModifier,
+  classNameBlockModifier
+} = convertPropToCssClassName('query-builder-and-or-controller');
+/**
+ * condition-display-step: required to avoid the cache of the trigger
+ *
+ * @param e
+ * @param isOpen
+ */
+
 class AndOrController extends 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;
@@ -29,22 +48,30 @@ class AndOrController extends 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 = React2.createRef();
-    this.myRef = React2.createRef();
+
+    this.contenerRef = /*#__PURE__*/React.createRef();
+    this.myRef = /*#__PURE__*/React.createRef();
     this.state = {
       isOpen: false,
       top: 0,
       right: -2
     };
   }
+
   render() {
     const {
       handleRuleContainerOperator,
@@ -68,100 +95,110 @@ class AndOrController extends Component {
       isMain,
       toolTipZIndex
     } = this.props;
-    const { isOpen, top, right } = this.state;
-    return /* @__PURE__ */ React2.createElement("div", {
-      ref: this.myRef,
-      className: `${cssClassName} ${mainModifier(condition ? "active" : "default")} step-${step}  ${isMain ? "is-main-group-join" : ""}`,
-      onMouseLeave: this.handleMouseLeaveRow
-    }, /* @__PURE__ */ React2.createElement("div", {
-      className: `${classNameBlock("content")} step-${step}`
-    }, /* @__PURE__ */ React2.createElement(DSTooltip, {
-      delayClose,
-      delayOpen,
-      interactionType: toolBarInteractionType,
+    const {
       isOpen,
-      onOpen: this.handleTooltipRow,
-      placement: toolBarPosition,
-      springAnimationComponent: /* @__PURE__ */ React2.createElement(ToolBarAnimation, {
-        duration: toolBarAnimationDuration
-      }),
-      step,
-      title: /* @__PURE__ */ React2.createElement("div", {
-        ref: this.contenerRef,
-        className: classNameBlock("actions"),
-        style: {
-          transition: "0.2s",
-          position: "absolute",
-          top: `${top}px`,
-          right: `${right}px`
-        }
-      }, /* @__PURE__ */ React2.createElement(DSButton, {
-        buttonType: buttonActionType,
-        className: classNameElement("add-rule"),
-        icon: /* @__PURE__ */ React2.createElement(QueryAdd, null),
-        onClick: onAddFilter,
-        size: buttonActionSize,
-        containerProps: {
-          "data-testid": "query-add-button"
-        }
-      }), allowUnGroup && /* @__PURE__ */ React2.createElement(DSButton, {
-        buttonType: "text",
-        className: classNameElement("ungroup"),
-        icon: /* @__PURE__ */ React2.createElement(ParenthesisRemove, null),
-        onClick: handleRuleContainerUnGroup,
-        size: buttonActionSize,
-        containerProps: {
-          "data-testid": "parenthesis-remove-button"
-        }
-      }), /* @__PURE__ */ React2.createElement(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: TooltipType.TOOLBAR,
-      triggerComponent: /* @__PURE__ */ React2.createElement("div", {
-        className: `${classNameBlock("trigger-controller")} ${showDragController ? classNameBlockModifier("draggable", "trigger-controller") : ""} step-${step}`
-      }, /* @__PURE__ */ React2.createElement("div", {
-        className: classNameElement("condition-display")
-      }, /* @__PURE__ */ React2.createElement("span", {
-        className: classNameElement("condition-display-label")
-      }, condition ? labelOn : labelOff), /* @__PURE__ */ React2.createElement("span", {
-        className: classNameElement("condition-display-step")
-      }, step), /* @__PURE__ */ React2.createElement("div", {
-        className: "separator"
-      }), /* @__PURE__ */ React2.createElement(MoreOptionsVert, {
-        color: DSIconColors.NEUTRAL,
-        onClick: this.handleMouseEnterRow,
-        size: DSIconSizes.S,
-        containerProps: {
-          "data-testid": "and-or-more-options-button"
-        }
-      })), showDragController && /* @__PURE__ */ React2.createElement(DragContainerController, {
-        multipleSize,
-        onClick: this.handleMouseEnterRow
-      })),
-      zIndex: toolTipZIndex
-    })));
+      top,
+      right
+    } = this.state;
+    return /*#__PURE__*/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("div", {
+        className: "".concat(classNameBlock('content'), " step-").concat(step)
+      }, void 0, /*#__PURE__*/_jsx(DSTooltip, {
+        delayClose: delayClose,
+        delayOpen: delayOpen,
+        interactionType: toolBarInteractionType,
+        isOpen: isOpen,
+        onOpen: this.handleTooltipRow,
+        placement: toolBarPosition,
+        springAnimationComponent: /*#__PURE__*/_jsx(ToolBarAnimation, {
+          duration: toolBarAnimationDuration
+        }),
+        step: step,
+        title: /*#__PURE__*/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(DSButton, {
+            buttonType: buttonActionType,
+            className: classNameElement('add-rule'),
+            icon: _QueryAdd || (_QueryAdd = /*#__PURE__*/_jsx(QueryAdd, {})),
+            onClick: onAddFilter,
+            size: buttonActionSize,
+            containerProps: {
+              'data-testid': 'query-add-button'
+            }
+          }), allowUnGroup && /*#__PURE__*/_jsx(DSButton, {
+            buttonType: "text",
+            className: classNameElement('ungroup'),
+            icon: _ParenthesisRemove || (_ParenthesisRemove = /*#__PURE__*/_jsx(ParenthesisRemove, {})),
+            onClick: handleRuleContainerUnGroup,
+            size: buttonActionSize,
+            containerProps: {
+              'data-testid': 'parenthesis-remove-button'
+            }
+          }), /*#__PURE__*/_jsx(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: TooltipType.TOOLBAR,
+        triggerComponent: /*#__PURE__*/_jsx("div", {
+          className: "".concat(classNameBlock('trigger-controller'), " ").concat(showDragController ? classNameBlockModifier('draggable', 'trigger-controller') : '', " step-").concat(step)
+        }, void 0, /*#__PURE__*/_jsx("div", {
+          className: classNameElement('condition-display')
+        }, void 0, /*#__PURE__*/_jsx("span", {
+          className: classNameElement('condition-display-label')
+        }, void 0, condition ? labelOn : labelOff), /*#__PURE__*/_jsx("span", {
+          className: classNameElement('condition-display-step')
+        }, void 0, step), _div || (_div = /*#__PURE__*/_jsx("div", {
+          className: "separator"
+        })), /*#__PURE__*/_jsx(MoreOptionsVert, {
+          color: DSIconColors.NEUTRAL,
+          onClick: this.handleMouseEnterRow,
+          size: DSIconSizes.S,
+          containerProps: {
+            'data-testid': 'and-or-more-options-button'
+          }
+        })), showDragController && /*#__PURE__*/_jsx(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: DSIconSizes.M,
-  buttonActionType: "text",
+  buttonActionType: 'text',
   toogleActionSize: DSIconSizes.S,
   onAddFilter: () => null,
   multipleSize: false,
@@ -169,11 +206,8 @@ AndOrController.defaultProps = {
   delayOpen: DELAY_OPEN,
   step: null,
   toolBarAnimationDuration: TOOLBAR_ANIMATION_DURATION,
-  toolBarInteractionType: Interaction.CLICK,
-  toolBarPosition: Position.LEFT
-};
-var AndOrController_default = AndOrController;
-export {
-  AndOrController_default as default
+  toolBarInteractionType: PopperInteractions.CLICK,
+  toolBarPosition: PopperPositions.LEFT
 };
-//# sourceMappingURL=AndOrController.js.map
+
+export { AndOrController as default };

package/esm/components/ConditionController/ConditionController.js

@@ -1,87 +1,92 @@
-import * as React from "react";
-import React2 from "react";
-import { convertPropToCssClassName } from "@elliemae/ds-classnames";
-import DSTooltip, { TooltipType } from "@elliemae/ds-tooltip";
-import { PopperInteractions as Interaction, PopperPositions as Position } from "@elliemae/ds-popper";
-import { DSIconSizes } from "@elliemae/ds-icon";
-import { QueryRemove, MoreOptionsVert, QueryAdd, ParenthesisAdd } from "@elliemae/ds-icons";
-import DSButton from "@elliemae/ds-button";
-import { ToolBarAnimation } from "../ToolBarAnimation/ToolBarAnimation";
-import { DELAY_CLOSE, DELAY_OPEN, TOOLBAR_ANIMATION_DURATION } from "../helpers/constants";
-const ConditionController = ({
-  onAddFilter = () => null,
-  onAddRuleContainer = () => null,
-  onRemoveFilter = () => null,
-  handleTooltipRow = () => null,
-  buttonTriggerSize = DSIconSizes.M,
-  buttonTriggerType = "text",
-  buttonActionSize = DSIconSizes.M,
-  buttonActionType = "text",
-  delayClose = DELAY_CLOSE,
-  delayOpen = DELAY_OPEN,
-  isOpen = false,
-  toolTipZIndex
-}) => {
-  const { cssClassName, classNameBlock, classNameElement } = convertPropToCssClassName("query-builder-condition-controller");
-  return /* @__PURE__ */ React2.createElement("div", {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { convertPropToCssClassName } from '@elliemae/ds-classnames';
+import DSTooltip, { TooltipType } from '@elliemae/ds-tooltip';
+import { PopperInteractions, PopperPositions } from '@elliemae/ds-popper';
+import { DSIconSizes } from '@elliemae/ds-icon';
+import { QueryRemove, QueryAdd, ParenthesisAdd, MoreOptionsVert } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
+import { ToolBarAnimation } from '../ToolBarAnimation/ToolBarAnimation.js';
+import { DELAY_CLOSE, DELAY_OPEN, TOOLBAR_ANIMATION_DURATION } from '../helpers/constants.js';
+
+var _ToolBarAnimation, _QueryRemove, _QueryAdd, _ParenthesisAdd;
+
+const ConditionController = _ref => {
+  let {
+    onAddFilter = () => null,
+    onAddRuleContainer = () => null,
+    onRemoveFilter = () => null,
+    handleTooltipRow = () => null,
+    buttonTriggerSize = DSIconSizes.M,
+    buttonTriggerType = 'text',
+    buttonActionSize = DSIconSizes.M,
+    buttonActionType = 'text',
+    delayClose = DELAY_CLOSE,
+    delayOpen = DELAY_OPEN,
+    isOpen = false,
+    toolTipZIndex
+  } = _ref;
+  const {
+    cssClassName,
+    classNameBlock,
+    classNameElement
+  } = convertPropToCssClassName('query-builder-condition-controller');
+  return /*#__PURE__*/_jsx("div", {
     className: cssClassName
-  }, /* @__PURE__ */ React2.createElement(DSTooltip, {
-    delayClose,
-    delayOpen,
-    interactionType: Interaction.CLICK,
-    isOpen,
+  }, void 0, /*#__PURE__*/_jsx(DSTooltip, {
+    delayClose: delayClose,
+    delayOpen: delayOpen,
+    interactionType: PopperInteractions.CLICK,
+    isOpen: isOpen,
     onOpen: handleTooltipRow,
-    placement: Position.LEFT,
-    springAnimationComponent: /* @__PURE__ */ React2.createElement(ToolBarAnimation, {
+    placement: PopperPositions.LEFT,
+    springAnimationComponent: _ToolBarAnimation || (_ToolBarAnimation = /*#__PURE__*/_jsx(ToolBarAnimation, {
       duration: TOOLBAR_ANIMATION_DURATION
-    }),
-    title: /* @__PURE__ */ React2.createElement("div", {
-      className: classNameBlock("actions")
-    }, /* @__PURE__ */ React2.createElement(DSButton, {
+    })),
+    title: /*#__PURE__*/_jsx("div", {
+      className: classNameBlock('actions')
+    }, void 0, /*#__PURE__*/_jsx(DSButton, {
       buttonType: buttonActionType,
-      className: classNameElement("remove-rule"),
-      icon: /* @__PURE__ */ React2.createElement(QueryRemove, null),
+      className: classNameElement('remove-rule'),
+      icon: _QueryRemove || (_QueryRemove = /*#__PURE__*/_jsx(QueryRemove, {})),
       onClick: onRemoveFilter,
       size: buttonActionSize,
       containerProps: {
-        "data-testid": "query-remove-button"
+        'data-testid': 'query-remove-button'
       }
-    }), /* @__PURE__ */ React2.createElement(DSButton, {
+    }), /*#__PURE__*/_jsx(DSButton, {
       buttonType: buttonActionType,
-      className: classNameElement("add-rule"),
-      icon: /* @__PURE__ */ React2.createElement(QueryAdd, null),
+      className: classNameElement('add-rule'),
+      icon: _QueryAdd || (_QueryAdd = /*#__PURE__*/_jsx(QueryAdd, {})),
       onClick: onAddFilter,
       size: buttonActionSize,
       containerProps: {
-        "data-testid": "query-add-button"
+        'data-testid': 'query-add-button'
       }
-    }), /* @__PURE__ */ React2.createElement(DSButton, {
+    }), /*#__PURE__*/_jsx(DSButton, {
       buttonType: buttonActionType,
-      className: `${classNameElement("add-rule-container")} no-border-right`,
-      icon: /* @__PURE__ */ React2.createElement(ParenthesisAdd, null),
+      className: "".concat(classNameElement('add-rule-container'), " no-border-right"),
+      icon: _ParenthesisAdd || (_ParenthesisAdd = /*#__PURE__*/_jsx(ParenthesisAdd, {})),
       onClick: onAddRuleContainer,
       size: buttonActionSize,
       containerProps: {
-        "data-testid": "parenthesis-add-button"
+        'data-testid': 'parenthesis-add-button'
       }
     })),
     tooltipType: TooltipType.TOOLBAR,
-    triggerComponent: /* @__PURE__ */ React2.createElement(DSButton, {
+    triggerComponent: /*#__PURE__*/_jsx(DSButton, {
       buttonType: buttonTriggerType,
-      icon: /* @__PURE__ */ React2.createElement(MoreOptionsVert, {
-        color: ["neutral", "500"]
+      icon: /*#__PURE__*/_jsx(MoreOptionsVert, {
+        color: ['neutral', '500']
       }),
       onClick: handleTooltipRow,
       size: buttonTriggerSize,
       containerProps: {
-        "data-testid": "condition-more-options-button"
+        'data-testid': 'condition-more-options-button'
       }
     }),
     zIndex: toolTipZIndex
   }));
 };
-var ConditionController_default = ConditionController;
-export {
-  ConditionController_default as default
-};
-//# sourceMappingURL=ConditionController.js.map
+
+export { ConditionController as default };

package/esm/components/DisplayOutput/DisplayOutput.js

@@ -1,59 +1,87 @@
-import * as React from "react";
-import React2, { Component } from "react";
-import { Grid } from "@elliemae/ds-grid";
-import { convertPropToCssClassName } from "@elliemae/ds-classnames";
-import { DSAccordion, DSAccordionItem } from "@elliemae/ds-accordion";
-import { ChevronDown, ChevronRight } from "@elliemae/ds-icons";
-import { QueryBuilderContext } from "../QueryBuilderContext/QueryBuilderContext";
-const { cssClassName } = convertPropToCssClassName("query-builder-output");
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { Component } from 'react';
+import { Grid } from '@elliemae/ds-grid';
+import { convertPropToCssClassName } from '@elliemae/ds-classnames';
+import { DSAccordion, DSAccordionItem } from '@elliemae/ds-accordion';
+import { ChevronRight, ChevronDown } from '@elliemae/ds-icons';
+import { QueryBuilderContext } from '../QueryBuilderContext/QueryBuilderContext.js';
+
+const {
+  cssClassName
+} = convertPropToCssClassName('query-builder-output');
+
 class DisplayOutput extends Component {
   constructor(props) {
     super(props);
+
     this.handleChange = () => {
-      this.setState(({ show }) => ({
-        show: !show
-      }));
+      this.setState(_ref => {
+        let {
+          show
+        } = _ref;
+        return {
+          show: !show
+        };
+      });
     };
+
     this.state = {
       show: props.show
     };
   }
+
   render() {
-    const { show } = this.state;
-    const { showLabel, hideLabel, displayFixedOutput } = this.props;
-    return /* @__PURE__ */ React2.createElement(QueryBuilderContext.Consumer, null, ({ format }) => {
-      let display = "";
+    var _Grid;
+
+    const {
+      show
+    } = this.state;
+    const {
+      showLabel,
+      hideLabel,
+      displayFixedOutput
+    } = this.props;
+    return /*#__PURE__*/_jsx(QueryBuilderContext.Consumer, {}, void 0, _ref2 => {
+      let {
+        format
+      } = _ref2;
+      let display = '';
+
       try {
-        display = typeof format === "object" ? JSON.stringify(format) : format;
+        display = typeof format === 'object' ? JSON.stringify(format) : format;
       } catch (e) {
         display = e;
       }
+
       if (displayFixedOutput) {
-        return /* @__PURE__ */ React2.createElement("div", {
-          className: cssClassName
-        }, /* @__PURE__ */ React2.createElement(Grid, {
+        return /*#__PURE__*/_jsx("div", {
+          className: cssClassName,
+          "data-testid": "qb-fixed-output-wrapper"
+        }, void 0, _Grid || (_Grid = /*#__PURE__*/_jsx(Grid, {
           p: "xxs"
-        }, /* @__PURE__ */ React2.createElement("strong", null, displayFixedOutput)), /* @__PURE__ */ React2.createElement(Grid, {
+        }, void 0, /*#__PURE__*/_jsx("strong", {
+          "data-testid": "qb-fixed-output-label"
+        }, void 0, displayFixedOutput))), /*#__PURE__*/_jsx(Grid, {
           pl: "xxs",
-          pr: "xxs"
-        }, display));
+          pr: "xxs",
+          "data-testid": "qb-fixed-output-content"
+        }, void 0, display));
       }
-      return /* @__PURE__ */ React2.createElement("div", {
+
+      return /*#__PURE__*/_jsx("div", {
         className: cssClassName
-      }, /* @__PURE__ */ React2.createElement(DSAccordion, {
+      }, void 0, /*#__PURE__*/_jsx(DSAccordion, {
         activeValue: show,
         onChange: this.handleChange
-      }, /* @__PURE__ */ React2.createElement(DSAccordionItem, {
+      }, void 0, /*#__PURE__*/_jsx(DSAccordionItem, {
         iconClosed: ChevronRight,
         iconOpened: ChevronDown,
         title: show ? hideLabel : showLabel,
         value: true
-      }, /* @__PURE__ */ React2.createElement("div", null, display))));
+      }, void 0, /*#__PURE__*/_jsx("div", {}, void 0, display))));
     });
   }
+
 }
-var DisplayOutput_default = DisplayOutput;
-export {
-  DisplayOutput_default as default
-};
-//# sourceMappingURL=DisplayOutput.js.map
+
+export { DisplayOutput as default };