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

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

@@ -0,0 +1,88 @@
+import React__default from 'react';
+import { Icon } from '../../../../Icon/Icon.js';
+import { useLocalization } from '../../../../Provider/Localization.js';
+import { Button } from '../../../../Button/Button.js';
+
+function CreateNewRow(props) {
+  var _temporaryRows$0$tabl, _temporaryRows$, _table$getState$colum;
+  const {
+    buttonRef,
+    onEditingCreate: handleEditingCreate,
+    table,
+    tableMeta
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const temporaryRows = tableMeta.editing.temporaryRows;
+  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 handleCreate = function (event) {
+    try {
+      // prevent save being triggered by click outside - TODO: investigate why the button triggers clickoutside
+      event === null || event === void 0 ? void 0 : event.stopPropagation();
+      if (!handleEditingCreate || isDisabled) {
+        return Promise.resolve();
+      }
+      return Promise.resolve(tableMeta.editing.saveChanges(table)).then(function (saved) {
+        if (!saved) {
+          return;
+        }
+        try {
+          const changeset = handleEditingCreate();
+          if (changeset) {
+            // change the row before reating because it triggers a save
+            // saving would trigger the validation flow and immediately make the row red
+            tableMeta.rowActive.setRowActiveIndex(-1);
+            requestAnimationFrame(function () {
+              try {
+                tableMeta.editing.toggleEditing(true, table);
+                return Promise.resolve(tableMeta.editing.createRow(changeset)).then(function (rowId) {
+                  tableMeta.editing.setLastFocusedCellIndex(0);
+                  try {
+                    const row = table.getRow(rowId);
+                    row.pin('bottom');
+                  } catch {
+                    //
+                  }
+                });
+              } catch (e) {
+                return Promise.reject(e);
+              }
+            });
+          }
+        } catch (error) {
+          console.error(error);
+        }
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  let tooltip;
+  if (isSaving) {
+    tooltip = texts.table3.editing.buttons.create.saving;
+  } else if (isDisabled) {
+    tooltip = texts.table3.editing.buttons.create.disabled;
+  }
+  return /*#__PURE__*/React__default.createElement("tr", {
+    "data-row-create": true,
+    className: "border-grey-300 group/row",
+    tabIndex: -1
+  }, /*#__PURE__*/React__default.createElement("td", {
+    className: "!bg-grey-50 col-span-full !border-b-0 !px-1"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    appearance: "transparent",
+    className: "group-hover:bg-grey-200 sticky left-[4px]",
+    disabled: isDisabled,
+    onClick: handleCreate,
+    ref: buttonRef,
+    tooltip: tooltip
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: "circle-plus"
+  }), texts.table3.editing.buttons.create.label)));
+}
+
+export { CreateNewRow };
+//# sourceMappingURL=CreateNewRow.js.map

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

@@ -0,0 +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 } from '../../../types';\nimport { TableRef } from '../../../../../primitives/Table/types';\n\ntype CreateNewRowProps<TType = unknown> = {\n    buttonRef: React.Ref<HTMLButtonElement>;\n    onEditingCreate?: Table3EditingCreateHandler<TType>;\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, 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 event => {\n        // prevent save being triggered by click outside - TODO: investigate why the button triggers clickoutside\n        event?.stopPropagation();\n\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        try {\n            const changeset = handleEditingCreate();\n\n            if (changeset) {\n                // change the row before reating because it triggers a save\n                // saving would trigger the validation flow and immediately make the row red\n                tableMeta.rowActive.setRowActiveIndex(-1);\n\n                requestAnimationFrame(async () => {\n                    tableMeta.editing.toggleEditing(true, table);\n                    const rowId = await tableMeta.editing.createRow(changeset);\n                    tableMeta.editing.setLastFocusedCellIndex(0);\n\n                    try {\n                        const row = table.getRow(rowId);\n                        row.pin('bottom');\n                    } catch {\n                        //\n                    }\n                });\n            }\n        } catch (error) {\n            console.error(error);\n        }\n    };\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    }\n\n    return (\n        <tr data-row-create className=\"border-grey-300 group/row\" 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                    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","table","tableMeta","texts","useLocalization","temporaryRows","editing","temporaryRowId","_temporaryRows$0$tabl","_temporaryRows$","rowIdentityAccessor","isDisabled","getState","globalFilter","_table$getState$colum","columnFilters","length","hasRowErrors","isSaving","getRowStatus","handleCreate","event","stopPropagation","Promise","resolve","saveChanges","then","saved","changeset","rowActive","setRowActiveIndex","requestAnimationFrame","toggleEditing","createRow","rowId","setLastFocusedCellIndex","row","getRow","pin","e","reject","error","console","tooltip","table3","buttons","create","saving","disabled","React","className","tabIndex","Button","appearance","onClick","ref","Icon","name","label"],"mappings":"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"}

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

@@ -5,7 +5,6 @@ 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,
@@ -15,18 +14,7 @@ function SaveStatus(props) {
     texts
   } = useLocalization();
   const tableMeta = table.options.meta;
-  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 status = tableMeta.editing.getRowStatus(rowId);
   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',
@@ -37,7 +25,7 @@ function SaveStatus(props) {
     className: "!contents"
   }, /*#__PURE__*/React__default.createElement("span", {
     className: className
-  }, status === 'pending' ? (/*#__PURE__*/React__default.createElement(Tooltip, {
+  }, status === 'saving' ? (/*#__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\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: NodeJS.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,OAAuB;IAE3B,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;;;;"}
+{"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;;;;"}

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

@@ -0,0 +1,93 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { isElementTriggeredFromContainer } from '../../../../../utils/dom.js';
+import { Row } from '../../../../../primitives/Table/Core/components/Row/Row.js';
+import { DiscardChangesConfirmationDialog } from '../../Editing/DiscardChangesConfirmationDialog.js';
+import { RENDERERS } from '../../../useTable3.js';
+
+function TemporaryRow(props) {
+  var _tableRef$current, _tableRef$current2;
+  const {
+    buttonRef,
+    rowIdentityAccessor,
+    table,
+    tableMeta,
+    tableRef
+  } = props;
+  const temporaryRows = tableMeta.editing.temporaryRows;
+  // discard new row
+  const [showDiscardDialog, setShowDiscardDialog] = React__default.useState(false);
+  function handleDiscard() {
+    if (temporaryRows[0]) {
+      var _buttonRef$current;
+      tableMeta.editing.discardChanges(temporaryRows[0][rowIdentityAccessor], table);
+      (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
+    }
+  }
+  const handleKeyDown = function (event) {
+    try {
+      const _temp2 = function () {
+        if (event.key === 'ArrowDown') {
+          event.preventDefault();
+          const _temp = function () {
+            if (!isElementTriggeredFromContainer(event.target, event.currentTarget)) {
+              return Promise.resolve(tableMeta.editing.saveChanges(table)).then(function (saved) {
+                if (saved) {
+                  var _buttonRef$current2;
+                  (_buttonRef$current2 = buttonRef.current) === null || _buttonRef$current2 === void 0 ? void 0 : _buttonRef$current2.focus();
+                }
+              });
+            }
+          }();
+          if (_temp && _temp.then) return _temp.then(function () {});
+        } else if (event.key === 'ArrowUp') {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      }();
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const handleKeyDownCapture = event => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      event.stopPropagation();
+      setShowDiscardDialog(true);
+    } else if (event.key === 'ArrowLeft' && tableMeta.editing.lastFocusedCellIndex === 0) {
+      event.preventDefault();
+      event.stopPropagation();
+    } else if (event.key === 'ArrowRight' && tableMeta.editing.lastFocusedCellIndex) {
+      if (tableMeta.editing.lastFocusedCellIndex === table.getVisibleFlatColumns().length - 1) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    }
+  };
+  const isScrolled = tableRef.current ? ((_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.scrollHeight) > ((_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : _tableRef$current2.clientHeight) : false;
+  const className = cn('group/row border-grey-300 !sticky z-[21]', {
+    'bottom-20': tableMeta.footer.isEnabled,
+    'bottom-10': !tableMeta.footer.isEnabled,
+    'border-b border-t-2 shadow-[0px_-5px_20px_0px_rgba(0,0,0,0.1)] border-t-grey-500/[0.5]': isScrolled
+  });
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, table.getBottomRows().map(row => (/*#__PURE__*/React__default.createElement(Row, {
+    key: row.id,
+    cellRenderer: RENDERERS.cell,
+    index: -1,
+    measureRow: () => null,
+    renderer: RENDERERS.row,
+    row: row,
+    table: table,
+    className: className,
+    onKeyDown: handleKeyDown,
+    onKeyDownCapture: handleKeyDownCapture
+  }))), /*#__PURE__*/React__default.createElement(DiscardChangesConfirmationDialog, {
+    open: showDiscardDialog,
+    onChange: setShowDiscardDialog,
+    onDiscard: handleDiscard
+  }));
+}
+
+export { TemporaryRow };
+//# sourceMappingURL=TemporaryRow.js.map

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

@@ -0,0 +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 { DiscardChangesConfirmationDialog } from '../../Editing/DiscardChangesConfirmationDialog';\nimport { TableRef } from '../../../../../primitives/Table/types';\n\ntype TemporaryRowProps<TType = unknown> = {\n    buttonRef: React.RefObject<HTMLButtonElement>;\n    rowIdentityAccessor: string;\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 { buttonRef, rowIdentityAccessor, table, tableMeta, tableRef } = props;\n    const temporaryRows = tableMeta.editing.temporaryRows as TType[];\n\n    // discard new row\n    const [showDiscardDialog, setShowDiscardDialog] = React.useState(false);\n\n    function handleDiscard() {\n        if (temporaryRows[0]) {\n            tableMeta.editing.discardChanges(temporaryRows[0][rowIdentityAccessor], table);\n            buttonRef.current?.focus();\n        }\n    }\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                    buttonRef.current?.focus();\n                }\n            }\n        } else if (event.key === 'ArrowUp') {\n            event.preventDefault();\n            event.stopPropagation();\n        }\n    };\n\n    const handleKeyDownCapture = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n        if (event.key === 'Escape') {\n            event.preventDefault();\n            event.stopPropagation();\n            setShowDiscardDialog(true);\n        } else 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    const className = clsx('group/row border-grey-300 !sticky z-[21]', {\n        'bottom-20': tableMeta.footer.isEnabled,\n        'bottom-10': !tableMeta.footer.isEnabled,\n        'border-b border-t-2 shadow-[0px_-5px_20px_0px_rgba(0,0,0,0.1)] border-t-grey-500/[0.5]': isScrolled,\n    });\n    return (\n        <>\n            {table.getBottomRows().map(row => (\n                <Row<TType>\n                    key={row.id}\n                    cellRenderer={RENDERERS.cell}\n                    index={-1}\n                    measureRow={() => null}\n                    renderer={RENDERERS.row}\n                    row={row}\n                    table={table}\n                    className={className}\n                    onKeyDown={handleKeyDown}\n                    onKeyDownCapture={handleKeyDownCapture}\n                />\n            ))}\n            <DiscardChangesConfirmationDialog\n                open={showDiscardDialog}\n                onChange={setShowDiscardDialog}\n                onDiscard={handleDiscard}\n            />\n        </>\n    );\n}\n"],"names":["TemporaryRow","props","buttonRef","rowIdentityAccessor","table","tableMeta","tableRef","temporaryRows","editing","showDiscardDialog","setShowDiscardDialog","React","useState","handleDiscard","_buttonRef$current","discardChanges","current","focus","handleKeyDown","event","key","preventDefault","_temp","isElementTriggeredFromContainer","target","currentTarget","Promise","resolve","saveChanges","then","saved","_buttonRef$current2","stopPropagation","_temp2","e","reject","handleKeyDownCapture","lastFocusedCellIndex","getVisibleFlatColumns","length","isScrolled","_tableRef$current","scrollHeight","_tableRef$current2","clientHeight","className","clsx","footer","isEnabled","getBottomRows","map","row","Row","id","cellRenderer","RENDERERS","cell","index","measureRow","renderer","onKeyDown","onKeyDownCapture","DiscardChangesConfirmationDialog","open","onChange","onDiscard"],"mappings":"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"}

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

@@ -15,10 +15,7 @@ function Row(props) {
   const isActiveRow = tableMeta.rowActive.rowActiveIndex === index;
   React__default.useEffect(() => {
     if (tableMeta.editing.isEditing && isActiveRow && tableMeta.editing.lastFocusedCellIndex === undefined) {
-      const element = focusManager.focusFirst();
-      if (element) {
-        setDataFocusAttribute(element);
-      }
+      setDataFocusAttribute(focusManager.focusFirst());
     }
   }, [tableMeta.editing.isEditing, tableMeta.rowActive.rowActiveIndex, tableMeta.editing.lastFocusedCellIndex]);
   const handleFocus = React__default.useCallback(event => {
@@ -30,12 +27,13 @@ function Row(props) {
       }
     }
   }, [tableMeta.editing.isEditing, isActiveRow]);
+  const rowStatus = tableMeta.editing.getRowStatus(row.id);
   const attributes = {
-    '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,
+    'data-row-editing-invalid': tableMeta.editing.hasRowErrors(row.id) ? !tableMeta.editing.hasRowErrorsShownInAlert(row.id) ? 'unseen' : true : undefined,
+    'data-row-editing-status': rowStatus,
     onFocus: handleFocus
   };
-  return /*#__PURE__*/React__default.createElement(DisplayRow, Object.assign({}, props, attributes), tableMeta.editing.getRowSaveStatus(row.id) ? /*#__PURE__*/React__default.createElement(SaveStatus, {
+  return /*#__PURE__*/React__default.createElement(DisplayRow, Object.assign({}, props, attributes), rowStatus === 'saving' || rowStatus === 'saved' ? /*#__PURE__*/React__default.createElement(SaveStatus, {
     rowId: row.id,
     table: table
   }) : null);

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 { 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            const element = focusManager.focusFirst();\n            if (element) {\n                setDataFocusAttribute(element);\n            }\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","element","focusFirst","setDataFocusAttribute","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;MACpG,MAAMC,OAAO,GAAGd,YAAY,CAACe,UAAU,EAAE;MACzC,IAAID,OAAO,EAAE;QACTE,qBAAqB,CAACF,OAAO,CAAC;;;GAGzC,EAAE,CAACZ,SAAS,CAACQ,OAAO,CAACC,SAAS,EAAET,SAAS,CAACI,SAAS,CAACC,cAAc,EAAEL,SAAS,CAACQ,OAAO,CAACE,oBAAoB,CAAC,CAAC;EAE7G,MAAMK,WAAW,GAAGT,cAAK,CAACU,WAAW,CAChCC,KAA4C;IACzC,IAAIjB,SAAS,CAACQ,OAAO,CAACC,SAAS,EAAE;MAAA,IAAAS,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,GAAIP,SAAS,CAAC;MAElG,IAAI,CAACc,KAAK,CAACL,SAAS,CAAC,EAAE;QACnBpB,SAAS,CAACQ,OAAO,CAACkB,uBAAuB,CAACL,MAAM,CAACD,SAAS,CAAC,CAAC;;;GAGvE,EACD,CAACpB,SAAS,CAACQ,OAAO,CAACC,SAAS,EAAEN,WAAW,CAAC,CAC7C;EAED,MAAMwB,UAAU,GAAG;IACf,0BAA0B,EACtB3B,SAAS,CAACQ,OAAO,CAACoB,SAAS,IAAI5B,SAAS,CAACQ,OAAO,CAACqB,YAAY,CAAClC,GAAG,CAACmC,EAAE,CAAC,GAC/D,CAAC9B,SAAS,CAACQ,OAAO,CAACuB,gBAAgB,CAACpC,GAAG,CAACmC,EAAE,CAAC,GACvC,QAAQ,GACR,IAAI,GACRnB,SAAS;IACnB,yBAAyB,EACrBX,SAAS,CAACQ,OAAO,CAACoB,SAAS,IAAI5B,SAAS,CAACQ,OAAO,CAACwB,gBAAgB,CAACrC,GAAG,CAACmC,EAAE,CAAC,GACnE9B,SAAS,CAACQ,OAAO,CAACwB,gBAAgB,CAACrC,GAAG,CAACmC,EAAE,CAAC,GAC1CnB,SAAS;IACnBsB,OAAO,EAAElB;GACZ;EAED,oBACIT,6BAAC4B,UAAU,oBAAYxC,KAAK,EAAMiC,UAAU,GACvC3B,SAAS,CAACQ,OAAO,CAACwB,gBAAgB,CAACrC,GAAG,CAACmC,EAAE,CAAC,gBAAGxB,6BAAC6B,UAAU;IAACC,KAAK,EAAEzC,GAAG,CAACmC,EAAE;IAAEjC,KAAK,EAAEA;IAAS,GAAG,IAAI,CACvF;AAErB;;;;"}
+{"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 rowStatus = tableMeta.editing.getRowStatus(row.id);\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    };\n\n    return (\n        <DisplayRow<TType> {...props} {...attributes}>\n            {rowStatus === 'saving' || rowStatus === 'saved' ? <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","rowStatus","getRowStatus","id","attributes","hasRowErrors","hasRowErrorsShownInAlert","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,SAAS,GAAG1B,SAAS,CAACQ,OAAO,CAACmB,YAAY,CAAChC,GAAG,CAACiC,EAAE,CAAC;EAExD,MAAMC,UAAU,GAAG;IACf,0BAA0B,EAAE7B,SAAS,CAACQ,OAAO,CAACsB,YAAY,CAACnC,GAAG,CAACiC,EAAE,CAAC,GAC5D,CAAC5B,SAAS,CAACQ,OAAO,CAACuB,wBAAwB,CAACpC,GAAG,CAACiC,EAAE,CAAC,GAC/C,QAAQ,GACR,IAAI,GACRjB,SAAS;IACf,yBAAyB,EAAEe,SAAS;IACpCM,OAAO,EAAElB;GACZ;EAED,oBACIR,6BAAC2B,UAAU,oBAAYvC,KAAK,EAAMmC,UAAU,GACvCH,SAAS,KAAK,QAAQ,IAAIA,SAAS,KAAK,OAAO,gBAAGpB,6BAAC4B,UAAU;IAACC,KAAK,EAAExC,GAAG,CAACiC,EAAE;IAAE/B,KAAK,EAAEA;IAAS,GAAG,IAAI,CAC5F;AAErB;;;;"}

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

@@ -30,15 +30,20 @@ function Editing(props) {
     (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.click();
   });
   const handleChange = enabled => {
-    tableMeta.editing.toggleEditing(enabled);
+    if (enabled && tableMeta.rowActive.rowActiveIndex === undefined) {
+      tableMeta.rowActive.setRowActiveIndex(0);
+    }
     requestAnimationFrame(() => {
       var _tableMeta$rowActive$;
-      return scrollToIndex((_tableMeta$rowActive$ = tableMeta.rowActive.rowActiveIndex) !== null && _tableMeta$rowActive$ !== void 0 ? _tableMeta$rowActive$ : 0);
+      // 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 /*#__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        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;;;;"}
+{"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;;;;"}