@elliemae/ds-query-builder 2.3.0-alpha.9 → 2.3.0-next.11

package/cjs/DSQueryBuilder.js

@@ -0,0 +1,98 @@
+'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
+  });
+};
+
+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

@@ -0,0 +1,222 @@
+'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.handleMouseMove(e)
+    };
+
+    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 = () => {
+      this.handleTooltipRow(false);
+    };
+
+    this.handleTooltipRow = isOpen => {
+      this.setState({
+        isOpen
+      });
+      const {
+        handleTooltipGroup
+      } = this.props;
+      handleTooltipGroup(isOpen);
+    };
+
+    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,
+      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)
+      }, 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',
+  condition: true,
+  showDragController: true,
+  allowUnGroup: true,
+  buttonActionSize: dsIcon.DSIconSizes.M,
+  buttonActionType: 'text',
+  toogleActionSize: dsIcon.DSIconSizes.S,
+  onAddFilter: () => null,
+  multipleSize: false,
+  delayClose: constants.DELAY_CLOSE,
+  delayOpen: constants.DELAY_OPEN,
+  step: null,
+  toolBarAnimationDuration: constants.TOOLBAR_ANIMATION_DURATION,
+  toolBarInteractionType: dsPopper.PopperInteractions.CLICK,
+  toolBarPosition: dsPopper.PopperPositions.LEFT
+};
+
+module.exports = AndOrController;

package/cjs/components/ConditionController/ConditionController.js

@@ -0,0 +1,100 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var dsClassnames = require('@elliemae/ds-classnames');
+var DSTooltip = require('@elliemae/ds-tooltip');
+var dsPopper = require('@elliemae/ds-popper');
+var dsIcon = require('@elliemae/ds-icon');
+var dsIcons = require('@elliemae/ds-icons');
+var DSButton = require('@elliemae/ds-button');
+var ToolBarAnimation = require('../ToolBarAnimation/ToolBarAnimation.js');
+var constants = require('../helpers/constants.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var DSTooltip__default = /*#__PURE__*/_interopDefaultLegacy(DSTooltip);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+var _ToolBarAnimation, _QueryRemove, _QueryAdd, _ParenthesisAdd;
+
+const ConditionController = _ref => {
+  let {
+    onAddFilter = () => null,
+    onAddRuleContainer = () => null,
+    onRemoveFilter = () => null,
+    handleTooltipRow = () => null,
+    buttonTriggerSize = dsIcon.DSIconSizes.M,
+    buttonTriggerType = 'text',
+    buttonActionSize = dsIcon.DSIconSizes.M,
+    buttonActionType = 'text',
+    delayClose = constants.DELAY_CLOSE,
+    delayOpen = constants.DELAY_OPEN,
+    isOpen = false,
+    toolTipZIndex
+  } = _ref;
+  const {
+    cssClassName,
+    classNameBlock,
+    classNameElement
+  } = dsClassnames.convertPropToCssClassName('query-builder-condition-controller');
+  return /*#__PURE__*/_jsx__default["default"]("div", {
+    className: cssClassName
+  }, void 0, /*#__PURE__*/_jsx__default["default"](DSTooltip__default["default"], {
+    delayClose: delayClose,
+    delayOpen: delayOpen,
+    interactionType: dsPopper.PopperInteractions.CLICK,
+    isOpen: isOpen,
+    onOpen: handleTooltipRow,
+    placement: dsPopper.PopperPositions.LEFT,
+    springAnimationComponent: _ToolBarAnimation || (_ToolBarAnimation = /*#__PURE__*/_jsx__default["default"](ToolBarAnimation.ToolBarAnimation, {
+      duration: constants.TOOLBAR_ANIMATION_DURATION
+    })),
+    title: /*#__PURE__*/_jsx__default["default"]("div", {
+      className: classNameBlock('actions')
+    }, void 0, /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+      buttonType: buttonActionType,
+      className: classNameElement('remove-rule'),
+      icon: _QueryRemove || (_QueryRemove = /*#__PURE__*/_jsx__default["default"](dsIcons.QueryRemove, {})),
+      onClick: onRemoveFilter,
+      size: buttonActionSize,
+      containerProps: {
+        'data-testid': 'query-remove-button'
+      }
+    }), /*#__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'
+      }
+    }), /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+      buttonType: buttonActionType,
+      className: "".concat(classNameElement('add-rule-container'), " no-border-right"),
+      icon: _ParenthesisAdd || (_ParenthesisAdd = /*#__PURE__*/_jsx__default["default"](dsIcons.ParenthesisAdd, {})),
+      onClick: onAddRuleContainer,
+      size: buttonActionSize,
+      containerProps: {
+        'data-testid': 'parenthesis-add-button'
+      }
+    })),
+    tooltipType: DSTooltip.TooltipType.TOOLBAR,
+    triggerComponent: /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+      buttonType: buttonTriggerType,
+      icon: /*#__PURE__*/_jsx__default["default"](dsIcons.MoreOptionsVert, {
+        color: ['neutral', '500']
+      }),
+      onClick: handleTooltipRow,
+      size: buttonTriggerSize,
+      containerProps: {
+        'data-testid': 'condition-more-options-button'
+      }
+    }),
+    zIndex: toolTipZIndex
+  }));
+};
+
+module.exports = ConditionController;

package/cjs/components/DisplayOutput/DisplayOutput.js

@@ -0,0 +1,93 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var dsGrid = require('@elliemae/ds-grid');
+var dsClassnames = require('@elliemae/ds-classnames');
+var dsAccordion = require('@elliemae/ds-accordion');
+var dsIcons = require('@elliemae/ds-icons');
+var QueryBuilderContext = require('../QueryBuilderContext/QueryBuilderContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const {
+  cssClassName
+} = dsClassnames.convertPropToCssClassName('query-builder-output');
+
+class DisplayOutput extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleChange = () => {
+      this.setState(_ref => {
+        let {
+          show
+        } = _ref;
+        return {
+          show: !show
+        };
+      });
+    };
+
+    this.state = {
+      show: props.show
+    };
+  }
+
+  render() {
+    var _Grid;
+
+    const {
+      show
+    } = this.state;
+    const {
+      showLabel,
+      hideLabel,
+      displayFixedOutput
+    } = this.props;
+    return /*#__PURE__*/_jsx__default["default"](QueryBuilderContext.QueryBuilderContext.Consumer, {}, void 0, _ref2 => {
+      let {
+        format
+      } = _ref2;
+      let display = '';
+
+      try {
+        display = typeof format === 'object' ? JSON.stringify(format) : format;
+      } catch (e) {
+        display = e;
+      }
+
+      if (displayFixedOutput) {
+        return /*#__PURE__*/_jsx__default["default"]("div", {
+          className: cssClassName,
+          "data-testid": "qb-fixed-output-wrapper"
+        }, void 0, _Grid || (_Grid = /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+          p: "xxs"
+        }, void 0, /*#__PURE__*/_jsx__default["default"]("strong", {
+          "data-testid": "qb-fixed-output-label"
+        }, void 0, displayFixedOutput))), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+          pl: "xxs",
+          pr: "xxs",
+          "data-testid": "qb-fixed-output-content"
+        }, void 0, display));
+      }
+
+      return /*#__PURE__*/_jsx__default["default"]("div", {
+        className: cssClassName
+      }, void 0, /*#__PURE__*/_jsx__default["default"](dsAccordion.DSAccordion, {
+        activeValue: show,
+        onChange: this.handleChange
+      }, void 0, /*#__PURE__*/_jsx__default["default"](dsAccordion.DSAccordionItem, {
+        iconClosed: dsIcons.ChevronRight,
+        iconOpened: dsIcons.ChevronDown,
+        title: show ? hideLabel : showLabel,
+        value: true
+      }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, display))));
+    });
+  }
+
+}
+
+module.exports = DisplayOutput;

package/cjs/components/DragContainerController/DragContainerController.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var dsClassnames = require('@elliemae/ds-classnames');
+var dsIcon = require('@elliemae/ds-icon');
+var dsIcons = require('@elliemae/ds-icons');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+var _div;
+
+const DragContainerController = _ref => {
+  let {
+    color = dsIcon.DSIconColors.NEUTRAL,
+    icon: Icon = dsIcons.GripperVertical,
+    size = dsIcon.DSIconSizes.S,
+    multipleSize = false,
+    onClick
+  } = _ref;
+  const {
+    cssClassName
+  } = dsClassnames.convertPropToCssClassName('query-builder-drag-group');
+  return /*#__PURE__*/_jsx__default["default"]("div", {
+    className: "".concat(cssClassName)
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Icon, {
+    color: color,
+    size: size
+  }), _div || (_div = /*#__PURE__*/_jsx__default["default"]("div", {
+    className: "separator"
+  })), /*#__PURE__*/_jsx__default["default"](dsIcons.MoreOptionsVert, {
+    color: color,
+    onClick: onClick,
+    size: size
+  }), multipleSize && /*#__PURE__*/_jsx__default["default"](Icon, {
+    className: "additional-drag",
+    color: color,
+    onClick: onClick,
+    size: size
+  }));
+};
+
+module.exports = DragContainerController;

package/cjs/components/DragControllerRow/DragControllerRow.js

@@ -0,0 +1,47 @@
+'use strict';
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('react');
+var dsIcon = require('@elliemae/ds-icon');
+var dsIcons = require('@elliemae/ds-icons');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["className", "color", "icon", "size"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const DragControllerRow = _ref => {
+  let {
+    className = 'drag-controller',
+    color = ['neutral', '500'],
+    icon: Icon = dsIcons.GripperVertical,
+    size = dsIcon.DSIconSizes.M
+  } = _ref,
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+    className: className
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsx__default["default"](Icon, {
+      color: color,
+      size: size
+    })
+  }));
+};
+
+module.exports = DragControllerRow;

package/cjs/components/FieldControllerRow/FieldControllerRow.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var dsForm = require('@elliemae/ds-form');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const FieldControllerRow = _ref => {
+  let {
+    className = '',
+    onChange = () => null,
+    options = [],
+    value = '',
+    type = 'DSComboBox'
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"]("div", {
+    className: className
+  }, void 0, type === 'DSComboBox' && /*#__PURE__*/_jsx__default["default"](dsForm.DSComboBox, {
+    onChange: onChange,
+    options: options,
+    value: value
+  }), type === 'DSTextBox' && /*#__PURE__*/_jsx__default["default"](dsForm.DSTextBox, {
+    fluidWidth: true,
+    onChange: onChange,
+    options: options,
+    value: value
+  }));
+};
+
+module.exports = FieldControllerRow;