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

package/esm/plugins/editable/EditableComponents/TextBox.js

@@ -1,12 +1,29 @@
-import * as React from "react";
-import React2, { Component } from "react";
-import { DSTextBox } from "@elliemae/ds-form";
+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 React, { Component } from 'react';
+import { DSTextBox } from '@elliemae/ds-form';
+import { jsx } from 'react/jsx-runtime';
+
+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; }
 class TextBox extends Component {
   constructor(props) {
     super(props);
-    this.inputRef = React2.createRef();
-    this.state = { value: props.value };
+    this.inputRef = /*#__PURE__*/React.createRef();
+    this.state = {
+      value: props.value
+    };
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleKeyUp = this.handleKeyUp.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
   }
+
   componentDidMount() {
     setTimeout(() => {
       if (this.inputRef && this.inputRef.current) {
@@ -14,48 +31,73 @@ class TextBox extends Component {
       }
     }, 50);
   }
-  handleKeyUp({ key, target: { value } }) {
-    const { onValue } = this.props;
-    if (key === "Enter") {
+
+  handleKeyUp(_ref) {
+    let {
+      key,
+      target: {
+        value
+      }
+    } = _ref;
+    const {
+      onValue
+    } = this.props;
+
+    if (key === 'Enter') {
       onValue(value);
     }
   }
+
   handleKeyDown(e) {
-    if (e.key === "Enter") {
+    // PUI-2553 prevent form submit on `Enter` keypress
+    if (e.key === 'Enter') {
       e.preventDefault();
     }
   }
+
   handleBlur(e) {
-    const { onValue } = this.props;
     const {
-      target: { value }
+      onValue
+    } = this.props;
+    const {
+      target: {
+        value
+      }
     } = e;
     onValue(value);
   }
-  handleChange({ target: { value } }) {
-    this.setState({ value });
+
+  handleChange(_ref2) {
+    let {
+      target: {
+        value
+      }
+    } = _ref2;
+    this.setState({
+      value
+    });
   }
+
   render() {
-    const { value } = this.state;
-    return /* @__PURE__ */ React2.createElement(DSTextBox, {
-      "data-testid": "ds-datagrids-editable-text-box",
-      ...this.props,
+    const {
+      value
+    } = this.state;
+    return /*#__PURE__*/jsx(DSTextBox, _objectSpread(_objectSpread({
+      "data-testid": "ds-datagrids-editable-text-box"
+    }, this.props), {}, {
       innerRef: this.inputRef,
       onBlur: this.handleBlur,
       onChange: this.handleChange,
-      onClick: (e) => e.stopPropagation(),
+      onClick: e => e.stopPropagation(),
       onKeyUp: this.handleKeyUp,
       onKeyDown: this.handleKeyDown,
-      value
-    });
+      value: value
+    }));
   }
+
 }
 TextBox.defaultProps = {
   onValue: () => null
 };
-var TextBox_default = TextBox;
-export {
-  TextBox,
-  TextBox_default as default
-};
-//# sourceMappingURL=TextBox.js.map
+
+export { TextBox as default };

package/esm/plugins/editable/EditableComponents/index.js

@@ -1,8 +1,2 @@
-import * as React from "react";
-import { default as default2 } from "./ComboBox";
-import { default as default3 } from "./TextBox";
-export {
-  default2 as ComboBox,
-  default3 as TextBox
-};
-//# sourceMappingURL=index.js.map
+export { default as ComboBox } from './ComboBox.js';
+export { default as TextBox } from './TextBox.js';

package/esm/plugins/editable/EditablePlugin.js

@@ -1,20 +1,42 @@
-import * as React from "react";
-import { useDerivedStateFromProps, toggleInObject } from "@elliemae/ds-utilities";
-import { createInstancePlugin } from "@elliemae/ds-shared/createDataInstance/createInstancePlugin";
-import { addEditableToCell, makeEditableConfig } from "./decorateEditable";
-const registerStateHook = (grid) => {
-  const { rowKey = "id", editingRows: editingRowsProp, onColumnRowEdited, onColumnRowEdit } = grid.props;
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useDerivedStateFromProps, toggleInObject } from '@elliemae/ds-utilities';
+import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
+import { makeEditableConfig, addEditableToCell } from './decorateEditable.js';
+
+const registerStateHook = grid => {
+  const {
+    rowKey = 'id',
+    editingRows: editingRowsProp,
+    onColumnRowEdited,
+    onColumnRowEdit
+  } = grid.props;
   const [editingRows, setEditingRows] = useDerivedStateFromProps(editingRowsProp || {});
-  const activateEdit = (editParams) => {
-    const { shouldRefocus } = grid.getInstance();
-    const { rowData, columnIndex } = editParams;
-    shouldRefocus.current = { forced: true, value: false };
-    setEditingRows((prevEditingRows) => {
+
+  const activateEdit = editParams => {
+    const {
+      shouldRefocus
+    } = grid.getInstance();
+    const {
+      rowData,
+      columnIndex
+    } = editParams;
+    shouldRefocus.current = {
+      forced: true,
+      value: false
+    };
+    setEditingRows(prevEditingRows => {
       onColumnRowEdit(editParams);
       return toggleInObject(prevEditingRows, rowData[rowKey], columnIndex);
     });
   };
-  const editValue = ({ value, rowData, property, rowIndex }) => {
+
+  const editValue = _ref => {
+    let {
+      value,
+      rowData,
+      property,
+      rowIndex
+    } = _ref;
     setEditingRows({});
     onColumnRowEdited({
       value,
@@ -23,17 +45,24 @@ const registerStateHook = (grid) => {
       rowIndex
     });
   };
+
   return {
-    state: { editingRows },
+    state: {
+      editingRows
+    },
     actions: {
       activateEdit,
       editValue
     }
   };
 };
+
 const decorateColumn = (column, grid) => {
   const {
-    props: { isColumnEditable = (col) => col.editable, customHandlers }
+    props: {
+      isColumnEditable = col => col.editable,
+      customHandlers
+    }
   } = grid;
   const editableConfig = makeEditableConfig(grid);
   return isColumnEditable(column) ? addEditableToCell({
@@ -42,25 +71,33 @@ const decorateColumn = (column, grid) => {
     handlers: customHandlers
   }, grid) : column;
 };
-const EditablePlugin = createInstancePlugin("editable", {
+
+const EditablePlugin = createInstancePlugin('editable', {
   registerStateHook,
   decorateColumn,
+
   registerHotKeys(grid) {
     return {
-      key: "enter",
-      handler: ({ rowIndex, cellIndex }) => {
+      key: 'enter',
+      handler: _ref2 => {
+        let {
+          rowIndex,
+          cellIndex
+        } = _ref2;
         const {
           composedRows,
           decoratedColumns,
-          actions: { activateEdit },
-          props: { isColumnEditable }
+          actions: {
+            activateEdit
+          },
+          props: {
+            isColumnEditable
+          }
         } = grid.getInstance();
-        if (!isColumnEditable(decoratedColumns[cellIndex]))
-          return;
+        if (!isColumnEditable(decoratedColumns[cellIndex])) return;
         const rows = composedRows.rows || composedRows;
         const row = rows[rowIndex];
-        if (!row)
-          return;
+        if (!row) return;
         activateEdit({
           rowData: row,
           columnIndex: cellIndex
@@ -72,8 +109,7 @@ const EditablePlugin = createInstancePlugin("editable", {
       }
     };
   }
+
 });
-export {
-  EditablePlugin
-};
-//# sourceMappingURL=EditablePlugin.js.map
+
+export { EditablePlugin };

package/esm/plugins/editable/decorateEditable.js

@@ -1,56 +1,92 @@
-import * as React from "react";
-import React2 from "react";
-import * as edit from "react-edit";
-import { EditPencil } from "@elliemae/ds-icons";
-import { cx } from "@elliemae/ds-utilities";
-import { appendCellFormatter } from "@elliemae/ds-shared/useDataGrid/initColumnDefinition";
-import { getEditorComponent } from "./getEditorComponent";
-const makeEditableConfig = (grid) => edit.edit({
-  isEditing: ({ columnIndex, rowData, column = {}, ...rest }) => {
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'react';
+import * as edit from 'react-edit';
+import { EditPencil } from '@elliemae/ds-icons';
+import { cx } from '@elliemae/ds-utilities';
+import { appendCellFormatter } from '@elliemae/ds-shared/useDataGrid/initColumnDefinition';
+import getEditorComponent from './getEditorComponent.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+var _EditPencil, _span;
+
+const _excluded = ["columnIndex", "rowData", "column"];
+
+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 makeEditableConfig = grid => edit.edit({
+  isEditing: _ref => {
+    let {
+      columnIndex,
+      rowData,
+      column = {}
+    } = _ref,
+        rest = _objectWithoutProperties(_ref, _excluded);
+
     const {
-      state: { editingRows },
-      props: { rowKey }
+      state: {
+        editingRows
+      },
+      props: {
+        rowKey
+      }
     } = grid.getInstance();
     let isCustomEditing;
-    if (typeof column.isEditing === "function") {
-      isCustomEditing = column.isEditing({
+
+    if (typeof column.isEditing === 'function') {
+      isCustomEditing = column.isEditing(_objectSpread({
         columnIndex,
         rowData,
-        column,
-        ...rest
-      });
+        column
+      }, rest));
     }
+
     return editingRows[rowData[rowKey]] === columnIndex || column.alwaysEditing || isCustomEditing;
   },
   onActivate: () => null,
-  onValue: (...args) => grid.getInstance().actions.editValue(...args)
+  onValue: function () {
+    return grid.getInstance().actions.editValue(...arguments);
+  }
 });
-const addEditableToCell = ({ column, config, handlers }, grid) => {
+
+const addEditableToCell = (_ref2, grid) => {
+  let {
+    column,
+    config,
+    handlers
+  } = _ref2;
   column.cell.transforms.push(config(getEditorComponent(column.customEditor, handlers)));
-  column.cell.props.className = cx(column.cell.props.className, `editable${column.customEditor ? " customEditor" : ""}`);
-  return appendCellFormatter([
-    (value, extraParams) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", {
-      onClick: (e) => {
+  column.cell.props.className = cx(column.cell.props.className, "editable".concat(column.customEditor ? ' customEditor' : ''));
+  return appendCellFormatter([(value, extraParams) => /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/_jsx("div", {
+      onClick: e => {
         e.stopPropagation();
         grid.getInstance().actions.activateEdit(extraParams);
       },
-      onKeyUp: (e) => {
+      onKeyUp: e => {
         e.stopPropagation();
+
         if (e.keyCode === 33) {
           grid.getInstance().actions.activateEdit(extraParams);
         }
       },
       role: "gridcell",
       tabIndex: 0
-    }, value, /* @__PURE__ */ React2.createElement(EditPencil, {
+    }, void 0, value, _EditPencil || (_EditPencil = /*#__PURE__*/_jsx(EditPencil, {
       className: "edit-pencil"
-    }), /* @__PURE__ */ React2.createElement("span", {
+    })), _span || (_span = /*#__PURE__*/_jsx("span", {
       className: "edit-separator"
-    }, " ")))
-  ], column);
-};
-export {
-  addEditableToCell,
-  makeEditableConfig
+    }, void 0, " ")))
+  })], column);
 };
-//# sourceMappingURL=decorateEditable.js.map
+
+export { addEditableToCell, makeEditableConfig };

package/esm/plugins/editable/getEditorComponent.js

@@ -1,47 +1,74 @@
-import * as React from "react";
-import React2 from "react";
-import { ComboBox, TextBox } from "./EditableComponents";
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'react';
+import ComboBox from './EditableComponents/ComboBox.js';
+import TextBox from './EditableComponents/TextBox.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["type"];
+
+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 components = {
   DSComboBox: ComboBox,
   DSTextBox: TextBox
 };
-const getEditorComponent = (editorComponent = {}, handlers) => ({
-  value,
-  onValue,
-  extraParameters
-}) => {
-  if (typeof editorComponent === "function") {
-    return editorComponent({
+
+const getEditorComponent = function () {
+  let editorComponent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let handlers = arguments.length > 1 ? arguments[1] : undefined;
+  return _ref => {
+    let {
       value,
       onValue,
-      customHandlers: handlers,
-      ...extraParameters
-    });
-  }
-  const { type = "DSTextBox", ...restEditorProps } = editorComponent;
-  const Component = components[type];
-  if (type === "DSComboBox") {
-    const maxOptions = restEditorProps?.options?.length || 100;
-    return /* @__PURE__ */ React2.createElement("div", {
-      style: { zIndex: 0 }
-    }, /* @__PURE__ */ React2.createElement(Component, {
+      extraParameters
+    } = _ref;
+
+    if (typeof editorComponent === 'function') {
+      return editorComponent(_objectSpread({
+        value,
+        onValue,
+        customHandlers: handlers
+      }, extraParameters));
+    }
+
+    const {
+      type = 'DSTextBox'
+    } = editorComponent,
+          restEditorProps = _objectWithoutProperties(editorComponent, _excluded);
+
+    const Component = components[type];
+
+    if (type === 'DSComboBox') {
+      var _restEditorProps$opti;
+
+      // TODO: remove this whole condition when combobox v3 is out and fully working without "maxOptions" parameter
+      const maxOptions = (restEditorProps === null || restEditorProps === void 0 ? void 0 : (_restEditorProps$opti = restEditorProps.options) === null || _restEditorProps$opti === void 0 ? void 0 : _restEditorProps$opti.length) || 100;
+      return /*#__PURE__*/_jsx("div", {
+        style: {
+          zIndex: 0
+        }
+      }, void 0, /*#__PURE__*/jsx(Component, _objectSpread({
+        autoFocus: true,
+        onValue: onValue,
+        value: value,
+        maxOptions: maxOptions
+      }, restEditorProps)));
+    }
+
+    return /*#__PURE__*/jsx(Component, _objectSpread({
       autoFocus: true,
-      onValue,
-      value,
-      maxOptions,
-      ...restEditorProps
-    }));
-  }
-  return /* @__PURE__ */ React2.createElement(Component, {
-    autoFocus: true,
-    onValue,
-    value,
-    ...restEditorProps
-  });
-};
-var getEditorComponent_default = getEditorComponent;
-export {
-  getEditorComponent_default as default,
-  getEditorComponent
+      onValue: onValue,
+      value: value
+    }, restEditorProps));
+  };
 };
-//# sourceMappingURL=getEditorComponent.js.map
+
+export { getEditorComponent as default };

package/esm/plugins/editable/index.js

@@ -1,9 +1,3 @@
-import * as React from "react";
-import { EditablePlugin } from "./EditablePlugin";
-import { ComboBox, TextBox } from "./EditableComponents";
-export {
-  ComboBox,
-  EditablePlugin,
-  TextBox
-};
-//# sourceMappingURL=index.js.map
+export { EditablePlugin } from './EditablePlugin.js';
+export { default as ComboBox } from './EditableComponents/ComboBox.js';
+export { default as TextBox } from './EditableComponents/TextBox.js';