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

package/cjs/plugins/row-dnd/DndRowsPlugin.js

@@ -1,136 +1,115 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var DndRowsPlugin_exports = {};
-__export(DndRowsPlugin_exports, {
-  DndRowsPlugin: () => DndRowsPlugin
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_react_sortable_hoc = require("react-sortable-hoc");
-var import_ds_icons = require("@elliemae/ds-icons");
-var import_ds_utilities = require("@elliemae/ds-utilities");
-var import_initColumnDefinition = require("@elliemae/ds-shared/useDataGrid/initColumnDefinition");
-var import_createInstancePlugin = require("@elliemae/ds-shared/createDataInstance/createInstancePlugin");
-const keysToOmit = [
-  "axis",
-  "contentWindow",
-  "disableAutoscroll",
-  "distance",
-  "getContainer",
-  "getHelperDimensions",
-  "helperClass",
-  "helperContainer",
-  "hideSortableGhost",
-  "keyboardSortingTransitionDuration",
-  "lockAxis",
-  "lockOffset",
-  "lockToContainerEdges",
-  "onSortEnd",
-  "onSortMove",
-  "onSortOver",
-  "onSortStart",
-  "pressDelay",
-  "pressThreshold",
-  "shouldCancelStart",
-  "transitionDuration",
-  "updateBeforeSortStart",
-  "useDragHandle",
-  "useWindowAsScrollContainer"
-];
-const DragHandle = (0, import_react_sortable_hoc.SortableHandle)(() => /* @__PURE__ */ import_react.default.createElement(import_ds_icons.GripperVertical, {
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+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 React = require('react');
+var reactSortableHoc = require('react-sortable-hoc');
+var dsIcons = require('@elliemae/ds-icons');
+var dsUtilities = require('@elliemae/ds-utilities');
+var initColumnDefinition = require('@elliemae/ds-shared/useDataGrid/initColumnDefinition');
+var createInstancePlugin = require('@elliemae/ds-shared/createDataInstance/createInstancePlugin');
+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 createInstancePlugin__default = /*#__PURE__*/_interopDefaultLegacy(createInstancePlugin);
+
+var _GripperVertical, _DragHandle;
+
+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 keysToOmit = ['axis', 'contentWindow', 'disableAutoscroll', 'distance', 'getContainer', 'getHelperDimensions', 'helperClass', 'helperContainer', 'hideSortableGhost', 'keyboardSortingTransitionDuration', 'lockAxis', 'lockOffset', 'lockToContainerEdges', 'onSortEnd', 'onSortMove', 'onSortOver', 'onSortStart', 'pressDelay', 'pressThreshold', 'shouldCancelStart', 'transitionDuration', 'updateBeforeSortStart', 'useDragHandle', 'useWindowAsScrollContainer'];
+const DragHandle = reactSortableHoc.SortableHandle(() => _GripperVertical || (_GripperVertical = /*#__PURE__*/_jsx__default["default"](dsIcons.GripperVertical, {
   className: "drag-handle"
-}));
-const translateDnDData = ({ oldIndex, newIndex, index }) => ({
-  sourceIndex: oldIndex,
-  targetIndex: newIndex,
-  fromIndex: index === void 0 ? oldIndex : index
-});
-const decorateColumns = (columns) => {
+})));
+
+const translateDnDData = _ref => {
+  let {
+    oldIndex,
+    newIndex,
+    index
+  } = _ref;
+  return {
+    sourceIndex: oldIndex,
+    targetIndex: newIndex,
+    fromIndex: index === undefined ? oldIndex : index
+  };
+};
+
+const decorateColumns = columns => {
   const dragColumn = {
-    property: "drag",
-    label: "",
+    property: 'drag',
+    label: '',
     visible: true,
     width: 24,
     minWidth: 24,
     special: true
   };
-  return [
-    (0, import_initColumnDefinition.appendCellFormatter)(() => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(DragHandle, null)), dragColumn),
-    ...columns
-  ];
+  return [initColumnDefinition.appendCellFormatter(() => /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: _DragHandle || (_DragHandle = /*#__PURE__*/_jsx__default["default"](DragHandle, {}))
+  }), dragColumn), ...columns];
 };
+
 const getBodyProps = (props, grid) => {
-  const { onMoveRowEnd, onReorder, onMoveRowStart } = grid.props;
-  return {
-    ...props,
-    onSortEnd: (data) => {
+  const {
+    onMoveRowEnd,
+    onReorder,
+    onMoveRowStart
+  } = grid.props;
+  return _objectSpread(_objectSpread({}, props), {}, {
+    onSortEnd: data => {
       grid.enableEvents();
       grid.setIsRowDragging(false);
       onMoveRowEnd(translateDnDData(data));
     },
-    onSortStart: (...args) => {
+    onSortStart: function () {
       grid.disableEvents();
       grid.setIsRowDragging(true);
-      onMoveRowStart(...args);
+      onMoveRowStart(...arguments);
     },
-    onSortOver: (data) => {
+    onSortOver: data => {
       onReorder(translateDnDData(data));
     },
-    lockAxis: "y",
+    lockAxis: 'y',
     useDragHandle: true,
-    helperClass: "row-drag-helper",
-    getContainer: () => new Promise((resolve) => {
+    helperClass: 'row-drag-helper',
+    // a promise is needed, since sortable it's mounted before it's container
+    getContainer: () => new Promise(resolve => {
       setTimeout(() => {
         resolve(grid.refs.innerBody.current || grid.refs.body.current);
       }, 100);
     })
-  };
+  });
 };
-const decorateRenderers = (renderers) => {
+
+const decorateRenderers = renderers => {
   const RowComponent = renderers.body.row;
   const BodyWrapperComponent = renderers.body.wrapper;
-  const Row = (0, import_react.useMemo)(() => (0, import_react_sortable_hoc.SortableElement)(RowComponent), []);
-  const BodyWrapper = (0, import_react.useMemo)(() => (0, import_react_sortable_hoc.SortableContainer)((props) => /* @__PURE__ */ import_react.default.createElement(BodyWrapperComponent, {
-    ...(0, import_ds_utilities.omit)(props, keysToOmit)
-  })), []);
-  return {
-    ...renderers,
-    body: {
-      ...renderers.body,
+  const Row = React.useMemo(() => reactSortableHoc.SortableElement(RowComponent), []);
+  const BodyWrapper = React.useMemo(() => reactSortableHoc.SortableContainer(props => /*#__PURE__*/jsxRuntime.jsx(BodyWrapperComponent, _objectSpread({}, dsUtilities.omit(props, keysToOmit)))), []);
+  return _objectSpread(_objectSpread({}, renderers), {}, {
+    body: _objectSpread(_objectSpread({}, renderers.body), {}, {
       wrapper: BodyWrapper,
       row: Row
-    }
-  };
+    })
+  });
 };
-const DndRowsPlugin = (0, import_createInstancePlugin.createInstancePlugin)("dnd-rows", {
+
+const DndRowsPlugin = createInstancePlugin__default["default"]('dnd-rows', {
   decorateColumns,
   getBodyProps,
   decorateRenderers
 });
-module.exports = __toCommonJS(DndRowsPlugin_exports);
-//# sourceMappingURL=DndRowsPlugin.js.map
+
+exports.DndRowsPlugin = DndRowsPlugin;

package/cjs/plugins/row-dnd/index.js

@@ -1,35 +1,9 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var row_dnd_exports = {};
-__export(row_dnd_exports, {
-  DndRowsPlugin: () => import_DndRowsPlugin.DndRowsPlugin
-});
-var React = __toESM(require("react"));
-var import_DndRowsPlugin = require("./DndRowsPlugin");
-module.exports = __toCommonJS(row_dnd_exports);
-//# sourceMappingURL=index.js.map
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DndRowsPlugin = require('./DndRowsPlugin.js');
+
+
+
+exports.DndRowsPlugin = DndRowsPlugin.DndRowsPlugin;

package/cjs/plugins/selectable/SelectablePlugin.js

@@ -1,42 +1,21 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var SelectablePlugin_exports = {};
-__export(SelectablePlugin_exports, {
-  SelectablePlugin: () => SelectablePlugin
-});
-var React = __toESM(require("react"));
-var import_react = require("react");
-var import_obj_str = __toESM(require("obj-str"));
-var import_ds_utilities = require("@elliemae/ds-utilities");
-var import_createInstancePlugin = require("@elliemae/ds-shared/createDataInstance/createInstancePlugin");
-var import_addSelectableColumn = require("./addSelectableColumn");
-var import_useSelectableState = require("./useSelectableState");
-var import_helper = require("./helper");
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var cx = require('obj-str');
+var dsUtilities = require('@elliemae/ds-utilities');
+var createInstancePlugin = require('@elliemae/ds-shared/createDataInstance/createInstancePlugin');
+var addSelectableColumn = require('./addSelectableColumn.js');
+var useSelectableState = require('./useSelectableState.js');
+var helper = require('./helper.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var createInstancePlugin__default = /*#__PURE__*/_interopDefaultLegacy(createInstancePlugin);
+
 const decorateColumns = (columns, grid) => {
   const {
     props: {
@@ -46,12 +25,17 @@ const decorateColumns = (columns, grid) => {
       multiSelectFilterLabels,
       multiSelectComponent
     },
-    actions: { selectAll: handleSelectAll, selectRow: handleSelectRow },
-    state: { selection }
+    actions: {
+      selectAll: handleSelectAll,
+      selectRow: handleSelectRow
+    },
+    state: {
+      selection
+    }
   } = grid;
-  const createSelectionColumn = (0, import_addSelectableColumn.selectionColumnCreator)({
+  const createSelectionColumn = addSelectableColumn.selectionColumnCreator({
     grid,
-    multiple: selectable === "multi",
+    multiple: selectable === 'multi',
     selectAll: selection.selectAll,
     onSelectAll: handleSelectAll,
     onSelectRow: handleSelectRow,
@@ -60,63 +44,102 @@ const decorateColumns = (columns, grid) => {
     multiSelectFilterLabels,
     multiSelectComponent
   });
-  const { showSelectColumn, selectionColumnDefinition } = grid.props;
+  const {
+    showSelectColumn,
+    selectionColumnDefinition
+  } = grid.props;
+
   if (showSelectColumn) {
     const selectionColumn = createSelectionColumn(selectionColumnDefinition);
     return [selectionColumn, ...columns];
   }
+
   return columns;
 };
-const getRowProps = (rowProps, grid, { rowData }) => {
+
+const getRowProps = (rowProps, grid, _ref) => {
+  let {
+    rowData
+  } = _ref;
   const {
-    props: { showSelectHighlight, showSelectColumn, rowKey },
-    actions: { selectRow }
+    props: {
+      showSelectHighlight,
+      showSelectColumn,
+      rowKey
+    },
+    actions: {
+      selectRow
+    }
   } = grid.getInstance();
-  const { _index } = rowData;
-  const isSelected = rowData["metaData.selected"];
+  const {
+    _index
+  } = rowData;
+  const isSelected = rowData['metaData.selected'];
+
   if (!showSelectColumn) {
     rowProps.onClick = () => selectRow(rowData[rowKey], _index);
   }
-  rowProps.className = (0, import_obj_str.default)({
+
+  rowProps.className = cx__default["default"]({
     [rowProps.className]: true,
     selected: isSelected,
-    "select-highlight": showSelectHighlight && isSelected
+    'select-highlight': showSelectHighlight && isSelected
   });
   return rowProps;
 };
+
 const composeRows = (rows, grid) => {
   const {
-    props: { isRowSelected, multiple, rowKey },
-    state: { selection }
+    props: {
+      isRowSelected,
+      multiple,
+      rowKey
+    },
+    state: {
+      selection
+    }
   } = grid.getInstance();
-  const selectionPredicate = (row) => (0, import_ds_utilities.isFunction)(isRowSelected) ? isRowSelected(row) : !!selection.selectedRows[row[rowKey]];
-  return multiple ? (0, import_helper.selectMultipleRow)(rows, selectionPredicate) : (0, import_helper.selectSingleRow)(rows, selectionPredicate);
+
+  const selectionPredicate = row => dsUtilities.isFunction(isRowSelected) ? isRowSelected(row) : !!selection.selectedRows[row[rowKey]];
+
+  return multiple ? helper.selectMultipleRow(rows, selectionPredicate) : helper.selectSingleRow(rows, selectionPredicate);
 };
-const decorateGrid = (grid) => {
+
+const decorateGrid = grid => {
+  // const handler = useRef();
   const {
-    props: { isRowSelected, rowKey },
-    actions: { selectRow },
-    state: { selection }
+    props: {
+      isRowSelected,
+      rowKey
+    },
+    actions: {
+      selectRow
+    },
+    state: {
+      selection
+    }
   } = grid.getInstance();
-  const [shiftPressed, setShiftPressed] = (0, import_react.useState)(false);
-  const [lastSelectedRow, setLastSelectedRow] = (0, import_react.useState)(null);
-  const selectRowHandler = (0, import_react.useCallback)((rowData, index) => () => selectRow(rowData[rowKey], index, shiftPressed), [isRowSelected, selection, shiftPressed]);
-  (0, import_react.useEffect)(() => {
-    const keyDownListener = (event) => {
-      if (event.key === "Shift" && event.target.tagName.toLowerCase() !== "input" && event.target.parentNode.className !== "em-ds-combobox__input") {
+  const [shiftPressed, setShiftPressed] = React.useState(false);
+  const [lastSelectedRow, setLastSelectedRow] = React.useState(null);
+  const selectRowHandler = React.useCallback((rowData, index) => () => selectRow(rowData[rowKey], index, shiftPressed), [isRowSelected, selection, shiftPressed]);
+  React.useEffect(() => {
+    const keyDownListener = event => {
+      if (event.key === 'Shift' && event.target.tagName.toLowerCase() !== 'input' && event.target.parentNode.className !== 'em-ds-combobox__input') {
         setShiftPressed(true);
       }
     };
-    const keyUpListener = (event) => {
-      if (event.key === "Shift" && event.target.tagName.toLowerCase() !== "input" && event.target.parentNode.className !== "em-ds-combobox__input") {
+
+    const keyUpListener = event => {
+      if (event.key === 'Shift' && event.target.tagName.toLowerCase() !== 'input' && event.target.parentNode.className !== 'em-ds-combobox__input') {
         setShiftPressed(false);
       }
     };
-    window.addEventListener("keydown", keyDownListener);
-    window.addEventListener("keyup", keyUpListener);
+
+    window.addEventListener('keydown', keyDownListener);
+    window.addEventListener('keyup', keyUpListener);
     return () => {
-      window.removeEventListener("keydown", keyDownListener);
-      window.removeEventListener("keyup", keyUpListener);
+      window.removeEventListener('keydown', keyDownListener);
+      window.removeEventListener('keyup', keyUpListener);
     };
   });
   return {
@@ -126,41 +149,51 @@ const decorateGrid = (grid) => {
     lastSelectedRow
   };
 };
-const SelectablePlugin = (0, import_createInstancePlugin.createInstancePlugin)("selectable", {
+
+const SelectablePlugin = createInstancePlugin__default["default"]('selectable', {
   decorateGrid,
-  registerStateHook: import_useSelectableState.useSelectableState,
+  registerStateHook: useSelectableState.useSelectableState,
   decorateColumns,
   getRowProps,
   composeRows,
+
   registerHotKeys(grid) {
-    return [
-      {
-        key: "space",
-        handler: ({ rowIndex }) => {
-          const {
-            composedRows,
-            props: { rowKey },
-            actions: { selectRow }
-          } = grid.getInstance();
-          const rows = composedRows.rows || composedRows;
-          const row = rows[rowIndex];
-          if (!row)
-            return;
-          selectRow(row[rowKey], rowIndex);
-        }
-      },
-      {
-        key: "ctrl+a",
-        handler: () => {
-          const {
-            state: { selection },
-            actions: { selectAll }
-          } = grid.getInstance();
-          selectAll(!selection.selectAll);
-        }
+    return [{
+      key: 'space',
+      handler: _ref2 => {
+        let {
+          rowIndex
+        } = _ref2;
+        const {
+          composedRows,
+          props: {
+            rowKey
+          },
+          actions: {
+            selectRow
+          }
+        } = grid.getInstance();
+        const rows = composedRows.rows || composedRows;
+        const row = rows[rowIndex];
+        if (!row) return;
+        selectRow(row[rowKey], rowIndex);
+      }
+    }, {
+      key: 'ctrl+a',
+      handler: () => {
+        const {
+          state: {
+            selection
+          },
+          actions: {
+            selectAll
+          }
+        } = grid.getInstance();
+        selectAll(!selection.selectAll);
       }
-    ];
+    }];
   }
+
 });
-module.exports = __toCommonJS(SelectablePlugin_exports);
-//# sourceMappingURL=SelectablePlugin.js.map
+
+exports.SelectablePlugin = SelectablePlugin;