@economic/taco 2.44.4 → 2.44.5-create.4

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 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) {
@@ -10964,13 +10981,13 @@ function useTableSearch(isEnabled = false, defaultEnableGlobalFilter = false) {
 }
 
 // A type of promise-like that resolves synchronously and supports only one observer
-const _Pact = /*#__PURE__*/function () {
+var _Pact = /*#__PURE__*/function () {
   function _Pact() {}
   _Pact.prototype.then = function (onFulfilled, onRejected) {
-    const result = new _Pact();
-    const state = this.s;
+    var result = new _Pact();
+    var state = this.s;
     if (state) {
-      const callback = state & 1 ? onFulfilled : onRejected;
+      var callback = state & 1 ? onFulfilled : onRejected;
       if (callback) {
         try {
           _settle(result, 1, callback(this.v));
@@ -10984,7 +11001,7 @@ const _Pact = /*#__PURE__*/function () {
     }
     this.o = function (_this) {
       try {
-        const value = _this.v;
+        var value = _this.v;
         if (_this.s & 1) {
           _settle(result, 1, onFulfilled ? onFulfilled(value) : value);
         } else if (onRejected) {
@@ -11021,7 +11038,7 @@ function _settle(pact, state, value) {
     }
     pact.s = state;
     pact.v = value;
-    const observer = pact.o;
+    var observer = pact.o;
     if (observer) {
       observer(pact);
     }
@@ -11061,17 +11078,13 @@ function _forTo(array, body, check) {
   _cycle();
   return pact;
 }
-const _iteratorSymbol = /*#__PURE__*/typeof Symbol !== "undefined" ? Symbol.iterator || (Symbol.iterator = /*#__PURE__*/Symbol("Symbol.iterator")) : "@@iterator";
+var _iteratorSymbol = /*#__PURE__*/typeof Symbol !== "undefined" ? Symbol.iterator || (Symbol.iterator = /*#__PURE__*/Symbol("Symbol.iterator")) : "@@iterator";
 
 // Asynchronously iterate through an object's values
 // Uses for...of if the runtime supports it, otherwise iterates until length on a copy
 function _forOf(target, body, check) {
   if (typeof target[_iteratorSymbol] === "function") {
-    var iterator = target[_iteratorSymbol](),
-      step,
-      pact,
-      reject;
-    function _cycle(result) {
+    var _cycle = function _cycle(result) {
       try {
         while (!(step = iterator.next()).done && (!check || !check())) {
           result = body(step.value);
@@ -11092,13 +11105,17 @@ function _forOf(target, body, check) {
       } catch (e) {
         _settle(pact || (pact = new _Pact()), 2, e);
       }
-    }
+    };
+    var iterator = target[_iteratorSymbol](),
+      step,
+      pact,
+      reject;
     _cycle();
-    if (iterator.return) {
-      var _fixup = function (value) {
+    if (iterator["return"]) {
+      var _fixup = function _fixup(value) {
         try {
           if (!step.done) {
-            iterator.return();
+            iterator["return"]();
           }
         } catch (e) {}
         return value;
@@ -11125,7 +11142,7 @@ function _forOf(target, body, check) {
     return body(values[i]);
   }, check);
 }
-const _asyncIteratorSymbol = /*#__PURE__*/typeof Symbol !== "undefined" ? Symbol.asyncIterator || (Symbol.asyncIterator = /*#__PURE__*/Symbol("Symbol.asyncIterator")) : "@@asyncIterator";
+var _asyncIteratorSymbol = /*#__PURE__*/typeof Symbol !== "undefined" ? Symbol.asyncIterator || (Symbol.asyncIterator = /*#__PURE__*/Symbol("Symbol.asyncIterator")) : "@@asyncIterator";
 
 // Asynchronously call a function and send errors to recovery continuation
 function _catch(body, recover) {
@@ -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,30 @@ 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) {
+    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 +12168,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 +12176,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 +12334,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 +12397,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 +12648,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 +12755,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 +12776,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 +12789,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 +12804,8 @@ const MemoedGroupedCell = /*#__PURE__*/React__default.memo(function MemoedGroupe
     actionsLength: 4,
     data: subRows,
     isActiveRow: true,
-    rowId: rowId
+    rowId: rowId,
+    table: table
   })) : null);
 });
 
@@ -12902,7 +12945,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 +13739,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
@@ -14386,6 +14429,7 @@ const getOptionsFromCollection = (collection, selector) => collection.querySelec
 const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(props, ref) {
   const {
     querySelector,
+    resetOnChange,
     tabIndex = 0,
     ...otherProps
   } = props;
@@ -14416,6 +14460,21 @@ const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(prop
       internalRef.current.setActiveIndexByElement = setActiveIndexByElement;
     }
   }, [internalRef.current]);
+  React__default.useEffect(() => {
+    if (internalRef.current) {
+      const selected = internalRef.current.querySelectorAll(`[aria-current="true"]`);
+      const options = getOptionsFromCollection(internalRef.current, querySelector);
+      if (options.length && selected.length === 1) {
+        const firstSelected = internalRef.current.querySelector(`[aria-selected]`);
+        if (firstSelected) {
+          const selectedIndex = Array.from(options).indexOf(firstSelected);
+          if (selectedIndex > -1) {
+            setActiveOption(selectedIndex, internalRef.current, firstSelected);
+          }
+        }
+      }
+    }
+  }, [resetOnChange]);
   React__default.useEffect(() => {
     if (internalRef.current) {
       const options = getOptionsFromCollection(internalRef.current, querySelector);
@@ -14427,8 +14486,8 @@ const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(prop
         }
         // if one item is selected, make sure it's current
         if (selected.length === 1) {
-          const firstSelected = internalRef.current.querySelector(`[aria-selected]`);
-          if (firstSelected) {
+          if (options) {
+            const firstSelected = selected.item(0);
             const selectedIndex = Array.from(options).indexOf(firstSelected);
             if (selectedIndex > -1) {
               setActiveOption(selectedIndex, internalRef.current, firstSelected);
@@ -14571,6 +14630,7 @@ const Root$1 = /*#__PURE__*/React__default.forwardRef(function Listbox2(props, r
     id: id,
     querySelector: customSelector ? `${DEFAULT_SELECTOR}, ${customSelector}` : DEFAULT_SELECTOR,
     ref: ref,
+    resetOnChange: value,
     role: "listbox"
   }), children)));
 });
@@ -16755,6 +16815,7 @@ function TableGrid(props) {
   var _table$state$grouping;
   const {
     enableHorizontalArrowKeyNavigation,
+    rowsForFooter,
     table,
     ...attributes
   } = props;
@@ -16762,8 +16823,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,
@@ -16796,9 +16855,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(_) {
@@ -18301,33 +18360,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(() => {
@@ -18343,25 +18385,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) {
@@ -18431,6 +18494,8 @@ function willRowMoveAfterSorting(cell, change, rowIndex) {
       const aUndefined = aValue === undefined;
       const bUndefined = bValue === undefined;
       if (aUndefined || bUndefined) {
+        if (sortUndefined === 'first') return aUndefined ? -1 : 1;
+        if (sortUndefined === 'last') return aUndefined ? 1 : -1;
         return aUndefined && bUndefined ? 0 : aUndefined ? sortUndefined : -sortUndefined;
       }
     }
@@ -18441,444 +18506,544 @@ 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) {
+  return rowId === null || rowId === void 0 ? void 0 : 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;
+    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 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);
-  }
-  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);
+  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);
     }
-  }, 250), []);
-  function syncCellChanges(changes) {
-    updatersRef.current = changes;
+    setEditing(enabled);
   }
   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];
-    }
-  }
-  // 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
   };
 }
 
@@ -19120,13 +19285,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(() => {
@@ -19146,13 +19326,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 = {
@@ -19185,7 +19364,6 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     row,
     rowPendingChanges,
     tabIndex = -1,
-    toggleEditing,
     toggleDetailedMode,
     type = 'input',
     value
@@ -19244,8 +19422,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);
@@ -19255,8 +19433,6 @@ 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;
     }
@@ -19355,12 +19531,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;
@@ -19382,7 +19583,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, {
@@ -19394,42 +19594,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,
@@ -19439,18 +19610,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',
@@ -19461,7 +19621,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,
@@ -19499,15 +19659,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 = {
@@ -19515,29 +19706,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;
@@ -19556,7 +19764,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, {
@@ -19575,38 +19783,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(', ');
@@ -19662,89 +19875,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,
@@ -19770,21 +19900,193 @@ 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) {
+            // 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(tableMeta.length);
+            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;
 }
@@ -19800,8 +20102,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, {
@@ -19814,13 +20126,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);