Merge changes from release26.1-SNAPSHOT through v7.7.4 (#1924)

### version 7.12.1
*Released*: 14 January 2026
- Merge from release26.1-SNAPSHOT to develop
    - includes changes from 7.7.4 #1921

Author: cnathe

packages/components/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.12.0",
+  "version": "7.12.1",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

packages/components/package.json

@@ -1,6 +1,11 @@
 # @labkey/components
 Components, models, actions, and utility functions for LabKey applications and pages
 
+### version 7.12.1
+*Released*: 14 January 2026
+- Merge from release26.1-SNAPSHOT to develop
+    - includes changes from 7.7.4 #1921
+
 ### version 7.12.0
 *Released*: 7 January 2026
 - Lineage: add "restricted" property
@@ -33,6 +38,11 @@ Components, models, actions, and utility functions for LabKey applications and p
   - Added hasMixedValue prop support across all input components (TextInput, SelectInput, CheckboxInput, DatePickerInput, FileInput, TextAreaInput, AmountUnitInput)
   - Updated BulkUpdateForm and BulkAddUpdateForm to pass conflicting fields information to form inputs
 
+### version 7.7.4
+*Released*: 8 January 2026
+- [GitHub Issue #723](https://github.com/LabKey/internal-issues/issues/723)
+  - EditableDetailPanel: use `useRouteLeave`
+
 ### version 7.7.3
 *Released*: 31 December 2025
 - [GitHub Issue #495](https://github.com/LabKey/internal-issues/issues/495)

packages/components/releaseNotes/components.md

@@ -22,6 +22,7 @@ import { QueryModel } from './QueryModel';
 
 import { DetailPanel, DetailPanelWithModel } from './DetailPanel';
 import { EDIT_METHOD } from '../../internal/constants';
+import { useRouteLeave } from '../../internal/util/RouteLeave';
 
 export interface EditableDetailPanelProps {
     appEditable?: boolean;
@@ -71,6 +72,7 @@ export const EditableDetailPanel: FC<EditableDetailPanelProps> = props => {
     } = props;
 
     const { api } = useAppContext();
+    const [_, setIsDirty] = useRouteLeave();
     const [canSubmit, setCanSubmit] = useState<boolean>(false);
     const [editing, setEditing] = useState<boolean>(false);
     const [error, setError] = useState<string>(undefined);
@@ -90,10 +92,11 @@ export const EditableDetailPanel: FC<EditableDetailPanelProps> = props => {
     const toggleEditing = useCallback((): void => {
         const updated = !editing;
         setEditing(updated);
+        setIsDirty(false);
         setWarning(undefined);
         setError(undefined);
         onEditToggle?.(updated);
-    }, [editing, onEditToggle]);
+    }, [editing, onEditToggle, setIsDirty]);
 
     const disableSubmitButton = useCallback((): void => {
         setCanSubmit(false);
@@ -103,9 +106,13 @@ export const EditableDetailPanel: FC<EditableDetailPanelProps> = props => {
         setCanSubmit(true);
     }, []);
 
-    const handleFormChange = useCallback((): void => {
-        setWarning(undefined);
-    }, []);
+    const handleFormChange = useCallback(
+        (_: never, isChanged: boolean): void => {
+            setWarning(undefined);
+            if (isChanged) setIsDirty(true);
+        },
+        [setIsDirty]
+    );
 
     const fileInputRenderer = useCallback((col: QueryColumn, data: any): ReactNode => {
         return <FileInput formsy initialValue={data} name={col.fieldKey} queryColumn={col} showLabel={false} />;
@@ -121,6 +128,7 @@ export const EditableDetailPanel: FC<EditableDetailPanelProps> = props => {
                 setCanSubmit(false);
                 setError(undefined);
                 setWarning('No changes detected. Please update the form and click save.');
+                setIsDirty(false);
                 return;
             }
 
@@ -146,6 +154,7 @@ export const EditableDetailPanel: FC<EditableDetailPanelProps> = props => {
                     auditUserComment: comment,
                 });
 
+                setIsDirty(false);
                 setEditing(false);
                 onUpdate?.();
                 onEditToggle?.(false);
@@ -154,7 +163,7 @@ export const EditableDetailPanel: FC<EditableDetailPanelProps> = props => {
                 setWarning(undefined);
             }
         },
-        [model, onBeforeUpdate, api.query, containerPath, comment, onUpdate, onEditToggle]
+        [model, onBeforeUpdate, api.query, containerPath, comment, onUpdate, onEditToggle, setIsDirty]
     );
 
     const isEditable = !model.isLoading && model.hasRows && (model.queryInfo?.isAppEditable() || appEditable);