@economic/taco 2.64.0-react-aria-overlays-alpha.0 → 2.64.0-react-aria-overlays-alpha.1

package/dist/taco.cjs

@@ -13945,8 +13945,25 @@ function isElementTriggeredFromContainer(element, container) {
   }
   return false;
 }
+const isDialogOpenedFromContainer = (element, container) => {
+  if (!container) {
+    return false;
+  }
+  let currentDialog = element == null ? void 0 : element.closest('[role="dialog"]');
+  while (currentDialog == null ? void 0 : currentDialog.id) {
+    const opener = document.querySelector(`[aria-controls="${currentDialog.id}"]`);
+    if (!opener) {
+      return false;
+    }
+    if (container.contains(opener)) {
+      return true;
+    }
+    currentDialog = opener.closest('[role="dialog"]');
+  }
+  return false;
+};
 function isElementInsideOrTriggeredFromContainer(element, container) {
-  return isElementTriggeredFromContainer(element, container) || !!(container == null ? void 0 : container.contains(element));
+  return isElementTriggeredFromContainer(element, container) || !!(container == null ? void 0 : container.contains(element)) || isDialogOpenedFromContainer(element, container);
 }
 function isElementInsideOverlay(element) {
   return !!(element == null ? void 0 : element.closest("[role=dialog],[role=menu]"));
@@ -22943,7 +22960,7 @@ const useCombobox = (props, ref) => {
   React__namespace.useEffect(() => {
     const isCurrentValue = value !== void 0 && value !== null && inputValue === String(value);
     if (inputValue && data.length && !isCurrentValue) {
-      setCurrentIndex(0);
+      setCurrentIndex(getIndexFromValue(data, inputValue) || 0);
       if (!open) {
         setOpen(true);
       }
@@ -41941,6 +41958,17 @@ function useTableRowDrop(isEnabled = false, onRowDrop) {
     handleDrop: isEnabled ? onRowDrop : void 0
   };
 }
+function useTableRowActiveListener$1(table, onRowActive) {
+  var _a;
+  const meta = table.options.meta;
+  const rows = table.getRowModel().flatRows;
+  const currentRow = meta.rowActive.rowActiveIndex !== void 0 ? (_a = rows[meta.rowActive.rowActiveIndex]) == null ? void 0 : _a.original : void 0;
+  React.useEffect(() => {
+    if (meta.rowActive.isEnabled && onRowActive) {
+      onRowActive(currentRow);
+    }
+  }, [meta.rowActive.isEnabled, currentRow, onRowActive]);
+}
 const DEFAULT_EMPTY_ARRAY = [];
 function useTableManager(props, ref, meta, internalColumns) {
   var _a;
@@ -42041,6 +42069,7 @@ function useTableManager(props, ref, meta, internalColumns) {
   useTableDataListener(instance, length);
   useTableFilterListener(instance, props.onChangeFilter);
   useTableFontSizeListener(instance);
+  useTableRowActiveListener$1(instance, props.onRowActive);
   useTableRowHeightListener(instance);
   useTableRowSelectionListener(instance, props.onRowSelect);
   useTableSearchListener(instance);
@@ -43504,7 +43533,7 @@ function Header$2(context) {
         tableMeta.search.enableGlobalFilter ? table.getState().globalFilter : void 0
       );
     }
-    table.toggleAllRowsSelected(checked);
+    setTimeout(() => table.toggleAllRowsSelected(checked), 1);
   };
   return /* @__PURE__ */ React.createElement(Tooltip$3, { title }, /* @__PURE__ */ React.createElement(
     Checkbox$1,
@@ -43759,6 +43788,21 @@ function Cell$2(props) {
   }
   return /* @__PURE__ */ React.createElement(CellRenderer, { ...cellProps });
 }
+const useResizeObserver$1 = (ref, enabled = true) => {
+  const [size2, setSize] = React.useState();
+  React.useEffect(() => {
+    if (!ref.current || !enabled) {
+      return () => void 0;
+    }
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      setSize({ height: entry.contentRect.height, width: entry.contentRect.width });
+    });
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [enabled]);
+  return size2;
+};
 const DisplayRow = React.memo(function DisplayRow2(props) {
   var _a, _b, _c;
   const { children, cellRenderer: CellRenderer, index: index2, measureRow, row, table, ...otherAttributes } = props;
@@ -43853,12 +43897,13 @@ const DisplayRow = React.memo(function DisplayRow2(props) {
   }
   const ref = React.useRef(null);
   const expansionRef = React.useRef(null);
+  const expandedRowSize = useResizeObserver$1(expansionRef, !!expandedRow);
   React.useEffect(() => {
     var _a2, _b2;
     const rowHeight = ((_a2 = ref.current) == null ? void 0 : _a2.getBoundingClientRect().height) ?? 0;
     const expansionHeight = ((_b2 = expansionRef.current) == null ? void 0 : _b2.getBoundingClientRect().height) ?? 0;
     measureRow(rowHeight + expansionHeight);
-  }, [expansionRef.current]);
+  }, [expansionRef.current, expandedRowSize == null ? void 0 : expandedRowSize.height]);
   const className = clsx("group/row", otherAttributes.className, {
     "hover:cursor-grab": tableMeta.rowDrag.isEnabled && typeof attributes.onClick !== "function",
     "hover:cursor-pointer": typeof attributes.onClick === "function"
@@ -44655,20 +44700,14 @@ const MemoedFooter = React.memo(function MemoedFooter2(props) {
   );
 });
 function EmptyStateBody(props) {
-  var _a, _b;
+  var _a;
   const { emptyState: Placeholder2, isReady, reason, ...attributes } = props;
   const ref = React.useRef(null);
+  const rect = useBoundingClientRectListener({ current: (_a = ref.current) == null ? void 0 : _a.parentNode });
   if (!isReady) {
     return /* @__PURE__ */ React.createElement("tbody", { ...attributes, className: "!auto-rows-fr" });
   }
-  return /* @__PURE__ */ React.createElement("tbody", { ...attributes, ref, className: "!auto-rows-fr", "data-taco": "empty-state" }, /* @__PURE__ */ React.createElement("tr", { className: "!auto-rows-fr " }, /* @__PURE__ */ React.createElement(
-    "td",
-    {
-      style: { maxWidth: (_b = (_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.clientWidth },
-      className: "col-span-full !border-0 !p-0 hover:!bg-white"
-    },
-    Placeholder2 ? /* @__PURE__ */ React.createElement(Placeholder2, { reason }) : void 0
-  )));
+  return /* @__PURE__ */ React.createElement("tbody", { ...attributes, ref, className: "!auto-rows-fr", "data-taco": "empty-state" }, /* @__PURE__ */ React.createElement("tr", { className: "!auto-rows-fr" }, /* @__PURE__ */ React.createElement("td", { style: { maxWidth: rect == null ? void 0 : rect.width }, className: "col-span-full !border-0 !p-0 hover:!bg-white" }, Placeholder2 ? /* @__PURE__ */ React.createElement(Placeholder2, { reason }) : void 0)));
 }
 const SearchInput22 = React.forwardRef(function SearchInput222(props, ref) {
   const {
@@ -48295,67 +48334,6 @@ function useDroppable(_ref) {
     setNodeRef
   };
 }
-const restrictToVerticalAxis = (_ref) => {
-  let {
-    transform
-  } = _ref;
-  return {
-    ...transform,
-    x: 0
-  };
-};
-function getContainerById(children, id2) {
-  var _a;
-  const lists = React.Children.toArray(children).filter(
-    (child) => child.type.displayName === "SortableList"
-  );
-  const list = lists.find(
-    (list2) => list2.props.id === id2
-  );
-  if (list) {
-    return list == null ? void 0 : list.props;
-  }
-  return (_a = lists.find((l2) => React.Children.toArray(l2.props.children).findIndex((child) => child.props.id === id2) > -1)) == null ? void 0 : _a.props;
-}
-function Container$1(externalProps) {
-  const { children, reorder, move } = externalProps;
-  function handleDragOver(event) {
-    const { active, over } = event;
-    if (!(active == null ? void 0 : active.id) || !(over == null ? void 0 : over.id)) {
-      return;
-    }
-    const activeList = getContainerById(children, active.id);
-    const overList = getContainerById(children, over.id);
-    if (!(activeList == null ? void 0 : activeList.id) || !(overList == null ? void 0 : overList.id) || activeList.id === overList.id) {
-      return;
-    }
-    move(active.id, activeList == null ? void 0 : activeList.id, overList.id);
-  }
-  function handleDragEnd(event) {
-    const { active, over } = event;
-    if (!(active == null ? void 0 : active.id) || !(over == null ? void 0 : over.id)) {
-      return;
-    }
-    const activeList = getContainerById(children, active.id);
-    const overList = getContainerById(children, over.id);
-    if (!(activeList == null ? void 0 : activeList.id) || !(overList == null ? void 0 : overList.id) || activeList.id !== overList.id) {
-      return;
-    }
-    reorder(active.id, over.id, overList.id);
-  }
-  return /* @__PURE__ */ React.createElement(
-    DndContext,
-    {
-      collisionDetection: closestCenter,
-      ...externalProps,
-      modifiers: [restrictToVerticalAxis],
-      onDragOver: handleDragOver,
-      onDragEnd: handleDragEnd
-    },
-    children
-  );
-}
-Container$1.displayName = "SortableContainer";
 function arrayMove(array2, from, to) {
   const newArray = array2.slice();
   newArray.splice(to < 0 ? newArray.length + to : to, 0, newArray.splice(from, 1)[0]);
@@ -48824,6 +48802,74 @@ function normalizeLocalDisabled(localDisabled, globalDisabled) {
   };
 }
 [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
+function List(externalProps) {
+  const { children, id: id2, ...props } = externalProps;
+  const { setNodeRef } = useDroppable({ id: id2 });
+  const items = React.Children.toArray(children).map((child) => child.props);
+  return /* @__PURE__ */ React.createElement(SortableContext, { id: id2, items, strategy: verticalListSortingStrategy }, /* @__PURE__ */ React.createElement("div", { ...props, ref: id2 ? setNodeRef : void 0 }, children));
+}
+List.displayName = "SortableList";
+const restrictToVerticalAxis = (_ref) => {
+  let {
+    transform
+  } = _ref;
+  return {
+    ...transform,
+    x: 0
+  };
+};
+function getContainerById(children, id2) {
+  var _a;
+  const lists = React.Children.toArray(children).filter(
+    (child) => child.type === List
+  );
+  const list = lists.find(
+    (list2) => list2.props.id === id2
+  );
+  if (list) {
+    return list == null ? void 0 : list.props;
+  }
+  return (_a = lists.find((l2) => React.Children.toArray(l2.props.children).findIndex((child) => child.props.id === id2) > -1)) == null ? void 0 : _a.props;
+}
+function Container$1(externalProps) {
+  const { children, reorder, move } = externalProps;
+  function handleDragOver(event) {
+    const { active, over } = event;
+    if (!(active == null ? void 0 : active.id) || !(over == null ? void 0 : over.id)) {
+      return;
+    }
+    const activeList = getContainerById(children, active.id);
+    const overList = getContainerById(children, over.id);
+    if (!(activeList == null ? void 0 : activeList.id) || !(overList == null ? void 0 : overList.id) || activeList.id === overList.id) {
+      return;
+    }
+    move == null ? void 0 : move(active.id, activeList.id, overList.id);
+  }
+  function handleDragEnd(event) {
+    const { active, over } = event;
+    if (!(active == null ? void 0 : active.id) || !(over == null ? void 0 : over.id)) {
+      return;
+    }
+    const activeList = getContainerById(children, active.id);
+    const overList = getContainerById(children, over.id);
+    if (!(activeList == null ? void 0 : activeList.id) || !(overList == null ? void 0 : overList.id) || activeList.id !== overList.id) {
+      return;
+    }
+    reorder(active.id, over.id, overList.id);
+  }
+  return /* @__PURE__ */ React.createElement(
+    DndContext,
+    {
+      collisionDetection: closestCenter,
+      ...externalProps,
+      modifiers: [restrictToVerticalAxis],
+      onDragOver: handleDragOver,
+      onDragEnd: handleDragEnd
+    },
+    children
+  );
+}
+Container$1.displayName = "SortableContainer";
 const isFormElement = (element) => {
   const formElementNodeNames = ["BUTTON", "INPUT", "TEXTAREA", "SELECT", "FIELDSET"];
   return formElementNodeNames.includes(element.nodeName);
@@ -48847,13 +48893,6 @@ function Item(props) {
   return /* @__PURE__ */ React.createElement("div", { ...elProps }, children);
 }
 Item.displayName = "SortableListItem";
-function List(externalProps) {
-  const { children, id: id2, ...props } = externalProps;
-  const { setNodeRef } = useDroppable({ id: id2 });
-  const items = React.Children.toArray(children).map((child) => child.props);
-  return /* @__PURE__ */ React.createElement(SortableContext, { id: id2, items, strategy: verticalListSortingStrategy }, /* @__PURE__ */ React.createElement("div", { ...props, ref: id2 ? setNodeRef : void 0 }, children));
-}
-List.displayName = "SortableList";
 const Column$3 = React.forwardRef(function Column2(props, ref) {
   var _a, _b, _c;
   const { column, draggable = false, ...dragAttributes } = props;
@@ -50478,11 +50517,11 @@ function guessComparatorsBasedOnControl(column) {
 }
 const FilterContext = React.createContext([]);
 const FilterColumn = React.forwardRef((props, ref) => {
-  const { allColumns, onChange: handleChange, value = null, ...attributes } = props;
+  const { allHeaders, onChange: handleChange, value = null, ...attributes } = props;
   const { texts } = useLocalization();
   const filters = React.useContext(FilterContext);
-  const selectedColumn = allColumns.find((column) => column.id === value);
-  const warning2 = selectedColumn && !selectedColumn.getIsVisible();
+  const selectedColumn = allHeaders.find((header) => header.id === value);
+  const warning2 = selectedColumn && !selectedColumn.column.getIsVisible();
   return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React.createElement(
     Field,
     {
@@ -50500,23 +50539,23 @@ const FilterColumn = React.forwardRef((props, ref) => {
         onChange: handleChange,
         value
       },
-      allColumns.map((column) => {
-        var _a, _b, _c;
+      allHeaders.map((header) => {
+        var _a, _b;
         return /* @__PURE__ */ React.createElement(
           Select22.Option,
           {
-            key: column.id,
-            value: column.id,
-            postfix: !column.getIsVisible() || column.getIsGrouped() ? /* @__PURE__ */ React.createElement(
+            key: header.column.id,
+            value: header.column.id,
+            postfix: !header.column.getIsVisible() || header.column.getIsGrouped() ? /* @__PURE__ */ React.createElement(
               Tooltip$3,
               {
-                title: column.getIsGrouped() ? texts.table.filters.hiddenGroupedColumn : texts.table.filters.hiddenColumn
+                title: header.column.getIsGrouped() ? texts.table.filters.hiddenGroupedColumn : texts.table.filters.hiddenColumn
               },
               /* @__PURE__ */ React.createElement(Icon$1, { name: "eye-off", className: "text-grey-500 !h-5 !w-5" })
             ) : void 0,
-            disabled: column.id !== value && (!column.getCanFilter() || !!filters.find((f2) => f2.id === column.id))
+            disabled: header.column.id !== value && (!header.column.getCanFilter() || !!filters.find((f2) => f2.id === header.column.id))
           },
-          ((_a = column.columnDef.meta) == null ? void 0 : _a.header) + (column.parent ? ` (${(_c = (_b = column.parent) == null ? void 0 : _b.columnDef.meta) == null ? void 0 : _c.header})` : "")
+          /* @__PURE__ */ React.createElement(React.Fragment, null, flexRender(header.column.columnDef.header, header.getContext()), header.column.parent ? ` (${flexRender((_b = (_a = header.column.parent) == null ? void 0 : _a.columnDef.meta) == null ? void 0 : _b.header, header.getContext())})` : "")
         );
       })
     )
@@ -50685,9 +50724,9 @@ function Control(props) {
   );
 }
 function Filter(props) {
-  const { allColumns, filter: filter2, onChange: handleChange, onRemove, position } = props;
+  const { allHeaders, filter: filter2, onChange: handleChange, onRemove, position } = props;
   const { texts } = useLocalization();
-  const column = allColumns.find((c2) => c2.id === filter2.id);
+  const column = allHeaders.find((header) => header.column.id === filter2.id);
   const ref = React.useRef(null);
   const {
     id: id2,
@@ -50695,13 +50734,13 @@ function Filter(props) {
   } = filter2;
   const handleChangeColumn = (columnId) => {
     var _a, _b, _c;
-    const previousColumn = allColumns.find((column2) => column2.id === id2);
-    const nextColumn = allColumns.find((column2) => column2.id === columnId);
-    if (((_a = previousColumn == null ? void 0 : previousColumn.columnDef.meta) == null ? void 0 : _a.dataType) && ((_b = previousColumn == null ? void 0 : previousColumn.columnDef.meta) == null ? void 0 : _b.dataType) === ((_c = nextColumn == null ? void 0 : nextColumn.columnDef.meta) == null ? void 0 : _c.dataType)) {
+    const previousColumn = allHeaders.find((header) => header.column.id === id2);
+    const nextColumn = allHeaders.find((header) => header.column.id === columnId);
+    if (((_a = previousColumn == null ? void 0 : previousColumn.column.columnDef.meta) == null ? void 0 : _a.dataType) && ((_b = previousColumn == null ? void 0 : previousColumn.column.columnDef.meta) == null ? void 0 : _b.dataType) === ((_c = nextColumn == null ? void 0 : nextColumn.column.columnDef.meta) == null ? void 0 : _c.dataType)) {
       handleChange(position, { id: columnId, value: filter2.value });
       return;
     }
-    const validComparators = guessComparatorsBasedOnControl(nextColumn);
+    const validComparators = guessComparatorsBasedOnControl(nextColumn == null ? void 0 : nextColumn.column);
     const value2 = {
       comparator: validComparators[0],
       value: void 0
@@ -50724,13 +50763,13 @@ function Filter(props) {
       ref.current.focus();
     }
   }, [id2]);
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex min-h-[theme(spacing.8)] w-14 flex-shrink-0 items-center justify-end pr-2 text-right" }, position > 0 ? texts.table.filters.conditions.and : texts.table.filters.conditions.where), /* @__PURE__ */ React.createElement(FilterColumn, { allColumns, onChange: handleChangeColumn, value: id2, ref }), /* @__PURE__ */ React.createElement(FilterComparator, { column, onChange: handleChangeComparator, value: comparator }), /* @__PURE__ */ React.createElement(FilterValue, { column, comparator, onChange: handleChangeValue, value }), onRemove ? /* @__PURE__ */ React.createElement(IconButton, { appearance: "discrete", className: "ml-auto", icon: "close", onClick: handleRemove }) : null);
+  return /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex min-h-[theme(spacing.8)] w-14 flex-shrink-0 items-center justify-end pr-2 text-right" }, position > 0 ? texts.table.filters.conditions.and : texts.table.filters.conditions.where), /* @__PURE__ */ React.createElement(FilterColumn, { allHeaders, onChange: handleChangeColumn, value: id2, ref }), /* @__PURE__ */ React.createElement(FilterComparator, { column: column == null ? void 0 : column.column, onChange: handleChangeComparator, value: comparator }), /* @__PURE__ */ React.createElement(FilterValue, { column: column == null ? void 0 : column.column, comparator, onChange: handleChangeValue, value }), onRemove ? /* @__PURE__ */ React.createElement(IconButton, { appearance: "discrete", className: "ml-auto", icon: "close", onClick: handleRemove }) : null);
 }
 const placeholderFilter = { id: "", value: { comparator: TableFilterComparator.Contains, value: void 0 } };
 function ManageFiltersPopover(props) {
   const { length, table, ...popoverProps } = props;
   const { locale: locale2, texts } = useLocalization();
-  const allColumns = table.getAllLeafColumns().filter((column) => !isInternalColumn(column.id)).sort(sortByHeader);
+  const allHeaders = table.getLeafHeaders().filter((column) => !isInternalColumn(column.id)).sort((headerA, headerB) => sortByHeader(headerA.column, headerB.column));
   const columnFilters = table.getState().columnFilters;
   const tableMeta = table.options.meta;
   const [filters, setFilters] = React.useState(columnFilters.length ? columnFilters : [placeholderFilter]);
@@ -50769,7 +50808,7 @@ function ManageFiltersPopover(props) {
         if (f2.id === null || f2.id === "") {
           return false;
         }
-        const controlRenderer = (_b = (_a = allColumns.find((c2) => c2.id === f2.id)) == null ? void 0 : _a.columnDef.meta) == null ? void 0 : _b.control;
+        const controlRenderer = (_b = (_a = allHeaders.find((header) => header.column.id === f2.id)) == null ? void 0 : _a.column.columnDef.meta) == null ? void 0 : _b.control;
         if (f2.value.comparator === TableFilterComparator.IsEmpty || f2.value.comparator === TableFilterComparator.IsNotEmpty || controlRenderer === "switch") {
           return true;
         }
@@ -50799,7 +50838,7 @@ function ManageFiltersPopover(props) {
     Filter,
     {
       key: `filter_${index2}`,
-      allColumns,
+      allHeaders,
       filter: filter2,
       position: index2,
       onChange: handleChangeFilter,
@@ -59239,14 +59278,6 @@ function isTableScrolled(ref) {
 function useTableEditingListener(table, tableRef, scrollToIndex) {
   const tableMeta = table.options.meta;
   const localization = useLocalization();
-  useLazyEffect(() => {
-    return () => {
-      var _a;
-      if (tableMeta.editing.isEditing && tableMeta.rowActive.rowActiveIndex !== void 0) {
-        tableMeta.editing.saveChanges(table, (_a = table.getRowModel().rows[tableMeta.rowActive.rowActiveIndex]) == null ? void 0 : _a.id);
-      }
-    };
-  }, [tableMeta.rowActive.rowActiveIndex, tableMeta.editing.isEditing]);
   const hasChanges = tableMeta.editing.hasChanges();
   React.useEffect(() => {
     function showUnsavedChangesWarning(event) {
@@ -60591,7 +60622,7 @@ function usePendingChangesState(handleSave, handleChange, handleDiscard, rowIden
     var _a, _b, _c;
     return (_c = (_b = (_a = state.changes.errors) == null ? void 0 : _a[cell.row.id]) == null ? void 0 : _b.cells) == null ? void 0 : _c[cell.column.id];
   }
-  async function onCellChanged(cell, rowIndex, nextValue, shouldRunUpdaters = true) {
+  async function onCellChanged(cell, rowIndex, nextValue, shouldRunUpdaters = true, shouldRunValidation = true) {
     var _a;
     const tableMeta = cell.getContext().table.options.meta;
     const state2 = tableMeta.editing.getState();
@@ -60621,7 +60652,7 @@ function usePendingChangesState(handleSave, handleChange, handleDiscard, rowIden
     const nextMoveReasons = { ...state2.changes.moveReasons[cell.row.id] };
     const nextCellErrors = { ...(_a = state2.changes.errors[cell.row.id]) == null ? void 0 : _a.cells };
     let validationErrors = {};
-    if (validator && Object.keys(nextChanges).length && original) {
+    if (validator && Object.keys(nextChanges).length && original && shouldRunValidation) {
       const nextRowValue = { ...original, ...changes, ...updatesForOtherCells };
       validationErrors = await validator(nextRowValue) ?? {};
     }
@@ -60749,7 +60780,9 @@ function usePendingChangesState(handleSave, handleChange, handleDiscard, rowIden
     return completed;
   }
   async function discardChanges(rowId, table) {
-    table.resetRowPinning(true);
+    if (rowId.startsWith(TEMPORARY_ROW_ID_PREFIX)) {
+      table.resetRowPinning(true);
+    }
     dispatch({
       type: "removeRow",
       rowId,
@@ -60845,7 +60878,7 @@ function useTableEditing(isEnabled = false, defaultToggleEditing = false, handle
         return;
       }
     }
-    const changeset = row ?? handleCreate();
+    const changeset = row ?? await handleCreate();
     try {
       if (changeset) {
         const temporaryRows = tableMeta.editing.temporaryRows;
@@ -61103,7 +61136,7 @@ function EditingControlCell(props) {
       if (hasChanged) {
         tableMeta.editing.setCellValue(cell, rowIndex, nextValue);
         if (hasNonTextControl) {
-          requestAnimationFrame(() => tableMeta.editing.onCellChanged(cell, rowIndex, nextValue));
+          requestAnimationFrame(() => tableMeta.editing.onCellChanged(cell, rowIndex, nextValue, true, false));
         }
       }
     },
@@ -61116,7 +61149,7 @@ function EditingControlCell(props) {
       }
       requestAnimationFrame(() => {
         tableMeta.editing.toggleDetailedMode(false);
-        tableMeta.editing.onCellChanged(cell, rowIndex, void 0, !hasNonTextControl);
+        tableMeta.editing.onCellChanged(cell, rowIndex, void 0, !hasNonTextControl, true);
       });
     },
     [hasNonTextControl, cell.row.id, JSON.stringify(rowChanges), rowIndex, cell.column.id, cell.row.original]
@@ -61412,6 +61445,11 @@ function Row(props) {
       }
     }
   }, [tableMeta.editing.isEditing, tableMeta.rowActive.rowActiveIndex, tableMeta.editing.lastFocusedCellIndex]);
+  useLazyEffect(() => {
+    if (tableMeta.editing.isEditing && !isActiveRow) {
+      tableMeta.editing.saveChanges(table, row.id);
+    }
+  }, [isActiveRow]);
   const handleFocus = React.useCallback(
     (event) => {
       var _a;