@teselagen/ui 0.5.23-beta.26 → 0.5.23-beta.28

package/DataTable/EditableCell.d.ts

@@ -0,0 +1,7 @@
+export function EditableCell({ cancelEdit, dataTest, finishEdit, isNumeric, initialValue }: {
+    cancelEdit: any;
+    dataTest: any;
+    finishEdit: any;
+    isNumeric: any;
+    initialValue: any;
+}): import("react/jsx-runtime").JSX.Element;

package/index.cjs.js

@@ -31027,11 +31027,11 @@ const _TgSelect = class _TgSelect extends React$1.Component {
             return true;
           });
         }
-        return onChange([...valArray, item]);
+        return onChange([...valArray, item], e2);
       } else {
         this.setOpenState(false);
         this.input && this.input.blur();
-        return onChange(item);
+        return onChange(item, e2);
       }
     }, "handleItemSelect"));
     __publicField(this, "handleTagRemove", /* @__PURE__ */ __name((e2, tagProps) => {

package/index.es.js

@@ -31009,11 +31009,11 @@ const _TgSelect = class _TgSelect extends React__default.Component {
             return true;
           });
         }
-        return onChange([...valArray, item]);
+        return onChange([...valArray, item], e2);
       } else {
         this.setOpenState(false);
         this.input && this.input.blur();
-        return onChange(item);
+        return onChange(item, e2);
       }
     }, "handleItemSelect"));
     __publicField(this, "handleTagRemove", /* @__PURE__ */ __name((e2, tagProps) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.5.23-beta.26",
+  "version": "0.5.23-beta.28",
   "main": "./src/index.js",
   "exports": {
     ".": {

package/src/DataTable/Columns.js

@@ -1,4 +1,4 @@
-import React, { isValidElement } from "react";
+import React, { isValidElement, useCallback } from "react";
 import classNames from "classnames";
 import { Button, Classes, Checkbox, Icon } from "@blueprintjs/core";
 import {
@@ -24,7 +24,6 @@ import {
   getIdOrCodeOrIndex,
   getNumberStrAtEnd,
   getSelectedRowsFromEntities,
-  isBottomRightCornerOfRectangle,
   PRIMARY_SELECTED_VAL,
   stripNumberAtEnd
 } from "./utils";
@@ -33,12 +32,11 @@ import { ColumnFilterMenu } from "./ColumnFilterMenu";
 import getTextFromEl from "../utils/getTextFromEl";
 import rowClick, { finalizeSelection } from "./utils/rowClick";
 import { editCellHelper } from "./editCellHelper";
-import { DropdownCell } from "./DropdownCell";
-import { EditableCell } from "./EditabelCell";
-import { getVals } from "./getVals";
-import { CellDragHandle } from "./CellDragHandle";
 import { getCellVal } from "./getCellVal";
 import { getCCDisplayName } from "./utils/queryParams";
+import { useDispatch } from "react-redux";
+import { change as _change } from "redux-form";
+import { RenderCell } from "./RenderCell";
 
 dayjs.extend(localizedFormat);
 
@@ -311,479 +309,425 @@ const renderCheckboxHeader = ({
   ) : null;
 };
 
-const RenderCell = ({
-  oldFunc,
-  getCopyTextForCell,
-  column,
-  isCellEditable,
-  isEntityDisabled,
-  finishCellEdit,
-  noEllipsis,
+export const useColumns = ({
+  addFilters,
+  cellRenderer,
+  columns,
+  currentParams,
+  compact,
   editingCell,
-  cancelCellEdit,
-  editableCellValue,
-  setEditableCellValue,
+  editingCellSelectAll,
+  entities,
+  expandedEntityIdMap,
+  extraCompact,
+  filters,
+  formName,
   getCellHoverText,
-  selectedCells,
+  isCellEditable,
+  isEntityDisabled,
+  isLocalCall,
+  isSimple,
+  isSingleSelect,
   isSelectionARectangle,
+  noDeselectAll,
+  noSelect,
+  noUserSelect,
+  onDeselect,
+  onMultiRowSelect,
+  onRowClick,
+  onRowSelect,
+  onSingleRowSelect,
+  order,
+  primarySelectedCellId,
+  reduxFormCellValidation,
+  reduxFormSelectedEntityIdMap,
+  refocusTable,
+  removeSingleFilter = noop,
+  schema,
+  selectedCells,
+  setExpandedEntityIdMap,
+  setNewParams,
+  setOrder = noop,
+  setSelectedCells,
+  shouldShowSubComponent,
   startCellEdit,
+  SubComponent,
   tableRef,
-  onDragEnd,
-  args
+  updateEntitiesHelper,
+  updateValidation,
+  withCheckboxes,
+  withExpandAndCollapseAllButton,
+  withFilter: _withFilter,
+  withSort = true
 }) => {
-  const [row] = args;
-  const rowId = getIdOrCodeOrIndex(row.original, row.index);
-  const cellId = `${rowId}:${row.column.path}`;
-  let val = oldFunc(...args);
-  const oldVal = val;
-  const text = getCopyTextForCell(val, row, column);
-  const isBool = column.type === "boolean";
-  const dataTest = {
-    "data-test": "tgCell_" + column.path
-  };
-  const fullValue = row.original?.[row.column.path];
-  if (isCellEditable && isBool) {
-    val = (
-      <Checkbox
-        disabled={isEntityDisabled(row.original)}
-        className="tg-cell-edit-boolean-checkbox"
-        checked={oldVal === "True"}
-        onChange={e => {
-          const checked = e.target.checked;
-          finishCellEdit(cellId, checked);
-        }}
-      />
-    );
-    noEllipsis = true;
-  } else if (editingCell === cellId) {
-    if (column.type === "genericSelect") {
-      const GenericSelectComp = column.GenericSelectComp;
-
-      return (
-        <GenericSelectComp
-          rowId={rowId}
-          fullValue={fullValue}
-          initialValue={text}
-          {...dataTest}
-          finishEdit={(newVal, doNotStopEditing) => {
-            finishCellEdit(cellId, newVal, doNotStopEditing);
-          }}
-          dataTest={dataTest}
-          cancelEdit={cancelCellEdit}
-        />
-      );
-    }
-    if (column.type === "dropdown" || column.type === "dropdownMulti") {
-      return (
-        <DropdownCell
-          isMulti={dataTest.isMulti || column.type === "dropdownMulti"}
-          initialValue={dataTest.initialValue || text}
-          options={getVals(column.values)}
-          finishEdit={(newVal, doNotStopEditing) => {
-            finishCellEdit(cellId, newVal, doNotStopEditing);
-          }}
-          dataTest={dataTest}
-          cancelEdit={cancelCellEdit}
-        />
-      );
-    } else {
-      return (
-        <EditableCell
-          value={editableCellValue}
-          setValue={setEditableCellValue}
-          dataTest={dataTest}
-          cancelEdit={cancelCellEdit}
-          isNumeric={column.type === "number"}
-          initialValue={text}
-          finishEdit={newVal => {
-            finishCellEdit(cellId, newVal);
-          }}
-        />
-      );
-    }
-  }
-
-  //wrap the original tableColumn.Cell function in another div in order to add a title attribute
-  let title = text;
-  if (getCellHoverText) title = getCellHoverText(...args);
-  else if (column.getTitleAttr) title = column.getTitleAttr(...args);
-  const isSelectedCell = selectedCells?.[cellId];
-  const {
-    isRect,
-    selectionGrid,
-    lastRowIndex,
-    lastCellIndex,
-    entityMap,
-    pathToIndex
-  } = isSelectionARectangle();
-
-  return (
-    <>
-      <div
-        style={{
-          ...(!noEllipsis && {
-            textOverflow: "ellipsis",
-            overflow: "hidden"
-          })
-        }}
-        {...dataTest}
-        className="tg-cell-wrapper"
-        data-copy-text={text}
-        data-copy-json={JSON.stringify(
-          //tnw: eventually we'll parse these back out and use either the fullValue (for the generic selects) or the regular text vals for everything else
-          column.type === "genericSelect"
-            ? {
-                __strVal: fullValue,
-                __genSelCol: column.path
-              }
-            : { __strVal: text }
-        )}
-        title={title || undefined}
-      >
-        {val}
-      </div>
-      {isCellEditable &&
-        (column.type === "dropdown" ||
-          column.type === "dropdownMulti" ||
-          column.type === "genericSelect") && (
-          <Icon
-            icon="caret-down"
-            style={{
-              position: "absolute",
-              right: 5,
-              opacity: 0.3
-            }}
-            className="cell-edit-dropdown"
-            onClick={() => {
-              startCellEdit(cellId);
-            }}
-          />
-        )}
-
-      {isSelectedCell &&
-        (isRect
-          ? isBottomRightCornerOfRectangle({
-              cellId,
-              selectionGrid,
-              lastRowIndex,
-              lastCellIndex,
-              entityMap,
-              pathToIndex
-            })
-          : isSelectedCell === PRIMARY_SELECTED_VAL) && (
-          <CellDragHandle
-            key={cellId}
-            thisTable={tableRef.current.tableRef}
-            cellId={cellId}
-            isSelectionARectangle={isSelectionARectangle}
-            onDragEnd={onDragEnd}
-          />
-        )}
-    </>
+  const dispatch = useDispatch();
+  const change = useCallback(
+    (...args) => dispatch(_change(formName, ...args)),
+    [dispatch, formName]
   );
-};
-
-export const RenderColumns = props => {
-  const {
-    addFilters,
-    cellRenderer,
-    change,
-    columns,
-    currentParams,
-    compact,
-    editableCellValue,
-    editingCell,
-    editingCellSelectAll,
-    entities,
-    expandedEntityIdMap,
-    extraCompact,
-    filters,
-    getCellHoverText,
-    isCellEditable,
-    isEntityDisabled,
-    isLocalCall,
-    isSimple,
-    isSingleSelect,
-    isSelectionARectangle,
-    noDeselectAll,
-    noSelect,
-    noUserSelect,
-    onDeselect,
-    onMultiRowSelect,
-    onRowClick,
-    onRowSelect,
-    onSingleRowSelect,
-    order,
-    primarySelectedCellId,
-    reduxFormCellValidation,
-    reduxFormSelectedEntityIdMap,
-    refocusTable,
-    removeSingleFilter = noop,
-    schema,
-    selectedCells,
-    setEditableCellValue,
-    setEditingCell,
-    setExpandedEntityIdMap,
-    setNewParams,
-    setOrder = noop,
-    setSelectedCells,
-    shouldShowSubComponent,
-    startCellEdit,
-    SubComponent,
-    tableRef,
-    updateEntitiesHelper,
-    updateValidation,
-    withCheckboxes,
-    withExpandAndCollapseAllButton,
-    withFilter: _withFilter,
-    withSort = true
-  } = props;
-
   const withFilter = _withFilter === undefined ? !isSimple : _withFilter;
 
-  const onDragEnd = cellsToSelect => {
-    const [primaryRowId, primaryCellPath] = primarySelectedCellId.split(":");
-    const pathToField = getFieldPathToField(schema);
-    const { selectedPaths, selectionGrid } = isSelectionARectangle();
-    let allSelectedPaths = selectedPaths;
-    if (!allSelectedPaths) {
-      allSelectedPaths = [primaryCellPath];
-    }
-
-    updateEntitiesHelper(entities, entities => {
-      let newSelectedCells;
-      if (selectedPaths) {
-        newSelectedCells = {
-          ...selectedCells
-        };
-      } else {
-        newSelectedCells = {
-          [primarySelectedCellId]: PRIMARY_SELECTED_VAL
-        };
+  const onDragEnd = useCallback(
+    cellsToSelect => {
+      const [primaryRowId, primaryCellPath] = primarySelectedCellId.split(":");
+      const pathToField = getFieldPathToField(schema);
+      const { selectedPaths, selectionGrid } = isSelectionARectangle();
+      let allSelectedPaths = selectedPaths;
+      if (!allSelectedPaths) {
+        allSelectedPaths = [primaryCellPath];
       }
 
-      const newCellValidate = {
-        ...reduxFormCellValidation
-      };
-      const entityMap = getEntityIdToEntity(entities);
-      const { e: selectedEnt } = entityMap[primaryRowId];
-      const firstCellToSelectRowIndex =
-        entityMap[cellsToSelect[0]?.split(":")[0]]?.i;
-      const pathToIndex = getFieldPathToIndex(schema);
-
-      allSelectedPaths.forEach(selectedPath => {
-        const column = pathToField[selectedPath];
+      updateEntitiesHelper(entities, entities => {
+        let newSelectedCells;
+        if (selectedPaths) {
+          newSelectedCells = {
+            ...selectedCells
+          };
+        } else {
+          newSelectedCells = {
+            [primarySelectedCellId]: PRIMARY_SELECTED_VAL
+          };
+        }
 
-        const selectedCellVal = getCellVal(selectedEnt, selectedPath, column);
-        const cellIndexOfSelectedPath = pathToIndex[selectedPath];
-        let incrementStart;
-        let incrementPrefix;
-        let incrementPad = 0;
-        if (column.type === "string" || column.type === "number") {
-          const cellNumStr = getNumberStrAtEnd(selectedCellVal);
-          const cellNum = Number(cellNumStr);
-          const entityAbovePrimaryCell =
-            entities[entityMap[primaryRowId].i - 1];
-          if (cellNumStr !== null && !isNaN(cellNum)) {
-            if (
-              entityAbovePrimaryCell &&
-              (!selectionGrid || selectionGrid.length <= 1)
-            ) {
-              const cellAboveVal = get(
-                entityAbovePrimaryCell,
-                selectedPath,
-                ""
-              );
-              const cellAboveNumStr = getNumberStrAtEnd(cellAboveVal);
-              const cellAboveNum = Number(cellAboveNumStr);
-              if (!isNaN(cellAboveNum)) {
-                const isIncremental = cellNum - cellAboveNum === 1;
-                if (isIncremental) {
-                  const cellTextNoNum = stripNumberAtEnd(selectedCellVal);
-                  const sameText =
-                    stripNumberAtEnd(cellAboveVal) === cellTextNoNum;
-                  if (sameText) {
-                    incrementStart = cellNum + 1;
-                    incrementPrefix = cellTextNoNum || "";
-                    if (cellNumStr && cellNumStr.startsWith("0")) {
-                      incrementPad = cellNumStr.length;
+        const newCellValidate = {
+          ...reduxFormCellValidation
+        };
+        const entityMap = getEntityIdToEntity(entities);
+        const { e: selectedEnt } = entityMap[primaryRowId];
+        const firstCellToSelectRowIndex =
+          entityMap[cellsToSelect[0]?.split(":")[0]]?.i;
+        const pathToIndex = getFieldPathToIndex(schema);
+
+        allSelectedPaths.forEach(selectedPath => {
+          const column = pathToField[selectedPath];
+
+          const selectedCellVal = getCellVal(selectedEnt, selectedPath, column);
+          const cellIndexOfSelectedPath = pathToIndex[selectedPath];
+          let incrementStart;
+          let incrementPrefix;
+          let incrementPad = 0;
+          if (column.type === "string" || column.type === "number") {
+            const cellNumStr = getNumberStrAtEnd(selectedCellVal);
+            const cellNum = Number(cellNumStr);
+            const entityAbovePrimaryCell =
+              entities[entityMap[primaryRowId].i - 1];
+            if (cellNumStr !== null && !isNaN(cellNum)) {
+              if (
+                entityAbovePrimaryCell &&
+                (!selectionGrid || selectionGrid.length <= 1)
+              ) {
+                const cellAboveVal = get(
+                  entityAbovePrimaryCell,
+                  selectedPath,
+                  ""
+                );
+                const cellAboveNumStr = getNumberStrAtEnd(cellAboveVal);
+                const cellAboveNum = Number(cellAboveNumStr);
+                if (!isNaN(cellAboveNum)) {
+                  const isIncremental = cellNum - cellAboveNum === 1;
+                  if (isIncremental) {
+                    const cellTextNoNum = stripNumberAtEnd(selectedCellVal);
+                    const sameText =
+                      stripNumberAtEnd(cellAboveVal) === cellTextNoNum;
+                    if (sameText) {
+                      incrementStart = cellNum + 1;
+                      incrementPrefix = cellTextNoNum || "";
+                      if (cellNumStr && cellNumStr.startsWith("0")) {
+                        incrementPad = cellNumStr.length;
+                      }
                     }
                   }
                 }
               }
-            }
-            if (incrementStart === undefined) {
-              const draggingDown =
-                firstCellToSelectRowIndex > selectionGrid?.[0][0].rowIndex;
-              if (selectedPaths && draggingDown) {
-                let checkIncrement;
-                let prefix;
-                let maybePad;
-                // determine if all the cells in this column of the selectionGrid are incrementing
-                const allAreIncrementing = selectionGrid.every(row => {
-                  // see if cell is selected
-                  const cellInfo = row[cellIndexOfSelectedPath];
-                  if (!cellInfo) return false;
-                  const { cellId } = cellInfo;
-                  const [rowId] = cellId.split(":");
-                  const cellVal = getCellVal(
-                    entityMap[rowId].e,
-                    selectedPath,
-                    pathToField[selectedPath]
-                  );
-                  const cellNumStr = getNumberStrAtEnd(cellVal);
-                  const cellNum = Number(cellNumStr);
-                  const cellTextNoNum = stripNumberAtEnd(cellVal);
-                  if (cellNumStr?.startsWith("0")) {
-                    maybePad = cellNumStr.length;
-                  }
-                  if (cellTextNoNum && !prefix) {
-                    prefix = cellTextNoNum;
-                  }
-                  if (cellTextNoNum && prefix !== cellTextNoNum) {
-                    return false;
-                  }
-                  if (!isNaN(cellNum)) {
-                    if (!checkIncrement) {
-                      checkIncrement = cellNum;
-                      return true;
+              if (incrementStart === undefined) {
+                const draggingDown =
+                  firstCellToSelectRowIndex > selectionGrid?.[0][0].rowIndex;
+                if (selectedPaths && draggingDown) {
+                  let checkIncrement;
+                  let prefix;
+                  let maybePad;
+                  // determine if all the cells in this column of the selectionGrid are incrementing
+                  const allAreIncrementing = selectionGrid.every(row => {
+                    // see if cell is selected
+                    const cellInfo = row[cellIndexOfSelectedPath];
+                    if (!cellInfo) return false;
+                    const { cellId } = cellInfo;
+                    const [rowId] = cellId.split(":");
+                    const cellVal = getCellVal(
+                      entityMap[rowId].e,
+                      selectedPath,
+                      pathToField[selectedPath]
+                    );
+                    const cellNumStr = getNumberStrAtEnd(cellVal);
+                    const cellNum = Number(cellNumStr);
+                    const cellTextNoNum = stripNumberAtEnd(cellVal);
+                    if (cellNumStr?.startsWith("0")) {
+                      maybePad = cellNumStr.length;
+                    }
+                    if (cellTextNoNum && !prefix) {
+                      prefix = cellTextNoNum;
+                    }
+                    if (cellTextNoNum && prefix !== cellTextNoNum) {
+                      return false;
+                    }
+                    if (!isNaN(cellNum)) {
+                      if (!checkIncrement) {
+                        checkIncrement = cellNum;
+                        return true;
+                      } else {
+                        return ++checkIncrement === cellNum;
+                      }
                     } else {
-                      return ++checkIncrement === cellNum;
+                      return false;
                     }
-                  } else {
-                    return false;
-                  }
-                });
+                  });
 
-                if (allAreIncrementing) {
-                  incrementStart = checkIncrement + 1;
-                  incrementPrefix = prefix || "";
-                  incrementPad = maybePad;
+                  if (allAreIncrementing) {
+                    incrementStart = checkIncrement + 1;
+                    incrementPrefix = prefix || "";
+                    incrementPad = maybePad;
+                  }
                 }
               }
             }
           }
-        }
 
-        let firstSelectedCellRowIndex;
-        if (selectionGrid) {
-          selectionGrid[0].some(cell => {
-            if (cell) {
-              firstSelectedCellRowIndex = cell.rowIndex;
-              return true;
-            }
-            return false;
-          });
-        }
+          let firstSelectedCellRowIndex;
+          if (selectionGrid) {
+            selectionGrid[0].some(cell => {
+              if (cell) {
+                firstSelectedCellRowIndex = cell.rowIndex;
+                return true;
+              }
+              return false;
+            });
+          }
+
+          cellsToSelect.forEach(cellId => {
+            const [rowId, cellPath] = cellId.split(":");
+            if (cellPath !== selectedPath) return;
+            newSelectedCells[cellId] = true;
+            const { e: entityToUpdate, i: rowIndex } = entityMap[rowId] || {};
+            if (entityToUpdate) {
+              delete entityToUpdate._isClean;
+              let newVal;
+              if (incrementStart !== undefined) {
+                const num = incrementStart++;
+                newVal = incrementPrefix + padStart(num, incrementPad, "0");
+              } else {
+                if (selectionGrid && selectionGrid.length > 1) {
+                  // if there are multiple cells selected then we want to copy them repeating
+                  // ex: if we have 1,2,3 selected and we drag for 5 more rows we want it to
+                  // be 1,2,3,1,2 for the new row cells in this column
+                  const draggingDown = rowIndex > firstSelectedCellRowIndex;
+                  const cellIndex = pathToIndex[cellPath];
+                  let cellIdToCopy;
+                  if (draggingDown) {
+                    const { cellId } = selectionGrid[
+                      (rowIndex - firstSelectedCellRowIndex) %
+                        selectionGrid.length
+                    ].find(g => g && g.cellIndex === cellIndex);
+                    cellIdToCopy = cellId;
+                  } else {
+                    const lastIndexInGrid =
+                      selectionGrid[selectionGrid.length - 1][0].rowIndex;
+                    const { cellId } = selectionGrid[
+                      (rowIndex + lastIndexInGrid + 1) % selectionGrid.length
+                    ].find(g => g.cellIndex === cellIndex);
+                    cellIdToCopy = cellId;
+                  }
 
-        cellsToSelect.forEach(cellId => {
-          const [rowId, cellPath] = cellId.split(":");
-          if (cellPath !== selectedPath) return;
-          newSelectedCells[cellId] = true;
-          const { e: entityToUpdate, i: rowIndex } = entityMap[rowId] || {};
-          if (entityToUpdate) {
-            delete entityToUpdate._isClean;
-            let newVal;
-            if (incrementStart !== undefined) {
-              const num = incrementStart++;
-              newVal = incrementPrefix + padStart(num, incrementPad, "0");
-            } else {
-              if (selectionGrid && selectionGrid.length > 1) {
-                // if there are multiple cells selected then we want to copy them repeating
-                // ex: if we have 1,2,3 selected and we drag for 5 more rows we want it to
-                // be 1,2,3,1,2 for the new row cells in this column
-                const draggingDown = rowIndex > firstSelectedCellRowIndex;
-                const cellIndex = pathToIndex[cellPath];
-                let cellIdToCopy;
-                if (draggingDown) {
-                  const { cellId } = selectionGrid[
-                    (rowIndex - firstSelectedCellRowIndex) %
-                      selectionGrid.length
-                  ].find(g => g && g.cellIndex === cellIndex);
-                  cellIdToCopy = cellId;
+                  const [rowIdToCopy, cellPathToCopy] = cellIdToCopy.split(":");
+                  newVal = getCellVal(
+                    entityMap[rowIdToCopy].e,
+                    cellPathToCopy,
+                    pathToField[cellPathToCopy]
+                  );
                 } else {
-                  const lastIndexInGrid =
-                    selectionGrid[selectionGrid.length - 1][0].rowIndex;
-                  const { cellId } = selectionGrid[
-                    (rowIndex + lastIndexInGrid + 1) % selectionGrid.length
-                  ].find(g => g.cellIndex === cellIndex);
-                  cellIdToCopy = cellId;
+                  newVal = selectedCellVal;
                 }
-
-                const [rowIdToCopy, cellPathToCopy] = cellIdToCopy.split(":");
-                newVal = getCellVal(
-                  entityMap[rowIdToCopy].e,
-                  cellPathToCopy,
-                  pathToField[cellPathToCopy]
-                );
-              } else {
-                newVal = selectedCellVal;
               }
+              const { error } = editCellHelper({
+                entity: entityToUpdate,
+                path: cellPath,
+                schema,
+                newVal
+              });
+              newCellValidate[cellId] = error;
             }
-            const { error } = editCellHelper({
-              entity: entityToUpdate,
-              path: cellPath,
-              schema,
-              newVal
-            });
-            newCellValidate[cellId] = error;
-          }
+          });
         });
-      });
-
-      // select the new cells
-      updateValidation(entities, newCellValidate);
-      setSelectedCells(newSelectedCells);
-    });
-  };
 
-  const getCopyTextForCell = (val, row = {}, column = {}) => {
-    // TODOCOPY we need a way to potentially omit certain columns from being added as a \t element (talk to taoh about this)
-    let text = typeof val !== "string" ? row.value : val;
+        // select the new cells
+        updateValidation(entities, newCellValidate);
+        setSelectedCells(newSelectedCells);
+      });
+    },
+    [
+      entities,
+      isSelectionARectangle,
+      primarySelectedCellId,
+      reduxFormCellValidation,
+      schema,
+      selectedCells,
+      setSelectedCells,
+      updateEntitiesHelper,
+      updateValidation
+    ]
+  );
 
-    // We should try to take out the props from here, it produces
-    // unnecessary rerenders
-    const record = row.original;
-    if (column.getClipboardData) {
-      text = column.getClipboardData(row.value, record, row, props);
-    } else if (column.getValueToFilterOn) {
-      text = column.getValueToFilterOn(record, props);
-    } else if (column.render) {
-      text = column.render(row.value, record, row, props);
-    } else if (cellRenderer && cellRenderer[column.path]) {
-      text = cellRenderer[column.path](row.value, row.original, row, props);
-    } else if (text) {
-      text = isValidElement(text) ? text : String(text);
-    }
-    const getTextFromElementOrLink = text => {
-      if (isValidElement(text)) {
-        if (text.props?.to) {
-          // this will convert Link elements to url strings
-          return joinUrl(
-            window.location.origin,
-            window.frontEndConfig?.clientBasePath || "",
-            text.props.to
-          );
+  const getCopyTextForCell = useCallback(
+    (val, row = {}, column = {}) => {
+      // TODOCOPY we need a way to potentially omit certain columns from being added as a \t element (talk to taoh about this)
+      let text = typeof val !== "string" ? row.value : val;
+
+      // We should try to take out the props from here, it produces
+      // unnecessary rerenders
+      const record = row.original;
+      if (column.getClipboardData) {
+        text = column.getClipboardData(row.value, record, row);
+      } else if (column.getValueToFilterOn) {
+        text = column.getValueToFilterOn(record);
+      } else if (column.render) {
+        text = column.render(row.value, record, row, {
+          currentParams,
+          setNewParams
+        });
+      } else if (cellRenderer && cellRenderer[column.path]) {
+        text = cellRenderer[column.path](row.value, row.original, row, {
+          currentParams,
+          setNewParams
+        });
+      } else if (text) {
+        text = isValidElement(text) ? text : String(text);
+      }
+      const getTextFromElementOrLink = text => {
+        if (isValidElement(text)) {
+          if (text.props?.to) {
+            // this will convert Link elements to url strings
+            return joinUrl(
+              window.location.origin,
+              window.frontEndConfig?.clientBasePath || "",
+              text.props.to
+            );
+          } else {
+            return getTextFromEl(text);
+          }
         } else {
-          return getTextFromEl(text);
+          return text;
         }
-      } else {
-        return text;
+      };
+      text = getTextFromElementOrLink(text);
+
+      if (Array.isArray(text)) {
+        let arrText = text.map(getTextFromElementOrLink).join(", ");
+        // because we sometimes insert commas after links when mapping over an array of elements we will have double ,'s
+        arrText = arrText.replace(/, ,/g, ",");
+        text = arrText;
       }
-    };
-    text = getTextFromElementOrLink(text);
 
-    if (Array.isArray(text)) {
-      let arrText = text.map(getTextFromElementOrLink).join(", ");
-      // because we sometimes insert commas after links when mapping over an array of elements we will have double ,'s
-      arrText = arrText.replace(/, ,/g, ",");
-      text = arrText;
-    }
+      const stringText = toString(text);
+      if (stringText === "[object Object]") return "";
+      return stringText;
+    },
+    [cellRenderer, currentParams, setNewParams]
+  );
 
-    const stringText = toString(text);
-    if (stringText === "[object Object]") return "";
-    return stringText;
-  };
+  const renderCheckboxCell = useCallback(
+    row => {
+      const rowIndex = row.index;
+      const checkedRows = getSelectedRowsFromEntities(
+        entities,
+        reduxFormSelectedEntityIdMap
+      );
+
+      const isSelected = checkedRows.some(rowNum => {
+        return rowNum === rowIndex;
+      });
+      if (rowIndex >= entities.length) {
+        return <div />;
+      }
+      const entity = entities[rowIndex];
+      return (
+        <Checkbox
+          name={`${getIdOrCodeOrIndex(entity, rowIndex)}-checkbox`}
+          disabled={noSelect || noUserSelect || isEntityDisabled(entity)}
+          onClick={e => {
+            rowClick(e, row, entities, {
+              reduxFormSelectedEntityIdMap,
+              isSingleSelect,
+              noSelect,
+              onRowClick,
+              isEntityDisabled,
+              withCheckboxes,
+              onDeselect,
+              onSingleRowSelect,
+              onMultiRowSelect,
+              noDeselectAll,
+              onRowSelect,
+              change
+            });
+          }}
+          checked={isSelected}
+        />
+      );
+    },
+    [
+      change,
+      entities,
+      isEntityDisabled,
+      isSingleSelect,
+      noDeselectAll,
+      noSelect,
+      noUserSelect,
+      onDeselect,
+      onMultiRowSelect,
+      onRowClick,
+      onRowSelect,
+      onSingleRowSelect,
+      reduxFormSelectedEntityIdMap,
+      withCheckboxes
+    ]
+  );
+
+  const finishCellEdit = useCallback(
+    (cellId, newVal, doNotStopEditing) => {
+      const [rowId, path] = cellId.split(":");
+      !doNotStopEditing && change("reduxFormEditingCell", null);
+      updateEntitiesHelper(entities, entities => {
+        const entity = entities.find((e, i) => {
+          return getIdOrCodeOrIndex(e, i) === rowId;
+        });
+        delete entity._isClean;
+        const { error } = editCellHelper({
+          entity,
+          path,
+          schema,
+          newVal
+        });
+
+        updateValidation(entities, {
+          ...reduxFormCellValidation,
+          [cellId]: error
+        });
+      });
+      !doNotStopEditing && refocusTable();
+    },
+    [
+      change,
+      entities,
+      reduxFormCellValidation,
+      refocusTable,
+      schema,
+      updateEntitiesHelper,
+      updateValidation
+    ]
+  );
+
+  const cancelCellEdit = useCallback(() => {
+    change("reduxFormEditingCell", null);
+    refocusTable();
+  }, [change, refocusTable]);
 
   if (!columns.length) {
     return columns;
@@ -848,72 +792,6 @@ export const RenderColumns = props => {
     });
   }
 
-  const renderCheckboxCell = row => {
-    const rowIndex = row.index;
-    const checkedRows = getSelectedRowsFromEntities(
-      entities,
-      reduxFormSelectedEntityIdMap
-    );
-
-    const isSelected = checkedRows.some(rowNum => {
-      return rowNum === rowIndex;
-    });
-    if (rowIndex >= entities.length) {
-      return <div />;
-    }
-    const entity = entities[rowIndex];
-    return (
-      <Checkbox
-        name={`${getIdOrCodeOrIndex(entity, rowIndex)}-checkbox`}
-        disabled={noSelect || noUserSelect || isEntityDisabled(entity)}
-        onClick={e => {
-          rowClick(e, row, entities, {
-            reduxFormSelectedEntityIdMap,
-            isSingleSelect,
-            noSelect,
-            onRowClick,
-            isEntityDisabled,
-            withCheckboxes,
-            onDeselect,
-            onSingleRowSelect,
-            onMultiRowSelect,
-            noDeselectAll,
-            onRowSelect,
-            change
-          });
-        }}
-        checked={isSelected}
-      />
-    );
-  };
-
-  const finishCellEdit = (cellId, newVal, doNotStopEditing) => {
-    const [rowId, path] = cellId.split(":");
-    !doNotStopEditing && setEditingCell(null);
-    updateEntitiesHelper(entities, entities => {
-      const entity = entities.find((e, i) => {
-        return getIdOrCodeOrIndex(e, i) === rowId;
-      });
-      delete entity._isClean;
-      const { error } = editCellHelper({
-        entity,
-        path,
-        schema,
-        newVal
-      });
-      updateValidation(entities, {
-        ...reduxFormCellValidation,
-        [cellId]: error
-      });
-    });
-    !doNotStopEditing && refocusTable();
-  };
-
-  const cancelCellEdit = () => {
-    setEditingCell(null);
-    refocusTable();
-  };
-
   if (withCheckboxes) {
     columnsToRender.push({
       Header: renderCheckboxHeader({
@@ -947,7 +825,7 @@ export const RenderColumns = props => {
     });
   }
 
-  columns.forEach(column => {
+  const tableColumns = columns.map(column => {
     const tableColumn = {
       ...column,
       Header: RenderColumnHeader({
@@ -982,17 +860,18 @@ export const RenderColumns = props => {
     }
     if (cellRenderer && cellRenderer[column.path]) {
       tableColumn.Cell = row => {
-        const val = cellRenderer[column.path](
-          row.value,
-          row.original,
-          row,
-          props
-        );
+        const val = cellRenderer[column.path](row.value, row.original, row, {
+          currentParams,
+          setNewParams
+        });
         return val;
       };
     } else if (column.render) {
       tableColumn.Cell = row => {
-        const val = column.render(row.value, row.original, row, props);
+        const val = column.render(row.value, row.original, row, {
+          currentParams,
+          setNewParams
+        });
         return val;
       };
     } else if (column.type === "timestamp") {
@@ -1040,6 +919,7 @@ export const RenderColumns = props => {
     tableColumn.Cell = (...args) => (
       <RenderCell
         oldFunc={oldFunc}
+        formName={formName}
         getCopyTextForCell={getCopyTextForCell}
         column={column}
         isCellEditable={isCellEditable}
@@ -1048,8 +928,6 @@ export const RenderColumns = props => {
         noEllipsis={noEllipsis}
         editingCell={editingCell}
         cancelCellEdit={cancelCellEdit}
-        editableCellValue={editableCellValue}
-        setEditableCellValue={setEditableCellValue}
         editingCellSelectAll={editingCellSelectAll}
         getCellHoverText={getCellHoverText}
         selectedCells={selectedCells}
@@ -1060,7 +938,8 @@ export const RenderColumns = props => {
         args={args}
       />
     );
-    columnsToRender.push(tableColumn);
+    return tableColumn;
   });
-  return columnsToRender;
+
+  return columnsToRender.concat(tableColumns);
 };

package/src/DataTable/EditableCell.js

@@ -0,0 +1,44 @@
+import React, { useEffect, useRef, useState } from "react";
+
+export const EditableCell = ({
+  cancelEdit,
+  dataTest,
+  finishEdit,
+  isNumeric,
+  initialValue
+}) => {
+  const [value, setValue] = useState(initialValue);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isNumeric]);
+
+  return (
+    <input
+      style={{
+        border: 0,
+        width: "95%",
+        fontSize: 12,
+        background: "none"
+      }}
+      ref={inputRef}
+      {...dataTest}
+      autoFocus
+      onKeyDown={e => {
+        e.stopPropagation();
+        if (e.key === "Enter") {
+          e.target.blur();
+        } else if (e.key === "Escape") {
+          cancelEdit();
+        }
+      }}
+      onBlur={() => finishEdit(value)}
+      onChange={e => setValue(e.target.value)}
+      type={isNumeric ? "number" : undefined}
+      value={value}
+    />
+  );
+};

package/src/DataTable/RenderCell.js

@@ -0,0 +1,191 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import { Checkbox, Icon } from "@blueprintjs/core";
+import {
+  getIdOrCodeOrIndex,
+  isBottomRightCornerOfRectangle,
+  PRIMARY_SELECTED_VAL
+} from "./utils";
+import { DropdownCell } from "./DropdownCell";
+import { EditableCell } from "./EditableCell";
+import { getVals } from "./getVals";
+import { CellDragHandle } from "./CellDragHandle";
+
+export const RenderCell = ({
+  oldFunc,
+  getCopyTextForCell,
+  column,
+  isCellEditable,
+  isEntityDisabled,
+  finishCellEdit,
+  formName,
+  noEllipsis,
+  cancelCellEdit,
+  getCellHoverText,
+  selectedCells,
+  isSelectionARectangle,
+  startCellEdit,
+  tableRef,
+  onDragEnd,
+  args
+}) => {
+  const editingCell = useSelector(
+    state => state.form?.[formName]?.values?.reduxFormEditingCell
+  );
+  const initialValue = useSelector(
+    state => state.form?.[formName]?.values?.reduxFormInitialValue
+  );
+
+  const [row] = args;
+  const rowId = getIdOrCodeOrIndex(row.original, row.index);
+  const cellId = `${rowId}:${row.column.path}`;
+  const isEditingCell = editingCell === cellId;
+  let val = oldFunc(...args);
+  const oldVal = val;
+  const text = getCopyTextForCell(val, row, column);
+  const dataTest = {
+    "data-test": "tgCell_" + column.path
+  };
+  const fullValue = row.original?.[row.column.path];
+
+  if (isEditingCell) {
+    if (column.type === "genericSelect") {
+      const GenericSelectComp = column.GenericSelectComp;
+
+      return (
+        <GenericSelectComp
+          rowId={rowId}
+          fullValue={fullValue}
+          initialValue={text}
+          {...dataTest}
+          finishEdit={(newVal, doNotStopEditing) => {
+            finishCellEdit(cellId, newVal, doNotStopEditing);
+          }}
+          dataTest={dataTest}
+          cancelEdit={cancelCellEdit}
+        />
+      );
+    }
+    if (column.type === "dropdown" || column.type === "dropdownMulti") {
+      return (
+        <DropdownCell
+          isMulti={dataTest.isMulti || column.type === "dropdownMulti"}
+          initialValue={dataTest.initialValue || text}
+          options={getVals(column.values)}
+          finishEdit={(newVal, doNotStopEditing) => {
+            finishCellEdit(cellId, newVal, doNotStopEditing);
+          }}
+          dataTest={dataTest}
+          cancelEdit={cancelCellEdit}
+        />
+      );
+    } else {
+      return (
+        <EditableCell
+          dataTest={dataTest}
+          cancelEdit={cancelCellEdit}
+          isNumeric={column.type === "number"}
+          initialValue={initialValue || text}
+          finishEdit={newVal => {
+            finishCellEdit(cellId, newVal);
+          }}
+        />
+      );
+    }
+  }
+
+  const isBool = column.type === "boolean";
+  if (isCellEditable && isBool) {
+    val = (
+      <Checkbox
+        disabled={isEntityDisabled(row.original)}
+        className="tg-cell-edit-boolean-checkbox"
+        checked={oldVal === "True"}
+        onChange={e => {
+          const checked = e.target.checked;
+          finishCellEdit(cellId, checked);
+        }}
+      />
+    );
+    noEllipsis = true;
+  }
+
+  //wrap the original tableColumn.Cell function in another div in order to add a title attribute
+  let title = text;
+  if (getCellHoverText) title = getCellHoverText(...args);
+  else if (column.getTitleAttr) title = column.getTitleAttr(...args);
+  const isSelectedCell = selectedCells?.[cellId];
+  const {
+    isRect,
+    selectionGrid,
+    lastRowIndex,
+    lastCellIndex,
+    entityMap,
+    pathToIndex
+  } = isSelectionARectangle();
+
+  return (
+    <>
+      <div
+        style={{
+          ...(!noEllipsis && {
+            textOverflow: "ellipsis",
+            overflow: "hidden"
+          })
+        }}
+        {...dataTest}
+        className="tg-cell-wrapper"
+        data-copy-text={text}
+        data-copy-json={JSON.stringify(
+          //tnw: eventually we'll parse these back out and use either the fullValue (for the generic selects) or the regular text vals for everything else
+          column.type === "genericSelect"
+            ? {
+                __strVal: fullValue,
+                __genSelCol: column.path
+              }
+            : { __strVal: text }
+        )}
+        title={title || undefined}
+      >
+        {val}
+      </div>
+      {isCellEditable &&
+        (column.type === "dropdown" ||
+          column.type === "dropdownMulti" ||
+          column.type === "genericSelect") && (
+          <Icon
+            icon="caret-down"
+            style={{
+              position: "absolute",
+              right: 5,
+              opacity: 0.3
+            }}
+            className="cell-edit-dropdown"
+            onClick={() => {
+              startCellEdit(cellId);
+            }}
+          />
+        )}
+
+      {isSelectedCell &&
+        (isRect
+          ? isBottomRightCornerOfRectangle({
+              cellId,
+              selectionGrid,
+              lastRowIndex,
+              lastCellIndex,
+              entityMap,
+              pathToIndex
+            })
+          : isSelectedCell === PRIMARY_SELECTED_VAL) && (
+          <CellDragHandle
+            key={cellId}
+            thisTable={tableRef.current.tableRef}
+            cellId={cellId}
+            isSelectionARectangle={isSelectionARectangle}
+            onDragEnd={onDragEnd}
+          />
+        )}
+    </>
+  );
+};

package/src/TgSelect/index.js

@@ -93,11 +93,11 @@ class TgSelect extends React.Component {
           return true;
         });
       }
-      return onChange([...valArray, item]);
+      return onChange([...valArray, item], e);
     } else {
       this.setOpenState(false);
       this.input && this.input.blur();
-      return onChange(item);
+      return onChange(item, e);
     }
   };