@economic/taco 2.45.0-alpha.1 → 2.45.0-alpha.2

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);
@@ -4169,7 +4170,7 @@ const useMergedRef = ref => {
 };
 
 // taken from react-aria
-const FOCUSABLE_ELEMENTS = ['input:not([disabled]):not([type=hidden])', 'select:not([disabled])', 'textarea:not([disabled])', 'button:not([disabled])', 'a[href]', 'area[href]', 'summary', 'iframe', 'object', 'embed', 'audio[controls]', 'video[controls]', '[contenteditable]', '[tabindex]:not([tabindex="-1"]):not([disabled])', 'details:not([disabled])', 'summary:not(:disabled)'];
+const FOCUSABLE_ELEMENTS = ['[tabindex]:not([disabled])', 'input:not([disabled])', 'select:not([disabled])', 'textarea:not([disabled])', 'button:not([disabled])', 'a[href]', 'area[href]', 'summary', 'iframe', 'object', 'embed', 'audio[controls]', 'video[controls]', '[contenteditable]', 'details:not([disabled])', 'summary:not(:disabled)'];
 const hasFocusableElement = element => {
   if (!element) {
     return null;
@@ -4195,13 +4196,20 @@ const getNextFocussableElement = currentElement => {
   if (!currentElement) {
     return null;
   }
-  const focussableElements = [...document.querySelectorAll(FOCUSABLE_ELEMENTS.join(','))];
+  let focussableElements = [...document.querySelectorAll(FOCUSABLE_ELEMENTS.join(','))];
   const currentElementIndex = focussableElements.indexOf(currentElement);
-  // If the currentElement is not in the focussable elements list or it is the last element
-  if (currentElementIndex !== -1 && currentElementIndex === focussableElements.length - 1) {
-    return null;
+  if (currentElementIndex > -1) {
+    focussableElements = focussableElements.slice(currentElementIndex + 1).filter(element => element.getAttribute('tabindex') !== '-1');
+    if (focussableElements.length) {
+      var _focussableElements$;
+      focussableElements = focussableElements.filter(element => {
+        var _element$checkVisibil, _element$checkVisibil2;
+        return (_element$checkVisibil = (_element$checkVisibil2 = element.checkVisibility) === null || _element$checkVisibil2 === void 0 ? void 0 : _element$checkVisibil2.call(element)) !== null && _element$checkVisibil !== void 0 ? _element$checkVisibil : true;
+      });
+      return (_focussableElements$ = focussableElements[0]) !== null && _focussableElements$ !== void 0 ? _focussableElements$ : null;
+    }
   }
-  return focussableElements[currentElementIndex + 1];
+  return null;
 };
 const getOverlaySelector = element => {
   switch (element === null || element === void 0 ? void 0 : element.getAttribute('role')) {
@@ -4213,7 +4221,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) {
@@ -4224,11 +4232,14 @@ function isElementInsideOrTriggeredFromContainer(element, container) {
     const elementInDocument = document.querySelector(escapedSelector);
     // 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]'));
@@ -4722,7 +4733,9 @@ const defaultLocalisationTexts = {
           tooltip: 'Edit table'
         },
         create: {
-          label: 'New'
+          label: 'New',
+          disabled: 'Existing new row must be saved',
+          saving: 'Saving...'
         }
       },
       clearChangesConfirmationDialog: {
@@ -4744,8 +4757,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',
@@ -7647,7 +7660,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', {
@@ -8707,10 +8720,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';
@@ -10413,6 +10426,15 @@ function configureReactTableOptions(options, props, localization) {
   // We don't want to expose internal Tanstack Table row, so we need to wrap enableRowSelection callback into additional function,
   // which receives the React Table Row object and passes row.original to a callback.
   const reactTableEnableRowSelection = typeof options.enableRowSelection === 'function' ? row => options.enableRowSelection(row.original) : options.enableRowSelection;
+  let getRowId;
+  if (props.rowIdentityAccessor) {
+    getRowId = (originalRow, index) => {
+      if (originalRow) {
+        return String(originalRow[props.rowIdentityAccessor]);
+      }
+      return String(index);
+    };
+  }
   const tableOptions = {
     defaultColumn: {
       enableColumnFilter: options.enableFiltering || true,
@@ -10431,11 +10453,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) {
@@ -10917,6 +10941,7 @@ function useTableRowHeight(isEnabled = false, defaultRowHeight = 'medium') {
 function useTableRowSelection(isEnabled = false) {
   const lastSelectedRowIndex = React__default.useRef();
   const onKeyDown = React__default.useCallback((event, table) => {
+    var _event$target;
     if (!isEnabled || !table.options.enableRowSelection || event.defaultPrevented) {
       return;
     }
@@ -10931,7 +10956,7 @@ function useTableRowSelection(isEnabled = false) {
         (_rows$rowActiveIndex2 = rows[rowActiveIndex]) === null || _rows$rowActiveIndex2 === void 0 ? void 0 : _rows$rowActiveIndex2.toggleSelected();
       }
       return;
-    } else if ((event.ctrlKey || event.metaKey) && event.key === 'a') {
+    } else if ((event.ctrlKey || event.metaKey) && event.key === 'a' && !['INPUT', 'TEXTAREA'].includes((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.tagName)) {
       event.preventDefault();
       table.toggleAllRowsSelected();
       return;
@@ -11768,7 +11793,7 @@ function useTableManager(props, meta, internalColumns) {
       rowDrag,
       rowDrop: rowDrop,
       rowExpansion: rowExpansion,
-      rowIdentityColumnId: props.rowIdentityColumnId,
+      rowIdentityAccessor: props.rowIdentityAccessor,
       rowGoto,
       rowGroups: rowGroups,
       rowHeight,
@@ -12106,7 +12131,8 @@ const Skeleton = /*#__PURE__*/React__default.forwardRef(function Skeleton(props,
 
 const RowContext = /*#__PURE__*/React__default.createContext({
   isHovered: false,
-  rowIndex: -1
+  rowIndex: -1,
+  hideRowActions: false
 });
 
 /* anonymous functions will break the memoisation on each render, wrap handlers in callbacks */
@@ -12114,6 +12140,7 @@ function Row(props) {
   const {
     renderer: RowRenderer,
     cellRenderer: CellRenderer,
+    hideRowActions = false,
     ...displayRowProps
   } = props;
   const tableMeta = props.table.options.meta;
@@ -12121,8 +12148,9 @@ function Row(props) {
   // context - it must be here for cells to read it, since they render alongside the row inside DisplayRow
   const contextValue = React__default.useMemo(() => ({
     isHovered,
-    rowIndex: props.index
-  }), [isHovered, props.index]);
+    rowIndex: props.index,
+    hideRowActions
+  }), [isHovered, props.index, hideRowActions]);
   if (props.row.original === undefined) {
     return /*#__PURE__*/React__default.createElement(SkeletonRow, Object.assign({}, props));
   }
@@ -12133,11 +12161,35 @@ function Row(props) {
   })));
 }
 
-function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
-  var _table$getState$group, _virtualItems$padding, _virtualItems$padding2, _virtualItems$padding3, _ref, _virtualItems;
+// scroll padding end is designed to always show half of the next row
+function getScrollPaddingEndOffset(table) {
+  const tableMeta = table.options.meta;
+  let offset = 2;
+  if (tableMeta.footer.isEnabled) {
+    offset += 1;
+  }
+  if (table.getHeaderGroups().length > 1) {
+    offset += table.getHeaderGroups().length - 1;
+  }
+  let height = ROW_HEIGHT_ESTIMATES.medium * offset;
+  const bottomRows = table.getBottomRows();
+  if (bottomRows.length) {
+    // 1.4 offsets for half rows and also accounts for increased row heights (which is likely in pinned rows)
+    height += ROW_HEIGHT_ESTIMATES[tableMeta.rowHeight.height] * 1.4 * bottomRows.length;
+  }
+  return height;
+}
+// scroll padding end is designed to always show half of the next row
+function getPaddingEndOffset(table, options) {
+  var _table$getBottomRows, _options$virtualiserP;
+  const bottomRows = (_table$getBottomRows = table.getBottomRows()) !== null && _table$getBottomRows !== void 0 ? _table$getBottomRows : [];
+  return ROW_HEIGHT_ESTIMATES.medium * ((_options$virtualiserP = options === null || options === void 0 ? void 0 : options.virtualiserPaddingEndOffset) !== null && _options$virtualiserP !== void 0 ? _options$virtualiserP : 1) * bottomRows.length;
+}
+function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex, options) {
+  var _table$getState$group, _table$getCenterRows, _virtualItems$padding, _virtualItems$padding2, _virtualItems$padding3, _ref, _virtualItems;
   const tableMeta = table.options.meta;
-  const rows = table.getRowModel().rows;
   const isTableRowGrouped = !!((_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length);
+  const rows = (_table$getCenterRows = table.getCenterRows()) !== null && _table$getCenterRows !== void 0 ? _table$getCenterRows : [];
   // expanded rows
   const {
     createRowMeasurer,
@@ -12147,9 +12199,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,
@@ -12158,7 +12207,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),
+    paddingEnd: getPaddingEndOffset(table, options)
   });
   const totalSize = virtualiser.getTotalSize();
   const virtualItems = virtualiser.getVirtualItems();
@@ -12315,12 +12365,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');
@@ -12360,7 +12412,8 @@ const Cell = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
   } = context;
   const {
     isHovered,
-    rowIndex
+    rowIndex,
+    hideRowActions
   } = React__default.useContext(RowContext);
   const tableMeta = table.options.meta;
   const actions = tableMeta.rowActions.rowActions;
@@ -12368,15 +12421,14 @@ const Cell = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
   const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;
   const isResizingColumn = !!table.getState().columnSizingInfo.isResizingColumn;
   const isHoverStatePaused = tableMeta.rowActive.isHoverStatePaused;
-  // We don't want to show actions in edit mode, since we have editing actions,
-  // which is shown in edit mode instead.
-  if (actions !== null && actions !== void 0 && actions.length && (isActiveRow || isHovered && !isHoverStatePaused && !isResizingColumn)) {
+  if (!hideRowActions && actions !== null && actions !== void 0 && actions.length && (isActiveRow || isHovered && !isHoverStatePaused && !isResizingColumn)) {
     return /*#__PURE__*/React__default.createElement(Actions$1, {
       actions: actions,
       actionsLength: actionsLength,
       data: row.original,
       isActiveRow: isActiveRow,
-      rowId: row.id
+      rowId: row.id,
+      table: table
     });
   }
   return null;
@@ -12626,13 +12678,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,
@@ -12733,7 +12785,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 {
@@ -12751,7 +12806,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) {
@@ -12763,6 +12819,7 @@ const MemoedGroupedCell = /*#__PURE__*/React__default.memo(function MemoedGroupe
     rowActions,
     rowId,
     subRows,
+    table,
     ...attributes
   } = props;
   return /*#__PURE__*/React__default.createElement("td", Object.assign({}, attributes, {
@@ -12777,7 +12834,8 @@ const MemoedGroupedCell = /*#__PURE__*/React__default.memo(function MemoedGroupe
     actionsLength: 4,
     data: subRows,
     isActiveRow: true,
-    rowId: rowId
+    rowId: rowId,
+    table: table
   })) : null);
 });
 
@@ -12839,7 +12897,7 @@ const DisplayRow = /*#__PURE__*/React__default.memo(function DisplayRow(props) {
   if (tableMeta.rowActive.isEnabled) {
     attributes['data-row-active'] = tableMeta.rowActive.rowActiveIndex === index ? true : undefined;
     // we use capture because it let's us picks up clicks on components inside the row, e.g. checkboxes
-    attributes.onClickCapture = handleClickCapture;
+    attributes.onPointerDown = handleClickCapture;
   }
   // row click
   if (tableMeta.rowClick.isEnabled(row.original)) {
@@ -12917,7 +12975,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'
   });
@@ -14401,6 +14459,7 @@ const getOptionsFromCollection = (collection, selector) => collection.querySelec
 const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(props, ref) {
   const {
     querySelector,
+    resetOnChange,
     tabIndex = 0,
     ...otherProps
   } = props;
@@ -14431,14 +14490,31 @@ 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);
       if (options.length) {
         let selected = internalRef.current.querySelectorAll(`[aria-current="true"]`);
+        // if nothing is current (keyboard visible), look for selected items
         if (selected.length === 0) {
           selected = internalRef.current.querySelectorAll(`[aria-selected]`);
         }
+        // if one item is selected, make sure it's current
         if (selected.length === 1) {
           if (options) {
             const firstSelected = selected.item(0);
@@ -14584,6 +14660,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)));
 });
@@ -14642,10 +14719,6 @@ const Option = /*#__PURE__*/React__default.forwardRef(function Listbox2Option(pr
     if (disabled || listboxDisabled || listboxReadOnly) {
       event.stopPropagation();
       return;
-    }
-    // UX requirement: if tab key is pressed and the current option is selected then keydown event is ignored
-    else if (event.key === 'Tab' && selected) {
-      return;
     } else if (isAriaSelectionKey(event)) {
       setValue(value);
     }
@@ -14656,7 +14729,6 @@ const Option = /*#__PURE__*/React__default.forwardRef(function Listbox2Option(pr
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
     "aria-disabled": listboxDisabled || disabled ? 'true' : undefined,
     "aria-selected": selected ? 'true' : undefined,
-    key: `${value}_${String(selected)}`,
     id: id,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
@@ -15099,7 +15171,9 @@ const Button$3 = /*#__PURE__*/React__default.forwardRef(function Select2TriggerB
   var _props$className;
   const {
     children,
+    onBlur,
     onClick,
+    onFocus,
     tabIndex = 0,
     ...otherProps
   } = props;
@@ -15130,6 +15204,18 @@ const Button$3 = /*#__PURE__*/React__default.forwardRef(function Select2TriggerB
       onClick(event);
     }
   };
+  let handleBlur;
+  if (typeof onBlur === 'function') {
+    // we might be focusing on an input or something inside the dropdown that was triggered by the select
+    // so see if the element gaining focus is inside a portal and look up its controller
+    // if we don't do this, things like validate on blur occur while simply opening the select
+    handleBlur = event => {
+      if (isElementInsideOrTriggeredFromContainer(event.relatedTarget, event.currentTarget)) {
+        return;
+      }
+      onBlur(event);
+    };
+  }
   // select the value text if the select is readonly
   const handleFocus = event => {
     if (readOnly) {
@@ -15139,6 +15225,9 @@ const Button$3 = /*#__PURE__*/React__default.forwardRef(function Select2TriggerB
         (_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : (_window$getSelection$ = _window$getSelection.selectAllChildren) === null || _window$getSelection$ === void 0 ? void 0 : _window$getSelection$.call(_window$getSelection, value);
       }
     }
+    if (typeof onFocus === 'function') {
+      onFocus(event);
+    }
   };
   return /*#__PURE__*/React__default.createElement("button", Object.assign({}, otherProps, {
     "aria-invalid": invalid ? true : undefined,
@@ -15146,6 +15235,7 @@ const Button$3 = /*#__PURE__*/React__default.forwardRef(function Select2TriggerB
     className: className,
     disabled: disabled,
     onClick: handleClick,
+    onBlur: handleBlur,
     onFocus: handleFocus,
     ref: ref,
     role: "combobox",
@@ -15408,17 +15498,12 @@ const BubbleSelect = props => {
 };
 
 const Search$2 = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(props, ref) {
-  const {
-    onTabKeyPress,
-    ...otherProps
-  } = props;
   const {
     listboxRef,
     searchQuery,
     setSearchQuery,
     setValidationError,
-    validationError,
-    setOpen
+    validationError
   } = useSelect2Context();
   const handleChange = event => {
     if (validationError) {
@@ -15431,11 +15516,6 @@ const Search$2 = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(p
     if (event.key === ' ') {
       return;
     }
-    // Select2 should close dropdown and receive focus, when user press Tab while searching (UX requirement to support better keyboard navigation)
-    if (event.key === 'Tab') {
-      setOpen(false);
-      onTabKeyPress();
-    }
     if (isAriaSelectionKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       var _listboxRef$current;
       event.preventDefault();
@@ -15450,7 +15530,7 @@ const Search$2 = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(p
     }),
     invalid: !!validationError,
     message: validationError === null || validationError === void 0 ? void 0 : validationError.message
-  }, /*#__PURE__*/React__default.createElement(Input, Object.assign({}, otherProps, {
+  }, /*#__PURE__*/React__default.createElement(Input, Object.assign({}, props, {
     autoFocus: true,
     invalid: !!validationError,
     onChange: handleChange,
@@ -15674,7 +15754,6 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
   // align the listbox min width with the width of the input - it should never be smaller
   const dimensions = useBoundingClientRectListener(internalRef);
   // state
-  const [tabTriggeredClose, setTabTriggeredClose] = React__default.useState(false);
   const [open, setOpen] = React__default.useState(false);
   const [value, _setValue] = reactUseControllableState.useControllableState({
     // uncontrolled
@@ -15751,7 +15830,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     var _listboxRef$current;
     if (open) {
       event.preventDefault();
-    } else if (isElementInsideTable3OrReport(event.currentTarget)) {
+    } else if (isElementInsideTable3OrReport(event.currentTarget) && isAriaDirectionKey(event)) {
       return;
     } else if (!event.ctrlKey && !event.metaKey && (event.key === 'ArrowDown' || /^[a-z0-9]$/i.test(event.key))) {
       setOpen(true);
@@ -15762,46 +15841,32 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     // the focus should always remain on the input, so we forward events on to the listbox
     (_listboxRef$current = listboxRef.current) === null || _listboxRef$current === void 0 ? void 0 : _listboxRef$current.dispatchEvent(createCustomKeyboardEvent(event));
   };
-  let handleBlur;
-  if (otherProps.onBlur) {
-    // we might be focusing on an input or something inside the dropdown that was triggered by the select
-    // so see if the element gaining focus is inside a portal and look up its controller
-    // if we don't do this, things like validate on blur occur while simply opening the select
-    handleBlur = event => {
-      var _elementGainingFocus$;
-      const elementGainingFocus = event.relatedTarget;
-      if (elementGainingFocus === undefined) {
-        return;
-      }
-      const portalId = elementGainingFocus === null || elementGainingFocus === void 0 ? void 0 : (_elementGainingFocus$ = elementGainingFocus.closest('[data-radix-popper-content-wrapper] > :first-child')) === null || _elementGainingFocus$ === void 0 ? void 0 : _elementGainingFocus$.id;
-      if (!portalId || event.currentTarget.getAttribute(`aria-controls`) !== portalId) {
-        var _otherProps$onBlur;
-        (_otherProps$onBlur = otherProps.onBlur) === null || _otherProps$onBlur === void 0 ? void 0 : _otherProps$onBlur.call(otherProps, event);
-      }
-    };
-  }
+  const shouldFocusNextRef = React__default.useRef(false);
   const handleListboxKeyDown = event => {
     if (isAriaDirectionKey(event)) {
       setShouldPauseHoverState(true);
+      return;
+    }
+    if (event.key === 'Tab') {
+      shouldFocusNextRef.current = true;
+      setOpen(false);
+      return;
     }
+    // support typeahead to set the value by typing its text
     if (!hasSearch && /^[a-z0-9]$/i.test(event.key)) {
       setValueIfMatched(event.key);
+      return;
     }
   };
+  // popover closes and unmounts before any event can be used to focus next, so prevent focusing the trigger and focus next
   const handleCloseAutoFocus = event => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (tabTriggeredClose) {
-      const nextFocussableElement = getNextFocussableElement(internalRef.current);
-      if (nextFocussableElement) {
-        // UX requirement: move focus to the next focussable element when tab key is pressed to select the value
-        nextFocussableElement.focus();
-        // Reset the tabTriggeredClose state
-        setTabTriggeredClose(false);
-      }
-    } else {
-      var _internalRef$current;
-      (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
+    if (shouldFocusNextRef.current) {
+      var _otherProps$onBlur, _getNextFocussableEle;
+      event.preventDefault();
+      shouldFocusNextRef.current = false;
+      (_otherProps$onBlur = otherProps.onBlur) === null || _otherProps$onBlur === void 0 ? void 0 : _otherProps$onBlur.call(otherProps, event);
+      (_getNextFocussableEle = getNextFocussableElement(internalRef.current)) === null || _getNextFocussableEle === void 0 ? void 0 : _getNextFocussableEle.focus();
+      return;
     }
   };
   const areAllSelected = Array.isArray(value) && selectOptions.every(option => value.includes(option));
@@ -15850,18 +15915,14 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
   }, /*#__PURE__*/React__default.createElement(Trigger$7, Object.assign({}, otherProps, {
     "aria-haspopup": "listbox",
     emptyValue: emptyValue,
-    onBlur: handleBlur,
     onKeyDown: handleKeyDown,
     placeholder: placeholder,
     ref: internalRef
   }), flattenedChildren)), /*#__PURE__*/React__default.createElement(PopoverPrimitive.Portal, null, /*#__PURE__*/React__default.createElement(PopoverPrimitive.Content, {
     asChild: true,
     align: "start",
-    onOpenAutoFocus: () => {
-      var _internalRef$current2;
-      (_internalRef$current2 = internalRef.current) === null || _internalRef$current2 === void 0 ? void 0 : _internalRef$current2.focus();
-    },
     onCloseAutoFocus: handleCloseAutoFocus,
+    onPointerDownOutside: otherProps.onBlur,
     sideOffset: 4,
     tabIndex: -1
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -15871,8 +15932,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     }
   }, hasSearch ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Search$2, {
     placeholder: hasInlineCreation ? texts.select2.searchOrCreate : texts.select2.search,
-    ref: searchRef,
-    onTabKeyPress: () => setTabTriggeredClose(true)
+    ref: searchRef
   }), multiple && selectOptions.length > 1 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button$1, {
     className: "!justify-start",
     appearance: "discrete",
@@ -15942,6 +16002,7 @@ const ControlledHiddenField = props => {
       key: String(bubbleValue),
       multiple: multiple,
       name: name,
+      tabIndex: -1,
       value: bubbleValue
     }, emptyValue !== undefined ? /*#__PURE__*/React__default.createElement("option", {
       value: emptyValue
@@ -16393,7 +16454,7 @@ function Control(props) {
   const ref = React__default.useRef(null);
   React.useEffect(() => {
     // Set value to false only after first render of the control (when it's undefined) after setting the FilterColumn value, because we don't want to change then the value every time filter is opened
-    if (controlRenderer === 'switch' && value === undefined) {
+    if ((controlRenderer === 'switch' || controlRenderer === 'checkbox') && value === undefined) {
       onChange(false);
     }
   }, [controlRenderer]);
@@ -16418,6 +16479,12 @@ function Control(props) {
       checked: Boolean(value),
       onChange: onChange
     }));
+  } else if (controlRenderer === 'checkbox') {
+    return /*#__PURE__*/React__default.createElement(Checkbox, Object.assign({}, attributes, {
+      className: "!m-1.5",
+      checked: Boolean(value),
+      onChange: onChange
+    }));
   } else if ((controlRenderer === 'input' || controlRenderer === undefined) && dataType === 'number') {
     return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, attributes, {
       className: "flex-grow",
@@ -16777,8 +16844,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,
@@ -16811,7 +16876,7 @@ 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)))));
 }
@@ -18314,71 +18379,6 @@ 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
-  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);
-    }
-  }, [tableMeta.editing.isEditing]);
-  // 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(() => {
-    function showUnsavedChangesWarning(event) {
-      if (tableMeta.editing.isEditing && hasChanges) {
-        event.returnValue = true;
-        return true;
-      }
-      return false;
-    }
-    window.addEventListener('beforeunload', showUnsavedChangesWarning);
-    return () => {
-      window.removeEventListener('beforeunload', showUnsavedChangesWarning);
-    };
-  }, [tableMeta.editing.isEditing, hasChanges]);
-  React__default.useEffect(() => {
-    if (completedRowsCount > 0) {
-      resetHighlightedColumnIndexes(table.getState().globalFilter, table, localization);
-    }
-  }, [completedRowsCount]);
-  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();
-        }
-      }
-    };
-    document.addEventListener('click', onClickOutside);
-    return () => document.removeEventListener('click', onClickOutside);
-  }, [saveChanges, tableMeta.editing.isEditing]);
-}
-
 function willRowMove(cell, change, rowIndex, localization) {
   const {
     table
@@ -18459,444 +18459,642 @@ function willRowMoveAfterSorting(cell, change, rowIndex) {
   }
   return ((_resortedRows$index = resortedRows[index]) === null || _resortedRows$index === void 0 ? void 0 : _resortedRows$index.id) !== cell.row.id;
 }
-function animateCreateRow(id) {
-  const templateRow = document.querySelector(`[data-row-id="${id}"]`);
-  if (templateRow) {
-    const firstCell = templateRow.querySelector(':first-child');
-    const checkbox = firstCell === null || firstCell === void 0 ? void 0 : firstCell.querySelector('[data-taco="checkbox"]');
-    firstCell === null || firstCell === void 0 ? void 0 : firstCell.focus();
-    if (checkbox) {
-      setDataFocusAttribute(checkbox);
-    }
-    templateRow.scrollIntoView();
-    const keyframes = [{
-      background: '#b2c7ef'
-    }, {
-      background: '#ebebeb'
-    }];
-    for (const child of templateRow.children) {
-      child.animate(keyframes, {
-        duration: 1000,
-        easing: 'ease-out'
-      });
-    }
+const TEMPORARY_ROW_ID_PREFIX = 'temp-';
+function isTemporaryRow(rowId) {
+  if (rowId === undefined) {
+    return false;
   }
+  return String(rowId).startsWith(TEMPORARY_ROW_ID_PREFIX);
 }
+const shortcut = {
+  key: 'e',
+  meta: true,
+  shift: false
+};
 
-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 ? {
+function useTableEditingListener(table, tableRef, scrollToIndex) {
+  const tableMeta = table.options.meta;
+  const localization = useLocalization();
+  // 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 && lastRowActiveIndexRef.current !== undefined && tableMeta.rowActive.rowActiveIndex !== lastRowActiveIndexRef.current) {
+      lastRowActiveIndexRef.current = tableMeta.rowActive.rowActiveIndex;
+      tableMeta.editing.saveChanges(table);
+    }
+  }, [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(() => {
+    function showUnsavedChangesWarning(event) {
+      if (tableMeta.editing.isEditing && hasChanges) {
+        event.returnValue = true;
+        return true;
+      }
+      return false;
+    }
+    window.addEventListener('beforeunload', showUnsavedChangesWarning);
+    return () => {
+      window.removeEventListener('beforeunload', showUnsavedChangesWarning);
+    };
+  }, [tableMeta.editing.isEditing, hasChanges]);
+  const hasSavedChanges = tableMeta.editing.hasSaved();
+  useLazyEffect(() => {
+    if (hasSavedChanges) {
+      resetHighlightedColumnIndexes(table.getState().globalFilter, table, localization);
+    }
+  }, [hasSavedChanges]);
+  React__default.useEffect(() => {
+    const onClickOutside = event => {
+      if (tableMeta.editing.isEditing) {
+        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);
+  }, [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]);
+  // shortcuts
+  useGlobalKeyDown(tableMeta.editing.isEnabled ? shortcut : undefined, event => {
+    event.preventDefault();
+    tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing, table, scrollToIndex);
+  });
+  useGlobalKeyDown(tableMeta.editing.isEditing ? {
     key: 's',
     meta: true,
     shift: false
   } : undefined, event => {
     event.preventDefault();
-    pendingChangesFns.saveChanges();
+    tableMeta.editing.saveChanges(table);
   });
-  return {
-    isEnabled,
-    isEditing,
-    isDetailedMode,
-    toggleDetailedMode: isEnabled ? toggleDetailedMode : () => undefined,
-    toggleEditing: isEnabled ? toggleEditing : () => undefined,
-    lastFocusedCellIndex,
-    setLastFocusedCellIndex,
-    ...pendingChangesFns
-  };
 }
-function usePendingChanges(isEnabled, handleSave, handleChange, validator) {
-  const saveChanges = function (rowId = undefined) {
+
+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 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;
-                }
-              } 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;
-                });
-              }
-              setRowSaveStatus(rowId, undefined);
+      // 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);
             });
-          }, function () {
-            return _exit;
-          });
-        }
-      }());
+          }
+          // 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;
+                }
+              });
+            }
+          }();
+          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
+              }
+            });
+          }
+          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, shouldRunUpdaters = true) {
     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$errors11;
+        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$errors11 = state.changes.errors[cell.row.id]) === null || _state$changes$errors11 === void 0 ? void 0 : _state$changes$errors11.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' && shouldRunUpdaters) {
+          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
+  // rows
+  const setRowValue = function (rowId, original, value) {
     try {
-      const changes = {
-        [cell.column.id]: change
-      };
-      setPendingChanges(currentChanges => {
-        const nextChanges = createPendingChangesSetter(currentChanges, cell.row, rowIndex, changes, localization);
-        pendingChangesUpdater.syncCellChanges(nextChanges);
-        return nextChanges;
-      });
-      pendingChangesUpdater.runCellUpdates(changes, cell, rowIndex);
-      return Promise.resolve();
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-  const addCreatedRowChangeset = function (row) {
-    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 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 hasRowErrorsSeen(rowId) {
-    var _pendingChanges$rowId6;
-    if (!isEnabled) {
+  function hasTemporaryRowErrors() {
+    var _state$temporaryRows, _state$changes$errors5, _state$changes$errors6, _state$changes$errors7;
+    const newRow = (_state$temporaryRows = state.temporaryRows) === null || _state$temporaryRows === void 0 ? void 0 : _state$temporaryRows[0];
+    if (!newRow) {
       return false;
     }
-    return hasRowErrors(rowId) && !!((_pendingChanges$rowId6 = pendingChanges[rowId]._meta.errors) !== null && _pendingChanges$rowId6 !== void 0 && _pendingChanges$rowId6.shouldShowErrorAlert);
+    const rowId = newRow[rowIdentityAccessor];
+    return !!((_state$changes$errors5 = state.changes.errors[rowId]) !== null && _state$changes$errors5 !== void 0 && _state$changes$errors5.row) || !!Object.keys((_state$changes$errors6 = (_state$changes$errors7 = state.changes.errors[rowId]) === null || _state$changes$errors7 === void 0 ? void 0 : _state$changes$errors7.cells) !== null && _state$changes$errors6 !== void 0 ? _state$changes$errors6 : {}).length;
   }
-  function getRowPendingChange(rowId) {
-    const rowPendingChanges = pendingChanges[rowId];
-    if (rowPendingChanges) {
-      const {
-        _meta,
-        ...pendingChange
-      } = rowPendingChanges;
-      return pendingChange;
-    }
-    return undefined;
+  function getRowStatus(rowId) {
+    return state.changes.status[rowId];
   }
-  function getRowSaveStatus(rowId) {
-    if (!isEnabled) {
-      return false;
-    }
-    return saveStates[rowId];
+  function setRowStatus(rowId, status) {
+    dispatch({
+      type: 'setRowStatus',
+      rowId,
+      payload: {
+        status
+      }
+    });
   }
-  function setRowSaveStatus(rowId, status) {
-    setSaveState(currentStates => {
-      const nextStates = {
-        ...currentStates
-      };
-      if (status) {
-        nextStates[rowId] = status;
-      } else {
-        delete nextStates[rowId];
+  function createRow(data) {
+    const newRowId = `${TEMPORARY_ROW_ID_PREFIX}${uuid.v4()}`;
+    const value = {
+      ...data,
+      [rowIdentityAccessor]: newRowId
+    };
+    dispatch({
+      type: 'createRow',
+      rowId: newRowId,
+      payload: {
+        value
       }
-      return nextStates;
     });
+    return newRowId;
+  }
+  // cells
+  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
+        }
+      });
+    }
+    // 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
+        }
+      });
+    }
   }
-  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 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 hasChanges(rowId) {
-    if (!isEnabled) {
-      return false;
-    }
-    return rowId ? !!pendingChanges[rowId] : !!Object.keys(pendingChanges).length;
+  function getCellError(cell) {
+    var _state$changes$errors8, _state$changes$errors9, _state$changes$errors10;
+    return (_state$changes$errors8 = state.changes.errors) === null || _state$changes$errors8 === void 0 ? void 0 : (_state$changes$errors9 = _state$changes$errors8[cell.row.id]) === null || _state$changes$errors9 === void 0 ? void 0 : (_state$changes$errors10 = _state$changes$errors9.cells) === null || _state$changes$errors10 === void 0 ? void 0 : _state$changes$errors10[cell.column.id];
   }
-  function hasAlertErrors() {
-    if (!isEnabled) {
-      return false;
+  function getErrorsShownInAlert() {
+    const rowsWithErrors = Object.keys(state.changes.errors);
+    if (!rowsWithErrors.length) {
+      return [];
     }
-    return !!getAlertErrors().length;
-  }
-  function getAlertErrors() {
-    return Object.keys(pendingChanges).filter(hasRowErrorsSeen).map(rowId => ({
+    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 getCompletedRowsCount() {
-    return Object.values(saveStates).filter(value => value === 'complete').length;
+  function hasChanges(rowId) {
+    return rowId ? !!state.changes.rows[rowId] : !!Object.keys(state.changes.rows).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,
+    hasTemporaryRowErrors,
+    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, scrollToIndex) {
+    var _tableMeta$rowActive$, _table$getRowModel$ro;
+    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;
-  }
-  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)
-      }
+    const tableMeta = table.options.meta;
+    const index = (_tableMeta$rowActive$ = tableMeta.rowActive.rowActiveIndex) !== null && _tableMeta$rowActive$ !== void 0 ? _tableMeta$rowActive$ : 0;
+    if (tableMeta.rowActive.rowActiveIndex === undefined) {
+      tableMeta.rowActive.setRowActiveIndex(index);
     }
-  };
-  // 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];
+    setEditing(enabled);
+    if (!isTemporaryRow((_table$getRowModel$ro = table.getRowModel().rows[index]) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.id)) {
+      scrollToIndex(index);
     }
   }
-  // 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
   };
 }
 
@@ -18940,7 +19138,6 @@ function RowMoveIndicator(props) {
   if (!show) {
     return null;
   }
-  const className = 'wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap rounded-b-md px-1 py-1 text-xs font-bold z-10';
   const {
     title,
     description
@@ -18949,7 +19146,7 @@ function RowMoveIndicator(props) {
     placement: "bottom",
     title: description.replace('[COLUMN]', columnMeta.header)
   }, /*#__PURE__*/React__default.createElement("span", {
-    className: className
+    "data-row-move-indicator": true
   }, /*#__PURE__*/React__default.createElement(Icon, {
     name: "info",
     className: "-mt-0.5 mr-1 !h-4 !w-4 rounded-full bg-white !p-0 text-blue-500"
@@ -19138,13 +19335,31 @@ 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);
+  const value = cell.getValue();
+  // 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 = nextValue => {
+    if (nextValue !== value) {
+      tableMeta.editing.setCellValue(cell, nextValue);
+      if (hasNonTextControl) {
+        tableMeta.editing.onCellChanged(cell, rowIndex);
+      }
+    }
+  };
   const handleBlur = () => {
     tableMeta.editing.toggleDetailedMode(false);
-    tableMeta.editing.validateCell(cell);
+    tableMeta.editing.onCellChanged(cell, rowIndex, !hasNonTextControl);
   };
   // ensure that blur runs when the cell gets unmounted (when vertically arrow key navigating)
   React__default.useEffect(() => {
@@ -19164,14 +19379,13 @@ 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',
-    value: cell.getValue()
+    type,
+    value
   };
   const cellAttributes = {
     ...getCellAttributes(cell, index, isHighlighted),
@@ -19203,7 +19417,6 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     row,
     rowPendingChanges,
     tabIndex = -1,
-    toggleEditing,
     toggleDetailedMode,
     type = 'input',
     value
@@ -19234,6 +19447,13 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
       ref: controlRef
     }));
   }
+  if (type === 'checkbox') {
+    return /*#__PURE__*/React__default.createElement(Checkbox, Object.assign({}, commonProps, {
+      checked: Boolean(value),
+      onChange: onChange,
+      ref: controlRef
+    }));
+  }
   const handleInputKeyDown = event => {
     const target = event.target;
     if (target.readOnly) {
@@ -19262,8 +19482,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);
@@ -19273,8 +19493,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;
     }
@@ -19373,12 +19591,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;
@@ -19400,7 +19643,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, {
@@ -19412,42 +19654,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,
@@ -19457,18 +19670,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 = window.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',
@@ -19479,7 +19681,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,
@@ -19520,15 +19722,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 = {
@@ -19536,29 +19769,50 @@ 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.temporaryRows.length) {
+      var _props$data;
+      return ((_props$data = props.data) !== null && _props$data !== void 0 ? _props$data : []).concat(editing.temporaryRows);
+    }
+    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, {
-      hasChanges: editing.hasChanges(rowId),
-      hasErrors: editing.hasRowErrors(rowId),
-      onClear: () => editing.resetChanges(rowId),
-      onEditingSave: () => editing.saveChanges(rowId),
-      onExit: () => editing.toggleEditing(false),
-      isLastRow: !creationEnabled && table.meta.rowActive.rowActiveIndex === table.meta.length - 1
-    }))] : props.rowActions
+    // Display EditingActionMenu instead of row actions while editing
+    rowActions: editing.isEditing ? [(_, rowId, table) => {
+      const tableMeta = table.options.meta;
+      return /*#__PURE__*/React__default.createElement(EditingActionMenu, {
+        hasChanges: editing.hasChanges(rowId),
+        hasErrors: editing.hasRowErrors(rowId),
+        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 && tableMeta.rowActive.rowActiveIndex === tableMeta.length - 1
+      });
+    }] : props.rowActions
   };
   const meta = {
     editing
   };
-  const table = useTable(extendedProps, ref, RENDERERS$1, meta);
+  const options = {
+    virtualiserPaddingEndOffset: props.enableEditing && props.onEditingCreate ? editing.hasTemporaryRowErrors() ? 1.4 : 1 : 0
+  };
+  const table = useTable(extendedProps, ref, RENDERERS$1, meta, options);
   // listeners
-  useTableEditingListener(table.instance, table.ref);
+  useTableEditingListener(table.instance, table.ref, table.renderer.scrollToIndex);
   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.renderer.scrollToIndex);
     }
   }, [table.ref.current]);
   return table;
@@ -19577,7 +19831,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, {
@@ -19596,38 +19850,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(', ');
@@ -19683,127 +19942,212 @@ function FilterResetDialog(props) {
   }, texts.table3.editing.validation.resetFiltersDialog.confirm)))));
 }
 
-function CreateNewRowButton(props) {
+function Editing(props) {
   const {
-    onEditingCreate,
     scrollToIndex,
-    table,
-    tableMeta
+    table
   } = 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 ref = React__default.useRef(null);
+  const tableMeta = table.options.meta;
+  const handleChange = enabled => {
+    tableMeta.editing.toggleEditing(enabled, table, scrollToIndex);
   };
-  const handleCreate = function () {
+  const tooltip = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table3.editing.buttons.edit.tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
+    className: "ml-2",
+    keys: shortcut
+  }));
+  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,
+    scrollToIndex,
+    table,
+    tableMeta,
+    tableRef
+  } = 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 createRow = function (row) {
     try {
-      if (!onEditingCreate) {
+      if (!handleEditingCreate || isDisabled) {
         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(tableMeta.editing.saveChanges(table)).then(function (saved) {
+        if (!saved) {
+          return;
         }
-      }();
-      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+        const changeset = row !== null && row !== void 0 ? row : handleEditingCreate();
+        try {
+          if (changeset) {
+            const rowId = tableMeta.editing.createRow(changeset);
+            table.getRow(rowId).pin('bottom');
+            // set the active row to the new row before toggling editing on
+            const nextRowIndex = temporaryRows.length ? tableMeta.length + 1 : tableMeta.length;
+            tableMeta.rowActive.setRowActiveIndex(nextRowIndex);
+            tableMeta.editing.toggleEditing(true, table, scrollToIndex);
+            tableMeta.editing.setLastFocusedCellIndex(0);
+          }
+        } catch (error) {
+          console.error(error);
+        }
+      });
     } catch (e) {
       return Promise.reject(e);
     }
   };
+  // allow programmatic access to creating rows from outside the table
   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));
-      }
+    if (tableRef.current) {
+      tableRef.current.instance.createRow = createRow;
     }
-  }, [rowCreated]);
+  }, [tableRef.current, createRow]);
+  const handleCreate = function () {
+    return createRow();
+  };
+  const shortcut = {
+    key: 'Enter',
+    shift: true
+  };
+  let tooltip;
+  if (isSaving) {
+    tooltip = texts.table3.editing.buttons.create.saving;
+  } else if (isDisabled) {
+    tooltip = texts.table3.editing.buttons.create.disabled;
+  } else {
+    tooltip = /*#__PURE__*/React__default.createElement(Shortcut, {
+      keys: shortcut
+    });
+  }
+  const isScrolled = tableRef.current ? tableRef.current.scrollHeight > tableRef.current.clientHeight : false;
+  const className = cn('group/row border-grey-300 !sticky z-[21]', {
+    'bottom-10': tableMeta.footer.isEnabled,
+    'bottom-0': !tableMeta.footer.isEnabled,
+    'border-t-2': isScrolled,
+    'border-b': !isScrolled
+  });
   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"
+    "data-row-create": true,
+    className: className,
+    tabIndex: -1
   }, /*#__PURE__*/React__default.createElement("td", {
-    className: "!border-t-0 !bg-transparent"
+    className: "!bg-grey-50 col-span-full !border-b-0 !px-1"
   }, /*#__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)));
+    appearance: "transparent",
+    className: "group-hover:bg-grey-200 sticky left-[4px]",
+    disabled: isDisabled,
+    onClick: handleCreate,
+    ref: buttonRef,
+    shortcut: shortcut,
+    tooltip: tooltip
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: "circle-plus"
+  }), texts.table3.editing.buttons.create.label)));
 }
 
-function Editing(props) {
+function TemporaryRow(props) {
   const {
-    scrollToIndex,
-    table
+    createRowButtonRef,
+    table,
+    tableMeta,
+    tableRef
   } = props;
-  const {
-    texts
-  } = useLocalization();
-  const ref = React__default.useRef(null);
-  const tableMeta = table.options.meta;
-  const shortcut = {
-    key: 'e',
-    meta: true,
-    shift: 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 tooltip = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table3.editing.buttons.edit.tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
-    className: "ml-2",
-    keys: shortcut
-  }));
-  useGlobalKeyDown(shortcut, event => {
-    var _ref$current;
-    event.preventDefault();
-    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.click();
-  });
-  const handleChange = enabled => {
-    tableMeta.editing.toggleEditing(enabled);
-    requestAnimationFrame(() => {
-      var _tableMeta$rowActive$;
-      return scrollToIndex((_tableMeta$rowActive$ = tableMeta.rowActive.rowActiveIndex) !== null && _tableMeta$rowActive$ !== void 0 ? _tableMeta$rowActive$ : 0);
-    });
+  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();
+      }
+    }
   };
-  return /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: tooltip
-  }, /*#__PURE__*/React__default.createElement(ModeSwitch, {
-    checked: tableMeta.editing.isEditing,
-    onChange: handleChange,
-    ref: ref
-  }));
+  const isScrolled = tableRef.current ? tableRef.current.scrollHeight > tableRef.current.clientHeight : false;
+  const className = cn('group/row border-grey-300 !sticky z-[22]', {
+    'bottom-[calc(5rem_+_3px)] data-[row-editing-move]:bottom-[calc(5rem_+_2px)]': tableMeta.footer.isEnabled,
+    'bottom-[calc(2.5rem_+_3px)] data-[row-editing-move]:bottom-[calc(2.5rem_+_2px)]': !tableMeta.footer.isEnabled,
+    'border-t-2 shadow-[0px_-5px_20px_0px_rgba(0,0,0,0.1)] [&>td]:!border-b-0': 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,
+    // Row actions should only be hidden on temporary rows when editing is turned off
+    hideRowActions: !tableMeta.editing.isEditing
+  }))));
 }
 
 function Column$3(_) {
@@ -19821,8 +20165,8 @@ 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.getErrorsShownInAlert().length;
+  const hasCreateWorkflow = table3.meta.editing.isEnabled && props.onEditingCreate;
   return /*#__PURE__*/React__default.createElement(Table, null, /*#__PURE__*/React__default.createElement(Table.Toolbar, {
     table: table3
   }, table3.meta.editing.isEnabled ? (/*#__PURE__*/React__default.createElement(Editing, {
@@ -19836,12 +20180,19 @@ const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref)
   })) : null, /*#__PURE__*/React__default.createElement(Table.Grid, Object.assign({}, gridAttributes, {
     "data-taco": "table3",
     table: table3
-  }), showCreateRowButton && (/*#__PURE__*/React__default.createElement(CreateNewRowButton, {
+  }), hasCreateWorkflow ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TemporaryRow, {
+    createRowButtonRef: table3.meta.editing.createRowButtonRef,
     table: table3.instance,
     tableMeta: table3.meta,
+    tableRef: table3.ref
+  }), /*#__PURE__*/React__default.createElement(CreateNewRow, {
+    buttonRef: table3.meta.editing.createRowButtonRef,
     onEditingCreate: props.onEditingCreate,
-    scrollToIndex: table3.renderer.scrollToIndex
-  }))));
+    scrollToIndex: table3.renderer.scrollToIndex,
+    table: table3.instance,
+    tableMeta: table3.meta,
+    tableRef: table3.ref
+  }))) : null));
 });
 const Table3 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   const stringifiedChildren = String(props.children);