@economic/taco 2.44.5-create.7 → 2.44.5-create.8

package/dist/taco.cjs.development.js

@@ -43,7 +43,8 @@ var set = _interopDefault(require('lodash/set'));
 var unset = _interopDefault(require('lodash/unset'));
 var compact = _interopDefault(require('lodash/compact'));
 var pullAt = _interopDefault(require('lodash/pullAt'));
-var lodash = require('lodash');
+var omit = _interopDefault(require('lodash/omit'));
+var setWith = _interopDefault(require('lodash/setWith'));
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var Joyride = require('react-joyride');
 var Joyride__default = _interopDefault(Joyride);
@@ -4205,7 +4206,7 @@ const getOverlaySelector = element => {
       return undefined;
   }
 };
-function isElementInsideOrTriggeredFromContainer(element, container) {
+function isElementTriggeredFromContainer(element, container) {
   var _getOverlaySelector, _element$closest;
   const selector = (_getOverlaySelector = getOverlaySelector(element)) !== null && _getOverlaySelector !== void 0 ? _getOverlaySelector : getOverlaySelector((_element$closest = element === null || element === void 0 ? void 0 : element.closest('[role=dialog],[role=menu]')) !== null && _element$closest !== void 0 ? _element$closest : null);
   if (selector) {
@@ -4215,11 +4216,14 @@ function isElementInsideOrTriggeredFromContainer(element, container) {
     const elementInDocument = document.querySelector(selector);
     // if the element does exist, see if it is itself connected to somethng that was triggered from the container
     if (elementInDocument) {
-      return isElementInsideOrTriggeredFromContainer(elementInDocument, container);
+      return isElementTriggeredFromContainer(elementInDocument, container);
     }
     return false;
   }
-  return !!(container !== null && container !== void 0 && container.contains(element));
+  return false;
+}
+function isElementInsideOrTriggeredFromContainer(element, container) {
+  return isElementTriggeredFromContainer(element, container) || !!(container !== null && container !== void 0 && container.contains(element));
 }
 function isElementInsideOverlay(element) {
   return !!(element !== null && element !== void 0 && element.closest('[role=dialog],[role=menu]'));
@@ -4713,7 +4717,9 @@ const defaultLocalisationTexts = {
           tooltip: 'Edit table'
         },
         create: {
-          label: 'New'
+          label: 'New',
+          disabled: 'Existing new row must be saved',
+          saving: 'Saving...'
         }
       },
       clearChangesConfirmationDialog: {
@@ -4735,8 +4741,8 @@ const defaultLocalisationTexts = {
       },
       validation: {
         alert: {
-          titleOne: '[COUNT] unsaved entry:',
-          titlePlural: '[COUNT] unsaved entries:',
+          titleOne: '[COUNT] unsaved row:',
+          titlePlural: '[COUNT] unsaved rows:',
           messageOne: "[COLUMN] [ROW] is incomplete and hasn't been saved.",
           messagePlural: "[COLUMN] [ROW] are incomplete and haven't been saved.",
           messageRow: 'Row',
@@ -7632,7 +7638,7 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
     onCheckedChange: onChange,
     ref: ref
   }), /*#__PURE__*/React.createElement(PrimitiveSwitch.Thumb, {
-    className: "'will-change-transform mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform group-disabled:opacity-50 group-aria-checked:translate-x-[1.1rem]"
+    className: "pointer-events-none mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform will-change-transform group-disabled:opacity-50 group-aria-checked:translate-x-[1.1rem]"
   }));
   if (label) {
     const labelContainerClassName = cn('flex self-start cursor-pointer', {
@@ -8692,10 +8698,10 @@ const ModeSwitch = /*#__PURE__*/React.forwardRef(function ModeSwitch(props, ref)
     onCheckedChange: onChange,
     ref: ref
   }), /*#__PURE__*/React.createElement(PrimitiveSwitch.Thumb, {
-    className: "'will-change-transform flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform group-disabled:opacity-50 group-aria-checked:translate-x-[100%]"
+    className: "pointer-events-none flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform will-change-transform group-disabled:opacity-50 group-aria-checked:translate-x-[100%]"
   }, /*#__PURE__*/React.createElement(Icon, {
     name: "edit-simple",
-    className: "!h-5 !w-5"
+    className: "pointer-events-none !h-5 !w-5"
   })));
 });
 ModeSwitch.displayName = 'ModeSwitch';
@@ -10398,6 +10404,15 @@ function configureReactTableOptions(options, props, localization) {
   // We don't want to expose internal Tanstack Table row, so we need to wrap enableRowSelection callback into additional function,
   // which receives the React Table Row object and passes row.original to a callback.
   const reactTableEnableRowSelection = typeof options.enableRowSelection === 'function' ? row => options.enableRowSelection(row.original) : options.enableRowSelection;
+  let getRowId;
+  if (props.rowIdentityAccessor) {
+    getRowId = (originalRow, index) => {
+      if (originalRow) {
+        return String(originalRow[props.rowIdentityAccessor]);
+      }
+      return String(index);
+    };
+  }
   const tableOptions = {
     defaultColumn: {
       enableColumnFilter: options.enableFiltering || true,
@@ -10416,11 +10431,13 @@ function configureReactTableOptions(options, props, localization) {
     enableGrouping: true,
     enableHiding: (_options$enableColumn2 = options.enableColumnHiding) !== null && _options$enableColumn2 !== void 0 ? _options$enableColumn2 : false,
     enablePinning: (_options$enableColumn3 = options.enableColumnFreezing) !== null && _options$enableColumn3 !== void 0 ? _options$enableColumn3 : false,
+    enableRowPinning: true,
     enableRowSelection: reactTableEnableRowSelection !== null && reactTableEnableRowSelection !== void 0 ? reactTableEnableRowSelection : false,
     enableSorting: (_options$enableSortin = options.enableSorting) !== null && _options$enableSortin !== void 0 ? _options$enableSortin : false,
     // models for default features
     getExpandedRowModel: reactTable.getExpandedRowModel(),
     getGroupedRowModel: reactTable.getGroupedRowModel(),
+    getRowId,
     groupedColumnMode: false
   };
   if (tableOptions.enableColumnResizing) {
@@ -11753,7 +11770,7 @@ function useTableManager(props, meta, internalColumns) {
       rowDrag,
       rowDrop: rowDrop,
       rowExpansion: rowExpansion,
-      rowIdentityColumnId: props.rowIdentityColumnId,
+      rowIdentityAccessor: props.rowIdentityAccessor,
       rowGoto,
       rowGroups: rowGroups,
       rowHeight,
@@ -12118,11 +12135,31 @@ function Row(props) {
   })));
 }
 
-function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
+// scroll padding end is designed to always show half of the next row
+function getScrollPaddingEndOffset(table, options) {
+  var _options$virtualiserP;
+  const tableMeta = table.options.meta;
+  let offset = 2 + ((_options$virtualiserP = options === null || options === void 0 ? void 0 : options.virtualiserPaddingEndOffset) !== null && _options$virtualiserP !== void 0 ? _options$virtualiserP : 0);
+  if (tableMeta.footer.isEnabled) {
+    offset += 1;
+  }
+  if (table.getHeaderGroups().length > 1) {
+    offset += table.getHeaderGroups().length - 1;
+  }
+  let height = ROW_HEIGHT_ESTIMATES.medium * offset;
+  const bottomRows = table.getBottomRows();
+  if (bottomRows.length) {
+    // 1.4 offsets for half rows and also accounts for increased row heights (which is likely in pinned rows)
+    height += ROW_HEIGHT_ESTIMATES[tableMeta.rowHeight.height] * 1.4 * bottomRows.length;
+  }
+  return height;
+}
+function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex, options) {
   var _table$getState$group, _virtualItems$padding, _virtualItems$padding2, _virtualItems$padding3, _ref, _virtualItems;
   const tableMeta = table.options.meta;
-  const rows = table.getRowModel().rows;
+  const rows = table.getCenterRows();
   const isTableRowGrouped = !!((_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length);
+  const bottomRows = table.getBottomRows();
   // expanded rows
   const {
     createRowMeasurer,
@@ -12132,9 +12169,6 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
   const rangeExtractor = useRowGroupVirtualisation(table);
   // account for thead and tfoot in the scroll area - both are always medium row height
   const scrollPaddingStart = ROW_HEIGHT_ESTIMATES.medium;
-  // column groups offset the bottom padding :shrug:, multiplying by 1.5 ensures the bottom padding remains
-  // consistent when there are groups and when there aren't. 1.5 is relatively arbitrary, but it gives alignment
-  const scrollPaddingEnd = ROW_HEIGHT_ESTIMATES.medium * (table.getHeaderGroups().length > 1 ? 1.5 : 1);
   const virtualiser = reactVirtual.useVirtualizer({
     count: rows.length,
     estimateSize,
@@ -12143,7 +12177,8 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
     rangeExtractor,
     // correctly sets the scroll padding offset, e.g. when keyboard navigating rows in the list
     scrollPaddingStart,
-    scrollPaddingEnd: tableMeta.footer.isEnabled ? scrollPaddingEnd * 2 : scrollPaddingEnd
+    scrollPaddingEnd: getScrollPaddingEndOffset(table, options),
+    paddingEnd: ROW_HEIGHT_ESTIMATES.medium * bottomRows.length
   });
   const totalSize = virtualiser.getTotalSize();
   const virtualItems = virtualiser.getVirtualItems();
@@ -12300,12 +12335,14 @@ function Actions$1(props) {
     actionsLength,
     data,
     isActiveRow,
-    rowId
+    rowId,
+    table
   } = props;
   const {
     texts
   } = useLocalization();
-  const visibleActions = actions.map(action => action(data, rowId)).filter(action => !!action);
+  // we don't want to document passing table, so it isn't on the type
+  const visibleActions = actions.map(action => action(data, rowId, table)).filter(action => !!action);
   const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);
   const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);
   const className = cn('flex justify-end text-right bg-[inherit] shadow-[-6px_0px_6px_var(--table-row-actions-shadow)] print:hidden');
@@ -12361,7 +12398,8 @@ const Cell = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
       actionsLength: actionsLength,
       data: row.original,
       isActiveRow: isActiveRow,
-      rowId: row.id
+      rowId: row.id,
+      table: table
     });
   }
   return null;
@@ -12611,13 +12649,13 @@ const INTERNAL_RENDERERS = {
   rowExpansion: renderer$2,
   rowSelection: renderer$3
 };
-function useTable(props, externalRef, renderers, meta) {
+function useTable(props, externalRef, renderers, meta, options) {
   // create a ref and merge with the consumer's ref
   const ref = useMergedRef(externalRef);
   // configure the table
   const manager = useTableManager(props, meta, INTERNAL_RENDERERS);
   // configure the virtualised renderer
-  const renderer = useTableRenderer(renderers, manager.instance, ref, props.defaultRowActiveIndex);
+  const renderer = useTableRenderer(renderers, manager.instance, ref, props.defaultRowActiveIndex, options);
   // configure dynamic styling
   const {
     style,
@@ -12718,7 +12756,10 @@ function GroupedCell(props) {
     index,
     isHighlighted
   } = props;
-  const tableMeta = cell.getContext().table.options.meta;
+  const {
+    table
+  } = cell.getContext();
+  const tableMeta = table.options.meta;
   const columnMeta = cell.column.columnDef.meta;
   const attributes = getCellAttributes(cell, index, isHighlighted);
   const {
@@ -12736,7 +12777,8 @@ function GroupedCell(props) {
     colSpan: colSpan,
     rowActions: tableMeta.rowGroups.rowActionsForGroup,
     rowId: cell.row.id,
-    subRows: subRows
+    subRows: subRows,
+    table: table
   }), content);
 }
 const MemoedGroupedCell = /*#__PURE__*/React__default.memo(function MemoedGroupedCell(props) {
@@ -12748,6 +12790,7 @@ const MemoedGroupedCell = /*#__PURE__*/React__default.memo(function MemoedGroupe
     rowActions,
     rowId,
     subRows,
+    table,
     ...attributes
   } = props;
   return /*#__PURE__*/React__default.createElement("td", Object.assign({}, attributes, {
@@ -12762,7 +12805,8 @@ const MemoedGroupedCell = /*#__PURE__*/React__default.memo(function MemoedGroupe
     actionsLength: 4,
     data: subRows,
     isActiveRow: true,
-    rowId: rowId
+    rowId: rowId,
+    table: table
   })) : null);
 });
 
@@ -12902,7 +12946,7 @@ const DisplayRow = /*#__PURE__*/React__default.memo(function DisplayRow(props) {
   const expansionRef = React__default.useRef(null);
   const isExpanded = !!attributes['data-row-expanded'];
   useSetVirtualisedRowHeight(measureRow, ref.current, expansionRef.current, isExpanded);
-  const className = cn('group/row', {
+  const className = cn('group/row', otherAttributes.className, {
     'hover:cursor-grab': tableMeta.rowDrag.isEnabled && typeof attributes.onClick !== 'function',
     'hover:cursor-pointer': typeof attributes.onClick === 'function'
   });
@@ -13696,7 +13740,7 @@ function Summary(props) {
 
 function Foot(props) {
   const nonGroupedHeaders = props.table.getFooterGroups()[0].headers.filter(header => !header.column.getIsGrouped());
-  return /*#__PURE__*/React__default.createElement("tfoot", null, /*#__PURE__*/React__default.createElement("tr", null, nonGroupedHeaders.map((header, index) => (/*#__PURE__*/React__default.createElement(Footer$3, {
+  return /*#__PURE__*/React__default.createElement("tfoot", null, props.children, /*#__PURE__*/React__default.createElement("tr", null, nonGroupedHeaders.map((header, index) => (/*#__PURE__*/React__default.createElement(Footer$3, {
     key: header.id,
     header: header,
     index: index
@@ -16396,7 +16440,7 @@ function Control(props) {
   const dataType = column === null || column === void 0 ? void 0 : (_column$columnDef$met3 = column.columnDef.meta) === null || _column$columnDef$met3 === void 0 ? void 0 : _column$columnDef$met3.dataType;
   React.useEffect(() => {
     // Set value to false only after first render of the control (when it's undefined) after setting the FilterColumn value, because we don't want to change then the value every time filter is opened
-    if ((controlRenderer === 'switch' || controlRenderer === 'checkbox') && value === undefined) {
+    if (controlRenderer === 'switch' && value === undefined) {
       onChange(false);
     }
   }, [controlRenderer]);
@@ -16420,12 +16464,6 @@ function Control(props) {
       checked: Boolean(value),
       onChange: onChange
     }));
-  } else if (controlRenderer === 'checkbox') {
-    return /*#__PURE__*/React__default.createElement(Checkbox, Object.assign({}, attributes, {
-      className: "!m-1.5",
-      checked: Boolean(value),
-      onChange: onChange
-    }));
   } else if ((controlRenderer === 'input' || controlRenderer === undefined) && dataType === 'number') {
     return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, attributes, {
       className: "flex-grow",
@@ -16778,6 +16816,7 @@ function TableGrid(props) {
   var _table$state$grouping;
   const {
     enableHorizontalArrowKeyNavigation,
+    rowsForFooter,
     table,
     ...attributes
   } = props;
@@ -16785,8 +16824,6 @@ function TableGrid(props) {
     table.meta.rowActive.handleFocus(event, table.meta.length, table.renderer.scrollToIndex);
   } : undefined;
   const filterReason = getFilterReason(table);
-  const searchNotApplied = !table.state.globalFilter || table.state.globalFilter === '';
-  const filtersNotApplied = !table.state.columnFilters || table.state.columnFilters.length === 0;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("style", null, table.stylesheet), /*#__PURE__*/React__default.createElement(focus.FocusScope, null, /*#__PURE__*/React__default.createElement("table", Object.assign({}, attributes, {
     id: table.id,
     "data-table-font-size": table.meta.fontSize.size,
@@ -16819,9 +16856,9 @@ function TableGrid(props) {
       ...table.renderer.style,
       height: table.renderer.style.height + ROW_HEIGHT_ESTIMATES[table.meta.rowHeight.height]
     } : table.renderer.style
-  }, table.renderer.rows, searchNotApplied && filtersNotApplied && props.children), table.meta.footer.isEnabled ? /*#__PURE__*/React__default.createElement(Foot, {
+  }, table.renderer.rows, props.children), table.meta.footer.isEnabled ? /*#__PURE__*/React__default.createElement(Foot, {
     table: table.instance
-  }) : null)))));
+  }, rowsForFooter) : null)))));
 }
 
 function Column$1(_) {
@@ -18324,33 +18361,16 @@ const useTableRowCreation = (data, tableRef) => {
 
 function useTableEditingListener(table, tableRef) {
   const tableMeta = table.options.meta;
-  const completedRowsCount = tableMeta.editing.getCompletedRowsCount();
   const localization = useLocalization();
-  const saveChanges = () => {
-    requestAnimationFrame(() => {
-      tableMeta.editing.saveChanges();
-    });
-  };
   // save when the row changes
+  // store the last row active index, otherwise everytime tableMeta.editing.saveChanges changes the hook runs again
+  const lastRowActiveIndexRef = React__default.useRef(tableMeta.rowActive.rowActiveIndex);
   useLazyEffect(() => {
-    if (tableMeta.editing.isEditing) {
-      saveChanges();
-    }
-  }, [tableMeta.rowActive.rowActiveIndex]);
-  useLazyEffect(() => {
-    if (tableMeta.editing.isEditing) {
-      if (tableMeta.rowActive.rowActiveIndex === undefined) {
-        tableMeta.rowActive.setRowActiveIndex(0);
-      }
-    } else {
-      // save
-      saveChanges();
-      // reset detailed mode
-      tableMeta.editing.toggleDetailedMode(false);
-      // reset the last index back to the first focusable element, when editing gets turned off
-      tableMeta.editing.setLastFocusedCellIndex(undefined);
+    if (tableMeta.editing.isEditing && tableMeta.rowActive.rowActiveIndex !== lastRowActiveIndexRef.current) {
+      lastRowActiveIndexRef.current = tableMeta.rowActive.rowActiveIndex;
+      tableMeta.editing.saveChanges(table);
     }
-  }, [tableMeta.editing.isEditing]);
+  }, [tableMeta.rowActive.rowActiveIndex, tableMeta.editing.saveChanges]);
   // show a warning if the user navigates away without triggering save, such as using the browser back/forward button
   const hasChanges = tableMeta.editing.hasChanges();
   React__default.useEffect(() => {
@@ -18366,25 +18386,46 @@ function useTableEditingListener(table, tableRef) {
       window.removeEventListener('beforeunload', showUnsavedChangesWarning);
     };
   }, [tableMeta.editing.isEditing, hasChanges]);
-  React__default.useEffect(() => {
-    if (completedRowsCount > 0) {
+  const hasSavedChanges = tableMeta.editing.hasSaved();
+  useLazyEffect(() => {
+    if (hasSavedChanges) {
       resetHighlightedColumnIndexes(table.getState().globalFilter, table, localization);
     }
-  }, [completedRowsCount]);
+  }, [hasSavedChanges]);
   React__default.useEffect(() => {
     const onClickOutside = event => {
       if (tableMeta.editing.isEditing) {
-        var _event$target$getAttr, _event$target;
-        const element = (_event$target$getAttr = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.getAttribute('data-taco')) !== null && _event$target$getAttr !== void 0 ? _event$target$getAttr : '';
-        const insideTable = isElementInsideOrTriggeredFromContainer(event.target, tableRef.current) || element === 'backdrop';
-        if (!insideTable) {
-          saveChanges();
+        const element = event.target;
+        const insideTable = element.getAttribute('data-taco') === 'backdrop' || element.getAttribute('data-table') === 'editing-toggle' || isElementInsideOrTriggeredFromContainer(element, tableRef.current);
+        // users can click the white space below rows which could be inside the table, but a valid scenario to save
+        if (!insideTable || element.tagName === 'TABLE' || element.tagName === 'TBODY') {
+          tableMeta.editing.saveChanges(table);
         }
       }
     };
     document.addEventListener('click', onClickOutside);
     return () => document.removeEventListener('click', onClickOutside);
-  }, [saveChanges, tableMeta.editing.isEditing]);
+  }, [tableMeta.editing.isEditing, tableMeta.editing.saveChanges]);
+  const rows = table.getRowModel().rows;
+  // make sure pending changes are removed for rows that no longer exist
+  useLazyEffect(() => {
+    const pendingChanges = tableMeta.editing.getErrorsShownInAlert();
+    pendingChanges.forEach(pendingChange => {
+      try {
+        table.getRow(pendingChange.rowId);
+      } catch {
+        tableMeta.editing.discardChanges(pendingChange.rowId, table);
+      }
+    });
+  }, [rows.length]);
+  useGlobalKeyDown(tableMeta.editing.isEditing ? {
+    key: 's',
+    meta: true,
+    shift: false
+  } : undefined, event => {
+    event.preventDefault();
+    tableMeta.editing.saveChanges(table);
+  });
 }
 
 function willRowMove(cell, change, rowIndex, localization) {
@@ -18466,444 +18507,547 @@ function willRowMoveAfterSorting(cell, change, rowIndex) {
   }
   return ((_resortedRows$index = resortedRows[index]) === null || _resortedRows$index === void 0 ? void 0 : _resortedRows$index.id) !== cell.row.id;
 }
-function animateCreateRow(id) {
-  const templateRow = document.querySelector(`[data-row-id="${id}"]`);
-  if (templateRow) {
-    const firstCell = templateRow.querySelector(':first-child');
-    const checkbox = firstCell === null || firstCell === void 0 ? void 0 : firstCell.querySelector('[data-taco="checkbox"]');
-    firstCell === null || firstCell === void 0 ? void 0 : firstCell.focus();
-    if (checkbox) {
-      setDataFocusAttribute(checkbox);
-    }
-    templateRow.scrollIntoView();
-    const keyframes = [{
-      background: '#b2c7ef'
-    }, {
-      background: '#ebebeb'
-    }];
-    for (const child of templateRow.children) {
-      child.animate(keyframes, {
-        duration: 1000,
-        easing: 'ease-out'
-      });
-    }
+const TEMPORARY_ROW_ID_PREFIX = 'temp-';
+function isTemporaryRow(rowId) {
+  if (rowId === undefined) {
+    return false;
   }
+  return String(rowId).startsWith(TEMPORARY_ROW_ID_PREFIX);
 }
 
-function useTableEditing(isEnabled = false, handleSave, handleChange, validator) {
-  // used to switch the table into editing mode
-  const [isEditing, toggleEditing] = React__default.useState(false);
-  // used to switch the editing between "detailed" mode
-  const [isDetailedMode, toggleDetailedMode] = React__default.useState(false);
-  // store the last focused cell, so that up/down arrow key navigation remains in the same column
-  const [lastFocusedCellIndex, setLastFocusedCellIndex] = useLastFocusedCellIndex();
-  // store pending changes for each row
-  // changes are saved as soon as the active row changes, so in most cases this will only contain the active row's changes
-  // but not always - if validation or server requests fail when saving, those rows remain until the failure is resolved
-  const pendingChangesFns = usePendingChanges(isEnabled, handleSave, handleChange, validator);
-  useGlobalKeyDown(isEnabled && isEditing ? {
-    key: 's',
-    meta: true,
-    shift: false
-  } : undefined, event => {
-    event.preventDefault();
-    pendingChangesFns.saveChanges();
-  });
-  return {
-    isEnabled,
-    isEditing,
-    isDetailedMode,
-    toggleDetailedMode: isEnabled ? toggleDetailedMode : () => undefined,
-    toggleEditing: isEnabled ? toggleEditing : () => undefined,
-    lastFocusedCellIndex,
-    setLastFocusedCellIndex,
-    ...pendingChangesFns
-  };
+const DELAY_BEFORE_REMOVING_SAVE_STATUS = 3000;
+function reducer$2(state, action) {
+  const {
+    type,
+    rowId,
+    payload
+  } = action;
+  switch (type) {
+    case 'setCellValue':
+      {
+        const {
+          columnId,
+          row,
+          value
+        } = payload;
+        return {
+          ...state,
+          changes: {
+            ...state.changes,
+            rows: setWith(state.changes.rows, `${rowId}.${columnId}`, value, Object),
+            originals: setWith(state.changes.originals, rowId, row, Object)
+          }
+        };
+      }
+    case 'removeCellValue':
+      {
+        const {
+          columnId,
+          rowIdentityAccessor
+        } = payload;
+        const changes = omit(state.changes.rows, `${rowId}.${columnId}`);
+        // if there are no changes left, remove the row
+        if (!Object.keys(changes[rowId]).length) {
+          return reducer$2(state, {
+            type: 'removeRow',
+            rowId,
+            payload: {
+              rowIdentityAccessor
+            }
+          });
+        }
+        return {
+          ...state,
+          changes: {
+            ...state.changes,
+            rows: omit(state.changes.rows, `${rowId}.${columnId}`),
+            errors: omit(state.changes.errors, `${rowId}.cells.${columnId}`),
+            moveReasons: omit(state.changes.moveReasons, `${rowId}.${columnId}`)
+          }
+        };
+      }
+    case 'updateRow':
+      {
+        const {
+          cellErrors,
+          moveReasons,
+          original,
+          value
+        } = payload;
+        return {
+          ...state,
+          changes: {
+            ...state.changes,
+            rows: setWith(state.changes.rows, rowId, value, Object),
+            errors: setWith(state.changes.errors, `${rowId}.cells`, cellErrors !== null && cellErrors !== void 0 ? cellErrors : state.changes.errors.cells[rowId], Object),
+            originals: setWith(state.changes.originals, rowId, original !== null && original !== void 0 ? original : state.changes.originals[rowId], Object),
+            moveReasons: setWith(state.changes.moveReasons, rowId, moveReasons !== null && moveReasons !== void 0 ? moveReasons : state.changes.moveReasons[rowId], Object),
+            // status can be undefined, so don't use ??
+            status: setWith(state.changes.status, rowId, undefined, Object)
+          }
+        };
+      }
+    case 'removeRow':
+      {
+        const {
+          rowIdentityAccessor
+        } = payload;
+        return {
+          ...state,
+          changes: {
+            ...state.changes,
+            rows: omit(state.changes.rows, rowId),
+            errors: omit(state.changes.errors, rowId),
+            moveReasons: omit(state.changes.moveReasons, rowId),
+            originals: omit(state.changes.originals, rowId),
+            status: omit(state.changes.status, rowId)
+          },
+          temporaryRows: state.temporaryRows.filter(row => row[rowIdentityAccessor] !== rowId)
+        };
+      }
+    case 'setRowStatus':
+      {
+        const {
+          status
+        } = payload;
+        return {
+          ...state,
+          changes: {
+            ...state.changes,
+            status: status ? setWith(state.changes.status, rowId, status, Object) : omit(state.changes.status, rowId)
+          }
+        };
+      }
+    case 'setRowErrors':
+      {
+        const {
+          ...errors
+        } = payload;
+        return {
+          ...state,
+          changes: {
+            ...state.changes,
+            errors: setWith(state.changes.errors, rowId, errors, Object)
+          }
+        };
+      }
+    case 'createRow':
+      {
+        const {
+          value
+        } = payload;
+        return {
+          ...state,
+          temporaryRows: state.temporaryRows.concat(value),
+          changes: {
+            ...state.changes,
+            rows: setWith(state.changes.rows, rowId, value, Object),
+            originals: setWith(state.changes.originals, rowId, value, Object)
+          }
+        };
+      }
+    default:
+      return state;
+  }
 }
-function usePendingChanges(isEnabled, handleSave, handleChange, validator) {
-  const saveChanges = function (rowId = undefined) {
+function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, validator) {
+  const saveChanges = function (table, rowId = undefined) {
     try {
       let _exit = false;
       if (!handleSave) {
         console.warn('Tried to save, but Table has no onEditingSave handler');
-        return Promise.resolve();
+        return Promise.resolve(false);
       }
-      // we save back to pendingChanges, so make a copy of it's state when save was triggered
-      const changesToSave = rowId ? {
-        [rowId]: pendingChanges[rowId]
-      } : {
-        ...pendingChanges
-      };
-      const changes = Object.keys(changesToSave);
-      return Promise.resolve(function () {
-        if (changes.length) {
-          return _forOf(changes, function (rowId) {
-            const pendingChange = changesToSave[rowId];
-            const changeSet = getChangesetFromChanges(pendingChange);
-            return _catch(function () {
-              function _temp3(_result) {
-                return _exit ? _result : Promise.resolve(handleSave(changeSet)).then(function () {
-                  // cleanup changes, we don't need them after saving
-                  resetChanges(rowId);
-                  setRowSaveStatus(rowId, 'complete');
-                });
-              }
-              if (getRowSaveStatus(rowId) === 'pending') {
-                _exit = true;
-                return;
-              }
-              // set saving = true
-              setRowSaveStatus(rowId, 'pending');
-              // re-run validation, maybe a cell is already invalid but has never been blurred
-              const _temp2 = function () {
-                if (validator) {
-                  return Promise.resolve(validator(changeSet)).then(function (errors) {
-                    if (errors && Object.keys(errors).length) {
-                      throw errors;
-                    }
-                  });
-                }
-              }();
-              return _temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2); // send new data to the server
-            }, function (error) {
-              // the onEditingSave handler should throw errors when something fails, e.g. validation, network errors etc
-              // this code handles those errors and maps them either to row errors or cell specific errors
-              let rowError;
-              let cellErrors;
-              if (typeof error === 'string') {
-                rowError = error;
-              } else if (error instanceof Error) {
-                var _error$response;
-                rowError = error.message;
-                // most of our apis return error objects within this shape
-                if (typeof ((_error$response = error.response) === null || _error$response === void 0 ? void 0 : _error$response.data) === 'object') {
-                  var _error$response2;
-                  cellErrors = (_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : _error$response2.data;
+      // sometimes we only want to save one row
+      const changes = rowId ? {
+        [rowId]: state.changes.rows[rowId]
+      } : state.changes.rows;
+      let completed = true;
+      const _temp9 = _forOf(Object.keys(changes), function (rowId) {
+        const status = getRowStatus(rowId);
+        return _catch(function () {
+          function _temp8(_result) {
+            return _exit ? _result : Promise.resolve(handleSave(changeSet)).then(function () {
+              // cleanup changes, we don't need them after saving
+              discardChanges(rowId, table);
+              // show the saved status, then remove it after a delay
+              setRowStatus(rowId, 'saved');
+              setTimeout(() => {
+                setRowStatus(rowId, undefined);
+              }, DELAY_BEFORE_REMOVING_SAVE_STATUS);
+            });
+          }
+          // don't try to save if - already saving, or there are known errors
+          if (status === 'saving' || status === 'errored') {
+            return;
+          }
+          setRowStatus(rowId, 'saving');
+          const changeSet = {
+            ...state.changes.originals[rowId],
+            ...changes[rowId]
+          };
+          // if we had to create a temporary id, delete it first - it's our data, not theirs
+          if (isTemporaryRow(changeSet[rowIdentityAccessor])) {
+            delete changeSet[rowIdentityAccessor];
+          }
+          // re-run validation, maybe a cell is already invalid but has never been blurred
+          const _temp7 = function () {
+            if (validator) {
+              return Promise.resolve(validator(changeSet)).then(function (errors) {
+                if (errors && Object.keys(errors).length) {
+                  throw errors;
                 }
-              } else if (typeof error === 'object') {
-                cellErrors = error;
-              }
-              if (rowError || cellErrors) {
-                setPendingChanges(currentChanges => {
-                  const nextChanges = {
-                    ...currentChanges
-                  };
-                  nextChanges[rowId]._meta.errors = {
-                    row: rowError,
-                    cells: cellErrors,
-                    shouldShowErrorAlert: true
-                  };
-                  return nextChanges;
-                });
+              });
+            }
+          }();
+          return _temp7 && _temp7.then ? _temp7.then(_temp8) : _temp8(_temp7); // send new data to the server
+        }, function (error) {
+          var _error$response;
+          if (error instanceof ReferenceError || error instanceof TypeError || (error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : _error$response.status) >= 500) {
+            console.error(error);
+          }
+          // the onEditingSave handler should throw errors when something fails, e.g. validation, network errors etc
+          // this code handles those errors and maps them either to row errors or cell specific errors
+          let rowError;
+          let cellErrors;
+          if (typeof error === 'string') {
+            rowError = error;
+          } else if (error instanceof Error) {
+            var _error$response2;
+            rowError = error.message;
+            // most of our apis return error objects within this shape
+            if (typeof ((_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : _error$response2.data) === 'object') {
+              var _error$response3;
+              cellErrors = (_error$response3 = error.response) === null || _error$response3 === void 0 ? void 0 : _error$response3.data;
+            }
+          } else if (typeof error === 'object') {
+            cellErrors = error;
+          }
+          if (rowError || cellErrors) {
+            dispatch({
+              type: 'setRowErrors',
+              rowId,
+              payload: {
+                row: rowError,
+                cells: cellErrors,
+                shouldShowErrorAlert: true
               }
-              setRowSaveStatus(rowId, undefined);
             });
-          }, function () {
-            return _exit;
-          });
-        }
-      }());
+          }
+          setRowStatus(rowId, 'errored');
+          completed = false;
+        });
+      }, function () {
+        return _exit;
+      });
+      return Promise.resolve(_temp9 && _temp9.then ? _temp9.then(function (_result3) {
+        return _exit ? _result3 : completed;
+      }) : _exit ? _temp9 : completed);
     } catch (e) {
       return Promise.reject(e);
     }
   };
-  const validateCell = function (cell) {
+  const onCellChanged = function (cell, rowIndex) {
     try {
-      if (!validator || !isEnabled) {
-        return Promise.resolve();
-      }
-      const changeSet = getChangesetFromChanges(pendingChanges[cell.row.id]);
-      // only validate if the cell being blurred actually has any changes
-      const _temp = function () {
-        if (cell.column.id in changeSet) {
-          return Promise.resolve(validator(changeSet)).then(function (errors) {
-            setPendingChanges(currentChanges => {
-              const nextChanges = {
-                ...currentChanges
-              };
-              nextChanges[cell.row.id]._meta = {
-                ...nextChanges[cell.row.id]._meta,
-                errors: {
-                  ...nextChanges[cell.row.id]._meta.errors,
-                  cells: errors,
-                  shouldShowErrorAlert: !Object.keys(errors).length ? false : nextChanges[cell.row.id]._meta.errors.shouldShowErrorAlert
+      function _temp6() {
+        var _state$changes$errors8;
+        function _temp4() {
+          // only set errors and move reasons for the cells we're currently acting on
+          // why? because the UX is not good if we set them for cells the user hasn't touched yet
+          const cellsToActOn = [cell.column.id, ...Object.keys(updatesForOtherCells)];
+          const allCells = cell.row._getAllCellsByColumnId();
+          cellsToActOn.forEach(accessor => {
+            if (validationErrors[accessor]) {
+              nextCellErrors[accessor] = validationErrors[accessor];
+              // don't show move indicator for cells with errors, they aren't valid and can't be saved
+              delete nextMoveReasons[accessor];
+            } else {
+              var _allCells$accessor;
+              // there isn't any error in this run, remove any error set in state
+              delete nextCellErrors[accessor];
+              if ((_allCells$accessor = allCells[accessor]) !== null && _allCells$accessor !== void 0 && _allCells$accessor.column.getIsSorted()) {
+                // run row move determination
+                const reason = willRowMove(cell, nextChanges[accessor], rowIndex, localization);
+                // if the row will move based on this change save why, otherwise delete any existing state
+                if (reason) {
+                  nextMoveReasons[accessor] = reason;
+                } else {
+                  delete nextMoveReasons[accessor];
                 }
-              };
-              return nextChanges;
+              }
+            }
+          });
+          dispatch({
+            type: 'updateRow',
+            rowId: cell.row.id,
+            payload: {
+              cellErrors: nextCellErrors,
+              moveReasons: nextMoveReasons,
+              value: nextChanges
+            }
+          });
+        }
+        // create a projection of the next state, so we can act against it
+        const nextChanges = {
+          ...state.changes.rows[cell.row.id],
+          ...updatesForOtherCells
+        };
+        const nextMoveReasons = {
+          ...state.changes.moveReasons[cell.row.id]
+        };
+        const nextCellErrors = {
+          ...((_state$changes$errors8 = state.changes.errors[cell.row.id]) === null || _state$changes$errors8 === void 0 ? void 0 : _state$changes$errors8.cells)
+        };
+        // run validation
+        let validationErrors = {};
+        const _temp3 = function () {
+          if (validator) {
+            const nextRowValue = {
+              ...state.changes.originals[cell.row.id],
+              ...changes,
+              ...updatesForOtherCells
+            };
+            return Promise.resolve(validator(nextRowValue)).then(function (_validator2) {
+              validationErrors = _validator2 !== null && _validator2 !== void 0 ? _validator2 : {};
             });
+          }
+        }();
+        return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
+      }
+      const changes = state.changes.rows[cell.row.id];
+      if (!changes) {
+        return Promise.resolve();
+      }
+      let updatesForOtherCells = {};
+      // run the updater handler if there is one, to see if there are any other cells to update
+      const _temp5 = function () {
+        if (typeof handleChange === 'function') {
+          const previousRowValue = {
+            ...state.changes.originals[cell.row.id]
+          };
+          const nextRowValue = {
+            ...state.changes.originals[cell.row.id],
+            ...changes
+          };
+          return Promise.resolve(handleChange(cell.column.id, changes[cell.column.id], nextRowValue, previousRowValue)).then(function (_handleChange) {
+            updatesForOtherCells = _handleChange !== null && _handleChange !== void 0 ? _handleChange : {};
           });
         }
       }();
-      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+      return Promise.resolve(_temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5));
     } catch (e) {
       return Promise.reject(e);
     }
-  };
-  const setCellValue = function (cell, change, rowIndex) {
+  }; // general
+  const createRow = function (data) {
     try {
-      const changes = {
-        [cell.column.id]: change
+      const newRowId = `${TEMPORARY_ROW_ID_PREFIX}${uuid.v4()}`;
+      const value = {
+        ...data,
+        [rowIdentityAccessor]: newRowId
       };
-      setPendingChanges(currentChanges => {
-        const nextChanges = createPendingChangesSetter(currentChanges, cell.row, rowIndex, changes, localization);
-        pendingChangesUpdater.syncCellChanges(nextChanges);
-        return nextChanges;
+      dispatch({
+        type: 'createRow',
+        rowId: newRowId,
+        payload: {
+          value
+        }
       });
-      pendingChangesUpdater.runCellUpdates(changes, cell, rowIndex);
-      return Promise.resolve();
+      return Promise.resolve(newRowId);
     } catch (e) {
       return Promise.reject(e);
     }
-  };
-  const addCreatedRowChangeset = function (row) {
+  }; // cells
+  // rows
+  const setRowValue = function (rowId, original, value) {
     try {
-      const cells = row.getAllCells();
-      setPendingChanges(currentChanges => {
-        return cells.reduce((changes, cell) => {
-          if (cell.getValue()) {
-            var _currentChanges$cell$, _currentChanges$cell$2, _currentChanges$cell$3;
-            return {
-              ...changes,
-              [cell.row.id]: {
-                ...changes[cell.row.id],
-                [cell.column.id]: cell.getValue(),
-                _meta: {
-                  ...((_currentChanges$cell$ = currentChanges[cell.row.id]) === null || _currentChanges$cell$ === void 0 ? void 0 : _currentChanges$cell$._meta),
-                  original: cell.row.original,
-                  moveReason: {
-                    ...((_currentChanges$cell$2 = currentChanges[cell.row.id]) === null || _currentChanges$cell$2 === void 0 ? void 0 : _currentChanges$cell$2._meta.moveReason)
-                  },
-                  errors: {
-                    ...((_currentChanges$cell$3 = currentChanges[cell.row.id]) === null || _currentChanges$cell$3 === void 0 ? void 0 : _currentChanges$cell$3._meta.errors)
-                  }
-                }
-              }
-            };
-          } else {
-            return changes;
+      function _temp2() {
+        dispatch({
+          type: 'updateRow',
+          rowId,
+          payload: {
+            cellErrors,
+            original,
+            value
           }
-        }, currentChanges);
-      });
-      return Promise.resolve();
+        });
+      }
+      let cellErrors;
+      const _temp = function () {
+        if (validator) {
+          const row = {
+            ...original,
+            ...value
+          };
+          return Promise.resolve(validator(row)).then(function (_validator) {
+            cellErrors = _validator !== null && _validator !== void 0 ? _validator : {};
+          });
+        }
+      }();
+      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
     } catch (e) {
       return Promise.reject(e);
     }
   };
   const localization = useLocalization();
-  const [pendingChanges, setPendingChanges] = React__default.useState({});
-  // we maintain save status as separate state because 'complete' needs to briefly show after pendingChanges are deleted
-  const [saveStates, setSaveState] = React__default.useState({});
-  function getCellValue(cell) {
-    var _pendingChanges$cell$;
-    return (_pendingChanges$cell$ = pendingChanges[cell.row.id]) === null || _pendingChanges$cell$ === void 0 ? void 0 : _pendingChanges$cell$[cell.column.id];
+  const [state, dispatch] = React__default.useReducer(reducer$2, {
+    changes: {
+      rows: {},
+      errors: {},
+      moveReasons: {},
+      originals: {},
+      status: {}
+    },
+    temporaryRows: []
+  });
+  function getRowValue(rowId) {
+    var _state$changes$rows$r, _state$changes$rows;
+    return (_state$changes$rows$r = (_state$changes$rows = state.changes.rows) === null || _state$changes$rows === void 0 ? void 0 : _state$changes$rows[rowId]) !== null && _state$changes$rows$r !== void 0 ? _state$changes$rows$r : undefined;
   }
-  function getCellError(cell) {
-    var _pendingChanges$cell$2, _pendingChanges$cell$3, _pendingChanges$cell$4;
-    return (_pendingChanges$cell$2 = pendingChanges[cell.row.id]) === null || _pendingChanges$cell$2 === void 0 ? void 0 : (_pendingChanges$cell$3 = _pendingChanges$cell$2._meta.errors) === null || _pendingChanges$cell$3 === void 0 ? void 0 : (_pendingChanges$cell$4 = _pendingChanges$cell$3.cells) === null || _pendingChanges$cell$4 === void 0 ? void 0 : _pendingChanges$cell$4[cell.column.id];
+  function getRowMoveReason(rowId) {
+    var _Object$values$, _state$changes$moveRe, _state$changes$moveRe2;
+    return (_Object$values$ = Object.values((_state$changes$moveRe = (_state$changes$moveRe2 = state.changes.moveReasons) === null || _state$changes$moveRe2 === void 0 ? void 0 : _state$changes$moveRe2[rowId]) !== null && _state$changes$moveRe !== void 0 ? _state$changes$moveRe : {})[0]) !== null && _Object$values$ !== void 0 ? _Object$values$ : undefined;
   }
-  const pendingChangesUpdater = usePendingChangesUpdater(handleChange, setPendingChanges);
   function hasRowErrors(rowId) {
-    var _pendingChanges$rowId, _pendingChanges$rowId2, _pendingChanges$rowId3, _pendingChanges$rowId4, _pendingChanges$rowId5;
-    if (!isEnabled) {
-      return false;
-    }
-    return !!((_pendingChanges$rowId = pendingChanges[rowId]) !== null && _pendingChanges$rowId !== void 0 && (_pendingChanges$rowId2 = _pendingChanges$rowId._meta.errors) !== null && _pendingChanges$rowId2 !== void 0 && _pendingChanges$rowId2.row) || !!Object.keys((_pendingChanges$rowId3 = (_pendingChanges$rowId4 = pendingChanges[rowId]) === null || _pendingChanges$rowId4 === void 0 ? void 0 : (_pendingChanges$rowId5 = _pendingChanges$rowId4._meta.errors) === null || _pendingChanges$rowId5 === void 0 ? void 0 : _pendingChanges$rowId5.cells) !== null && _pendingChanges$rowId3 !== void 0 ? _pendingChanges$rowId3 : {}).length;
-  }
-  function hasRowErrorsSeen(rowId) {
-    var _pendingChanges$rowId6;
-    if (!isEnabled) {
-      return false;
-    }
-    return hasRowErrors(rowId) && !!((_pendingChanges$rowId6 = pendingChanges[rowId]._meta.errors) !== null && _pendingChanges$rowId6 !== void 0 && _pendingChanges$rowId6.shouldShowErrorAlert);
+    var _state$changes$errors, _state$changes$errors2, _state$changes$errors3;
+    return !!((_state$changes$errors = state.changes.errors[rowId]) !== null && _state$changes$errors !== void 0 && _state$changes$errors.row) || !!Object.keys((_state$changes$errors2 = (_state$changes$errors3 = state.changes.errors[rowId]) === null || _state$changes$errors3 === void 0 ? void 0 : _state$changes$errors3.cells) !== null && _state$changes$errors2 !== void 0 ? _state$changes$errors2 : {}).length;
   }
-  function getRowPendingChange(rowId) {
-    const rowPendingChanges = pendingChanges[rowId];
-    if (rowPendingChanges) {
-      const {
-        _meta,
-        ...pendingChange
-      } = rowPendingChanges;
-      return pendingChange;
-    }
-    return undefined;
+  function hasRowErrorsShownInAlert(rowId) {
+    var _state$changes$errors4;
+    return hasRowErrors(rowId) && !!((_state$changes$errors4 = state.changes.errors[rowId]) !== null && _state$changes$errors4 !== void 0 && _state$changes$errors4.shouldShowErrorAlert);
   }
-  function getRowSaveStatus(rowId) {
-    if (!isEnabled) {
-      return false;
-    }
-    return saveStates[rowId];
+  function getRowStatus(rowId) {
+    return state.changes.status[rowId];
   }
-  function setRowSaveStatus(rowId, status) {
-    setSaveState(currentStates => {
-      const nextStates = {
-        ...currentStates
-      };
-      if (status) {
-        nextStates[rowId] = status;
-      } else {
-        delete nextStates[rowId];
+  function setRowStatus(rowId, status) {
+    dispatch({
+      type: 'setRowStatus',
+      rowId,
+      payload: {
+        status
       }
-      return nextStates;
     });
   }
-  function getRowMoveReason(rowId) {
-    var _pendingChanges$rowId7;
-    return (_pendingChanges$rowId7 = pendingChanges[rowId]) !== null && _pendingChanges$rowId7 !== void 0 && _pendingChanges$rowId7._meta.moveReason ? Object.values(pendingChanges[rowId]._meta.moveReason)[0] : undefined;
-  }
-  function hasChanges(rowId) {
-    if (!isEnabled) {
-      return false;
+  function setCellValue(cell, value) {
+    const rowId = cell.row.id;
+    const columnId = cell.column.id;
+    // update if the change is different to the original value
+    if (value !== cell.row.original[columnId]) {
+      dispatch({
+        type: 'setCellValue',
+        rowId,
+        payload: {
+          columnId,
+          row: cell.row.original,
+          value
+        }
+      });
     }
-    return rowId ? !!pendingChanges[rowId] : !!Object.keys(pendingChanges).length;
-  }
-  function hasAlertErrors() {
-    if (!isEnabled) {
-      return false;
+    // otherwise remove any previous change - no point saving the same value
+    else if (cell.row.id in state.changes.rows) {
+      dispatch({
+        type: 'removeCellValue',
+        rowId,
+        payload: {
+          columnId,
+          rowIdentityAccessor
+        }
+      });
     }
-    return !!getAlertErrors().length;
   }
-  function getAlertErrors() {
-    return Object.keys(pendingChanges).filter(hasRowErrorsSeen).map(rowId => ({
+  function getCellValue(cell) {
+    var _state$changes$rows2, _state$changes$rows2$;
+    return (_state$changes$rows2 = state.changes.rows) === null || _state$changes$rows2 === void 0 ? void 0 : (_state$changes$rows2$ = _state$changes$rows2[cell.row.id]) === null || _state$changes$rows2$ === void 0 ? void 0 : _state$changes$rows2$[cell.column.id];
+  }
+  function getCellError(cell) {
+    var _state$changes$errors5, _state$changes$errors6, _state$changes$errors7;
+    return (_state$changes$errors5 = state.changes.errors) === null || _state$changes$errors5 === void 0 ? void 0 : (_state$changes$errors6 = _state$changes$errors5[cell.row.id]) === null || _state$changes$errors6 === void 0 ? void 0 : (_state$changes$errors7 = _state$changes$errors6.cells) === null || _state$changes$errors7 === void 0 ? void 0 : _state$changes$errors7[cell.column.id];
+  }
+  function getErrorsShownInAlert() {
+    const rowsWithErrors = Object.keys(state.changes.errors);
+    if (!rowsWithErrors.length) {
+      return [];
+    }
+    return rowsWithErrors.filter(hasRowErrorsShownInAlert).map(rowId => ({
       rowId,
-      pendingChange: pendingChanges[rowId]
+      changes: state.changes.rows[rowId],
+      errors: state.changes.errors[rowId]
     }));
   }
-  function resetChanges(rowId) {
-    setPendingChanges(currentChanges => {
-      const nextChanges = {
-        ...currentChanges
-      };
-      delete nextChanges[rowId];
-      return nextChanges;
-    });
+  function hasSaved() {
+    return !!Object.values(state.changes.status).filter(value => value === 'saved').length;
+  }
+  function hasChanges(rowId) {
+    return rowId ? !!state.changes.rows[rowId] : !!Object.keys(state.changes.rows).length;
   }
-  function getCompletedRowsCount() {
-    return Object.values(saveStates).filter(value => value === 'complete').length;
+  function discardChanges(rowId, table) {
+    // remove any new rows from pinned state before discarding them
+    table.resetRowPinning(true);
+    dispatch({
+      type: 'removeRow',
+      rowId,
+      payload: {
+        rowIdentityAccessor
+      }
+    });
   }
   return {
+    // row
+    setRowValue,
+    getRowValue,
+    getRowMoveReason,
+    hasRowErrors,
+    hasRowErrorsShownInAlert,
+    getRowStatus,
+    setRowStatus,
+    // cells
+    setCellValue,
     getCellValue,
     getCellError,
-    setCellValue,
-    validateCell,
-    addCreatedRowChangeset,
+    onCellChanged,
+    // general
+    getErrorsShownInAlert,
     hasChanges,
-    hasAlertErrors,
-    getAlertErrors,
     saveChanges,
-    resetChanges,
-    hasRowErrors,
-    hasRowErrorsSeen,
-    getRowPendingChange,
-    getRowSaveStatus,
-    setRowSaveStatus,
-    getRowMoveReason,
-    getCompletedRowsCount
+    discardChanges,
+    hasSaved,
+    // new rows
+    createRow,
+    temporaryRows: state.temporaryRows
   };
 }
-function useLastFocusedCellIndex() {
+
+function useTableEditing(isEnabled = false, handleSave, handleChange, rowIdentityAccessor, validator) {
+  // used to switch the table into editing mode
+  const [isEditing, setEditing] = React__default.useState(false);
+  // used to switch the editing between "detailed" mode
+  const [isDetailedMode, toggleDetailedMode] = React__default.useState(false);
+  // used to contain ref to the create button
+  const createRowButtonRef = React__default.useRef(null);
   // store the last focused cell, so that up/down arrow key navigation remains in the same column
-  const lastFocusedCellIndexRef = React__default.useRef(undefined);
-  const setLastFocusedCellIndex = React__default.useCallback(index => {
-    lastFocusedCellIndexRef.current = index;
-  }, []);
-  return [lastFocusedCellIndexRef.current, setLastFocusedCellIndex];
-}
-function usePendingChangesUpdater(handleChange, setPendingChanges) {
-  const localization = useLocalization();
-  const updatersRef = React__default.useRef({});
-  const runCellUpdates = React__default.useCallback(lodash.debounce(function (changes, cell, rowIndex) {
-    try {
-      const _temp4 = function () {
-        if (typeof handleChange === 'function') {
-          const previousValues = {
-            ...cell.row.original,
-            ...getChangesetFromChanges(updatersRef.current[cell.row.id])
-          };
-          const nextValues = {
-            ...previousValues,
-            ...changes
-          };
-          return Promise.resolve(handleChange(cell.column.id, changes[cell.column.id], nextValues, previousValues)).then(function (updates) {
-            if (updates && Object.keys(updates).length) {
-              setPendingChanges(currentChanges => createPendingChangesSetter(currentChanges, cell.row, rowIndex, updates, localization));
-            }
-          });
-        }
-      }();
-      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {}) : void 0);
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  }, 250), []);
-  function syncCellChanges(changes) {
-    updatersRef.current = changes;
-  }
-  return {
-    syncCellChanges,
-    runCellUpdates
-  };
-}
-function createPendingChangesSetter(currentChanges, row, rowIndex, changes, localization) {
-  var _currentChanges$row$i, _currentChanges$row$i2, _currentChanges$row$i3;
-  // prepare
-  const nextChanges = {
-    ...currentChanges
-  };
-  const rowChanges = {
-    ...currentChanges[row.id],
-    _meta: {
-      ...((_currentChanges$row$i = currentChanges[row.id]) === null || _currentChanges$row$i === void 0 ? void 0 : _currentChanges$row$i._meta),
-      original: row.original,
-      moveReason: {
-        ...((_currentChanges$row$i2 = currentChanges[row.id]) === null || _currentChanges$row$i2 === void 0 ? void 0 : _currentChanges$row$i2._meta.moveReason)
-      },
-      errors: {
-        ...((_currentChanges$row$i3 = currentChanges[row.id]) === null || _currentChanges$row$i3 === void 0 ? void 0 : _currentChanges$row$i3._meta.errors)
-      }
-    }
-  };
-  // run changes
-  const cells = row._getAllCellsByColumnId();
-  for (const [accessor, change] of Object.entries(changes)) {
-    // update if the change is different to the original (saved) value,
-    // otherwise remove any change - no point saving the same value
-    if (change !== row.original[accessor]) {
-      rowChanges[accessor] = change;
-      // consumers sometimes include properties in onEditingChange that aren't rendered as columns, we need to guard against that.
-      // eslint-disable-next-line no-prototype-builtins
-      if (cells.hasOwnProperty(accessor)) {
-        // determine if the row will move position based on this change, and save why it will move
-        const reason = willRowMove(cells[accessor], change, rowIndex, localization);
-        if (reason) {
-          rowChanges._meta.moveReason[accessor] = reason;
-        } else {
-          delete rowChanges._meta.moveReason[accessor];
-        }
-      }
-    } else {
-      delete rowChanges[accessor];
-      delete rowChanges._meta.moveReason[accessor];
+  const [lastFocusedCellIndex, setLastFocusedCellIndex] = React__default.useState(undefined);
+  const pendingChangesFns = usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, validator);
+  function toggleEditing(enabled, table) {
+    if (!enabled) {
+      // save
+      pendingChangesFns.saveChanges(table);
+      // reset detailed mode
+      toggleDetailedMode(false);
+      // reset the last index back to the first focusable element, when editing gets turned off
+      setLastFocusedCellIndex(undefined);
     }
+    setEditing(enabled);
   }
-  // set changes
-  // or delete if there are no changes left, so that we don't store changes with unchanged data
-  if (Object.keys(rowChanges).filter(k => k !== '_meta').length) {
-    nextChanges[row.id] = rowChanges;
-  } else {
-    delete nextChanges[row.id];
-  }
-  return nextChanges;
-}
-function getChangesetFromChanges(changes) {
-  // extract the original data from the row changes
-  const {
-    _meta,
-    ...changeset
-  } = changes !== null && changes !== void 0 ? changes : {};
-  // and mix them in with the changes, ready to send to the server
   return {
-    ...(_meta === null || _meta === void 0 ? void 0 : _meta.original),
-    ...changeset
+    isEnabled,
+    isEditing,
+    isDetailedMode,
+    toggleDetailedMode: isEnabled ? toggleDetailedMode : () => undefined,
+    toggleEditing: isEnabled ? toggleEditing : () => undefined,
+    lastFocusedCellIndex,
+    setLastFocusedCellIndex,
+    createRowButtonRef,
+    ...pendingChangesFns
   };
 }
 
@@ -19145,13 +19289,28 @@ function EditingControlCell(props) {
   const {
     rowIndex
   } = React__default.useContext(RowContext);
-  const tableMeta = cell.getContext().table.options.meta;
+  const {
+    table
+  } = cell.getContext();
+  const tableMeta = table.options.meta;
   const columnMeta = cell.column.columnDef.meta;
   const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;
+  const type = (_columnMeta$control = columnMeta.control) !== null && _columnMeta$control !== void 0 ? _columnMeta$control : 'input';
   const handleFocus = useEditingCellAutofocus(props);
+  // some controls, like select2, should trigger cell changed (validation, updates) as the value changes
+  const hasNonTextControl = React__default.useMemo(() => {
+    var _cellRef$current;
+    return typeof type === 'function' && !!((_cellRef$current = cellRef.current) !== null && _cellRef$current !== void 0 && _cellRef$current.querySelector('[data-taco="Select2"],[data-taco="switch"],[data-taco="checkbox"]'));
+  }, [cellRef.current]);
+  const handleChange = value => {
+    tableMeta.editing.setCellValue(cell, value);
+    if (hasNonTextControl) {
+      tableMeta.editing.onCellChanged(cell, rowIndex);
+    }
+  };
   const handleBlur = () => {
     tableMeta.editing.toggleDetailedMode(false);
-    tableMeta.editing.validateCell(cell);
+    tableMeta.editing.onCellChanged(cell, rowIndex);
   };
   // ensure that blur runs when the cell gets unmounted (when vertically arrow key navigating)
   React__default.useEffect(() => {
@@ -19171,13 +19330,12 @@ function EditingControlCell(props) {
     isDetailedMode: tableMeta.editing.isDetailedMode,
     isTruncated: !!columnMeta.enableTruncate,
     onBlur: handleBlur,
-    onChange: value => tableMeta.editing.setCellValue(cell, value, rowIndex),
+    onChange: handleChange,
     row: cell.row.original,
-    rowPendingChanges: tableMeta.editing.getRowPendingChange(cell.row.id),
+    rowPendingChanges: tableMeta.editing.getRowValue(cell.row.id),
     tabIndex: isActiveRow ? 0 : -1,
-    toggleEditing: tableMeta.editing.toggleEditing,
     toggleDetailedMode: tableMeta.editing.toggleDetailedMode,
-    type: (_columnMeta$control = columnMeta.control) !== null && _columnMeta$control !== void 0 ? _columnMeta$control : 'input',
+    type,
     value: cell.getValue()
   };
   const cellAttributes = {
@@ -19210,7 +19368,6 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     row,
     rowPendingChanges,
     tabIndex = -1,
-    toggleEditing,
     toggleDetailedMode,
     type = 'input',
     value
@@ -19241,13 +19398,6 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
       ref: controlRef
     }));
   }
-  if (type === 'checkbox') {
-    return /*#__PURE__*/React__default.createElement(Checkbox, Object.assign({}, commonProps, {
-      checked: Boolean(value),
-      onChange: onChange,
-      ref: controlRef
-    }));
-  }
   const handleInputKeyDown = event => {
     const target = event.target;
     if (target.readOnly) {
@@ -19276,8 +19426,8 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     }
     // reset the value, or exit edit mode when pressing escape
     if (event.key === 'Escape') {
-      event.preventDefault();
       if (isDetailedMode) {
+        event.preventDefault();
         toggleDetailedMode(false);
         if (value !== currentValue) {
           props.onChange(currentValue);
@@ -19287,15 +19437,9 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
           var _target$select2;
           return (_target$select2 = target.select) === null || _target$select2 === void 0 ? void 0 : _target$select2.call(target);
         });
-      } else {
-        toggleEditing(false);
       }
       return;
     }
-    const shortcutWhitelist = ['f', 'p', 'e']; // f = search, p = print, and e = edit
-    if (isPressingMetaKey(event) && !shortcutWhitelist.some(s => s === event.key)) {
-      event.stopPropagation();
-    }
     // toggle into detailed mode when actually inputting something
     if (!isPressingMetaKey(event) && (/^[a-z0-9]$/i.test(event.key) || event.key === 'Backspace')) {
       toggleDetailedMode(true);
@@ -19391,12 +19535,37 @@ function Cell$5(props) {
   return /*#__PURE__*/React__default.createElement(DisplayCell, Object.assign({}, props));
 }
 
+function DiscardChangesConfirmationDialog(props) {
+  const {
+    onDiscard: handleDiscard,
+    ...dialogProps
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const handleClickInsideDialogContent = event => {
+    // Prevents the click event from propagating to the table, ensuring the row isn't saved when a click occurs
+    // inside the dialog
+    event.stopPropagation();
+  };
+  return /*#__PURE__*/React__default.createElement(Dialog, Object.assign({}, dialogProps), /*#__PURE__*/React__default.createElement(Dialog.Content, {
+    "aria-label": texts.table3.editing.clearChangesConfirmationDialog.title,
+    onClick: handleClickInsideDialogContent
+  }, /*#__PURE__*/React__default.createElement(Dialog.Title, null, texts.table3.editing.clearChangesConfirmationDialog.title), /*#__PURE__*/React__default.createElement("p", null, texts.table3.editing.clearChangesConfirmationDialog.description), /*#__PURE__*/React__default.createElement(Dialog.Footer, null, /*#__PURE__*/React__default.createElement(Group, null, /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button$1, {
+    tabIndex: 0
+  }, texts.table3.editing.clearChangesConfirmationDialog.cancel)), /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button$1, {
+    autoFocus: true,
+    tabIndex: 0,
+    appearance: "primary",
+    onClick: handleDiscard
+  }, texts.table3.editing.clearChangesConfirmationDialog.confirm))))));
+}
+
 function EditingActionMenu(props) {
   const {
     hasChanges,
     hasErrors,
-    onClear: handleClear,
-    onExit: handleExit,
+    onDiscard: handleDiscard,
     onEditingSave: handleSave,
     isLastRow
   } = props;
@@ -19418,7 +19587,6 @@ function EditingActionMenu(props) {
   return /*#__PURE__*/React__default.createElement(IconButton, {
     appearance: "transparent",
     "aria-label": texts.table3.editing.actions.tooltip,
-    className: "group-[[data-row-editing-status]]/row:hidden",
     icon: "more",
     onKeyDown: handleKeyDown,
     menu: menuProps => (/*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, {
@@ -19430,42 +19598,13 @@ function EditingActionMenu(props) {
     }, texts.table3.editing.actions.save), /*#__PURE__*/React__default.createElement(Menu$1.Item, {
       icon: "close",
       disabled: !hasChanges,
-      dialog: props => /*#__PURE__*/React__default.createElement(ConfirmClearChangesDialog, Object.assign({}, props, {
-        onClear: handleClear
+      dialog: props => /*#__PURE__*/React__default.createElement(DiscardChangesConfirmationDialog, Object.assign({}, props, {
+        onDiscard: handleDiscard
       }))
-    }, texts.table3.editing.actions.clear), /*#__PURE__*/React__default.createElement(Menu$1.Item, {
-      icon: "undo",
-      onClick: handleExit
-    }, texts.table3.editing.actions.exit))))
+    }, texts.table3.editing.actions.clear))))
   });
 }
-function ConfirmClearChangesDialog(props) {
-  const {
-    onClear: handleClear,
-    ...dialogProps
-  } = props;
-  const {
-    texts
-  } = useLocalization();
-  const handleClickInsideDialogContent = event => {
-    // Prevents the click event from propagating to the table, ensuring the row isn't saved when a click occurs
-    // inside the dialog
-    event.stopPropagation();
-  };
-  return /*#__PURE__*/React__default.createElement(Dialog, Object.assign({}, dialogProps), /*#__PURE__*/React__default.createElement(Dialog.Content, {
-    "aria-label": texts.table3.editing.clearChangesConfirmationDialog.title,
-    onClick: handleClickInsideDialogContent
-  }, /*#__PURE__*/React__default.createElement(Dialog.Title, null, texts.table3.editing.clearChangesConfirmationDialog.title), /*#__PURE__*/React__default.createElement("p", null, texts.table3.editing.clearChangesConfirmationDialog.description), /*#__PURE__*/React__default.createElement(Dialog.Footer, null, /*#__PURE__*/React__default.createElement(Group, null, /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button$1, {
-    tabIndex: 0
-  }, texts.table3.editing.clearChangesConfirmationDialog.cancel)), /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button$1, {
-    autoFocus: true,
-    tabIndex: 0,
-    appearance: "primary",
-    onClick: handleClear
-  }, texts.table3.editing.clearChangesConfirmationDialog.confirm))))));
-}
 
-const COMPLETE_INDICATOR_DELAY = 3000;
 function SaveStatus(props) {
   const {
     rowId,
@@ -19475,18 +19614,7 @@ function SaveStatus(props) {
     texts
   } = useLocalization();
   const tableMeta = table.options.meta;
-  const status = tableMeta.editing.getRowSaveStatus(rowId);
-  React__default.useEffect(() => {
-    let timeout;
-    if (status === 'complete') {
-      timeout = setTimeout(() => {
-        tableMeta.editing.setRowSaveStatus(rowId, undefined);
-      }, COMPLETE_INDICATOR_DELAY);
-    }
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [status]);
+  const status = tableMeta.editing.getRowStatus(rowId);
   const className = cn('col-span-full sticky ml-auto right-0 top-0 -mb-[100%] z-10 h-8 bg-[inherit] flex items-center px-1.5 shadow-[-6px_0px_6px_var(--table-row-actions-shadow)]', {
     'mt-0.5': tableMeta.rowHeight.height === 'short',
     'mt-1': tableMeta.rowHeight.height === 'medium',
@@ -19497,7 +19625,7 @@ function SaveStatus(props) {
     className: "!contents"
   }, /*#__PURE__*/React__default.createElement("span", {
     className: className
-  }, status === 'pending' ? (/*#__PURE__*/React__default.createElement(Tooltip, {
+  }, status === 'saving' ? (/*#__PURE__*/React__default.createElement(Tooltip, {
     title: texts.table3.editing.saving.progress
   }, /*#__PURE__*/React__default.createElement(Spinner, {
     delay: 0,
@@ -19535,15 +19663,46 @@ function Row$2(props) {
       }
     }
   }, [tableMeta.editing.isEditing, isActiveRow]);
+  const rowStatus = tableMeta.editing.getRowStatus(row.id);
+  // discard new row
+  const [showDiscardDialog, setShowDiscardDialog] = React__default.useState(false);
+  function handleDiscard() {
+    tableMeta.editing.discardChanges(row.id, table);
+    requestAnimationFrame(() => {
+      if (isTemporaryRow(row.id)) {
+        var _tableMeta$editing$cr;
+        (_tableMeta$editing$cr = tableMeta.editing.createRowButtonRef.current) === null || _tableMeta$editing$cr === void 0 ? void 0 : _tableMeta$editing$cr.focus();
+      } else {
+        focusManager.focusFirst();
+      }
+    });
+  }
+  function handleKeyDown(event) {
+    if (props.onKeyDown) {
+      props.onKeyDown(event);
+    }
+    if (event.isDefaultPrevented() || event.isPropagationStopped()) {
+      return;
+    }
+    if (event.key === 'Escape' && tableMeta.editing.hasChanges(row.id) && !isElementTriggeredFromContainer(event.target, event.currentTarget)) {
+      event.preventDefault();
+      setShowDiscardDialog(true);
+    }
+  }
   const attributes = {
-    'data-row-editing-invalid': tableMeta.editing.isEnabled && tableMeta.editing.hasRowErrors(row.id) ? !tableMeta.editing.hasRowErrorsSeen(row.id) ? 'unseen' : true : undefined,
-    'data-row-editing-status': tableMeta.editing.isEnabled && tableMeta.editing.getRowSaveStatus(row.id) ? tableMeta.editing.getRowSaveStatus(row.id) : undefined,
-    onFocus: handleFocus
+    'data-row-editing-invalid': tableMeta.editing.hasRowErrors(row.id) ? !tableMeta.editing.hasRowErrorsShownInAlert(row.id) ? 'unseen' : true : undefined,
+    'data-row-editing-status': rowStatus,
+    onFocus: handleFocus,
+    onKeyDown: handleKeyDown
   };
-  return /*#__PURE__*/React__default.createElement(DisplayRow, Object.assign({}, props, attributes), tableMeta.editing.getRowSaveStatus(row.id) ? /*#__PURE__*/React__default.createElement(SaveStatus, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DisplayRow, Object.assign({}, props, attributes), rowStatus === 'saving' || rowStatus === 'saved' ? /*#__PURE__*/React__default.createElement(SaveStatus, {
     rowId: row.id,
     table: table
-  }) : null);
+  }) : null), /*#__PURE__*/React__default.createElement(DiscardChangesConfirmationDialog, {
+    open: showDiscardDialog,
+    onChange: setShowDiscardDialog,
+    onDiscard: handleDiscard
+  }));
 }
 
 const RENDERERS$1 = {
@@ -19551,29 +19710,46 @@ const RENDERERS$1 = {
   cell: Cell$5
 };
 function useTable3(props, ref) {
-  const editing = useTableEditing(props.enableEditing, props.onEditingSave, props.onEditingChange, props.validator);
+  const editing = useTableEditing(props.enableEditing, props.onEditingSave, props.onEditingChange, props.rowIdentityAccessor, props.validator);
   const creationEnabled = editing.isEnabled && !!props.onEditingCreate;
+  // this gives me the performance heeby jeebies, but can't think of a better way to internalise the state
+  const data = React__default.useMemo(() => {
+    if (editing.isEditing && editing.temporaryRows.length) {
+      var _props$data;
+      return editing.temporaryRows.concat((_props$data = props.data) !== null && _props$data !== void 0 ? _props$data : []);
+    }
+    return props.data;
+  }, [JSON.stringify(props.data), editing.temporaryRows.length]);
   const extendedProps = {
     ...props,
+    data,
     enableRowActions: editing.isEditing ? true : props.enableRowActions,
-    rowActions: editing.isEditing ? [(_, rowId) => (/*#__PURE__*/React__default.createElement(EditingActionMenu, {
+    rowActions: editing.isEditing ? [(_, rowId, table) => (/*#__PURE__*/React__default.createElement(EditingActionMenu, {
       hasChanges: editing.hasChanges(rowId),
       hasErrors: editing.hasRowErrors(rowId),
-      onClear: () => editing.resetChanges(rowId),
-      onEditingSave: () => editing.saveChanges(rowId),
-      onExit: () => editing.toggleEditing(false),
+      onDiscard: () => editing.discardChanges(rowId, table),
+      onEditingSave: function () {
+        try {
+          return Promise.resolve(editing.saveChanges(table, rowId)).then(function () {});
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      },
       isLastRow: !creationEnabled && table.meta.rowActive.rowActiveIndex === table.meta.length - 1
     }))] : props.rowActions
   };
   const meta = {
     editing
   };
-  const table = useTable(extendedProps, ref, RENDERERS$1, meta);
+  const options = {
+    virtualiserPaddingEndOffset: props.enableEditing && props.onEditingCreate ? 1 : 0
+  };
+  const table = useTable(extendedProps, ref, RENDERERS$1, meta, options);
   // listeners
   useTableEditingListener(table.instance, table.ref);
   React__default.useEffect(() => {
     if (table.ref.current) {
-      table.ref.current.instance.toggleEditing = enabled => table.meta.editing.toggleEditing(enabled !== null && enabled !== void 0 ? enabled : editing => !editing);
+      table.ref.current.instance.toggleEditing = enabled => table.meta.editing.toggleEditing(enabled !== null && enabled !== void 0 ? enabled : editing => !editing, table.instance);
     }
   }, [table.ref.current]);
   return table;
@@ -19592,7 +19768,7 @@ function Alert$1(props) {
   const validationTexts = texts.table3.editing.validation;
   const tableMeta = table.options.meta;
   const [showFilterResetDialog, setShowFilterResetDialog] = React__default.useState(false);
-  const pendingChangesWithErrors = tableMeta.editing.getAlertErrors();
+  const pendingChangesWithErrors = tableMeta.editing.getErrorsShownInAlert();
   function scrollToRow(rowIndex) {
     tableMeta.rowActive.setRowActiveIndex(rowIndex);
     scrollToIndex(rowIndex, {
@@ -19611,38 +19787,43 @@ function Alert$1(props) {
   const title = (pendingChangesWithErrors.length === 1 ? validationTexts.alert.titleOne : validationTexts.alert.titlePlural).replace('[COUNT]', String(pendingChangesWithErrors.length));
   // generate links to each invalid row, to go into the error message
   const links = [];
-  const rowIdentityColumn = tableMeta.rowIdentityColumnId ? table.getColumn(tableMeta.rowIdentityColumnId) : undefined;
-  pendingChangesWithErrors.forEach((error, index) => {
+  const visibleColumns = table.getVisibleFlatColumns().map(c => c.id);
+  const rowIdentityColumn = tableMeta.rowIdentityAccessor && visibleColumns.includes(String(tableMeta.rowIdentityAccessor)) ? table.getColumn(String(tableMeta.rowIdentityAccessor)) : undefined;
+  pendingChangesWithErrors.forEach((pendingChangeWithError, index) => {
     // if appropriate, concatenate the item with the text "and"
     if (pendingChangesWithErrors.length > 1 && index === pendingChangesWithErrors.length - 1) {
       // Add space before and after `messageAnd` text
       links.push(` ${validationTexts.alert.messageAnd} `);
     }
-    const rowIndex = table.getRowModel().rows.findIndex(row => row.id === error.rowId);
+    const rowIndex = table.getRowModel().rows.findIndex(row => row.id === pendingChangeWithError.rowId);
     const handleClick = () => {
+      // if row is visible
       if (rowIndex > -1) {
         scrollToRow(rowIndex);
-      } else {
-        setShowFilterResetDialog(error.rowId);
+      }
+      // if row is filtered out
+      else {
+        setShowFilterResetDialog(pendingChangeWithError.rowId);
       }
     };
     let tooltip;
-    if (error.pendingChange._meta.errors.row) {
-      tooltip = error.pendingChange._meta.errors.row;
+    if (pendingChangeWithError.errors.row) {
+      tooltip = pendingChangeWithError.errors.row;
     } else {
       var _table$getAllColumns$, _table$getAllColumns$2;
-      const firstCellErrorColumnId = Object.keys(error.pendingChange._meta.errors.cells)[0];
+      const firstCellErrorColumnId = Object.keys(pendingChangeWithError.errors.cells)[0];
       const columnName = (_table$getAllColumns$ = table.getAllColumns().find(column => column.id === firstCellErrorColumnId)) === null || _table$getAllColumns$ === void 0 ? void 0 : (_table$getAllColumns$2 = _table$getAllColumns$.columnDef.meta) === null || _table$getAllColumns$2 === void 0 ? void 0 : _table$getAllColumns$2.header;
-      tooltip = `${columnName}: ${error.pendingChange._meta.errors.cells[firstCellErrorColumnId]}`;
+      tooltip = `${columnName}: ${pendingChangeWithError.errors.cells[firstCellErrorColumnId]}`;
     }
+    const row = table.getRow(pendingChangeWithError.rowId).original;
     links.push(/*#__PURE__*/React__default.createElement(Tooltip, {
-      key: error.rowId,
+      key: pendingChangeWithError.rowId,
       title: tooltip
     }, /*#__PURE__*/React__default.createElement("span", {
       className: "text-blue",
       onClick: handleClick,
       role: "button"
-    }, rowIdentityColumn ? error.pendingChange._meta.original[rowIdentityColumn.id] : rowIndex + 1)));
+    }, rowIdentityColumn ? row[rowIdentityColumn.id] : rowIndex + 1)));
     // if appropriate, concatenate the item with the text ","
     if (pendingChangesWithErrors.length > 2 && index < pendingChangesWithErrors.length - 2) {
       links.push(', ');
@@ -19698,89 +19879,6 @@ function FilterResetDialog(props) {
   }, texts.table3.editing.validation.resetFiltersDialog.confirm)))));
 }
 
-function CreateNewRowButton(props) {
-  const {
-    onEditingCreate,
-    scrollToIndex,
-    table,
-    tableMeta
-  } = props;
-  const {
-    texts
-  } = useLocalization();
-  const rows = table.getCoreRowModel().rows.filter(row => row.original !== undefined);
-  const [rowCreated, setRowCreated] = React__default.useState({
-    rowFinder: undefined
-  });
-  const handleKeyDown = event => {
-    if (!tableMeta.editing.hasChanges() && event.key === 'Tab') {
-      tableMeta.editing.saveChanges();
-    }
-  };
-  const handleCreate = function () {
-    try {
-      if (!onEditingCreate) {
-        return Promise.resolve();
-      }
-      const createdRow = rows.find(row => {
-        var _rowCreated$rowFinder;
-        return rowCreated === null || rowCreated === void 0 ? void 0 : (_rowCreated$rowFinder = rowCreated.rowFinder) === null || _rowCreated$rowFinder === void 0 ? void 0 : _rowCreated$rowFinder.call(rowCreated, row.original);
-      });
-      const _temp = function () {
-        if (createdRow) {
-          return Promise.resolve(tableMeta.editing.saveChanges()).then(function () {
-            if (!tableMeta.editing.hasRowErrors(createdRow.id)) {
-              const rowFinder = onEditingCreate();
-              setRowCreated({
-                rowFinder
-              });
-            }
-          });
-        } else {
-          const rowFinder = onEditingCreate();
-          setRowCreated({
-            rowFinder
-          });
-        }
-      }();
-      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-  React__default.useEffect(() => {
-    if (typeof (rowCreated === null || rowCreated === void 0 ? void 0 : rowCreated.rowFinder) === 'function') {
-      const createdRow = rows.find(row => {
-        var _rowCreated$rowFinder2;
-        return rowCreated === null || rowCreated === void 0 ? void 0 : (_rowCreated$rowFinder2 = rowCreated.rowFinder) === null || _rowCreated$rowFinder2 === void 0 ? void 0 : _rowCreated$rowFinder2.call(rowCreated, row.original);
-      });
-      if (createdRow) {
-        const rowInTable = table.getRowModel().rows.filter(row => row.original !== undefined).find(row => {
-          var _rowCreated$rowFinder3;
-          return rowCreated === null || rowCreated === void 0 ? void 0 : (_rowCreated$rowFinder3 = rowCreated.rowFinder) === null || _rowCreated$rowFinder3 === void 0 ? void 0 : _rowCreated$rowFinder3.call(rowCreated, row.original);
-        });
-        if (rowInTable) {
-          tableMeta.editing.toggleEditing(true);
-          tableMeta.rowActive.setRowActiveIndex(createdRow.index);
-          scrollToIndex(createdRow.index);
-          requestAnimationFrame(() => animateCreateRow(createdRow.id));
-        }
-        requestAnimationFrame(() => tableMeta.editing.addCreatedRowChangeset(createdRow));
-      }
-    }
-  }, [rowCreated]);
-  return /*#__PURE__*/React__default.createElement("tr", {
-    onClick: handleCreate,
-    className: "border-grey-300 hover:bg-grey-100 group !sticky bottom-10 left-0 z-[21] !block cursor-pointer border-t"
-  }, /*#__PURE__*/React__default.createElement("td", {
-    className: "!border-t-0 !bg-transparent"
-  }, /*#__PURE__*/React__default.createElement(Button$1, {
-    onKeyDown: handleKeyDown,
-    className: "group-hover:bg-grey-200 sticky left-0",
-    appearance: "transparent"
-  }, "+ ", texts.table3.editing.buttons.create.label)));
-}
-
 function Editing(props) {
   const {
     scrollToIndex,
@@ -19806,21 +19904,194 @@ function Editing(props) {
     (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.click();
   });
   const handleChange = enabled => {
-    tableMeta.editing.toggleEditing(enabled);
+    if (enabled && tableMeta.rowActive.rowActiveIndex === undefined) {
+      tableMeta.rowActive.setRowActiveIndex(0);
+    }
     requestAnimationFrame(() => {
       var _tableMeta$rowActive$;
-      return scrollToIndex((_tableMeta$rowActive$ = tableMeta.rowActive.rowActiveIndex) !== null && _tableMeta$rowActive$ !== void 0 ? _tableMeta$rowActive$ : 0);
+      // wait for an active row to be set so that we don't trigger save
+      tableMeta.editing.toggleEditing(enabled, table);
+      scrollToIndex((_tableMeta$rowActive$ = tableMeta.rowActive.rowActiveIndex) !== null && _tableMeta$rowActive$ !== void 0 ? _tableMeta$rowActive$ : 0);
     });
   };
   return /*#__PURE__*/React__default.createElement(Tooltip, {
     title: tooltip
   }, /*#__PURE__*/React__default.createElement(ModeSwitch, {
+    "data-table": "editing-toggle",
     checked: tableMeta.editing.isEditing,
     onChange: handleChange,
     ref: ref
   }));
 }
 
+function CreateNewRow(props) {
+  var _temporaryRows$0$tabl, _temporaryRows$, _table$getState$colum;
+  const {
+    buttonRef,
+    onEditingCreate: handleEditingCreate,
+    table,
+    tableMeta
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const temporaryRows = tableMeta.editing.temporaryRows;
+  const temporaryRowId = (_temporaryRows$0$tabl = (_temporaryRows$ = temporaryRows[0]) === null || _temporaryRows$ === void 0 ? void 0 : _temporaryRows$[tableMeta.rowIdentityAccessor]) !== null && _temporaryRows$0$tabl !== void 0 ? _temporaryRows$0$tabl : '';
+  const isDisabled = !!table.getState().globalFilter || !!((_table$getState$colum = table.getState().columnFilters) !== null && _table$getState$colum !== void 0 && _table$getState$colum.length) || !!temporaryRowId && !!tableMeta.editing.hasRowErrors(temporaryRowId);
+  const isSaving = !!temporaryRowId && tableMeta.editing.getRowStatus(temporaryRowId) === 'saving';
+  const handleCreate = function (event) {
+    try {
+      // prevent save being triggered by click outside - TODO: investigate why the button triggers clickoutside
+      event === null || event === void 0 ? void 0 : event.stopPropagation();
+      if (!handleEditingCreate || isDisabled) {
+        return Promise.resolve();
+      }
+      return Promise.resolve(tableMeta.editing.saveChanges(table)).then(function (saved) {
+        if (!saved) {
+          return;
+        }
+        try {
+          const changeset = handleEditingCreate();
+          if (changeset) {
+            const nextRowIndex = temporaryRows.length ? tableMeta.length + 1 : tableMeta.length;
+            // change the row before reating because it triggers a save
+            // saving would trigger the validation flow and immediately make the row red
+            tableMeta.rowActive.setRowActiveIndex(nextRowIndex);
+            requestAnimationFrame(function () {
+              try {
+                tableMeta.editing.toggleEditing(true, table);
+                return Promise.resolve(tableMeta.editing.createRow(changeset)).then(function (rowId) {
+                  tableMeta.editing.setLastFocusedCellIndex(0);
+                  try {
+                    const row = table.getRow(rowId);
+                    row.pin('bottom');
+                  } catch {
+                    //
+                  }
+                });
+              } catch (e) {
+                return Promise.reject(e);
+              }
+            });
+          }
+        } catch (error) {
+          console.error(error);
+        }
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  let tooltip;
+  if (isSaving) {
+    tooltip = texts.table3.editing.buttons.create.saving;
+  } else if (isDisabled) {
+    tooltip = texts.table3.editing.buttons.create.disabled;
+  }
+  return /*#__PURE__*/React__default.createElement("tr", {
+    "data-row-create": true,
+    className: "border-grey-300 group/row",
+    tabIndex: -1
+  }, /*#__PURE__*/React__default.createElement("td", {
+    className: "!bg-grey-50 col-span-full !border-b-0 !px-1"
+  }, /*#__PURE__*/React__default.createElement(Button$1, {
+    appearance: "transparent",
+    className: "group-hover:bg-grey-200 sticky left-[4px]",
+    disabled: isDisabled,
+    onClick: handleCreate,
+    ref: buttonRef,
+    tooltip: tooltip
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: "circle-plus"
+  }), texts.table3.editing.buttons.create.label)));
+}
+
+function TemporaryRow(props) {
+  var _tableRef$current, _tableRef$current2;
+  const {
+    createRowButtonRef,
+    table,
+    tableMeta,
+    tableRef
+  } = props;
+  const isScrolled = tableRef.current ? ((_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.scrollHeight) > ((_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : _tableRef$current2.clientHeight) : false;
+  const handleKeyDown = function (event) {
+    try {
+      const _temp2 = function () {
+        if (event.key === 'ArrowDown') {
+          event.preventDefault();
+          const _temp = function () {
+            if (!isElementTriggeredFromContainer(event.target, event.currentTarget)) {
+              return Promise.resolve(tableMeta.editing.saveChanges(table)).then(function (saved) {
+                if (saved) {
+                  var _createRowButtonRef$c;
+                  (_createRowButtonRef$c = createRowButtonRef.current) === null || _createRowButtonRef$c === void 0 ? void 0 : _createRowButtonRef$c.focus();
+                }
+              });
+            }
+          }();
+          if (_temp && _temp.then) return _temp.then(function () {});
+        } else if (event.key === 'ArrowUp') {
+          event.preventDefault();
+          event.stopPropagation();
+          if (tableRef.current) {
+            var _tableRef$current$que, _tableRef$current$que2, _tableRef$current$que3;
+            const availableRows = Array.from((_tableRef$current$que = tableRef.current.querySelectorAll(`tbody tr:not([data-row-id^='${TEMPORARY_ROW_ID_PREFIX}'])`)) !== null && _tableRef$current$que !== void 0 ? _tableRef$current$que : []);
+            const footerHeight = (_tableRef$current$que2 = (_tableRef$current$que3 = tableRef.current.querySelector('tfoot')) === null || _tableRef$current$que3 === void 0 ? void 0 : _tableRef$current$que3.getBoundingClientRect().height) !== null && _tableRef$current$que2 !== void 0 ? _tableRef$current$que2 : 0;
+            const newRowHeight = event.currentTarget.getBoundingClientRect().height;
+            const visibleHeight = tableRef.current.clientHeight - footerHeight - newRowHeight;
+            const tableTopOffset = tableRef.current.getBoundingClientRect().top;
+            let nextRowIndex;
+            // iterate available rows in reverse order, since we're working at the bottom
+            for (let index = availableRows.length - 1; index >= 0; index--) {
+              const rowRect = availableRows[index].getBoundingClientRect();
+              const topPlusHalfRow = rowRect.top + rowRect.height / 2;
+              if (topPlusHalfRow - tableTopOffset <= visibleHeight) {
+                nextRowIndex = index;
+                break;
+              }
+            }
+            if (nextRowIndex) {
+              tableMeta.rowActive.setRowActiveIndex(Number(availableRows[nextRowIndex < 0 ? 0 : nextRowIndex].getAttribute('data-row-index')));
+            }
+          }
+        }
+      }();
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const handleKeyDownCapture = event => {
+    if (event.key === 'ArrowLeft' && tableMeta.editing.lastFocusedCellIndex === 0) {
+      event.preventDefault();
+      event.stopPropagation();
+    } else if (event.key === 'ArrowRight' && tableMeta.editing.lastFocusedCellIndex) {
+      if (tableMeta.editing.lastFocusedCellIndex === table.getVisibleFlatColumns().length - 1) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    }
+  };
+  const className = cn('group/row border-grey-300 !sticky z-[21]', {
+    'bottom-20': tableMeta.footer.isEnabled,
+    'bottom-10': !tableMeta.footer.isEnabled,
+    'border-b border-t shadow-[0px_-5px_20px_0px_rgba(0,0,0,0.1)] border-t-grey-500/[0.75]': isScrolled
+  });
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, table.getBottomRows().map(row => (/*#__PURE__*/React__default.createElement(Row, {
+    key: row.id,
+    cellRenderer: RENDERERS$1.cell,
+    index: tableMeta.length,
+    measureRow: () => null,
+    renderer: RENDERERS$1.row,
+    row: row,
+    table: table,
+    className: className,
+    onKeyDown: handleKeyDown,
+    onKeyDownCapture: handleKeyDownCapture
+  }))));
+}
+
 function Column$3(_) {
   return null;
 }
@@ -19836,8 +20107,18 @@ const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref)
     'data-table-editing-mode': (_table3$meta$editing = table3.meta.editing) !== null && _table3$meta$editing !== void 0 && _table3$meta$editing.isEditing ? (_table3$meta$editing2 = table3.meta.editing) !== null && _table3$meta$editing2 !== void 0 && _table3$meta$editing2.isDetailedMode ? 'detailed' : 'normal' : undefined,
     enableHorizontalArrowKeyNavigation: table3.meta.editing.isEditing
   };
-  const hasAlertErrors = table3.meta.editing.hasAlertErrors();
-  const showCreateRowButton = table3.meta.editing.isEnabled && props.onEditingCreate;
+  const hasAlertErrors = table3.meta.editing.isEditing && table3.meta.editing.getErrorsShownInAlert().length;
+  const hasCreateWorkflow = table3.meta.editing.isEnabled && props.onEditingCreate;
+  let footerRows;
+  if (hasCreateWorkflow) {
+    footerRows = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(CreateNewRow, {
+      buttonRef: table3.meta.editing.createRowButtonRef,
+      onEditingCreate: props.onEditingCreate,
+      table: table3.instance,
+      tableMeta: table3.meta,
+      tableRef: table3.ref
+    }));
+  }
   return /*#__PURE__*/React__default.createElement(Table, null, /*#__PURE__*/React__default.createElement(Table.Toolbar, {
     table: table3
   }, table3.meta.editing.isEnabled ? (/*#__PURE__*/React__default.createElement(Editing, {
@@ -19850,13 +20131,14 @@ const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref)
     tableRef: table3.ref
   })) : null, /*#__PURE__*/React__default.createElement(Table.Grid, Object.assign({}, gridAttributes, {
     "data-taco": "table3",
+    rowsForFooter: footerRows,
     table: table3
-  }), showCreateRowButton && (/*#__PURE__*/React__default.createElement(CreateNewRowButton, {
+  }), hasCreateWorkflow ? (/*#__PURE__*/React__default.createElement(TemporaryRow, {
+    createRowButtonRef: table3.meta.editing.createRowButtonRef,
     table: table3.instance,
     tableMeta: table3.meta,
-    onEditingCreate: props.onEditingCreate,
-    scrollToIndex: table3.renderer.scrollToIndex
-  }))));
+    tableRef: table3.ref
+  })) : null));
 });
 const Table3 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   const stringifiedChildren = String(props.children);