@economic/taco 2.45.0-create.3 → 2.45.0

package/dist/taco.cjs.development.js

@@ -43,8 +43,7 @@ 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 omit = _interopDefault(require('lodash/omit'));
-var setWith = _interopDefault(require('lodash/setWith'));
+var lodash = require('lodash');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var Joyride = require('react-joyride');
 var Joyride__default = _interopDefault(Joyride);
@@ -3945,6 +3944,11 @@ const Title = /*#__PURE__*/React.forwardRef(function AlertDialogTitle(props, ref
     className: "mr-2"
   })) : undefined, props.children);
 });
+const Description = /*#__PURE__*/React.forwardRef(function AlertDialogDescription(props, ref) {
+  return /*#__PURE__*/React.createElement(AlertDialogPrimitive.Description, Object.assign({
+    ref: ref
+  }, props));
+});
 const Content = /*#__PURE__*/React.forwardRef(function AlertDialogContent(props, ref) {
   const className = cn('p-6', getDialogPositionClassnames(), getDialogStylingClassnames(), getDialogSizeClassnames('dialog'));
   return /*#__PURE__*/React.createElement(AlertDialogPrimitive.Portal, null, /*#__PURE__*/React.createElement(AlertDialogPrimitive.Overlay, {
@@ -3979,6 +3983,7 @@ const AlertDialog = /*#__PURE__*/React.forwardRef(function AlertDialog(props, re
 });
 AlertDialog.Trigger = Trigger;
 AlertDialog.Content = Content;
+AlertDialog.Description = Description;
 AlertDialog.Title = Title;
 AlertDialog.Cancel = Cancel;
 AlertDialog.Action = Action;
@@ -4162,7 +4167,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]):not([tabindex="-1"])', 'input:not([disabled]):not([type=hidden]):not([tabindex="-1"])', 'select:not([disabled]):not([tabindex="-1"])', 'textarea:not([disabled]):not([tabindex="-1"])', 'button:not([disabled]):not([tabindex="-1"])', 'a[href]', 'area[href]', 'summary', 'iframe', 'object', 'embed', 'audio[controls]', 'video[controls]', '[contenteditable]', 'details:not([disabled]):not([tabindex="-1"])', 'summary:not(:disabled):not([tabindex="-1"])'];
 const hasFocusableElement = element => {
   if (!element) {
     return null;
@@ -4188,13 +4193,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);
+    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')) {
@@ -4206,7 +4218,7 @@ const getOverlaySelector = element => {
       return undefined;
   }
 };
-function isElementTriggeredFromContainer(element, container) {
+function isElementInsideOrTriggeredFromContainer(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) {
@@ -4216,14 +4228,11 @@ function isElementTriggeredFromContainer(element, container) {
     const elementInDocument = document.querySelector(selector);
     // if the element does exist, see if it is itself connected to somethng that was triggered from the container
     if (elementInDocument) {
-      return isElementTriggeredFromContainer(elementInDocument, container);
+      return isElementInsideOrTriggeredFromContainer(elementInDocument, container);
     }
     return false;
   }
-  return false;
-}
-function isElementInsideOrTriggeredFromContainer(element, container) {
-  return isElementTriggeredFromContainer(element, container) || !!(container !== null && container !== void 0 && container.contains(element));
+  return !!(container !== null && container !== void 0 && container.contains(element));
 }
 function isElementInsideOverlay(element) {
   return !!(element !== null && element !== void 0 && element.closest('[role=dialog],[role=menu]'));
@@ -4717,9 +4726,7 @@ const defaultLocalisationTexts = {
           tooltip: 'Edit table'
         },
         create: {
-          label: 'New',
-          disabled: 'Existing new row must be saved',
-          saving: 'Saving...'
+          label: 'New'
         }
       },
       clearChangesConfirmationDialog: {
@@ -4741,8 +4748,8 @@ const defaultLocalisationTexts = {
       },
       validation: {
         alert: {
-          titleOne: '[COUNT] unsaved row:',
-          titlePlural: '[COUNT] unsaved rows:',
+          titleOne: '[COUNT] unsaved entry:',
+          titlePlural: '[COUNT] unsaved entries:',
           messageOne: "[COLUMN] [ROW] is incomplete and hasn't been saved.",
           messagePlural: "[COLUMN] [ROW] are incomplete and haven't been saved.",
           messageRow: 'Row',
@@ -6684,6 +6691,7 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
   return /*#__PURE__*/React.createElement(DialogPrimitive.Portal, null, /*#__PURE__*/React.createElement(DialogPrimitive.Overlay, {
     asChild: true
   }, /*#__PURE__*/React.createElement(Backdrop, null, /*#__PURE__*/React.createElement(DialogPrimitive.Content, Object.assign({}, props, {
+    "aria-describedby": undefined,
     className: className,
     onEscapeKeyDown: handleEscapeKeyDown,
     onInteractOutside: handleInteractOutside,
@@ -7211,6 +7219,7 @@ const DrawerContent = /*#__PURE__*/React__default.forwardRef(function Content(pr
   return focusTrap ? (/*#__PURE__*/React__default.createElement(DialogPrimitive.Content, Object.assign({
     forceMount: true
   }, otherProps, {
+    "aria-describedby": undefined,
     className: contentClassName,
     onEscapeKeyDown: handleEscapeKeyDown,
     onInteractOutside: variant === 'overlay' ? undefined : event => event.preventDefault(),
@@ -7638,7 +7647,7 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
     onCheckedChange: onChange,
     ref: ref
   }), /*#__PURE__*/React.createElement(PrimitiveSwitch.Thumb, {
-    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]"
+    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]"
   }));
   if (label) {
     const labelContainerClassName = cn('flex self-start cursor-pointer', {
@@ -8698,10 +8707,10 @@ const ModeSwitch = /*#__PURE__*/React.forwardRef(function ModeSwitch(props, ref)
     onCheckedChange: onChange,
     ref: ref
   }), /*#__PURE__*/React.createElement(PrimitiveSwitch.Thumb, {
-    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%]"
+    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%]"
   }, /*#__PURE__*/React.createElement(Icon, {
     name: "edit-simple",
-    className: "pointer-events-none !h-5 !w-5"
+    className: "!h-5 !w-5"
   })));
 });
 ModeSwitch.displayName = 'ModeSwitch';
@@ -10404,15 +10413,6 @@ function configureReactTableOptions(options, props, localization) {
   // We don't want to expose internal Tanstack Table row, so we need to wrap enableRowSelection callback into additional function,
   // which receives the React Table Row object and passes row.original to a callback.
   const reactTableEnableRowSelection = typeof options.enableRowSelection === 'function' ? row => options.enableRowSelection(row.original) : options.enableRowSelection;
-  let getRowId;
-  if (props.rowIdentityAccessor) {
-    getRowId = (originalRow, index) => {
-      if (originalRow) {
-        return originalRow[props.rowIdentityAccessor];
-      }
-      return String(index);
-    };
-  }
   const tableOptions = {
     defaultColumn: {
       enableColumnFilter: options.enableFiltering || true,
@@ -10431,13 +10431,11 @@ 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) {
@@ -10981,13 +10979,13 @@ function useTableSearch(isEnabled = false, defaultEnableGlobalFilter = false) {
 }
 
 // A type of promise-like that resolves synchronously and supports only one observer
-var _Pact = /*#__PURE__*/function () {
+const _Pact = /*#__PURE__*/function () {
   function _Pact() {}
   _Pact.prototype.then = function (onFulfilled, onRejected) {
-    var result = new _Pact();
-    var state = this.s;
+    const result = new _Pact();
+    const state = this.s;
     if (state) {
-      var callback = state & 1 ? onFulfilled : onRejected;
+      const callback = state & 1 ? onFulfilled : onRejected;
       if (callback) {
         try {
           _settle(result, 1, callback(this.v));
@@ -11001,7 +10999,7 @@ var _Pact = /*#__PURE__*/function () {
     }
     this.o = function (_this) {
       try {
-        var value = _this.v;
+        const value = _this.v;
         if (_this.s & 1) {
           _settle(result, 1, onFulfilled ? onFulfilled(value) : value);
         } else if (onRejected) {
@@ -11038,7 +11036,7 @@ function _settle(pact, state, value) {
     }
     pact.s = state;
     pact.v = value;
-    var observer = pact.o;
+    const observer = pact.o;
     if (observer) {
       observer(pact);
     }
@@ -11078,13 +11076,17 @@ function _forTo(array, body, check) {
   _cycle();
   return pact;
 }
-var _iteratorSymbol = /*#__PURE__*/typeof Symbol !== "undefined" ? Symbol.iterator || (Symbol.iterator = /*#__PURE__*/Symbol("Symbol.iterator")) : "@@iterator";
+const _iteratorSymbol = /*#__PURE__*/typeof Symbol !== "undefined" ? Symbol.iterator || (Symbol.iterator = /*#__PURE__*/Symbol("Symbol.iterator")) : "@@iterator";
 
 // Asynchronously iterate through an object's values
 // Uses for...of if the runtime supports it, otherwise iterates until length on a copy
 function _forOf(target, body, check) {
   if (typeof target[_iteratorSymbol] === "function") {
-    var _cycle = function _cycle(result) {
+    var iterator = target[_iteratorSymbol](),
+      step,
+      pact,
+      reject;
+    function _cycle(result) {
       try {
         while (!(step = iterator.next()).done && (!check || !check())) {
           result = body(step.value);
@@ -11105,17 +11107,13 @@ function _forOf(target, body, check) {
       } catch (e) {
         _settle(pact || (pact = new _Pact()), 2, e);
       }
-    };
-    var iterator = target[_iteratorSymbol](),
-      step,
-      pact,
-      reject;
+    }
     _cycle();
-    if (iterator["return"]) {
-      var _fixup = function _fixup(value) {
+    if (iterator.return) {
+      var _fixup = function (value) {
         try {
           if (!step.done) {
-            iterator["return"]();
+            iterator.return();
           }
         } catch (e) {}
         return value;
@@ -11142,7 +11140,7 @@ function _forOf(target, body, check) {
     return body(values[i]);
   }, check);
 }
-var _asyncIteratorSymbol = /*#__PURE__*/typeof Symbol !== "undefined" ? Symbol.asyncIterator || (Symbol.asyncIterator = /*#__PURE__*/Symbol("Symbol.asyncIterator")) : "@@asyncIterator";
+const _asyncIteratorSymbol = /*#__PURE__*/typeof Symbol !== "undefined" ? Symbol.asyncIterator || (Symbol.asyncIterator = /*#__PURE__*/Symbol("Symbol.asyncIterator")) : "@@asyncIterator";
 
 // Asynchronously call a function and send errors to recovery continuation
 function _catch(body, recover) {
@@ -11770,7 +11768,7 @@ function useTableManager(props, meta, internalColumns) {
       rowDrag,
       rowDrop: rowDrop,
       rowExpansion: rowExpansion,
-      rowIdentityAccessor: props.rowIdentityAccessor,
+      rowIdentityColumnId: props.rowIdentityColumnId,
       rowGoto,
       rowGroups: rowGroups,
       rowHeight,
@@ -12138,7 +12136,7 @@ function Row(props) {
 function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
   var _table$getState$group, _virtualItems$padding, _virtualItems$padding2, _virtualItems$padding3, _ref, _virtualItems;
   const tableMeta = table.options.meta;
-  const rows = table.getCenterRows();
+  const rows = table.getRowModel().rows;
   const isTableRowGrouped = !!((_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length);
   // expanded rows
   const {
@@ -12317,14 +12315,12 @@ function Actions$1(props) {
     actionsLength,
     data,
     isActiveRow,
-    rowId,
-    table
+    rowId
   } = props;
   const {
     texts
   } = useLocalization();
-  // 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 visibleActions = actions.map(action => action(data, rowId)).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');
@@ -12380,8 +12376,7 @@ const Cell = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
       actionsLength: actionsLength,
       data: row.original,
       isActiveRow: isActiveRow,
-      rowId: row.id,
-      table: table
+      rowId: row.id
     });
   }
   return null;
@@ -12738,10 +12733,7 @@ function GroupedCell(props) {
     index,
     isHighlighted
   } = props;
-  const {
-    table
-  } = cell.getContext();
-  const tableMeta = table.options.meta;
+  const tableMeta = cell.getContext().table.options.meta;
   const columnMeta = cell.column.columnDef.meta;
   const attributes = getCellAttributes(cell, index, isHighlighted);
   const {
@@ -12759,8 +12751,7 @@ function GroupedCell(props) {
     colSpan: colSpan,
     rowActions: tableMeta.rowGroups.rowActionsForGroup,
     rowId: cell.row.id,
-    subRows: subRows,
-    table: table
+    subRows: subRows
   }), content);
 }
 const MemoedGroupedCell = /*#__PURE__*/React__default.memo(function MemoedGroupedCell(props) {
@@ -12772,7 +12763,6 @@ const MemoedGroupedCell = /*#__PURE__*/React__default.memo(function MemoedGroupe
     rowActions,
     rowId,
     subRows,
-    table,
     ...attributes
   } = props;
   return /*#__PURE__*/React__default.createElement("td", Object.assign({}, attributes, {
@@ -12787,8 +12777,7 @@ const MemoedGroupedCell = /*#__PURE__*/React__default.memo(function MemoedGroupe
     actionsLength: 4,
     data: subRows,
     isActiveRow: true,
-    rowId: rowId,
-    table: table
+    rowId: rowId
   })) : null);
 });
 
@@ -12928,7 +12917,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', otherAttributes.className, {
+  const className = cn('group/row', {
     'hover:cursor-grab': tableMeta.rowDrag.isEnabled && typeof attributes.onClick !== 'function',
     'hover:cursor-pointer': typeof attributes.onClick === 'function'
   });
@@ -13722,7 +13711,7 @@ function Summary(props) {
 
 function Foot(props) {
   const nonGroupedHeaders = props.table.getFooterGroups()[0].headers.filter(header => !header.column.getIsGrouped());
-  return /*#__PURE__*/React__default.createElement("tfoot", null, props.children, /*#__PURE__*/React__default.createElement("tr", null, nonGroupedHeaders.map((header, index) => (/*#__PURE__*/React__default.createElement(Footer$3, {
+  return /*#__PURE__*/React__default.createElement("tfoot", null, /*#__PURE__*/React__default.createElement("tr", null, nonGroupedHeaders.map((header, index) => (/*#__PURE__*/React__default.createElement(Footer$3, {
     key: header.id,
     header: header,
     index: index
@@ -14672,10 +14661,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);
     }
@@ -15130,7 +15115,9 @@ const Button$3 = /*#__PURE__*/React__default.forwardRef(function Select2TriggerB
   var _props$className;
   const {
     children,
+    onBlur,
     onClick,
+    onFocus,
     tabIndex = 0,
     ...otherProps
   } = props;
@@ -15161,6 +15148,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) {
@@ -15170,6 +15169,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,
@@ -15177,6 +15179,7 @@ const Button$3 = /*#__PURE__*/React__default.forwardRef(function Select2TriggerB
     className: className,
     disabled: disabled,
     onClick: handleClick,
+    onBlur: handleBlur,
     onFocus: handleFocus,
     ref: ref,
     role: "combobox",
@@ -15439,17 +15442,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) {
@@ -15462,11 +15460,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();
@@ -15481,7 +15474,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,
@@ -15704,7 +15697,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
@@ -15792,46 +15784,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));
@@ -15880,18 +15858,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", {
@@ -15901,8 +15875,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",
@@ -15972,6 +15945,7 @@ const ControlledHiddenField = props => {
       key: String(bubbleValue),
       multiple: multiple,
       name: name,
+      tabIndex: -1,
       value: bubbleValue
     }, emptyValue !== undefined ? /*#__PURE__*/React__default.createElement("option", {
       value: emptyValue
@@ -16422,7 +16396,7 @@ function Control(props) {
   const dataType = column === null || column === void 0 ? void 0 : (_column$columnDef$met3 = column.columnDef.meta) === null || _column$columnDef$met3 === void 0 ? void 0 : _column$columnDef$met3.dataType;
   React.useEffect(() => {
     // Set value to false only after first render of the control (when it's undefined) after setting the FilterColumn value, because we don't want to change then the value every time filter is opened
-    if (controlRenderer === 'switch' && value === undefined) {
+    if ((controlRenderer === 'switch' || controlRenderer === 'checkbox') && value === undefined) {
       onChange(false);
     }
   }, [controlRenderer]);
@@ -16446,6 +16420,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",
@@ -16798,7 +16778,6 @@ function TableGrid(props) {
   var _table$state$grouping;
   const {
     enableHorizontalArrowKeyNavigation,
-    rowsForFooter,
     table,
     ...attributes
   } = props;
@@ -16806,6 +16785,8 @@ 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,
@@ -16838,9 +16819,9 @@ function TableGrid(props) {
       ...table.renderer.style,
       height: table.renderer.style.height + ROW_HEIGHT_ESTIMATES[table.meta.rowHeight.height]
     } : table.renderer.style
-  }, table.renderer.rows, props.children), table.meta.footer.isEnabled ? /*#__PURE__*/React__default.createElement(Foot, {
+  }, table.renderer.rows, searchNotApplied && filtersNotApplied && props.children), table.meta.footer.isEnabled ? /*#__PURE__*/React__default.createElement(Foot, {
     table: table.instance
-  }, rowsForFooter) : null)))));
+  }) : null)))));
 }
 
 function Column$1(_) {
@@ -18343,16 +18324,33 @@ const useTableRowCreation = (data, tableRef) => {
 
 function useTableEditingListener(table, tableRef) {
   const tableMeta = table.options.meta;
+  const completedRowsCount = tableMeta.editing.getCompletedRowsCount();
   const localization = useLocalization();
+  const saveChanges = () => {
+    requestAnimationFrame(() => {
+      tableMeta.editing.saveChanges();
+    });
+  };
   // save when the row changes
-  // store the last row active index, otherwise everytime tableMeta.editing.saveChanges changes the hook runs again
-  const lastRowActiveIndexRef = React__default.useRef(tableMeta.rowActive.rowActiveIndex);
   useLazyEffect(() => {
-    if (tableMeta.editing.isEditing && tableMeta.rowActive.rowActiveIndex !== lastRowActiveIndexRef.current) {
-      lastRowActiveIndexRef.current = tableMeta.rowActive.rowActiveIndex;
-      tableMeta.editing.saveChanges(table);
+    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.rowActive.rowActiveIndex, tableMeta.editing.saveChanges]);
+  }, [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(() => {
@@ -18368,46 +18366,25 @@ function useTableEditingListener(table, tableRef) {
       window.removeEventListener('beforeunload', showUnsavedChangesWarning);
     };
   }, [tableMeta.editing.isEditing, hasChanges]);
-  const hasSavedChanges = tableMeta.editing.hasSaved();
-  useLazyEffect(() => {
-    if (hasSavedChanges) {
+  React__default.useEffect(() => {
+    if (completedRowsCount > 0) {
       resetHighlightedColumnIndexes(table.getState().globalFilter, table, localization);
     }
-  }, [hasSavedChanges]);
+  }, [completedRowsCount]);
   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);
+        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);
-  }, [tableMeta.editing.isEditing, tableMeta.editing.saveChanges]);
-  const rows = table.getRowModel().rows;
-  // make sure pending changes are removed for rows that no longer exist
-  useLazyEffect(() => {
-    const pendingChanges = tableMeta.editing.getErrorsShownInAlert();
-    pendingChanges.forEach(pendingChange => {
-      try {
-        table.getRow(pendingChange.rowId);
-      } catch {
-        tableMeta.editing.discardChanges(pendingChange.rowId, table);
-      }
-    });
-  }, [rows.length]);
-  useGlobalKeyDown(tableMeta.editing.isEditing ? {
-    key: 's',
-    meta: true,
-    shift: false
-  } : undefined, event => {
-    event.preventDefault();
-    tableMeta.editing.saveChanges(table);
-  });
+  }, [saveChanges, tableMeta.editing.isEditing]);
 }
 
 function willRowMove(cell, change, rowIndex, localization) {
@@ -18489,539 +18466,444 @@ function willRowMoveAfterSorting(cell, change, rowIndex) {
   }
   return ((_resortedRows$index = resortedRows[index]) === null || _resortedRows$index === void 0 ? void 0 : _resortedRows$index.id) !== cell.row.id;
 }
-
-const TEMPORARY_ROW_ID_PREFIX = 'temp-';
-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 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'
+      });
+    }
   }
 }
-function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, validator) {
-  const saveChanges = function (table, rowId = undefined) {
+
+function useTableEditing(isEnabled = false, handleSave, handleChange, validator) {
+  // used to switch the table into editing mode
+  const [isEditing, toggleEditing] = React__default.useState(false);
+  // used to switch the editing between "detailed" mode
+  const [isDetailedMode, toggleDetailedMode] = React__default.useState(false);
+  // store the last focused cell, so that up/down arrow key navigation remains in the same column
+  const [lastFocusedCellIndex, setLastFocusedCellIndex] = useLastFocusedCellIndex();
+  // store pending changes for each row
+  // changes are saved as soon as the active row changes, so in most cases this will only contain the active row's changes
+  // but not always - if validation or server requests fail when saving, those rows remain until the failure is resolved
+  const pendingChangesFns = usePendingChanges(isEnabled, handleSave, handleChange, validator);
+  useGlobalKeyDown(isEnabled && isEditing ? {
+    key: 's',
+    meta: true,
+    shift: false
+  } : undefined, event => {
+    event.preventDefault();
+    pendingChangesFns.saveChanges();
+  });
+  return {
+    isEnabled,
+    isEditing,
+    isDetailedMode,
+    toggleDetailedMode: isEnabled ? toggleDetailedMode : () => undefined,
+    toggleEditing: isEnabled ? toggleEditing : () => undefined,
+    lastFocusedCellIndex,
+    setLastFocusedCellIndex,
+    ...pendingChangesFns
+  };
+}
+function usePendingChanges(isEnabled, handleSave, handleChange, validator) {
+  const saveChanges = function (rowId = undefined) {
     try {
       let _exit = false;
       if (!handleSave) {
         console.warn('Tried to save, but Table has no onEditingSave handler');
-        return Promise.resolve(false);
+        return Promise.resolve();
       }
-      // 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 () {
-          var _changeSet$rowIdentit;
-          function _temp8(_result) {
-            return _exit ? _result : Promise.resolve(handleSave(changeSet)).then(function () {
-              // cleanup changes, we don't need them after saving
-              discardChanges(rowId, table);
-              // show the saved status, then remove it after a delay
-              setRowStatus(rowId, 'saved');
-              setTimeout(() => {
-                setRowStatus(rowId, undefined);
-              }, DELAY_BEFORE_REMOVING_SAVE_STATUS);
-            });
-          }
-          // don't try to save if - already saving, or there are known errors
-          if (status === 'saving' || status === 'errored') {
-            return;
-          }
-          setRowStatus(rowId, 'saving');
-          const changeSet = {
-            ...state.changes.originals[rowId],
-            ...changes[rowId]
-          };
-          // if we had to create a temporary id, delete it first - it's our data, not theirs
-          if ((_changeSet$rowIdentit = changeSet[rowIdentityAccessor]) !== null && _changeSet$rowIdentit !== void 0 && _changeSet$rowIdentit.startsWith(TEMPORARY_ROW_ID_PREFIX)) {
-            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;
+      // 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 _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
+              }();
+              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);
             });
-          }
-          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);
+          }, function () {
+            return _exit;
+          });
+        }
+      }());
     } catch (e) {
       return Promise.reject(e);
     }
   };
-  const onCellChanged = function (cell, rowIndex) {
+  const validateCell = function (cell) {
     try {
-      function _temp6() {
-        var _state$changes$errors8;
-        function _temp4() {
-          // only set errors and move reasons for the cells we're currently acting on
-          // why? because the UX is not good if we set them for cells the user hasn't touched yet
-          const cellsToActOn = [cell.column.id, ...Object.keys(updatesForOtherCells)];
-          const allCells = cell.row._getAllCellsByColumnId();
-          cellsToActOn.forEach(accessor => {
-            if (validationErrors[accessor]) {
-              nextCellErrors[accessor] = validationErrors[accessor];
-              // don't show move indicator for cells with errors, they aren't valid and can't be saved
-              delete nextMoveReasons[accessor];
-            } else {
-              var _allCells$accessor;
-              // there isn't any error in this run, remove any error set in state
-              delete nextCellErrors[accessor];
-              if ((_allCells$accessor = allCells[accessor]) !== null && _allCells$accessor !== void 0 && _allCells$accessor.column.getIsSorted()) {
-                // run row move determination
-                const reason = willRowMove(cell, nextChanges[accessor], rowIndex, localization);
-                // if the row will move based on this change save why, otherwise delete any existing state
-                if (reason) {
-                  nextMoveReasons[accessor] = reason;
-                } else {
-                  delete nextMoveReasons[accessor];
-                }
-              }
-            }
-          });
-          dispatch({
-            type: 'updateRow',
-            rowId: cell.row.id,
-            payload: {
-              cellErrors: nextCellErrors,
-              moveReasons: nextMoveReasons,
-              value: nextChanges
-            }
-          });
-        }
-        // create a projection of the next state, so we can act against it
-        const nextChanges = {
-          ...state.changes.rows[cell.row.id],
-          ...updatesForOtherCells
-        };
-        const nextMoveReasons = {
-          ...state.changes.moveReasons[cell.row.id]
-        };
-        const nextCellErrors = {
-          ...((_state$changes$errors8 = state.changes.errors[cell.row.id]) === null || _state$changes$errors8 === void 0 ? void 0 : _state$changes$errors8.cells)
-        };
-        // run validation
-        let validationErrors = {};
-        const _temp3 = function () {
-          if (validator) {
-            const nextRowValue = {
-              ...state.changes.originals[cell.row.id],
-              ...changes,
-              ...updatesForOtherCells
-            };
-            return Promise.resolve(validator(nextRowValue)).then(function (_validator2) {
-              validationErrors = _validator2 !== null && _validator2 !== void 0 ? _validator2 : {};
-            });
-          }
-        }();
-        return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
-      }
-      const changes = state.changes.rows[cell.row.id];
-      if (!changes) {
+      if (!validator || !isEnabled) {
         return Promise.resolve();
       }
-      let updatesForOtherCells = {};
-      // run the updater handler if there is one, to see if there are any other cells to update
-      const _temp5 = function () {
-        if (typeof handleChange === 'function') {
-          const previousRowValue = {
-            ...state.changes.originals[cell.row.id]
-          };
-          const nextRowValue = {
-            ...state.changes.originals[cell.row.id],
-            ...changes
-          };
-          return Promise.resolve(handleChange(cell.column.id, changes[cell.column.id], nextRowValue, previousRowValue)).then(function (_handleChange) {
-            updatesForOtherCells = _handleChange !== null && _handleChange !== void 0 ? _handleChange : {};
+      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
+                }
+              };
+              return nextChanges;
+            });
           });
         }
       }();
-      return Promise.resolve(_temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5));
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
     } catch (e) {
       return Promise.reject(e);
     }
-  }; // general
-  const createRow = function (data) {
+  };
+  const setCellValue = function (cell, change, rowIndex) {
     try {
-      const newRowId = `${TEMPORARY_ROW_ID_PREFIX}${uuid.v4()}`;
-      const value = {
-        ...data,
-        [rowIdentityAccessor]: newRowId
+      const changes = {
+        [cell.column.id]: change
       };
-      dispatch({
-        type: 'createRow',
-        rowId: newRowId,
-        payload: {
-          value
-        }
+      setPendingChanges(currentChanges => {
+        const nextChanges = createPendingChangesSetter(currentChanges, cell.row, rowIndex, changes, localization);
+        pendingChangesUpdater.syncCellChanges(nextChanges);
+        return nextChanges;
       });
-      return Promise.resolve(newRowId);
+      pendingChangesUpdater.runCellUpdates(changes, cell, rowIndex);
+      return Promise.resolve();
     } catch (e) {
       return Promise.reject(e);
     }
-  }; // cells
-  // rows
-  const setRowValue = function (rowId, original, value) {
+  };
+  const addCreatedRowChangeset = function (row) {
     try {
-      function _temp2() {
-        dispatch({
-          type: 'updateRow',
-          rowId,
-          payload: {
-            cellErrors,
-            original,
-            value
+      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;
           }
-        });
-      }
-      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));
+        }, currentChanges);
+      });
+      return Promise.resolve();
     } catch (e) {
       return Promise.reject(e);
     }
   };
   const localization = useLocalization();
-  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;
+  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];
   }
-  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;
+  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];
   }
+  const pendingChangesUpdater = usePendingChangesUpdater(handleChange, setPendingChanges);
   function hasRowErrors(rowId) {
-    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;
+    var _pendingChanges$rowId, _pendingChanges$rowId2, _pendingChanges$rowId3, _pendingChanges$rowId4, _pendingChanges$rowId5;
+    if (!isEnabled) {
+      return false;
+    }
+    return !!((_pendingChanges$rowId = pendingChanges[rowId]) !== null && _pendingChanges$rowId !== void 0 && (_pendingChanges$rowId2 = _pendingChanges$rowId._meta.errors) !== null && _pendingChanges$rowId2 !== void 0 && _pendingChanges$rowId2.row) || !!Object.keys((_pendingChanges$rowId3 = (_pendingChanges$rowId4 = pendingChanges[rowId]) === null || _pendingChanges$rowId4 === void 0 ? void 0 : (_pendingChanges$rowId5 = _pendingChanges$rowId4._meta.errors) === null || _pendingChanges$rowId5 === void 0 ? void 0 : _pendingChanges$rowId5.cells) !== null && _pendingChanges$rowId3 !== void 0 ? _pendingChanges$rowId3 : {}).length;
   }
-  function 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) {
+      return false;
+    }
+    return hasRowErrors(rowId) && !!((_pendingChanges$rowId6 = pendingChanges[rowId]._meta.errors) !== null && _pendingChanges$rowId6 !== void 0 && _pendingChanges$rowId6.shouldShowErrorAlert);
   }
-  function getRowStatus(rowId) {
-    return state.changes.status[rowId];
+  function getRowPendingChange(rowId) {
+    const rowPendingChanges = pendingChanges[rowId];
+    if (rowPendingChanges) {
+      const {
+        _meta,
+        ...pendingChange
+      } = rowPendingChanges;
+      return pendingChange;
+    }
+    return undefined;
   }
-  function setRowStatus(rowId, status) {
-    dispatch({
-      type: 'setRowStatus',
-      rowId,
-      payload: {
-        status
+  function getRowSaveStatus(rowId) {
+    if (!isEnabled) {
+      return false;
+    }
+    return saveStates[rowId];
+  }
+  function setRowSaveStatus(rowId, status) {
+    setSaveState(currentStates => {
+      const nextStates = {
+        ...currentStates
+      };
+      if (status) {
+        nextStates[rowId] = status;
+      } else {
+        delete nextStates[rowId];
       }
+      return nextStates;
     });
   }
-  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 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 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 getCellError(cell) {
-    var _state$changes$errors5, _state$changes$errors6, _state$changes$errors7;
-    return (_state$changes$errors5 = state.changes.errors) === null || _state$changes$errors5 === void 0 ? void 0 : (_state$changes$errors6 = _state$changes$errors5[cell.row.id]) === null || _state$changes$errors6 === void 0 ? void 0 : (_state$changes$errors7 = _state$changes$errors6.cells) === null || _state$changes$errors7 === void 0 ? void 0 : _state$changes$errors7[cell.column.id];
+  function hasChanges(rowId) {
+    if (!isEnabled) {
+      return false;
+    }
+    return rowId ? !!pendingChanges[rowId] : !!Object.keys(pendingChanges).length;
   }
-  function getErrorsShownInAlert() {
-    const rowsWithErrors = Object.keys(state.changes.errors);
-    if (!rowsWithErrors.length) {
-      return [];
+  function hasAlertErrors() {
+    if (!isEnabled) {
+      return false;
     }
-    return rowsWithErrors.filter(hasRowErrorsShownInAlert).map(rowId => ({
+    return !!getAlertErrors().length;
+  }
+  function getAlertErrors() {
+    return Object.keys(pendingChanges).filter(hasRowErrorsSeen).map(rowId => ({
       rowId,
-      changes: state.changes.rows[rowId],
-      errors: state.changes.errors[rowId]
+      pendingChange: pendingChanges[rowId]
     }));
   }
-  function hasSaved() {
-    return !!Object.values(state.changes.status).filter(value => value === 'saved').length;
-  }
-  function hasChanges(rowId) {
-    return rowId ? !!state.changes.rows[rowId] : !!Object.keys(state.changes.rows).length;
-  }
-  function discardChanges(rowId, table) {
-    // remove any new rows from pinned state before discarding them
-    table.resetRowPinning(true);
-    dispatch({
-      type: 'removeRow',
-      rowId,
-      payload: {
-        rowIdentityAccessor
-      }
+  function resetChanges(rowId) {
+    setPendingChanges(currentChanges => {
+      const nextChanges = {
+        ...currentChanges
+      };
+      delete nextChanges[rowId];
+      return nextChanges;
     });
   }
+  function getCompletedRowsCount() {
+    return Object.values(saveStates).filter(value => value === 'complete').length;
+  }
   return {
-    // row
-    setRowValue,
-    getRowValue,
-    getRowMoveReason,
-    hasRowErrors,
-    hasRowErrorsShownInAlert,
-    getRowStatus,
-    setRowStatus,
-    // cells
-    setCellValue,
     getCellValue,
     getCellError,
-    onCellChanged,
-    // general
-    getErrorsShownInAlert,
+    setCellValue,
+    validateCell,
+    addCreatedRowChangeset,
     hasChanges,
+    hasAlertErrors,
+    getAlertErrors,
     saveChanges,
-    discardChanges,
-    hasSaved,
-    // new rows
-    createRow,
-    temporaryRows: state.temporaryRows
+    resetChanges,
+    hasRowErrors,
+    hasRowErrorsSeen,
+    getRowPendingChange,
+    getRowSaveStatus,
+    setRowSaveStatus,
+    getRowMoveReason,
+    getCompletedRowsCount
   };
 }
-
-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);
+function useLastFocusedCellIndex() {
   // store the last focused cell, so that up/down arrow key navigation remains in the same column
-  const [lastFocusedCellIndex, setLastFocusedCellIndex] = React__default.useState(undefined);
-  const pendingChangesFns = usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, validator);
-  function toggleEditing(enabled, table) {
-    if (!enabled) {
-      // save
-      pendingChangesFns.saveChanges(table);
-      // reset detailed mode
-      toggleDetailedMode(false);
-      // reset the last index back to the first focusable element, when editing gets turned off
-      setLastFocusedCellIndex(undefined);
+  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);
     }
-    setEditing(enabled);
+  }, 250), []);
+  function syncCellChanges(changes) {
+    updatersRef.current = changes;
   }
   return {
-    isEnabled,
-    isEditing,
-    isDetailedMode,
-    toggleDetailedMode: isEnabled ? toggleDetailedMode : () => undefined,
-    toggleEditing: isEnabled ? toggleEditing : () => undefined,
-    lastFocusedCellIndex,
-    setLastFocusedCellIndex,
-    ...pendingChangesFns
+    syncCellChanges,
+    runCellUpdates
+  };
+}
+function createPendingChangesSetter(currentChanges, row, rowIndex, changes, localization) {
+  var _currentChanges$row$i, _currentChanges$row$i2, _currentChanges$row$i3;
+  // prepare
+  const nextChanges = {
+    ...currentChanges
+  };
+  const rowChanges = {
+    ...currentChanges[row.id],
+    _meta: {
+      ...((_currentChanges$row$i = currentChanges[row.id]) === null || _currentChanges$row$i === void 0 ? void 0 : _currentChanges$row$i._meta),
+      original: row.original,
+      moveReason: {
+        ...((_currentChanges$row$i2 = currentChanges[row.id]) === null || _currentChanges$row$i2 === void 0 ? void 0 : _currentChanges$row$i2._meta.moveReason)
+      },
+      errors: {
+        ...((_currentChanges$row$i3 = currentChanges[row.id]) === null || _currentChanges$row$i3 === void 0 ? void 0 : _currentChanges$row$i3._meta.errors)
+      }
+    }
+  };
+  // run changes
+  const cells = row._getAllCellsByColumnId();
+  for (const [accessor, change] of Object.entries(changes)) {
+    // update if the change is different to the original (saved) value,
+    // otherwise remove any change - no point saving the same value
+    if (change !== row.original[accessor]) {
+      rowChanges[accessor] = change;
+      // consumers sometimes include properties in onEditingChange that aren't rendered as columns, we need to guard against that.
+      // eslint-disable-next-line no-prototype-builtins
+      if (cells.hasOwnProperty(accessor)) {
+        // determine if the row will move position based on this change, and save why it will move
+        const reason = willRowMove(cells[accessor], change, rowIndex, localization);
+        if (reason) {
+          rowChanges._meta.moveReason[accessor] = reason;
+        } else {
+          delete rowChanges._meta.moveReason[accessor];
+        }
+      }
+    } else {
+      delete rowChanges[accessor];
+      delete rowChanges._meta.moveReason[accessor];
+    }
+  }
+  // set changes
+  // or delete if there are no changes left, so that we don't store changes with unchanged data
+  if (Object.keys(rowChanges).filter(k => k !== '_meta').length) {
+    nextChanges[row.id] = rowChanges;
+  } else {
+    delete nextChanges[row.id];
+  }
+  return nextChanges;
+}
+function getChangesetFromChanges(changes) {
+  // extract the original data from the row changes
+  const {
+    _meta,
+    ...changeset
+  } = changes !== null && changes !== void 0 ? changes : {};
+  // and mix them in with the changes, ready to send to the server
+  return {
+    ...(_meta === null || _meta === void 0 ? void 0 : _meta.original),
+    ...changeset
   };
 }
 
@@ -19263,28 +19145,13 @@ function EditingControlCell(props) {
   const {
     rowIndex
   } = React__default.useContext(RowContext);
-  const {
-    table
-  } = cell.getContext();
-  const tableMeta = table.options.meta;
+  const tableMeta = cell.getContext().table.options.meta;
   const columnMeta = cell.column.columnDef.meta;
   const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;
-  const type = (_columnMeta$control = columnMeta.control) !== null && _columnMeta$control !== void 0 ? _columnMeta$control : 'input';
   const handleFocus = useEditingCellAutofocus(props);
-  // some controls, like select2, should trigger cell changed (validation, updates) as the value changes
-  const hasNonTextControl = React__default.useMemo(() => {
-    var _cellRef$current;
-    return typeof type === 'function' && !!((_cellRef$current = cellRef.current) !== null && _cellRef$current !== void 0 && _cellRef$current.querySelector('[data-taco="Select2"],[data-taco="switch"],[data-taco="checkbox"]'));
-  }, [cellRef.current]);
-  const handleChange = value => {
-    tableMeta.editing.setCellValue(cell, value);
-    if (hasNonTextControl) {
-      tableMeta.editing.onCellChanged(cell, rowIndex);
-    }
-  };
   const handleBlur = () => {
     tableMeta.editing.toggleDetailedMode(false);
-    tableMeta.editing.onCellChanged(cell, rowIndex);
+    tableMeta.editing.validateCell(cell);
   };
   // ensure that blur runs when the cell gets unmounted (when vertically arrow key navigating)
   React__default.useEffect(() => {
@@ -19296,9 +19163,6 @@ function EditingControlCell(props) {
     };
   }, []);
   const error = tableMeta.editing.getCellError(cell);
-  function toggleEditing(enabled) {
-    tableMeta.editing.toggleEditing(enabled, table);
-  }
   const controlProps = {
     dataType: columnMeta.dataType,
     fontSize: tableMeta.fontSize.size,
@@ -19307,13 +19171,13 @@ function EditingControlCell(props) {
     isDetailedMode: tableMeta.editing.isDetailedMode,
     isTruncated: !!columnMeta.enableTruncate,
     onBlur: handleBlur,
-    onChange: handleChange,
+    onChange: value => tableMeta.editing.setCellValue(cell, value, rowIndex),
     row: cell.row.original,
-    rowPendingChanges: tableMeta.editing.getRowValue(cell.row.id),
+    rowPendingChanges: tableMeta.editing.getRowPendingChange(cell.row.id),
     tabIndex: isActiveRow ? 0 : -1,
-    toggleEditing,
+    toggleEditing: tableMeta.editing.toggleEditing,
     toggleDetailedMode: tableMeta.editing.toggleDetailedMode,
-    type,
+    type: (_columnMeta$control = columnMeta.control) !== null && _columnMeta$control !== void 0 ? _columnMeta$control : 'input',
     value: cell.getValue()
   };
   const cellAttributes = {
@@ -19377,6 +19241,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) {
@@ -19421,6 +19292,10 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
       }
       return;
     }
+    const shortcutWhitelist = ['f', 'p', 'e']; // f = search, p = print, and e = edit
+    if (isPressingMetaKey(event) && !shortcutWhitelist.some(s => s === event.key)) {
+      event.stopPropagation();
+    }
     // toggle into detailed mode when actually inputting something
     if (!isPressingMetaKey(event) && (/^[a-z0-9]$/i.test(event.key) || event.key === 'Backspace')) {
       toggleDetailedMode(true);
@@ -19516,37 +19391,12 @@ 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,
-    onDiscard: handleDiscard,
+    onClear: handleClear,
+    onExit: handleExit,
     onEditingSave: handleSave,
     isLastRow
   } = props;
@@ -19580,13 +19430,42 @@ 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(DiscardChangesConfirmationDialog, Object.assign({}, props, {
-        onDiscard: handleDiscard
+      dialog: props => /*#__PURE__*/React__default.createElement(ConfirmClearChangesDialog, Object.assign({}, props, {
+        onClear: handleClear
       }))
-    }, texts.table3.editing.actions.clear))))
+    }, texts.table3.editing.actions.clear), /*#__PURE__*/React__default.createElement(Menu$1.Item, {
+      icon: "undo",
+      onClick: handleExit
+    }, texts.table3.editing.actions.exit))))
   });
 }
+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,
@@ -19596,7 +19475,18 @@ function SaveStatus(props) {
     texts
   } = useLocalization();
   const tableMeta = table.options.meta;
-  const status = tableMeta.editing.getRowStatus(rowId);
+  const status = tableMeta.editing.getRowSaveStatus(rowId);
+  React__default.useEffect(() => {
+    let timeout;
+    if (status === 'complete') {
+      timeout = setTimeout(() => {
+        tableMeta.editing.setRowSaveStatus(rowId, undefined);
+      }, COMPLETE_INDICATOR_DELAY);
+    }
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [status]);
   const 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',
@@ -19607,7 +19497,7 @@ function SaveStatus(props) {
     className: "!contents"
   }, /*#__PURE__*/React__default.createElement("span", {
     className: className
-  }, status === 'saving' ? (/*#__PURE__*/React__default.createElement(Tooltip, {
+  }, status === 'pending' ? (/*#__PURE__*/React__default.createElement(Tooltip, {
     title: texts.table3.editing.saving.progress
   }, /*#__PURE__*/React__default.createElement(Spinner, {
     delay: 0,
@@ -19645,13 +19535,12 @@ function Row$2(props) {
       }
     }
   }, [tableMeta.editing.isEditing, isActiveRow]);
-  const rowStatus = tableMeta.editing.getRowStatus(row.id);
   const attributes = {
-    'data-row-editing-invalid': tableMeta.editing.hasRowErrors(row.id) ? !tableMeta.editing.hasRowErrorsShownInAlert(row.id) ? 'unseen' : true : undefined,
-    'data-row-editing-status': rowStatus,
+    '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
   };
-  return /*#__PURE__*/React__default.createElement(DisplayRow, Object.assign({}, props, attributes), rowStatus === 'saving' || rowStatus === 'saved' ? /*#__PURE__*/React__default.createElement(SaveStatus, {
+  return /*#__PURE__*/React__default.createElement(DisplayRow, Object.assign({}, props, attributes), tableMeta.editing.getRowSaveStatus(row.id) ? /*#__PURE__*/React__default.createElement(SaveStatus, {
     rowId: row.id,
     table: table
   }) : null);
@@ -19662,31 +19551,17 @@ const RENDERERS$1 = {
   cell: Cell$5
 };
 function useTable3(props, ref) {
-  const editing = useTableEditing(props.enableEditing, props.onEditingSave, props.onEditingChange, props.rowIdentityAccessor, props.validator);
+  const editing = useTableEditing(props.enableEditing, props.onEditingSave, props.onEditingChange, props.validator);
   const creationEnabled = editing.isEnabled && !!props.onEditingCreate;
-  // this gives me the performance heeby jeebies, but can't think of a better way to internalise the state
-  const data = React__default.useMemo(() => {
-    if (editing.isEditing && editing.temporaryRows.length) {
-      var _props$data;
-      return editing.temporaryRows.concat((_props$data = props.data) !== null && _props$data !== void 0 ? _props$data : []);
-    }
-    return props.data;
-  }, [JSON.stringify(props.data), editing.temporaryRows.length]);
   const extendedProps = {
     ...props,
-    data,
     enableRowActions: editing.isEditing ? true : props.enableRowActions,
-    rowActions: editing.isEditing ? [(_, rowId, table) => (/*#__PURE__*/React__default.createElement(EditingActionMenu, {
+    rowActions: editing.isEditing ? [(_, rowId) => (/*#__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);
-        }
-      },
+      onClear: () => editing.resetChanges(rowId),
+      onEditingSave: () => editing.saveChanges(rowId),
+      onExit: () => editing.toggleEditing(false),
       isLastRow: !creationEnabled && table.meta.rowActive.rowActiveIndex === table.meta.length - 1
     }))] : props.rowActions
   };
@@ -19698,7 +19573,7 @@ function useTable3(props, ref) {
   useTableEditingListener(table.instance, table.ref);
   React__default.useEffect(() => {
     if (table.ref.current) {
-      table.ref.current.instance.toggleEditing = enabled => table.meta.editing.toggleEditing(enabled !== null && enabled !== void 0 ? enabled : editing => !editing, table.instance);
+      table.ref.current.instance.toggleEditing = enabled => table.meta.editing.toggleEditing(enabled !== null && enabled !== void 0 ? enabled : editing => !editing);
     }
   }, [table.ref.current]);
   return table;
@@ -19717,7 +19592,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.getErrorsShownInAlert();
+  const pendingChangesWithErrors = tableMeta.editing.getAlertErrors();
   function scrollToRow(rowIndex) {
     tableMeta.rowActive.setRowActiveIndex(rowIndex);
     scrollToIndex(rowIndex, {
@@ -19736,43 +19611,38 @@ 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 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) => {
+  const rowIdentityColumn = tableMeta.rowIdentityColumnId ? table.getColumn(tableMeta.rowIdentityColumnId) : undefined;
+  pendingChangesWithErrors.forEach((error, 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 === pendingChangeWithError.rowId);
+    const rowIndex = table.getRowModel().rows.findIndex(row => row.id === error.rowId);
     const handleClick = () => {
-      // if row is visible
       if (rowIndex > -1) {
         scrollToRow(rowIndex);
-      }
-      // if row is filtered out
-      else {
-        setShowFilterResetDialog(pendingChangeWithError.rowId);
+      } else {
+        setShowFilterResetDialog(error.rowId);
       }
     };
     let tooltip;
-    if (pendingChangeWithError.errors.row) {
-      tooltip = pendingChangeWithError.errors.row;
+    if (error.pendingChange._meta.errors.row) {
+      tooltip = error.pendingChange._meta.errors.row;
     } else {
       var _table$getAllColumns$, _table$getAllColumns$2;
-      const firstCellErrorColumnId = Object.keys(pendingChangeWithError.errors.cells)[0];
+      const firstCellErrorColumnId = Object.keys(error.pendingChange._meta.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}: ${pendingChangeWithError.errors.cells[firstCellErrorColumnId]}`;
+      tooltip = `${columnName}: ${error.pendingChange._meta.errors.cells[firstCellErrorColumnId]}`;
     }
-    const row = table.getRow(pendingChangeWithError.rowId).original;
     links.push(/*#__PURE__*/React__default.createElement(Tooltip, {
-      key: pendingChangeWithError.rowId,
+      key: error.rowId,
       title: tooltip
     }, /*#__PURE__*/React__default.createElement("span", {
       className: "text-blue",
       onClick: handleClick,
       role: "button"
-    }, rowIdentityColumn ? row[rowIdentityColumn.id] : rowIndex + 1)));
+    }, rowIdentityColumn ? error.pendingChange._meta.original[rowIdentityColumn.id] : rowIndex + 1)));
     // if appropriate, concatenate the item with the text ","
     if (pendingChangesWithErrors.length > 2 && index < pendingChangesWithErrors.length - 2) {
       links.push(', ');
@@ -19828,6 +19698,89 @@ function FilterResetDialog(props) {
   }, texts.table3.editing.validation.resetFiltersDialog.confirm)))));
 }
 
+function CreateNewRowButton(props) {
+  const {
+    onEditingCreate,
+    scrollToIndex,
+    table,
+    tableMeta
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const rows = table.getCoreRowModel().rows.filter(row => row.original !== undefined);
+  const [rowCreated, setRowCreated] = React__default.useState({
+    rowFinder: undefined
+  });
+  const handleKeyDown = event => {
+    if (!tableMeta.editing.hasChanges() && event.key === 'Tab') {
+      tableMeta.editing.saveChanges();
+    }
+  };
+  const handleCreate = function () {
+    try {
+      if (!onEditingCreate) {
+        return Promise.resolve();
+      }
+      const createdRow = rows.find(row => {
+        var _rowCreated$rowFinder;
+        return rowCreated === null || rowCreated === void 0 ? void 0 : (_rowCreated$rowFinder = rowCreated.rowFinder) === null || _rowCreated$rowFinder === void 0 ? void 0 : _rowCreated$rowFinder.call(rowCreated, row.original);
+      });
+      const _temp = function () {
+        if (createdRow) {
+          return Promise.resolve(tableMeta.editing.saveChanges()).then(function () {
+            if (!tableMeta.editing.hasRowErrors(createdRow.id)) {
+              const rowFinder = onEditingCreate();
+              setRowCreated({
+                rowFinder
+              });
+            }
+          });
+        } else {
+          const rowFinder = onEditingCreate();
+          setRowCreated({
+            rowFinder
+          });
+        }
+      }();
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  React__default.useEffect(() => {
+    if (typeof (rowCreated === null || rowCreated === void 0 ? void 0 : rowCreated.rowFinder) === 'function') {
+      const createdRow = rows.find(row => {
+        var _rowCreated$rowFinder2;
+        return rowCreated === null || rowCreated === void 0 ? void 0 : (_rowCreated$rowFinder2 = rowCreated.rowFinder) === null || _rowCreated$rowFinder2 === void 0 ? void 0 : _rowCreated$rowFinder2.call(rowCreated, row.original);
+      });
+      if (createdRow) {
+        const rowInTable = table.getRowModel().rows.filter(row => row.original !== undefined).find(row => {
+          var _rowCreated$rowFinder3;
+          return rowCreated === null || rowCreated === void 0 ? void 0 : (_rowCreated$rowFinder3 = rowCreated.rowFinder) === null || _rowCreated$rowFinder3 === void 0 ? void 0 : _rowCreated$rowFinder3.call(rowCreated, row.original);
+        });
+        if (rowInTable) {
+          tableMeta.editing.toggleEditing(true);
+          tableMeta.rowActive.setRowActiveIndex(createdRow.index);
+          scrollToIndex(createdRow.index);
+          requestAnimationFrame(() => animateCreateRow(createdRow.id));
+        }
+        requestAnimationFrame(() => tableMeta.editing.addCreatedRowChangeset(createdRow));
+      }
+    }
+  }, [rowCreated]);
+  return /*#__PURE__*/React__default.createElement("tr", {
+    onClick: handleCreate,
+    className: "border-grey-300 hover:bg-grey-100 group !sticky bottom-10 left-0 z-[21] !block cursor-pointer border-t"
+  }, /*#__PURE__*/React__default.createElement("td", {
+    className: "!border-t-0 !bg-transparent"
+  }, /*#__PURE__*/React__default.createElement(Button$1, {
+    onKeyDown: handleKeyDown,
+    className: "group-hover:bg-grey-200 sticky left-0",
+    appearance: "transparent"
+  }, "+ ", texts.table3.editing.buttons.create.label)));
+}
+
 function Editing(props) {
   const {
     scrollToIndex,
@@ -19853,191 +19806,21 @@ function Editing(props) {
     (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.click();
   });
   const handleChange = enabled => {
-    if (enabled && tableMeta.rowActive.rowActiveIndex === undefined) {
-      tableMeta.rowActive.setRowActiveIndex(0);
-    }
+    tableMeta.editing.toggleEditing(enabled);
     requestAnimationFrame(() => {
       var _tableMeta$rowActive$;
-      // wait for an active row to be set so that we don't trigger save
-      tableMeta.editing.toggleEditing(enabled, table);
-      scrollToIndex((_tableMeta$rowActive$ = tableMeta.rowActive.rowActiveIndex) !== null && _tableMeta$rowActive$ !== void 0 ? _tableMeta$rowActive$ : 0);
+      return scrollToIndex((_tableMeta$rowActive$ = tableMeta.rowActive.rowActiveIndex) !== null && _tableMeta$rowActive$ !== void 0 ? _tableMeta$rowActive$ : 0);
     });
   };
   return /*#__PURE__*/React__default.createElement(Tooltip, {
     title: tooltip
   }, /*#__PURE__*/React__default.createElement(ModeSwitch, {
-    "data-table": "editing-toggle",
     checked: tableMeta.editing.isEditing,
     onChange: handleChange,
     ref: ref
   }));
 }
 
-function CreateNewRow(props) {
-  var _temporaryRows$0$tabl, _temporaryRows$, _table$getState$colum;
-  const {
-    buttonRef,
-    onEditingCreate: handleEditingCreate,
-    table,
-    tableMeta
-  } = props;
-  const {
-    texts
-  } = useLocalization();
-  const temporaryRows = tableMeta.editing.temporaryRows;
-  const temporaryRowId = (_temporaryRows$0$tabl = (_temporaryRows$ = temporaryRows[0]) === null || _temporaryRows$ === void 0 ? void 0 : _temporaryRows$[tableMeta.rowIdentityAccessor]) !== null && _temporaryRows$0$tabl !== void 0 ? _temporaryRows$0$tabl : '';
-  const isDisabled = !!table.getState().globalFilter || !!((_table$getState$colum = table.getState().columnFilters) !== null && _table$getState$colum !== void 0 && _table$getState$colum.length) || !!temporaryRowId && !!tableMeta.editing.hasRowErrors(temporaryRowId);
-  const isSaving = !!temporaryRowId && tableMeta.editing.getRowStatus(temporaryRowId) === 'saving';
-  const handleCreate = function (event) {
-    try {
-      // prevent save being triggered by click outside - TODO: investigate why the button triggers clickoutside
-      event === null || event === void 0 ? void 0 : event.stopPropagation();
-      if (!handleEditingCreate || isDisabled) {
-        return Promise.resolve();
-      }
-      return Promise.resolve(tableMeta.editing.saveChanges(table)).then(function (saved) {
-        if (!saved) {
-          return;
-        }
-        try {
-          const changeset = handleEditingCreate();
-          if (changeset) {
-            // change the row before reating because it triggers a save
-            // saving would trigger the validation flow and immediately make the row red
-            tableMeta.rowActive.setRowActiveIndex(-1);
-            requestAnimationFrame(function () {
-              try {
-                tableMeta.editing.toggleEditing(true, table);
-                return Promise.resolve(tableMeta.editing.createRow(changeset)).then(function (rowId) {
-                  tableMeta.editing.setLastFocusedCellIndex(0);
-                  try {
-                    const row = table.getRow(rowId);
-                    row.pin('bottom');
-                  } catch {
-                    //
-                  }
-                });
-              } catch (e) {
-                return Promise.reject(e);
-              }
-            });
-          }
-        } catch (error) {
-          console.error(error);
-        }
-      });
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-  let tooltip;
-  if (isSaving) {
-    tooltip = texts.table3.editing.buttons.create.saving;
-  } else if (isDisabled) {
-    tooltip = texts.table3.editing.buttons.create.disabled;
-  }
-  return /*#__PURE__*/React__default.createElement("tr", {
-    "data-row-create": true,
-    className: "border-grey-300 group/row",
-    tabIndex: -1
-  }, /*#__PURE__*/React__default.createElement("td", {
-    className: "!bg-grey-50 col-span-full !border-b-0 !px-1"
-  }, /*#__PURE__*/React__default.createElement(Button$1, {
-    appearance: "transparent",
-    className: "group-hover:bg-grey-200 sticky left-[4px]",
-    disabled: isDisabled,
-    onClick: handleCreate,
-    ref: buttonRef,
-    tooltip: tooltip
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    name: "circle-plus"
-  }), texts.table3.editing.buttons.create.label)));
-}
-
-function TemporaryRow(props) {
-  var _tableRef$current, _tableRef$current2;
-  const {
-    buttonRef,
-    rowIdentityAccessor,
-    table,
-    tableMeta,
-    tableRef
-  } = props;
-  const temporaryRows = tableMeta.editing.temporaryRows;
-  // discard new row
-  const [showDiscardDialog, setShowDiscardDialog] = React__default.useState(false);
-  function handleDiscard() {
-    if (temporaryRows[0]) {
-      var _buttonRef$current;
-      tableMeta.editing.discardChanges(temporaryRows[0][rowIdentityAccessor], table);
-      (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
-    }
-  }
-  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 _buttonRef$current2;
-                  (_buttonRef$current2 = buttonRef.current) === null || _buttonRef$current2 === void 0 ? void 0 : _buttonRef$current2.focus();
-                }
-              });
-            }
-          }();
-          if (_temp && _temp.then) return _temp.then(function () {});
-        } else if (event.key === 'ArrowUp') {
-          event.preventDefault();
-          event.stopPropagation();
-        }
-      }();
-      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-  const handleKeyDownCapture = event => {
-    if (event.key === 'Escape') {
-      event.preventDefault();
-      event.stopPropagation();
-      setShowDiscardDialog(true);
-    } else if (event.key === 'ArrowLeft' && tableMeta.editing.lastFocusedCellIndex === 0) {
-      event.preventDefault();
-      event.stopPropagation();
-    } else if (event.key === 'ArrowRight' && tableMeta.editing.lastFocusedCellIndex) {
-      if (tableMeta.editing.lastFocusedCellIndex === table.getVisibleFlatColumns().length - 1) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    }
-  };
-  const isScrolled = tableRef.current ? ((_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.scrollHeight) > ((_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : _tableRef$current2.clientHeight) : false;
-  const className = cn('group/row border-grey-300 !sticky z-[21]', {
-    'bottom-20': tableMeta.footer.isEnabled,
-    'bottom-10': !tableMeta.footer.isEnabled,
-    'border-b border-t-2 shadow-[0px_-5px_20px_0px_rgba(0,0,0,0.1)] border-t-grey-500/[0.5]': 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: -1,
-    measureRow: () => null,
-    renderer: RENDERERS$1.row,
-    row: row,
-    table: table,
-    className: className,
-    onKeyDown: handleKeyDown,
-    onKeyDownCapture: handleKeyDownCapture
-  }))), /*#__PURE__*/React__default.createElement(DiscardChangesConfirmationDialog, {
-    open: showDiscardDialog,
-    onChange: setShowDiscardDialog,
-    onDiscard: handleDiscard
-  }));
-}
-
 function Column$3(_) {
   return null;
 }
@@ -20049,23 +19832,12 @@ Group$5.displayName = 'Table3Group';
 const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref) {
   var _table3$meta$editing, _table3$meta$editing2;
   const table3 = useTable3(props, ref);
-  const buttonRef = React__default.useRef(null);
   const gridAttributes = {
     '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.isEditing && table3.meta.editing.getErrorsShownInAlert().length;
-  const hasCreateWorkflow = table3.meta.editing.isEnabled && props.onEditingCreate;
-  let footerRows;
-  if (table3.meta.editing.isEnabled && props.onEditingCreate) {
-    footerRows = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(CreateNewRow, {
-      buttonRef: buttonRef,
-      onEditingCreate: props.onEditingCreate,
-      table: table3.instance,
-      tableMeta: table3.meta,
-      tableRef: table3.ref
-    }));
-  }
+  const hasAlertErrors = table3.meta.editing.hasAlertErrors();
+  const showCreateRowButton = 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, {
@@ -20078,15 +19850,13 @@ const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref)
     tableRef: table3.ref
   })) : null, /*#__PURE__*/React__default.createElement(Table.Grid, Object.assign({}, gridAttributes, {
     "data-taco": "table3",
-    rowsForFooter: footerRows,
     table: table3
-  }), hasCreateWorkflow ? (/*#__PURE__*/React__default.createElement(TemporaryRow, {
-    buttonRef: buttonRef,
-    rowIdentityAccessor: props.rowIdentityAccessor,
+  }), showCreateRowButton && (/*#__PURE__*/React__default.createElement(CreateNewRowButton, {
     table: table3.instance,
     tableMeta: table3.meta,
-    tableRef: table3.ref
-  })) : null));
+    onEditingCreate: props.onEditingCreate,
+    scrollToIndex: table3.renderer.scrollToIndex
+  }))));
 });
 const Table3 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   const stringifiedChildren = String(props.children);