@elliemae/ds-query-builder 2.0.0-alpha.1 → 2.0.0-alpha.13

package/cjs/components/helpers/store.js

@@ -1,6 +1,11 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
 var actions = require('./actions.js');
 var format = require('../format/format.js');
 
@@ -10,7 +15,7 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 /**
  * Fluent interface: https://en.wikipedia.org/wiki/Fluent_interface
  *
@@ -25,36 +30,30 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 class QueryBuilderStore {
   constructor(init, _format) {
-    _defineProperty__default['default'](this, "items", []);
+    this.items = [];
+    this.step = 0;
+    this.steps = {};
+    this.mapFilters = {};
+    this.mapGroups = {};
+    this.main = null;
+    this.format = null;
 
-    _defineProperty__default['default'](this, "step", 0);
+    this.createNewFilter = idGroup => actions.createNewFilter.call(this, idGroup);
 
-    _defineProperty__default['default'](this, "steps", {});
+    this.createNewGroup = parentIdGroup => actions.createNewGroup.call(this, parentIdGroup);
 
-    _defineProperty__default['default'](this, "mapFilters", {});
-
-    _defineProperty__default['default'](this, "mapGroups", {});
-
-    _defineProperty__default['default'](this, "main", null);
-
-    _defineProperty__default['default'](this, "format", null);
-
-    _defineProperty__default['default'](this, "createNewFilter", idGroup => actions.createNewFilter.call(this, idGroup));
-
-    _defineProperty__default['default'](this, "createNewGroup", parentIdGroup => actions.createNewGroup.call(this, parentIdGroup));
-
-    _defineProperty__default['default'](this, "onOrderDragAndDrop", items => {
+    this.onOrderDragAndDrop = items => {
       this.items = items;
       return this.getState();
-    });
+    };
 
-    _defineProperty__default['default'](this, "addFilterNextToFilterId", (idGroup, idFilter) => {
+    this.addFilterNextToFilterId = (idGroup, idFilter) => {
       // eslint-disable-line
       this.addFilter(idGroup);
       return this.getState();
-    });
+    };
 
-    _defineProperty__default['default'](this, "addFilter", idGroup => {
+    this.addFilter = idGroup => {
       const newFilter = this.createNewFilter(idGroup);
       actions.addFilterToMap.call(this, newFilter); // new API
 
@@ -69,22 +68,22 @@ class QueryBuilderStore {
       }
 
       return this.getState();
-    });
+    };
 
-    _defineProperty__default['default'](this, "onRemoveFilter", idFilter => {
+    this.onRemoveFilter = idFilter => {
       // new API
       actions.removeFilterItem.call(this, idFilter);
       return this.getState();
-    });
+    };
 
-    _defineProperty__default['default'](this, "addRuleContainerInPlace", (idGroup, idFilter) => {
+    this.addRuleContainerInPlace = (idGroup, idFilter) => {
       // Create a new group
       const newGroup = this.createNewGroup(idGroup);
       actions.addGroupFilterToItem.call(this, idGroup, idFilter, newGroup);
       return this.getState();
-    });
+    };
 
-    _defineProperty__default['default'](this, "addRuleContainer", (idGroup, idFilter) => {
+    this.addRuleContainer = (idGroup, idFilter) => {
       // eslint-disable-line
       const newGroup = this.createNewGroup(idGroup);
       actions.addGroupToMap.call(this, newGroup);
@@ -100,33 +99,33 @@ class QueryBuilderStore {
       }
 
       return this.getState();
-    });
+    };
 
-    _defineProperty__default['default'](this, "unGroup", idGroup => {
+    this.unGroup = idGroup => {
       actions.unGroupFilterToItem.call(this, idGroup);
       return this.getState();
-    });
+    };
 
-    _defineProperty__default['default'](this, "changeGroupOperator", (idGroup, value) => {
+    this.changeGroupOperator = (idGroup, value) => {
       this.getGroupById(idGroup).condition = value;
       actions.changeGroupOperator.call(this, idGroup, value);
       return this.getState();
-    });
+    };
 
-    _defineProperty__default['default'](this, "changeFilter", data => {
+    this.changeFilter = data => {
       const {
         idFilter
       } = data;
       this.mapFilters[idFilter] = _objectSpread(_objectSpread({}, this.mapFilters[idFilter]), data);
       actions.changeFilterItem.call(this, data);
       return this.getState();
-    });
+    };
 
-    _defineProperty__default['default'](this, "getGroupById", idGroup => this.mapGroups[idGroup] || {});
+    this.getGroupById = idGroup => this.mapGroups[idGroup] || {};
 
-    _defineProperty__default['default'](this, "getFilterById", idFilter => this.mapFilters[idFilter]);
+    this.getFilterById = idFilter => this.mapFilters[idFilter];
 
-    _defineProperty__default['default'](this, "getInitialState", () => {
+    this.getInitialState = () => {
       const newFilters = {
         step: this.step,
         mapFilters: _objectSpread({}, this.mapFilters),
@@ -138,9 +137,9 @@ class QueryBuilderStore {
       return _objectSpread(_objectSpread({}, newFilters), {}, {
         format: format$1
       });
-    });
+    };
 
-    _defineProperty__default['default'](this, "getState", () => {
+    this.getState = () => {
       this.step += 1;
       const newFilters = {
         step: this.step,
@@ -153,7 +152,7 @@ class QueryBuilderStore {
       return _objectSpread(_objectSpread({}, newFilters), {}, {
         format: format$1
       });
-    });
+    };
 
     this.firstLoad = true;
     this.format = _format;

package/cjs/index.js

@@ -9,8 +9,9 @@ var format = require('./components/format/format.js');
 
 
 
+exports.DSQueryBuilder = DSQueryBuilder.DSQueryBuilder;
 exports.DSQueryBuilderWithSchema = DSQueryBuilder.DSQueryBuilderWithSchema;
-exports.default = DSQueryBuilder['default'];
+exports["default"] = DSQueryBuilder.DSQueryBuilder;
 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;

package/cjs/propTypes.js

@@ -77,6 +77,7 @@ const props = {
 
   /** remove filter callback */
   onRemoveFilter: reactDesc.PropTypes.func.description('remove filter callback'),
+  displayFixedOutput: reactDesc.PropTypes.string.description("Label for fixed output.Using this props it will ignore 'displayOutput' and 'displayOutputLabel' \n  and it will always render the output without the ability to close it. \n  ").defaultValue(''),
 
   /** show output */
   displayOutput: reactDesc.PropTypes.bool.description('show output'),

package/esm/DSQueryBuilder.js

@@ -8,62 +8,67 @@ export { QB_DEFAULT_VALUES_OPTIONS, QB_FIELD_OPTIONS, QB_LOAN_VALUES_OPTIONS, QB
 export { default as QueryBuilderFormat } from './components/format/format.js';
 import { props } from './propTypes.js';
 
-const DSQueryBuilder = ({
-  containerProps = {},
-  addFilterMethod = QB_ADD_FILTER_METHOD_TYPES.IN_PLACE,
-  groupFilterMethod = QB_GROUP_FILTER_METHOD_TYPES.IN_PLACE,
-  onChange = () => null,
-  fields = [],
-  fieldsSharedActions = {
-    onFieldChange: [],
-    onOperatorChange: [],
-    onValueChange: []
-  },
-  format = 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,
-  displayOutput = false,
-  displayOutputLabel = {
-    show: 'Show output',
-    hide: 'Hide output'
-  },
-  singleRow = false,
-  toolTipZIndex = 110
-}) => /*#__PURE__*/_jsx(QueryBuilderImpl, {
-  addFilterMethod: addFilterMethod,
-  containerProps: containerProps,
-  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
-});
+const DSQueryBuilder = _ref => {
+  let {
+    containerProps = {},
+    addFilterMethod = QB_ADD_FILTER_METHOD_TYPES.IN_PLACE,
+    groupFilterMethod = QB_GROUP_FILTER_METHOD_TYPES.IN_PLACE,
+    onChange = () => null,
+    fields = [],
+    fieldsSharedActions = {
+      onFieldChange: [],
+      onOperatorChange: [],
+      onValueChange: []
+    },
+    format = 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(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
+  });
+};
 
 const DSQueryBuilderWithSchema = describe(DSQueryBuilder);
 DSQueryBuilderWithSchema.propTypes = props;
 
-export { DSQueryBuilderWithSchema, DSQueryBuilder as default };
+export { DSQueryBuilder, DSQueryBuilderWithSchema, DSQueryBuilder as default };

package/esm/components/AndOrController/AndOrController.js

@@ -1,15 +1,12 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import React, { Component } from 'react';
 import { convertPropToCssClassName } from '@elliemae/ds-classnames';
-import DSTooltip, { TooltipType } from '@elliemae/ds-basic/Tooltip';
-import { PopperInteractions, PopperPositions } from '@elliemae/ds-basic/Popper';
-import DSToggle from '@elliemae/ds-basic/form/Toggle';
-import DSButton from '@elliemae/ds-basic/Button';
-import QueryAdd from '@elliemae/ds-icons/QueryAdd';
-import ParenthesisRemove from '@elliemae/ds-icons/ParenthesisRemove';
-import MoreOptionsVert from '@elliemae/ds-icons/MoreOptionsVert';
-import { DSIconSizes, DSIconColors } from '@elliemae/ds-basic/Icon';
+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';
@@ -34,11 +31,11 @@ class AndOrController extends Component {
   constructor(props) {
     super(props);
 
-    _defineProperty(this, "handleMouseEnterRow", e => {
+    this.handleMouseEnterRow = e => {
       this.handleTooltipRow(true); // this.handleMouseMove(e)
-    });
+    };
 
-    _defineProperty(this, "handleMouseMove", e => {
+    this.handleMouseMove = e => {
       if (!this.contenerRef.current) return;
       const mouse = e.clientY;
       const {
@@ -50,13 +47,13 @@ class AndOrController extends Component {
       this.setState({
         top: mouse - topDiff - refHeight / 2 - delta
       });
-    });
+    };
 
-    _defineProperty(this, "handleMouseLeaveRow", () => {
+    this.handleMouseLeaveRow = () => {
       this.handleTooltipRow(false);
-    });
+    };
 
-    _defineProperty(this, "handleTooltipRow", isOpen => {
+    this.handleTooltipRow = isOpen => {
       this.setState({
         isOpen
       });
@@ -64,7 +61,7 @@ class AndOrController extends Component {
         handleTooltipGroup
       } = this.props;
       handleTooltipGroup(isOpen);
-    });
+    };
 
     this.contenerRef = /*#__PURE__*/React.createRef();
     this.myRef = /*#__PURE__*/React.createRef();
@@ -105,12 +102,12 @@ class AndOrController extends Component {
     } = this.state;
     return /*#__PURE__*/jsx("div", {
       ref: this.myRef,
-      className: `${cssClassName} ${mainModifier(condition ? 'active' : 'default')} step-${step}  ${isMain ? 'is-main-group-join' : ''}` // onMouseEnter={this.handleMouseEnterRow}
+      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: `${classNameBlock('content')} step-${step}`
+        className: "".concat(classNameBlock('content'), " step-").concat(step)
       }, void 0, /*#__PURE__*/_jsx(DSTooltip, {
         delayClose: delayClose,
         delayOpen: delayOpen,
@@ -128,8 +125,8 @@ class AndOrController extends Component {
           style: {
             transition: '0.2s',
             position: 'absolute',
-            top: `${top}px`,
-            right: `${right}px`
+            top: "".concat(top, "px"),
+            right: "".concat(right, "px")
           },
           children: [/*#__PURE__*/_jsx(DSButton, {
             buttonType: buttonActionType,
@@ -163,7 +160,7 @@ class AndOrController extends Component {
         }),
         tooltipType: TooltipType.TOOLBAR,
         triggerComponent: /*#__PURE__*/_jsx("div", {
-          className: `${classNameBlock('trigger-controller')} ${showDragController ? classNameBlockModifier('draggable', 'trigger-controller') : ''} step-${step}`
+          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", {
@@ -190,7 +187,7 @@ class AndOrController extends Component {
 
 }
 
-_defineProperty(AndOrController, "defaultProps", {
+AndOrController.defaultProps = {
   isMain: false,
   handleRuleContainerOperator: () => null,
   handleRuleContainerUnGroup: () => null,
@@ -211,6 +208,6 @@ _defineProperty(AndOrController, "defaultProps", {
   toolBarAnimationDuration: TOOLBAR_ANIMATION_DURATION,
   toolBarInteractionType: PopperInteractions.CLICK,
   toolBarPosition: PopperPositions.LEFT
-});
+};
 
 export { AndOrController as default };

package/esm/components/ConditionController/ConditionController.js

@@ -1,33 +1,31 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { convertPropToCssClassName } from '@elliemae/ds-classnames';
-import DSTooltip, { TooltipType } from '@elliemae/ds-basic/Tooltip';
-import { PopperInteractions, PopperPositions } from '@elliemae/ds-basic/Popper';
-import { DSIconSizes } from '@elliemae/ds-basic/Icon';
-import DSButton from '@elliemae/ds-basic/Button';
-import MoreOptionsVert from '@elliemae/ds-icons/MoreOptionsVert';
-import QueryRemove from '@elliemae/ds-icons/QueryRemove';
-import QueryAdd from '@elliemae/ds-icons/QueryAdd';
-import ParenthesisAdd from '@elliemae/ds-icons/ParenthesisAdd';
+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 = ({
-  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 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,
@@ -67,7 +65,7 @@ const ConditionController = ({
       }
     }), /*#__PURE__*/_jsx(DSButton, {
       buttonType: buttonActionType,
-      className: `${classNameElement('add-rule-container')} no-border-right`,
+      className: "".concat(classNameElement('add-rule-container'), " no-border-right"),
       icon: _ParenthesisAdd || (_ParenthesisAdd = /*#__PURE__*/_jsx(ParenthesisAdd, {})),
       onClick: onAddRuleContainer,
       size: buttonActionSize,

package/esm/components/DisplayOutput/DisplayOutput.js

@@ -1,10 +1,9 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import { Component } from 'react';
+import { Grid } from '@elliemae/ds-grid';
 import { convertPropToCssClassName } from '@elliemae/ds-classnames';
-import { DSAccordion, DSAccordionItem } from '@elliemae/ds-basic/Accordion';
-import ChevronDown from '@elliemae/ds-icons/ChevronDown';
-import ChevronRight from '@elliemae/ds-icons/ChevronRight';
+import { DSAccordion, DSAccordionItem } from '@elliemae/ds-accordion';
+import { ChevronRight, ChevronDown } from '@elliemae/ds-icons';
 import { QueryBuilderContext } from '../QueryBuilderContext/QueryBuilderContext.js';
 
 const {
@@ -15,13 +14,16 @@ class DisplayOutput extends Component {
   constructor(props) {
     super(props);
 
-    _defineProperty(this, "handleChange", () => {
-      this.setState(({
-        show
-      }) => ({
-        show: !show
-      }));
-    });
+    this.handleChange = () => {
+      this.setState(_ref => {
+        let {
+          show
+        } = _ref;
+        return {
+          show: !show
+        };
+      });
+    };
 
     this.state = {
       show: props.show
@@ -29,16 +31,20 @@ class DisplayOutput extends Component {
   }
 
   render() {
+    var _Grid;
+
     const {
       show
     } = this.state;
     const {
       showLabel,
-      hideLabel
+      hideLabel,
+      displayFixedOutput
     } = this.props;
-    return /*#__PURE__*/_jsx(QueryBuilderContext.Consumer, {}, void 0, ({
-      format
-    }) => {
+    return /*#__PURE__*/_jsx(QueryBuilderContext.Consumer, {}, void 0, _ref2 => {
+      let {
+        format
+      } = _ref2;
       let display = '';
 
       try {
@@ -47,6 +53,17 @@ class DisplayOutput extends Component {
         display = e;
       }
 
+      if (displayFixedOutput) {
+        return /*#__PURE__*/_jsx("div", {
+          className: cssClassName
+        }, void 0, _Grid || (_Grid = /*#__PURE__*/_jsx(Grid, {
+          p: "xxs"
+        }, void 0, /*#__PURE__*/_jsx("strong", {}, void 0, displayFixedOutput))), /*#__PURE__*/_jsx(Grid, {
+          pl: "xxs",
+          pr: "xxs"
+        }, void 0, display));
+      }
+
       return /*#__PURE__*/_jsx("div", {
         className: cssClassName
       }, void 0, /*#__PURE__*/_jsx(DSAccordion, {

package/esm/components/DragContainerController/DragContainerController.js

@@ -1,24 +1,24 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { convertPropToCssClassName } from '@elliemae/ds-classnames';
-import MoreOptionsVert from '@elliemae/ds-icons/MoreOptionsVert';
-import { DSIconColors, DSIconSizes } from '@elliemae/ds-basic/Icon';
-import GripperVertical from '@elliemae/ds-icons/GripperVertical';
+import { DSIconColors, DSIconSizes } from '@elliemae/ds-icon';
+import { GripperVertical, MoreOptionsVert } from '@elliemae/ds-icons';
 
 var _div;
 
-const DragContainerController = ({
-  color = DSIconColors.NEUTRAL,
-  icon: Icon = GripperVertical,
-  size = DSIconSizes.S,
-  multipleSize = false,
-  onClick
-}) => {
+const DragContainerController = _ref => {
+  let {
+    color = DSIconColors.NEUTRAL,
+    icon: Icon = GripperVertical,
+    size = DSIconSizes.S,
+    multipleSize = false,
+    onClick
+  } = _ref;
   const {
     cssClassName
   } = convertPropToCssClassName('query-builder-drag-group');
   return /*#__PURE__*/_jsx("div", {
-    className: `${cssClassName}`
+    className: "".concat(cssClassName)
   }, void 0, /*#__PURE__*/_jsx(Icon, {
     color: color,
     size: size

package/esm/components/DragControllerRow/DragControllerRow.js

@@ -1,9 +1,14 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import 'react';
-import GripperVertical from '@elliemae/ds-icons/GripperVertical';
-import { DSIconSizes } from '@elliemae/ds-basic/Icon';
+import { DSIconSizes } from '@elliemae/ds-icon';
+import { GripperVertical } from '@elliemae/ds-icons';
 import { jsx } from 'react/jsx-runtime';
 
 const _excluded = ["className", "color", "icon", "size"];