@economic/taco 2.44.5-create.6 → 2.44.5-create.7

package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/SaveStatus.js

@@ -5,6 +5,7 @@ import { Tooltip } from '../../../../Tooltip/Tooltip.js';
 import { useLocalization } from '../../../../Provider/Localization.js';
 import { Spinner } from '../../../../Spinner/Spinner.js';
 
+const COMPLETE_INDICATOR_DELAY = 3000;
 function SaveStatus(props) {
   const {
     rowId,
@@ -14,7 +15,18 @@ function SaveStatus(props) {
     texts
   } = useLocalization();
   const tableMeta = table.options.meta;
-  const status = tableMeta.editing.getRowStatus(rowId);
+  const status = tableMeta.editing.getRowSaveStatus(rowId);
+  React__default.useEffect(() => {
+    let timeout;
+    if (status === 'complete') {
+      timeout = setTimeout(() => {
+        tableMeta.editing.setRowSaveStatus(rowId, undefined);
+      }, COMPLETE_INDICATOR_DELAY);
+    }
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [status]);
   const className = cn('col-span-full sticky ml-auto right-0 top-0 -mb-[100%] z-10 h-8 bg-[inherit] flex items-center px-1.5 shadow-[-6px_0px_6px_var(--table-row-actions-shadow)]', {
     'mt-0.5': tableMeta.rowHeight.height === 'short',
     'mt-1': tableMeta.rowHeight.height === 'medium',
@@ -25,7 +37,7 @@ function SaveStatus(props) {
     className: "!contents"
   }, /*#__PURE__*/React__default.createElement("span", {
     className: className
-  }, status === 'saving' ? (/*#__PURE__*/React__default.createElement(Tooltip, {
+  }, status === 'pending' ? (/*#__PURE__*/React__default.createElement(Tooltip, {
     title: texts.table3.editing.saving.progress
   }, /*#__PURE__*/React__default.createElement(Spinner, {
     delay: 0,

package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/SaveStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"SaveStatus.js","sources":["../../../../../../../../../../src/components/Table3/components/Row/Editing/SaveStatus.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { BadgeIcon } from '../../../../BadgeIcon/BadgeIcon';\nimport { Spinner } from '../../../../Spinner/Spinner';\n\ntype SaveStatusProps<TType = unknown> = {\n    rowId: string;\n    table: ReactTable<TType>;\n};\n\nexport function SaveStatus<TType = unknown>(props: SaveStatusProps<TType>) {\n    const { rowId, table } = props;\n    const { texts } = useLocalization();\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const status = tableMeta.editing.getRowStatus(rowId);\n\n    const className = clsx(\n        'col-span-full sticky ml-auto right-0 top-0 -mb-[100%] z-10 h-8 bg-[inherit] flex items-center px-1.5 shadow-[-6px_0px_6px_var(--table-row-actions-shadow)]',\n        {\n            'mt-0.5': tableMeta.rowHeight.height === 'short',\n            'mt-1': tableMeta.rowHeight.height === 'medium',\n            'mt-1.5': tableMeta.rowHeight.height === 'tall',\n            'mt-2': tableMeta.rowHeight.height === 'extra-tall',\n        }\n    );\n\n    return (\n        <td className=\"!contents\">\n            <span className={className}>\n                {status === 'saving' ? (\n                    <Tooltip title={texts.table3.editing.saving.progress}>\n                        <Spinner delay={0} className=\"mr-1 !h-5 !w-5\" />\n                    </Tooltip>\n                ) : (\n                    <Tooltip title={texts.table3.editing.saving.complete}>\n                        <BadgeIcon icon=\"tick\" color=\"green\" subtle className=\"mr-1\" />\n                    </Tooltip>\n                )}\n            </span>\n        </td>\n    );\n}\n"],"names":["SaveStatus","props","rowId","table","texts","useLocalization","tableMeta","options","meta","status","editing","getRowStatus","className","clsx","rowHeight","height","React","Tooltip","title","table3","saving","progress","Spinner","delay","complete","BadgeIcon","icon","color","subtle"],"mappings":";;;;;;;SAagBA,UAAUA,CAAkBC,KAA6B;EACrE,MAAM;IAAEC,KAAK;IAAEC;GAAO,GAAGF,KAAK;EAC9B,MAAM;IAAEG;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,SAAS,GAAGH,KAAK,CAACI,OAAO,CAACC,IAA6B;EAC7D,MAAMC,MAAM,GAAGH,SAAS,CAACI,OAAO,CAACC,YAAY,CAACT,KAAK,CAAC;EAEpD,MAAMU,SAAS,GAAGC,EAAI,CAClB,4JAA4J,EAC5J;IACI,QAAQ,EAAEP,SAAS,CAACQ,SAAS,CAACC,MAAM,KAAK,OAAO;IAChD,MAAM,EAAET,SAAS,CAACQ,SAAS,CAACC,MAAM,KAAK,QAAQ;IAC/C,QAAQ,EAAET,SAAS,CAACQ,SAAS,CAACC,MAAM,KAAK,MAAM;IAC/C,MAAM,EAAET,SAAS,CAACQ,SAAS,CAACC,MAAM,KAAK;GAC1C,CACJ;EAED,oBACIC;IAAIJ,SAAS,EAAC;kBACVI;IAAMJ,SAAS,EAAEA;KACZH,MAAM,KAAK,QAAQ,iBAChBO,6BAACC,OAAO;IAACC,KAAK,EAAEd,KAAK,CAACe,MAAM,CAACT,OAAO,CAACU,MAAM,CAACC;kBACxCL,6BAACM,OAAO;IAACC,KAAK,EAAE,CAAC;IAAEX,SAAS,EAAC;IAAmB,CAC1C,kBAEVI,6BAACC,OAAO;IAACC,KAAK,EAAEd,KAAK,CAACe,MAAM,CAACT,OAAO,CAACU,MAAM,CAACI;kBACxCR,6BAACS,SAAS;IAACC,IAAI,EAAC,MAAM;IAACC,KAAK,EAAC,OAAO;IAACC,MAAM;IAAChB,SAAS,EAAC;IAAS,CACzD,CACb,CACE,CACN;AAEb;;;;"}
+{"version":3,"file":"SaveStatus.js","sources":["../../../../../../../../../../src/components/Table3/components/Row/Editing/SaveStatus.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { BadgeIcon } from '../../../../BadgeIcon/BadgeIcon';\nimport { Spinner } from '../../../../Spinner/Spinner';\n\nconst COMPLETE_INDICATOR_DELAY = 3000;\n\ntype SaveStatusProps<TType = unknown> = {\n    rowId: string;\n    table: ReactTable<TType>;\n};\n\nexport function SaveStatus<TType = unknown>(props: SaveStatusProps<TType>) {\n    const { rowId, table } = props;\n    const { texts } = useLocalization();\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const status = tableMeta.editing.getRowSaveStatus(rowId);\n\n    React.useEffect(() => {\n        let timeout;\n\n        if (status === 'complete') {\n            timeout = setTimeout(() => {\n                tableMeta.editing.setRowSaveStatus(rowId, undefined);\n            }, COMPLETE_INDICATOR_DELAY);\n        }\n\n        return () => {\n            clearTimeout(timeout);\n        };\n    }, [status]);\n\n    const className = clsx(\n        'col-span-full sticky ml-auto right-0 top-0 -mb-[100%] z-10 h-8 bg-[inherit] flex items-center px-1.5 shadow-[-6px_0px_6px_var(--table-row-actions-shadow)]',\n        {\n            'mt-0.5': tableMeta.rowHeight.height === 'short',\n            'mt-1': tableMeta.rowHeight.height === 'medium',\n            'mt-1.5': tableMeta.rowHeight.height === 'tall',\n            'mt-2': tableMeta.rowHeight.height === 'extra-tall',\n        }\n    );\n\n    return (\n        <td className=\"!contents\">\n            <span className={className}>\n                {status === 'pending' ? (\n                    <Tooltip title={texts.table3.editing.saving.progress}>\n                        <Spinner delay={0} className=\"mr-1 !h-5 !w-5\" />\n                    </Tooltip>\n                ) : (\n                    <Tooltip title={texts.table3.editing.saving.complete}>\n                        <BadgeIcon icon=\"tick\" color=\"green\" subtle className=\"mr-1\" />\n                    </Tooltip>\n                )}\n            </span>\n        </td>\n    );\n}\n"],"names":["COMPLETE_INDICATOR_DELAY","SaveStatus","props","rowId","table","texts","useLocalization","tableMeta","options","meta","status","editing","getRowSaveStatus","React","useEffect","timeout","setTimeout","setRowSaveStatus","undefined","clearTimeout","className","clsx","rowHeight","height","Tooltip","title","table3","saving","progress","Spinner","delay","complete","BadgeIcon","icon","color","subtle"],"mappings":";;;;;;;AAQA,MAAMA,wBAAwB,GAAG,IAAI;SAOrBC,UAAUA,CAAkBC,KAA6B;EACrE,MAAM;IAAEC,KAAK;IAAEC;GAAO,GAAGF,KAAK;EAC9B,MAAM;IAAEG;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,SAAS,GAAGH,KAAK,CAACI,OAAO,CAACC,IAA6B;EAC7D,MAAMC,MAAM,GAAGH,SAAS,CAACI,OAAO,CAACC,gBAAgB,CAACT,KAAK,CAAC;EAExDU,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIC,OAAO;IAEX,IAAIL,MAAM,KAAK,UAAU,EAAE;MACvBK,OAAO,GAAGC,UAAU,CAAC;QACjBT,SAAS,CAACI,OAAO,CAACM,gBAAgB,CAACd,KAAK,EAAEe,SAAS,CAAC;OACvD,EAAElB,wBAAwB,CAAC;;IAGhC,OAAO;MACHmB,YAAY,CAACJ,OAAO,CAAC;KACxB;GACJ,EAAE,CAACL,MAAM,CAAC,CAAC;EAEZ,MAAMU,SAAS,GAAGC,EAAI,CAClB,4JAA4J,EAC5J;IACI,QAAQ,EAAEd,SAAS,CAACe,SAAS,CAACC,MAAM,KAAK,OAAO;IAChD,MAAM,EAAEhB,SAAS,CAACe,SAAS,CAACC,MAAM,KAAK,QAAQ;IAC/C,QAAQ,EAAEhB,SAAS,CAACe,SAAS,CAACC,MAAM,KAAK,MAAM;IAC/C,MAAM,EAAEhB,SAAS,CAACe,SAAS,CAACC,MAAM,KAAK;GAC1C,CACJ;EAED,oBACIV;IAAIO,SAAS,EAAC;kBACVP;IAAMO,SAAS,EAAEA;KACZV,MAAM,KAAK,SAAS,iBACjBG,6BAACW,OAAO;IAACC,KAAK,EAAEpB,KAAK,CAACqB,MAAM,CAACf,OAAO,CAACgB,MAAM,CAACC;kBACxCf,6BAACgB,OAAO;IAACC,KAAK,EAAE,CAAC;IAAEV,SAAS,EAAC;IAAmB,CAC1C,kBAEVP,6BAACW,OAAO;IAACC,KAAK,EAAEpB,KAAK,CAACqB,MAAM,CAACf,OAAO,CAACgB,MAAM,CAACI;kBACxClB,6BAACmB,SAAS;IAACC,IAAI,EAAC,MAAM;IAACC,KAAK,EAAC,OAAO;IAACC,MAAM;IAACf,SAAS,EAAC;IAAS,CACzD,CACb,CACE,CACN;AAEb;;;;"}

package/dist/esm/packages/taco/src/components/Table3/components/Row/Row.js

@@ -1,9 +1,7 @@
 import React__default from 'react';
-import { setDataFocusAttribute, isElementTriggeredFromContainer } from '../../../../utils/dom.js';
+import { setDataFocusAttribute } from '../../../../utils/dom.js';
 import { DisplayRow } from '../../../../primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js';
 import { useAugmentedFocusManager } from '../../../../primitives/Table/Core/components/Body/util.js';
-import { isTemporaryRow } from '../../util/editing.js';
-import { DiscardChangesConfirmationDialog } from '../Editing/DiscardChangesConfirmationDialog.js';
 import { SaveStatus } from './Editing/SaveStatus.js';
 
 function Row(props) {
@@ -29,46 +27,15 @@ function Row(props) {
       }
     }
   }, [tableMeta.editing.isEditing, isActiveRow]);
-  const rowStatus = tableMeta.editing.getRowStatus(row.id);
-  // discard new row
-  const [showDiscardDialog, setShowDiscardDialog] = React__default.useState(false);
-  function handleDiscard() {
-    tableMeta.editing.discardChanges(row.id, table);
-    requestAnimationFrame(() => {
-      if (isTemporaryRow(row.id)) {
-        var _tableMeta$editing$cr;
-        (_tableMeta$editing$cr = tableMeta.editing.createRowButtonRef.current) === null || _tableMeta$editing$cr === void 0 ? void 0 : _tableMeta$editing$cr.focus();
-      } else {
-        focusManager.focusFirst();
-      }
-    });
-  }
-  function handleKeyDown(event) {
-    if (props.onKeyDown) {
-      props.onKeyDown(event);
-    }
-    if (event.isDefaultPrevented() || event.isPropagationStopped()) {
-      return;
-    }
-    if (event.key === 'Escape' && tableMeta.editing.hasChanges(row.id) && !isElementTriggeredFromContainer(event.target, event.currentTarget)) {
-      event.preventDefault();
-      setShowDiscardDialog(true);
-    }
-  }
   const attributes = {
-    'data-row-editing-invalid': tableMeta.editing.hasRowErrors(row.id) ? !tableMeta.editing.hasRowErrorsShownInAlert(row.id) ? 'unseen' : true : undefined,
-    'data-row-editing-status': rowStatus,
-    onFocus: handleFocus,
-    onKeyDown: handleKeyDown
+    'data-row-editing-invalid': tableMeta.editing.isEnabled && tableMeta.editing.hasRowErrors(row.id) ? !tableMeta.editing.hasRowErrorsSeen(row.id) ? 'unseen' : true : undefined,
+    'data-row-editing-status': tableMeta.editing.isEnabled && tableMeta.editing.getRowSaveStatus(row.id) ? tableMeta.editing.getRowSaveStatus(row.id) : undefined,
+    onFocus: handleFocus
   };
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DisplayRow, Object.assign({}, props, attributes), rowStatus === 'saving' || rowStatus === 'saved' ? /*#__PURE__*/React__default.createElement(SaveStatus, {
+  return /*#__PURE__*/React__default.createElement(DisplayRow, Object.assign({}, props, attributes), tableMeta.editing.getRowSaveStatus(row.id) ? /*#__PURE__*/React__default.createElement(SaveStatus, {
     rowId: row.id,
     table: table
-  }) : null), /*#__PURE__*/React__default.createElement(DiscardChangesConfirmationDialog, {
-    open: showDiscardDialog,
-    onChange: setShowDiscardDialog,
-    onDiscard: handleDiscard
-  }));
+  }) : null);
 }
 
 export { Row };

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

@@ -1 +1 @@
-{"version":3,"file":"Row.js","sources":["../../../../../../../../../src/components/Table3/components/Row/Row.tsx"],"sourcesContent":["import React from 'react';\nimport { TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { DisplayRow, DisplayRowProps } from '../../../../primitives/Table/Core/components/Row/BuiltIns/DisplayRow';\nimport { SaveStatus } from './Editing/SaveStatus';\nimport { useAugmentedFocusManager } from '../../../../primitives/Table/Core/components/Body/util';\nimport { isElementTriggeredFromContainer, setDataFocusAttribute } from '../../../../utils/dom';\nimport { DiscardChangesConfirmationDialog } from '../Editing/DiscardChangesConfirmationDialog';\nimport { isTemporaryRow } from '../../util/editing';\n\nexport function Row<TType = unknown>(props: DisplayRowProps<TType>) {\n    const { row, index, table } = props;\n    const focusManager = useAugmentedFocusManager();\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const isActiveRow = tableMeta.rowActive.rowActiveIndex === index;\n\n    React.useEffect(() => {\n        if (tableMeta.editing.isEditing && isActiveRow && tableMeta.editing.lastFocusedCellIndex === undefined) {\n            setDataFocusAttribute(focusManager.focusFirst());\n        }\n    }, [tableMeta.editing.isEditing, tableMeta.rowActive.rowActiveIndex, tableMeta.editing.lastFocusedCellIndex]);\n\n    const handleFocus = React.useCallback(\n        (event: React.FocusEvent<HTMLTableRowElement>) => {\n            if (tableMeta.editing.isEditing) {\n                const cellIndex = Number(event.target.closest('td')?.getAttribute('data-cell-index') ?? undefined);\n\n                if (!isNaN(cellIndex)) {\n                    tableMeta.editing.setLastFocusedCellIndex(Number(cellIndex));\n                }\n            }\n        },\n        [tableMeta.editing.isEditing, isActiveRow]\n    );\n\n    const rowStatus = tableMeta.editing.getRowStatus(row.id);\n\n    // discard new row\n    const [showDiscardDialog, setShowDiscardDialog] = React.useState(false);\n\n    function handleDiscard() {\n        tableMeta.editing.discardChanges(row.id, table);\n        requestAnimationFrame(() => {\n            if (isTemporaryRow(row.id)) {\n                tableMeta.editing.createRowButtonRef.current?.focus();\n            } else {\n                focusManager.focusFirst();\n            }\n        });\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLTableRowElement>) {\n        if (props.onKeyDown) {\n            props.onKeyDown(event);\n        }\n\n        if (event.isDefaultPrevented() || event.isPropagationStopped()) {\n            return;\n        }\n\n        if (\n            event.key === 'Escape' &&\n            tableMeta.editing.hasChanges(row.id) &&\n            !isElementTriggeredFromContainer(event.target as HTMLElement, event.currentTarget)\n        ) {\n            event.preventDefault();\n            setShowDiscardDialog(true);\n        }\n    }\n\n    const attributes = {\n        'data-row-editing-invalid': tableMeta.editing.hasRowErrors(row.id)\n            ? !tableMeta.editing.hasRowErrorsShownInAlert(row.id)\n                ? 'unseen'\n                : true\n            : undefined,\n        'data-row-editing-status': rowStatus,\n        onFocus: handleFocus,\n        onKeyDown: handleKeyDown,\n    };\n\n    return (\n        <>\n            <DisplayRow<TType> {...props} {...attributes}>\n                {rowStatus === 'saving' || rowStatus === 'saved' ? <SaveStatus rowId={row.id} table={table} /> : null}\n            </DisplayRow>\n            <DiscardChangesConfirmationDialog\n                open={showDiscardDialog}\n                onChange={setShowDiscardDialog}\n                onDiscard={handleDiscard}\n            />\n        </>\n    );\n}\n"],"names":["Row","props","row","index","table","focusManager","useAugmentedFocusManager","tableMeta","options","meta","isActiveRow","rowActive","rowActiveIndex","React","useEffect","editing","isEditing","lastFocusedCellIndex","undefined","setDataFocusAttribute","focusFirst","handleFocus","useCallback","event","_event$target$closest","_event$target$closest2","cellIndex","Number","target","closest","getAttribute","isNaN","setLastFocusedCellIndex","rowStatus","getRowStatus","id","showDiscardDialog","setShowDiscardDialog","useState","handleDiscard","discardChanges","requestAnimationFrame","isTemporaryRow","_tableMeta$editing$cr","createRowButtonRef","current","focus","handleKeyDown","onKeyDown","isDefaultPrevented","isPropagationStopped","key","hasChanges","isElementTriggeredFromContainer","currentTarget","preventDefault","attributes","hasRowErrors","hasRowErrorsShownInAlert","onFocus","DisplayRow","SaveStatus","rowId","DiscardChangesConfirmationDialog","open","onChange","onDiscard"],"mappings":"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"}
+{"version":3,"file":"Row.js","sources":["../../../../../../../../../src/components/Table3/components/Row/Row.tsx"],"sourcesContent":["import React from 'react';\nimport { TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { DisplayRow, DisplayRowProps } from '../../../../primitives/Table/Core/components/Row/BuiltIns/DisplayRow';\nimport { SaveStatus } from './Editing/SaveStatus';\nimport { useAugmentedFocusManager } from '../../../../primitives/Table/Core/components/Body/util';\nimport { setDataFocusAttribute } from '../../../../utils/dom';\n\nexport function Row<TType = unknown>(props: DisplayRowProps<TType>) {\n    const { row, index, table } = props;\n    const focusManager = useAugmentedFocusManager();\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const isActiveRow = tableMeta.rowActive.rowActiveIndex === index;\n\n    React.useEffect(() => {\n        if (tableMeta.editing.isEditing && isActiveRow && tableMeta.editing.lastFocusedCellIndex === undefined) {\n            setDataFocusAttribute(focusManager.focusFirst());\n        }\n    }, [tableMeta.editing.isEditing, tableMeta.rowActive.rowActiveIndex, tableMeta.editing.lastFocusedCellIndex]);\n\n    const handleFocus = React.useCallback(\n        (event: React.FocusEvent<HTMLTableRowElement>) => {\n            if (tableMeta.editing.isEditing) {\n                const cellIndex = Number(event.target.closest('td')?.getAttribute('data-cell-index') ?? undefined);\n\n                if (!isNaN(cellIndex)) {\n                    tableMeta.editing.setLastFocusedCellIndex(Number(cellIndex));\n                }\n            }\n        },\n        [tableMeta.editing.isEditing, isActiveRow]\n    );\n\n    const attributes = {\n        'data-row-editing-invalid':\n            tableMeta.editing.isEnabled && tableMeta.editing.hasRowErrors(row.id)\n                ? !tableMeta.editing.hasRowErrorsSeen(row.id)\n                    ? 'unseen'\n                    : true\n                : undefined,\n        'data-row-editing-status':\n            tableMeta.editing.isEnabled && tableMeta.editing.getRowSaveStatus(row.id)\n                ? tableMeta.editing.getRowSaveStatus(row.id)\n                : undefined,\n        onFocus: handleFocus,\n    };\n\n    return (\n        <DisplayRow<TType> {...props} {...attributes}>\n            {tableMeta.editing.getRowSaveStatus(row.id) ? <SaveStatus rowId={row.id} table={table} /> : null}\n        </DisplayRow>\n    );\n}\n"],"names":["Row","props","row","index","table","focusManager","useAugmentedFocusManager","tableMeta","options","meta","isActiveRow","rowActive","rowActiveIndex","React","useEffect","editing","isEditing","lastFocusedCellIndex","undefined","setDataFocusAttribute","focusFirst","handleFocus","useCallback","event","_event$target$closest","_event$target$closest2","cellIndex","Number","target","closest","getAttribute","isNaN","setLastFocusedCellIndex","attributes","isEnabled","hasRowErrors","id","hasRowErrorsSeen","getRowSaveStatus","onFocus","DisplayRow","SaveStatus","rowId"],"mappings":";;;;;;SAOgBA,GAAGA,CAAkBC,KAA6B;EAC9D,MAAM;IAAEC,GAAG;IAAEC,KAAK;IAAEC;GAAO,GAAGH,KAAK;EACnC,MAAMI,YAAY,GAAGC,wBAAwB,EAAE;EAC/C,MAAMC,SAAS,GAAGH,KAAK,CAACI,OAAO,CAACC,IAA6B;EAC7D,MAAMC,WAAW,GAAGH,SAAS,CAACI,SAAS,CAACC,cAAc,KAAKT,KAAK;EAEhEU,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIP,SAAS,CAACQ,OAAO,CAACC,SAAS,IAAIN,WAAW,IAAIH,SAAS,CAACQ,OAAO,CAACE,oBAAoB,KAAKC,SAAS,EAAE;MACpGC,qBAAqB,CAACd,YAAY,CAACe,UAAU,EAAE,CAAC;;GAEvD,EAAE,CAACb,SAAS,CAACQ,OAAO,CAACC,SAAS,EAAET,SAAS,CAACI,SAAS,CAACC,cAAc,EAAEL,SAAS,CAACQ,OAAO,CAACE,oBAAoB,CAAC,CAAC;EAE7G,MAAMI,WAAW,GAAGR,cAAK,CAACS,WAAW,CAChCC,KAA4C;IACzC,IAAIhB,SAAS,CAACQ,OAAO,CAACC,SAAS,EAAE;MAAA,IAAAQ,qBAAA,EAAAC,sBAAA;MAC7B,MAAMC,SAAS,GAAGC,MAAM,EAAAH,qBAAA,IAAAC,sBAAA,GAACF,KAAK,CAACK,MAAM,CAACC,OAAO,CAAC,IAAI,CAAC,cAAAJ,sBAAA,uBAA1BA,sBAAA,CAA4BK,YAAY,CAAC,iBAAiB,CAAC,cAAAN,qBAAA,cAAAA,qBAAA,GAAIN,SAAS,CAAC;MAElG,IAAI,CAACa,KAAK,CAACL,SAAS,CAAC,EAAE;QACnBnB,SAAS,CAACQ,OAAO,CAACiB,uBAAuB,CAACL,MAAM,CAACD,SAAS,CAAC,CAAC;;;GAGvE,EACD,CAACnB,SAAS,CAACQ,OAAO,CAACC,SAAS,EAAEN,WAAW,CAAC,CAC7C;EAED,MAAMuB,UAAU,GAAG;IACf,0BAA0B,EACtB1B,SAAS,CAACQ,OAAO,CAACmB,SAAS,IAAI3B,SAAS,CAACQ,OAAO,CAACoB,YAAY,CAACjC,GAAG,CAACkC,EAAE,CAAC,GAC/D,CAAC7B,SAAS,CAACQ,OAAO,CAACsB,gBAAgB,CAACnC,GAAG,CAACkC,EAAE,CAAC,GACvC,QAAQ,GACR,IAAI,GACRlB,SAAS;IACnB,yBAAyB,EACrBX,SAAS,CAACQ,OAAO,CAACmB,SAAS,IAAI3B,SAAS,CAACQ,OAAO,CAACuB,gBAAgB,CAACpC,GAAG,CAACkC,EAAE,CAAC,GACnE7B,SAAS,CAACQ,OAAO,CAACuB,gBAAgB,CAACpC,GAAG,CAACkC,EAAE,CAAC,GAC1ClB,SAAS;IACnBqB,OAAO,EAAElB;GACZ;EAED,oBACIR,6BAAC2B,UAAU,oBAAYvC,KAAK,EAAMgC,UAAU,GACvC1B,SAAS,CAACQ,OAAO,CAACuB,gBAAgB,CAACpC,GAAG,CAACkC,EAAE,CAAC,gBAAGvB,6BAAC4B,UAAU;IAACC,KAAK,EAAExC,GAAG,CAACkC,EAAE;IAAEhC,KAAK,EAAEA;IAAS,GAAG,IAAI,CACvF;AAErB;;;;"}

package/dist/esm/packages/taco/src/components/Table3/components/Toolbar/Editing/Editing.js

@@ -30,20 +30,15 @@ function Editing(props) {
     (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.click();
   });
   const handleChange = enabled => {
-    if (enabled && tableMeta.rowActive.rowActiveIndex === undefined) {
-      tableMeta.rowActive.setRowActiveIndex(0);
-    }
+    tableMeta.editing.toggleEditing(enabled);
     requestAnimationFrame(() => {
       var _tableMeta$rowActive$;
-      // wait for an active row to be set so that we don't trigger save
-      tableMeta.editing.toggleEditing(enabled, table);
-      scrollToIndex((_tableMeta$rowActive$ = tableMeta.rowActive.rowActiveIndex) !== null && _tableMeta$rowActive$ !== void 0 ? _tableMeta$rowActive$ : 0);
+      return scrollToIndex((_tableMeta$rowActive$ = tableMeta.rowActive.rowActiveIndex) !== null && _tableMeta$rowActive$ !== void 0 ? _tableMeta$rowActive$ : 0);
     });
   };
   return /*#__PURE__*/React__default.createElement(Tooltip, {
     title: tooltip
   }, /*#__PURE__*/React__default.createElement(ModeSwitch, {
-    "data-table": "editing-toggle",
     checked: tableMeta.editing.isEditing,
     onChange: handleChange,
     ref: ref

package/dist/esm/packages/taco/src/components/Table3/components/Toolbar/Editing/Editing.js.map

@@ -1 +1 @@
-{"version":3,"file":"Editing.js","sources":["../../../../../../../../../../src/components/Table3/components/Toolbar/Editing/Editing.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { ModeSwitch } from '../../../../ModeSwitch/ModeSwitch';\nimport { useGlobalKeyDown } from '../../../../../hooks/useGlobalKeyDown';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\n\ntype EditingProps<TType = unknown> = React.HTMLAttributes<HTMLButtonElement> & {\n    scrollToIndex: any;\n    table: ReactTable<TType>;\n};\n\nexport function Editing<TType = unknown>(props: EditingProps<TType>) {\n    const { scrollToIndex, table } = props;\n    const { texts } = useLocalization();\n    const ref = React.useRef<HTMLButtonElement>(null);\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n    const shortcut = { key: 'e', meta: true, shift: false };\n    const tooltip = (\n        <>\n            {texts.table3.editing.buttons.edit.tooltip}\n            <Shortcut className=\"ml-2\" keys={shortcut} />\n        </>\n    );\n\n    useGlobalKeyDown(shortcut, (event: KeyboardEvent) => {\n        event.preventDefault();\n        ref.current?.click();\n    });\n\n    const handleChange = (enabled: boolean) => {\n        if (enabled && tableMeta.rowActive.rowActiveIndex === undefined) {\n            tableMeta.rowActive.setRowActiveIndex(0);\n        }\n\n        requestAnimationFrame(() => {\n            // wait for an active row to be set so that we don't trigger save\n            tableMeta.editing.toggleEditing(enabled, table);\n            scrollToIndex(tableMeta.rowActive.rowActiveIndex ?? 0);\n        });\n    };\n\n    return (\n        <Tooltip title={tooltip}>\n            <ModeSwitch data-table=\"editing-toggle\" checked={tableMeta.editing.isEditing} onChange={handleChange} ref={ref} />\n        </Tooltip>\n    );\n}\n"],"names":["Editing","props","scrollToIndex","table","texts","useLocalization","ref","React","useRef","tableMeta","options","meta","shortcut","key","shift","tooltip","table3","editing","buttons","edit","Shortcut","className","keys","useGlobalKeyDown","event","preventDefault","_ref$current","current","click","handleChange","enabled","rowActive","rowActiveIndex","undefined","setRowActiveIndex","requestAnimationFrame","toggleEditing","_tableMeta$rowActive$","Tooltip","title","ModeSwitch","checked","isEditing","onChange"],"mappings":";;;;;;;SAagBA,OAAOA,CAAkBC,KAA0B;EAC/D,MAAM;IAAEC,aAAa;IAAEC;GAAO,GAAGF,KAAK;EACtC,MAAM;IAAEG;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,GAAG,GAAGC,cAAK,CAACC,MAAM,CAAoB,IAAI,CAAC;EACjD,MAAMC,SAAS,GAAGN,KAAK,CAACO,OAAO,CAACC,IAA6B;EAE7D,MAAMC,QAAQ,GAAG;IAAEC,GAAG,EAAE,GAAG;IAAEF,IAAI,EAAE,IAAI;IAAEG,KAAK,EAAE;GAAO;EACvD,MAAMC,OAAO,gBACTR,4DACKH,KAAK,CAACY,MAAM,CAACC,OAAO,CAACC,OAAO,CAACC,IAAI,CAACJ,OAAO,eAC1CR,6BAACa,QAAQ;IAACC,SAAS,EAAC,MAAM;IAACC,IAAI,EAAEV;IAAY,CAEpD;EAEDW,gBAAgB,CAACX,QAAQ,EAAGY,KAAoB;;IAC5CA,KAAK,CAACC,cAAc,EAAE;IACtB,CAAAC,YAAA,GAAApB,GAAG,CAACqB,OAAO,cAAAD,YAAA,uBAAXA,YAAA,CAAaE,KAAK,EAAE;GACvB,CAAC;EAEF,MAAMC,YAAY,GAAIC,OAAgB;IAClC,IAAIA,OAAO,IAAIrB,SAAS,CAACsB,SAAS,CAACC,cAAc,KAAKC,SAAS,EAAE;MAC7DxB,SAAS,CAACsB,SAAS,CAACG,iBAAiB,CAAC,CAAC,CAAC;;IAG5CC,qBAAqB,CAAC;;;MAElB1B,SAAS,CAACQ,OAAO,CAACmB,aAAa,CAACN,OAAO,EAAE3B,KAAK,CAAC;MAC/CD,aAAa,EAAAmC,qBAAA,GAAC5B,SAAS,CAACsB,SAAS,CAACC,cAAc,cAAAK,qBAAA,cAAAA,qBAAA,GAAI,CAAC,CAAC;KACzD,CAAC;GACL;EAED,oBACI9B,6BAAC+B,OAAO;IAACC,KAAK,EAAExB;kBACZR,6BAACiC,UAAU;kBAAY,gBAAgB;IAACC,OAAO,EAAEhC,SAAS,CAACQ,OAAO,CAACyB,SAAS;IAAEC,QAAQ,EAAEd,YAAY;IAAEvB,GAAG,EAAEA;IAAO,CAC5G;AAElB;;;;"}
+{"version":3,"file":"Editing.js","sources":["../../../../../../../../../../src/components/Table3/components/Toolbar/Editing/Editing.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { ModeSwitch } from '../../../../ModeSwitch/ModeSwitch';\nimport { useGlobalKeyDown } from '../../../../../hooks/useGlobalKeyDown';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\n\ntype EditingProps<TType = unknown> = React.HTMLAttributes<HTMLButtonElement> & {\n    scrollToIndex: any;\n    table: ReactTable<TType>;\n};\n\nexport function Editing<TType = unknown>(props: EditingProps<TType>) {\n    const { scrollToIndex, table } = props;\n    const { texts } = useLocalization();\n    const ref = React.useRef<HTMLButtonElement>(null);\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n    const shortcut = { key: 'e', meta: true, shift: false };\n    const tooltip = (\n        <>\n            {texts.table3.editing.buttons.edit.tooltip}\n            <Shortcut className=\"ml-2\" keys={shortcut} />\n        </>\n    );\n\n    useGlobalKeyDown(shortcut, (event: KeyboardEvent) => {\n        event.preventDefault();\n        ref.current?.click();\n    });\n\n    const handleChange = (enabled: boolean) => {\n        tableMeta.editing.toggleEditing(enabled);\n        requestAnimationFrame(() => scrollToIndex(tableMeta.rowActive.rowActiveIndex ?? 0));\n    };\n\n    return (\n        <Tooltip title={tooltip}>\n            <ModeSwitch checked={tableMeta.editing.isEditing} onChange={handleChange} ref={ref} />\n        </Tooltip>\n    );\n}\n"],"names":["Editing","props","scrollToIndex","table","texts","useLocalization","ref","React","useRef","tableMeta","options","meta","shortcut","key","shift","tooltip","table3","editing","buttons","edit","Shortcut","className","keys","useGlobalKeyDown","event","preventDefault","_ref$current","current","click","handleChange","enabled","toggleEditing","requestAnimationFrame","_tableMeta$rowActive$","rowActive","rowActiveIndex","Tooltip","title","ModeSwitch","checked","isEditing","onChange"],"mappings":";;;;;;;SAagBA,OAAOA,CAAkBC,KAA0B;EAC/D,MAAM;IAAEC,aAAa;IAAEC;GAAO,GAAGF,KAAK;EACtC,MAAM;IAAEG;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,GAAG,GAAGC,cAAK,CAACC,MAAM,CAAoB,IAAI,CAAC;EACjD,MAAMC,SAAS,GAAGN,KAAK,CAACO,OAAO,CAACC,IAA6B;EAE7D,MAAMC,QAAQ,GAAG;IAAEC,GAAG,EAAE,GAAG;IAAEF,IAAI,EAAE,IAAI;IAAEG,KAAK,EAAE;GAAO;EACvD,MAAMC,OAAO,gBACTR,4DACKH,KAAK,CAACY,MAAM,CAACC,OAAO,CAACC,OAAO,CAACC,IAAI,CAACJ,OAAO,eAC1CR,6BAACa,QAAQ;IAACC,SAAS,EAAC,MAAM;IAACC,IAAI,EAAEV;IAAY,CAEpD;EAEDW,gBAAgB,CAACX,QAAQ,EAAGY,KAAoB;;IAC5CA,KAAK,CAACC,cAAc,EAAE;IACtB,CAAAC,YAAA,GAAApB,GAAG,CAACqB,OAAO,cAAAD,YAAA,uBAAXA,YAAA,CAAaE,KAAK,EAAE;GACvB,CAAC;EAEF,MAAMC,YAAY,GAAIC,OAAgB;IAClCrB,SAAS,CAACQ,OAAO,CAACc,aAAa,CAACD,OAAO,CAAC;IACxCE,qBAAqB,CAAC;MAAA,IAAAC,qBAAA;MAAA,OAAM/B,aAAa,EAAA+B,qBAAA,GAACxB,SAAS,CAACyB,SAAS,CAACC,cAAc,cAAAF,qBAAA,cAAAA,qBAAA,GAAI,CAAC,CAAC;MAAC;GACtF;EAED,oBACI1B,6BAAC6B,OAAO;IAACC,KAAK,EAAEtB;kBACZR,6BAAC+B,UAAU;IAACC,OAAO,EAAE9B,SAAS,CAACQ,OAAO,CAACuB,SAAS;IAAEC,QAAQ,EAAEZ,YAAY;IAAEvB,GAAG,EAAEA;IAAO,CAChF;AAElB;;;;"}

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

@@ -1,27 +1,29 @@
 import React__default from 'react';
-import { usePendingChangesState } from './useEditingState.js';
+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';
 
-function useTableEditing(isEnabled = false, handleSave, handleChange, rowIdentityAccessor, validator) {
+function useTableEditing(isEnabled = false, handleSave, handleChange, validator) {
   // used to switch the table into editing mode
-  const [isEditing, setEditing] = React__default.useState(false);
+  const [isEditing, toggleEditing] = React__default.useState(false);
   // used to switch the editing between "detailed" mode
   const [isDetailedMode, toggleDetailedMode] = React__default.useState(false);
-  // used to contain ref to the create button
-  const createRowButtonRef = React__default.useRef(null);
   // 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) {
-    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);
-  }
+  const [lastFocusedCellIndex, setLastFocusedCellIndex] = useLastFocusedCellIndex();
+  // store pending changes for each row
+  // changes are saved as soon as the active row changes, so in most cases this will only contain the active row's changes
+  // but not always - if validation or server requests fail when saving, those rows remain until the failure is resolved
+  const pendingChangesFns = usePendingChanges(isEnabled, handleSave, handleChange, validator);
+  useGlobalKeyDown(isEnabled && isEditing ? {
+    key: 's',
+    meta: true,
+    shift: false
+  } : undefined, event => {
+    event.preventDefault();
+    pendingChangesFns.saveChanges();
+  });
   return {
     isEnabled,
     isEditing,
@@ -30,10 +32,395 @@ function useTableEditing(isEnabled = false, handleSave, handleChange, rowIdentit
     toggleEditing: isEnabled ? toggleEditing : () => undefined,
     lastFocusedCellIndex,
     setLastFocusedCellIndex,
-    createRowButtonRef,
     ...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