@economic/taco 2.45.0-alpha.3 → 2.45.0-alpha.31

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

@@ -6,14 +6,12 @@ import { Button } from '../../../../Button/Button.js';
 import { Shortcut } from '../../../../Shortcut/Shortcut.js';
 
 function CreateNewRow(props) {
-  var _temporaryRows$0$tabl, _temporaryRows$, _table$getState$colum, _tableRef$current2;
+  var _temporaryRows$0$tabl, _temporaryRows$, _table$getState$colum;
   const {
     buttonRef,
-    onEditingCreate: handleEditingCreate,
-    scrollToIndex,
+    isScrolled,
     table,
-    tableMeta,
-    tableRef
+    tableMeta
   } = props;
   const {
     texts
@@ -22,44 +20,16 @@ function CreateNewRow(props) {
   const temporaryRowId = (_temporaryRows$0$tabl = (_temporaryRows$ = temporaryRows[0]) === null || _temporaryRows$ === void 0 ? void 0 : _temporaryRows$[tableMeta.rowIdentityAccessor]) !== null && _temporaryRows$0$tabl !== void 0 ? _temporaryRows$0$tabl : '';
   const isDisabled = !!table.getState().globalFilter || !!((_table$getState$colum = table.getState().columnFilters) !== null && _table$getState$colum !== void 0 && _table$getState$colum.length) || !!temporaryRowId && !!tableMeta.editing.hasRowErrors(temporaryRowId);
   const isSaving = !!temporaryRowId && tableMeta.editing.getRowStatus(temporaryRowId) === 'saving';
-  const createRow = function (row) {
+  const handleCreate = function () {
     try {
-      if (!handleEditingCreate || isDisabled) {
+      if (isDisabled) {
         return Promise.resolve();
       }
-      return Promise.resolve(tableMeta.editing.saveChanges(table)).then(function (saved) {
-        if (!saved) {
-          return;
-        }
-        const changeset = row !== null && row !== void 0 ? row : handleEditingCreate();
-        try {
-          if (changeset) {
-            const rowId = tableMeta.editing.createRow(changeset);
-            table.getRow(rowId).pin('bottom');
-            // set the active row to the new row before toggling editing on
-            const nextRowIndex = temporaryRows.length ? tableMeta.length + 1 : tableMeta.length;
-            tableMeta.rowActive.setRowActiveIndex(nextRowIndex);
-            tableMeta.editing.toggleEditing(true, table, scrollToIndex);
-            tableMeta.editing.setLastFocusedCellIndex(0);
-          }
-        } catch (error) {
-          console.error(error);
-        }
-      });
+      return Promise.resolve(tableMeta.editing.createRow(table)).then(function () {});
     } catch (e) {
       return Promise.reject(e);
     }
   };
-  // allow programmatic access to creating rows from outside the table
-  React__default.useEffect(() => {
-    var _tableRef$current;
-    if (tableRef !== null && tableRef !== void 0 && (_tableRef$current = tableRef.current) !== null && _tableRef$current !== void 0 && _tableRef$current.instance) {
-      tableRef.current.instance.createRow = createRow;
-    }
-  }, [tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : _tableRef$current2.instance, createRow]);
-  const handleCreate = function () {
-    return createRow();
-  };
   const shortcut = {
     key: 'Enter',
     meta: true
@@ -74,11 +44,9 @@ function CreateNewRow(props) {
       keys: shortcut
     });
   }
-  const isScrolled = tableRef.current ? tableRef.current.scrollHeight > tableRef.current.clientHeight : false;
   const className = cn('group/row border-grey-300 !sticky z-[21]', {
     'bottom-10': tableMeta.footer.isEnabled,
     'bottom-0': !tableMeta.footer.isEnabled,
-    'border-t-2': isScrolled,
     'border-b': !isScrolled
   });
   return /*#__PURE__*/React__default.createElement("tr", {

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

@@ -1 +1 @@
-{"version":3,"file":"CreateNewRow.js","sources":["../../../../../../../../../../src/components/Table3/components/Row/Editing/CreateNewRow.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { Button } from '../../../../Button/Button';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Icon } from '../../../../Icon/Icon';\nimport { Table3EditingCreateHandler, Table3Ref } from '../../../types';\nimport { TableRef } from '../../../../../primitives/Table/types';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\nimport clsx from 'clsx';\n\ntype CreateNewRowProps<TType = unknown> = {\n    buttonRef: React.Ref<HTMLButtonElement>;\n    onEditingCreate?: Table3EditingCreateHandler<TType>;\n    scrollToIndex: (index: number) => void;\n    table: ReactTable<TType>;\n    tableMeta: ReactTableMeta<TType>;\n    tableRef: React.RefObject<TableRef>;\n};\n\nexport function CreateNewRow<TType = unknown>(props: CreateNewRowProps<TType>) {\n    const { buttonRef, onEditingCreate: handleEditingCreate, scrollToIndex, table, tableMeta, tableRef } = props;\n    const { texts } = useLocalization();\n\n    const temporaryRows = tableMeta.editing.temporaryRows as TType[];\n    const temporaryRowId: string = temporaryRows[0]?.[tableMeta.rowIdentityAccessor as string] ?? '';\n\n    const isDisabled =\n        !!table.getState().globalFilter ||\n        !!table.getState().columnFilters?.length ||\n        (!!temporaryRowId && !!tableMeta.editing.hasRowErrors(temporaryRowId));\n    const isSaving = !!temporaryRowId && tableMeta.editing.getRowStatus(temporaryRowId) === 'saving';\n\n    const createRow = async (row?: Partial<TType>) => {\n        if (!handleEditingCreate || isDisabled) {\n            return;\n        }\n\n        const saved = await tableMeta.editing.saveChanges(table);\n\n        if (!saved) {\n            return;\n        }\n\n        const changeset = row ?? handleEditingCreate();\n\n        try {\n            if (changeset) {\n                const rowId = tableMeta.editing.createRow(changeset);\n                table.getRow(rowId).pin('bottom');\n\n                // set the active row to the new row before toggling editing on\n                const nextRowIndex = temporaryRows.length ? tableMeta.length + 1 : tableMeta.length;\n                tableMeta.rowActive.setRowActiveIndex(nextRowIndex);\n\n                tableMeta.editing.toggleEditing(true, table, scrollToIndex);\n                tableMeta.editing.setLastFocusedCellIndex(0);\n            }\n        } catch (error) {\n            console.error(error);\n        }\n    };\n\n    // allow programmatic access to creating rows from outside the table\n    React.useEffect(() => {\n        if (tableRef?.current?.instance) {\n            (tableRef.current as Table3Ref).instance.createRow = createRow as (row: unknown) => Promise<void>;\n        }\n    }, [tableRef?.current?.instance, createRow]);\n\n    const handleCreate = async () => createRow();\n    const shortcut = { key: 'Enter', meta: true };\n\n    let tooltip;\n\n    if (isSaving) {\n        tooltip = texts.table3.editing.buttons.create.saving;\n    } else if (isDisabled) {\n        tooltip = texts.table3.editing.buttons.create.disabled;\n    } else {\n        tooltip = <Shortcut keys={shortcut} />;\n    }\n\n    const isScrolled = tableRef.current ? tableRef.current.scrollHeight > tableRef.current.clientHeight : false;\n\n    const className = clsx('group/row border-grey-300 !sticky z-[21]', {\n        'bottom-10': tableMeta.footer.isEnabled,\n        'bottom-0': !tableMeta.footer.isEnabled,\n        'border-t-2': isScrolled,\n        'border-b': !isScrolled,\n    });\n\n    return (\n        <tr data-row-create className={className} tabIndex={-1}>\n            <td className=\"!bg-grey-50 col-span-full !border-b-0 !px-1\">\n                <Button\n                    appearance=\"transparent\"\n                    className=\"group-hover:bg-grey-200 sticky left-[4px]\"\n                    disabled={isDisabled}\n                    onClick={handleCreate}\n                    ref={buttonRef}\n                    shortcut={shortcut}\n                    tooltip={tooltip}>\n                    <Icon name=\"circle-plus\" />\n                    {texts.table3.editing.buttons.create.label}\n                </Button>\n            </td>\n        </tr>\n    );\n}\n"],"names":["CreateNewRow","props","buttonRef","onEditingCreate","handleEditingCreate","scrollToIndex","table","tableMeta","tableRef","texts","useLocalization","temporaryRows","editing","temporaryRowId","_temporaryRows$0$tabl","_temporaryRows$","rowIdentityAccessor","isDisabled","getState","globalFilter","_table$getState$colum","columnFilters","length","hasRowErrors","isSaving","getRowStatus","createRow","row","Promise","resolve","saveChanges","then","saved","changeset","rowId","getRow","pin","nextRowIndex","rowActive","setRowActiveIndex","toggleEditing","setLastFocusedCellIndex","error","console","e","reject","React","useEffect","_tableRef$current","current","instance","_tableRef$current2","handleCreate","shortcut","key","meta","tooltip","table3","buttons","create","saving","disabled","Shortcut","keys","isScrolled","scrollHeight","clientHeight","className","clsx","footer","isEnabled","tabIndex","Button","appearance","onClick","ref","Icon","name","label"],"mappings":"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"}
+{"version":3,"file":"CreateNewRow.js","sources":["../../../../../../../../../../src/components/Table3/components/Row/Editing/CreateNewRow.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { Button } from '../../../../Button/Button';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Icon } from '../../../../Icon/Icon';\nimport { Table3EditingCreateHandler } from '../../../types';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\n\ntype CreateNewRowProps<TType = unknown> = {\n    buttonRef: React.Ref<HTMLButtonElement>;\n    isScrolled: boolean;\n    onEditingCreate?: Table3EditingCreateHandler<TType>;\n    table: ReactTable<TType>;\n    tableMeta: ReactTableMeta<TType>;\n};\n\nexport function CreateNewRow<TType = unknown>(props: CreateNewRowProps<TType>) {\n    const { buttonRef, isScrolled, table, tableMeta } = props;\n    const { texts } = useLocalization();\n\n    const temporaryRows = tableMeta.editing.temporaryRows as TType[];\n    const temporaryRowId: string = temporaryRows[0]?.[tableMeta.rowIdentityAccessor as string] ?? '';\n\n    const isDisabled =\n        !!table.getState().globalFilter ||\n        !!table.getState().columnFilters?.length ||\n        (!!temporaryRowId && !!tableMeta.editing.hasRowErrors(temporaryRowId));\n    const isSaving = !!temporaryRowId && tableMeta.editing.getRowStatus(temporaryRowId) === 'saving';\n\n    const handleCreate = async () => {\n        if (isDisabled) {\n            return;\n        }\n\n        await tableMeta.editing.createRow(table);\n    };\n    const shortcut = { key: 'Enter', meta: true };\n\n    let tooltip;\n\n    if (isSaving) {\n        tooltip = texts.table3.editing.buttons.create.saving;\n    } else if (isDisabled) {\n        tooltip = texts.table3.editing.buttons.create.disabled;\n    } else {\n        tooltip = <Shortcut keys={shortcut} />;\n    }\n\n    const className = clsx('group/row border-grey-300 !sticky z-[21]', {\n        'bottom-10': tableMeta.footer.isEnabled,\n        'bottom-0': !tableMeta.footer.isEnabled,\n        'border-b': !isScrolled,\n    });\n\n    return (\n        <tr data-row-create className={className} tabIndex={-1}>\n            <td className=\"!bg-grey-50 col-span-full !border-b-0 !px-1\">\n                <Button\n                    appearance=\"transparent\"\n                    className=\"group-hover:bg-grey-200 sticky left-[4px]\"\n                    disabled={isDisabled}\n                    onClick={handleCreate}\n                    ref={buttonRef}\n                    shortcut={shortcut}\n                    tooltip={tooltip}>\n                    <Icon name=\"circle-plus\" />\n                    {texts.table3.editing.buttons.create.label}\n                </Button>\n            </td>\n        </tr>\n    );\n}\n"],"names":["CreateNewRow","props","buttonRef","isScrolled","table","tableMeta","texts","useLocalization","temporaryRows","editing","temporaryRowId","_temporaryRows$0$tabl","_temporaryRows$","rowIdentityAccessor","isDisabled","getState","globalFilter","_table$getState$colum","columnFilters","length","hasRowErrors","isSaving","getRowStatus","handleCreate","Promise","resolve","createRow","then","e","reject","shortcut","key","meta","tooltip","table3","buttons","create","saving","disabled","React","Shortcut","keys","className","clsx","footer","isEnabled","tabIndex","Button","appearance","onClick","ref","Icon","name","label"],"mappings":";;;;;;;SAiBgBA,YAAYA,CAAkBC,KAA+B;;EACzE,MAAM;IAAEC,SAAS;IAAEC,UAAU;IAAEC,KAAK;IAAEC;GAAW,GAAGJ,KAAK;EACzD,MAAM;IAAEK;GAAO,GAAGC,eAAe,EAAE;EAEnC,MAAMC,aAAa,GAAGH,SAAS,CAACI,OAAO,CAACD,aAAwB;EAChE,MAAME,cAAc,IAAAC,qBAAA,IAAAC,eAAA,GAAWJ,aAAa,CAAC,CAAC,CAAC,cAAAI,eAAA,uBAAhBA,eAAA,CAAmBP,SAAS,CAACQ,mBAA6B,CAAC,cAAAF,qBAAA,cAAAA,qBAAA,GAAI,EAAE;EAEhG,MAAMG,UAAU,GACZ,CAAC,CAACV,KAAK,CAACW,QAAQ,EAAE,CAACC,YAAY,IAC/B,CAAC,GAAAC,qBAAA,GAACb,KAAK,CAACW,QAAQ,EAAE,CAACG,aAAa,cAAAD,qBAAA,eAA9BA,qBAAA,CAAgCE,MAAM,KACvC,CAAC,CAACT,cAAc,IAAI,CAAC,CAACL,SAAS,CAACI,OAAO,CAACW,YAAY,CAACV,cAAc,CAAE;EAC1E,MAAMW,QAAQ,GAAG,CAAC,CAACX,cAAc,IAAIL,SAAS,CAACI,OAAO,CAACa,YAAY,CAACZ,cAAc,CAAC,KAAK,QAAQ;EAEhG,MAAMa,YAAY;IAAA;MACd,IAAIT,UAAU,EAAE;QACZ,OAAAU,OAAA,CAAAC,OAAA;;MACH,OAAAD,OAAA,CAAAC,OAAA,CAEKpB,SAAS,CAACI,OAAO,CAACiB,SAAS,CAACtB,KAAK,CAAC,EAAAuB,IAAA;KAC3C,QAAAC,CAAA;MAAA,OAAAJ,OAAA,CAAAK,MAAA,CAAAD,CAAA;;;EACD,MAAME,QAAQ,GAAG;IAAEC,GAAG,EAAE,OAAO;IAAEC,IAAI,EAAE;GAAM;EAE7C,IAAIC,OAAO;EAEX,IAAIZ,QAAQ,EAAE;IACVY,OAAO,GAAG3B,KAAK,CAAC4B,MAAM,CAACzB,OAAO,CAAC0B,OAAO,CAACC,MAAM,CAACC,MAAM;GACvD,MAAM,IAAIvB,UAAU,EAAE;IACnBmB,OAAO,GAAG3B,KAAK,CAAC4B,MAAM,CAACzB,OAAO,CAAC0B,OAAO,CAACC,MAAM,CAACE,QAAQ;GACzD,MAAM;IACHL,OAAO,gBAAGM,6BAACC,QAAQ;MAACC,IAAI,EAAEX;MAAY;;EAG1C,MAAMY,SAAS,GAAGC,EAAI,CAAC,0CAA0C,EAAE;IAC/D,WAAW,EAAEtC,SAAS,CAACuC,MAAM,CAACC,SAAS;IACvC,UAAU,EAAE,CAACxC,SAAS,CAACuC,MAAM,CAACC,SAAS;IACvC,UAAU,EAAE,CAAC1C;GAChB,CAAC;EAEF,oBACIoC;;IAAoBG,SAAS,EAAEA,SAAS;IAAEI,QAAQ,EAAE,CAAC;kBACjDP;IAAIG,SAAS,EAAC;kBACVH,6BAACQ,MAAM;IACHC,UAAU,EAAC,aAAa;IACxBN,SAAS,EAAC,2CAA2C;IACrDJ,QAAQ,EAAExB,UAAU;IACpBmC,OAAO,EAAE1B,YAAY;IACrB2B,GAAG,EAAEhD,SAAS;IACd4B,QAAQ,EAAEA,QAAQ;IAClBG,OAAO,EAAEA;kBACTM,6BAACY,IAAI;IAACC,IAAI,EAAC;IAAgB,EAC1B9C,KAAK,CAAC4B,MAAM,CAACzB,OAAO,CAAC0B,OAAO,CAACC,MAAM,CAACiB,KAAK,CACrC,CACR,CACJ;AAEb;;;;"}

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

@@ -8,6 +8,7 @@ import { RENDERERS } from '../../../useTable3.js';
 function TemporaryRow(props) {
   const {
     createRowButtonRef,
+    isScrolled,
     table,
     tableMeta,
     tableRef
@@ -70,10 +71,9 @@ function TemporaryRow(props) {
       }
     }
   };
-  const isScrolled = tableRef.current ? tableRef.current.scrollHeight > tableRef.current.clientHeight : false;
-  const className = cn('group/row border-grey-300 !sticky z-[22]', {
-    'bottom-[calc(5rem_+_3px)] data-[row-editing-move]:bottom-[calc(5rem_+_2px)]': tableMeta.footer.isEnabled,
-    'bottom-[calc(2.5rem_+_3px)] data-[row-editing-move]:bottom-[calc(2.5rem_+_2px)]': !tableMeta.footer.isEnabled,
+  const className = cn('group/row border-grey-300 !sticky z-[22] print:hidden', {
+    'bottom-[calc(5rem_+_2px)] data-[row-editing-move]:bottom-[calc(5rem_+_2px)]': tableMeta.footer.isEnabled,
+    'bottom-[calc(2.5rem_+_2px)] data-[row-editing-move]:bottom-[calc(2.5rem_+_2px)]': !tableMeta.footer.isEnabled,
     'border-t-2 shadow-[0px_-5px_20px_0px_rgba(0,0,0,0.1)] [&>td]:!border-b-0': isScrolled
   });
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, table.getBottomRows().map(row => (/*#__PURE__*/React__default.createElement(Row, {
@@ -87,8 +87,9 @@ function TemporaryRow(props) {
     className: className,
     onKeyDown: handleKeyDown,
     onKeyDownCapture: handleKeyDownCapture,
-    // Row actions should only be hidden on temporary rows when editing is turned off
-    hideRowActions: !tableMeta.editing.isEditing
+    hideInternalColumns: true,
+    hideRowActions: !tableMeta.editing.isEditing,
+    skipPageLoading: true
   }))));
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"TemporaryRow.js","sources":["../../../../../../../../../../src/components/Table3/components/Row/Editing/TemporaryRow.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { Row } from '../../../../../primitives/Table/Core/components/Row/Row';\nimport { RENDERERS } from '../../../useTable3';\nimport { isElementTriggeredFromContainer } from '../../../../../utils/dom';\nimport { TableRef } from '../../../../../primitives/Table/types';\nimport { TEMPORARY_ROW_ID_PREFIX } from '../../../util/editing';\n\ntype TemporaryRowProps<TType = unknown> = {\n    createRowButtonRef: React.RefObject<HTMLButtonElement>;\n    table: ReactTable<TType>;\n    tableMeta: ReactTableMeta<TType>;\n    tableRef: React.RefObject<TableRef>;\n};\n\nexport function TemporaryRow<TType = unknown>(props: TemporaryRowProps<TType>) {\n    const { createRowButtonRef, table, tableMeta, tableRef } = props;\n\n    const handleKeyDown = async (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n        if (event.key === 'ArrowDown') {\n            event.preventDefault();\n\n            if (!isElementTriggeredFromContainer(event.target as Element, event.currentTarget)) {\n                const saved = await tableMeta.editing.saveChanges(table);\n\n                if (saved) {\n                    createRowButtonRef.current?.focus();\n                }\n            }\n        } else if (event.key === 'ArrowUp') {\n            event.preventDefault();\n            event.stopPropagation();\n\n            if (tableRef.current) {\n                const availableRows = Array.from(\n                    tableRef.current.querySelectorAll(`tbody tr:not([data-row-id^='${TEMPORARY_ROW_ID_PREFIX}'])`) ?? []\n                );\n\n                const footerHeight = tableRef.current.querySelector('tfoot')?.getBoundingClientRect().height ?? 0;\n                const newRowHeight = event.currentTarget.getBoundingClientRect().height;\n                const visibleHeight = tableRef.current.clientHeight - footerHeight - newRowHeight;\n                const tableTopOffset = tableRef.current.getBoundingClientRect().top;\n\n                let nextRowIndex;\n\n                // iterate available rows in reverse order, since we're working at the bottom\n                for (let index = availableRows.length - 1; index >= 0; index--) {\n                    const rowRect = availableRows[index].getBoundingClientRect();\n                    const topPlusHalfRow = rowRect.top + rowRect.height / 2;\n\n                    if (topPlusHalfRow - tableTopOffset <= visibleHeight) {\n                        nextRowIndex = index;\n                        break;\n                    }\n                }\n\n                if (nextRowIndex) {\n                    tableMeta.rowActive.setRowActiveIndex(\n                        Number(availableRows[nextRowIndex < 0 ? 0 : nextRowIndex].getAttribute('data-row-index'))\n                    );\n                }\n            }\n        }\n    };\n\n    const handleKeyDownCapture = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n        if (event.key === 'ArrowLeft' && tableMeta.editing.lastFocusedCellIndex === 0) {\n            event.preventDefault();\n            event.stopPropagation();\n        } else if (event.key === 'ArrowRight' && tableMeta.editing.lastFocusedCellIndex) {\n            if (tableMeta.editing.lastFocusedCellIndex === table.getVisibleFlatColumns().length - 1) {\n                event.preventDefault();\n                event.stopPropagation();\n            }\n        }\n    };\n\n    const isScrolled = tableRef.current ? tableRef.current.scrollHeight > tableRef.current.clientHeight : false;\n\n    const className = clsx('group/row border-grey-300 !sticky z-[22]', {\n        'bottom-[calc(5rem_+_3px)] data-[row-editing-move]:bottom-[calc(5rem_+_2px)]': tableMeta.footer.isEnabled,\n        'bottom-[calc(2.5rem_+_3px)] data-[row-editing-move]:bottom-[calc(2.5rem_+_2px)]': !tableMeta.footer.isEnabled,\n        'border-t-2 shadow-[0px_-5px_20px_0px_rgba(0,0,0,0.1)] [&>td]:!border-b-0': isScrolled,\n    });\n\n    return (\n        <>\n            {table.getBottomRows().map(row => (\n                <Row<TType>\n                    key={row.id}\n                    cellRenderer={RENDERERS.cell}\n                    index={tableMeta.length}\n                    measureRow={() => null}\n                    renderer={RENDERERS.row}\n                    row={row}\n                    table={table}\n                    className={className}\n                    onKeyDown={handleKeyDown}\n                    onKeyDownCapture={handleKeyDownCapture}\n                    // Row actions should only be hidden on temporary rows when editing is turned off\n                    hideRowActions={!tableMeta.editing.isEditing}\n                />\n            ))}\n        </>\n    );\n}\n"],"names":["TemporaryRow","props","createRowButtonRef","table","tableMeta","tableRef","handleKeyDown","event","key","preventDefault","_temp","isElementTriggeredFromContainer","target","currentTarget","Promise","resolve","editing","saveChanges","then","saved","_createRowButtonRef$c","current","focus","stopPropagation","_tableRef$current$que","_tableRef$current$que2","_tableRef$current$que3","availableRows","Array","from","querySelectorAll","TEMPORARY_ROW_ID_PREFIX","footerHeight","querySelector","getBoundingClientRect","height","newRowHeight","visibleHeight","clientHeight","tableTopOffset","top","nextRowIndex","index","length","rowRect","topPlusHalfRow","rowActive","setRowActiveIndex","Number","getAttribute","_temp2","e","reject","handleKeyDownCapture","lastFocusedCellIndex","getVisibleFlatColumns","isScrolled","scrollHeight","className","clsx","footer","isEnabled","React","getBottomRows","map","row","Row","id","cellRenderer","RENDERERS","cell","measureRow","renderer","onKeyDown","onKeyDownCapture","hideRowActions","isEditing"],"mappings":"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"}
+{"version":3,"file":"TemporaryRow.js","sources":["../../../../../../../../../../src/components/Table3/components/Row/Editing/TemporaryRow.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { Row } from '../../../../../primitives/Table/Core/components/Row/Row';\nimport { RENDERERS } from '../../../useTable3';\nimport { isElementTriggeredFromContainer } from '../../../../../utils/dom';\nimport { TableRef } from '../../../../../primitives/Table/types';\nimport { TEMPORARY_ROW_ID_PREFIX } from '../../../util/editing';\n\ntype TemporaryRowProps<TType = unknown> = {\n    createRowButtonRef: React.RefObject<HTMLButtonElement>;\n    isScrolled: boolean;\n    table: ReactTable<TType>;\n    tableMeta: ReactTableMeta<TType>;\n    tableRef: React.RefObject<TableRef>;\n};\n\nexport function TemporaryRow<TType = unknown>(props: TemporaryRowProps<TType>) {\n    const { createRowButtonRef, isScrolled, table, tableMeta, tableRef } = props;\n\n    const handleKeyDown = async (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n        if (event.key === 'ArrowDown') {\n            event.preventDefault();\n\n            if (!isElementTriggeredFromContainer(event.target as Element, event.currentTarget)) {\n                const saved = await tableMeta.editing.saveChanges(table);\n\n                if (saved) {\n                    createRowButtonRef.current?.focus();\n                }\n            }\n        } else if (event.key === 'ArrowUp') {\n            event.preventDefault();\n            event.stopPropagation();\n\n            if (tableRef.current) {\n                const availableRows = Array.from(\n                    tableRef.current.querySelectorAll(`tbody tr:not([data-row-id^='${TEMPORARY_ROW_ID_PREFIX}'])`) ?? []\n                );\n\n                const footerHeight = tableRef.current.querySelector('tfoot')?.getBoundingClientRect().height ?? 0;\n                const newRowHeight = event.currentTarget.getBoundingClientRect().height;\n                const visibleHeight = tableRef.current.clientHeight - footerHeight - newRowHeight;\n                const tableTopOffset = tableRef.current.getBoundingClientRect().top;\n\n                let nextRowIndex;\n\n                // iterate available rows in reverse order, since we're working at the bottom\n                for (let index = availableRows.length - 1; index >= 0; index--) {\n                    const rowRect = availableRows[index].getBoundingClientRect();\n                    const topPlusHalfRow = rowRect.top + rowRect.height / 2;\n\n                    if (topPlusHalfRow - tableTopOffset <= visibleHeight) {\n                        nextRowIndex = index;\n                        break;\n                    }\n                }\n\n                if (nextRowIndex) {\n                    tableMeta.rowActive.setRowActiveIndex(\n                        Number(availableRows[nextRowIndex < 0 ? 0 : nextRowIndex].getAttribute('data-row-index'))\n                    );\n                }\n            }\n        }\n    };\n\n    const handleKeyDownCapture = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n        if (event.key === 'ArrowLeft' && tableMeta.editing.lastFocusedCellIndex === 0) {\n            event.preventDefault();\n            event.stopPropagation();\n        } else if (event.key === 'ArrowRight' && tableMeta.editing.lastFocusedCellIndex) {\n            if (tableMeta.editing.lastFocusedCellIndex === table.getVisibleFlatColumns().length - 1) {\n                event.preventDefault();\n                event.stopPropagation();\n            }\n        }\n    };\n\n    const className = clsx('group/row border-grey-300 !sticky z-[22] print:hidden', {\n        'bottom-[calc(5rem_+_2px)] data-[row-editing-move]:bottom-[calc(5rem_+_2px)]': tableMeta.footer.isEnabled,\n        'bottom-[calc(2.5rem_+_2px)] data-[row-editing-move]:bottom-[calc(2.5rem_+_2px)]': !tableMeta.footer.isEnabled,\n        'border-t-2 shadow-[0px_-5px_20px_0px_rgba(0,0,0,0.1)] [&>td]:!border-b-0': isScrolled,\n    });\n\n    return (\n        <>\n            {table.getBottomRows().map(row => (\n                <Row<TType>\n                    key={row.id}\n                    cellRenderer={RENDERERS.cell}\n                    index={tableMeta.length}\n                    measureRow={() => null}\n                    renderer={RENDERERS.row}\n                    row={row}\n                    table={table}\n                    className={className}\n                    onKeyDown={handleKeyDown}\n                    onKeyDownCapture={handleKeyDownCapture}\n                    hideInternalColumns\n                    hideRowActions={!tableMeta.editing.isEditing}\n                    skipPageLoading\n                />\n            ))}\n        </>\n    );\n}\n"],"names":["TemporaryRow","props","createRowButtonRef","isScrolled","table","tableMeta","tableRef","handleKeyDown","event","key","preventDefault","_temp","isElementTriggeredFromContainer","target","currentTarget","Promise","resolve","editing","saveChanges","then","saved","_createRowButtonRef$c","current","focus","stopPropagation","_tableRef$current$que","_tableRef$current$que2","_tableRef$current$que3","availableRows","Array","from","querySelectorAll","TEMPORARY_ROW_ID_PREFIX","footerHeight","querySelector","getBoundingClientRect","height","newRowHeight","visibleHeight","clientHeight","tableTopOffset","top","nextRowIndex","index","length","rowRect","topPlusHalfRow","rowActive","setRowActiveIndex","Number","getAttribute","_temp2","e","reject","handleKeyDownCapture","lastFocusedCellIndex","getVisibleFlatColumns","className","clsx","footer","isEnabled","React","getBottomRows","map","row","Row","id","cellRenderer","RENDERERS","cell","measureRow","renderer","onKeyDown","onKeyDownCapture","hideInternalColumns","hideRowActions","isEditing","skipPageLoading"],"mappings":";;;;;;;SAiBgBA,YAAYA,CAAkBC,KAA+B;EACzE,MAAM;IAAEC,kBAAkB;IAAEC,UAAU;IAAEC,KAAK;IAAEC,SAAS;IAAEC;GAAU,GAAGL,KAAK;EAE5E,MAAMM,aAAa,aAAUC,KAA+C;IAAA;;YACpEA,KAAK,CAACC,GAAG,KAAK,WAAW;UACzBD,KAAK,CAACE,cAAc,EAAE;UAAC,MAAAC,KAAA;YAAA,IAEnB,CAACC,+BAA+B,CAACJ,KAAK,CAACK,MAAiB,EAAEL,KAAK,CAACM,aAAa,CAAC;cAAA,OAAAC,OAAA,CAAAC,OAAA,CAC1DX,SAAS,CAACY,OAAO,CAACC,WAAW,CAACd,KAAK,CAAC,EAAAe,IAAA,WAAlDC,KAAK;gBAAA,IAEPA,KAAK;kBAAA,IAAAC,qBAAA;kBACL,CAAAA,qBAAA,GAAAnB,kBAAkB,CAACoB,OAAO,cAAAD,qBAAA,uBAA1BA,qBAAA,CAA4BE,KAAK,EAAE;;;;;UAAC,IAAAZ,KAAA,IAAAA,KAAA,CAAAQ,IAAA,SAAAR,KAAA,CAAAQ,IAAA;eAGzC,IAAIX,KAAK,CAACC,GAAG,KAAK,SAAS,EAAE;UAChCD,KAAK,CAACE,cAAc,EAAE;UACtBF,KAAK,CAACgB,eAAe,EAAE;UAEvB,IAAIlB,QAAQ,CAACgB,OAAO,EAAE;YAAA,IAAAG,qBAAA,EAAAC,sBAAA,EAAAC,sBAAA;YAClB,MAAMC,aAAa,GAAGC,KAAK,CAACC,IAAI,EAAAL,qBAAA,GAC5BnB,QAAQ,CAACgB,OAAO,CAACS,gBAAgB,CAAC,+BAA+BC,uBAAuB,KAAK,CAAC,cAAAP,qBAAA,cAAAA,qBAAA,GAAI,EAAE,CACvG;YAED,MAAMQ,YAAY,IAAAP,sBAAA,IAAAC,sBAAA,GAAGrB,QAAQ,CAACgB,OAAO,CAACY,aAAa,CAAC,OAAO,CAAC,cAAAP,sBAAA,uBAAvCA,sBAAA,CAAyCQ,qBAAqB,EAAE,CAACC,MAAM,cAAAV,sBAAA,cAAAA,sBAAA,GAAI,CAAC;YACjG,MAAMW,YAAY,GAAG7B,KAAK,CAACM,aAAa,CAACqB,qBAAqB,EAAE,CAACC,MAAM;YACvE,MAAME,aAAa,GAAGhC,QAAQ,CAACgB,OAAO,CAACiB,YAAY,GAAGN,YAAY,GAAGI,YAAY;YACjF,MAAMG,cAAc,GAAGlC,QAAQ,CAACgB,OAAO,CAACa,qBAAqB,EAAE,CAACM,GAAG;YAEnE,IAAIC,YAAY;;YAGhB,KAAK,IAAIC,KAAK,GAAGf,aAAa,CAACgB,MAAM,GAAG,CAAC,EAAED,KAAK,IAAI,CAAC,EAAEA,KAAK,EAAE,EAAE;cAC5D,MAAME,OAAO,GAAGjB,aAAa,CAACe,KAAK,CAAC,CAACR,qBAAqB,EAAE;cAC5D,MAAMW,cAAc,GAAGD,OAAO,CAACJ,GAAG,GAAGI,OAAO,CAACT,MAAM,GAAG,CAAC;cAEvD,IAAIU,cAAc,GAAGN,cAAc,IAAIF,aAAa,EAAE;gBAClDI,YAAY,GAAGC,KAAK;gBACpB;;;YAIR,IAAID,YAAY,EAAE;cACdrC,SAAS,CAAC0C,SAAS,CAACC,iBAAiB,CACjCC,MAAM,CAACrB,aAAa,CAACc,YAAY,GAAG,CAAC,GAAG,CAAC,GAAGA,YAAY,CAAC,CAACQ,YAAY,CAAC,gBAAgB,CAAC,CAAC,CAC5F;;;;;MAGZ,OAAAnC,OAAA,CAAAC,OAAA,CAAAmC,MAAA,IAAAA,MAAA,CAAAhC,IAAA,GAAAgC,MAAA,CAAAhC,IAAA;KACJ,QAAAiC,CAAA;MAAA,OAAArC,OAAA,CAAAsC,MAAA,CAAAD,CAAA;;;EAED,MAAME,oBAAoB,GAAI9C,KAA+C;IACzE,IAAIA,KAAK,CAACC,GAAG,KAAK,WAAW,IAAIJ,SAAS,CAACY,OAAO,CAACsC,oBAAoB,KAAK,CAAC,EAAE;MAC3E/C,KAAK,CAACE,cAAc,EAAE;MACtBF,KAAK,CAACgB,eAAe,EAAE;KAC1B,MAAM,IAAIhB,KAAK,CAACC,GAAG,KAAK,YAAY,IAAIJ,SAAS,CAACY,OAAO,CAACsC,oBAAoB,EAAE;MAC7E,IAAIlD,SAAS,CAACY,OAAO,CAACsC,oBAAoB,KAAKnD,KAAK,CAACoD,qBAAqB,EAAE,CAACZ,MAAM,GAAG,CAAC,EAAE;QACrFpC,KAAK,CAACE,cAAc,EAAE;QACtBF,KAAK,CAACgB,eAAe,EAAE;;;GAGlC;EAED,MAAMiC,SAAS,GAAGC,EAAI,CAAC,uDAAuD,EAAE;IAC5E,6EAA6E,EAAErD,SAAS,CAACsD,MAAM,CAACC,SAAS;IACzG,iFAAiF,EAAE,CAACvD,SAAS,CAACsD,MAAM,CAACC,SAAS;IAC9G,0EAA0E,EAAEzD;GAC/E,CAAC;EAEF,oBACI0D,4DACKzD,KAAK,CAAC0D,aAAa,EAAE,CAACC,GAAG,CAACC,GAAG,kBAC1BH,6BAACI,GAAG;IACAxD,GAAG,EAAEuD,GAAG,CAACE,EAAE;IACXC,YAAY,EAAEC,SAAS,CAACC,IAAI;IAC5B1B,KAAK,EAAEtC,SAAS,CAACuC,MAAM;IACvB0B,UAAU,EAAEA,MAAM,IAAI;IACtBC,QAAQ,EAAEH,SAAS,CAACJ,GAAG;IACvBA,GAAG,EAAEA,GAAG;IACR5D,KAAK,EAAEA,KAAK;IACZqD,SAAS,EAAEA,SAAS;IACpBe,SAAS,EAAEjE,aAAa;IACxBkE,gBAAgB,EAAEnB,oBAAoB;IACtCoB,mBAAmB;IACnBC,cAAc,EAAE,CAACtE,SAAS,CAACY,OAAO,CAAC2D,SAAS;IAC5CC,eAAe;IACjB,CACL,CAAC,CACH;AAEX;;;;"}

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

@@ -16,7 +16,11 @@ function Editing(props) {
   const ref = React__default.useRef(null);
   const tableMeta = table.options.meta;
   const handleChange = enabled => {
+    var _tableMeta$onEvent;
     tableMeta.editing.toggleEditing(enabled, table, scrollToIndex);
+    (_tableMeta$onEvent = tableMeta.onEvent) === null || _tableMeta$onEvent === void 0 ? void 0 : _tableMeta$onEvent.call(tableMeta, 'editing-mode', {
+      enabled
+    });
   };
   const tooltip = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table3.editing.buttons.edit.tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
     className: "ml-2",

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 { Shortcut } from '../../../../Shortcut/Shortcut';\nimport { shortcut } from '../../../util/editing';\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 handleChange = (enabled: boolean) => {\n        tableMeta.editing.toggleEditing(enabled, table, scrollToIndex);\n    };\n\n    const tooltip = (\n        <>\n            {texts.table3.editing.buttons.edit.tooltip}\n            <Shortcut className=\"ml-2\" keys={shortcut} />\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","handleChange","enabled","editing","toggleEditing","tooltip","table3","buttons","edit","Shortcut","className","keys","shortcut","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,YAAY,GAAIC,OAAgB;IAClCJ,SAAS,CAACK,OAAO,CAACC,aAAa,CAACF,OAAO,EAAEV,KAAK,EAAED,aAAa,CAAC;GACjE;EAED,MAAMc,OAAO,gBACTT,4DACKH,KAAK,CAACa,MAAM,CAACH,OAAO,CAACI,OAAO,CAACC,IAAI,CAACH,OAAO,eAC1CT,6BAACa,QAAQ;IAACC,SAAS,EAAC,MAAM;IAACC,IAAI,EAAEC;IAAY,CAEpD;EAED,oBACIhB,6BAACiB,OAAO;IAACC,KAAK,EAAET;kBACZT,6BAACmB,UAAU;kBAAY,gBAAgB;IAACC,OAAO,EAAElB,SAAS,CAACK,OAAO,CAACc,SAAS;IAAEC,QAAQ,EAAEjB,YAAY;IAAEN,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 { Shortcut } from '../../../../Shortcut/Shortcut';\nimport { shortcut } from '../../../util/editing';\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 handleChange = (enabled: boolean) => {\n        tableMeta.editing.toggleEditing(enabled, table, scrollToIndex);\n        tableMeta.onEvent?.('editing-mode', { enabled });\n    };\n\n    const tooltip = (\n        <>\n            {texts.table3.editing.buttons.edit.tooltip}\n            <Shortcut className=\"ml-2\" keys={shortcut} />\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","handleChange","enabled","editing","toggleEditing","_tableMeta$onEvent","onEvent","call","tooltip","table3","buttons","edit","Shortcut","className","keys","shortcut","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,YAAY,GAAIC,OAAgB;;IAClCJ,SAAS,CAACK,OAAO,CAACC,aAAa,CAACF,OAAO,EAAEV,KAAK,EAAED,aAAa,CAAC;IAC9D,CAAAc,kBAAA,GAAAP,SAAS,CAACQ,OAAO,cAAAD,kBAAA,uBAAjBA,kBAAA,CAAAE,IAAA,CAAAT,SAAS,EAAW,cAAc,EAAE;MAAEI;KAAS,CAAC;GACnD;EAED,MAAMM,OAAO,gBACTZ,4DACKH,KAAK,CAACgB,MAAM,CAACN,OAAO,CAACO,OAAO,CAACC,IAAI,CAACH,OAAO,eAC1CZ,6BAACgB,QAAQ;IAACC,SAAS,EAAC,MAAM;IAACC,IAAI,EAAEC;IAAY,CAEpD;EAED,oBACInB,6BAACoB,OAAO;IAACC,KAAK,EAAET;kBACZZ,6BAACsB,UAAU;kBAAY,gBAAgB;IAACC,OAAO,EAAErB,SAAS,CAACK,OAAO,CAACiB,SAAS;IAAEC,QAAQ,EAAEpB,YAAY;IAAEN,GAAG,EAAEA;IAAO,CAC5G;AAElB;;;;"}

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

@@ -18,6 +18,7 @@ function reducer(state, action) {
       {
         const {
           columnId,
+          index,
           row,
           value
         } = payload;
@@ -27,7 +28,8 @@ function reducer(state, action) {
             ...state.changes,
             rows: setWith(state.changes.rows, `${rowId}.${columnId}`, value, Object),
             originals: setWith(state.changes.originals, rowId, row, Object)
-          }
+          },
+          indexes: setWith(state.indexes, rowId, index, Object)
         };
       }
     case 'removeCellValue':
@@ -61,6 +63,7 @@ function reducer(state, action) {
       {
         const {
           cellErrors,
+          index,
           moveReasons,
           original,
           value
@@ -75,7 +78,8 @@ function reducer(state, action) {
             moveReasons: setWith(state.changes.moveReasons, rowId, moveReasons !== null && moveReasons !== void 0 ? moveReasons : state.changes.moveReasons[rowId], Object),
             // status can be undefined, so don't use ??
             status: setWith(state.changes.status, rowId, undefined, Object)
-          }
+          },
+          indexes: setWith(state.indexes, rowId, index, Object)
         };
       }
     case 'removeRow':
@@ -93,6 +97,7 @@ function reducer(state, action) {
             originals: omit(state.changes.originals, rowId),
             status: omit(state.changes.status, rowId)
           },
+          indexes: omit(state.indexes, rowId),
           temporaryRows: state.temporaryRows.filter(row => row[rowIdentityAccessor] !== rowId)
         };
       }
@@ -122,9 +127,10 @@ function reducer(state, action) {
           }
         };
       }
-    case 'createRow':
+    case 'insertTemporaryRow':
       {
         const {
+          index,
           value
         } = payload;
         return {
@@ -134,14 +140,36 @@ function reducer(state, action) {
             ...state.changes,
             rows: setWith(state.changes.rows, rowId, value, Object),
             originals: setWith(state.changes.originals, rowId, value, Object)
-          }
+          },
+          indexes: setWith(state.indexes, rowId, index, Object)
         };
       }
     default:
       return state;
   }
 }
-function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, validator) {
+function usePendingChangesState(handleSave, handleChange, handleDiscard, rowIdentityAccessor, validator) {
+  const discardChanges = function (rowId, table) {
+    try {
+      // remove any new rows from pinned state before discarding them
+      table.resetRowPinning(true);
+      dispatch({
+        type: 'removeRow',
+        rowId,
+        payload: {
+          rowIdentityAccessor
+        }
+      });
+      const _temp8 = function () {
+        if (typeof handleDiscard === 'function') {
+          return Promise.resolve(handleDiscard()).then(function () {});
+        }
+      }();
+      return Promise.resolve(_temp8 && _temp8.then ? _temp8.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
   const saveChanges = function (table, rowId = undefined) {
     try {
       let _exit = false;
@@ -154,35 +182,38 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
         [rowId]: state.changes.rows[rowId]
       } : state.changes.rows;
       let completed = true;
-      const _temp9 = _forOf(Object.keys(changes), function (rowId) {
+      const _temp7 = _forOf(Object.keys(changes), function (rowId) {
         const status = getRowStatus(rowId);
         return _catch(function () {
-          function _temp8(_result) {
+          var _changes$rowId;
+          function _temp6(_result) {
             return _exit ? _result : Promise.resolve(handleSave(changeSet)).then(function () {
               // cleanup changes, we don't need them after saving
-              discardChanges(rowId, table);
-              // show the saved status, then remove it after a delay
-              setRowStatus(rowId, 'saved');
-              setTimeout(() => {
-                setRowStatus(rowId, undefined);
-              }, DELAY_BEFORE_REMOVING_SAVE_STATUS);
+              return Promise.resolve(discardChanges(rowId, table)).then(function () {
+                // show the saved status, then remove it after a delay
+                setRowStatus(rowId, 'saved');
+                setTimeout(() => {
+                  setRowStatus(rowId, undefined);
+                }, DELAY_BEFORE_REMOVING_SAVE_STATUS);
+              });
             });
           }
+          const rowChanges = (_changes$rowId = changes[rowId]) !== null && _changes$rowId !== void 0 ? _changes$rowId : {};
           // don't try to save if - already saving, or there are known errors
-          if (status === 'saving' || status === 'errored') {
+          if (!Object.keys(rowChanges).length || status === 'saving' || status === 'errored') {
             return;
           }
           setRowStatus(rowId, 'saving');
           const changeSet = {
             ...state.changes.originals[rowId],
-            ...changes[rowId]
+            ...rowChanges
           };
           // if we had to create a temporary id, delete it first - it's our data, not theirs
           if (isTemporaryRow(changeSet[rowIdentityAccessor])) {
             delete changeSet[rowIdentityAccessor];
           }
           // re-run validation, maybe a cell is already invalid but has never been blurred
-          const _temp7 = function () {
+          const _temp5 = function () {
             if (validator) {
               return Promise.resolve(validator(changeSet)).then(function (errors) {
                 if (errors && Object.keys(errors).length) {
@@ -191,7 +222,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
               });
             }
           }();
-          return _temp7 && _temp7.then ? _temp7.then(_temp8) : _temp8(_temp7); // send new data to the server
+          return _temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5); // send new data to the server
         }, function (error) {
           var _error$response;
           if (error instanceof ReferenceError || error instanceof TypeError || (error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : _error$response.status) >= 500) {
@@ -231,18 +262,18 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
       }, function () {
         return _exit;
       });
-      return Promise.resolve(_temp9 && _temp9.then ? _temp9.then(function (_result3) {
+      return Promise.resolve(_temp7 && _temp7.then ? _temp7.then(function (_result3) {
         return _exit ? _result3 : completed;
-      }) : _exit ? _temp9 : completed);
+      }) : _exit ? _temp7 : completed);
     } catch (e) {
       return Promise.reject(e);
     }
   };
-  const onCellChanged = function (cell, rowIndex, shouldRunUpdaters = true) {
+  const onCellChanged = function (cell, rowIndex, nextValue, shouldRunUpdaters = true) {
     try {
-      function _temp6() {
+      function _temp4() {
         var _state$changes$errors11;
-        function _temp4() {
+        function _temp2() {
           // only set errors and move reasons for the cells we're currently acting on
           // why? because the UX is not good if we set them for cells the user hasn't touched yet
           const cellsToActOn = [cell.column.id, ...Object.keys(updatesForOtherCells)];
@@ -273,6 +304,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
             rowId: cell.row.id,
             payload: {
               cellErrors: nextCellErrors,
+              index: rowIndex,
               moveReasons: nextMoveReasons,
               value: nextChanges
             }
@@ -280,7 +312,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
         }
         // create a projection of the next state, so we can act against it
         const nextChanges = {
-          ...state.changes.rows[cell.row.id],
+          ...changes,
           ...updatesForOtherCells
         };
         const nextMoveReasons = {
@@ -289,29 +321,35 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
         const nextCellErrors = {
           ...((_state$changes$errors11 = state.changes.errors[cell.row.id]) === null || _state$changes$errors11 === void 0 ? void 0 : _state$changes$errors11.cells)
         };
-        // run validation
+        // run validation - if there are changes, and if there is an original stored
         let validationErrors = {};
-        const _temp3 = function () {
-          if (validator) {
+        const _temp = function () {
+          if (validator && Object.keys(nextChanges).length && state.changes.originals[cell.row.id]) {
+            // merge with the original so we get a full row
             const nextRowValue = {
               ...state.changes.originals[cell.row.id],
               ...changes,
               ...updatesForOtherCells
             };
-            return Promise.resolve(validator(nextRowValue)).then(function (_validator2) {
-              validationErrors = _validator2 !== null && _validator2 !== void 0 ? _validator2 : {};
+            return Promise.resolve(validator(nextRowValue)).then(function (_validator) {
+              validationErrors = _validator !== null && _validator !== void 0 ? _validator : {};
             });
           }
         }();
-        return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
+        return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
       }
-      const changes = state.changes.rows[cell.row.id];
-      if (!changes) {
+      const changes = nextValue !== undefined ? {
+        ...state.changes.rows[cell.row.id],
+        [cell.column.id]: nextValue
+      } : {
+        ...state.changes.rows[cell.row.id]
+      };
+      if (!Object.keys(changes).length) {
         return Promise.resolve();
       }
       let updatesForOtherCells = {};
       // run the updater handler if there is one, to see if there are any other cells to update
-      const _temp5 = function () {
+      const _temp3 = function () {
         if (typeof handleChange === 'function' && shouldRunUpdaters) {
           const previousRowValue = {
             ...state.changes.originals[cell.row.id]
@@ -325,42 +363,11 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
           });
         }
       }();
-      return Promise.resolve(_temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5));
+      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3));
     } catch (e) {
       return Promise.reject(e);
     }
   }; // general
-  // rows
-  const setRowValue = function (rowId, original, value) {
-    try {
-      function _temp2() {
-        dispatch({
-          type: 'updateRow',
-          rowId,
-          payload: {
-            cellErrors,
-            original,
-            value
-          }
-        });
-      }
-      let cellErrors;
-      const _temp = function () {
-        if (validator) {
-          const row = {
-            ...original,
-            ...value
-          };
-          return Promise.resolve(validator(row)).then(function (_validator) {
-            cellErrors = _validator !== null && _validator !== void 0 ? _validator : {};
-          });
-        }
-      }();
-      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
   const localization = useLocalization();
   const [state, dispatch] = React__default.useReducer(reducer, {
     changes: {
@@ -370,8 +377,10 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
       originals: {},
       status: {}
     },
+    indexes: {},
     temporaryRows: []
   });
+  // rows
   function getRowValue(rowId) {
     var _state$changes$rows$r, _state$changes$rows;
     return (_state$changes$rows$r = (_state$changes$rows = state.changes.rows) === null || _state$changes$rows === void 0 ? void 0 : _state$changes$rows[rowId]) !== null && _state$changes$rows$r !== void 0 ? _state$changes$rows$r : undefined;
@@ -409,23 +418,24 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
       }
     });
   }
-  function createRow(data) {
+  function insertTemporaryRow(data, rowIndex) {
     const newRowId = `${TEMPORARY_ROW_ID_PREFIX}${v4()}`;
     const value = {
       ...data,
       [rowIdentityAccessor]: newRowId
     };
     dispatch({
-      type: 'createRow',
+      type: 'insertTemporaryRow',
       rowId: newRowId,
       payload: {
+        index: rowIndex,
         value
       }
     });
     return newRowId;
   }
   // cells
-  function setCellValue(cell, value) {
+  function setCellValue(cell, rowIndex, value) {
     const rowId = cell.row.id;
     const columnId = cell.column.id;
     // update if the change is different to the original value
@@ -435,6 +445,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
         rowId,
         payload: {
           columnId,
+          index: rowIndex,
           row: cell.row.original,
           value
         }
@@ -467,6 +478,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
     }
     return rowsWithErrors.filter(hasRowErrorsShownInAlert).map(rowId => ({
       rowId,
+      index: state.indexes[rowId],
       changes: state.changes.rows[rowId],
       errors: state.changes.errors[rowId]
     }));
@@ -477,20 +489,8 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
   function hasChanges(rowId) {
     return rowId ? !!state.changes.rows[rowId] : !!Object.keys(state.changes.rows).length;
   }
-  function discardChanges(rowId, table) {
-    // remove any new rows from pinned state before discarding them
-    table.resetRowPinning(true);
-    dispatch({
-      type: 'removeRow',
-      rowId,
-      payload: {
-        rowIdentityAccessor
-      }
-    });
-  }
   return {
     // row
-    setRowValue,
     getRowValue,
     getRowMoveReason,
     hasRowErrors,
@@ -510,7 +510,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
     discardChanges,
     hasSaved,
     // new rows
-    createRow,
+    insertTemporaryRow,
     temporaryRows: state.temporaryRows
   };
 }