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

package/esm/components/DragContainerController/DragContainerController.js

@@ -1,36 +1,39 @@
-import * as React from "react";
-import React2 from "react";
-import { convertPropToCssClassName } from "@elliemae/ds-classnames";
-import { DSIconColors, DSIconSizes } from "@elliemae/ds-icon";
-import { MoreOptionsVert, GripperVertical } from "@elliemae/ds-icons";
-const DragContainerController = ({
-  color = DSIconColors.NEUTRAL,
-  icon: Icon = GripperVertical,
-  size = DSIconSizes.S,
-  multipleSize = false,
-  onClick
-}) => {
-  const { cssClassName } = convertPropToCssClassName("query-builder-drag-group");
-  return /* @__PURE__ */ React2.createElement("div", {
-    className: `${cssClassName}`
-  }, /* @__PURE__ */ React2.createElement(Icon, {
-    color,
-    size
-  }), /* @__PURE__ */ React2.createElement("div", {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { convertPropToCssClassName } from '@elliemae/ds-classnames';
+import { DSIconColors, DSIconSizes } from '@elliemae/ds-icon';
+import { GripperVertical, MoreOptionsVert } from '@elliemae/ds-icons';
+
+var _div;
+
+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: "".concat(cssClassName)
+  }, void 0, /*#__PURE__*/_jsx(Icon, {
+    color: color,
+    size: size
+  }), _div || (_div = /*#__PURE__*/_jsx("div", {
     className: "separator"
-  }), /* @__PURE__ */ React2.createElement(MoreOptionsVert, {
-    color,
-    onClick,
-    size
-  }), multipleSize && /* @__PURE__ */ React2.createElement(Icon, {
+  })), /*#__PURE__*/_jsx(MoreOptionsVert, {
+    color: color,
+    onClick: onClick,
+    size: size
+  }), multipleSize && /*#__PURE__*/_jsx(Icon, {
     className: "additional-drag",
-    color,
-    onClick,
-    size
+    color: color,
+    onClick: onClick,
+    size: size
   }));
 };
-var DragContainerController_default = DragContainerController;
-export {
-  DragContainerController_default as default
-};
-//# sourceMappingURL=DragContainerController.js.map
+
+export { DragContainerController as default };

package/esm/components/DragControllerRow/DragControllerRow.js

@@ -1,22 +1,39 @@
-import * as React from "react";
-import React2 from "react";
-import { DSIconSizes } from "@elliemae/ds-icon";
-import { GripperVertical } from "@elliemae/ds-icons";
-const DragControllerRow = ({
-  className = "drag-controller",
-  color = ["neutral", "500"],
-  icon: Icon = GripperVertical,
-  size = DSIconSizes.M,
-  ...rest
-}) => /* @__PURE__ */ React2.createElement("div", {
-  className,
-  ...rest
-}, /* @__PURE__ */ React2.createElement(Icon, {
-  color,
-  size
-}));
-var DragControllerRow_default = DragControllerRow;
-export {
-  DragControllerRow_default as default
+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 { DSIconSizes } from '@elliemae/ds-icon';
+import { GripperVertical } from '@elliemae/ds-icons';
+import { jsx } from 'react/jsx-runtime';
+
+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(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 = GripperVertical,
+    size = DSIconSizes.M
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
+    className: className
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsx(Icon, {
+      color: color,
+      size: size
+    })
+  }));
 };
-//# sourceMappingURL=DragControllerRow.js.map
+
+export { DragControllerRow as default };

package/esm/components/FieldControllerRow/FieldControllerRow.js

@@ -1,26 +1,27 @@
-import * as React from "react";
-import React2 from "react";
-import { DSTextBox, DSComboBox } from "@elliemae/ds-form";
-const FieldControllerRow = ({
-  className = "",
-  onChange = () => null,
-  options = [],
-  value = "",
-  type = "DSComboBox"
-}) => /* @__PURE__ */ React2.createElement("div", {
-  className
-}, type === "DSComboBox" && /* @__PURE__ */ React2.createElement(DSComboBox, {
-  onChange,
-  options,
-  value
-}), type === "DSTextBox" && /* @__PURE__ */ React2.createElement(DSTextBox, {
-  fluidWidth: true,
-  onChange,
-  options,
-  value
-}));
-var FieldControllerRow_default = FieldControllerRow;
-export {
-  FieldControllerRow_default as default
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { DSComboBox, DSTextBox } from '@elliemae/ds-form';
+
+const FieldControllerRow = _ref => {
+  let {
+    className = '',
+    onChange = () => null,
+    options = [],
+    value = '',
+    type = 'DSComboBox'
+  } = _ref;
+  return /*#__PURE__*/_jsx("div", {
+    className: className
+  }, void 0, type === 'DSComboBox' && /*#__PURE__*/_jsx(DSComboBox, {
+    onChange: onChange,
+    options: options,
+    value: value
+  }), type === 'DSTextBox' && /*#__PURE__*/_jsx(DSTextBox, {
+    fluidWidth: true,
+    onChange: onChange,
+    options: options,
+    value: value
+  }));
 };
-//# sourceMappingURL=FieldControllerRow.js.map
+
+export { FieldControllerRow as default };

package/esm/components/Nestable/Nestable.js

@@ -1,71 +1,97 @@
-import * as React from "react";
-import React2, { Component } from "react";
-import PropTypes from "prop-types";
-import cn from "classnames";
-import { listWithChildren } from "@elliemae/ds-shared/utils";
-import { isEqualWith } from "@elliemae/ds-utilities";
-import {
-  tryIncreaseDepth,
-  tryDecreaseDepth,
-  moveItem,
-  getItemOptions,
-  getRealNextPath,
-  getPathById,
-  getItemByPath,
-  getItemDepth,
-  getSplicePath,
-  onDragStart,
-  onDragEnd,
-  onMouseMove,
-  onMouseEnter,
-  onToggleCollapse,
-  onKeyDown
-} from "./actions";
-import NestableItem from "./NestableItem";
+import 'core-js/modules/esnext.async-iterator.filter.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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import { Component } from 'react';
+import cn from 'classnames';
+import { listWithChildren } from '@elliemae/ds-shared/utils';
+import { isEqualWith } from '@elliemae/ds-utilities';
+import { tryIncreaseDepth } from './actions/tryIncreaseDepth.js';
+import { tryDecreaseDepth } from './actions/tryDecreaseDepth.js';
+import { moveItem } from './actions/moveItem.js';
+import { getItemDepth, getPathById, getItemByPath, getSplicePath, getRealNextPath } from './actions/paths.js';
+import { onDragStart, onDragEnd, onMouseMove, onMouseEnter, onToggleCollapse, onKeyDown } from './actions/events.js';
+import { getItemOptions } from './actions/getItemOptions.js';
+import NestableItem from './NestableItem.js';
+
+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(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 shallowCompare = (instance, nextProps, nextState) => !isEqualWith(instance.props, nextProps) || !isEqualWith(instance.state, nextState);
+
 class Nestable extends Component {
   constructor(props) {
     super(props);
+
     this.onDragStart = (e, item) => {
       onDragStart.call(this, e, item);
     };
+
     this.onDragEnd = (e, isCancel) => onDragEnd.call(this, e, isCancel);
-    this.onMouseMove = (e) => onMouseMove.call(this, e);
+
+    this.onMouseMove = e => onMouseMove.call(this, e);
+
     this.onMouseEnter = (e, item) => onMouseEnter.call(this, e, item);
+
     this.onToggleCollapse = (item, isGetter) => onToggleCollapse.call(this, item, isGetter);
-    this.onKeyDown = (e) => onKeyDown.call(this, e);
+
+    this.onKeyDown = e => onKeyDown.call(this, e);
+
     this.getDefaultItems = () => {
-      const { items } = this.state;
+      const {
+        items
+      } = this.state;
       return items;
     };
-    this.getItemDepth = (item) => getItemDepth.call(this, item);
+
+    this.getItemDepth = item => getItemDepth.call(this, item);
+
     this.startTrackMouse = () => {
-      document.addEventListener("mousemove", this.onMouseMove);
-      document.addEventListener("mouseup", this.onDragEnd);
-      document.addEventListener("keydown", this.onKeyDown);
+      document.addEventListener('mousemove', this.onMouseMove);
+      document.addEventListener('mouseup', this.onDragEnd);
+      document.addEventListener('keydown', this.onKeyDown);
     };
+
     this.stopTrackMouse = () => {
-      document.removeEventListener("mousemove", this.onMouseMove);
-      document.removeEventListener("mouseup", this.onDragEnd);
-      document.removeEventListener("keydown", this.onKeyDown);
+      document.removeEventListener('mousemove', this.onMouseMove);
+      document.removeEventListener('mouseup', this.onDragEnd);
+      document.removeEventListener('keydown', this.onKeyDown);
       this.elCopyStyles = null;
     };
-    this.isCollapsed = (item) => {
-      const { collapsed } = this.props;
-      const { collapsedGroups } = this.state;
+
+    this.isCollapsed = item => {
+      const {
+        collapsed
+      } = this.props;
+      const {
+        collapsedGroups
+      } = this.state;
       return !!(collapsedGroups.indexOf(item.id) > -1 ^ collapsed);
     };
-    this.checkFilterChildren = (items) => items.find((current) => {
+
+    this.checkFilterChildren = items => items.find(current => {
       const {
-        element: { type },
+        element: {
+          type
+        },
         children
       } = current;
-      if (type === "filter" && children.length > 0)
-        return true;
+      if (type === 'filter' && children.length > 0) return true;
       return this.checkFilterChildren(children);
     });
+
     this.dragRevert = () => {
-      const { itemsOld } = this.state;
+      const {
+        itemsOld
+      } = this.state;
       this.setState({
         items: itemsOld,
         itemsOld: null,
@@ -73,6 +99,7 @@ class Nestable extends Component {
         isDirty: false
       });
     };
+
     this.state = {
       items: [],
       itemsOld: null,
@@ -85,101 +112,163 @@ class Nestable extends Component {
     this.el = null;
     this.elCopyStyles = null;
     this.mouse = {
-      last: { x: 0 },
-      shift: { x: 0 }
+      last: {
+        x: 0
+      },
+      shift: {
+        x: 0
+      }
     };
   }
+
   componentDidMount() {
-    const { childrenProp } = this.props;
-    let { items } = this.props;
+    const {
+      childrenProp
+    } = this.props;
+    let {
+      items
+    } = this.props; // make sure every item has property 'children'
+
     items = listWithChildren(items, childrenProp);
-    this.setState({ items });
+    this.setState({
+      items
+    });
   }
+
   componentWillUnmount() {
     this.stopTrackMouse();
   }
+
   static getDerivedStateFromProps(props, state) {
-    const { items: itemsNew, childrenProp } = props;
-    const { stopTrackingMouse, oldProps } = state;
-    if (shallowCompare({ props: oldProps, state: {} }, props, {})) {
+    const {
+      items: itemsNew,
+      childrenProp
+    } = props;
+    const {
+      stopTrackingMouse,
+      oldProps
+    } = state;
+
+    if (shallowCompare({
+      props: oldProps,
+      state: {}
+    }, props, {})) {
       stopTrackingMouse();
       const extra = {};
+
       if (oldProps.collapsed !== props.collapsed) {
         extra.collapsedGroups = [];
       }
-      return {
+
+      return _objectSpread({
         items: listWithChildren(itemsNew, childrenProp),
         dragItem: null,
         isDirty: false,
-        oldProps: props,
-        ...extra
-      };
+        oldProps: props
+      }, extra);
     }
+
     return null;
   }
-  getPathById(id, items = this.getDefaultItems()) {
+
+  getPathById(id) {
+    let items = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getDefaultItems();
     return getPathById.call(this, id, items);
   }
-  getItemByPath(path, items = this.getDefaultItems()) {
+
+  getItemByPath(path) {
+    let items = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getDefaultItems();
     return getItemByPath.call(this, path, items);
   }
-  getSplicePath(path, options = {}) {
+
+  getSplicePath(path) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     return getSplicePath.call(this, path, options);
   }
+
   getRealNextPath(prevPath, nextPath) {
     return getRealNextPath.call(this, prevPath, nextPath);
   }
+
   getItemOptions() {
     return getItemOptions.call(this);
   }
+
   dragApply() {
-    const { onChange } = this.props;
-    const { items, isDirty, dragItem } = this.state;
+    const {
+      onChange
+    } = this.props;
+    const {
+      items,
+      isDirty,
+      dragItem
+    } = this.state;
     this.setState({
       itemsOld: null,
       dragItem: null,
       isDirty: false
     });
-    if (onChange && isDirty)
-      onChange(items, dragItem);
+    if (onChange && isDirty) onChange(items, dragItem);
   }
+
   tryIncreaseDepth(dragItem) {
     tryIncreaseDepth.call(this, dragItem);
   }
+
   tryDecreaseDepth(dragItem) {
     tryDecreaseDepth.call(this, dragItem);
   }
-  moveItem({ dragItem, pathFrom, pathTo }, extraProps = {}) {
-    moveItem.call(this, { dragItem, pathFrom, pathTo }, extraProps);
+
+  moveItem(_ref) {
+    let {
+      dragItem,
+      pathFrom,
+      pathTo
+    } = _ref;
+    let extraProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    moveItem.call(this, {
+      dragItem,
+      pathFrom,
+      pathTo
+    }, extraProps);
   }
+
   renderDragLayer() {
-    const { group } = this.props;
-    const { dragItem } = this.state;
-    const el = document.querySelector(`.nestable-${group} .nestable-item-${dragItem.id}`);
+    const {
+      group
+    } = this.props;
+    const {
+      dragItem
+    } = this.state;
+    const el = document.querySelector(".nestable-".concat(group, " .nestable-item-").concat(dragItem.id));
     let listStyles = {};
+
     if (el) {
       listStyles.width = el.clientWidth;
     }
+
     if (this.elCopyStyles) {
-      listStyles = {
-        ...listStyles,
-        ...this.elCopyStyles
-      };
+      listStyles = _objectSpread(_objectSpread({}, listStyles), this.elCopyStyles);
     }
+
     const options = this.getItemOptions();
-    return /* @__PURE__ */ React2.createElement("div", {
+    return /*#__PURE__*/_jsx("div", {
       className: "nestable-drag-layer"
-    }, /* @__PURE__ */ React2.createElement("ol", {
+    }, void 0, /*#__PURE__*/_jsx("ol", {
       className: "nestable-list",
       style: listStyles
-    }, /* @__PURE__ */ React2.createElement(NestableItem, {
+    }, void 0, /*#__PURE__*/_jsx(NestableItem, {
       isCopy: true,
       item: dragItem,
-      options
+      options: options
     })));
   }
+
   render() {
-    const { items, dragItem } = this.state;
+    const {
+      items,
+      dragItem
+    } = this.state;
     const {
       group,
       isAndItem,
@@ -190,52 +279,34 @@ class Nestable extends Component {
     } = this.props;
     const options = this.getItemOptions();
     const childLength = items.length;
-    let childClass = "single";
-    if (childLength === 0)
-      childClass = "empty";
-    else if (childLength > 1)
-      childClass = "multiple";
-    return /* @__PURE__ */ React2.createElement("div", {
-      className: cn("nestable", `nestable-${group}`, {
-        "is-drag-active": dragItem
+    let childClass = 'single';
+    if (childLength === 0) childClass = 'empty';else if (childLength > 1) childClass = 'multiple';
+    return /*#__PURE__*/_jsx("div", {
+      className: cn('nestable', "nestable-".concat(group), {
+        'is-drag-active': dragItem
       })
-    }, /* @__PURE__ */ React2.createElement("ol", {
-      className: `nestable-list nestable-group nestable-child-count-${childClass}`
-    }, items.map((item, i) => /* @__PURE__ */ React2.createElement(NestableItem, {
-      key: item.id,
+    }, void 0, /*#__PURE__*/_jsx("ol", {
+      className: "nestable-list nestable-group nestable-child-count-".concat(childClass)
+    }, void 0, items.map((item, i) => /*#__PURE__*/_jsx(NestableItem, {
       index: i,
-      isAndItem,
-      isDraggableItem,
-      isOrItem,
-      item,
-      options,
-      setDraggableItems,
-      singleRow
-    }))), dragItem && this.renderDragLayer());
+      isAndItem: isAndItem,
+      isDraggableItem: isDraggableItem,
+      isOrItem: isOrItem,
+      item: item,
+      options: options,
+      setDraggableItems: setDraggableItems,
+      singleRow: singleRow
+    }, item.id))), dragItem && this.renderDragLayer());
   }
+
 }
+
 Nestable.defaultProps = {
   items: [],
   collapsed: false,
   group: Math.random().toString(36).slice(2),
-  childrenProp: "children",
-  onChange: () => {
-  }
-};
-Nestable.propTypes = {
-  childrenProp: PropTypes.string,
-  group: PropTypes.string,
-  items: PropTypes.arrayOf(PropTypes.shape({})),
-  collapsed: PropTypes.bool,
-  onChange: PropTypes.func,
-  isAndItem: PropTypes.bool,
-  isOrItem: PropTypes.bool,
-  isDraggableItem: PropTypes.bool,
-  setDraggableItems: PropTypes.func,
-  singleRow: PropTypes.bool
-};
-var Nestable_default = Nestable;
-export {
-  Nestable_default as default
+  childrenProp: 'children',
+  onChange: () => {}
 };
-//# sourceMappingURL=Nestable.js.map
+
+export { Nestable as default };