@economic/taco 2.61.4 → 2.62.1

package/dist/taco.d.ts

@@ -3062,8 +3062,12 @@ export declare type Table3Props<TType = unknown> = Table3WithoutEditingWithClien
 
 export declare type Table3Ref = TableRef & {
     instance: {
-        toggleEditing: (enabled: boolean | undefined) => void;
-        createRow?: (row: unknown) => Promise<void>;
+        editing?: {
+            toggleEditing: (enabled: boolean | undefined) => void;
+            createRow?: (row: unknown) => Promise<void>;
+            save: (rowId: string) => Promise<boolean>;
+            removeRowChanges: (rowId: string) => Promise<void>;
+        };
     };
 };
 
@@ -3408,8 +3412,11 @@ export declare type TableRef = HTMLTableElement & {
 export declare type TableRowActionGroupRenderer<TType = unknown> = (rows: TType[]) => JSX.Element | null;
 
 export declare type TableRowActionRenderer<TType = unknown> = (row: TType, helpers: {
-    cleanup: (rowId: string) => void;
-    isEditing: boolean;
+    editing?: {
+        isEditing: boolean;
+        removeRowChanges: () => Promise<void>;
+        save: () => Promise<boolean>;
+    };
 }) => JSX.Element | null;
 
 export declare type TableRowClickHandler<TType = unknown> = (row: TType) => void;

package/dist/taco.js

@@ -13468,6 +13468,11 @@ function isBefore(date2, dateToCompare) {
   const _dateToCompare = toDate(dateToCompare);
   return +_date < +_dateToCompare;
 }
+function isEqual$2(leftDate, rightDate) {
+  const _dateLeft = toDate(leftDate);
+  const _dateRight = toDate(rightDate);
+  return +_dateLeft === +_dateRight;
+}
 function transpose(fromDate, constructor) {
   const date2 = constructor instanceof Date ? constructFrom(constructor, 0) : new constructor(0);
   date2.setFullYear(
@@ -35065,27 +35070,27 @@ function isMatched(query, cellValue, rowValue, dataType, dataTypeOptions, locali
   if (typeof cellValue === "object") {
     return flattenCellValue(cellValue).flat(Infinity).find((y2) => matcher(y2, query));
   } else {
-    const cellValueAsString = String(cellValue ?? "");
-    if (cellValueAsString !== void 0 && matcher(cellValueAsString, query)) {
-      return true;
+    const dataTypeProperties = getDataTypeProperties(dataType);
+    if (dataTypeProperties.getDisplayValue) {
+      const cellDisplayValue = dataTypeProperties.getDisplayValue(cellValue, rowValue, {
+        dataTypeOptions,
+        localization
+      });
+      if (Array.isArray(cellDisplayValue)) {
+        return cellDisplayValue.some((cdv) => matcher(cdv, query));
+      } else if (cellDisplayValue !== void 0 && isWeakContains(cellDisplayValue, query)) {
+        return true;
+      }
     } else {
-      const dataTypeProperties = getDataTypeProperties(dataType);
-      if (dataTypeProperties.getDisplayValue) {
-        const cellDisplayValue = dataTypeProperties.getDisplayValue(cellValue, rowValue, {
-          dataTypeOptions,
-          localization
-        });
-        if (Array.isArray(cellDisplayValue)) {
-          return cellDisplayValue.some((cdv) => matcher(cdv, query));
-        } else if (cellDisplayValue !== void 0 && isWeakContains(cellDisplayValue, query)) {
-          return true;
-        }
+      const cellValueAsString = String(cellValue ?? "");
+      if (cellValueAsString !== void 0 && matcher(cellValueAsString, query)) {
+        return true;
       }
-      if (typeof query !== typeof cellValue && dataTypeProperties.parse) {
-        const parsedQuery = dataTypeProperties.parse(query, localization.locale);
-        if (parsedQuery !== void 0 && matcher(cellValue, parsedQuery)) {
-          return true;
-        }
+    }
+    if (typeof query !== typeof cellValue && dataTypeProperties.parse) {
+      const parsedQuery = dataTypeProperties.parse(query, localization.locale);
+      if (parsedQuery !== void 0 && matcher(cellValue, parsedQuery)) {
+        return true;
       }
     }
   }
@@ -35851,17 +35856,8 @@ function useTablePrintingSettings(tableId) {
 }
 const DEFAULT_ROW_ACTIONS_LENGTH = 4;
 function useTableRowActions(isEnabled = false, rowActions, rowActionsLength = DEFAULT_ROW_ACTIONS_LENGTH) {
-  const [handlers, setHandlers] = React__default.useState({});
-  const registerHandler = (key, handler) => {
-    return setHandlers((h2) => ({
-      ...h2,
-      [key]: handler
-    }));
-  };
   return {
-    handlers,
     isEnabled,
-    registerHandler,
     rowActions: isEnabled ? rowActions : void 0,
     rowActionsLength: rowActions ? Math.min(rowActions.length, rowActionsLength) : 0
   };
@@ -37778,7 +37774,7 @@ function getScrollPaddingEndOffset(table) {
 }
 function getPaddingEndOffset(table, options) {
   const bottomRows = table.getBottomRows() ?? [];
-  return ROW_HEIGHT_ESTIMATES.medium * ((options == null ? void 0 : options.virtualiserPaddingEndOffset) ?? 1) * bottomRows.length;
+  return ROW_HEIGHT_ESTIMATES.medium * 1 * bottomRows.length + ((options == null ? void 0 : options.virtualiserPaddingEndOffset) ?? 0);
 }
 const OVERSCAN_ROW_COUNT = 8;
 function useTableRenderer(renderers, table, tableRef, length, defaultRowActiveIndex, options) {
@@ -37938,17 +37934,21 @@ function Actions(props) {
   const { actions, actionsLength, data, isActiveRow, rowId, table } = props;
   const { texts } = useLocalization();
   const tableMeta = table.options.meta;
-  const visibleActions = actions.map(
-    (action) => {
-      var _a2;
-      return action(data, {
-        cleanup: tableMeta.rowActions.handlers["cleanup"] ?? (() => void 0),
-        isEditing: ((_a2 = tableMeta.editing) == null ? void 0 : _a2.isEditing) ?? false,
-        rowId,
-        table
-      });
+  const visibleActions = actions.map((action) => {
+    var _a2, _b;
+    const helpers = {
+      rowId,
+      table
+    };
+    if ((_a2 = tableMeta.editing) == null ? void 0 : _a2.isEnabled) {
+      helpers.editing = {
+        isEditing: ((_b = tableMeta.editing) == null ? void 0 : _b.isEditing) ?? false,
+        removeRowChanges: () => tableMeta.editing.discardChanges(rowId, table),
+        save: () => tableMeta.editing.saveChanges(table, rowId)
+      };
     }
-  ).filter((action) => !!action);
+    return action(data, helpers);
+  }).filter((action) => !!action);
   let length = actionsLength;
   if ((_a = tableMeta.editing) == null ? void 0 : _a.isEditing) {
     const lengthWithoutEditingItems = visibleActions.length - 1;
@@ -44178,7 +44178,14 @@ const Placeholder = ({ disabled, readOnly, ...props }) => {
   if (readOnly) {
     return null;
   }
-  return /* @__PURE__ */ React__default.createElement("div", { ...props, className: clsx({ "text-grey-500": disabled, "text-grey-700": !disabled }) });
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      ...props,
+      className: clsx({ "text-grey-500": disabled, "text-grey-700": !disabled }),
+      "data-taco": "select2-placeholder"
+    }
+  );
 };
 const Trigger = React__default.forwardRef(function Select2Trigger(props, ref) {
   const { multiple, value } = useSelect2Context();
@@ -44279,7 +44286,7 @@ const Single = React__default.forwardRef(function Select2TriggerSingle(props, re
       output = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, currentValue.props.prefix ? typeof currentValue.props.prefix === "string" ? /* @__PURE__ */ React__default.createElement(Icon$1, { name: currentValue.props.prefix, className: "mr-1 !h-5 !w-5" }) : currentValue.props.prefix : null, currentValue.props.children);
     }
   }
-  return /* @__PURE__ */ React__default.createElement(Button$1, { ...buttonProps, ref }, /* @__PURE__ */ React__default.createElement("div", { className: contentClassName }, output));
+  return /* @__PURE__ */ React__default.createElement(Button$1, { ...buttonProps, ref }, /* @__PURE__ */ React__default.createElement("div", { className: contentClassName, "data-taco": placeholder ? void 0 : "select2-value" }, output));
 });
 const Multiple = React__default.forwardRef(function Select2TriggerMultiple(props, ref) {
   var _a;
@@ -44295,8 +44302,9 @@ const Multiple = React__default.forwardRef(function Select2TriggerMultiple(props
   let content;
   let { className } = buttonProps;
   if (open) {
+    const hasValues = valuesAsChildren.length > 0;
     className = clsx("!absolute z-20 !h-fit", buttonProps.className);
-    content = /* @__PURE__ */ React__default.createElement(ScrollArea, { className: "my-1 flex max-h-[5.5rem] flex-col", onClick: forwardClick }, /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-wrap gap-1" }, valuesAsChildren.length === 0 ? /* @__PURE__ */ React__default.createElement(Placeholder, { disabled, readOnly }, placeholder) : valuesAsChildren.map(
+    content = /* @__PURE__ */ React__default.createElement(ScrollArea, { className: "my-1 flex max-h-[5.5rem] flex-col", onClick: forwardClick }, /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-wrap gap-1" }, !hasValues ? /* @__PURE__ */ React__default.createElement(Placeholder, { disabled, readOnly }, placeholder) : valuesAsChildren.map(
       (child) => typeof child.props.children === "string" ? /* @__PURE__ */ React__default.createElement(
         Tag,
         {
@@ -44320,7 +44328,7 @@ const Multiple = React__default.forwardRef(function Select2TriggerMultiple(props
         {
           key: String(child.props.value),
           className: "!pr-0 !pl-1.5",
-          children: /* @__PURE__ */ React__default.createElement("span", { className: "flex items-center" }, child.props.children.props.children, /* @__PURE__ */ React__default.createElement(
+          children: /* @__PURE__ */ React__default.createElement("span", { className: "flex items-center", "data-taco": "select2-value" }, child.props.children.props.children, /* @__PURE__ */ React__default.createElement(
             Icon$1,
             {
               name: "close",
@@ -45322,17 +45330,6 @@ function Control(props) {
     return /* @__PURE__ */ React__default.createElement(Switch$1, { ...attributes, className: "m-1.5", checked: Boolean(value), onChange });
   } else if (controlRenderer === "checkbox") {
     return /* @__PURE__ */ React__default.createElement(Checkbox$2, { ...attributes, className: "!m-1.5", checked: Boolean(value), onChange });
-  } else if ((controlRenderer === "input" || controlRenderer === void 0) && dataType === "number") {
-    return /* @__PURE__ */ React__default.createElement(
-      Input,
-      {
-        ...attributes,
-        className: "flex-grow",
-        type: "number",
-        onChange: (event) => onChange(event.target.valueAsNumber),
-        value: String(value ?? "")
-      }
-    );
   }
   return /* @__PURE__ */ React__default.createElement(
     Input,
@@ -53889,9 +53886,10 @@ function isTableScrolled(ref) {
   var _a, _b, _c, _d;
   if (ref.current) {
     const height = parseFloat(((_b = (_a = ref.current) == null ? void 0 : _a.querySelector("tbody")) == null ? void 0 : _b.style.height) || "0") + parseFloat(((_d = (_c = ref.current) == null ? void 0 : _c.querySelector("tbody")) == null ? void 0 : _d.style.paddingBottom) || "0");
-    return height > ref.current.scrollHeight;
+    const hasVerticalScrollbar = ref.current.scrollHeight > ref.current.clientHeight;
+    return [hasVerticalScrollbar, height > ref.current.scrollHeight];
   }
-  return false;
+  return [false, false];
 }
 function useTableEditingListener(table, tableRef, scrollToIndex) {
   const tableMeta = table.options.meta;
@@ -53937,13 +53935,6 @@ function useTableEditingListener(table, tableRef, scrollToIndex) {
     document.addEventListener("click", onClickOutside);
     return () => document.removeEventListener("click", onClickOutside);
   }, [tableMeta.editing.isEditing, tableMeta.editing.saveChanges]);
-  React__default.useEffect(() => {
-    if (tableMeta.editing.isEnabled) {
-      tableMeta.rowActions.registerHandler("cleanup", (rowId) => {
-        tableMeta.editing.discardChanges(rowId, table);
-      });
-    }
-  }, []);
   useGlobalKeyDown(tableMeta.editing.isEnabled ? shortcut : void 0, (event) => {
     event.preventDefault();
     tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing, table, scrollToIndex);
@@ -55042,7 +55033,8 @@ function reducer(state, action) {
         changes: {
           ...state.changes,
           rows: setWith(state.changes.rows, `${rowId}.${columnId}`, value, Object),
-          originals: setWith(state.changes.originals, rowId, row, Object)
+          originals: setWith(state.changes.originals, rowId, row, Object),
+          dirty: setWith(state.changes.dirty, rowId, true, Object)
         },
         indexes: setWith(state.indexes, rowId, index2, Object)
       };
@@ -55099,7 +55091,8 @@ function reducer(state, action) {
           errors: omit$1(state.changes.errors, rowId),
           moveReasons: omit$1(state.changes.moveReasons, rowId),
           originals: omit$1(state.changes.originals, rowId),
-          status: omit$1(state.changes.status, rowId)
+          status: omit$1(state.changes.status, rowId),
+          dirty: omit$1(state.changes.dirty, rowId)
         },
         indexes: omit$1(state.indexes, rowId),
         temporaryRows: state.temporaryRows.filter((row) => row[rowIdentityAccessor] !== rowId)
@@ -55166,7 +55159,7 @@ function reducer(state, action) {
 function usePendingChangesState(handleSave, handleChange, handleDiscard, rowIdentityAccessor, validator) {
   const localization = useLocalization();
   const [state, dispatch] = React__default.useReducer(reducer, {
-    changes: { rows: {}, errors: {}, moveReasons: {}, originals: {}, status: {} },
+    changes: { rows: {}, errors: {}, moveReasons: {}, originals: {}, status: {}, dirty: {} },
     indexes: {},
     temporaryRows: []
   });
@@ -55255,7 +55248,9 @@ function usePendingChangesState(handleSave, handleChange, handleDiscard, rowIden
   }
   async function onCellChanged(cell, rowIndex, nextValue, shouldRunUpdaters = true) {
     var _a;
-    const changes = nextValue !== void 0 ? { ...state.changes.rows[cell.row.id], [cell.column.id]: nextValue } : { ...state.changes.rows[cell.row.id] };
+    const tableMeta = cell.getContext().table.options.meta;
+    const state2 = tableMeta.editing.getState();
+    const changes = nextValue !== void 0 ? { ...state2.changes.rows[cell.row.id], [cell.column.id]: nextValue } : { ...state2.changes.rows[cell.row.id] };
     const original = cell.row.original;
     if (!Object.keys(changes).length) {
       return;
@@ -55278,8 +55273,8 @@ function usePendingChangesState(handleSave, handleChange, handleDiscard, rowIden
       ) ?? {};
     }
     const nextChanges = { ...changes, ...updatesForOtherCells };
-    const nextMoveReasons = { ...state.changes.moveReasons[cell.row.id] };
-    const nextCellErrors = { ...(_a = state.changes.errors[cell.row.id]) == null ? void 0 : _a.cells };
+    const nextMoveReasons = { ...state2.changes.moveReasons[cell.row.id] };
+    const nextCellErrors = { ...(_a = state2.changes.errors[cell.row.id]) == null ? void 0 : _a.cells };
     let validationErrors = {};
     if (validator && Object.keys(nextChanges).length && original) {
       const nextRowValue = { ...original, ...changes, ...updatesForOtherCells };
@@ -55316,8 +55311,11 @@ function usePendingChangesState(handleSave, handleChange, handleDiscard, rowIden
       }
     });
   }
+  function getErrors() {
+    return Object.keys(state.changes.errors);
+  }
   function getErrorsShownInAlert() {
-    const rowsWithErrors = Object.keys(state.changes.errors);
+    const rowsWithErrors = getErrors();
     if (!rowsWithErrors.length) {
       return [];
     }
@@ -55345,6 +55343,10 @@ function usePendingChangesState(handleSave, handleChange, handleDiscard, rowIden
     const changes = rowId ? { [rowId]: state2.changes.rows[rowId] } : state2.changes.rows;
     let completed = true;
     for (const rowId2 of Object.keys(changes)) {
+      if (!state2.changes.dirty[rowId2]) {
+        discardChanges(rowId2, table);
+        continue;
+      }
       const status = getRowStatus(rowId2);
       try {
         const rowChanges = JSON.parse(JSON.stringify(changes[rowId2] ?? {}));
@@ -55441,6 +55443,7 @@ function usePendingChangesState(handleSave, handleChange, handleDiscard, rowIden
     getCellError,
     onCellChanged,
     // general
+    getErrors,
     getErrorsShownInAlert,
     hasChanges,
     saveChanges,
@@ -55451,7 +55454,7 @@ function usePendingChangesState(handleSave, handleChange, handleDiscard, rowIden
     temporaryRows: state.temporaryRows
   };
 }
-function useTableEditing(isEnabled = false, handleSave, handleChange, handleCreate, handleDiscard, rowIdentityAccessor, validator) {
+function useTableEditing(isEnabled = false, handleSave, handleChange, handleCreate, handleDiscard, rowIdentityAccessor, validator, onEvent) {
   const [isEditing, setEditing] = React__default.useState(false);
   const [isDetailedMode, toggleDetailedMode] = React__default.useState(false);
   const createRowButtonRef = React__default.useRef(null);
@@ -55463,8 +55466,13 @@ function useTableEditing(isEnabled = false, handleSave, handleChange, handleCrea
     rowIdentityAccessor,
     validator
   );
+  useLazyEffect(() => {
+    if (onEvent) {
+      onEvent("editing-mode", { enabled: isEditing });
+    }
+  }, [isEditing]);
   function toggleEditing(enabled, table, scrollToIndex) {
-    var _a, _b;
+    var _a;
     const tableMeta = table.options.meta;
     if (enabled) {
       const index2 = tableMeta.rowActive.rowActiveIndex ?? 0;
@@ -55480,7 +55488,6 @@ function useTableEditing(isEnabled = false, handleSave, handleChange, handleCrea
     }
     setEditing(enabled);
     pendingChangesFns.saveChanges(table);
-    (_b = tableMeta.onEvent) == null ? void 0 : _b.call(tableMeta, "editing-mode", { enabled });
   }
   async function createRow2(table, row) {
     if (!handleCreate) {
@@ -55498,18 +55505,18 @@ function useTableEditing(isEnabled = false, handleSave, handleChange, handleCrea
       if (changeset) {
         const temporaryRows = tableMeta.editing.temporaryRows;
         const nextRowIndex = temporaryRows.length ? tableMeta.length + 1 : tableMeta.length;
-        const newRowId = pendingChangesFns.insertTemporaryRow(changeset, nextRowIndex);
-        table.setRowPinning((currentState) => {
-          var _a;
-          return {
-            ...currentState,
-            bottom: (_a = currentState.bottom ?? []) == null ? void 0 : _a.concat(newRowId)
-          };
-        });
-        toggleDetailedMode(false);
-        setLastFocusedCellIndex(void 0);
+        tableMeta.rowActive.setRowActiveIndex(nextRowIndex);
         requestAnimationFrame(() => {
-          tableMeta.rowActive.setRowActiveIndex(nextRowIndex);
+          const newRowId = pendingChangesFns.insertTemporaryRow(changeset, nextRowIndex);
+          table.setRowPinning((currentState) => {
+            var _a;
+            return {
+              ...currentState,
+              bottom: (_a = currentState.bottom ?? []) == null ? void 0 : _a.concat(newRowId)
+            };
+          });
+          toggleDetailedMode(false);
+          setLastFocusedCellIndex(void 0);
           table.resetRowSelection();
           if (!tableMeta.editing.isEditing) {
             setEditing(true);
@@ -55736,14 +55743,26 @@ function EditingControlCell(props) {
   }, [cellRef.current]);
   const handleChange = React__default.useCallback(
     (nextValue) => {
-      if (nextValue !== value) {
+      let hasChanged = false;
+      if (columnMeta.dataType === "date") {
+        hasChanged = !isSameDay(new Date(nextValue), new Date(value));
+      } else if (columnMeta.dataType === "datetime") {
+        hasChanged = !isEqual$2(new Date(nextValue), new Date(value));
+      } else if (columnMeta.dataType === "time") {
+        const next = new Date(nextValue);
+        const current = new Date(value);
+        hasChanged = !(next.getHours() === current.getHours() && next.getMinutes() === current.getMinutes());
+      } else {
+        hasChanged = nextValue !== value;
+      }
+      if (hasChanged) {
         tableMeta.editing.setCellValue(cell, rowIndex, nextValue);
         if (hasNonTextControl) {
           requestAnimationFrame(() => tableMeta.editing.onCellChanged(cell, rowIndex, nextValue));
         }
       }
     },
-    [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex, value]
+    [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex, value, columnMeta.dataType]
   );
   const handleBlur = React__default.useCallback(
     (event) => {
@@ -56015,7 +56034,7 @@ function DiscardChangesConfirmationDialog(props) {
       event.stopPropagation();
     }
   };
-  return /* @__PURE__ */ React__default.createElement(Dialog, { ...dialogProps }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(Dialog, { ...dialogProps, showCloseButton: false }, /* @__PURE__ */ React__default.createElement(
     Dialog.Content,
     {
       "aria-label": texts.table3.editing.clearChangesConfirmationDialog.title,
@@ -56024,7 +56043,15 @@ function DiscardChangesConfirmationDialog(props) {
     },
     /* @__PURE__ */ React__default.createElement(Dialog.Title, null, texts.table3.editing.clearChangesConfirmationDialog.title),
     /* @__PURE__ */ React__default.createElement("p", null, texts.table3.editing.clearChangesConfirmationDialog.description),
-    /* @__PURE__ */ React__default.createElement(Dialog.Footer, null, /* @__PURE__ */ React__default.createElement(Group$6, null, /* @__PURE__ */ React__default.createElement(Dialog.Close, null, /* @__PURE__ */ React__default.createElement(Button$4, { tabIndex: 0 }, texts.table3.editing.clearChangesConfirmationDialog.cancel)), /* @__PURE__ */ React__default.createElement(Dialog.Close, null, /* @__PURE__ */ React__default.createElement(Button$4, { tabIndex: 0, appearance: "primary", onClick: handleDiscard }, texts.table3.editing.clearChangesConfirmationDialog.confirm))))
+    /* @__PURE__ */ React__default.createElement($9bf71ea28793e738$export$20e40289641fbbb6, { contain: true, restoreFocus: true }, /* @__PURE__ */ React__default.createElement(Dialog.Footer, null, /* @__PURE__ */ React__default.createElement(Group$6, null, /* @__PURE__ */ React__default.createElement(Dialog.Close, null, /* @__PURE__ */ React__default.createElement(Button$4, { tabIndex: 0 }, texts.table3.editing.clearChangesConfirmationDialog.cancel)), /* @__PURE__ */ React__default.createElement(Dialog.Close, null, /* @__PURE__ */ React__default.createElement(Button$4, { tabIndex: 0, appearance: "primary", onClick: handleDiscard }, texts.table3.editing.clearChangesConfirmationDialog.confirm)))), /* @__PURE__ */ React__default.createElement($5d3850c4d0b4e6c7$export$f39c2d165cd861fe, { asChild: true }, /* @__PURE__ */ React__default.createElement(
+      IconButton,
+      {
+        appearance: "discrete",
+        "aria-label": texts.dialog.close,
+        className: "absolute right-0 top-0 mr-2 mt-2 print:hidden",
+        icon: "close"
+      }
+    )))
   ));
 }
 function Row(props) {
@@ -56072,7 +56099,7 @@ function Row(props) {
     if (event.isDefaultPrevented() || event.isPropagationStopped()) {
       return;
     }
-    if (event.key === "Escape" && tableMeta.editing.hasChanges(row.id) && !isElementTriggeredFromContainer(event.target, event.currentTarget)) {
+    if (event.key === "Escape" && tableMeta.editing.hasChanges(row.id) && !isElementInsideOverlay(event.target)) {
       event.preventDefault();
       setShowDiscardDialog(true);
     }
@@ -56105,7 +56132,8 @@ function useTable3(props, ref) {
     props.onEditingCreate,
     props.onEditingDiscard,
     props.rowIdentityAccessor,
-    props.validator
+    props.validator,
+    props.onEvent
   );
   const data = React__default.useMemo(() => {
     if (editing.temporaryRows.length) {
@@ -56157,18 +56185,33 @@ function useTable3(props, ref) {
   };
   const meta = { editing };
   const options = {
-    virtualiserPaddingEndOffset: props.enableEditing && props.onEditingCreate ? editing.hasTemporaryRowErrors() ? 1.4 : 1 : 0
+    virtualiserPaddingEndOffset: 0
   };
+  if (props.enableEditing) {
+    const validationErrorLabelHeight = 17;
+    options.virtualiserPaddingEndOffset = editing.getErrors().length * validationErrorLabelHeight;
+  }
   const table = useTable$1(extendedProps, ref, RENDERERS, meta, options);
   useTableEditingListener(table.instance, table.ref, table.renderer.scrollToIndex);
   React__default.useEffect(() => {
     if (table.ref.current) {
-      table.ref.current.instance.toggleEditing = (enabled) => table.meta.editing.toggleEditing(enabled ?? ((editing2) => !editing2), table.instance, table.renderer.scrollToIndex);
-      if (props.onEditingCreate) {
-        table.ref.current.instance.createRow = (row) => table.meta.editing.createRow(table.instance, row);
+      const instance = table.ref.current.instance;
+      if (table.meta.editing.isEnabled) {
+        instance.editing = {
+          toggleEditing: (enabled) => table.meta.editing.toggleEditing(
+            enabled ?? ((editing2) => !editing2),
+            table.instance,
+            table.renderer.scrollToIndex
+          ),
+          removeRowChanges: (rowId) => table.meta.editing.discardChanges(rowId, table.instance),
+          save: (rowId) => table.meta.editing.saveChanges(table.instance, rowId)
+        };
+        if (props.onEditingCreate) {
+          instance.editing.createRow = (row) => table.meta.editing.createRow(table.instance, row);
+        }
       }
     }
-  }, [table.ref.current]);
+  }, [table.ref.current, table.meta.editing.isEnabled]);
   return table;
 }
 function Alert(props) {
@@ -56278,7 +56321,7 @@ function Editing(props) {
 }
 function CreateNewRow(props) {
   var _a, _b;
-  const { buttonRef, isScrolled, table, tableMeta } = props;
+  const { buttonRef, hasScrollbar, table, tableMeta } = props;
   const { texts } = useLocalization();
   const temporaryRows = tableMeta.editing.temporaryRows;
   const temporaryRowId = ((_a = temporaryRows[0]) == null ? void 0 : _a[tableMeta.rowIdentityAccessor]) ?? "";
@@ -56301,7 +56344,8 @@ function CreateNewRow(props) {
   }
   const className = clsx("group/row !sticky z-[21]", {
     "bottom-10": tableMeta.footer.isEnabled,
-    "bottom-0": !tableMeta.footer.isEnabled
+    "bottom-0": !tableMeta.footer.isEnabled,
+    "border-b !border-t-[0]": !hasScrollbar
   });
   return /* @__PURE__ */ React__default.createElement("tr", { "data-row-create": true, className, tabIndex: -1 }, /* @__PURE__ */ React__default.createElement("td", { className: "!bg-grey-50 col-span-full !px-1" }, /* @__PURE__ */ React__default.createElement(
     Button$4,
@@ -56322,9 +56366,8 @@ function TemporaryRows(props) {
   return props.table.getBottomRows().map((row) => /* @__PURE__ */ React__default.createElement(TemporaryRow, { key: row.id, row, ...props }));
 }
 function TemporaryRow(props) {
-  const { createRowButtonRef, row, table, tableMeta, tableRef } = props;
+  const { createRowButtonRef, hasScrollbar, row, table, tableMeta, tableRef } = props;
   const handleKeyDown = async (event) => {
-    var _a;
     const target = event.target;
     if (isAriaDirectionKey(event) && isElementInsideExternalRelatedOverlay(target, tableRef)) {
       return;
@@ -56334,12 +56377,16 @@ function TemporaryRow(props) {
       if (!isElementTriggeredFromContainer(target, event.currentTarget)) {
         const saved = await tableMeta.editing.saveChanges(table);
         if (saved) {
-          (_a = createRowButtonRef.current) == null ? void 0 : _a.focus();
+          requestAnimationFrame(() => {
+            var _a;
+            (_a = createRowButtonRef.current) == null ? void 0 : _a.focus();
+          });
         }
       }
     } else if (event.key === "ArrowUp") {
       event.preventDefault();
       event.stopPropagation();
+      await tableMeta.editing.saveChanges(table);
       const lastIndex = tableMeta.length - 1;
       tableMeta.rowActive.setRowActiveIndex(lastIndex);
       if (tableRef.current) {
@@ -56352,20 +56399,10 @@ function TemporaryRow(props) {
       }
     }
   };
-  const handleKeyDownCapture = (event) => {
-    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 className = clsx("group/row border-grey-300 !sticky z-[22] print:hidden border-t-2", {
     "bottom-[calc(5rem_+_5px)] data-[row-editing-move]:bottom-[calc(5rem_+_5px)]": tableMeta.footer.isEnabled,
-    "bottom-[calc(2.5rem_+_5px)] data-[row-editing-move]:bottom-[calc(2.5rem_+_5px)]": !tableMeta.footer.isEnabled
+    "bottom-[calc(2.5rem_+_5px)] data-[row-editing-move]:bottom-[calc(2.5rem_+_5px)]": !tableMeta.footer.isEnabled,
+    "border-b !border-t": !hasScrollbar
   });
   return /* @__PURE__ */ React__default.createElement(
     Row$2,
@@ -56379,7 +56416,6 @@ function TemporaryRow(props) {
       table,
       className,
       onKeyDown: handleKeyDown,
-      onKeyDownCapture: handleKeyDownCapture,
       hideInternalColumns: true,
       hideRowActions: !tableMeta.editing.isEditing,
       skipPageLoading: true
@@ -56407,14 +56443,14 @@ const BaseTable3 = fixedForwardRef(function BaseTable32(props, ref) {
     return rowsById[row.rowId];
   }).length;
   const hasCreateWorkflow = table3.meta.editing.isEnabled && props.onEditingCreate;
-  const isScrolled = isTableScrolled(table3.ref);
+  const [hasScrollbar, isScrolled] = isTableScrolled(table3.ref);
   let createWorkflow;
   if (hasCreateWorkflow) {
     createWorkflow = /* @__PURE__ */ React__default.createElement(
       CreateNewRow,
       {
         buttonRef: table3.meta.editing.createRowButtonRef,
-        isScrolled,
+        hasScrollbar,
         table: table3.instance,
         tableMeta: table3.meta
       }
@@ -56440,6 +56476,7 @@ const BaseTable3 = fixedForwardRef(function BaseTable32(props, ref) {
       TemporaryRows,
       {
         createRowButtonRef: table3.meta.editing.createRowButtonRef,
+        hasScrollbar,
         table: table3.instance,
         tableMeta: table3.meta,
         tableRef: table3.ref