@economic/taco 2.45.0-alpha.7 → 2.45.0-alpha.8

package/dist/taco.cjs.development.js

@@ -59,6 +59,8 @@ const getColorByState = state => {
       return 'yellow';
     case 'error':
       return 'red';
+    case 'experiment':
+      return 'purple';
     case 'success':
       return 'green';
     default:
@@ -1615,6 +1617,22 @@ function IconExpenses(props, svgRef) {
 }
 var Expenses = /*#__PURE__*/React.forwardRef(IconExpenses);
 
+function IconExperiment(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8.962 9.26V5.313h2.843V9.28c0 .376.796 1.24 1.049 1.511L14.5 12.5c-.507.218-3.166-1.19-4.341-.211C7.159 14.789 6 13 6.5 12c.316-.632 2.462-1.803 2.462-2.74zm.24-4.469a.762.762 0 00-.752.772v3.696a.61.61 0 01-.177.43l-2.592 2.6c-.911.913-.281 2.502.992 2.502h7.154c1.25 0 1.89-1.538 1.027-2.466l-2.446-2.63a.61.61 0 01-.162-.415V5.563a.762.762 0 00-.752-.772H9.202z",
+    fill: "currentColor",
+    stroke: "currentColor"
+  }));
+}
+var Experiment = /*#__PURE__*/React.forwardRef(IconExperiment);
+
 function IconExportToExcel(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3672,6 +3690,7 @@ const icons = {
   envelope: Envelope,
   'expand-view': ExpandView,
   expenses: Expenses,
+  experiment: Experiment,
   'export-to-excel': ExportToExcel,
   'export-to-pdf': ExportToPdf,
   export: Export,
@@ -3879,6 +3898,8 @@ const getIconName = state => {
       return 'warning';
     case 'error':
       return 'close';
+    case 'experiment':
+      return 'experiment';
     case 'success':
       return 'tick';
     default:
@@ -4214,6 +4235,11 @@ const getBannerIcon = type => {
           icon: "close",
           color: "red"
         });
+      case 'experiment':
+        return /*#__PURE__*/React__default.createElement(BadgeIcon, {
+          icon: "experiment",
+          color: "purple"
+        });
       case 'warning':
         return /*#__PURE__*/React__default.createElement(BadgeIcon, {
           icon: "warning",
@@ -4306,6 +4332,9 @@ function isElementTriggeredFromContainer(element, container) {
       return true;
     }
     const elementInDocument = document.querySelector(escapedSelector);
+    if (elementInDocument === container) {
+      return true;
+    }
     // if the element does exist, see if it is itself connected to somethng that was triggered from the container
     if (elementInDocument) {
       return isElementTriggeredFromContainer(elementInDocument, container);
@@ -4328,7 +4357,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;
+  const interactiveElements = ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'LABEL', 'OPTION'];
+  const 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) {
+    const 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]'));
@@ -4359,9 +4396,12 @@ function shouldTriggerShortcut(event, key) {
   }
   return event.key.toLowerCase() === keyOptions.key.toLowerCase();
 }
-function createShortcutKeyDownHandler(key, handler, stopPropagation = true) {
+function createShortcutKeyDownHandler(key, handler, stopPropagation = true, element) {
   return function (event) {
-    if (event.target !== event.currentTarget && isElementInteractive(event.target) && !isPressingMetaKey(event)) {
+    const dialog = document.querySelector('[role="dialog"]');
+    const 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;
     }
     const condition = shouldTriggerShortcut(event, key);
@@ -4382,11 +4422,11 @@ const isMacOs = () => {
   return (_window = window) === null || _window === void 0 ? void 0 : _window.navigator.userAgent.includes('Mac');
 };
 
-const useGlobalKeyDown = (shortcut, handler) => {
+const useGlobalKeyDown = (shortcut, handler, element) => {
   React__default.useEffect(() => {
     let handleKeyDown;
     if (shortcut) {
-      handleKeyDown = createShortcutKeyDownHandler(shortcut, handler, false);
+      handleKeyDown = createShortcutKeyDownHandler(shortcut, handler, false, element);
       document.addEventListener('keydown', handleKeyDown);
     }
     return () => {
@@ -4409,13 +4449,8 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
   useGlobalKeyDown(shortcut, event => {
     var _internalRef$current;
     event === null || event === void 0 ? void 0 : event.preventDefault();
-    const 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);
   const Tag = props.href ? 'a' : 'button';
   return /*#__PURE__*/React.createElement(Tag, Object.assign({}, otherProps, {
     href: disabled ? undefined : props.href,
@@ -5066,22 +5101,23 @@ const TodayButton = ({
   }, texts.calendar.actions.today);
 };
 const Calendar$1 = props => {
+  var _ref;
   const {
     onChange: handleChange,
     value,
     disabledDays,
+    visibleMonth,
     ...otherProps
   } = props;
-  const [visibleMonth, setVisibleMonth] = React.useState(value !== null && value !== void 0 ? value : new Date());
+  const [internalVisibleMonth, setInternalVisibleMonth] = React.useState((_ref = visibleMonth !== null && visibleMonth !== void 0 ? visibleMonth : value) !== null && _ref !== void 0 ? _ref : new Date());
   const {
     texts
   } = useLocalization();
   React.useEffect(() => {
-    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]);
   const handleDayClick = (date, modifiers, event) => {
     if (modifiers.outside || modifiers.disabled) {
       return;
@@ -5095,13 +5131,13 @@ const Calendar$1 = props => {
     className: className,
     captionLayout: "dropdown-buttons",
     weekStartsOn: 1,
-    month: visibleMonth,
+    month: internalVisibleMonth,
     numberOfMonths: 1,
     components: {
-      Caption: props => /*#__PURE__*/React.createElement(Navbar, Object.assign({}, props, {
-        onMonthChange: setVisibleMonth,
-        value: visibleMonth
-      })),
+      Caption: props => (/*#__PURE__*/React.createElement(Navbar, Object.assign({}, props, {
+        onMonthChange: setInternalVisibleMonth,
+        value: internalVisibleMonth
+      }))),
       Footer: () => (/*#__PURE__*/React.createElement("tfoot", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
         colSpan: 7,
         className: "text-center"
@@ -6042,7 +6078,9 @@ const useCombobox = ({
       const isComboboxChangeEvent = event => {
         return !event.isTrusted; // this makes sure we only take our own custom event, and not the browser default blur on tab.
       };
-      if (isComboboxChangeEvent(event)) {
+      // Only trigger onChange if this is our custom event (not a browser blur event)
+      // or if the input was cleared.
+      if (isComboboxChangeEvent(event) || event.target.value === '' && !inline) {
         onChange(event);
       }
     }
@@ -6357,14 +6395,18 @@ const useDatepicker = ({
   } = useLocalization();
   const [internalValue, setInternalValue] = React.useState((_format = format(value, formatting.date)) !== null && _format !== void 0 ? _format : '');
   const originalValueAsDate = parse(value);
-  // update internal value if it changed 'externally'
+  // Track the current view date (month/year) in the calendar
+  const [calendarViewDate, setCalendarViewDate] = React.useState(originalValueAsDate || new Date());
   React.useEffect(() => {
-    const 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) {
+      const formattedValue = format(value, formatting.date);
+      if (formattedValue !== internalValue) {
+        setInternalValue(formattedValue !== null && formattedValue !== void 0 ? formattedValue : '');
+      }
     }
   }, [value]);
-  // event handlers
   const handleInputBlur = event => {
     event.persist();
     const 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());
@@ -6385,6 +6427,8 @@ const useDatepicker = ({
     setInternalValue(event.target.value);
   };
   const 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');
   };
   const handleKeyDown = event => {
@@ -6410,7 +6454,8 @@ const useDatepicker = ({
   const calendarProps = {
     ...calendar,
     onChange: handleChange,
-    value: originalValueAsDate
+    value: originalValueAsDate,
+    visibleMonth: calendarViewDate
   };
   return {
     input: inputProps,
@@ -8299,7 +8344,7 @@ const 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(handler => document.addEventListener('keydown', handler));
@@ -9950,9 +9995,13 @@ const 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, {
+      const 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));
+      });
+      const decimalSeperator = formatter.format(1.1).substring(1, 2);
+      const localisedValue = formatter.format(Number(value));
+      const localisedValueWithoutThousandsSeperator = decimalSeperator === '.' ? localisedValue.replace(',', '') : localisedValue.replace('.', '');
+      return [localisedValue, localisedValueWithoutThousandsSeperator];
     }
   }
 };
@@ -10100,7 +10149,13 @@ function isMatched(searchQuery, cellValue, dataType, localization) {
         const cellDisplayValue = dataTypeProperties.getDisplayValue(cellValue, {
           localization
         });
-        if (cellDisplayValue !== undefined && isWeakContains(cellDisplayValue, searchQuery)) {
+        if (Array.isArray(cellDisplayValue)) {
+          for (const displayValue of cellDisplayValue) {
+            if (isWeakContains(displayValue, searchQuery)) {
+              return true;
+            }
+          }
+        } else if (cellDisplayValue !== undefined && isWeakContains(cellDisplayValue, searchQuery)) {
           return true;
         }
       }
@@ -10398,10 +10453,15 @@ function processChildren(child, columns, defaultSizing, defaultSorting, defaultV
       column.cell = info => renderer(info.getValue(), info.row.original);
     } else if (dataTypeProperties.getDisplayValue) {
       const 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;
+        const displayValue = (_dataTypeProperties$g = dataTypeProperties.getDisplayValue) === null || _dataTypeProperties$g === void 0 ? void 0 : _dataTypeProperties$g.call(dataTypeProperties, value, {
           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 = info => dataTypeRenderer(info.getValue());
       column.meta.renderer = dataTypeRenderer;
@@ -11453,6 +11513,7 @@ function useTableServerLoading(loadPage, loadAll, pageSize = DEFAULT_PAGE_SIZE)
         const _temp = function () {
           if (typeof loadPage === 'function') {
             return Promise.resolve(loadPage(...args)).then(function () {
+              setLoadedStatus(exports.TableServerLoadAllState.Incomplete);
               setReady(true);
             });
           }
@@ -11573,7 +11634,7 @@ function useLazyEffect(effect, deps) {
   const readyRef = React__default.useRef(false);
   React__default.useEffect(() => {
     if (readyRef.current) {
-      effect();
+      return effect();
     } else {
       readyRef.current = true;
     }
@@ -11615,7 +11676,8 @@ function useTableFontSizeListener(table) {
     table.setColumnSizing(sizes => {
       return Object.fromEntries(Object.entries(sizes).map(([columnName, prevColumnSize]) => {
         var _column$columnDef$min;
-        const column = table.getColumn(columnName);
+        // table.getColumn(columName) throw error in strict dev mode. Related thread: https://github.com/TanStack/table/discussions/5505
+        const column = table.getAllColumns().find(x => 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];
@@ -13936,22 +13998,29 @@ const MemoedFooter = /*#__PURE__*/React__default.memo(function MemoedFooter(prop
 });
 
 function EmptyStateBody(props) {
+  var _ref$current, _ref$current$parentNo;
   const {
     emptyState: Placeholder,
     isReady,
     reason,
     ...attributes
   } = props;
+  const 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
@@ -15631,7 +15700,7 @@ const BubbleSelect = props => {
     if (prevValue !== value && setValue) {
       if (Array.isArray(value)) {
         value.forEach(v => {
-          const option = select.querySelector(`option[value='${v}']`);
+          const option = select.querySelector(`option[value='${CSS.escape(v)}']`);
           if (option) {
             option.selected = true;
           }
@@ -18657,16 +18726,13 @@ function isTableScrolled(ref) {
 function useTableEditingListener(table, tableRef, scrollToIndex) {
   const tableMeta = table.options.meta;
   const localization = useLocalization();
-  // save when the row changes
-  // store the last row active index, otherwise everytime tableMeta.editing.saveChanges changes the hook runs again
-  const lastRowActiveIndexRef = React__default.useRef(tableMeta.rowActive.rowActiveIndex);
   useLazyEffect(() => {
-    if (tableMeta.rowActive.rowActiveIndex !== lastRowActiveIndexRef.current) {
-      lastRowActiveIndexRef.current = tableMeta.rowActive.rowActiveIndex;
-      if (tableMeta.editing.isEditing && lastRowActiveIndexRef.current !== undefined) {
-        tableMeta.editing.saveChanges(table);
+    return () => {
+      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
   const hasChanges = tableMeta.editing.hasChanges();
@@ -18881,6 +18947,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
       const _temp9 = _forOf(Object.keys(changes), function (rowId) {
         const status = getRowStatus(rowId);
         return _catch(function () {
+          var _changes$rowId;
           function _temp8(_result) {
             return _exit ? _result : Promise.resolve(handleSave(changeSet)).then(function () {
               // cleanup changes, we don't need them after saving
@@ -18892,14 +18959,15 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
               }, DELAY_BEFORE_REMOVING_SAVE_STATUS);
             });
           }
+          const rowChanges = (_changes$rowId = changes[rowId]) !== null && _changes$rowId !== void 0 ? _changes$rowId : {};
           // don't try to save if - already saving, or there are known errors
-          if (status === 'saving' || status === 'errored') {
+          if (!Object.keys(rowChanges).length || status === 'saving' || status === 'errored') {
             return;
           }
           setRowStatus(rowId, 'saving');
           const changeSet = {
             ...state.changes.originals[rowId],
-            ...changes[rowId]
+            ...rowChanges
           };
           // if we had to create a temporary id, delete it first - it's our data, not theirs
           if (isTemporaryRow(changeSet[rowIdentityAccessor])) {
@@ -18962,7 +19030,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
       return Promise.reject(e);
     }
   };
-  const onCellChanged = function (cell, rowIndex, shouldRunUpdaters = true) {
+  const onCellChanged = function (cell, rowIndex, nextValue, shouldRunUpdaters = true) {
     try {
       function _temp6() {
         var _state$changes$errors11;
@@ -19004,7 +19072,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
         }
         // create a projection of the next state, so we can act against it
         const nextChanges = {
-          ...state.changes.rows[cell.row.id],
+          ...changes,
           ...updatesForOtherCells
         };
         const nextMoveReasons = {
@@ -19013,10 +19081,11 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
         const nextCellErrors = {
           ...((_state$changes$errors11 = state.changes.errors[cell.row.id]) === null || _state$changes$errors11 === void 0 ? void 0 : _state$changes$errors11.cells)
         };
-        // run validation
+        // run validation - if there are changes, and if there is an original stored
         let validationErrors = {};
         const _temp3 = function () {
-          if (validator) {
+          if (validator && Object.keys(nextChanges).length && state.changes.originals[cell.row.id]) {
+            // merge with the original so we get a full row
             const nextRowValue = {
               ...state.changes.originals[cell.row.id],
               ...changes,
@@ -19029,8 +19098,13 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
         }();
         return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
       }
-      const changes = state.changes.rows[cell.row.id];
-      if (!changes) {
+      const changes = nextValue !== undefined ? {
+        ...state.changes.rows[cell.row.id],
+        [cell.column.id]: nextValue
+      } : {
+        ...state.changes.rows[cell.row.id]
+      };
+      if (!Object.keys(changes).length) {
         return Promise.resolve();
       }
       let updatesForOtherCells = {};
@@ -19242,32 +19316,44 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
 function useTableEditing(isEnabled = false, handleSave, handleChange, handleCreate, rowIdentityAccessor, validator) {
   const createRow = function (table, scrollToIndex, row) {
     try {
-      if (!handleCreate) {
-        return Promise.resolve();
-      }
-      const tableMeta = table.options.meta;
-      return Promise.resolve(tableMeta.editing.saveChanges(table)).then(function (saved) {
-        if (!saved) {
-          return;
-        }
+      let _exit = false;
+      function _temp2(_result) {
+        if (_exit) return _result;
         const changeset = row !== null && row !== void 0 ? row : handleCreate();
         try {
           if (changeset) {
-            const rowId = pendingChangesFns.insertTemporaryRow(changeset);
-            window.requestAnimationFrame(() => {
-              table.getRow(rowId).pin('bottom');
-              // set the active row to the new row before toggling editing on
-              const temporaryRows = tableMeta.editing.temporaryRows;
-              const nextRowIndex = temporaryRows.length ? tableMeta.length + 1 : tableMeta.length;
-              tableMeta.rowActive.setRowActiveIndex(nextRowIndex);
-              window.requestAnimationFrame(() => toggleEditing(true, table, scrollToIndex));
-              setLastFocusedCellIndex(undefined);
+            const newRowId = pendingChangesFns.insertTemporaryRow(changeset);
+            // 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
+            const temporaryRows = tableMeta.editing.temporaryRows;
+            const nextRowIndex = temporaryRows.length ? tableMeta.length + 1 : tableMeta.length;
+            tableMeta.rowActive.setRowActiveIndex(nextRowIndex);
+            // wait until set states have run
+            requestAnimationFrame(() => {
+              toggleEditing(true, table, scrollToIndex, false);
+              table.getRow(newRowId).pin('bottom');
             });
           }
         } catch (error) {
           console.error(error);
         }
-      });
+      }
+      if (!handleCreate) {
+        return Promise.resolve();
+      }
+      const tableMeta = table.options.meta;
+      const _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);
     }
@@ -19281,24 +19367,26 @@ function useTableEditing(isEnabled = false, handleSave, handleChange, handleCrea
   // store the last focused cell, so that up/down arrow key navigation remains in the same column
   const [lastFocusedCellIndex, setLastFocusedCellIndex] = React__default.useState(undefined);
   const pendingChangesFns = usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, validator);
-  function toggleEditing(enabled, table, scrollToIndex) {
-    var _tableMeta$rowActive$, _table$getRowModel$ro;
-    if (!enabled) {
-      // save
-      pendingChangesFns.saveChanges(table);
+  function toggleEditing(enabled, table, scrollToIndex, doSave = true) {
+    const tableMeta = table.options.meta;
+    if (enabled) {
+      var _tableMeta$rowActive$, _table$getRowModel$ro;
+      const 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);
+      }
+    } else if (!enabled) {
       // reset detailed mode
       toggleDetailedMode(false);
       // reset the last index back to the first focusable element, when editing gets turned off
       setLastFocusedCellIndex(undefined);
     }
-    const tableMeta = table.options.meta;
-    const index = (_tableMeta$rowActive$ = tableMeta.rowActive.rowActiveIndex) !== null && _tableMeta$rowActive$ !== void 0 ? _tableMeta$rowActive$ : 0;
-    if (tableMeta.rowActive.rowActiveIndex === undefined) {
-      tableMeta.rowActive.setRowActiveIndex(index);
-    }
     setEditing(enabled);
-    if (!isTemporaryRow((_table$getRowModel$ro = table.getRowModel().rows[index]) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.id)) {
-      scrollToIndex(index);
+    if (doSave) {
+      pendingChangesFns.saveChanges(table);
     }
   }
   return {
@@ -19570,20 +19658,26 @@ function EditingControlCell(props) {
     if (nextValue !== value) {
       tableMeta.editing.setCellValue(cell, nextValue);
       if (hasNonTextControl) {
-        tableMeta.editing.onCellChanged(cell, rowIndex);
+        requestAnimationFrame(() => tableMeta.editing.onCellChanged(cell, rowIndex, nextValue));
       }
     }
   };
-  const handleBlur = () => {
+  function blur() {
     tableMeta.editing.toggleDetailedMode(false);
-    tableMeta.editing.onCellChanged(cell, rowIndex, !hasNonTextControl);
+    tableMeta.editing.onCellChanged(cell, rowIndex, undefined, !hasNonTextControl);
+  }
+  const handleBlur = event => {
+    if (isElementInsideOrTriggeredFromContainer(event.relatedTarget, event.currentTarget)) {
+      return;
+    }
+    blur();
   };
   // ensure that blur runs when the cell gets unmounted (when vertically arrow key navigating)
   React__default.useEffect(() => {
     const ref = cellRef.current;
     return () => {
       if (document.activeElement === ref || isElementInsideOrTriggeredFromContainer(document.activeElement, ref)) {
-        handleBlur();
+        blur();
       }
     };
   }, []);
@@ -20007,14 +20101,13 @@ function useTable3(props, ref) {
         hasChanges: editing.hasChanges(rowId),
         hasErrors: editing.hasRowErrors(rowId),
         onDiscard: () => {
+          editing.discardChanges(rowId, table);
           if (editing.temporaryRows.length) {
-            tableMeta.rowActive.setRowActiveIndex(undefined);
-            setTimeout(() => {
+            requestAnimationFrame(() => {
               var _editing$createRowBut;
               return (_editing$createRowBut = editing.createRowButtonRef.current) === null || _editing$createRowBut === void 0 ? void 0 : _editing$createRowBut.focus();
-            }, 50);
+            });
           }
-          editing.discardChanges(rowId, table);
         },
         onEditingSave: function () {
           try {
@@ -20080,7 +20173,9 @@ function Alert$1(props) {
   // generate links to each invalid row, to go into the error message
   const links = [];
   const visibleColumns = table.getVisibleFlatColumns().map(c => c.id);
-  const rowIdentityColumn = tableMeta.rowIdentityAccessor && visibleColumns.includes(String(tableMeta.rowIdentityAccessor)) ? table.getColumn(String(tableMeta.rowIdentityAccessor)) : undefined;
+  const 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(x => x.id === 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) {