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

package/dist/esm/packages/taco/src/components/Table3/features/useTableEditing.js

@@ -1,29 +1,25 @@
 import React__default from 'react';
-import { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown.js';
-import { useLocalization } from '../../Provider/Localization.js';
-import { _forOf, _catch } from '../../../../../../node_modules/babel-plugin-transform-async-to-promises/helpers.mjs.js';
-import { willRowMove } from '../util/editing.js';
-import { debounce } from 'lodash-es';
+import { usePendingChangesState } from './useEditingState.js';
 
-function useTableEditing(isEnabled = false, handleSave, handleChange, validator) {
+function useTableEditing(isEnabled = false, handleSave, handleChange, rowIdentityAccessor, validator) {
   // used to switch the table into editing mode
-  const [isEditing, toggleEditing] = React__default.useState(false);
+  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 [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();
-  });
+  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);
+  }
   return {
     isEnabled,
     isEditing,
@@ -35,392 +31,6 @@ function useTableEditing(isEnabled = false, handleSave, handleChange, validator)
     ...pendingChangesFns
   };
 }
-function usePendingChanges(isEnabled, handleSave, handleChange, validator) {
-  const saveChanges = function (rowId = undefined) {
-    try {
-      let _exit = false;
-      if (!handleSave) {
-        console.warn('Tried to save, but Table has no onEditingSave handler');
-        return Promise.resolve();
-      }
-      // 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;
-                }
-              } else if (typeof error === 'object') {
-                cellErrors = error;
-              }
-              if (rowError || cellErrors) {
-                setPendingChanges(currentChanges => {
-                  const nextChanges = {
-                    ...currentChanges
-                  };
-                  nextChanges[rowId]._meta.errors = {
-                    row: rowError,
-                    cells: cellErrors,
-                    shouldShowErrorAlert: true
-                  };
-                  return nextChanges;
-                });
-              }
-              setRowSaveStatus(rowId, undefined);
-            });
-          }, function () {
-            return _exit;
-          });
-        }
-      }());
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-  const validateCell = function (cell) {
-    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
-                }
-              };
-              return nextChanges;
-            });
-          });
-        }
-      }();
-      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-  const setCellValue = function (cell, change, rowIndex) {
-    try {
-      const changes = {
-        [cell.column.id]: change
-      };
-      setPendingChanges(currentChanges => {
-        const nextChanges = createPendingChangesSetter(currentChanges, cell.row, rowIndex, changes, localization);
-        pendingChangesUpdater.syncCellChanges(nextChanges);
-        return nextChanges;
-      });
-      pendingChangesUpdater.runCellUpdates(changes, cell, rowIndex);
-      return Promise.resolve();
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-  const addCreatedRowChangeset = function (row) {
-    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;
-          }
-        }, currentChanges);
-      });
-      return Promise.resolve();
-    } 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];
-  }
-  function getCellError(cell) {
-    var _pendingChanges$cell$2, _pendingChanges$cell$3, _pendingChanges$cell$4;
-    return (_pendingChanges$cell$2 = pendingChanges[cell.row.id]) === null || _pendingChanges$cell$2 === void 0 ? void 0 : (_pendingChanges$cell$3 = _pendingChanges$cell$2._meta.errors) === null || _pendingChanges$cell$3 === void 0 ? void 0 : (_pendingChanges$cell$4 = _pendingChanges$cell$3.cells) === null || _pendingChanges$cell$4 === void 0 ? void 0 : _pendingChanges$cell$4[cell.column.id];
-  }
-  const pendingChangesUpdater = usePendingChangesUpdater(handleChange, setPendingChanges);
-  function hasRowErrors(rowId) {
-    var _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);
-  }
-  function getRowPendingChange(rowId) {
-    const rowPendingChanges = pendingChanges[rowId];
-    if (rowPendingChanges) {
-      const {
-        _meta,
-        ...pendingChange
-      } = rowPendingChanges;
-      return pendingChange;
-    }
-    return undefined;
-  }
-  function getRowSaveStatus(rowId) {
-    if (!isEnabled) {
-      return false;
-    }
-    return saveStates[rowId];
-  }
-  function setRowSaveStatus(rowId, status) {
-    setSaveState(currentStates => {
-      const nextStates = {
-        ...currentStates
-      };
-      if (status) {
-        nextStates[rowId] = status;
-      } else {
-        delete nextStates[rowId];
-      }
-      return nextStates;
-    });
-  }
-  function 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;
-    }
-    return rowId ? !!pendingChanges[rowId] : !!Object.keys(pendingChanges).length;
-  }
-  function hasAlertErrors() {
-    if (!isEnabled) {
-      return false;
-    }
-    return !!getAlertErrors().length;
-  }
-  function getAlertErrors() {
-    return Object.keys(pendingChanges).filter(hasRowErrorsSeen).map(rowId => ({
-      rowId,
-      pendingChange: pendingChanges[rowId]
-    }));
-  }
-  function resetChanges(rowId) {
-    setPendingChanges(currentChanges => {
-      const nextChanges = {
-        ...currentChanges
-      };
-      delete nextChanges[rowId];
-      return nextChanges;
-    });
-  }
-  function getCompletedRowsCount() {
-    return Object.values(saveStates).filter(value => value === 'complete').length;
-  }
-  return {
-    getCellValue,
-    getCellError,
-    setCellValue,
-    validateCell,
-    addCreatedRowChangeset,
-    hasChanges,
-    hasAlertErrors,
-    getAlertErrors,
-    saveChanges,
-    resetChanges,
-    hasRowErrors,
-    hasRowErrorsSeen,
-    getRowPendingChange,
-    getRowSaveStatus,
-    setRowSaveStatus,
-    getRowMoveReason,
-    getCompletedRowsCount
-  };
-}
-function useLastFocusedCellIndex() {
-  // 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(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];
-    }
-  }
-  // 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
-  };
-}
 
 export { useTableEditing };
 //# sourceMappingURL=useTableEditing.js.map

package/dist/esm/packages/taco/src/components/Table3/features/useTableEditing.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableEditing.js","sources":["../../../../../../../../src/components/Table3/features/useTableEditing.ts"],"sourcesContent":["import React from 'react';\nimport { Cell as ReactTableCell, Row as ReactTableRow } from '@tanstack/react-table';\nimport { Table3EditingChangeHandler, Table3EditingSaveHandler, Table3EditingValidatorFn } from '../types';\nimport { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown';\nimport { willRowMove } from '../util/editing';\nimport { debounce } from 'lodash';\nimport { Localization, useLocalization } from '../../Provider/Localization';\n\nexport function useTableEditing<TType = unknown>(\n    isEnabled = false,\n    handleSave: Table3EditingSaveHandler<TType> | undefined,\n    handleChange: Table3EditingChangeHandler<TType> | undefined,\n    validator: Table3EditingValidatorFn<TType> | undefined\n) {\n    // used to switch the table into editing mode\n    const [isEditing, toggleEditing] = React.useState(false);\n\n    // used to switch the editing between \"detailed\" mode\n    const [isDetailedMode, toggleDetailedMode] = React.useState(false);\n\n    // store the last focused cell, so that up/down arrow key navigation remains in the same column\n    const [lastFocusedCellIndex, setLastFocusedCellIndex] = useLastFocusedCellIndex();\n\n    // store pending changes for each row\n    // changes are saved as soon as the active row changes, so in most cases this will only contain the active row's changes\n    // but not always - if validation or server requests fail when saving, those rows remain until the failure is resolved\n    const pendingChangesFns = usePendingChanges<TType>(isEnabled, handleSave, handleChange, validator);\n\n    useGlobalKeyDown(isEnabled && isEditing ? { key: 's', meta: true, shift: false } : undefined, event => {\n        event.preventDefault();\n        pendingChangesFns.saveChanges();\n    });\n\n    return {\n        isEnabled,\n        isEditing,\n        isDetailedMode,\n        toggleDetailedMode: isEnabled ? toggleDetailedMode : () => undefined,\n        toggleEditing: isEnabled ? toggleEditing : () => undefined,\n        lastFocusedCellIndex,\n        setLastFocusedCellIndex,\n        ...pendingChangesFns,\n    };\n}\n\ntype SaveState = 'pending' | 'complete';\nexport type PendingChange<TType = unknown> = Partial<TType> & {\n    _meta: {\n        original: TType;\n        moveReason: Record<string, 'search' | 'sorting' | 'filter'>;\n        errors: {\n            row: string;\n            cells: Record<string, string>;\n            shouldShowErrorAlert: boolean;\n        };\n        status?: SaveState;\n    };\n};\n\ntype PendingChanges<TType = unknown> = Record<string, PendingChange<TType>>;\nfunction usePendingChanges<TType = unknown>(\n    isEnabled: boolean,\n    handleSave: Table3EditingSaveHandler<TType> | undefined,\n    handleChange: Table3EditingChangeHandler<TType> | undefined,\n    validator: Table3EditingValidatorFn<TType> | undefined\n) {\n    const localization = useLocalization();\n    const [pendingChanges, setPendingChanges] = React.useState<PendingChanges<TType>>({});\n    // we maintain save status as separate state because 'complete' needs to briefly show after pendingChanges are deleted\n    const [saveStates, setSaveState] = React.useState<Record<string, SaveState>>({});\n\n    function getCellValue<T extends TType>(cell: ReactTableCell<T, unknown>): unknown | undefined {\n        return pendingChanges[cell.row.id]?.[cell.column.id];\n    }\n\n    function getCellError<T extends TType>(cell: ReactTableCell<T, unknown>): string | undefined {\n        return pendingChanges[cell.row.id]?._meta.errors?.cells?.[cell.column.id];\n    }\n\n    async function addCreatedRowChangeset(row: ReactTableRow<unknown>) {\n        const cells = row.getAllCells();\n\n        setPendingChanges((currentChanges: any) => {\n            return cells.reduce((changes, cell) => {\n                if (cell.getValue()) {\n                    return {\n                        ...changes,\n                        [cell.row.id]: {\n                            ...changes[cell.row.id],\n                            [cell.column.id]: cell.getValue(),\n                            _meta: {\n                                ...currentChanges[cell.row.id]?._meta,\n                                original: cell.row.original,\n                                moveReason: {\n                                    ...currentChanges[cell.row.id]?._meta.moveReason,\n                                },\n                                errors: {\n                                    ...currentChanges[cell.row.id]?._meta.errors,\n                                },\n                            },\n                        },\n                    };\n                } else {\n                    return changes;\n                }\n            }, currentChanges);\n        });\n    }\n    const pendingChangesUpdater = usePendingChangesUpdater(handleChange, setPendingChanges);\n\n    async function setCellValue<T extends TType>(cell: ReactTableCell<T, unknown>, change: unknown, rowIndex: number) {\n        const changes = {\n            [cell.column.id]: change,\n        } as Partial<T>;\n\n        setPendingChanges(currentChanges => {\n            const nextChanges = createPendingChangesSetter<T>(\n                currentChanges as PendingChanges<T>,\n                cell.row,\n                rowIndex,\n                changes,\n                localization\n            );\n            pendingChangesUpdater.syncCellChanges(nextChanges);\n            return nextChanges;\n        });\n        pendingChangesUpdater.runCellUpdates<T>(changes, cell, rowIndex);\n    }\n\n    async function validateCell<T extends TType>(cell: ReactTableCell<T, unknown>) {\n        if (!validator || !isEnabled) {\n            return;\n        }\n\n        const changeSet: any = getChangesetFromChanges(pendingChanges[cell.row.id]);\n\n        // only validate if the cell being blurred actually has any changes\n        if (cell.column.id in changeSet) {\n            const errors = ((await validator(changeSet)) ?? {}) as Record<string, string>;\n\n            setPendingChanges(currentChanges => {\n                const nextChanges = { ...currentChanges };\n                nextChanges[cell.row.id]._meta = {\n                    ...nextChanges[cell.row.id]._meta,\n                    errors: {\n                        ...nextChanges[cell.row.id]._meta.errors,\n                        cells: errors,\n                        shouldShowErrorAlert: !Object.keys(errors).length\n                            ? false\n                            : nextChanges[cell.row.id]._meta.errors.shouldShowErrorAlert,\n                    },\n                };\n                return nextChanges;\n            });\n        }\n    }\n\n    function hasRowErrors(rowId: string) {\n        if (!isEnabled) {\n            return false;\n        }\n\n        return (\n            !!pendingChanges[rowId]?._meta.errors?.row || !!Object.keys(pendingChanges[rowId]?._meta.errors?.cells ?? {}).length\n        );\n    }\n\n    function hasRowErrorsSeen(rowId: string) {\n        if (!isEnabled) {\n            return false;\n        }\n\n        return hasRowErrors(rowId) && !!pendingChanges[rowId]._meta.errors?.shouldShowErrorAlert;\n    }\n    function getRowPendingChange(rowId: string) {\n        const rowPendingChanges = pendingChanges[rowId];\n\n        if (rowPendingChanges) {\n            const { _meta, ...pendingChange } = rowPendingChanges;\n\n            return pendingChange;\n        }\n\n        return undefined;\n    }\n\n    function getRowSaveStatus(rowId: string) {\n        if (!isEnabled) {\n            return false;\n        }\n\n        return saveStates[rowId];\n    }\n\n    function setRowSaveStatus(rowId: string, status: 'pending' | 'complete' | undefined) {\n        setSaveState(currentStates => {\n            const nextStates = { ...currentStates };\n\n            if (status) {\n                nextStates[rowId] = status;\n            } else {\n                delete nextStates[rowId];\n            }\n\n            return nextStates;\n        });\n    }\n\n    function getRowMoveReason(rowId: string) {\n        return pendingChanges[rowId]?._meta.moveReason ? Object.values(pendingChanges[rowId]._meta.moveReason)[0] : undefined;\n    }\n\n    function hasChanges(rowId?: string) {\n        if (!isEnabled) {\n            return false;\n        }\n\n        return rowId ? !!pendingChanges[rowId] : !!Object.keys(pendingChanges).length;\n    }\n\n    function hasAlertErrors() {\n        if (!isEnabled) {\n            return false;\n        }\n        return !!getAlertErrors().length;\n    }\n\n    function getAlertErrors<T extends TType>() {\n        return Object.keys(pendingChanges)\n            .filter(hasRowErrorsSeen)\n            .map(rowId => ({ rowId, pendingChange: pendingChanges[rowId] as PendingChange<T> }));\n    }\n\n    function resetChanges(rowId: string) {\n        setPendingChanges(currentChanges => {\n            const nextChanges = { ...currentChanges };\n            delete nextChanges[rowId];\n            return nextChanges;\n        });\n    }\n\n    async function saveChanges(rowId: string | undefined = undefined) {\n        if (!handleSave) {\n            console.warn('Tried to save, but Table has no onEditingSave handler');\n            return;\n        }\n\n        // we save back to pendingChanges, so make a copy of it's state when save was triggered\n        const changesToSave = rowId ? { [rowId]: pendingChanges[rowId] } : { ...pendingChanges };\n        const changes = Object.keys(changesToSave);\n\n        if (changes.length) {\n            for (const rowId of changes) {\n                const pendingChange = changesToSave[rowId];\n\n                const changeSet = getChangesetFromChanges(pendingChange);\n                try {\n                    if (getRowSaveStatus(rowId) === 'pending') return;\n\n                    // set saving = true\n                    setRowSaveStatus(rowId, 'pending');\n\n                    // re-run validation, maybe a cell is already invalid but has never been blurred\n                    if (validator) {\n                        const errors = await validator(changeSet);\n\n                        if (errors && Object.keys(errors).length) {\n                            throw errors;\n                        }\n                    }\n                    // send new data to the server\n                    await handleSave(changeSet);\n\n                    // cleanup changes, we don't need them after saving\n                    resetChanges(rowId);\n                    setRowSaveStatus(rowId, 'complete');\n                } catch (error) {\n                    // the onEditingSave handler should throw errors when something fails, e.g. validation, network errors etc\n                    // this code handles those errors and maps them either to row errors or cell specific errors\n                    let rowError: any;\n                    let cellErrors: any;\n\n                    if (typeof error === 'string') {\n                        rowError = error;\n                    } else if (error instanceof Error) {\n                        rowError = error.message;\n\n                        // most of our apis return error objects within this shape\n                        if (typeof (error as any).response?.data === 'object') {\n                            cellErrors = (error as any).response?.data;\n                        }\n                    } else if (typeof error === 'object') {\n                        cellErrors = error;\n                    }\n\n                    if (rowError || cellErrors) {\n                        setPendingChanges(currentChanges => {\n                            const nextChanges = { ...currentChanges };\n                            nextChanges[rowId]._meta.errors = {\n                                row: rowError,\n                                cells: cellErrors,\n                                shouldShowErrorAlert: true,\n                            };\n                            return nextChanges;\n                        });\n                    }\n\n                    setRowSaveStatus(rowId, undefined);\n                }\n            }\n        }\n    }\n\n    function getCompletedRowsCount() {\n        return Object.values(saveStates).filter(value => value === 'complete').length;\n    }\n\n    return {\n        getCellValue,\n        getCellError,\n        setCellValue,\n        validateCell,\n        addCreatedRowChangeset,\n        hasChanges,\n        hasAlertErrors,\n        getAlertErrors,\n        saveChanges,\n        resetChanges,\n        hasRowErrors,\n        hasRowErrorsSeen,\n        getRowPendingChange,\n        getRowSaveStatus,\n        setRowSaveStatus,\n        getRowMoveReason,\n        getCompletedRowsCount,\n    };\n}\n\nfunction useLastFocusedCellIndex(): [number | undefined, (index: number | undefined) => void] {\n    // store the last focused cell, so that up/down arrow key navigation remains in the same column\n    const lastFocusedCellIndexRef = React.useRef<number | undefined>(undefined);\n    const setLastFocusedCellIndex = React.useCallback((index: number | undefined) => {\n        lastFocusedCellIndexRef.current = index;\n    }, []);\n\n    return [lastFocusedCellIndexRef.current, setLastFocusedCellIndex];\n}\n\nfunction usePendingChangesUpdater<TType = unknown>(\n    handleChange: Table3EditingChangeHandler<TType> | undefined,\n    setPendingChanges: React.Dispatch<React.SetStateAction<PendingChanges<TType>>>\n) {\n    const localization = useLocalization();\n    const updatersRef = React.useRef<PendingChanges<TType>>({});\n\n    const runCellUpdates = React.useCallback(\n        debounce(async function <T extends TType>(changes: Partial<T>, cell: ReactTableCell<T, unknown>, rowIndex: number) {\n            if (typeof handleChange === 'function') {\n                const previousValues = {\n                    ...cell.row.original,\n                    ...getChangesetFromChanges(updatersRef.current[cell.row.id]),\n                };\n                const nextValues = {\n                    ...previousValues,\n                    ...changes,\n                };\n                const updates = await handleChange(cell.column.id, (changes as any)[cell.column.id], nextValues, previousValues);\n\n                if (updates && Object.keys(updates).length) {\n                    setPendingChanges(currentChanges =>\n                        createPendingChangesSetter(\n                            currentChanges,\n                            cell.row as unknown as ReactTableRow<TType>,\n                            rowIndex,\n                            updates,\n                            localization\n                        )\n                    );\n                }\n            }\n        }, 250),\n        []\n    ) as unknown as <T extends TType>(changes: Partial<T>, cell: ReactTableCell<T, unknown>, rowIndex: number) => Promise<void>;\n\n    function syncCellChanges<T extends TType>(changes: PendingChanges<T>) {\n        updatersRef.current = changes;\n    }\n\n    return {\n        syncCellChanges,\n        runCellUpdates,\n    };\n}\n\nfunction createPendingChangesSetter<TType = unknown>(\n    currentChanges: PendingChanges<TType>,\n    row: ReactTableRow<TType>,\n    rowIndex: number,\n    changes: Partial<TType>,\n    localization: Localization\n) {\n    // prepare\n    const nextChanges: PendingChanges<TType> = { ...currentChanges };\n    const rowChanges = {\n        ...currentChanges[row.id],\n        _meta: {\n            ...currentChanges[row.id]?._meta,\n            original: row.original,\n            moveReason: {\n                ...currentChanges[row.id]?._meta.moveReason,\n            },\n            errors: {\n                ...currentChanges[row.id]?._meta.errors,\n            },\n        },\n    } as PendingChange<TType>;\n\n    // run changes\n    const cells = row._getAllCellsByColumnId();\n\n    for (const [accessor, change] of Object.entries(changes)) {\n        // update if the change is different to the original (saved) value,\n        // otherwise remove any change - no point saving the same value\n        if (change !== (row.original as any)[accessor]) {\n            (rowChanges as PendingChange)[accessor] = change;\n\n            // consumers sometimes include properties in onEditingChange that aren't rendered as columns, we need to guard against that.\n            // eslint-disable-next-line no-prototype-builtins\n            if (cells.hasOwnProperty(accessor)) {\n                // determine if the row will move position based on this change, and save why it will move\n                const reason = willRowMove(cells[accessor], change, rowIndex, localization);\n\n                if (reason) {\n                    rowChanges._meta.moveReason[accessor] = reason;\n                } else {\n                    delete rowChanges._meta.moveReason[accessor];\n                }\n            }\n        } else {\n            delete rowChanges[accessor];\n            delete rowChanges._meta.moveReason[accessor];\n        }\n    }\n\n    // set changes\n    // or delete if there are no changes left, so that we don't store changes with unchanged data\n    if (Object.keys(rowChanges).filter(k => k !== '_meta').length) {\n        nextChanges[row.id] = rowChanges;\n    } else {\n        delete nextChanges[row.id];\n    }\n\n    return nextChanges;\n}\n\nfunction getChangesetFromChanges<TType = unknown>(changes: PendingChange<TType>): TType {\n    // extract the original data from the row changes\n    const { _meta, ...changeset } = changes ?? {};\n    // and mix them in with the changes, ready to send to the server\n    return { ..._meta?.original, ...changeset };\n}\n"],"names":["useTableEditing","isEnabled","handleSave","handleChange","validator","isEditing","toggleEditing","React","useState","isDetailedMode","toggleDetailedMode","lastFocusedCellIndex","setLastFocusedCellIndex","useLastFocusedCellIndex","pendingChangesFns","usePendingChanges","useGlobalKeyDown","key","meta","shift","undefined","event","preventDefault","saveChanges","rowId","console","warn","Promise","resolve","changesToSave","pendingChanges","changes","Object","keys","length","_forOf","pendingChange","changeSet","getChangesetFromChanges","_catch","_temp3","_result","_exit","then","resetChanges","setRowSaveStatus","getRowSaveStatus","_temp2","errors","error","rowError","cellErrors","Error","_error$response","message","response","data","_error$response2","setPendingChanges","currentChanges","nextChanges","_meta","row","cells","shouldShowErrorAlert","e","reject","validateCell","cell","id","_temp","column","setCellValue","change","rowIndex","createPendingChangesSetter","localization","pendingChangesUpdater","syncCellChanges","runCellUpdates","addCreatedRowChangeset","getAllCells","reduce","getValue","_currentChanges$cell$","_currentChanges$cell$2","_currentChanges$cell$3","original","moveReason","useLocalization","saveStates","setSaveState","getCellValue","_pendingChanges$cell$","getCellError","_pendingChanges$cell$2","_pendingChanges$cell$3","_pendingChanges$cell$4","usePendingChangesUpdater","hasRowErrors","_pendingChanges$rowId","_pendingChanges$rowId2","_pendingChanges$rowId3","_pendingChanges$rowId4","_pendingChanges$rowId5","hasRowErrorsSeen","_pendingChanges$rowId6","getRowPendingChange","rowPendingChanges","status","currentStates","nextStates","getRowMoveReason","_pendingChanges$rowId7","values","hasChanges","hasAlertErrors","getAlertErrors","filter","map","getCompletedRowsCount","value","lastFocusedCellIndexRef","useRef","useCallback","index","current","updatersRef","debounce","previousValues","nextValues","updates","_temp4","rowChanges","_currentChanges$row$i","_currentChanges$row$i2","_currentChanges$row$i3","_getAllCellsByColumnId","accessor","entries","hasOwnProperty","reason","willRowMove","k","changeset"],"mappings":"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"}
+{"version":3,"file":"useTableEditing.js","sources":["../../../../../../../../src/components/Table3/features/useTableEditing.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable } from '@tanstack/react-table';\nimport { Table3EditingChangeHandler, Table3EditingSaveHandler, Table3EditingValidatorFn } from '../types';\nimport { usePendingChangesState } from './useEditingState';\n\nexport function useTableEditing<TType = unknown>(\n    isEnabled = false,\n    handleSave: Table3EditingSaveHandler<TType> | undefined,\n    handleChange: Table3EditingChangeHandler<TType> | undefined,\n    rowIdentityAccessor: keyof TType | undefined,\n    validator: Table3EditingValidatorFn<TType> | undefined\n) {\n    // used to switch the table into editing mode\n    const [isEditing, setEditing] = React.useState(false);\n\n    // used to switch the editing between \"detailed\" mode\n    const [isDetailedMode, toggleDetailedMode] = React.useState(false);\n\n    // store the last focused cell, so that up/down arrow key navigation remains in the same column\n    const [lastFocusedCellIndex, setLastFocusedCellIndex] = React.useState<number | undefined>(undefined);\n\n    const pendingChangesFns = usePendingChangesState<TType>(\n        handleSave,\n        handleChange,\n        rowIdentityAccessor as keyof TType,\n        validator\n    );\n\n    function toggleEditing<T extends TType>(enabled: React.SetStateAction<boolean>, table: ReactTable<T>) {\n        if (!enabled) {\n            // save\n            pendingChangesFns.saveChanges(table);\n            // reset detailed mode\n            toggleDetailedMode(false);\n            // reset the last index back to the first focusable element, when editing gets turned off\n            setLastFocusedCellIndex(undefined);\n        }\n\n        setEditing(enabled);\n    }\n\n    return {\n        isEnabled,\n        isEditing,\n        isDetailedMode,\n        toggleDetailedMode: isEnabled ? toggleDetailedMode : () => undefined,\n        toggleEditing: isEnabled ? toggleEditing : () => undefined,\n        lastFocusedCellIndex,\n        setLastFocusedCellIndex,\n        ...pendingChangesFns,\n    };\n}\n"],"names":["useTableEditing","isEnabled","handleSave","handleChange","rowIdentityAccessor","validator","isEditing","setEditing","React","useState","isDetailedMode","toggleDetailedMode","lastFocusedCellIndex","setLastFocusedCellIndex","undefined","pendingChangesFns","usePendingChangesState","toggleEditing","enabled","table","saveChanges"],"mappings":";;;SAKgBA,eAAeA,CAC3BC,SAAS,GAAG,KAAK,EACjBC,UAAuD,EACvDC,YAA2D,EAC3DC,mBAA4C,EAC5CC,SAAsD;;EAGtD,MAAM,CAACC,SAAS,EAAEC,UAAU,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;;EAGrD,MAAM,CAACC,cAAc,EAAEC,kBAAkB,CAAC,GAAGH,cAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;;EAGlE,MAAM,CAACG,oBAAoB,EAAEC,uBAAuB,CAAC,GAAGL,cAAK,CAACC,QAAQ,CAAqBK,SAAS,CAAC;EAErG,MAAMC,iBAAiB,GAAGC,sBAAsB,CAC5Cd,UAAU,EACVC,YAAY,EACZC,mBAAkC,EAClCC,SAAS,CACZ;EAED,SAASY,aAAaA,CAAkBC,OAAsC,EAAEC,KAAoB;IAChG,IAAI,CAACD,OAAO,EAAE;;MAEVH,iBAAiB,CAACK,WAAW,CAACD,KAAK,CAAC;;MAEpCR,kBAAkB,CAAC,KAAK,CAAC;;MAEzBE,uBAAuB,CAACC,SAAS,CAAC;;IAGtCP,UAAU,CAACW,OAAO,CAAC;;EAGvB,OAAO;IACHjB,SAAS;IACTK,SAAS;IACTI,cAAc;IACdC,kBAAkB,EAAEV,SAAS,GAAGU,kBAAkB,GAAG,MAAMG,SAAS;IACpEG,aAAa,EAAEhB,SAAS,GAAGgB,aAAa,GAAG,MAAMH,SAAS;IAC1DF,oBAAoB;IACpBC,uBAAuB;IACvB,GAAGE;GACN;AACL;;;;"}

package/dist/esm/packages/taco/src/components/Table3/listeners/useTableEditingListener.js

@@ -1,38 +1,22 @@
 import React__default from 'react';
 import { isElementInsideOrTriggeredFromContainer } from '../../../utils/dom.js';
+import { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown.js';
 import { useLocalization } from '../../Provider/Localization.js';
 import { resetHighlightedColumnIndexes } from '../../../primitives/Table/useTableManager/util/search.js';
 import { useLazyEffect } from '../../../hooks/useLazyEffect.js';
 
 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();
+    if (tableMeta.editing.isEditing && tableMeta.rowActive.rowActiveIndex !== lastRowActiveIndexRef.current) {
+      lastRowActiveIndexRef.current = tableMeta.rowActive.rowActiveIndex;
+      tableMeta.editing.saveChanges(table);
     }
-  }, [tableMeta.rowActive.rowActiveIndex]);
-  useLazyEffect(() => {
-    if (tableMeta.editing.isEditing) {
-      if (tableMeta.rowActive.rowActiveIndex === undefined) {
-        tableMeta.rowActive.setRowActiveIndex(0);
-      }
-    } else {
-      // save
-      saveChanges();
-      // reset detailed mode
-      tableMeta.editing.toggleDetailedMode(false);
-      // reset the last index back to the first focusable element, when editing gets turned off
-      tableMeta.editing.setLastFocusedCellIndex(undefined);
-    }
-  }, [tableMeta.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(() => {
@@ -48,25 +32,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);
+  });
 }
 
 export { useTableEditingListener };