@elliemae/ds-data-table 1.61.0 → 2.0.0-alpha.12

package/esm/configs/useRowFlattenization.js

@@ -1,66 +1,59 @@
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { useMemo } from 'react';
 import { getIdFromUniqueRowAccessor } from '../helpers/getIdFromUniqueRowAccessor.js';
 
-/* eslint-disable max-params */
-var emptyObject = {};
-var trueReturner = new Proxy({}, {
-  get: function get() {
-    return true;
-  }
+const emptyObject = {};
+const trueReturner = new Proxy({}, {
+  get: () => true
 });
 
-var flatten = function flatten(data, expandedRows, uniqueRowAccessor) {
-  var maxDepth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-  var result = [];
+const flatten = function (data, expandedRows, uniqueRowAccessor) {
+  let maxDepth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  const result = [];
 
-  var doit = function doit(row) {
-    var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    var parentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-    var parentIndex = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-    var depth = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
-    var id = (parentId ? "".concat(parentId, ".") : '') + index.toString();
-    var uid = getIdFromUniqueRowAccessor(uniqueRowAccessor, {
-      id: id,
-      original: row
+  const doit = function (row) {
+    let index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    let parentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    let parentIndex = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+    let depth = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+    const id = (parentId ? "".concat(parentId, ".") : '') + index.toString();
+    const uid = getIdFromUniqueRowAccessor(uniqueRowAccessor, {
+      id,
+      original: row !== null && row !== void 0 ? row : {}
     });
-    var isExpanded = expandedRows[uid];
-    var rowToPush = {
-      id: id,
-      uid: uid,
-      index: index,
+    const isExpanded = expandedRows[uid];
+    const rowToPush = {
+      id,
+      uid,
+      index,
       realIndex: result.length,
-      parentId: parentId,
-      parentIndex: parentIndex,
-      depth: depth,
-      isExpanded: isExpanded,
-      original: row
+      parentId,
+      parentIndex,
+      depth,
+      isExpanded,
+      original: row !== null && row !== void 0 ? row : {}
     };
     result.push(rowToPush); // If we have subrows and we are expanded
 
-    if (row.subRows && expandedRows[uid] && depth <= maxDepth) {
-      row.subRows.forEach(function (subRow, i) {
-        return doit(subRow, i, uid, rowToPush.realIndex, depth + 1);
-      });
+    if (row !== null && row !== void 0 && row.subRows && expandedRows[uid] && depth <= maxDepth) {
+      row.subRows.forEach((subRow, i) => doit(subRow, i, uid, rowToPush.realIndex, depth + 1));
     }
   };
 
-  data.forEach(function (row, i) {
-    return doit(row, i);
-  });
+  data.forEach((row, i) => doit(row, i));
   return result;
 };
 
-var useRowFlattenization = function useRowFlattenization(props) {
-  var data = props.data;
-  var expandedRows = props.isExpandable ? props.expandedRows : emptyObject;
-  var flattenedData = useMemo(function () {
-    return flatten(data, expandedRows, props.uniqueRowAccessor);
-  }, [data, expandedRows, props.uniqueRowAccessor]);
-  var allDataFlattened = useMemo(function () {
-    return flatten(data, trueReturner, props.uniqueRowAccessor, Infinity);
-  }, [data, props.uniqueRowAccessor]);
+const useRowFlattenization = props => {
+  const {
+    data
+  } = props;
+  const expandedRows = props.isExpandable ? props.expandedRows : emptyObject;
+  const flattenedData = useMemo(() => flatten(data, expandedRows, props.uniqueRowAccessor), [data, expandedRows, props.uniqueRowAccessor]);
+  const allDataFlattened = useMemo(() => flatten(data, trueReturner, props.uniqueRowAccessor, Infinity), [data, props.uniqueRowAccessor]);
   return [flattenedData, allDataFlattened];
 };
 
 export { useRowFlattenization };
-//# sourceMappingURL=useRowFlattenization.js.map

package/esm/configs/useTableColsWithAddons.js

@@ -1,135 +1,55 @@
-import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
+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 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useMemo, createRef } from 'react';
 import { actionColumn } from '../addons/Columns/ColumnAction/ColumnAction.js';
-import { e as expandRowColumn, b as singleSelectColumn, m as multiSelectColumn, c as dragHandleColumn } from '../styled-f76a0cd1.js';
-import 'styled-components';
-import '@elliemae/ds-grid';
-import '@elliemae/ds-icons';
-import '../helpers/sizeToCss.js';
-import './constants.js';
-import '../helpers/cellPadding.js';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import 'react-virtual';
-import './useRowFlattenization.js';
-import '../helpers/getIdFromUniqueRowAccessor.js';
-import '@elliemae/ds-form';
-import '@babel/runtime/helpers/esm/extends';
-import 'react-redux';
-import '../DataTableContext.js';
-import '../addons/Pagination/Pagination.js';
-import '@elliemae/ds-pagination';
-import '@elliemae/ds-indeterminate-progress-indicator';
-import '@elliemae/ds-circular-progress-indicator';
-import '../parts/EmptyContent.js';
-import '@elliemae/ds-system';
-import '@elliemae/ds-button';
-import 'prop-types';
-import '../helpers/refs-helpers.js';
-import '../parts/HoC/SortableItemContext.js';
-import '../parts/HoC/withDnDSortableRowContext.js';
-import '@dnd-kit/sortable';
-import '../parts/HoC/withConditionalDnDRowContext.js';
-import '@dnd-kit/core';
-import '../helpers/dndkit/tree/useTreeDndkitConfig.js';
-import '../helpers/dndkit/tree/useTreePreviewHandlers.js';
-import '../helpers/dndkit/tree/getTreeKeyboardCoordinates.js';
-import '../helpers/dndkit/utilities.js';
-import '../helpers/dndkit/tree/useTreeActionHandlers.js';
-import 'lodash';
-import '../helpers/dndkit/tree/customCollisionDetection.js';
-import '../helpers/dndkit/tree/useTreeAnnouncements.js';
-import '../parts/HoC/DragOverlayContext.js';
-import '@elliemae/ds-popperjs';
-import '../redux/reducers/index.js';
-import 'redux';
-import '../redux/reducers/headersReducers/headersReducers.js';
-import '@reduxjs/toolkit';
-import '../redux/reducers/headersReducers/logic.js';
-import '../redux/reducers/headersReducers/defaults.js';
-import '../redux/reducers/headersReducers/useDispatchHeadersActions.js';
-import '../redux/reducers/rowsReducers/rowsReducer.js';
-import '../redux/reducers/rowsReducers/logic.js';
-import '../redux/reducers/rowsReducers/defaults.js';
-import '../redux/reducers/rowsReducers/useDispatchRowsActions.js';
-import '../parts/Footer.js';
-import '@elliemae/ds-utilities';
-import 'uid';
-import '../exported-related/RowVariants.js';
-import '../exported-related/Filters/singleSelectFilterFn.js';
-import '../exported-related/Filters/multiSelectFilterFn.js';
-import '../exported-related/Filters/textFilterFn.js';
-import 'moment';
-import '../exported-related/Filters/numberRangeFilterFn.js';
-import '../exported-related/Filters/currencyRangeFilterFn.js';
-import '../exported-related/FilterTypes.js';
-import '../hooks/useRecoverFocusRow.js';
-import '@elliemae/ds-truncated-tooltip-text';
-import '../prop-types.js';
-import '../parts/Cells/useCellStyle.js';
-import '../exported-related/RowRenderer/useRowRendererProperties.js';
-import '../exported-related/RowRenderer/useRowStyle.js';
-import '../parts/DropIndicator.js';
-import './zIndexInternalConfig.js';
-import '../helpers/addCellData.js';
-import '../helpers/dndkit/hierarchy/useHierarchyActionHandlers.js';
-import '../helpers/dndkit/hierarchy/useHierarchyAnnouncements.js';
-import '../parts/SortByCaret.js';
-import '@elliemae/ds-controlled-form';
-import '@elliemae/ds-form-layout-blocks';
-import '@elliemae/ds-grid/';
-import '@elliemae/ds-form/ComboBox';
-import '../helpers/columnsToGrid.js';
-import '../parts/Headers/useHeaderCellHandlers.js';
-import '../parts/Headers/useHeaderCellConfig.js';
-import '../hooks/useRecoverFocusCol.js';
-import '../parts/Headers/RequiredDot.js';
-import '../parts/SortableHeaderCell.js';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import '../parts/HoC/withConditionalDnDSortableContext.js';
-import '../parts/Headers/EmptyChildrenGroup.js';
-import './fixedSizes.js';
-import '../parts/Loader.js';
+import { expandRowColumn } from '../addons/Columns/ColumnExpand/ColumnExpand.js';
+import { multiSelectColumn } from '../addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js';
+import { singleSelectColumn } from '../addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js';
+import { dragHandleColumn } from '../addons/Columns/ColumnDragHandle/ColumnDragHandle.js';
 
 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(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; }
 
-var augmentColumns = function augmentColumns(columns) {
-  var augmentColumn = function augmentColumn(column, index) {
-    var parentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-    var depth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-    var id = "column".concat(index);
+const augmentColumns = columns => {
+  const augmentColumn = function (column, index) {
+    let parentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    let depth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+    let id = "column".concat(index);
     if (typeof column.Header === 'string') id = column.Header;
     if (typeof column.accessor === 'string') id = column.accessor;
-    if (column.columns) column.columns = column.columns.map(function (col, i) {
-      return augmentColumn(col, i, id, depth + 1);
-    });
+    if (column.columns) column.columns = column.columns.map((col, i) => augmentColumn(col, i, id, depth + 1));
     return _objectSpread(_objectSpread({
-      id: id,
-      parentId: parentId,
-      depth: depth
+      id,
+      parentId,
+      depth
     }, column), {}, {
       ref: /*#__PURE__*/createRef()
     });
   };
 
-  return columns.map(function (col, index) {
-    return augmentColumn(col, index);
-  });
+  return columns.map((col, index) => augmentColumn(col, index));
 };
 
-var useTableColsWithAddons = function useTableColsWithAddons(_ref) {
-  var columns = _ref.columns,
-      renderRowActions = _ref.renderRowActions,
-      isExpandable = _ref.isExpandable,
-      selectSingle = _ref.selectSingle,
-      selection = _ref.selection,
-      dragAndDropRows = _ref.dragAndDropRows,
-      noSelectionColumn = _ref.noSelectionColumn;
-  return useMemo(function () {
-    var columnsWithAddons = _toConsumableArray(augmentColumns(columns));
-
+const useTableColsWithAddons = _ref => {
+  let {
+    columns,
+    renderRowActions,
+    isExpandable,
+    selectSingle,
+    selection,
+    dragAndDropRows,
+    noSelectionColumn
+  } = _ref;
+  return useMemo(() => {
+    const columnsWithAddons = [...augmentColumns(columns)];
     if (isExpandable) columnsWithAddons.unshift(expandRowColumn);
     if (selection && !noSelectionColumn) if (selectSingle) columnsWithAddons.unshift(singleSelectColumn);else columnsWithAddons.unshift(multiSelectColumn);
     if (dragAndDropRows) columnsWithAddons.unshift(dragHandleColumn);
@@ -139,4 +59,3 @@ var useTableColsWithAddons = function useTableColsWithAddons(_ref) {
 };
 
 export { useTableColsWithAddons as default };
-//# sourceMappingURL=useTableColsWithAddons.js.map

package/esm/configs/zIndexInternalConfig.js

@@ -1,4 +1,4 @@
-var ZIndexDataTable = {
+const ZIndexDataTable = {
   ROW: 0,
   EXTERNAL: 0,
   HEADER_ROW: 0,
@@ -8,4 +8,3 @@ var ZIndexDataTable = {
 };
 
 export { ZIndexDataTable };
-//# sourceMappingURL=zIndexInternalConfig.js.map

package/esm/exported-related/EditableCell.js

@@ -1,93 +1,74 @@
-import '@babel/runtime/helpers/esm/slicedToArray';
-import 'react';
-import 'prop-types';
-export { E as EditableCell } from '../styled-f76a0cd1.js';
-import '../DataTableContext.js';
-import 'styled-components';
-import '@elliemae/ds-grid';
-import '@elliemae/ds-icons';
-import '../helpers/sizeToCss.js';
-import '../configs/constants.js';
-import '../helpers/cellPadding.js';
-import 'react-virtual';
-import '../configs/useRowFlattenization.js';
-import '../helpers/getIdFromUniqueRowAccessor.js';
-import '@babel/runtime/helpers/esm/toConsumableArray';
-import '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-form';
-import '@babel/runtime/helpers/esm/extends';
-import 'react-redux';
-import '../addons/Pagination/Pagination.js';
-import '@elliemae/ds-pagination';
-import '@elliemae/ds-indeterminate-progress-indicator';
-import '@elliemae/ds-circular-progress-indicator';
-import '../parts/EmptyContent.js';
-import '@elliemae/ds-system';
-import '@elliemae/ds-button';
-import '../helpers/refs-helpers.js';
-import '../parts/HoC/SortableItemContext.js';
-import '../parts/HoC/withDnDSortableRowContext.js';
-import '@dnd-kit/sortable';
-import '../parts/HoC/withConditionalDnDRowContext.js';
-import '@dnd-kit/core';
-import '../helpers/dndkit/tree/useTreeDndkitConfig.js';
-import '../helpers/dndkit/tree/useTreePreviewHandlers.js';
-import '../helpers/dndkit/tree/getTreeKeyboardCoordinates.js';
-import '../helpers/dndkit/utilities.js';
-import '../helpers/dndkit/tree/useTreeActionHandlers.js';
-import 'lodash';
-import '../helpers/dndkit/tree/customCollisionDetection.js';
-import '../helpers/dndkit/tree/useTreeAnnouncements.js';
-import '../parts/HoC/DragOverlayContext.js';
-import '@elliemae/ds-popperjs';
-import '../redux/reducers/index.js';
-import 'redux';
-import '../redux/reducers/headersReducers/headersReducers.js';
-import '@reduxjs/toolkit';
-import '../redux/reducers/headersReducers/logic.js';
-import '../redux/reducers/headersReducers/defaults.js';
-import '../redux/reducers/headersReducers/useDispatchHeadersActions.js';
-import '../redux/reducers/rowsReducers/rowsReducer.js';
-import '../redux/reducers/rowsReducers/logic.js';
-import '../redux/reducers/rowsReducers/defaults.js';
-import '../redux/reducers/rowsReducers/useDispatchRowsActions.js';
-import '../parts/Footer.js';
-import '@elliemae/ds-utilities';
-import 'uid';
-import './RowVariants.js';
-import './Filters/singleSelectFilterFn.js';
-import './Filters/multiSelectFilterFn.js';
-import './Filters/textFilterFn.js';
-import 'moment';
-import './Filters/numberRangeFilterFn.js';
-import './Filters/currencyRangeFilterFn.js';
-import './FilterTypes.js';
-import '../addons/Columns/ColumnAction/ColumnAction.js';
-import '../hooks/useRecoverFocusRow.js';
-import '@elliemae/ds-truncated-tooltip-text';
-import '../prop-types.js';
-import '../parts/Cells/useCellStyle.js';
-import './RowRenderer/useRowRendererProperties.js';
-import './RowRenderer/useRowStyle.js';
-import '../parts/DropIndicator.js';
-import '../configs/zIndexInternalConfig.js';
-import '../helpers/addCellData.js';
-import '../helpers/dndkit/hierarchy/useHierarchyActionHandlers.js';
-import '../helpers/dndkit/hierarchy/useHierarchyAnnouncements.js';
-import '../parts/SortByCaret.js';
-import '@elliemae/ds-controlled-form';
-import '@elliemae/ds-form-layout-blocks';
-import '@elliemae/ds-grid/';
-import '@elliemae/ds-form/ComboBox';
-import '../helpers/columnsToGrid.js';
-import '../parts/Headers/useHeaderCellHandlers.js';
-import '../parts/Headers/useHeaderCellConfig.js';
-import '../hooks/useRecoverFocusCol.js';
-import '../parts/Headers/RequiredDot.js';
-import '../parts/SortableHeaderCell.js';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import '../parts/HoC/withConditionalDnDSortableContext.js';
-import '../parts/Headers/EmptyChildrenGroup.js';
-import '../configs/fixedSizes.js';
-import '../parts/Loader.js';
-//# sourceMappingURL=EditableCell.js.map
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useContext, useState, useLayoutEffect, useCallback } from 'react';
+import { StyledEditableContainer, StyledPencilIcon } from '../styled.js';
+import DataTableContext from '../DataTableContext.js';
+import { jsxs } from 'react/jsx-runtime';
+
+var _StyledPencilIcon;
+const EditableCell = props => {
+  const {
+    StandardRender,
+    EditableRenderer,
+    cell,
+    isRowSelected,
+    setValue
+  } = props;
+  const {
+    virtualListHelpers
+  } = useContext(DataTableContext);
+  const [isEditing, setIsEditing] = useState(false);
+  const [lastIsEditing, setLastIsEditing] = useState(false); // When an editable cell is switched on-off, we recalculate the height of the rows
+
+  useLayoutEffect(() => {
+    if (isEditing !== lastIsEditing) {
+      virtualListHelpers.measure();
+      setLastIsEditing(isEditing);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [isEditing]);
+  const handleCellClick = useCallback(e => {
+    if (!isEditing) {
+      e.stopPropagation();
+      setIsEditing(true);
+    }
+  }, [isEditing]);
+  const handleOnKeyDown = useCallback(e => {
+    if (isEditing) {
+      e.stopPropagation();
+
+      if (['Enter', 'Escape'].includes(e.code)) {
+        setIsEditing(false);
+      }
+    } else if (['Enter', 'Space'].includes(e.code)) {
+      handleCellClick(e);
+    }
+  }, [isEditing, handleCellClick, setIsEditing]);
+  const handleOnBlur = useCallback(event => {
+    if (isEditing && !event.currentTarget.contains(event.relatedTarget)) {
+      // Not triggered when swapping focus between children
+      setIsEditing(false);
+    }
+  }, [isEditing]);
+  const cols = !isEditing ? ['auto', 'min-content'] : ['auto'];
+  return /*#__PURE__*/jsxs(StyledEditableContainer, {
+    cols: cols,
+    tabIndex: isRowSelected && !isEditing ? 0 : -1,
+    ref: cell.ref,
+    onClick: handleCellClick,
+    onKeyDown: handleOnKeyDown,
+    onBlur: handleOnBlur,
+    shouldDisplayEditIcon: cell.column.alwaysDisplayEditIcon,
+    role: "cell",
+    "aria-labelledby": isEditing ? undefined : cell.id,
+    children: [!isEditing ? StandardRender : EditableRenderer, !isEditing && (_StyledPencilIcon || (_StyledPencilIcon = /*#__PURE__*/_jsx(StyledPencilIcon, {}))), /*#__PURE__*/_jsx("span", {
+      id: cell.id,
+      style: {
+        display: 'none'
+      },
+      "aria-hidden": "true"
+    }, void 0, cell.value, ", editable cell. To edit the content's of this cell, press the Enter key")]
+  });
+};
+
+export { EditableCell };