@economic/taco 2.45.0-alpha.0 → 2.45.0-create.3

package/dist/taco.cjs.development.js

@@ -43,7 +43,8 @@ var set = _interopDefault(require('lodash/set'));
 var unset = _interopDefault(require('lodash/unset'));
 var compact = _interopDefault(require('lodash/compact'));
 var pullAt = _interopDefault(require('lodash/pullAt'));
-var lodash = require('lodash');
+var omit = _interopDefault(require('lodash/omit'));
+var setWith = _interopDefault(require('lodash/setWith'));
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var Joyride = require('react-joyride');
 var Joyride__default = _interopDefault(Joyride);
@@ -4037,33 +4038,25 @@ const Accordion = props => {
   const context = React__default.useMemo(() => ({
     as
   }), [as]);
-  const type = typeof defaultId === 'string' || typeof id === 'string' ? 'single' : 'multiple';
   let valueProps;
   if (defaultId) {
-    valueProps = type === 'single' ? {
-      type: 'single',
-      defaultValue: defaultId
-    } : {
-      type: 'multiple',
-      defaultValue: defaultId
+    valueProps = {
+      defaultValue: defaultId || undefined
     };
   } else {
-    valueProps = type === 'single' ? {
-      type: 'single',
-      onValueChange: onChange,
-      value: id || undefined
-    } : {
-      type: 'multiple',
+    valueProps = {
       onValueChange: onChange,
       value: id || undefined
     };
   }
+  const type = typeof valueProps.defaultValue === 'string' || typeof valueProps.value === 'string' ? 'single' : 'multiple';
   const className = cn('divide-y divide-grey-200', props.className);
   return /*#__PURE__*/React__default.createElement(AccordionContext.Provider, {
     value: context
   }, /*#__PURE__*/React__default.createElement(AccordionPrimitive.Root, Object.assign({}, otherProps, valueProps, {
     "data-taco": "accordion",
-    className: className
+    className: className,
+    type: type
   })));
 };
 Accordion.Item = Item;
@@ -4213,7 +4206,7 @@ const getOverlaySelector = element => {
       return undefined;
   }
 };
-function isElementInsideOrTriggeredFromContainer(element, container) {
+function isElementTriggeredFromContainer(element, container) {
   var _getOverlaySelector, _element$closest;
   const selector = (_getOverlaySelector = getOverlaySelector(element)) !== null && _getOverlaySelector !== void 0 ? _getOverlaySelector : getOverlaySelector((_element$closest = element === null || element === void 0 ? void 0 : element.closest('[role=dialog],[role=menu]')) !== null && _element$closest !== void 0 ? _element$closest : null);
   if (selector) {
@@ -4223,11 +4216,14 @@ function isElementInsideOrTriggeredFromContainer(element, container) {
     const elementInDocument = document.querySelector(selector);
     // if the element does exist, see if it is itself connected to somethng that was triggered from the container
     if (elementInDocument) {
-      return isElementInsideOrTriggeredFromContainer(elementInDocument, container);
+      return isElementTriggeredFromContainer(elementInDocument, container);
     }
     return false;
   }
-  return !!(container !== null && container !== void 0 && container.contains(element));
+  return false;
+}
+function isElementInsideOrTriggeredFromContainer(element, container) {
+  return isElementTriggeredFromContainer(element, container) || !!(container !== null && container !== void 0 && container.contains(element));
 }
 function isElementInsideOverlay(element) {
   return !!(element !== null && element !== void 0 && element.closest('[role=dialog],[role=menu]'));
@@ -4721,7 +4717,9 @@ const defaultLocalisationTexts = {
           tooltip: 'Edit table'
         },
         create: {
-          label: 'New'
+          label: 'New',
+          disabled: 'Existing new row must be saved',
+          saving: 'Saving...'
         }
       },
       clearChangesConfirmationDialog: {
@@ -4743,8 +4741,8 @@ const defaultLocalisationTexts = {
       },
       validation: {
         alert: {
-          titleOne: '[COUNT] unsaved entry:',
-          titlePlural: '[COUNT] unsaved entries:',
+          titleOne: '[COUNT] unsaved row:',
+          titlePlural: '[COUNT] unsaved rows:',
           messageOne: "[COLUMN] [ROW] is incomplete and hasn't been saved.",
           messagePlural: "[COLUMN] [ROW] are incomplete and haven't been saved.",
           messageRow: 'Row',
@@ -5744,13 +5742,7 @@ const searchForString = (child, value, strategy = 'includes') => {
       }
       return searchForString((_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.children, value, strategy);
     } else {
-      const childLowerCase = child.toString().toLowerCase();
-      const valueLowerCase = String(value).toLowerCase();
-      if (strategy === 'startsWith') {
-        return childLowerCase.startsWith(valueLowerCase);
-      } else {
-        return childLowerCase.includes(valueLowerCase);
-      }
+      return child.toString().toLowerCase()[strategy](String(value).toLowerCase());
     }
   } catch {
     return false;
@@ -6704,7 +6696,7 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
   }), /*#__PURE__*/React.createElement("div", {
     className: containerClassName,
     "data-taco": "dialog"
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, output, dialog.draggable && (/*#__PURE__*/React.createElement("div", Object.assign({}, dragHandleProps, {
+  }, output, dialog.draggable && (/*#__PURE__*/React.createElement("div", Object.assign({}, dragHandleProps, {
     role: "button",
     draggable: true,
     "aria-grabbed": dragging,
@@ -6718,7 +6710,7 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
     "aria-label": texts.dialog.close,
     className: "absolute right-0 top-0 mr-2 mt-2 print:hidden",
     icon: "close"
-  }))) : null)), dialog.elements.drawer, dialog.elements.extra))));
+  }))) : null), dialog.elements.drawer, dialog.elements.extra))));
 });
 
 const DialogDrawer = /*#__PURE__*/React.forwardRef(function DialogDrawer(props, ref) {
@@ -6911,12 +6903,12 @@ const Bar = props => {
     className: className
   }));
 };
-const Thumb = () => /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Thumb, {
+const Thumb = props => /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Thumb, Object.assign({}, props, {
   className: "flex-[1] rounded bg-black opacity-50"
-});
-const Corner = () => /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Corner, {
+}));
+const Corner = props => /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Corner, Object.assign({}, props, {
   className: "bg-grey-500"
-});
+}));
 const ScrollArea = props => {
   const {
     children,
@@ -7646,7 +7638,7 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
     onCheckedChange: onChange,
     ref: ref
   }), /*#__PURE__*/React.createElement(PrimitiveSwitch.Thumb, {
-    className: "'will-change-transform mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform group-disabled:opacity-50 group-aria-checked:translate-x-[1.1rem]"
+    className: "pointer-events-none mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform will-change-transform group-disabled:opacity-50 group-aria-checked:translate-x-[1.1rem]"
   }));
   if (label) {
     const labelContainerClassName = cn('flex self-start cursor-pointer', {
@@ -8706,10 +8698,10 @@ const ModeSwitch = /*#__PURE__*/React.forwardRef(function ModeSwitch(props, ref)
     onCheckedChange: onChange,
     ref: ref
   }), /*#__PURE__*/React.createElement(PrimitiveSwitch.Thumb, {
-    className: "'will-change-transform flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform group-disabled:opacity-50 group-aria-checked:translate-x-[100%]"
+    className: "pointer-events-none flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform will-change-transform group-disabled:opacity-50 group-aria-checked:translate-x-[100%]"
   }, /*#__PURE__*/React.createElement(Icon, {
     name: "edit-simple",
-    className: "!h-5 !w-5"
+    className: "pointer-events-none !h-5 !w-5"
   })));
 });
 ModeSwitch.displayName = 'ModeSwitch';
@@ -10412,6 +10404,15 @@ function configureReactTableOptions(options, props, localization) {
   // We don't want to expose internal Tanstack Table row, so we need to wrap enableRowSelection callback into additional function,
   // which receives the React Table Row object and passes row.original to a callback.
   const reactTableEnableRowSelection = typeof options.enableRowSelection === 'function' ? row => options.enableRowSelection(row.original) : options.enableRowSelection;
+  let getRowId;
+  if (props.rowIdentityAccessor) {
+    getRowId = (originalRow, index) => {
+      if (originalRow) {
+        return originalRow[props.rowIdentityAccessor];
+      }
+      return String(index);
+    };
+  }
   const tableOptions = {
     defaultColumn: {
       enableColumnFilter: options.enableFiltering || true,
@@ -10430,11 +10431,13 @@ function configureReactTableOptions(options, props, localization) {
     enableGrouping: true,
     enableHiding: (_options$enableColumn2 = options.enableColumnHiding) !== null && _options$enableColumn2 !== void 0 ? _options$enableColumn2 : false,
     enablePinning: (_options$enableColumn3 = options.enableColumnFreezing) !== null && _options$enableColumn3 !== void 0 ? _options$enableColumn3 : false,
+    enableRowPinning: true,
     enableRowSelection: reactTableEnableRowSelection !== null && reactTableEnableRowSelection !== void 0 ? reactTableEnableRowSelection : false,
     enableSorting: (_options$enableSortin = options.enableSorting) !== null && _options$enableSortin !== void 0 ? _options$enableSortin : false,
     // models for default features
     getExpandedRowModel: reactTable.getExpandedRowModel(),
     getGroupedRowModel: reactTable.getGroupedRowModel(),
+    getRowId,
     groupedColumnMode: false
   };
   if (tableOptions.enableColumnResizing) {
@@ -10978,13 +10981,13 @@ function useTableSearch(isEnabled = false, defaultEnableGlobalFilter = false) {
 }
 
 // A type of promise-like that resolves synchronously and supports only one observer
-const _Pact = /*#__PURE__*/function () {
+var _Pact = /*#__PURE__*/function () {
   function _Pact() {}
   _Pact.prototype.then = function (onFulfilled, onRejected) {
-    const result = new _Pact();
-    const state = this.s;
+    var result = new _Pact();
+    var state = this.s;
     if (state) {
-      const callback = state & 1 ? onFulfilled : onRejected;
+      var callback = state & 1 ? onFulfilled : onRejected;
       if (callback) {
         try {
           _settle(result, 1, callback(this.v));
@@ -10998,7 +11001,7 @@ const _Pact = /*#__PURE__*/function () {
     }
     this.o = function (_this) {
       try {
-        const value = _this.v;
+        var value = _this.v;
         if (_this.s & 1) {
           _settle(result, 1, onFulfilled ? onFulfilled(value) : value);
         } else if (onRejected) {
@@ -11035,7 +11038,7 @@ function _settle(pact, state, value) {
     }
     pact.s = state;
     pact.v = value;
-    const observer = pact.o;
+    var observer = pact.o;
     if (observer) {
       observer(pact);
     }
@@ -11075,17 +11078,13 @@ function _forTo(array, body, check) {
   _cycle();
   return pact;
 }
-const _iteratorSymbol = /*#__PURE__*/typeof Symbol !== "undefined" ? Symbol.iterator || (Symbol.iterator = /*#__PURE__*/Symbol("Symbol.iterator")) : "@@iterator";
+var _iteratorSymbol = /*#__PURE__*/typeof Symbol !== "undefined" ? Symbol.iterator || (Symbol.iterator = /*#__PURE__*/Symbol("Symbol.iterator")) : "@@iterator";
 
 // Asynchronously iterate through an object's values
 // Uses for...of if the runtime supports it, otherwise iterates until length on a copy
 function _forOf(target, body, check) {
   if (typeof target[_iteratorSymbol] === "function") {
-    var iterator = target[_iteratorSymbol](),
-      step,
-      pact,
-      reject;
-    function _cycle(result) {
+    var _cycle = function _cycle(result) {
       try {
         while (!(step = iterator.next()).done && (!check || !check())) {
           result = body(step.value);
@@ -11106,13 +11105,17 @@ function _forOf(target, body, check) {
       } catch (e) {
         _settle(pact || (pact = new _Pact()), 2, e);
       }
-    }
+    };
+    var iterator = target[_iteratorSymbol](),
+      step,
+      pact,
+      reject;
     _cycle();
-    if (iterator.return) {
-      var _fixup = function (value) {
+    if (iterator["return"]) {
+      var _fixup = function _fixup(value) {
         try {
           if (!step.done) {
-            iterator.return();
+            iterator["return"]();
           }
         } catch (e) {}
         return value;
@@ -11139,7 +11142,7 @@ function _forOf(target, body, check) {
     return body(values[i]);
   }, check);
 }
-const _asyncIteratorSymbol = /*#__PURE__*/typeof Symbol !== "undefined" ? Symbol.asyncIterator || (Symbol.asyncIterator = /*#__PURE__*/Symbol("Symbol.asyncIterator")) : "@@asyncIterator";
+var _asyncIteratorSymbol = /*#__PURE__*/typeof Symbol !== "undefined" ? Symbol.asyncIterator || (Symbol.asyncIterator = /*#__PURE__*/Symbol("Symbol.asyncIterator")) : "@@asyncIterator";
 
 // Asynchronously call a function and send errors to recovery continuation
 function _catch(body, recover) {
@@ -11767,7 +11770,7 @@ function useTableManager(props, meta, internalColumns) {
       rowDrag,
       rowDrop: rowDrop,
       rowExpansion: rowExpansion,
-      rowIdentityColumnId: props.rowIdentityColumnId,
+      rowIdentityAccessor: props.rowIdentityAccessor,
       rowGoto,
       rowGroups: rowGroups,
       rowHeight,
@@ -12135,7 +12138,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.getRowModel().rows;
+  const rows = table.getCenterRows();
   const isTableRowGrouped = !!((_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length);
   // expanded rows
   const {
@@ -12314,12 +12317,14 @@ function Actions$1(props) {
     actionsLength,
     data,
     isActiveRow,
-    rowId
+    rowId,
+    table
   } = props;
   const {
     texts
   } = useLocalization();
-  const visibleActions = actions.map(action => action(data, rowId)).filter(action => !!action);
+  // we don't want to document passing table, so it isn't on the type
+  const visibleActions = actions.map(action => action(data, rowId, table)).filter(action => !!action);
   const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);
   const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);
   const className = cn('flex justify-end text-right bg-[inherit] shadow-[-6px_0px_6px_var(--table-row-actions-shadow)] print:hidden');
@@ -12375,7 +12380,8 @@ const Cell = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
       actionsLength: actionsLength,
       data: row.original,
       isActiveRow: isActiveRow,
-      rowId: row.id
+      rowId: row.id,
+      table: table
     });
   }
   return null;
@@ -12732,7 +12738,10 @@ function GroupedCell(props) {
     index,
     isHighlighted
   } = props;
-  const tableMeta = cell.getContext().table.options.meta;
+  const {
+    table
+  } = cell.getContext();
+  const tableMeta = table.options.meta;
   const columnMeta = cell.column.columnDef.meta;
   const attributes = getCellAttributes(cell, index, isHighlighted);
   const {
@@ -12750,7 +12759,8 @@ function GroupedCell(props) {
     colSpan: colSpan,
     rowActions: tableMeta.rowGroups.rowActionsForGroup,
     rowId: cell.row.id,
-    subRows: subRows
+    subRows: subRows,
+    table: table
   }), content);
 }
 const MemoedGroupedCell = /*#__PURE__*/React__default.memo(function MemoedGroupedCell(props) {
@@ -12762,6 +12772,7 @@ const MemoedGroupedCell = /*#__PURE__*/React__default.memo(function MemoedGroupe
     rowActions,
     rowId,
     subRows,
+    table,
     ...attributes
   } = props;
   return /*#__PURE__*/React__default.createElement("td", Object.assign({}, attributes, {
@@ -12776,7 +12787,8 @@ const MemoedGroupedCell = /*#__PURE__*/React__default.memo(function MemoedGroupe
     actionsLength: 4,
     data: subRows,
     isActiveRow: true,
-    rowId: rowId
+    rowId: rowId,
+    table: table
   })) : null);
 });
 
@@ -12916,7 +12928,7 @@ const DisplayRow = /*#__PURE__*/React__default.memo(function DisplayRow(props) {
   const expansionRef = React__default.useRef(null);
   const isExpanded = !!attributes['data-row-expanded'];
   useSetVirtualisedRowHeight(measureRow, ref.current, expansionRef.current, isExpanded);
-  const className = cn('group/row', {
+  const className = cn('group/row', otherAttributes.className, {
     'hover:cursor-grab': tableMeta.rowDrag.isEnabled && typeof attributes.onClick !== 'function',
     'hover:cursor-pointer': typeof attributes.onClick === 'function'
   });
@@ -13222,11 +13234,11 @@ function HeaderMenu(props) {
                 return Promise.reject(e);
               }
             };
-            popoverElement = props => (/*#__PURE__*/React__default.createElement(GotoPopover, Object.assign({}, props, {
+            popoverElement = props => /*#__PURE__*/React__default.createElement(GotoPopover, Object.assign({}, props, {
               open: true,
               onChange: handleClosePopover,
               onGoto: goto
-            })));
+            }));
           }
         }
     }
@@ -13569,10 +13581,10 @@ const FOCUS_MANAGER_OPTIONS_ARROW_KEYS = {
 };
 function useAugmentedFocusManager() {
   const focusManager = focus.useFocusManager();
-  const focusPrevious = (arrowNavigation = false) => focusManager === null || focusManager === void 0 ? void 0 : focusManager.focusPrevious(arrowNavigation ? FOCUS_MANAGER_OPTIONS_ARROW_KEYS : FOCUS_MANAGER_OPTIONS_TAB);
-  const focusNext = (arrowNavigation = false) => focusManager === null || focusManager === void 0 ? void 0 : focusManager.focusNext(arrowNavigation ? FOCUS_MANAGER_OPTIONS_ARROW_KEYS : FOCUS_MANAGER_OPTIONS_TAB);
-  const focusFirst = () => focusManager === null || focusManager === void 0 ? void 0 : focusManager.focusFirst(FOCUS_MANAGER_OPTIONS_TAB);
-  const focusLast = () => focusManager === null || focusManager === void 0 ? void 0 : focusManager.focusLast(FOCUS_MANAGER_OPTIONS_TAB);
+  const focusPrevious = (arrowNavigation = false) => focusManager.focusPrevious(arrowNavigation ? FOCUS_MANAGER_OPTIONS_ARROW_KEYS : FOCUS_MANAGER_OPTIONS_TAB);
+  const focusNext = (arrowNavigation = false) => focusManager.focusNext(arrowNavigation ? FOCUS_MANAGER_OPTIONS_ARROW_KEYS : FOCUS_MANAGER_OPTIONS_TAB);
+  const focusFirst = () => focusManager.focusFirst(FOCUS_MANAGER_OPTIONS_TAB);
+  const focusLast = () => focusManager.focusLast(FOCUS_MANAGER_OPTIONS_TAB);
   return {
     focusPrevious,
     focusNext,
@@ -13710,7 +13722,7 @@ function Summary(props) {
 
 function Foot(props) {
   const nonGroupedHeaders = props.table.getFooterGroups()[0].headers.filter(header => !header.column.getIsGrouped());
-  return /*#__PURE__*/React__default.createElement("tfoot", null, /*#__PURE__*/React__default.createElement("tr", null, nonGroupedHeaders.map((header, index) => (/*#__PURE__*/React__default.createElement(Footer$3, {
+  return /*#__PURE__*/React__default.createElement("tfoot", null, props.children, /*#__PURE__*/React__default.createElement("tr", null, nonGroupedHeaders.map((header, index) => (/*#__PURE__*/React__default.createElement(Footer$3, {
     key: header.id,
     header: header,
     index: index
@@ -14089,7 +14101,7 @@ function Container(externalProps) {
     if (!(activeList !== null && activeList !== void 0 && activeList.id) || !(overList !== null && overList !== void 0 && overList.id) || activeList.id === overList.id) {
       return;
     }
-    move === null || move === void 0 ? void 0 : move(active.id, activeList === null || activeList === void 0 ? void 0 : activeList.id, overList.id);
+    move(active.id, activeList === null || activeList === void 0 ? void 0 : activeList.id, overList.id);
   }
   function handleDragEnd(event) {
     const {
@@ -14400,12 +14412,12 @@ const getOptionsFromCollection = (collection, selector) => collection.querySelec
 const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(props, ref) {
   const {
     querySelector,
+    resetOnChange,
     tabIndex = 0,
     ...otherProps
   } = props;
   const internalRef = useMergedRef(ref);
   const [activeIndex, setActiveIndex] = React__default.useState();
-  const lastLengthRef = React__default.useRef(0);
   const setActiveOption = (index, collection, option) => {
     var _collection$querySele;
     (_collection$querySele = collection.querySelector(`[aria-current]`)) === null || _collection$querySele === void 0 ? void 0 : _collection$querySele.removeAttribute('aria-current');
@@ -14428,17 +14440,34 @@ const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(prop
   }, [internalRef.current, querySelector]);
   React__default.useEffect(() => {
     if (internalRef.current) {
-      internalRef.current.setActiveIndex = setActiveIndexByElement;
+      internalRef.current.setActiveIndexByElement = setActiveIndexByElement;
     }
   }, [internalRef.current]);
+  React__default.useEffect(() => {
+    if (internalRef.current) {
+      const selected = internalRef.current.querySelectorAll(`[aria-current="true"]`);
+      const options = getOptionsFromCollection(internalRef.current, querySelector);
+      if (options.length && selected.length === 1) {
+        const firstSelected = internalRef.current.querySelector(`[aria-selected]`);
+        if (firstSelected) {
+          const selectedIndex = Array.from(options).indexOf(firstSelected);
+          if (selectedIndex > -1) {
+            setActiveOption(selectedIndex, internalRef.current, firstSelected);
+          }
+        }
+      }
+    }
+  }, [resetOnChange]);
   React__default.useEffect(() => {
     if (internalRef.current) {
       const options = getOptionsFromCollection(internalRef.current, querySelector);
-      if (options.length && options.length !== lastLengthRef.current) {
+      if (options.length) {
         let selected = internalRef.current.querySelectorAll(`[aria-current="true"]`);
+        // if nothing is current (keyboard visible), look for selected items
         if (selected.length === 0) {
           selected = internalRef.current.querySelectorAll(`[aria-selected]`);
         }
+        // if one item is selected, make sure it's current
         if (selected.length === 1) {
           if (options) {
             const firstSelected = selected.item(0);
@@ -14452,7 +14481,6 @@ const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(prop
           setActiveOption(0, internalRef.current, options.item(0));
         }
       }
-      lastLengthRef.current = options.length;
     }
   }, [props.children]);
   const handleClick = event => {
@@ -14585,6 +14613,7 @@ const Root$1 = /*#__PURE__*/React__default.forwardRef(function Listbox2(props, r
     id: id,
     querySelector: customSelector ? `${DEFAULT_SELECTOR}, ${customSelector}` : DEFAULT_SELECTOR,
     ref: ref,
+    resetOnChange: value,
     role: "listbox"
   }), children)));
 });
@@ -14750,6 +14779,16 @@ const getFontSize = fontSize => {
       return 'text-sm';
   }
 };
+const filterOption = (child, searchQuery) => {
+  var _child$props$textValu, _child$props$descript;
+  if ((_child$props$textValu = child.props.textValue) !== null && _child$props$textValu !== void 0 && _child$props$textValu.toLowerCase().includes(searchQuery.toLowerCase())) {
+    return true;
+  }
+  if ((_child$props$descript = child.props.description) !== null && _child$props$descript !== void 0 && _child$props$descript.toLowerCase().includes(searchQuery.toLowerCase())) {
+    return true;
+  }
+  return String(child.props.children).toLowerCase().includes(searchQuery.toLowerCase());
+};
 
 const Select2Context = /*#__PURE__*/React__default.createContext({});
 const useSelect2Context = () => React__default.useContext(Select2Context);
@@ -14908,6 +14947,7 @@ const Colours = props => {
   const {
     color,
     onChangeColor,
+    onClick,
     onKeyDown
   } = props;
   const {
@@ -14916,6 +14956,7 @@ const Colours = props => {
   return /*#__PURE__*/React__default.createElement(RadioGroupPrimitive.Root, {
     "aria-label": texts.select2.chooseColor,
     className: "grid grid-cols-4 gap-2 focus:outline-none",
+    onClick: onClick,
     onKeyDown: onKeyDown,
     onValueChange: color => onChangeColor(color),
     value: color
@@ -15020,7 +15061,7 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
     onClick: event => {
       var _listboxRef$current;
       event.stopPropagation();
-      listboxRef === null || listboxRef === void 0 ? void 0 : (_listboxRef$current = listboxRef.current) === null || _listboxRef$current === void 0 ? void 0 : _listboxRef$current.setActiveIndex(event.currentTarget.parentElement);
+      listboxRef === null || listboxRef === void 0 ? void 0 : (_listboxRef$current = listboxRef.current) === null || _listboxRef$current === void 0 ? void 0 : _listboxRef$current.setActiveIndexByElement(event.currentTarget.parentElement);
     },
     popover: popover,
     tabIndex: -1
@@ -15435,7 +15476,7 @@ const Search$2 = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(p
     }
   };
   return /*#__PURE__*/React__default.createElement(Field, {
-    className: cn('mx-1.5 mb-1.5 !min-h-fit ', {
+    className: cn('mx-1.5 mb-1.5 !min-h-fit', {
       '!pb-0': !validationError
     }),
     invalid: !!validationError,
@@ -15501,32 +15542,21 @@ const useChildren = ({
     setSearchQuery
   };
 };
-const filterOption = (child, searchQuery) => {
-  var _child$props$textValu, _child$props$descript;
-  if ((_child$props$textValu = child.props.textValue) !== null && _child$props$textValu !== void 0 && _child$props$textValu.toLowerCase().includes(searchQuery.toLowerCase())) {
-    return true;
-  }
-  if ((_child$props$descript = child.props.description) !== null && _child$props$descript !== void 0 && _child$props$descript.toLowerCase().includes(searchQuery.toLowerCase())) {
-    return true;
-  }
-  return String(child.props.children).toLowerCase().includes(searchQuery.toLowerCase());
-};
 
 const getNextColor = options => {
-  const occurrences = AVAILABLE_COLORS.reduce((prev, color) => {
-    if (color !== 'transparent') {
-      return {
-        ...prev,
-        [color]: 0
-      };
-    }
-    return prev;
-  }, {});
-  options.forEach(option => {
+  let occurrences = {};
+  AVAILABLE_COLORS.filter(color => color !== 'transparent').forEach(color => {
+    occurrences = {
+      ...occurrences,
+      [color]: 0
+    };
+  });
+  options.reduce((occurrences, option) => {
     if (option.props.color) {
       occurrences[option.props.color] = occurrences[option.props.color] ? occurrences[option.props.color] + 1 : 1;
     }
-  });
+    return occurrences;
+  }, occurrences);
   const colors = Object.keys(occurrences);
   if (colors.length) {
     return colors.sort((a, b) => occurrences[a] - occurrences[b])[0];
@@ -15727,6 +15757,26 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     createDialog,
     createTriggerText
   };
+  const hasInlineCreation = onCreate && !createDialog;
+  const hasSearch = flattenedChildren.length > 5 || hasInlineCreation;
+  const visibleChildren = searchQuery === '' ? initialChildren : filteredChildren;
+  const selectOptions = searchQuery === '' ? flattenedChildren.map(child => child.props.value) : filteredChildren.map(child => isGroup(child) ? Array.isArray(child.props.children) && child.props.children.map(subChild => subChild.props.value) : child.props.value).flatMap(c => c) || [];
+  // support typeahead functionality when search isn't available
+  const queryTimeoutRef = React__default.useRef('');
+  const typeahead = debounce(function () {
+    if (!queryTimeoutRef.current) {
+      return;
+    }
+    const matchedValueIndex = visibleChildren.findIndex(child => filterOption(child, queryTimeoutRef.current));
+    if (matchedValueIndex > -1) {
+      setValue(selectOptions[matchedValueIndex]);
+    }
+    queryTimeoutRef.current = '';
+  }, 200);
+  const setValueIfMatched = query => {
+    queryTimeoutRef.current = queryTimeoutRef.current + query;
+    typeahead();
+  };
   const handleKeyDown = event => {
     var _listboxRef$current;
     if (open) {
@@ -15735,6 +15785,9 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
       return;
     } else if (!event.ctrlKey && !event.metaKey && (event.key === 'ArrowDown' || /^[a-z0-9]$/i.test(event.key))) {
       setOpen(true);
+      if (!hasSearch) {
+        setValueIfMatched(event.key);
+      }
     }
     // 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));
@@ -15761,6 +15814,9 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     if (isAriaDirectionKey(event)) {
       setShouldPauseHoverState(true);
     }
+    if (!hasSearch && /^[a-z0-9]$/i.test(event.key)) {
+      setValueIfMatched(event.key);
+    }
   };
   const handleCloseAutoFocus = event => {
     event.preventDefault();
@@ -15778,7 +15834,6 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
       (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
     }
   };
-  const selectOptions = searchQuery === '' ? flattenedChildren.map(child => child.props.value) : filteredChildren.map(child => isGroup(child) ? Array.isArray(child.props.children) && child.props.children.map(subChild => subChild.props.value) : child.props.value).flatMap(c => c) || [];
   const areAllSelected = Array.isArray(value) && selectOptions.every(option => value.includes(option));
   const selectAllText = React__default.useMemo(() => {
     if (searchQuery === '') {
@@ -15810,8 +15865,6 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
       setValue(nextValue);
     }
   };
-  const hasInlineCreation = onCreate && !createDialog;
-  const hasSearch = flattenedChildren.length > 5 || hasInlineCreation;
   const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md ', {
     'focus-within:yt-focus': !hasSearch,
     'outline-none': hasSearch
@@ -15878,7 +15931,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     ref: listboxRef,
     setValue: setValue,
     value: value
-  }, searchQuery === '' ? (/*#__PURE__*/React__default.createElement(Collection$1, null, initialChildren)) : (/*#__PURE__*/React__default.createElement(Collection$1, null, filteredChildren)), onCreate ? /*#__PURE__*/React__default.createElement(Create, {
+  }, /*#__PURE__*/React__default.createElement(Collection$1, null, visibleChildren), onCreate ? /*#__PURE__*/React__default.createElement(Create, {
     onCreate: onCreate,
     options: flattenedChildren
   }) : null))))), /*#__PURE__*/React__default.createElement(ControlledHiddenField, {
@@ -16367,7 +16420,6 @@ function Control(props) {
   } = props;
   const controlRenderer = column === null || column === void 0 ? void 0 : (_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.control;
   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;
-  const ref = React__default.useRef(null);
   React.useEffect(() => {
     // Set value to false only after first render of the control (when it's undefined) after setting the FilterColumn value, because we don't want to change then the value every time filter is opened
     if (controlRenderer === 'switch' && value === undefined) {
@@ -16378,8 +16430,7 @@ function Control(props) {
     return /*#__PURE__*/React__default.cloneElement(controlRenderer({
       ...attributes,
       setValue: value => onChange(value),
-      value,
-      ref
+      value
     }), {
       ['data-query-selector']: querySelector,
       className: 'focus:yt-focus'
@@ -16747,6 +16798,7 @@ function TableGrid(props) {
   var _table$state$grouping;
   const {
     enableHorizontalArrowKeyNavigation,
+    rowsForFooter,
     table,
     ...attributes
   } = props;
@@ -16754,8 +16806,6 @@ function TableGrid(props) {
     table.meta.rowActive.handleFocus(event, table.meta.length, table.renderer.scrollToIndex);
   } : undefined;
   const filterReason = getFilterReason(table);
-  const searchNotApplied = !table.state.globalFilter || table.state.globalFilter === '';
-  const filtersNotApplied = !table.state.columnFilters || table.state.columnFilters.length === 0;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("style", null, table.stylesheet), /*#__PURE__*/React__default.createElement(focus.FocusScope, null, /*#__PURE__*/React__default.createElement("table", Object.assign({}, attributes, {
     id: table.id,
     "data-table-font-size": table.meta.fontSize.size,
@@ -16788,9 +16838,9 @@ function TableGrid(props) {
       ...table.renderer.style,
       height: table.renderer.style.height + ROW_HEIGHT_ESTIMATES[table.meta.rowHeight.height]
     } : table.renderer.style
-  }, table.renderer.rows, searchNotApplied && filtersNotApplied && props.children), table.meta.footer.isEnabled ? /*#__PURE__*/React__default.createElement(Foot, {
+  }, table.renderer.rows, props.children), table.meta.footer.isEnabled ? /*#__PURE__*/React__default.createElement(Foot, {
     table: table.instance
-  }) : null)))));
+  }, rowsForFooter) : null)))));
 }
 
 function Column$1(_) {
@@ -18293,33 +18343,16 @@ const useTableRowCreation = (data, tableRef) => {
 
 function useTableEditingListener(table, tableRef) {
   const tableMeta = table.options.meta;
-  const completedRowsCount = tableMeta.editing.getCompletedRowsCount();
   const localization = useLocalization();
-  const saveChanges = () => {
-    requestAnimationFrame(() => {
-      tableMeta.editing.saveChanges();
-    });
-  };
   // save when the row changes
+  // store the last row active index, otherwise everytime tableMeta.editing.saveChanges changes the hook runs again
+  const lastRowActiveIndexRef = React__default.useRef(tableMeta.rowActive.rowActiveIndex);
   useLazyEffect(() => {
-    if (tableMeta.editing.isEditing) {
-      saveChanges();
-    }
-  }, [tableMeta.rowActive.rowActiveIndex]);
-  useLazyEffect(() => {
-    if (tableMeta.editing.isEditing) {
-      if (tableMeta.rowActive.rowActiveIndex === undefined) {
-        tableMeta.rowActive.setRowActiveIndex(0);
-      }
-    } else {
-      // save
-      saveChanges();
-      // reset detailed mode
-      tableMeta.editing.toggleDetailedMode(false);
-      // reset the last index back to the first focusable element, when editing gets turned off
-      tableMeta.editing.setLastFocusedCellIndex(undefined);
+    if (tableMeta.editing.isEditing && tableMeta.rowActive.rowActiveIndex !== lastRowActiveIndexRef.current) {
+      lastRowActiveIndexRef.current = tableMeta.rowActive.rowActiveIndex;
+      tableMeta.editing.saveChanges(table);
     }
-  }, [tableMeta.editing.isEditing]);
+  }, [tableMeta.rowActive.rowActiveIndex, tableMeta.editing.saveChanges]);
   // show a warning if the user navigates away without triggering save, such as using the browser back/forward button
   const hasChanges = tableMeta.editing.hasChanges();
   React__default.useEffect(() => {
@@ -18335,25 +18368,46 @@ function useTableEditingListener(table, tableRef) {
       window.removeEventListener('beforeunload', showUnsavedChangesWarning);
     };
   }, [tableMeta.editing.isEditing, hasChanges]);
-  React__default.useEffect(() => {
-    if (completedRowsCount > 0) {
+  const hasSavedChanges = tableMeta.editing.hasSaved();
+  useLazyEffect(() => {
+    if (hasSavedChanges) {
       resetHighlightedColumnIndexes(table.getState().globalFilter, table, localization);
     }
-  }, [completedRowsCount]);
+  }, [hasSavedChanges]);
   React__default.useEffect(() => {
     const onClickOutside = event => {
       if (tableMeta.editing.isEditing) {
-        var _event$target$getAttr, _event$target;
-        const element = (_event$target$getAttr = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.getAttribute('data-taco')) !== null && _event$target$getAttr !== void 0 ? _event$target$getAttr : '';
-        const insideTable = isElementInsideOrTriggeredFromContainer(event.target, tableRef.current) || element === 'backdrop';
-        if (!insideTable) {
-          saveChanges();
+        const element = event.target;
+        const insideTable = element.getAttribute('data-taco') === 'backdrop' || element.getAttribute('data-table') === 'editing-toggle' || isElementInsideOrTriggeredFromContainer(element, tableRef.current);
+        // users can click the white space below rows which could be inside the table, but a valid scenario to save
+        if (!insideTable || element.tagName === 'TABLE' || element.tagName === 'TBODY') {
+          tableMeta.editing.saveChanges(table);
         }
       }
     };
     document.addEventListener('click', onClickOutside);
     return () => document.removeEventListener('click', onClickOutside);
-  }, [saveChanges, tableMeta.editing.isEditing]);
+  }, [tableMeta.editing.isEditing, tableMeta.editing.saveChanges]);
+  const rows = table.getRowModel().rows;
+  // make sure pending changes are removed for rows that no longer exist
+  useLazyEffect(() => {
+    const pendingChanges = tableMeta.editing.getErrorsShownInAlert();
+    pendingChanges.forEach(pendingChange => {
+      try {
+        table.getRow(pendingChange.rowId);
+      } catch {
+        tableMeta.editing.discardChanges(pendingChange.rowId, table);
+      }
+    });
+  }, [rows.length]);
+  useGlobalKeyDown(tableMeta.editing.isEditing ? {
+    key: 's',
+    meta: true,
+    shift: false
+  } : undefined, event => {
+    event.preventDefault();
+    tableMeta.editing.saveChanges(table);
+  });
 }
 
 function willRowMove(cell, change, rowIndex, localization) {
@@ -18414,7 +18468,7 @@ function willRowMoveAfterSorting(cell, change, rowIndex) {
   if (rowIndex < rows.length - 1) {
     miniSortRows.push(rows[rowIndex + 1]);
   }
-  const sortRows = (rowA, rowB) => {
+  const resortedRows = [...miniSortRows].sort((rowA, rowB) => {
     const sortFn = cell.column.getSortingFn();
     const sortUndefined = cell.column.columnDef.sortUndefined;
     if (!table.options.manualSorting && sortUndefined) {
@@ -18429,451 +18483,545 @@ function willRowMoveAfterSorting(cell, change, rowIndex) {
       }
     }
     return sortFn(rowA, rowB, cell.column.id);
-  };
-  const resortedRows = [...miniSortRows].sort(sortRows);
+  });
   if (cell.column.getIsSorted() === 'desc') {
     resortedRows.reverse();
   }
   return ((_resortedRows$index = resortedRows[index]) === null || _resortedRows$index === void 0 ? void 0 : _resortedRows$index.id) !== cell.row.id;
 }
-function animateCreateRow(id) {
-  const templateRow = document.querySelector(`[data-row-id="${id}"]`);
-  if (templateRow) {
-    const firstCell = templateRow.querySelector(':first-child');
-    const checkbox = firstCell === null || firstCell === void 0 ? void 0 : firstCell.querySelector('[data-taco="checkbox"]');
-    firstCell === null || firstCell === void 0 ? void 0 : firstCell.focus();
-    if (checkbox) {
-      setDataFocusAttribute(checkbox);
-    }
-    templateRow.scrollIntoView();
-    const keyframes = [{
-      background: '#b2c7ef'
-    }, {
-      background: '#ebebeb'
-    }];
-    for (const child of templateRow.children) {
-      child.animate(keyframes, {
-        duration: 1000,
-        easing: 'ease-out'
-      });
-    }
-  }
-}
 
-function useTableEditing(isEnabled = false, handleSave, handleChange, validator) {
-  // used to switch the table into editing mode
-  const [isEditing, toggleEditing] = React__default.useState(false);
-  // used to switch the editing between "detailed" mode
-  const [isDetailedMode, toggleDetailedMode] = React__default.useState(false);
-  // store the last focused cell, so that up/down arrow key navigation remains in the same column
-  const [lastFocusedCellIndex, setLastFocusedCellIndex] = useLastFocusedCellIndex();
-  // store pending changes for each row
-  // changes are saved as soon as the active row changes, so in most cases this will only contain the active row's changes
-  // but not always - if validation or server requests fail when saving, those rows remain until the failure is resolved
-  const pendingChangesFns = usePendingChanges(isEnabled, handleSave, handleChange, validator);
-  useGlobalKeyDown(isEnabled && isEditing ? {
-    key: 's',
-    meta: true,
-    shift: false
-  } : undefined, event => {
-    event.preventDefault();
-    pendingChangesFns.saveChanges();
-  });
-  return {
-    isEnabled,
-    isEditing,
-    isDetailedMode,
-    toggleDetailedMode: isEnabled ? toggleDetailedMode : () => undefined,
-    toggleEditing: isEnabled ? toggleEditing : () => undefined,
-    lastFocusedCellIndex,
-    setLastFocusedCellIndex,
-    ...pendingChangesFns
-  };
+const 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 usePendingChanges(isEnabled, handleSave, handleChange, validator) {
-  const saveChanges = function (rowId = undefined) {
+function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, validator) {
+  const saveChanges = function (table, rowId = undefined) {
     try {
       let _exit = false;
       if (!handleSave) {
         console.warn('Tried to save, but Table has no onEditingSave handler');
-        return Promise.resolve();
+        return Promise.resolve(false);
       }
-      // we save back to pendingChanges, so make a copy of it's state when save was triggered
-      const changesToSave = rowId ? {
-        [rowId]: pendingChanges[rowId]
-      } : {
-        ...pendingChanges
-      };
-      const changes = Object.keys(changesToSave);
-      return Promise.resolve(function () {
-        if (changes.length) {
-          return _forOf(changes, function (rowId) {
-            const pendingChange = changesToSave[rowId];
-            const changeSet = getChangesetFromChanges(pendingChange);
-            return _catch(function () {
-              function _temp3(_result) {
-                return _exit ? _result : Promise.resolve(handleSave(changeSet)).then(function () {
-                  // cleanup changes, we don't need them after saving
-                  resetChanges(rowId);
-                  setRowSaveStatus(rowId, 'complete');
-                });
-              }
-              if (getRowSaveStatus(rowId) === 'pending') {
-                _exit = true;
-                return;
-              }
-              // set saving = true
-              setRowSaveStatus(rowId, 'pending');
-              // re-run validation, maybe a cell is already invalid but has never been blurred
-              const _temp2 = function () {
-                if (validator) {
-                  return Promise.resolve(validator(changeSet)).then(function (errors) {
-                    if (errors && Object.keys(errors).length) {
-                      throw errors;
-                    }
-                  });
-                }
-              }();
-              return _temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2); // send new data to the server
-            }, function (error) {
-              // the onEditingSave handler should throw errors when something fails, e.g. validation, network errors etc
-              // this code handles those errors and maps them either to row errors or cell specific errors
-              let rowError;
-              let cellErrors;
-              if (typeof error === 'string') {
-                rowError = error;
-              } else if (error instanceof Error) {
-                var _error$response;
-                rowError = error.message;
-                // most of our apis return error objects within this shape
-                if (typeof ((_error$response = error.response) === null || _error$response === void 0 ? void 0 : _error$response.data) === 'object') {
-                  var _error$response2;
-                  cellErrors = (_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : _error$response2.data;
+      // sometimes we only want to save one row
+      const changes = rowId ? {
+        [rowId]: state.changes.rows[rowId]
+      } : state.changes.rows;
+      let completed = true;
+      const _temp9 = _forOf(Object.keys(changes), function (rowId) {
+        const status = getRowStatus(rowId);
+        return _catch(function () {
+          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;
                 }
-              } else if (typeof error === 'object') {
-                cellErrors = error;
-              }
-              if (rowError || cellErrors) {
-                setPendingChanges(currentChanges => {
-                  const nextChanges = {
-                    ...currentChanges
-                  };
-                  nextChanges[rowId]._meta.errors = {
-                    row: rowError,
-                    cells: cellErrors,
-                    shouldShowErrorAlert: true
-                  };
-                  return nextChanges;
-                });
+              });
+            }
+          }();
+          return _temp7 && _temp7.then ? _temp7.then(_temp8) : _temp8(_temp7); // send new data to the server
+        }, function (error) {
+          var _error$response;
+          if (error instanceof ReferenceError || error instanceof TypeError || (error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : _error$response.status) >= 500) {
+            console.error(error);
+          }
+          // the onEditingSave handler should throw errors when something fails, e.g. validation, network errors etc
+          // this code handles those errors and maps them either to row errors or cell specific errors
+          let rowError;
+          let cellErrors;
+          if (typeof error === 'string') {
+            rowError = error;
+          } else if (error instanceof Error) {
+            var _error$response2;
+            rowError = error.message;
+            // most of our apis return error objects within this shape
+            if (typeof ((_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : _error$response2.data) === 'object') {
+              var _error$response3;
+              cellErrors = (_error$response3 = error.response) === null || _error$response3 === void 0 ? void 0 : _error$response3.data;
+            }
+          } else if (typeof error === 'object') {
+            cellErrors = error;
+          }
+          if (rowError || cellErrors) {
+            dispatch({
+              type: 'setRowErrors',
+              rowId,
+              payload: {
+                row: rowError,
+                cells: cellErrors,
+                shouldShowErrorAlert: true
               }
-              setRowSaveStatus(rowId, undefined);
             });
-          }, function () {
-            return _exit;
-          });
-        }
-      }());
+          }
+          setRowStatus(rowId, 'errored');
+          completed = false;
+        });
+      }, function () {
+        return _exit;
+      });
+      return Promise.resolve(_temp9 && _temp9.then ? _temp9.then(function (_result3) {
+        return _exit ? _result3 : completed;
+      }) : _exit ? _temp9 : completed);
     } catch (e) {
       return Promise.reject(e);
     }
   };
-  const validateCell = function (cell) {
+  const onCellChanged = function (cell, rowIndex) {
     try {
-      if (!validator || !isEnabled) {
-        return Promise.resolve();
-      }
-      const changeSet = getChangesetFromChanges(pendingChanges[cell.row.id]);
-      // only validate if the cell being blurred actually has any changes
-      const _temp = function () {
-        if (cell.column.id in changeSet) {
-          return Promise.resolve(validator(changeSet)).then(function (errors) {
-            setPendingChanges(currentChanges => {
-              const nextChanges = {
-                ...currentChanges
-              };
-              nextChanges[cell.row.id]._meta = {
-                ...nextChanges[cell.row.id]._meta,
-                errors: {
-                  ...nextChanges[cell.row.id]._meta.errors,
-                  cells: errors,
-                  shouldShowErrorAlert: !Object.keys(errors).length ? false : nextChanges[cell.row.id]._meta.errors.shouldShowErrorAlert
+      function _temp6() {
+        var _state$changes$errors8;
+        function _temp4() {
+          // only set errors and move reasons for the cells we're currently acting on
+          // why? because the UX is not good if we set them for cells the user hasn't touched yet
+          const cellsToActOn = [cell.column.id, ...Object.keys(updatesForOtherCells)];
+          const allCells = cell.row._getAllCellsByColumnId();
+          cellsToActOn.forEach(accessor => {
+            if (validationErrors[accessor]) {
+              nextCellErrors[accessor] = validationErrors[accessor];
+              // don't show move indicator for cells with errors, they aren't valid and can't be saved
+              delete nextMoveReasons[accessor];
+            } else {
+              var _allCells$accessor;
+              // there isn't any error in this run, remove any error set in state
+              delete nextCellErrors[accessor];
+              if ((_allCells$accessor = allCells[accessor]) !== null && _allCells$accessor !== void 0 && _allCells$accessor.column.getIsSorted()) {
+                // run row move determination
+                const reason = willRowMove(cell, nextChanges[accessor], rowIndex, localization);
+                // if the row will move based on this change save why, otherwise delete any existing state
+                if (reason) {
+                  nextMoveReasons[accessor] = reason;
+                } else {
+                  delete nextMoveReasons[accessor];
                 }
-              };
-              return nextChanges;
+              }
+            }
+          });
+          dispatch({
+            type: 'updateRow',
+            rowId: cell.row.id,
+            payload: {
+              cellErrors: nextCellErrors,
+              moveReasons: nextMoveReasons,
+              value: nextChanges
+            }
+          });
+        }
+        // create a projection of the next state, so we can act against it
+        const nextChanges = {
+          ...state.changes.rows[cell.row.id],
+          ...updatesForOtherCells
+        };
+        const nextMoveReasons = {
+          ...state.changes.moveReasons[cell.row.id]
+        };
+        const nextCellErrors = {
+          ...((_state$changes$errors8 = state.changes.errors[cell.row.id]) === null || _state$changes$errors8 === void 0 ? void 0 : _state$changes$errors8.cells)
+        };
+        // run validation
+        let validationErrors = {};
+        const _temp3 = function () {
+          if (validator) {
+            const nextRowValue = {
+              ...state.changes.originals[cell.row.id],
+              ...changes,
+              ...updatesForOtherCells
+            };
+            return Promise.resolve(validator(nextRowValue)).then(function (_validator2) {
+              validationErrors = _validator2 !== null && _validator2 !== void 0 ? _validator2 : {};
             });
+          }
+        }();
+        return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
+      }
+      const changes = state.changes.rows[cell.row.id];
+      if (!changes) {
+        return Promise.resolve();
+      }
+      let updatesForOtherCells = {};
+      // run the updater handler if there is one, to see if there are any other cells to update
+      const _temp5 = function () {
+        if (typeof handleChange === 'function') {
+          const previousRowValue = {
+            ...state.changes.originals[cell.row.id]
+          };
+          const nextRowValue = {
+            ...state.changes.originals[cell.row.id],
+            ...changes
+          };
+          return Promise.resolve(handleChange(cell.column.id, changes[cell.column.id], nextRowValue, previousRowValue)).then(function (_handleChange) {
+            updatesForOtherCells = _handleChange !== null && _handleChange !== void 0 ? _handleChange : {};
           });
         }
       }();
-      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+      return Promise.resolve(_temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5));
     } catch (e) {
       return Promise.reject(e);
     }
-  };
-  const setCellValue = function (cell, change, rowIndex) {
+  }; // general
+  const createRow = function (data) {
     try {
-      const changes = {
-        [cell.column.id]: change
+      const newRowId = `${TEMPORARY_ROW_ID_PREFIX}${uuid.v4()}`;
+      const value = {
+        ...data,
+        [rowIdentityAccessor]: newRowId
       };
-      setPendingChanges(currentChanges => {
-        const nextChanges = createPendingChangesSetter(currentChanges, cell.row, rowIndex, changes, localization);
-        pendingChangesUpdater.syncCellChanges(nextChanges);
-        return nextChanges;
+      dispatch({
+        type: 'createRow',
+        rowId: newRowId,
+        payload: {
+          value
+        }
       });
-      pendingChangesUpdater.runCellUpdates(changes, cell, rowIndex);
-      return Promise.resolve();
+      return Promise.resolve(newRowId);
     } catch (e) {
       return Promise.reject(e);
     }
-  };
-  const addCreatedRowChangeset = function (row) {
+  }; // cells
+  // rows
+  const setRowValue = function (rowId, original, value) {
     try {
-      const cells = row.getAllCells();
-      setPendingChanges(currentChanges => {
-        return cells.reduce((changes, cell) => {
-          if (cell.getValue()) {
-            var _currentChanges$cell$, _currentChanges$cell$2, _currentChanges$cell$3;
-            return {
-              ...changes,
-              [cell.row.id]: {
-                ...changes[cell.row.id],
-                [cell.column.id]: cell.getValue(),
-                _meta: {
-                  ...((_currentChanges$cell$ = currentChanges[cell.row.id]) === null || _currentChanges$cell$ === void 0 ? void 0 : _currentChanges$cell$._meta),
-                  original: cell.row.original,
-                  moveReason: {
-                    ...((_currentChanges$cell$2 = currentChanges[cell.row.id]) === null || _currentChanges$cell$2 === void 0 ? void 0 : _currentChanges$cell$2._meta.moveReason)
-                  },
-                  errors: {
-                    ...((_currentChanges$cell$3 = currentChanges[cell.row.id]) === null || _currentChanges$cell$3 === void 0 ? void 0 : _currentChanges$cell$3._meta.errors)
-                  }
-                }
-              }
-            };
-          } else {
-            return changes;
+      function _temp2() {
+        dispatch({
+          type: 'updateRow',
+          rowId,
+          payload: {
+            cellErrors,
+            original,
+            value
           }
-        }, currentChanges);
-      });
-      return Promise.resolve();
-    } catch (e) {
+        });
+      }
+      let cellErrors;
+      const _temp = function () {
+        if (validator) {
+          const row = {
+            ...original,
+            ...value
+          };
+          return Promise.resolve(validator(row)).then(function (_validator) {
+            cellErrors = _validator !== null && _validator !== void 0 ? _validator : {};
+          });
+        }
+      }();
+      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
+    } catch (e) {
       return Promise.reject(e);
     }
   };
   const localization = useLocalization();
-  const [pendingChanges, setPendingChanges] = React__default.useState({});
-  // we maintain save status as separate state because 'complete' needs to briefly show after pendingChanges are deleted
-  const [saveStates, setSaveState] = React__default.useState({});
-  function getCellValue(cell) {
-    var _pendingChanges$cell$;
-    return (_pendingChanges$cell$ = pendingChanges[cell.row.id]) === null || _pendingChanges$cell$ === void 0 ? void 0 : _pendingChanges$cell$[cell.column.id];
+  const [state, dispatch] = React__default.useReducer(reducer$2, {
+    changes: {
+      rows: {},
+      errors: {},
+      moveReasons: {},
+      originals: {},
+      status: {}
+    },
+    temporaryRows: []
+  });
+  function getRowValue(rowId) {
+    var _state$changes$rows$r, _state$changes$rows;
+    return (_state$changes$rows$r = (_state$changes$rows = state.changes.rows) === null || _state$changes$rows === void 0 ? void 0 : _state$changes$rows[rowId]) !== null && _state$changes$rows$r !== void 0 ? _state$changes$rows$r : undefined;
   }
-  function getCellError(cell) {
-    var _pendingChanges$cell$2, _pendingChanges$cell$3, _pendingChanges$cell$4;
-    return (_pendingChanges$cell$2 = pendingChanges[cell.row.id]) === null || _pendingChanges$cell$2 === void 0 ? void 0 : (_pendingChanges$cell$3 = _pendingChanges$cell$2._meta.errors) === null || _pendingChanges$cell$3 === void 0 ? void 0 : (_pendingChanges$cell$4 = _pendingChanges$cell$3.cells) === null || _pendingChanges$cell$4 === void 0 ? void 0 : _pendingChanges$cell$4[cell.column.id];
+  function getRowMoveReason(rowId) {
+    var _Object$values$, _state$changes$moveRe, _state$changes$moveRe2;
+    return (_Object$values$ = Object.values((_state$changes$moveRe = (_state$changes$moveRe2 = state.changes.moveReasons) === null || _state$changes$moveRe2 === void 0 ? void 0 : _state$changes$moveRe2[rowId]) !== null && _state$changes$moveRe !== void 0 ? _state$changes$moveRe : {})[0]) !== null && _Object$values$ !== void 0 ? _Object$values$ : undefined;
   }
-  const pendingChangesUpdater = usePendingChangesUpdater(handleChange, setPendingChanges);
   function hasRowErrors(rowId) {
-    var _pendingChanges$rowId, _pendingChanges$rowId2, _pendingChanges$rowId3, _pendingChanges$rowId4, _pendingChanges$rowId5;
-    if (!isEnabled) {
-      return false;
-    }
-    return !!((_pendingChanges$rowId = pendingChanges[rowId]) !== null && _pendingChanges$rowId !== void 0 && (_pendingChanges$rowId2 = _pendingChanges$rowId._meta.errors) !== null && _pendingChanges$rowId2 !== void 0 && _pendingChanges$rowId2.row) || !!Object.keys((_pendingChanges$rowId3 = (_pendingChanges$rowId4 = pendingChanges[rowId]) === null || _pendingChanges$rowId4 === void 0 ? void 0 : (_pendingChanges$rowId5 = _pendingChanges$rowId4._meta.errors) === null || _pendingChanges$rowId5 === void 0 ? void 0 : _pendingChanges$rowId5.cells) !== null && _pendingChanges$rowId3 !== void 0 ? _pendingChanges$rowId3 : {}).length;
-  }
-  function hasRowErrorsSeen(rowId) {
-    var _pendingChanges$rowId6;
-    if (!isEnabled) {
-      return false;
-    }
-    return hasRowErrors(rowId) && !!((_pendingChanges$rowId6 = pendingChanges[rowId]._meta.errors) !== null && _pendingChanges$rowId6 !== void 0 && _pendingChanges$rowId6.shouldShowErrorAlert);
+    var _state$changes$errors, _state$changes$errors2, _state$changes$errors3;
+    return !!((_state$changes$errors = state.changes.errors[rowId]) !== null && _state$changes$errors !== void 0 && _state$changes$errors.row) || !!Object.keys((_state$changes$errors2 = (_state$changes$errors3 = state.changes.errors[rowId]) === null || _state$changes$errors3 === void 0 ? void 0 : _state$changes$errors3.cells) !== null && _state$changes$errors2 !== void 0 ? _state$changes$errors2 : {}).length;
   }
-  function getRowPendingChange(rowId) {
-    const rowPendingChanges = pendingChanges[rowId];
-    if (rowPendingChanges) {
-      const {
-        _meta,
-        ...pendingChange
-      } = rowPendingChanges;
-      return pendingChange;
-    }
-    return undefined;
+  function hasRowErrorsShownInAlert(rowId) {
+    var _state$changes$errors4;
+    return hasRowErrors(rowId) && !!((_state$changes$errors4 = state.changes.errors[rowId]) !== null && _state$changes$errors4 !== void 0 && _state$changes$errors4.shouldShowErrorAlert);
   }
-  function getRowSaveStatus(rowId) {
-    if (!isEnabled) {
-      return false;
-    }
-    return saveStates[rowId];
+  function getRowStatus(rowId) {
+    return state.changes.status[rowId];
   }
-  function setRowSaveStatus(rowId, status) {
-    setSaveState(currentStates => {
-      const nextStates = {
-        ...currentStates
-      };
-      if (status) {
-        nextStates[rowId] = status;
-      } else {
-        delete nextStates[rowId];
+  function setRowStatus(rowId, status) {
+    dispatch({
+      type: 'setRowStatus',
+      rowId,
+      payload: {
+        status
       }
-      return nextStates;
     });
   }
-  function getRowMoveReason(rowId) {
-    var _pendingChanges$rowId7;
-    return (_pendingChanges$rowId7 = pendingChanges[rowId]) !== null && _pendingChanges$rowId7 !== void 0 && _pendingChanges$rowId7._meta.moveReason ? Object.values(pendingChanges[rowId]._meta.moveReason)[0] : undefined;
-  }
-  function hasChanges(rowId) {
-    if (!isEnabled) {
-      return false;
+  function setCellValue(cell, value) {
+    const rowId = cell.row.id;
+    const columnId = cell.column.id;
+    // update if the change is different to the original value
+    if (value !== cell.row.original[columnId]) {
+      dispatch({
+        type: 'setCellValue',
+        rowId,
+        payload: {
+          columnId,
+          row: cell.row.original,
+          value
+        }
+      });
     }
-    return rowId ? !!pendingChanges[rowId] : !!Object.keys(pendingChanges).length;
-  }
-  function hasAlertErrors() {
-    if (!isEnabled) {
-      return false;
+    // otherwise remove any previous change - no point saving the same value
+    else if (cell.row.id in state.changes.rows) {
+      dispatch({
+        type: 'removeCellValue',
+        rowId,
+        payload: {
+          columnId,
+          rowIdentityAccessor
+        }
+      });
     }
-    return !!getAlertErrors().length;
   }
-  function getAlertErrors() {
-    return Object.keys(pendingChanges).filter(hasRowErrorsSeen).map(rowId => ({
+  function getCellValue(cell) {
+    var _state$changes$rows2, _state$changes$rows2$;
+    return (_state$changes$rows2 = state.changes.rows) === null || _state$changes$rows2 === void 0 ? void 0 : (_state$changes$rows2$ = _state$changes$rows2[cell.row.id]) === null || _state$changes$rows2$ === void 0 ? void 0 : _state$changes$rows2$[cell.column.id];
+  }
+  function getCellError(cell) {
+    var _state$changes$errors5, _state$changes$errors6, _state$changes$errors7;
+    return (_state$changes$errors5 = state.changes.errors) === null || _state$changes$errors5 === void 0 ? void 0 : (_state$changes$errors6 = _state$changes$errors5[cell.row.id]) === null || _state$changes$errors6 === void 0 ? void 0 : (_state$changes$errors7 = _state$changes$errors6.cells) === null || _state$changes$errors7 === void 0 ? void 0 : _state$changes$errors7[cell.column.id];
+  }
+  function getErrorsShownInAlert() {
+    const rowsWithErrors = Object.keys(state.changes.errors);
+    if (!rowsWithErrors.length) {
+      return [];
+    }
+    return rowsWithErrors.filter(hasRowErrorsShownInAlert).map(rowId => ({
       rowId,
-      pendingChange: pendingChanges[rowId]
+      changes: state.changes.rows[rowId],
+      errors: state.changes.errors[rowId]
     }));
   }
-  function resetChanges(rowId) {
-    setPendingChanges(currentChanges => {
-      const nextChanges = {
-        ...currentChanges
-      };
-      delete nextChanges[rowId];
-      return nextChanges;
-    });
+  function hasSaved() {
+    return !!Object.values(state.changes.status).filter(value => value === 'saved').length;
   }
-  function getCompletedRowsCount() {
-    return Object.values(saveStates).filter(value => value === 'complete').length;
+  function hasChanges(rowId) {
+    return rowId ? !!state.changes.rows[rowId] : !!Object.keys(state.changes.rows).length;
+  }
+  function discardChanges(rowId, table) {
+    // remove any new rows from pinned state before discarding them
+    table.resetRowPinning(true);
+    dispatch({
+      type: 'removeRow',
+      rowId,
+      payload: {
+        rowIdentityAccessor
+      }
+    });
   }
   return {
+    // row
+    setRowValue,
+    getRowValue,
+    getRowMoveReason,
+    hasRowErrors,
+    hasRowErrorsShownInAlert,
+    getRowStatus,
+    setRowStatus,
+    // cells
+    setCellValue,
     getCellValue,
     getCellError,
-    setCellValue,
-    validateCell,
-    addCreatedRowChangeset,
+    onCellChanged,
+    // general
+    getErrorsShownInAlert,
     hasChanges,
-    hasAlertErrors,
-    getAlertErrors,
     saveChanges,
-    resetChanges,
-    hasRowErrors,
-    hasRowErrorsSeen,
-    getRowPendingChange,
-    getRowSaveStatus,
-    setRowSaveStatus,
-    getRowMoveReason,
-    getCompletedRowsCount
+    discardChanges,
+    hasSaved,
+    // new rows
+    createRow,
+    temporaryRows: state.temporaryRows
   };
 }
-function useLastFocusedCellIndex() {
+
+function useTableEditing(isEnabled = false, handleSave, handleChange, rowIdentityAccessor, validator) {
+  // used to switch the table into editing mode
+  const [isEditing, setEditing] = React__default.useState(false);
+  // used to switch the editing between "detailed" mode
+  const [isDetailedMode, toggleDetailedMode] = React__default.useState(false);
   // store the last focused cell, so that up/down arrow key navigation remains in the same column
-  const lastFocusedCellIndexRef = React__default.useRef(undefined);
-  const setLastFocusedCellIndex = React__default.useCallback(index => {
-    lastFocusedCellIndexRef.current = index;
-  }, []);
-  return [lastFocusedCellIndexRef.current, setLastFocusedCellIndex];
-}
-function usePendingChangesUpdater(handleChange, setPendingChanges) {
-  const localization = useLocalization();
-  const updatersRef = React__default.useRef({});
-  const runCellUpdates = React__default.useCallback(lodash.debounce(function (changes, cell, rowIndex) {
-    try {
-      const _temp4 = function () {
-        if (typeof handleChange === 'function') {
-          const previousValues = {
-            ...cell.row.original,
-            ...getChangesetFromChanges(updatersRef.current[cell.row.id])
-          };
-          const nextValues = {
-            ...previousValues,
-            ...changes
-          };
-          return Promise.resolve(handleChange(cell.column.id, changes[cell.column.id], nextValues, previousValues)).then(function (updates) {
-            if (updates && Object.keys(updates).length) {
-              setPendingChanges(currentChanges => createPendingChangesSetter(currentChanges, cell.row, rowIndex, updates, localization));
-            }
-          });
-        }
-      }();
-      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {}) : void 0);
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  }, 250), []);
-  function syncCellChanges(changes) {
-    updatersRef.current = changes;
-  }
-  return {
-    syncCellChanges,
-    runCellUpdates
-  };
-}
-function createPendingChangesSetter(currentChanges, row, rowIndex, changes, localization) {
-  var _currentChanges$row$i, _currentChanges$row$i2, _currentChanges$row$i3;
-  // prepare
-  const nextChanges = {
-    ...currentChanges
-  };
-  const rowChanges = {
-    ...currentChanges[row.id],
-    _meta: {
-      ...((_currentChanges$row$i = currentChanges[row.id]) === null || _currentChanges$row$i === void 0 ? void 0 : _currentChanges$row$i._meta),
-      original: row.original,
-      moveReason: {
-        ...((_currentChanges$row$i2 = currentChanges[row.id]) === null || _currentChanges$row$i2 === void 0 ? void 0 : _currentChanges$row$i2._meta.moveReason)
-      },
-      errors: {
-        ...((_currentChanges$row$i3 = currentChanges[row.id]) === null || _currentChanges$row$i3 === void 0 ? void 0 : _currentChanges$row$i3._meta.errors)
-      }
-    }
-  };
-  // run changes
-  const cells = row._getAllCellsByColumnId();
-  for (const [accessor, change] of Object.entries(changes)) {
-    // update if the change is different to the original (saved) value,
-    // otherwise remove any change - no point saving the same value
-    if (change !== row.original[accessor]) {
-      rowChanges[accessor] = change;
-      // consumers sometimes include properties in onEditingChange that aren't rendered as columns, we need to guard against that.
-      // eslint-disable-next-line no-prototype-builtins
-      if (cells.hasOwnProperty(accessor)) {
-        // determine if the row will move position based on this change, and save why it will move
-        const reason = willRowMove(cells[accessor], change, rowIndex, localization);
-        if (reason) {
-          rowChanges._meta.moveReason[accessor] = reason;
-        } else {
-          delete rowChanges._meta.moveReason[accessor];
-        }
-      }
-    } else {
-      delete rowChanges[accessor];
-      delete rowChanges._meta.moveReason[accessor];
+  const [lastFocusedCellIndex, setLastFocusedCellIndex] = React__default.useState(undefined);
+  const pendingChangesFns = usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, validator);
+  function toggleEditing(enabled, table) {
+    if (!enabled) {
+      // save
+      pendingChangesFns.saveChanges(table);
+      // reset detailed mode
+      toggleDetailedMode(false);
+      // reset the last index back to the first focusable element, when editing gets turned off
+      setLastFocusedCellIndex(undefined);
     }
+    setEditing(enabled);
   }
-  // set changes
-  // or delete if there are no changes left, so that we don't store changes with unchanged data
-  if (Object.keys(rowChanges).filter(k => k !== '_meta').length) {
-    nextChanges[row.id] = rowChanges;
-  } else {
-    delete nextChanges[row.id];
-  }
-  return nextChanges;
-}
-function getChangesetFromChanges(changes) {
-  // extract the original data from the row changes
-  const {
-    _meta,
-    ...changeset
-  } = changes !== null && changes !== void 0 ? changes : {};
-  // and mix them in with the changes, ready to send to the server
   return {
-    ...(_meta === null || _meta === void 0 ? void 0 : _meta.original),
-    ...changeset
+    isEnabled,
+    isEditing,
+    isDetailedMode,
+    toggleDetailedMode: isEnabled ? toggleDetailedMode : () => undefined,
+    toggleEditing: isEnabled ? toggleEditing : () => undefined,
+    lastFocusedCellIndex,
+    setLastFocusedCellIndex,
+    ...pendingChangesFns
   };
 }
 
@@ -19115,13 +19263,28 @@ function EditingControlCell(props) {
   const {
     rowIndex
   } = React__default.useContext(RowContext);
-  const tableMeta = cell.getContext().table.options.meta;
+  const {
+    table
+  } = cell.getContext();
+  const tableMeta = table.options.meta;
   const columnMeta = cell.column.columnDef.meta;
   const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;
+  const type = (_columnMeta$control = columnMeta.control) !== null && _columnMeta$control !== void 0 ? _columnMeta$control : 'input';
   const handleFocus = useEditingCellAutofocus(props);
+  // some controls, like select2, should trigger cell changed (validation, updates) as the value changes
+  const hasNonTextControl = React__default.useMemo(() => {
+    var _cellRef$current;
+    return typeof type === 'function' && !!((_cellRef$current = cellRef.current) !== null && _cellRef$current !== void 0 && _cellRef$current.querySelector('[data-taco="Select2"],[data-taco="switch"],[data-taco="checkbox"]'));
+  }, [cellRef.current]);
+  const handleChange = value => {
+    tableMeta.editing.setCellValue(cell, value);
+    if (hasNonTextControl) {
+      tableMeta.editing.onCellChanged(cell, rowIndex);
+    }
+  };
   const handleBlur = () => {
     tableMeta.editing.toggleDetailedMode(false);
-    tableMeta.editing.validateCell(cell);
+    tableMeta.editing.onCellChanged(cell, rowIndex);
   };
   // ensure that blur runs when the cell gets unmounted (when vertically arrow key navigating)
   React__default.useEffect(() => {
@@ -19133,6 +19296,9 @@ 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,
@@ -19141,13 +19307,13 @@ function EditingControlCell(props) {
     isDetailedMode: tableMeta.editing.isDetailedMode,
     isTruncated: !!columnMeta.enableTruncate,
     onBlur: handleBlur,
-    onChange: value => tableMeta.editing.setCellValue(cell, value, rowIndex),
+    onChange: handleChange,
     row: cell.row.original,
-    rowPendingChanges: tableMeta.editing.getRowPendingChange(cell.row.id),
+    rowPendingChanges: tableMeta.editing.getRowValue(cell.row.id),
     tabIndex: isActiveRow ? 0 : -1,
-    toggleEditing: tableMeta.editing.toggleEditing,
+    toggleEditing,
     toggleDetailedMode: tableMeta.editing.toggleDetailedMode,
-    type: (_columnMeta$control = columnMeta.control) !== null && _columnMeta$control !== void 0 ? _columnMeta$control : 'input',
+    type,
     value: cell.getValue()
   };
   const cellAttributes = {
@@ -19350,12 +19516,37 @@ function Cell$5(props) {
   return /*#__PURE__*/React__default.createElement(DisplayCell, Object.assign({}, props));
 }
 
+function DiscardChangesConfirmationDialog(props) {
+  const {
+    onDiscard: handleDiscard,
+    ...dialogProps
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const handleClickInsideDialogContent = event => {
+    // Prevents the click event from propagating to the table, ensuring the row isn't saved when a click occurs
+    // inside the dialog
+    event.stopPropagation();
+  };
+  return /*#__PURE__*/React__default.createElement(Dialog, Object.assign({}, dialogProps), /*#__PURE__*/React__default.createElement(Dialog.Content, {
+    "aria-label": texts.table3.editing.clearChangesConfirmationDialog.title,
+    onClick: handleClickInsideDialogContent
+  }, /*#__PURE__*/React__default.createElement(Dialog.Title, null, texts.table3.editing.clearChangesConfirmationDialog.title), /*#__PURE__*/React__default.createElement("p", null, texts.table3.editing.clearChangesConfirmationDialog.description), /*#__PURE__*/React__default.createElement(Dialog.Footer, null, /*#__PURE__*/React__default.createElement(Group, null, /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button$1, {
+    tabIndex: 0
+  }, texts.table3.editing.clearChangesConfirmationDialog.cancel)), /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button$1, {
+    autoFocus: true,
+    tabIndex: 0,
+    appearance: "primary",
+    onClick: handleDiscard
+  }, texts.table3.editing.clearChangesConfirmationDialog.confirm))))));
+}
+
 function EditingActionMenu(props) {
   const {
     hasChanges,
     hasErrors,
-    onClear: handleClear,
-    onExit: handleExit,
+    onDiscard: handleDiscard,
     onEditingSave: handleSave,
     isLastRow
   } = props;
@@ -19389,42 +19580,13 @@ function EditingActionMenu(props) {
     }, texts.table3.editing.actions.save), /*#__PURE__*/React__default.createElement(Menu$1.Item, {
       icon: "close",
       disabled: !hasChanges,
-      dialog: props => /*#__PURE__*/React__default.createElement(ConfirmClearChangesDialog, Object.assign({}, props, {
-        onClear: handleClear
+      dialog: props => /*#__PURE__*/React__default.createElement(DiscardChangesConfirmationDialog, Object.assign({}, props, {
+        onDiscard: handleDiscard
       }))
-    }, texts.table3.editing.actions.clear), /*#__PURE__*/React__default.createElement(Menu$1.Item, {
-      icon: "undo",
-      onClick: handleExit
-    }, texts.table3.editing.actions.exit))))
+    }, texts.table3.editing.actions.clear))))
   });
 }
-function ConfirmClearChangesDialog(props) {
-  const {
-    onClear: handleClear,
-    ...dialogProps
-  } = props;
-  const {
-    texts
-  } = useLocalization();
-  const handleClickInsideDialogContent = event => {
-    // Prevents the click event from propagating to the table, ensuring the row isn't saved when a click occurs
-    // inside the dialog
-    event.stopPropagation();
-  };
-  return /*#__PURE__*/React__default.createElement(Dialog, Object.assign({}, dialogProps), /*#__PURE__*/React__default.createElement(Dialog.Content, {
-    "aria-label": texts.table3.editing.clearChangesConfirmationDialog.title,
-    onClick: handleClickInsideDialogContent
-  }, /*#__PURE__*/React__default.createElement(Dialog.Title, null, texts.table3.editing.clearChangesConfirmationDialog.title), /*#__PURE__*/React__default.createElement("p", null, texts.table3.editing.clearChangesConfirmationDialog.description), /*#__PURE__*/React__default.createElement(Dialog.Footer, null, /*#__PURE__*/React__default.createElement(Group, null, /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button$1, {
-    tabIndex: 0
-  }, texts.table3.editing.clearChangesConfirmationDialog.cancel)), /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button$1, {
-    autoFocus: true,
-    tabIndex: 0,
-    appearance: "primary",
-    onClick: handleClear
-  }, texts.table3.editing.clearChangesConfirmationDialog.confirm))))));
-}
 
-const COMPLETE_INDICATOR_DELAY = 3000;
 function SaveStatus(props) {
   const {
     rowId,
@@ -19434,18 +19596,7 @@ function SaveStatus(props) {
     texts
   } = useLocalization();
   const tableMeta = table.options.meta;
-  const status = tableMeta.editing.getRowSaveStatus(rowId);
-  React__default.useEffect(() => {
-    let timeout;
-    if (status === 'complete') {
-      timeout = setTimeout(() => {
-        tableMeta.editing.setRowSaveStatus(rowId, undefined);
-      }, COMPLETE_INDICATOR_DELAY);
-    }
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [status]);
+  const status = tableMeta.editing.getRowStatus(rowId);
   const className = cn('col-span-full sticky ml-auto right-0 top-0 -mb-[100%] z-10 h-8 bg-[inherit] flex items-center px-1.5 shadow-[-6px_0px_6px_var(--table-row-actions-shadow)]', {
     'mt-0.5': tableMeta.rowHeight.height === 'short',
     'mt-1': tableMeta.rowHeight.height === 'medium',
@@ -19456,7 +19607,7 @@ function SaveStatus(props) {
     className: "!contents"
   }, /*#__PURE__*/React__default.createElement("span", {
     className: className
-  }, status === 'pending' ? (/*#__PURE__*/React__default.createElement(Tooltip, {
+  }, status === 'saving' ? (/*#__PURE__*/React__default.createElement(Tooltip, {
     title: texts.table3.editing.saving.progress
   }, /*#__PURE__*/React__default.createElement(Spinner, {
     delay: 0,
@@ -19482,10 +19633,7 @@ function Row$2(props) {
   const isActiveRow = tableMeta.rowActive.rowActiveIndex === index;
   React__default.useEffect(() => {
     if (tableMeta.editing.isEditing && isActiveRow && tableMeta.editing.lastFocusedCellIndex === undefined) {
-      const element = focusManager.focusFirst();
-      if (element) {
-        setDataFocusAttribute(element);
-      }
+      setDataFocusAttribute(focusManager.focusFirst());
     }
   }, [tableMeta.editing.isEditing, tableMeta.rowActive.rowActiveIndex, tableMeta.editing.lastFocusedCellIndex]);
   const handleFocus = React__default.useCallback(event => {
@@ -19497,12 +19645,13 @@ function Row$2(props) {
       }
     }
   }, [tableMeta.editing.isEditing, isActiveRow]);
+  const rowStatus = tableMeta.editing.getRowStatus(row.id);
   const attributes = {
-    'data-row-editing-invalid': tableMeta.editing.isEnabled && tableMeta.editing.hasRowErrors(row.id) ? !tableMeta.editing.hasRowErrorsSeen(row.id) ? 'unseen' : true : undefined,
-    'data-row-editing-status': tableMeta.editing.isEnabled && tableMeta.editing.getRowSaveStatus(row.id) ? tableMeta.editing.getRowSaveStatus(row.id) : undefined,
+    'data-row-editing-invalid': tableMeta.editing.hasRowErrors(row.id) ? !tableMeta.editing.hasRowErrorsShownInAlert(row.id) ? 'unseen' : true : undefined,
+    'data-row-editing-status': rowStatus,
     onFocus: handleFocus
   };
-  return /*#__PURE__*/React__default.createElement(DisplayRow, Object.assign({}, props, attributes), tableMeta.editing.getRowSaveStatus(row.id) ? /*#__PURE__*/React__default.createElement(SaveStatus, {
+  return /*#__PURE__*/React__default.createElement(DisplayRow, Object.assign({}, props, attributes), rowStatus === 'saving' || rowStatus === 'saved' ? /*#__PURE__*/React__default.createElement(SaveStatus, {
     rowId: row.id,
     table: table
   }) : null);
@@ -19513,17 +19662,31 @@ const RENDERERS$1 = {
   cell: Cell$5
 };
 function useTable3(props, ref) {
-  const editing = useTableEditing(props.enableEditing, props.onEditingSave, props.onEditingChange, props.validator);
+  const editing = useTableEditing(props.enableEditing, props.onEditingSave, props.onEditingChange, props.rowIdentityAccessor, props.validator);
   const creationEnabled = editing.isEnabled && !!props.onEditingCreate;
+  // this gives me the performance heeby jeebies, but can't think of a better way to internalise the state
+  const data = React__default.useMemo(() => {
+    if (editing.isEditing && editing.temporaryRows.length) {
+      var _props$data;
+      return editing.temporaryRows.concat((_props$data = props.data) !== null && _props$data !== void 0 ? _props$data : []);
+    }
+    return props.data;
+  }, [JSON.stringify(props.data), editing.temporaryRows.length]);
   const extendedProps = {
     ...props,
+    data,
     enableRowActions: editing.isEditing ? true : props.enableRowActions,
-    rowActions: editing.isEditing ? [(_, rowId) => (/*#__PURE__*/React__default.createElement(EditingActionMenu, {
+    rowActions: editing.isEditing ? [(_, rowId, table) => (/*#__PURE__*/React__default.createElement(EditingActionMenu, {
       hasChanges: editing.hasChanges(rowId),
       hasErrors: editing.hasRowErrors(rowId),
-      onClear: () => editing.resetChanges(rowId),
-      onEditingSave: () => editing.saveChanges(rowId),
-      onExit: () => editing.toggleEditing(false),
+      onDiscard: () => editing.discardChanges(rowId, table),
+      onEditingSave: function () {
+        try {
+          return Promise.resolve(editing.saveChanges(table, rowId)).then(function () {});
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      },
       isLastRow: !creationEnabled && table.meta.rowActive.rowActiveIndex === table.meta.length - 1
     }))] : props.rowActions
   };
@@ -19535,7 +19698,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.ref.current.instance.toggleEditing = enabled => table.meta.editing.toggleEditing(enabled !== null && enabled !== void 0 ? enabled : editing => !editing, table.instance);
     }
   }, [table.ref.current]);
   return table;
@@ -19554,7 +19717,7 @@ function Alert$1(props) {
   const validationTexts = texts.table3.editing.validation;
   const tableMeta = table.options.meta;
   const [showFilterResetDialog, setShowFilterResetDialog] = React__default.useState(false);
-  const pendingChangesWithErrors = tableMeta.editing.getAlertErrors();
+  const pendingChangesWithErrors = tableMeta.editing.getErrorsShownInAlert();
   function scrollToRow(rowIndex) {
     tableMeta.rowActive.setRowActiveIndex(rowIndex);
     scrollToIndex(rowIndex, {
@@ -19573,38 +19736,43 @@ function Alert$1(props) {
   const title = (pendingChangesWithErrors.length === 1 ? validationTexts.alert.titleOne : validationTexts.alert.titlePlural).replace('[COUNT]', String(pendingChangesWithErrors.length));
   // generate links to each invalid row, to go into the error message
   const links = [];
-  const rowIdentityColumn = tableMeta.rowIdentityColumnId ? table.getColumn(tableMeta.rowIdentityColumnId) : undefined;
-  pendingChangesWithErrors.forEach((error, index) => {
+  const visibleColumns = table.getVisibleFlatColumns().map(c => c.id);
+  const rowIdentityColumn = tableMeta.rowIdentityAccessor && visibleColumns.includes(String(tableMeta.rowIdentityAccessor)) ? table.getColumn(String(tableMeta.rowIdentityAccessor)) : undefined;
+  pendingChangesWithErrors.forEach((pendingChangeWithError, index) => {
     // if appropriate, concatenate the item with the text "and"
     if (pendingChangesWithErrors.length > 1 && index === pendingChangesWithErrors.length - 1) {
       // Add space before and after `messageAnd` text
       links.push(` ${validationTexts.alert.messageAnd} `);
     }
-    const rowIndex = table.getRowModel().rows.findIndex(row => row.id === error.rowId);
+    const rowIndex = table.getRowModel().rows.findIndex(row => row.id === pendingChangeWithError.rowId);
     const handleClick = () => {
+      // if row is visible
       if (rowIndex > -1) {
         scrollToRow(rowIndex);
-      } else {
-        setShowFilterResetDialog(error.rowId);
+      }
+      // if row is filtered out
+      else {
+        setShowFilterResetDialog(pendingChangeWithError.rowId);
       }
     };
     let tooltip;
-    if (error.pendingChange._meta.errors.row) {
-      tooltip = error.pendingChange._meta.errors.row;
+    if (pendingChangeWithError.errors.row) {
+      tooltip = pendingChangeWithError.errors.row;
     } else {
       var _table$getAllColumns$, _table$getAllColumns$2;
-      const firstCellErrorColumnId = Object.keys(error.pendingChange._meta.errors.cells)[0];
+      const firstCellErrorColumnId = Object.keys(pendingChangeWithError.errors.cells)[0];
       const columnName = (_table$getAllColumns$ = table.getAllColumns().find(column => column.id === firstCellErrorColumnId)) === null || _table$getAllColumns$ === void 0 ? void 0 : (_table$getAllColumns$2 = _table$getAllColumns$.columnDef.meta) === null || _table$getAllColumns$2 === void 0 ? void 0 : _table$getAllColumns$2.header;
-      tooltip = `${columnName}: ${error.pendingChange._meta.errors.cells[firstCellErrorColumnId]}`;
+      tooltip = `${columnName}: ${pendingChangeWithError.errors.cells[firstCellErrorColumnId]}`;
     }
+    const row = table.getRow(pendingChangeWithError.rowId).original;
     links.push(/*#__PURE__*/React__default.createElement(Tooltip, {
-      key: error.rowId,
+      key: pendingChangeWithError.rowId,
       title: tooltip
     }, /*#__PURE__*/React__default.createElement("span", {
       className: "text-blue",
       onClick: handleClick,
       role: "button"
-    }, rowIdentityColumn ? error.pendingChange._meta.original[rowIdentityColumn.id] : rowIndex + 1)));
+    }, rowIdentityColumn ? row[rowIdentityColumn.id] : rowIndex + 1)));
     // if appropriate, concatenate the item with the text ","
     if (pendingChangesWithErrors.length > 2 && index < pendingChangesWithErrors.length - 2) {
       links.push(', ');
@@ -19660,89 +19828,6 @@ function FilterResetDialog(props) {
   }, texts.table3.editing.validation.resetFiltersDialog.confirm)))));
 }
 
-function CreateNewRowButton(props) {
-  const {
-    onEditingCreate,
-    scrollToIndex,
-    table,
-    tableMeta
-  } = props;
-  const {
-    texts
-  } = useLocalization();
-  const rows = table.getCoreRowModel().rows.filter(row => row.original !== undefined);
-  const [rowCreated, setRowCreated] = React__default.useState({
-    rowFinder: undefined
-  });
-  const handleKeyDown = event => {
-    if (!tableMeta.editing.hasChanges() && event.key === 'Tab') {
-      tableMeta.editing.saveChanges();
-    }
-  };
-  const handleCreate = function () {
-    try {
-      if (!onEditingCreate) {
-        return Promise.resolve();
-      }
-      const createdRow = rows.find(row => {
-        var _rowCreated$rowFinder;
-        return rowCreated === null || rowCreated === void 0 ? void 0 : (_rowCreated$rowFinder = rowCreated.rowFinder) === null || _rowCreated$rowFinder === void 0 ? void 0 : _rowCreated$rowFinder.call(rowCreated, row.original);
-      });
-      const _temp = function () {
-        if (createdRow) {
-          return Promise.resolve(tableMeta.editing.saveChanges()).then(function () {
-            if (!tableMeta.editing.hasRowErrors(createdRow.id)) {
-              const rowFinder = onEditingCreate();
-              setRowCreated({
-                rowFinder
-              });
-            }
-          });
-        } else {
-          const rowFinder = onEditingCreate();
-          setRowCreated({
-            rowFinder
-          });
-        }
-      }();
-      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-  React__default.useEffect(() => {
-    if (typeof (rowCreated === null || rowCreated === void 0 ? void 0 : rowCreated.rowFinder) === 'function') {
-      const createdRow = rows.find(row => {
-        var _rowCreated$rowFinder2;
-        return rowCreated === null || rowCreated === void 0 ? void 0 : (_rowCreated$rowFinder2 = rowCreated.rowFinder) === null || _rowCreated$rowFinder2 === void 0 ? void 0 : _rowCreated$rowFinder2.call(rowCreated, row.original);
-      });
-      if (createdRow) {
-        const rowInTable = table.getRowModel().rows.filter(row => row.original !== undefined).find(row => {
-          var _rowCreated$rowFinder3;
-          return rowCreated === null || rowCreated === void 0 ? void 0 : (_rowCreated$rowFinder3 = rowCreated.rowFinder) === null || _rowCreated$rowFinder3 === void 0 ? void 0 : _rowCreated$rowFinder3.call(rowCreated, row.original);
-        });
-        if (rowInTable) {
-          tableMeta.editing.toggleEditing(true);
-          tableMeta.rowActive.setRowActiveIndex(createdRow.index);
-          scrollToIndex(createdRow.index);
-          requestAnimationFrame(() => animateCreateRow(createdRow.id));
-        }
-        requestAnimationFrame(() => tableMeta.editing.addCreatedRowChangeset(createdRow));
-      }
-    }
-  }, [rowCreated]);
-  return /*#__PURE__*/React__default.createElement("tr", {
-    onClick: handleCreate,
-    className: "border-grey-300 hover:bg-grey-100 group !sticky bottom-10 left-0 z-[21] !block cursor-pointer border-t"
-  }, /*#__PURE__*/React__default.createElement("td", {
-    className: "!border-t-0 !bg-transparent"
-  }, /*#__PURE__*/React__default.createElement(Button$1, {
-    onKeyDown: handleKeyDown,
-    className: "group-hover:bg-grey-200 sticky left-0",
-    appearance: "transparent"
-  }, "+ ", texts.table3.editing.buttons.create.label)));
-}
-
 function Editing(props) {
   const {
     scrollToIndex,
@@ -19768,21 +19853,191 @@ function Editing(props) {
     (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.click();
   });
   const handleChange = enabled => {
-    tableMeta.editing.toggleEditing(enabled);
+    if (enabled && tableMeta.rowActive.rowActiveIndex === undefined) {
+      tableMeta.rowActive.setRowActiveIndex(0);
+    }
     requestAnimationFrame(() => {
       var _tableMeta$rowActive$;
-      return scrollToIndex((_tableMeta$rowActive$ = tableMeta.rowActive.rowActiveIndex) !== null && _tableMeta$rowActive$ !== void 0 ? _tableMeta$rowActive$ : 0);
+      // wait for an active row to be set so that we don't trigger save
+      tableMeta.editing.toggleEditing(enabled, table);
+      scrollToIndex((_tableMeta$rowActive$ = tableMeta.rowActive.rowActiveIndex) !== null && _tableMeta$rowActive$ !== void 0 ? _tableMeta$rowActive$ : 0);
     });
   };
   return /*#__PURE__*/React__default.createElement(Tooltip, {
     title: tooltip
   }, /*#__PURE__*/React__default.createElement(ModeSwitch, {
+    "data-table": "editing-toggle",
     checked: tableMeta.editing.isEditing,
     onChange: handleChange,
     ref: ref
   }));
 }
 
+function CreateNewRow(props) {
+  var _temporaryRows$0$tabl, _temporaryRows$, _table$getState$colum;
+  const {
+    buttonRef,
+    onEditingCreate: handleEditingCreate,
+    table,
+    tableMeta
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const temporaryRows = tableMeta.editing.temporaryRows;
+  const temporaryRowId = (_temporaryRows$0$tabl = (_temporaryRows$ = temporaryRows[0]) === null || _temporaryRows$ === void 0 ? void 0 : _temporaryRows$[tableMeta.rowIdentityAccessor]) !== null && _temporaryRows$0$tabl !== void 0 ? _temporaryRows$0$tabl : '';
+  const isDisabled = !!table.getState().globalFilter || !!((_table$getState$colum = table.getState().columnFilters) !== null && _table$getState$colum !== void 0 && _table$getState$colum.length) || !!temporaryRowId && !!tableMeta.editing.hasRowErrors(temporaryRowId);
+  const isSaving = !!temporaryRowId && tableMeta.editing.getRowStatus(temporaryRowId) === 'saving';
+  const handleCreate = function (event) {
+    try {
+      // prevent save being triggered by click outside - TODO: investigate why the button triggers clickoutside
+      event === null || event === void 0 ? void 0 : event.stopPropagation();
+      if (!handleEditingCreate || isDisabled) {
+        return Promise.resolve();
+      }
+      return Promise.resolve(tableMeta.editing.saveChanges(table)).then(function (saved) {
+        if (!saved) {
+          return;
+        }
+        try {
+          const changeset = handleEditingCreate();
+          if (changeset) {
+            // change the row before reating because it triggers a save
+            // saving would trigger the validation flow and immediately make the row red
+            tableMeta.rowActive.setRowActiveIndex(-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;
 }
@@ -19794,12 +20049,23 @@ 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.hasAlertErrors();
-  const showCreateRowButton = table3.meta.editing.isEnabled && props.onEditingCreate;
+  const hasAlertErrors = table3.meta.editing.isEditing && table3.meta.editing.getErrorsShownInAlert().length;
+  const hasCreateWorkflow = table3.meta.editing.isEnabled && props.onEditingCreate;
+  let footerRows;
+  if (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
+    }));
+  }
   return /*#__PURE__*/React__default.createElement(Table, null, /*#__PURE__*/React__default.createElement(Table.Toolbar, {
     table: table3
   }, table3.meta.editing.isEnabled ? (/*#__PURE__*/React__default.createElement(Editing, {
@@ -19812,13 +20078,15 @@ const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref)
     tableRef: table3.ref
   })) : null, /*#__PURE__*/React__default.createElement(Table.Grid, Object.assign({}, gridAttributes, {
     "data-taco": "table3",
+    rowsForFooter: footerRows,
     table: table3
-  }), showCreateRowButton && (/*#__PURE__*/React__default.createElement(CreateNewRowButton, {
+  }), hasCreateWorkflow ? (/*#__PURE__*/React__default.createElement(TemporaryRow, {
+    buttonRef: buttonRef,
+    rowIdentityAccessor: props.rowIdentityAccessor,
     table: table3.instance,
     tableMeta: table3.meta,
-    onEditingCreate: props.onEditingCreate,
-    scrollToIndex: table3.renderer.scrollToIndex
-  }))));
+    tableRef: table3.ref
+  })) : null));
 });
 const Table3 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   const stringifiedChildren = String(props.children);
@@ -19964,7 +20232,7 @@ const Tooltip$1 = ({
     icon: "close",
     title: locale.skip,
     "aria-label": locale.skip,
-    className: "absolute right-0 top-0 mr-1 mt-1"
+    className: "absolute top-0 right-0 mt-1 mr-1"
   })), step.title && /*#__PURE__*/React.createElement("h5", null, step.title), step.content, /*#__PURE__*/React.createElement(Group, {
     className: "mt-4 justify-end"
   }, index > 0 && (/*#__PURE__*/React.createElement(Button$1, Object.assign({}, backProps, {
@@ -20326,15 +20594,13 @@ const AgreementDisplay = props => {
   }));
 };
 
-const Container$1 = ({
-  children
-}) => {
+const Container$1 = props => {
   return /*#__PURE__*/React__default.createElement("div", {
     className: "-ml-2 flex flex-shrink-0 flex-grow-0 items-center gap-2 pr-2 xl:ml-auto xl:w-64",
     "data-taco": "header-agreements"
   }, /*#__PURE__*/React__default.createElement("span", {
     className: "hidden h-8 w-px flex-shrink-0 flex-grow-0 bg-white/[0.3] xl:flex"
-  }), children);
+  }), props.children);
 };
 function AgreementSelector(props) {
   const {
@@ -20406,7 +20672,7 @@ function AgreementSelector(props) {
     }
     return button;
   })), handleAddAgreement ? (/*#__PURE__*/React__default.createElement(Button$1, {
-    className: "focus-visible:!yt-focus-dark mx-2 my-1 !h-9 shrink-0 !bg-white/[0.08] !text-white hover:!bg-white/[0.16]",
+    className: "focus-visible:!yt-focus-dark my-1 mx-2 !h-9 shrink-0 !bg-white/[0.08] !text-white hover:!bg-white/[0.16]",
     onClick: handleAddAgreement
   }, texts.header.addAgreement)) : null, /*#__PURE__*/React__default.createElement("hr", {
     className: "my-0 h-px w-full bg-white/[0.08]"