@elliemae/ds-data-table 2.2.0-alpha.2 → 2.2.0-beta.0

package/esm/helpers/columnsToGrid.js

@@ -1,18 +1,19 @@
-import * as React from "react";
-import { ColsLayoutStyle } from "../configs/constants";
-import { sizeToCss } from "./sizeToCss";
+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 { ColsLayoutStyle } from '../configs/constants.js';
+import { sizeToCss } from './sizeToCss.js';
+
 const columnsToGridImpl = (c, grid, colsLayoutStyle) => {
-  if ("columns" in c)
-    c.columns.forEach((col) => columnsToGridImpl(col, grid, colsLayoutStyle));
-  else
-    grid.push(sizeToCss(c.width ?? (colsLayoutStyle === ColsLayoutStyle.Auto ? "1fr" : 150)));
+  var _c$width;
+
+  if ('columns' in c) c.columns.forEach(col => columnsToGridImpl(col, grid, colsLayoutStyle));else grid.push(sizeToCss((_c$width = c.width) !== null && _c$width !== void 0 ? _c$width : colsLayoutStyle === ColsLayoutStyle.Auto ? '1fr' : 150));
 };
+
 const columnsToGrid = (columns, colsLayoutStyle) => {
   const grid = [];
-  columns.forEach((col) => columnsToGridImpl(col, grid, colsLayoutStyle));
+  columns.forEach(col => columnsToGridImpl(col, grid, colsLayoutStyle));
   return grid;
 };
-export {
-  columnsToGrid
-};
-//# sourceMappingURL=columnsToGrid.js.map
+
+export { columnsToGrid };

package/esm/helpers/getIdFromUniqueRowAccessor.js

@@ -1,17 +1,24 @@
-import * as React from "react";
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+
 const getIdFromUniqueRowAccessor = (uniqueRowAccessor, row) => {
-  if (uniqueRowAccessor === void 0) {
+  if (uniqueRowAccessor === undefined) {
+    // user did not defined an unique row accesor, use the one generated by react-table
     return row.id.toString();
   }
-  if (typeof uniqueRowAccessor === "string") {
+
+  if (typeof uniqueRowAccessor === 'string') {
+    // user specified a field as an unique row accessor
     return row.original[uniqueRowAccessor].toString();
   }
+
   if (Array.isArray(uniqueRowAccessor)) {
-    return uniqueRowAccessor.map((key) => row.original[key].toString()).join("__");
-  }
+    // user specified combination of fields as unique row accessor
+    return uniqueRowAccessor.map(key => row.original[key].toString()).join('__');
+  } // let the user decide on their end what to do
+
+
   return uniqueRowAccessor(row.original);
 };
-export {
-  getIdFromUniqueRowAccessor
-};
-//# sourceMappingURL=getIdFromUniqueRowAccessor.js.map
+
+export { getIdFromUniqueRowAccessor };

package/esm/helpers/index.js

@@ -1,8 +1,6 @@
-import * as React from "react";
-export * from "./sizeToCss";
-export * from "./columnsToGrid";
-export * from "./cellPadding";
-export * from "./refs-helpers";
-export * from "./getIdFromUniqueRowAccessor";
-export * from "./addCellData";
-//# sourceMappingURL=index.js.map
+export { sizeToCss } from './sizeToCss.js';
+export { columnsToGrid } from './columnsToGrid.js';
+export { cellPadding, columnPadding } from './cellPadding.js';
+export { setMultipleRefs } from './refs-helpers.js';
+export { getIdFromUniqueRowAccessor } from './getIdFromUniqueRowAccessor.js';
+export { addCellData } from './addCellData.js';

package/esm/helpers/refs-helpers.js

@@ -1,13 +1,21 @@
-import * as React from "react";
-const setMultipleRefs = (...refs) => {
+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';
+
+// allow multiple refs to be set to point to the same DOM element
+const setMultipleRefs = function () {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
   const filteredRefs = refs.filter(Boolean);
-  if (!filteredRefs.length)
-    return () => null;
-  if (filteredRefs.length === 0)
-    return () => null;
-  return (newRef) => {
-    filteredRefs.forEach((refToBeUpdated) => {
-      if (typeof refToBeUpdated === "function") {
+  if (!filteredRefs.length) return () => null;
+  if (filteredRefs.length === 0) return () => null;
+  return newRef => {
+    filteredRefs.forEach(refToBeUpdated => {
+      if (typeof refToBeUpdated === 'function') {
         refToBeUpdated(newRef);
       } else if (refToBeUpdated) {
         refToBeUpdated.current = newRef;
@@ -15,7 +23,5 @@ const setMultipleRefs = (...refs) => {
     });
   };
 };
-export {
-  setMultipleRefs
-};
-//# sourceMappingURL=refs-helpers.js.map
+
+export { setMultipleRefs };

package/esm/helpers/sizeToCss.js

@@ -1,6 +1,3 @@
-import * as React from "react";
-const sizeToCss = (size) => typeof size === "number" && !Number.isNaN(size) ? `${size}px` : size;
-export {
-  sizeToCss
-};
-//# sourceMappingURL=sizeToCss.js.map
+const sizeToCss = size => typeof size === 'number' && !Number.isNaN(size) ? "".concat(size, "px") : size;
+
+export { sizeToCss };

package/esm/hooks/useRecoverFocusCol.js

@@ -1,18 +1,23 @@
-import * as React from "react";
-import { useEffect, useState } from "react";
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useEffect } from 'react';
+
+// so we just keep track of it and focus it if necessary
+
 const useRecoverFocusCol = (condition, ref) => {
   const [prevCondition, setPrevCondition] = useState(condition);
   useEffect(() => {
     if (prevCondition && !condition) {
-      if (ref.current)
-        ref.current?.focus();
-      else
-        setTimeout(() => ref.current?.focus());
+      var _ref$current;
+
+      if (ref.current) (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();else setTimeout(() => {
+        var _ref$current2;
+
+        return (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus();
+      });
     }
+
     setPrevCondition(condition);
   }, [condition, prevCondition, ref]);
 };
-export {
-  useRecoverFocusCol
-};
-//# sourceMappingURL=useRecoverFocusCol.js.map
+
+export { useRecoverFocusCol };

package/esm/hooks/useRecoverFocusRow.js

@@ -1,5 +1,8 @@
-import * as React from "react";
-import { useEffect, useRef } from "react";
+import { useRef, useEffect } from 'react';
+
+/* eslint-disable max-params */
+// So we keep track of the last active id, and re-focus it
+
 const useRecoverFocusRow = (row, cell, isDragOverlay, draggableProps) => {
   const isDragging = draggableProps && draggableProps.isDragging;
   const lastActiveId = draggableProps && draggableProps.lastActiveId;
@@ -12,12 +15,11 @@ const useRecoverFocusRow = (row, cell, isDragOverlay, draggableProps) => {
         setLastActiveId(null);
       });
     }
+
     return () => {
       clearTimeout(timeoutRef.current);
     };
   }, [isDragging, isDragOverlay, lastActiveId, row.uid, setLastActiveId, cell.ref]);
 };
-export {
-  useRecoverFocusRow
-};
-//# sourceMappingURL=useRecoverFocusRow.js.map
+
+export { useRecoverFocusRow };

package/esm/index.js

@@ -1,4 +1,14 @@
-import * as React from "react";
-export * from "./DataTable";
-export * from "./exported-related";
-//# sourceMappingURL=index.js.map
+export { DataTable, DataTableWithSchema } from './DataTable.js';
+export { FilterPopover } from './exported-related/FilterPopover.js';
+export { EditableCell } from './exported-related/EditableCell.js';
+export { Toolbar } from './exported-related/Toolbar/Toolbar.js';
+export { groupBy } from './exported-related/groupBy.js';
+export { FILTER_TYPES } from './exported-related/FilterTypes.js';
+export { ROW_VARIANTS, ROW_VARIANT_COMPACT_KEY, ROW_VARIANT_KEY } from './exported-related/RowVariants.js';
+export { applyOutOfTheBoxFilters } from './exported-related/Filters/applyOutOfTheBoxFilters.js';
+export { singleDateFilterFn } from './exported-related/Filters/singleDateFilterFn.js';
+export { singleSelectFilterFn } from './exported-related/Filters/singleSelectFilterFn.js';
+export { multiSelectFilterFn } from './exported-related/Filters/multiSelectFilterFn.js';
+export { numberRangeFilterFn } from './exported-related/Filters/numberRangeFilterFn.js';
+export { currencyRangeFilterFn } from './exported-related/Filters/currencyRangeFilterFn.js';
+export { dateRangeFilterFn } from './exported-related/Filters/dateRangeFilterFn.js';

package/esm/parts/Cells/Cell.js

@@ -1,89 +1,120 @@
-import * as React from "react";
-import React2, { useContext, useMemo, memo } from "react";
-import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
-import { Grid } from "@elliemae/ds-grid";
-import { StyledCell, StyledCellContent } from "../../styled";
-import { outOfTheBoxEditables } from "../../addons/Editables";
-import { DataTableContext } from "../../DataTableContext";
-import { SortableItemContext } from "../HoC/SortableItemContext";
-import { expandRowColumn } from "../../addons/Columns";
-import { DATA_TESTID } from "../../configs/constants";
-import { useCellStyle } from "./useCellStyle";
-const PureStandardCell = memo(({ cellStyle, children, column }) => /* @__PURE__ */ React2.createElement(StyledCell, {
-  column,
-  style: cellStyle,
-  role: "cell",
-  "data-testid": DATA_TESTID.DATA_TABLE_CELL
-}, children));
-const Cell = ({
-  cell,
-  column,
-  row,
-  isRowSelected,
-  shouldAddExpandCell,
-  isDragOverlay
-}) => {
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+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 { useContext, useMemo, memo } from 'react';
+import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
+import Grid from '@elliemae/ds-grid';
+import { StyledCellContent, StyledCell } from '../../styled.js';
+import { outOfTheBoxEditables } from '../../addons/Editables/index.js';
+import DataTableContext from '../../DataTableContext.js';
+import { SortableItemContext } from '../HoC/SortableItemContext.js';
+import { expandRowColumn } from '../../addons/Columns/ColumnExpand/ColumnExpand.js';
+import '@elliemae/ds-form';
+import { DATA_TESTID } from '../../configs/constants.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import 'react-virtual';
+import '../../configs/useRowFlattenization.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'styled-components';
+import '../TableContent.js';
+import '@elliemae/ds-circular-progress-indicator';
+import '@elliemae/ds-icons';
+import '@elliemae/ds-system';
+import '@elliemae/ds-button';
+import '../Row.js';
+import '../Footer.js';
+import { useCellStyle } from './useCellStyle.js';
+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; }
+const PureStandardCell = /*#__PURE__*/memo(_ref => {
+  let {
+    cellStyle,
+    children,
+    column
+  } = _ref;
+  return /*#__PURE__*/_jsx(StyledCell, {
+    column: column,
+    style: cellStyle,
+    role: "cell",
+    "data-testid": DATA_TESTID.DATA_TABLE_CELL
+  }, void 0, children);
+});
+
+const Cell = _ref2 => {
+  var _SimpleTruncatedToolt;
+
+  let {
+    cell,
+    column,
+    row,
+    isRowSelected,
+    shouldAddExpandCell,
+    isDragOverlay
+  } = _ref2;
   const ctx = useContext(DataTableContext);
   const {
-    tableProps: { cellRendererProps }
+    tableProps: {
+      cellRendererProps
+    }
   } = ctx;
-  const { draggableProps } = useContext(SortableItemContext);
+  const {
+    draggableProps
+  } = useContext(SortableItemContext);
   const [appliedTextWrap, cellStyle] = useCellStyle(column, shouldAddExpandCell);
-  const cellProps = useMemo(() => ({
-    ...cellRendererProps,
+  const cellProps = useMemo(() => _objectSpread(_objectSpread({}, cellRendererProps), {}, {
     cell,
     row,
     isRowSelected,
     ctx,
     draggableProps,
     isDragOverlay,
-    role: "cell",
+    role: 'cell',
     cellStyle,
     column
   }), [cellRendererProps, cell, row, isRowSelected, ctx, draggableProps, isDragOverlay, cellStyle, column]);
   const CellComponent = cell.render;
   const pureCellContent = useMemo(() => {
     if (shouldAddExpandCell) {
-      return /* @__PURE__ */ React2.createElement(Grid, {
-        cols: ["min-content", "auto"],
+      return /*#__PURE__*/_jsx(Grid, {
+        cols: ['min-content', 'auto'],
         alignItems: "center",
         height: "100%"
-      }, shouldAddExpandCell && /* @__PURE__ */ React2.createElement(expandRowColumn.Cell, {
-        ...cellProps
-      }), /* @__PURE__ */ React2.createElement(CellComponent, {
-        ...cellProps
-      }));
+      }, void 0, shouldAddExpandCell && /*#__PURE__*/jsx(expandRowColumn.Cell, _objectSpread({}, cellProps)), /*#__PURE__*/jsx(CellComponent, _objectSpread({}, cellProps)));
     }
-    return /* @__PURE__ */ React2.createElement(CellComponent, {
-      ...cellProps
-    });
+
+    return /*#__PURE__*/jsx(CellComponent, _objectSpread({}, cellProps));
   }, [CellComponent, cellProps, shouldAddExpandCell]);
-  const DefaultCellContentJSX = useMemo(() => /* @__PURE__ */ React2.createElement(StyledCellContent, null, appliedTextWrap === "truncate" ? /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
+  const DefaultCellContentJSX = useMemo(() => /*#__PURE__*/_jsx(StyledCellContent, {}, void 0, appliedTextWrap === 'truncate' ? _SimpleTruncatedToolt || (_SimpleTruncatedToolt = /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
     value: pureCellContent
-  }) : pureCellContent), [appliedTextWrap, pureCellContent]);
+  })) : pureCellContent), [appliedTextWrap, pureCellContent]);
   const EditableContentJSX = useMemo(() => {
-    if (typeof column.editable === "string") {
-      const { EditableComponent } = outOfTheBoxEditables?.[column.editable];
-      if (EditableComponent)
-        return /* @__PURE__ */ React2.createElement(EditableComponent, {
-          ...cellProps,
-          DefaultCellRender: DefaultCellContentJSX
-        });
+    if (typeof column.editable === 'string') {
+      const {
+        EditableComponent
+      } = outOfTheBoxEditables === null || outOfTheBoxEditables === void 0 ? void 0 : outOfTheBoxEditables[column.editable];
+      if (EditableComponent) return /*#__PURE__*/jsx(EditableComponent, _objectSpread(_objectSpread({}, cellProps), {}, {
+        DefaultCellRender: DefaultCellContentJSX
+      }));
     }
-    if (typeof column.editable === "function")
-      return column.editable({
-        DefaultCellRender: DefaultCellContentJSX,
-        ...cellProps
-      });
+
+    if (typeof column.editable === 'function') return column.editable(_objectSpread({
+      DefaultCellRender: DefaultCellContentJSX
+    }, cellProps));
     return null;
   }, [DefaultCellContentJSX, cellProps, column]);
-  return /* @__PURE__ */ React2.createElement(PureStandardCell, {
-    ...cellProps
-  }, column.editable ? EditableContentJSX : DefaultCellContentJSX);
-};
-var Cell_default = Cell;
-export {
-  Cell,
-  Cell_default as default
+  return /*#__PURE__*/jsx(PureStandardCell, _objectSpread(_objectSpread({}, cellProps), {}, {
+    children: column.editable ? EditableContentJSX : DefaultCellContentJSX
+  }));
 };
-//# sourceMappingURL=Cell.js.map
+
+export { Cell as default };

package/esm/parts/Cells/index.js

@@ -1,60 +1,76 @@
-import * as React from "react";
-import React2, { useContext } from "react";
-import { INTERNAL_COLUMNS } from "../../addons/Columns";
-import { StyledActionCell } from "../../styled";
-import { Cell } from "./Cell";
-import { DataTableContext } from "../../DataTableContext";
-const Cells = (props) => {
-  const { row, isRowSelected, isDragOverlay } = props;
-  const ctx = useContext(DataTableContext);
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import { useContext } from 'react';
+import { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';
+import { StyledActionCell } from '../../styled.js';
+import Cell from './Cell.js';
+import DataTableContext from '../../DataTableContext.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const Cells = props => {
+  const {
+    row,
+    isRowSelected,
+    isDragOverlay
+  } = props;
+  const ctx = useContext(DataTableContext); // we won't print sub-rows more nested than the first level
+
   if (row.depth <= 1) {
     let shouldAddExpandCell = false;
     let userCellsProcessed = 0;
-    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, row.cells.map((cell) => {
-      const { column } = cell;
-      const isUserCell = !INTERNAL_COLUMNS.includes(column.id);
-      let jsx = null;
-      if (column.id === "rowActions") {
-        const ActionComponent = cell.render;
-        jsx = /* @__PURE__ */ React2.createElement(StyledActionCell, {
-          role: "cell",
-          key: cell.id
-        }, /* @__PURE__ */ React2.createElement(ActionComponent, {
-          row,
-          cell,
-          column,
-          isRowSelected,
-          ctx
-        }));
-      } else if (column.id === "expander") {
-        shouldAddExpandCell = !isDragOverlay;
-      } else {
-        jsx = /* @__PURE__ */ React2.createElement(Cell, {
-          cell,
-          column,
-          row,
-          isRowSelected,
-          shouldAddExpandCell: isUserCell && shouldAddExpandCell,
-          isDragOverlay,
-          key: cell.id
-        });
-      }
-      if (isDragOverlay) {
-        if (column.id !== "dragHandleColumn" && (!isUserCell || userCellsProcessed !== 0))
-          jsx = null;
-      }
-      if (isUserCell) {
-        shouldAddExpandCell = false;
-        userCellsProcessed += 1;
-      }
-      return jsx;
-    }));
+    return /*#__PURE__*/jsx(Fragment, {
+      children: row.cells.map(cell => {
+        var _ActionComponent;
+
+        const {
+          column
+        } = cell;
+        const isUserCell = !INTERNAL_COLUMNS.includes(column.id);
+        let jsx = null;
+
+        if (column.id === 'rowActions') {
+          const ActionComponent = cell.render;
+          jsx = /*#__PURE__*/_jsx(StyledActionCell, {
+            role: "cell"
+          }, cell.id, _ActionComponent || (_ActionComponent = /*#__PURE__*/_jsx(ActionComponent, {
+            row: row,
+            cell: cell,
+            column: column,
+            isRowSelected: isRowSelected,
+            ctx: ctx
+          })));
+        } else if (column.id === 'expander') {
+          // Next user's cell will have the expand cell
+          shouldAddExpandCell = !isDragOverlay; // Don't add it on drag overlay
+        } else {
+          jsx = /*#__PURE__*/_jsx(Cell, {
+            cell: cell,
+            column: column,
+            row: row,
+            isRowSelected: isRowSelected,
+            shouldAddExpandCell: isUserCell && shouldAddExpandCell,
+            isDragOverlay: isDragOverlay
+          }, cell.id);
+        } // Drag overlay only need to print the DnD handle and the first user's cell
+
+
+        if (isDragOverlay) {
+          if (column.id !== 'dragHandleColumn' && (!isUserCell || userCellsProcessed !== 0)) jsx = null;
+        } // Reset expand cell
+
+
+        if (isUserCell) {
+          shouldAddExpandCell = false;
+          userCellsProcessed += 1;
+        }
+
+        return jsx;
+      })
+    });
   }
+
   return null;
 };
-var Cells_default = Cells;
-export {
-  Cells,
-  Cells_default as default
-};
-//# sourceMappingURL=index.js.map
+
+export { Cells as default };

package/esm/parts/Cells/useCellStyle.js

@@ -1,34 +1,39 @@
-import * as React from "react";
-import { useContext, useMemo } from "react";
-import { DataTableContext } from "../../DataTableContext";
+import { useContext, useMemo } from 'react';
+import DataTableContext from '../../DataTableContext.js';
+
 const useCellStyle = (column, shouldAddExpandCell) => {
   const {
-    tableProps: { textWrap }
+    tableProps: {
+      textWrap
+    }
   } = useContext(DataTableContext);
   const appliedTextWrap = column.textWrap || textWrap;
   const cellStyle = useMemo(() => {
     const newStyle = {};
+
     switch (appliedTextWrap) {
-      case "wrap-all":
-        newStyle.wordBreak = "break-all";
+      case 'wrap-all':
+        newStyle.wordBreak = 'break-all';
         break;
-      case "truncate":
-        newStyle.whiteSpace = "nowrap";
+
+      case 'truncate':
+        newStyle.whiteSpace = 'nowrap';
         break;
+
       default:
-      case "wrap":
-        newStyle.whiteSpace = "normal";
+      case 'wrap':
+        newStyle.whiteSpace = 'normal';
         break;
     }
+
     if (shouldAddExpandCell) {
-      newStyle.gridColumn = `span 2`;
-      newStyle.padding = `0 16px 0 2px`;
+      newStyle.gridColumn = "span 2";
+      newStyle.padding = "0 16px 0 2px";
     }
+
     return newStyle;
   }, [appliedTextWrap, shouldAddExpandCell]);
   return [appliedTextWrap, cellStyle];
 };
-export {
-  useCellStyle
-};
-//# sourceMappingURL=useCellStyle.js.map
+
+export { useCellStyle };