@economic/taco 2.47.0-server.6 → 2.47.0-server.8

package/dist/taco.cjs.development.js

@@ -79,6 +79,37 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   }
   return target;
 }
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 
 var AVAILABLE_COLORS = ['green', 'yellow', 'red', 'blue', 'purple', 'brown', 'pink', 'orange', 'grey', 'transparent'];
 var getColorByState = function getColorByState(state) {
@@ -4354,7 +4385,15 @@ function isElementInteractive(element) {
   if (!element) {
     return false;
   }
-  return ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'LABEL', 'OPTION'].includes(element.tagName) && !element.hidden && !element.disabled && !element.readOnly;
+  var interactiveElements = ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'LABEL', 'OPTION'];
+  var isInteractive = interactiveElements.includes(element.tagName) && !element.hidden && !element.disabled && !element.readOnly;
+  // sometimes buttons contain content like an icon, and we can't rely on pointer events being disabled
+  // so search for a focusable parent
+  if (!isInteractive) {
+    var focusableParent = element.closest(FOCUSABLE_ELEMENTS.join(','));
+    return focusableParent ? interactiveElements.includes(focusableParent.tagName) : false;
+  }
+  return isInteractive;
 }
 function isElementInsideTable3OrReport(element) {
   return !!(element !== null && element !== void 0 && element.closest('[data-taco^=table]'));
@@ -4385,12 +4424,15 @@ function shouldTriggerShortcut(event, key) {
   }
   return event.key.toLowerCase() === keyOptions.key.toLowerCase();
 }
-function createShortcutKeyDownHandler(key, handler, stopPropagation) {
+function createShortcutKeyDownHandler(key, handler, stopPropagation, element) {
   if (stopPropagation === void 0) {
     stopPropagation = true;
   }
   return function (event) {
-    if (event.target !== event.currentTarget && isElementInteractive(event.target) && !isPressingMetaKey(event)) {
+    var dialog = document.querySelector('[role="dialog"]');
+    var isOutsideDialog = element && dialog && !dialog.contains(element);
+    if (event.target !== event.currentTarget && isElementInteractive(event.target) && !isPressingMetaKey(event) || isOutsideDialog // Avoid triggering shortcut if dialog is open and element is outside the dialog
+    ) {
       return;
     }
     var condition = shouldTriggerShortcut(event, key);
@@ -4411,11 +4453,11 @@ var isMacOs = function isMacOs() {
   return (_window = window) === null || _window === void 0 ? void 0 : _window.navigator.userAgent.includes('Mac');
 };
 
-var useGlobalKeyDown = function useGlobalKeyDown(shortcut, handler) {
+var useGlobalKeyDown = function useGlobalKeyDown(shortcut, handler, element) {
   React__default.useEffect(function () {
     var handleKeyDown;
     if (shortcut) {
-      handleKeyDown = createShortcutKeyDownHandler(shortcut, handler, false);
+      handleKeyDown = createShortcutKeyDownHandler(shortcut, handler, false, element);
       document.addEventListener('keydown', handleKeyDown);
     }
     return function () {
@@ -4438,13 +4480,8 @@ var Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
   useGlobalKeyDown(shortcut, function (event) {
     var _internalRef$current;
     event === null || event === void 0 ? void 0 : event.preventDefault();
-    var dialog = document.querySelector('[role="dialog"]');
-    // Don't trigger the click on the button if it is outside of the dialog
-    if (dialog && !(dialog !== null && dialog !== void 0 && dialog.contains(internalRef.current))) {
-      return;
-    }
     (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.click();
-  });
+  }, internalRef.current);
   var Tag = props.href ? 'a' : 'button';
   return /*#__PURE__*/React.createElement(Tag, Object.assign({}, otherProps, {
     href: disabled ? undefined : props.href,
@@ -5002,7 +5039,7 @@ var Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
   }, button);
 });
 
-var _excluded$a = ["onChange", "value", "disabledDays"];
+var _excluded$a = ["onChange", "value", "disabledDays", "visibleMonth"];
 var thisYear = /*#__PURE__*/new Date().getFullYear();
 var years = [];
 for (var i = thisYear - 50; i <= thisYear + 10; i += 1) {
@@ -5088,21 +5125,22 @@ var TodayButton = function TodayButton(_ref2) {
   }, texts.calendar.actions.today);
 };
 var Calendar$1 = function Calendar(props) {
+  var _ref3;
   var handleChange = props.onChange,
     value = props.value,
     disabledDays = props.disabledDays,
+    visibleMonth = props.visibleMonth,
     otherProps = _objectWithoutPropertiesLoose(props, _excluded$a);
-  var _React$useState = React.useState(value !== null && value !== void 0 ? value : new Date()),
-    visibleMonth = _React$useState[0],
-    setVisibleMonth = _React$useState[1];
+  var _React$useState = React.useState((_ref3 = visibleMonth !== null && visibleMonth !== void 0 ? visibleMonth : value) !== null && _ref3 !== void 0 ? _ref3 : new Date()),
+    internalVisibleMonth = _React$useState[0],
+    setInternalVisibleMonth = _React$useState[1];
   var _useLocalization3 = useLocalization(),
     texts = _useLocalization3.texts;
   React.useEffect(function () {
-    if (visibleMonth !== value) {
-      setVisibleMonth(value !== null && value !== void 0 ? value : new Date());
+    if (visibleMonth && visibleMonth !== internalVisibleMonth) {
+      setInternalVisibleMonth(visibleMonth);
     }
-    // visibleMonth in deps array breaking month switching logic. It should not be in deps array.
-  }, [value]);
+  }, [visibleMonth]);
   var handleDayClick = function handleDayClick(date, modifiers, event) {
     if (modifiers.outside || modifiers.disabled) {
       return;
@@ -5116,13 +5154,13 @@ var Calendar$1 = function Calendar(props) {
     className: className,
     captionLayout: "dropdown-buttons",
     weekStartsOn: 1,
-    month: visibleMonth,
+    month: internalVisibleMonth,
     numberOfMonths: 1,
     components: {
       Caption: function Caption(props) {
         return /*#__PURE__*/React.createElement(Navbar, Object.assign({}, props, {
-          onMonthChange: setVisibleMonth,
-          value: visibleMonth
+          onMonthChange: setInternalVisibleMonth,
+          value: internalVisibleMonth
         }));
       },
       Footer: function Footer() {
@@ -6496,14 +6534,20 @@ var useDatepicker = function useDatepicker(_ref, ref) {
     internalValue = _React$useState[0],
     setInternalValue = _React$useState[1];
   var originalValueAsDate = parse(value);
-  // update internal value if it changed 'externally'
+  // Track the current view date (month/year) in the calendar
+  var _React$useState2 = React.useState(originalValueAsDate || new Date()),
+    calendarViewDate = _React$useState2[0],
+    setCalendarViewDate = _React$useState2[1];
   React.useEffect(function () {
-    var formattedValue = format(value, formatting.date);
-    if (formattedValue !== internalValue) {
-      setInternalValue(formattedValue !== null && formattedValue !== void 0 ? formattedValue : '');
+    // Only update the internal value when the input is not focused
+    // This prevents the input value from being reset while user is typing
+    if (inputRef.current !== document.activeElement) {
+      var formattedValue = format(value, formatting.date);
+      if (formattedValue !== internalValue) {
+        setInternalValue(formattedValue !== null && formattedValue !== void 0 ? formattedValue : '');
+      }
     }
   }, [value]);
-  // event handlers
   var handleInputBlur = function handleInputBlur(event) {
     event.persist();
     var valueAsDate = parseFromCustomString(event.target.value, 'dd.mm.yy', originalValueAsDate === null || originalValueAsDate === void 0 ? void 0 : originalValueAsDate.getMonth(), originalValueAsDate === null || originalValueAsDate === void 0 ? void 0 : originalValueAsDate.getFullYear());
@@ -6524,6 +6568,8 @@ var useDatepicker = function useDatepicker(_ref, ref) {
     setInternalValue(event.target.value);
   };
   var handleChange = function handleChange(date) {
+    // Update both the input value and calendar view date when selecting a date
+    setCalendarViewDate(date);
     setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');
   };
   var handleKeyDown = function handleKeyDown(event) {
@@ -6547,7 +6593,8 @@ var useDatepicker = function useDatepicker(_ref, ref) {
   });
   var calendarProps = _extends({}, calendar, {
     onChange: handleChange,
-    value: originalValueAsDate
+    value: originalValueAsDate,
+    visibleMonth: calendarViewDate
   });
   return {
     input: inputProps,
@@ -8476,7 +8523,7 @@ var Content$8 = /*#__PURE__*/React.forwardRef(function MenuContent(props, ref) {
             var _childrenRefs$current, _childrenRefs$current2;
             return (_childrenRefs$current = childrenRefs.current[index]) === null || _childrenRefs$current === void 0 ? void 0 : (_childrenRefs$current2 = _childrenRefs$current.current) === null || _childrenRefs$current2 === void 0 ? void 0 : _childrenRefs$current2.click();
           }, 1);
-        }));
+        }, true, childrenRefs.current[index].current));
       }
     });
     shortcuts.forEach(function (handler) {
@@ -10211,9 +10258,13 @@ var dataTypes = {
       if (value === undefined) {
         return '';
       }
-      return new Intl.NumberFormat(options === null || options === void 0 ? void 0 : (_options$localization2 = options.localization) === null || _options$localization2 === void 0 ? void 0 : _options$localization2.locale, {
+      var formatter = new Intl.NumberFormat(options === null || options === void 0 ? void 0 : (_options$localization2 = options.localization) === null || _options$localization2 === void 0 ? void 0 : _options$localization2.locale, {
         minimumFractionDigits: 2
-      }).format(Number(value));
+      });
+      var decimalSeperator = formatter.format(1.1).substring(1, 2);
+      var localisedValue = formatter.format(Number(value));
+      var localisedValueWithoutThousandsSeperator = decimalSeperator === '.' ? localisedValue.replace(',', '') : localisedValue.replace('.', '');
+      return [localisedValue, localisedValueWithoutThousandsSeperator];
     }
   }
 };
@@ -10379,7 +10430,14 @@ function isMatched(searchQuery, cellValue, dataType, localization) {
         var cellDisplayValue = dataTypeProperties.getDisplayValue(cellValue, {
           localization: localization
         });
-        if (cellDisplayValue !== undefined && isWeakContains(cellDisplayValue, searchQuery)) {
+        if (Array.isArray(cellDisplayValue)) {
+          for (var _iterator = _createForOfIteratorHelperLoose(cellDisplayValue), _step; !(_step = _iterator()).done;) {
+            var displayValue = _step.value;
+            if (isWeakContains(displayValue, searchQuery)) {
+              return true;
+            }
+          }
+        } else if (cellDisplayValue !== undefined && isWeakContains(cellDisplayValue, searchQuery)) {
           return true;
         }
       }
@@ -10721,10 +10779,15 @@ function processChildren(child, columns, defaultSizing, defaultSorting, defaultV
       };
     } else if (dataTypeProperties.getDisplayValue) {
       var dataTypeRenderer = function dataTypeRenderer(value) {
-        var _dataTypeProperties$g, _dataTypeProperties$g2;
-        return (_dataTypeProperties$g = (_dataTypeProperties$g2 = dataTypeProperties.getDisplayValue) === null || _dataTypeProperties$g2 === void 0 ? void 0 : _dataTypeProperties$g2.call(dataTypeProperties, value, {
+        var _dataTypeProperties$g;
+        var displayValue = (_dataTypeProperties$g = dataTypeProperties.getDisplayValue) === null || _dataTypeProperties$g === void 0 ? void 0 : _dataTypeProperties$g.call(dataTypeProperties, value, {
           localization: localization
-        })) !== null && _dataTypeProperties$g !== void 0 ? _dataTypeProperties$g : value;
+        });
+        if (Array.isArray(displayValue)) {
+          var _displayValue$;
+          return (_displayValue$ = displayValue[0]) !== null && _displayValue$ !== void 0 ? _displayValue$ : value;
+        }
+        return displayValue !== null && displayValue !== void 0 ? displayValue : value;
       };
       column.cell = function (info) {
         return dataTypeRenderer(info.getValue());
@@ -12056,7 +12119,7 @@ function useLazyEffect(effect, deps) {
   var readyRef = React__default.useRef(false);
   React__default.useEffect(function () {
     if (readyRef.current) {
-      effect();
+      return effect();
     } else {
       readyRef.current = true;
     }
@@ -12101,7 +12164,10 @@ function useTableFontSizeListener(table) {
         var _column$columnDef$min;
         var columnName = _ref[0],
           prevColumnSize = _ref[1];
-        var column = table.getColumn(columnName);
+        // table.getColumn(columName) throw error in strict dev mode. Related thread: https://github.com/TanStack/table/discussions/5505
+        var column = table.getAllColumns().find(function (x) {
+          return x.id === columnName;
+        });
         if (isInternalColumn(columnName)) {
           var _column$getSize;
           return [columnName, (_column$getSize = column === null || column === void 0 ? void 0 : column.getSize()) !== null && _column$getSize !== void 0 ? _column$getSize : prevColumnSize];
@@ -12806,7 +12872,7 @@ function getPaddingEndOffset(table, options) {
   return ROW_HEIGHT_ESTIMATES.medium * ((_options$virtualiserP = options === null || options === void 0 ? void 0 : options.virtualiserPaddingEndOffset) !== null && _options$virtualiserP !== void 0 ? _options$virtualiserP : 1) * bottomRows.length;
 }
 function useTableRenderer(renderers, table, tableRef, length, defaultRowActiveIndex, options) {
-  var _table$getState$group, _table$getCenterRows, _virtualItems$padding, _virtualItems$padding2, _virtualItems$padding3, _ref2, _virtualItems;
+  var _table$getState$group, _table$getCenterRows, _virtualItems$padding, _virtualItems$padding2, _virtualItems$padding3, _virtualItems$end, _virtualItems;
   var tableMeta = table.options.meta;
   var isTableRowGrouped = !!((_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length);
   var rows = (_table$getCenterRows = table.getCenterRows()) !== null && _table$getCenterRows !== void 0 ? _table$getCenterRows : [];
@@ -12859,7 +12925,7 @@ function useTableRenderer(renderers, table, tableRef, length, defaultRowActiveIn
   var paddingStartIndex = isTableRowGrouped && count > 1 ? 1 : 0;
   var startValue = isTableRowGrouped ? ((_virtualItems$padding = virtualItems[paddingStartIndex]) === null || _virtualItems$padding === void 0 ? void 0 : _virtualItems$padding.start) - ((_virtualItems$padding2 = virtualItems[paddingStartIndex]) === null || _virtualItems$padding2 === void 0 ? void 0 : _virtualItems$padding2.size) : (_virtualItems$padding3 = virtualItems[paddingStartIndex]) === null || _virtualItems$padding3 === void 0 ? void 0 : _virtualItems$padding3.start;
   // styling for offsetting rows - this "is" the virtualisation
-  var _ref = virtualItems.length > 0 ? [Math.max(0, startValue !== null && startValue !== void 0 ? startValue : 0), Math.max(0, (_ref2 = totalSize - ((_virtualItems = virtualItems[virtualItems.length - 1]) === null || _virtualItems === void 0 ? void 0 : _virtualItems.end)) !== null && _ref2 !== void 0 ? _ref2 : 0)] : [0, 0],
+  var _ref = virtualItems.length > 0 ? [Math.max(0, startValue !== null && startValue !== void 0 ? startValue : 0), Math.max(0, totalSize - ((_virtualItems$end = (_virtualItems = virtualItems[virtualItems.length - 1]) === null || _virtualItems === void 0 ? void 0 : _virtualItems.end) !== null && _virtualItems$end !== void 0 ? _virtualItems$end : 0))] : [0, 0],
     paddingTop = _ref[0],
     paddingBottom = _ref[1];
   // ensure default active rows are scrolled to
@@ -12878,8 +12944,8 @@ function useTableRenderer(renderers, table, tableRef, length, defaultRowActiveIn
   if (count || table.getBottomRows().length) {
     style = {
       height: totalSize,
-      paddingBottom: paddingBottom,
-      paddingTop: paddingTop
+      paddingBottom: isNaN(paddingBottom) ? 0 : paddingBottom,
+      paddingTop: isNaN(paddingTop) ? 0 : paddingTop
     };
   }
   // only render non sticky rows
@@ -14562,20 +14628,27 @@ var MemoedFooter = /*#__PURE__*/React__default.memo(function MemoedFooter(props)
 
 var _excluded$12 = ["emptyState", "isReady", "reason"];
 function EmptyStateBody(props) {
+  var _ref$current, _ref$current$parentNo;
   var Placeholder = props.emptyState,
     isReady = props.isReady,
     reason = props.reason,
     attributes = _objectWithoutPropertiesLoose(props, _excluded$12);
+  var ref = React__default.useRef(null);
   if (!isReady) {
     return /*#__PURE__*/React__default.createElement("tbody", Object.assign({}, attributes, {
       className: "!auto-rows-fr"
     }));
   }
   return /*#__PURE__*/React__default.createElement("tbody", Object.assign({}, attributes, {
-    className: "!auto-rows-fr"
+    ref: ref,
+    className: "!auto-rows-fr",
+    "data-taco": "empty-state"
   }), /*#__PURE__*/React__default.createElement("tr", {
-    className: "!auto-rows-fr"
+    className: "!auto-rows-fr "
   }, /*#__PURE__*/React__default.createElement("td", {
+    style: {
+      maxWidth: ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : (_ref$current$parentNo = _ref$current.parentNode) === null || _ref$current$parentNo === void 0 ? void 0 : _ref$current$parentNo.clientWidth
+    },
     className: "col-span-full !border-0 !p-0 hover:!bg-white"
   }, Placeholder ? /*#__PURE__*/React__default.createElement(Placeholder, {
     reason: reason
@@ -16359,7 +16432,7 @@ var BubbleSelect = function BubbleSelect(props) {
     if (prevValue !== value && setValue) {
       if (Array.isArray(value)) {
         value.forEach(function (v) {
-          var option = select.querySelector("option[value='" + v + "']");
+          var option = select.querySelector("option[value='" + CSS.escape(v) + "']");
           if (option) {
             option.selected = true;
           }
@@ -19541,16 +19614,13 @@ function isTableScrolled(ref) {
 function useTableEditingListener(table, tableRef, scrollToIndex) {
   var tableMeta = table.options.meta;
   var localization = useLocalization();
-  // save when the row changes
-  // store the last row active index, otherwise everytime tableMeta.editing.saveChanges changes the hook runs again
-  var lastRowActiveIndexRef = React__default.useRef(tableMeta.rowActive.rowActiveIndex);
   useLazyEffect(function () {
-    if (tableMeta.rowActive.rowActiveIndex !== lastRowActiveIndexRef.current) {
-      lastRowActiveIndexRef.current = tableMeta.rowActive.rowActiveIndex;
-      if (tableMeta.editing.isEditing && lastRowActiveIndexRef.current !== undefined) {
-        tableMeta.editing.saveChanges(table);
+    return function () {
+      if (tableMeta.editing.isEditing && tableMeta.rowActive.rowActiveIndex !== undefined) {
+        var _table$getRowModel$ro;
+        tableMeta.editing.saveChanges(table, (_table$getRowModel$ro = table.getRowModel().rows[tableMeta.rowActive.rowActiveIndex]) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.id);
       }
-    }
+    };
   }, [tableMeta.rowActive.rowActiveIndex]);
   // show a warning if the user navigates away without triggering save, such as using the browser back/forward button
   var hasChanges = tableMeta.editing.hasChanges();
@@ -19689,7 +19759,6 @@ function reducer$2(state, action) {
             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)
           }),
           indexes: omit(state.indexes, rowId),
@@ -19766,8 +19835,13 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
           if (status === 'saving' || status === 'errored') {
             return;
           }
-          setRowStatus(rowId, 'saving');
           var changeSet = _extends({}, state.changes.originals[rowId], changes[rowId]);
+          // there are no changes to save, just go ahead and skip the save
+          if (!Object.keys(changeSet).length) {
+            _exit = true;
+            return true;
+          }
+          setRowStatus(rowId, 'saving');
           // if we had to create a temporary id, delete it first - it's our data, not theirs
           if (isTemporaryRow(changeSet[rowIdentityAccessor])) {
             delete changeSet[rowIdentityAccessor];
@@ -19829,11 +19903,12 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
       return Promise.reject(e);
     }
   };
-  var onCellChanged = function onCellChanged(cell, rowIndex, shouldRunUpdaters) {
+  var onCellChanged = function onCellChanged(cell, rowIndex, nextValue, shouldRunUpdaters) {
     if (shouldRunUpdaters === void 0) {
       shouldRunUpdaters = true;
     }
     try {
+      var _extends3;
       var _temp4 = function _temp4() {
         var _state$changes$errors11;
         function _temp2() {
@@ -19874,7 +19949,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
           });
         }
         // create a projection of the next state, so we can act against it
-        var nextChanges = _extends({}, state.changes.rows[cell.row.id], updatesForOtherCells);
+        var nextChanges = _extends({}, changes, updatesForOtherCells);
         var nextMoveReasons = _extends({}, state.changes.moveReasons[cell.row.id]);
         var nextCellErrors = _extends({}, (_state$changes$errors11 = state.changes.errors[cell.row.id]) === null || _state$changes$errors11 === void 0 ? void 0 : _state$changes$errors11.cells);
         // run validation
@@ -19889,8 +19964,8 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
         }();
         return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
       };
-      var changes = state.changes.rows[cell.row.id];
-      if (!changes) {
+      var changes = nextValue !== undefined ? _extends({}, state.changes.rows[cell.row.id], (_extends3 = {}, _extends3[cell.column.id] = nextValue, _extends3)) : _extends({}, state.changes.rows[cell.row.id]);
+      if (!Object.keys(changes).length) {
         return Promise.resolve();
       }
       var updatesForOtherCells = {};
@@ -20074,30 +20149,44 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
 function useTableEditing(isEnabled, handleSave, handleChange, handleCreate, rowIdentityAccessor, validator) {
   var createRow = function createRow(table, scrollToIndex, row) {
     try {
-      if (!handleCreate) {
-        return Promise.resolve();
-      }
-      var tableMeta = table.options.meta;
-      return Promise.resolve(tableMeta.editing.saveChanges(table)).then(function (saved) {
-        if (!saved) {
-          return;
-        }
+      var _temp2 = function _temp2(_result) {
+        if (_exit) return _result;
         var changeset = row !== null && row !== void 0 ? row : handleCreate();
         try {
           if (changeset) {
-            // set the active row to the new row before toggling editing on
             var temporaryRows = tableMeta.editing.temporaryRows;
             var nextRowIndex = temporaryRows.length ? tableMeta.length + 1 : tableMeta.length;
-            var rowId = pendingChangesFns.insertTemporaryRow(changeset, nextRowIndex);
-            table.getRow(rowId).pin('bottom');
-            tableMeta.rowActive.setRowActiveIndex(nextRowIndex);
-            toggleEditing(true, table, scrollToIndex);
+            var newRowId = pendingChangesFns.insertTemporaryRow(changeset, nextRowIndex);
+            // reset before changing row otherwise the cell changes and validation might run
             setLastFocusedCellIndex(undefined);
+            // set the active row to the new row before toggling editing on
+            tableMeta.rowActive.setRowActiveIndex(nextRowIndex);
+            // wait until set states have run
+            requestAnimationFrame(function () {
+              toggleEditing(true, table, scrollToIndex, false);
+              table.getRow(newRowId).pin('bottom');
+            });
           }
         } catch (error) {
           console.error(error);
         }
-      });
+      };
+      var _exit = false;
+      if (!handleCreate) {
+        return Promise.resolve();
+      }
+      var tableMeta = table.options.meta;
+      var _temp = function () {
+        if (tableMeta.rowActive.rowActiveIndex !== undefined) {
+          var _table$getRowModel$ro2;
+          return Promise.resolve(tableMeta.editing.saveChanges(table, (_table$getRowModel$ro2 = table.getRowModel().rows[tableMeta.rowActive.rowActiveIndex]) === null || _table$getRowModel$ro2 === void 0 ? void 0 : _table$getRowModel$ro2.id)).then(function (saved) {
+            if (!saved) {
+              _exit = true;
+            }
+          });
+        }
+      }();
+      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -20120,27 +20209,30 @@ function useTableEditing(isEnabled, handleSave, handleChange, handleCreate, rowI
     lastFocusedCellIndex = _React$useState3[0],
     setLastFocusedCellIndex = _React$useState3[1];
   var pendingChangesFns = usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, validator);
-  function toggleEditing(enabled, table, scrollToIndex) {
-    var _tableMeta$rowActive$, _table$getRowModel$ro;
+  function toggleEditing(enabled, table, scrollToIndex, doSave) {
+    if (doSave === void 0) {
+      doSave = true;
+    }
+    var tableMeta = table.options.meta;
     if (!enabled) {
+      var _tableMeta$rowActive$, _table$getRowModel$ro;
       // save
-      pendingChangesFns.saveChanges(table);
+      if (doSave) {
+        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);
-    }
-    var tableMeta = table.options.meta;
-    var index = (_tableMeta$rowActive$ = tableMeta.rowActive.rowActiveIndex) !== null && _tableMeta$rowActive$ !== void 0 ? _tableMeta$rowActive$ : 0;
-    if (tableMeta.rowActive.rowActiveIndex === undefined) {
-      tableMeta.rowActive.setRowActiveIndex(index);
+      var index = (_tableMeta$rowActive$ = tableMeta.rowActive.rowActiveIndex) !== null && _tableMeta$rowActive$ !== void 0 ? _tableMeta$rowActive$ : 0;
+      if (tableMeta.rowActive.rowActiveIndex === undefined) {
+        tableMeta.rowActive.setRowActiveIndex(index);
+      }
+      if (!isTemporaryRow((_table$getRowModel$ro = table.getRowModel().rows[index]) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.id)) {
+        scrollToIndex(index);
+      }
     }
     setEditing(enabled);
-    var row = (_table$getRowModel$ro = table.getRowModel().rows[index]) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.id;
-    if (row && !isTemporaryRow(row)) {
-      console.log('hmm');
-      scrollToIndex(index);
-    }
   }
   return _extends({
     isEnabled: isEnabled,
@@ -20405,13 +20497,13 @@ function EditingControlCell(props) {
     if (nextValue !== value) {
       tableMeta.editing.setCellValue(cell, rowIndex, nextValue);
       if (hasNonTextControl) {
-        tableMeta.editing.onCellChanged(cell, rowIndex);
+        tableMeta.editing.onCellChanged(cell, rowIndex, nextValue);
       }
     }
   };
   var handleBlur = function handleBlur() {
     tableMeta.editing.toggleDetailedMode(false);
-    tableMeta.editing.onCellChanged(cell, rowIndex, !hasNonTextControl);
+    tableMeta.editing.onCellChanged(cell, rowIndex, undefined, !hasNonTextControl);
   };
   // ensure that blur runs when the cell gets unmounted (when vertically arrow key navigating)
   React__default.useEffect(function () {
@@ -20912,7 +21004,11 @@ function Alert$1(props) {
   var visibleColumns = table.getVisibleFlatColumns().map(function (c) {
     return c.id;
   });
-  var rowIdentityColumn = tableMeta.rowIdentityAccessor && visibleColumns.includes(String(tableMeta.rowIdentityAccessor)) ? table.getColumn(String(tableMeta.rowIdentityAccessor)) : undefined;
+  var rowIdentityColumn = tableMeta.rowIdentityAccessor && visibleColumns.includes(String(tableMeta.rowIdentityAccessor)) ?
+  // table.getColumn(columName) throw error in strict dev mode. Related thread: https://github.com/TanStack/table/discussions/5505
+  table.getAllColumns().find(function (x) {
+    return x.id === String(tableMeta.rowIdentityAccessor);
+  }) : undefined;
   pendingChangesWithErrors.forEach(function (pendingChangeWithError, index) {
     var _row;
     // if appropriate, concatenate the item with the text "and"