@vuu-ui/vuu-data-editing 3.3.11 → 3.3.13

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.3.11",
+  "version": "3.3.13",
   "description": "Shared data editing APIs and React components for VUU UI",
   "main": "./src/index.js",
   "author": "heswell",
@@ -12,13 +12,13 @@
   },
   "dependencies": {
     "@salt-ds/core": "1.54.1",
-    "@vuu-ui/vuu-ui-controls": "3.3.11",
-    "@vuu-ui/vuu-utils": "3.3.11"
+    "@vuu-ui/vuu-ui-controls": "3.3.13",
+    "@vuu-ui/vuu-utils": "3.3.13"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "3.3.11",
-    "@vuu-ui/vuu-protocol-types": "3.3.11",
-    "@vuu-ui/vuu-table-types": "3.3.11"
+    "@vuu-ui/vuu-data-types": "3.3.13",
+    "@vuu-ui/vuu-protocol-types": "3.3.13",
+    "@vuu-ui/vuu-table-types": "3.3.13"
   },
   "peerDependencies": {
     "react": "^19.2.3"

package/src/EditButtons.js

@@ -1,8 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@salt-ds/core";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback } from "react";
+import { useEditState } from "./useEditState.js";
 const EditButtons = ({ canCancel, canSave, confirmCancel, confirmSave, editSession, hasSelection = false, onCancel, onDelete, onSave, saveLabel = "Save" })=>{
-    const [editState, setEditState] = useState(()=>editSession?.editState ?? "clean");
+    const editState = useEditState(editSession);
+    const isDirty = editSession?.isDirty ?? false;
     const handleSave = useCallback(async ()=>{
         if (confirmSave) {
             const confirmed = await confirmSave();
@@ -15,24 +17,16 @@ const EditButtons = ({ canCancel, canSave, confirmCancel, confirmSave, editSessi
         onSave
     ]);
     const handleCancel = useCallback(async ()=>{
-        if (confirmCancel) {
+        if (confirmCancel && isDirty) {
             const confirmed = await confirmCancel();
             if (!confirmed) return;
         }
         onCancel?.();
     }, [
         confirmCancel,
+        isDirty,
         onCancel
     ]);
-    useEffect(()=>{
-        if (editSession) {
-            setEditState(editSession.editState);
-            editSession.on("editState", setEditState);
-            return ()=>editSession.removeListener("editState", setEditState);
-        }
-    }, [
-        editSession
-    ]);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             onDelete && /*#__PURE__*/ jsx(Button, {

package/src/EditSession.js

@@ -66,6 +66,9 @@ class EditSession extends EventEmitter {
         if (this.#isStale) return "stale";
         return 0 === this.#editCount && 0 === this.#deleteCount && 0 === this.#addCount ? "clean" : "dirty";
     }
+    get isDirty() {
+        return "clean" !== this.editState;
+    }
     #emitEditStateChange(oldState, force = false) {
         const newState = this.editState;
         if (force || newState !== oldState) this.emit("editState", newState);

package/src/index.js

@@ -1,5 +1,6 @@
 export { DataEditingProvider, useEditSession } from "./DataEditingProvider.js";
 export { useCellEdited } from "./useCellEdited.js";
+export { useEditState } from "./useEditState.js";
 export { getVuuEditMessage, isEditRowReadOnly, isInlineEditingSession, withDataRowEditErrors } from "./edit-utils.js";
 export { EditButtons } from "./EditButtons.js";
 export { EditModeProvider, useEditMode } from "./EditModeProvider.js";

package/src/useEditState.js

@@ -0,0 +1,15 @@
+import { useCallback, useSyncExternalStore } from "react";
+function useEditState(editSession) {
+    const subscribe = useCallback((onStoreChange)=>{
+        if (!editSession) return ()=>void 0;
+        editSession.on("editState", onStoreChange);
+        return ()=>editSession.removeListener("editState", onStoreChange);
+    }, [
+        editSession
+    ]);
+    const getSnapshot = useCallback(()=>editSession?.editState ?? "clean", [
+        editSession
+    ]);
+    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+export { useEditState };

package/types/EditSession.d.ts

@@ -58,6 +58,7 @@ export declare class EditSession extends EventEmitter<EditSessionEvents> {
     get deleteCount(): number;
     get addCount(): number;
     get editState(): EditState;
+    get isDirty(): boolean;
     get newRowState(): NewRowState;
     isNewRow(key: string): key is "__vuu_new_row__";
     isNewRowFinalColumn(columnName: string): boolean;

package/types/index.d.ts

@@ -1,5 +1,6 @@
 export { DataEditingProvider, useEditSession } from "./DataEditingProvider";
 export { useCellEdited } from "./useCellEdited";
+export { useEditState } from "./useEditState";
 export { getVuuEditMessage, isInlineEditingSession, isEditRowReadOnly, withDataRowEditErrors, } from "./edit-utils";
 export { EditButtons, type EditButtonProps } from "./EditButtons";
 export { EditModeProvider, useEditMode, type EditModeContextProps, } from "./EditModeProvider";

package/types/useEditState.d.ts

@@ -0,0 +1,2 @@
+import type { EditSession, EditState } from "./EditSession";
+export declare function useEditState(editSession: EditSession | undefined): EditState;