@nocobase/client-v2 2.1.0-alpha.23 → 2.1.0-alpha.25

package/src/flow/models/blocks/form/value-runtime/runtime.ts

@@ -16,6 +16,7 @@ import { createFormValuesProxy } from './deps';
 import { createFormPatcher } from './form-patch';
 import { namePathToPathKey, pathKeyToNamePath, resolveDynamicNamePath } from './path';
 import { RuleEngine } from './rules';
+import { getSubTableRowIdentity } from '../../../fields/AssociationFieldModel/SubTableFieldModel/rowIdentity';
 import type {
   FormAssignRuleItem,
   FormValueWriteMeta,
@@ -25,10 +26,11 @@ import type {
   SetOptions,
   ValueSource,
 } from './types';
-import { createTxId, MAX_WRITES_PER_PATH_PER_TX } from './utils';
+import { createTxId, isEmptyValue, MAX_WRITES_PER_PATH_PER_TX } from './utils';
 
 type ObservableBinding = {
   source: ValueSource;
+  pathKey: string;
   dispose: () => void;
 };
 
@@ -241,6 +243,7 @@ export class FormValueRuntime {
 
     const changedPaths: NamePath[] = [];
     const touchedChangedPathKeys = new Set<string>();
+    let hasMeaningfulTouchedChange = false;
     let bumpedWriteSeq = false;
     for (const field of changedFields || []) {
       const name = field?.name;
@@ -259,8 +262,11 @@ export class FormValueRuntime {
       }
       _.set(this.valuesMirror, namePath, nextValue);
       changedPaths.push(namePath);
-      if (field?.touched === true) {
+      const isMeaningfulTouched =
+        field?.touched === true && !this.shouldIgnoreSyntheticTouchedInit(namePath, prevValue, nextValue);
+      if (isMeaningfulTouched) {
         touchedChangedPathKeys.add(namePathToPathKey(namePath));
+        hasMeaningfulTouchedChange = true;
       }
     }
 
@@ -279,7 +285,7 @@ export class FormValueRuntime {
       return;
     }
 
-    const isUser = changedFields.some((f) => f?.touched === true);
+    const isUser = hasMeaningfulTouchedChange;
     const source: ValueSource = isUser ? 'user' : 'system';
 
     const writeSeq = this.writeSeq;
@@ -299,16 +305,267 @@ export class FormValueRuntime {
     });
   }
 
+  private shouldIgnoreSyntheticTouchedInit(namePath: NamePath, prevValue: any, nextValue: any) {
+    if (!namePath?.length) return false;
+    if (typeof prevValue !== 'undefined') return false;
+    if (!isEmptyValue(nextValue)) return false;
+
+    for (let i = namePath.length - 1; i >= 0; i--) {
+      if (typeof namePath[i] !== 'number') continue;
+      const rowPath = namePath.slice(0, i + 1);
+      const rowValue = this.getFormValueAtPath(rowPath);
+      return !!rowValue?.__is_new__;
+    }
+
+    return false;
+  }
+
+  private isDeletedArrayItemPath(path: NamePath | string, snapshot: any) {
+    const namePath = Array.isArray(path) ? path : pathKeyToNamePath(path);
+    if (!namePath?.length) return false;
+
+    for (let i = namePath.length - 1; i >= 0; i--) {
+      if (typeof namePath[i] !== 'number') continue;
+      const rowPath = namePath.slice(0, i + 1);
+      return typeof _.get(snapshot, rowPath as any) === 'undefined';
+    }
+
+    return false;
+  }
+
+  private pruneDeletedArrayItemState(snapshot: any) {
+    for (const key of Array.from(this.explicitSet)) {
+      if (!this.isDeletedArrayItemPath(key, snapshot)) continue;
+      this.explicitSet.delete(key);
+    }
+
+    for (const key of Array.from(this.lastDefaultValueByPathKey.keys())) {
+      if (!this.isDeletedArrayItemPath(key, snapshot)) continue;
+      this.lastDefaultValueByPathKey.delete(key);
+    }
+
+    for (const key of Array.from(this.lastWriteMetaByPathKey.keys())) {
+      if (!this.isDeletedArrayItemPath(key, snapshot)) continue;
+      this.lastWriteMetaByPathKey.delete(key);
+    }
+
+    for (const [key, binding] of Array.from(this.observableBindings.entries())) {
+      if (!this.isDeletedArrayItemPath(key, snapshot)) continue;
+      binding.dispose();
+      this.observableBindings.delete(key);
+    }
+  }
+
+  private getArrayItemTargetKey(arrayPath?: NamePath): string | string[] {
+    let collection = this.model?.context?.collection;
+    let field: any;
+    for (const seg of arrayPath || []) {
+      if (typeof seg === 'number') continue;
+      if (typeof seg !== 'string' || !collection?.getField) break;
+
+      field = collection?.getField?.(seg);
+      if (!field?.isAssociationField?.()) break;
+      collection = field?.targetCollection;
+    }
+
+    const raw = field?.targetCollection?.filterTargetKey ?? field?.targetCollection?.filterByTk ?? field?.targetKey;
+    if (Array.isArray(raw)) {
+      const keys = raw.filter((key): key is string => typeof key === 'string' && !!key);
+      return keys.length ? keys : 'id';
+    }
+    return typeof raw === 'string' && raw ? raw : 'id';
+  }
+
+  private getArrayItemIdentity(item: any, arrayPath?: NamePath) {
+    return getSubTableRowIdentity(item, this.getArrayItemTargetKey(arrayPath));
+  }
+
+  private reconcileArrayItemState(rawChangedPaths: NamePath[], changedValues: any, snapshot: any) {
+    const seenPathKeys = new Set<string>();
+
+    for (const path of rawChangedPaths || []) {
+      if (!path?.length) continue;
+      const pathKey = namePathToPathKey(path);
+      if (seenPathKeys.has(pathKey)) continue;
+      seenPathKeys.add(pathKey);
+
+      const prevValue = _.get(this.valuesMirror, path as any);
+      const nextValue = this.getObservedChangedValue(path, changedValues, snapshot);
+      if (!Array.isArray(prevValue) || !Array.isArray(nextValue)) continue;
+
+      const nextIndexByIdentity = new Map<string, number>();
+      nextValue.forEach((item, index) => {
+        const identity = this.getArrayItemIdentity(item, path);
+        if (identity) {
+          nextIndexByIdentity.set(identity, index);
+        }
+      });
+
+      if (!nextIndexByIdentity.size) continue;
+
+      this.reconcileArrayItemSet(this.explicitSet, path, prevValue, nextIndexByIdentity);
+      this.reconcileArrayItemMap(this.lastDefaultValueByPathKey, path, prevValue, nextIndexByIdentity);
+      this.reconcileArrayItemMap(this.lastWriteMetaByPathKey, path, prevValue, nextIndexByIdentity);
+      this.reconcileObservableBindings(path, prevValue, nextIndexByIdentity);
+    }
+  }
+
+  private getReconciledArrayItemPath(
+    pathKey: string,
+    arrayPath: NamePath,
+    prevItems: any[],
+    nextIndexByIdentity: Map<string, number>,
+  ) {
+    const namePath = pathKeyToNamePath(pathKey);
+    if (namePath.length <= arrayPath.length) return { action: 'keep' as const };
+
+    for (let i = 0; i < arrayPath.length; i++) {
+      if (namePath[i] !== arrayPath[i]) return { action: 'keep' as const };
+    }
+
+    const oldIndex = namePath[arrayPath.length];
+    if (typeof oldIndex !== 'number') return { action: 'keep' as const };
+
+    const identity = this.getArrayItemIdentity(prevItems[oldIndex], arrayPath);
+    if (!identity) return { action: 'keep' as const };
+
+    const nextIndex = nextIndexByIdentity.get(identity);
+    if (nextIndex == null) return { action: 'delete' as const };
+    if (nextIndex === oldIndex) return { action: 'keep' as const };
+
+    const nextPath = [...namePath];
+    nextPath[arrayPath.length] = nextIndex;
+    return { action: 'move' as const, key: namePathToPathKey(nextPath) };
+  }
+
+  private reconcileArrayItemSet(
+    target: Set<string>,
+    arrayPath: NamePath,
+    prevItems: any[],
+    nextIndexByIdentity: Map<string, number>,
+  ) {
+    const nextEntries = new Set<string>();
+    let changed = false;
+
+    for (const key of target) {
+      const result = this.getReconciledArrayItemPath(key, arrayPath, prevItems, nextIndexByIdentity);
+      if (result.action === 'delete') {
+        changed = true;
+        continue;
+      }
+      if (result.action === 'move') {
+        changed = true;
+        nextEntries.add(result.key);
+        continue;
+      }
+      nextEntries.add(key);
+    }
+
+    if (!changed) return;
+    target.clear();
+    for (const key of nextEntries) {
+      target.add(key);
+    }
+  }
+
+  private reconcileArrayItemMap<T>(
+    target: Map<string, T>,
+    arrayPath: NamePath,
+    prevItems: any[],
+    nextIndexByIdentity: Map<string, number>,
+  ) {
+    const nextEntries = new Map<string, T>();
+    let changed = false;
+
+    for (const [key, value] of target) {
+      const result = this.getReconciledArrayItemPath(key, arrayPath, prevItems, nextIndexByIdentity);
+      if (result.action === 'delete') {
+        changed = true;
+        continue;
+      }
+      if (result.action === 'move') {
+        changed = true;
+        nextEntries.set(result.key, value);
+        continue;
+      }
+      nextEntries.set(key, value);
+    }
+
+    if (!changed) return;
+    target.clear();
+    for (const [key, value] of nextEntries) {
+      target.set(key, value);
+    }
+  }
+
+  private reconcileObservableBindings(arrayPath: NamePath, prevItems: any[], nextIndexByIdentity: Map<string, number>) {
+    const nextEntries = new Map<string, ObservableBinding>();
+    let changed = false;
+
+    for (const [key, binding] of this.observableBindings) {
+      const result = this.getReconciledArrayItemPath(key, arrayPath, prevItems, nextIndexByIdentity);
+      if (result.action === 'delete') {
+        changed = true;
+        binding.dispose();
+        continue;
+      }
+      if (result.action === 'move') {
+        changed = true;
+        binding.pathKey = result.key;
+        nextEntries.set(result.key, binding);
+        continue;
+      }
+      nextEntries.set(key, binding);
+    }
+
+    if (!changed) return;
+    this.observableBindings.clear();
+    for (const [key, binding] of nextEntries) {
+      this.observableBindings.set(key, binding);
+    }
+  }
+
+  private getObservedChangedValue(path: NamePath, changedValues: any, snapshot: any) {
+    if (path?.length === 1) {
+      const key = path[0];
+      if (
+        (typeof key === 'string' || typeof key === 'number') &&
+        changedValues &&
+        Object.prototype.hasOwnProperty.call(changedValues, key)
+      ) {
+        return changedValues[key];
+      }
+    }
+
+    return _.get(snapshot, path as any);
+  }
+
+  private getObservedSnapshot(changedValues: any, snapshot: any) {
+    if (!changedValues || typeof changedValues !== 'object') return snapshot;
+    if (!snapshot || typeof snapshot !== 'object') return changedValues;
+
+    let observed = snapshot;
+    for (const key of Object.keys(changedValues)) {
+      if (observed === snapshot) {
+        observed = Array.isArray(snapshot) ? [...snapshot] : { ...snapshot };
+      }
+      _.set(observed, [key], changedValues[key]);
+    }
+
+    return observed;
+  }
+
   handleFormValuesChange(changedValues: any, allValues: any) {
     if (this.disposed) return;
     if (this.isSuppressed()) {
       return;
     }
 
+    const changedValuePaths: NamePath[] = Object.keys(changedValues || {}).map((k) => [k]);
     const rawChangedPaths: NamePath[] =
       this.lastObservedChangedPaths && this.lastObservedChangedPaths.length
         ? this.lastObservedChangedPaths
-        : Object.keys(changedValues || {}).map((k) => [k]);
+        : changedValuePaths;
 
     const source: ValueSource = this.lastObservedSource ?? 'user';
 
@@ -316,16 +573,21 @@ export class FormValueRuntime {
     this.lastObservedChangedPaths = null;
     this.lastObservedSource = null;
 
-    const snapshot = allValues && typeof allValues === 'object' ? allValues : this.getFormValuesSnapshot();
+    const rawSnapshot = allValues && typeof allValues === 'object' ? allValues : this.getFormValuesSnapshot();
+    const snapshot = this.getObservedSnapshot(changedValues, rawSnapshot);
+    this.reconcileArrayItemState([...rawChangedPaths, ...changedValuePaths], changedValues, snapshot);
+    this.pruneDeletedArrayItemState(snapshot);
 
-    const explicitPaths = this.deriveExplicitPaths(rawChangedPaths, snapshot, this.valuesMirror);
+    const explicitPaths = this.deriveExplicitPaths(rawChangedPaths, changedValues, snapshot, this.valuesMirror).filter(
+      (path) => !this.isDeletedArrayItemPath(path, snapshot),
+    );
 
     let hasMirrorChange = false;
     let bumpedWriteSeq = false;
     const actuallyChangedPaths: NamePath[] = [];
     for (const p of rawChangedPaths) {
       if (!p?.length) continue;
-      const nextValue = _.get(snapshot, p);
+      const nextValue = this.getObservedChangedValue(p, changedValues, snapshot);
       const prevValue = _.get(this.valuesMirror, p);
       if (_.isEqual(prevValue, nextValue)) continue;
       if (!bumpedWriteSeq) {
@@ -364,14 +626,14 @@ export class FormValueRuntime {
     });
   }
 
-  private deriveExplicitPaths(rawChangedPaths: NamePath[], snapshot: any, valuesMirrorBefore: any): NamePath[] {
+  private deriveExplicitPaths(rawChangedPaths: NamePath[], changedValues: any, snapshot: any, valuesMirrorBefore: any) {
     const explicitPaths: NamePath[] = [];
     const seen = new Set<string>();
 
     for (const path of rawChangedPaths || []) {
       if (!path?.length) continue;
       const prevValue = _.get(valuesMirrorBefore, path as any);
-      const nextValue = _.get(snapshot, path as any);
+      const nextValue = this.getObservedChangedValue(path, changedValues, snapshot);
       this.collectExplicitDiffPaths(prevValue, nextValue, path, explicitPaths, seen);
     }
 
@@ -667,19 +929,30 @@ export class FormValueRuntime {
         }
       }
 
-      for (const { namePath, rawValue, pathKey } of filteredToWrite) {
+      for (const { rawValue, pathKey } of filteredToWrite) {
         if (!isObservable(rawValue)) continue;
         const obs = rawValue;
 
+        const binding: ObservableBinding = { source, pathKey, dispose: () => {} };
         const disposer = observe(obs, () => {
-          this.applyBoundValue(callerCtx, namePath, pathKey, toJS(obs), source, linkageScopeDepth, linkageTxId);
+          const currentPathKey = binding.pathKey;
+          this.applyBoundValue(
+            callerCtx,
+            pathKeyToNamePath(currentPathKey),
+            currentPathKey,
+            toJS(obs),
+            source,
+            linkageScopeDepth,
+            linkageTxId,
+          );
         });
+        binding.dispose = disposer;
 
         const existing = this.observableBindings.get(pathKey);
         if (existing) {
           existing.dispose();
         }
-        this.observableBindings.set(pathKey, { source, dispose: disposer });
+        this.observableBindings.set(pathKey, binding);
       }
 
       if (triggerEvent) {

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/SubTableColumnModel.tsx

@@ -34,6 +34,7 @@ import { SubTableFieldModel } from '.';
 import { FieldModel } from '../../../base/FieldModel';
 import { FieldDeletePlaceholder, CustomWidth } from '../../../blocks/table/TableColumnModel';
 import { buildDynamicNamePath } from '../../../blocks/form/dynamicNamePath';
+import { getSubTableRowIdentity } from './rowIdentity';
 
 const SubTableRowRuleBinder: React.FC<{ model: any }> = ({ model }) => {
   React.useEffect(() => {
@@ -355,7 +356,11 @@ const MemoCell: React.FC<CellProps> = React.memo(
   },
   (prev, next) => {
     return (
-      prev.value === next.value && prev.id === next.id && prev.memoKey === next.memoKey && prev.width === next.width
+      prev.value === next.value &&
+      prev.id === next.id &&
+      prev.memoKey === next.memoKey &&
+      prev.width === next.width &&
+      prev.rowIdx === next.rowIdx
     );
   },
 );
@@ -548,7 +553,10 @@ export class SubTableColumnModel<
       const baseFieldIndex = parentFieldIndex ?? (this.parent as any)?.context?.fieldIndex ?? this.context?.fieldIndex;
       const baseArr = Array.isArray(baseFieldIndex) ? baseFieldIndex : [];
       const baseIndexKey = baseArr.length ? baseArr.join('|') : 'root';
-      const rowForkKey = `row:${baseIndexKey}:${String(rowIdx)}`;
+      const filterTargetKey =
+        (this.parent as any)?.collection?.filterTargetKey ?? (this.parent as any)?.context?.collection?.filterTargetKey;
+      const rowIdentity = getSubTableRowIdentity(record, filterTargetKey) ?? `row:${String(rowIdx)}`;
+      const rowForkKey = `row:${baseIndexKey}:${rowIdentity}:${String(rowIdx)}`;
       const rowFork: any = (() => {
         const fork = this.createFork({}, rowForkKey);
         const associationFieldPath =

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/SubTableField.tsx

@@ -14,12 +14,11 @@ import { useTranslation } from 'react-i18next';
 import { PlusOutlined } from '@ant-design/icons';
 import React, { useEffect, useMemo, useState } from 'react';
 import { ActionWithoutPermission } from '../../../base/ActionModel';
-import { getRowKey } from '../../../blocks/table/utils';
+import { getSubTableRowIdentity, normalizeSubTableRows } from './rowIdentity';
 
 export function SubTableField(props) {
   const { t } = useTranslation();
   const {
-    value = [],
     onChange,
     columns,
     disabled,
@@ -39,12 +38,25 @@ export function SubTableField(props) {
   } = props;
   const [currentPage, setCurrentPage] = useState(1);
   const [currentPageSize, setCurrentPageSize] = useState(pageSize);
+  const rawCurrentValue = getCurrentValue();
+  const currentValue = useMemo(() => normalizeSubTableRows(rawCurrentValue), [rawCurrentValue]);
+  const getRecordIdentity = React.useCallback(
+    (record: any) => getSubTableRowIdentity(record, filterTargetKey),
+    [filterTargetKey],
+  );
   useEffect(() => {
     setCurrentPageSize(pageSize);
   }, [pageSize]);
   useEffect(() => {
     resetPage && setCurrentPage(1);
   }, [resetPage]);
+  const applyValue = React.useCallback((nextValue: any) => onChange?.(normalizeSubTableRows(nextValue)), [onChange]);
+  const getLatestValue = React.useCallback(() => normalizeSubTableRows(getCurrentValue()), [getCurrentValue]);
+  useEffect(() => {
+    if (currentValue !== rawCurrentValue) {
+      applyValue(currentValue);
+    }
+  }, [applyValue, currentValue, rawCurrentValue]);
 
   // 前端分页
   const pagination = useMemo(() => {
@@ -56,7 +68,7 @@ export function SubTableField(props) {
       },
       current: currentPage,
       pageSize: currentPageSize,
-      total: value?.length,
+      total: currentValue.length,
       onChange: (page, size) => {
         setCurrentPage(page);
         setCurrentPageSize(size);
@@ -66,38 +78,36 @@ export function SubTableField(props) {
         return t('Total {{count}} items', { count: total });
       },
     } as any;
-  }, [currentPage, currentPageSize, value]);
+  }, [currentPage, currentPageSize, currentValue.length]);
 
   // 新增一行
   const handleAdd = () => {
     if (allowCreate === false) return;
 
-    const currentValue = getCurrentValue();
     const newRow = {
       __is_new__: true,
     };
     columns.forEach((col) => {
       newRow[col.dataIndex] = undefined;
     });
-    const newValue = [...currentValue, newRow];
+    const newValue = [...getLatestValue(), newRow];
     setCurrentPage(Math.ceil(newValue.length / currentPageSize));
-    onChange?.(newValue);
+    applyValue(newValue);
   };
 
   // 删除行
   const handleDelete = (index: number) => {
-    const newValue = [...getCurrentValue()];
+    const newValue = [...getLatestValue()];
     newValue.splice(index, 1);
     const lastPage = Math.ceil(newValue.length / currentPageSize);
     setCurrentPage(currentPage > lastPage ? lastPage : currentPage);
-    onChange?.(newValue);
+    applyValue(newValue);
   };
 
   // 编辑单元格
   const handleCellChange = (rowIdx, dataIndex, cellValue) => {
-    const currentValue = getCurrentValue();
-    const newData = currentValue.map((row, idx) => (idx === rowIdx ? { ...row, [dataIndex]: cellValue } : row));
-    onChange?.(newData);
+    const newData = getLatestValue().map((row, idx) => (idx === rowIdx ? { ...row, [dataIndex]: cellValue } : row));
+    applyValue(newData);
   };
 
   // 渲染可编辑单元格
@@ -106,20 +116,25 @@ export function SubTableField(props) {
       ...col,
       render: (text, record, rowIdx) => {
         const pageRowIdx = (currentPage - 1) * currentPageSize + rowIdx;
+        const rowIdentity = getRecordIdentity(record) ?? `row:${pageRowIdx}`;
+        // row identity keeps logical rows stable, while binding key still follows
+        // the current array index so Form.Item can rebind after reordering/removal.
+        const rowBindingKey = `${rowIdentity}:${pageRowIdx}`;
+        const columnKey = col.dataIndex ?? col.key ?? 'cell';
         if (!col.render) {
           return;
         }
-        return col?.render({
+        return col.render({
           record,
           rowIdx: pageRowIdx,
-          id: `field-${col.dataIndex}-${rowIdx}`,
+          id: `field-${String(columnKey)}-${rowBindingKey}`,
           value: text,
           parentFieldIndex,
           parentItem,
           onChange: (value) => {
-            handleCellChange(pageRowIdx, col.dataIndex, value?.target?.value || value);
+            handleCellChange(pageRowIdx, col.dataIndex, value?.target?.value ?? value);
           },
-          ['aria-describedby']: `field-${col.dataIndex}-${rowIdx}`,
+          ['aria-describedby']: `field-${String(columnKey)}-${rowBindingKey}`,
         });
       },
     }))
@@ -137,8 +152,17 @@ export function SubTableField(props) {
           }
           return (
             <div
+              onMouseDown={(event) => {
+                const activeElement = document.activeElement as HTMLElement | null;
+                if (!activeElement || event.currentTarget.contains(activeElement)) {
+                  return;
+                }
+                activeElement.blur?.();
+              }}
               onClick={() => {
-                handleDelete(pageRowIdx);
+                setTimeout(() => {
+                  handleDelete(pageRowIdx);
+                });
               }}
             >
               <CloseOutlined style={{ cursor: 'pointer', color: 'gray' }} />
@@ -150,17 +174,17 @@ export function SubTableField(props) {
     .filter(Boolean);
 
   const pagedDataSource = useMemo(() => {
-    if (!value?.length) return [];
+    if (!currentValue.length) return [];
 
     const start = (currentPage - 1) * currentPageSize;
-    return value.slice(start, start + currentPageSize);
-  }, [value, currentPage, currentPageSize]);
+    return currentValue.slice(start, start + currentPageSize);
+  }, [currentValue, currentPage, currentPageSize]);
   return (
     <Form.Item>
       <Table
         dataSource={pagedDataSource}
         columns={editableColumns}
-        rowKey={(record) => getRowKey(record, filterTargetKey)}
+        rowKey={(record) => getRecordIdentity(record) ?? ''}
         tableLayout="fixed"
         scroll={{ x: 'max-content' }}
         pagination={pagination}
@@ -179,7 +203,7 @@ export function SubTableField(props) {
             </span>
           ),
         }}
-        components={components || {}}
+        components={components ?? {}}
         className={css`
           .ant-table-cell-ellipsis.ant-table-cell-fix-right-first .ant-table-cell-content {
             display: inline;

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/rowIdentity.ts

@@ -0,0 +1,70 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { uid } from '@formily/shared';
+
+type FilterTargetKey = string | string[] | null | undefined;
+type SubTableRow = {
+  __is_new__?: boolean;
+  id?: any;
+  [key: string]: any;
+};
+
+export const SUB_TABLE_TEMP_ROW_KEY = '__index__';
+
+function getPersistedRowKey(record: SubTableRow, filterTargetKey: FilterTargetKey) {
+  if (!filterTargetKey) return null;
+
+  if (Array.isArray(filterTargetKey)) {
+    const values = filterTargetKey.map((k) => record?.[k]);
+    if (values.some((v) => v == null)) return null;
+    return values.map((v) => String(v)).join('__');
+  }
+
+  const value = record?.[filterTargetKey];
+  return value == null ? null : String(value);
+}
+
+export function getSubTableRowIdentity(record: SubTableRow, filterTargetKey: FilterTargetKey) {
+  const tempKey = record?.[SUB_TABLE_TEMP_ROW_KEY];
+  if (record?.__is_new__ && tempKey != null && tempKey !== '') {
+    return `tmp:${String(tempKey)}`;
+  }
+
+  const persistedKey = getPersistedRowKey(record, filterTargetKey);
+  if (persistedKey != null) {
+    return `pk:${persistedKey}`;
+  }
+
+  if (tempKey != null && tempKey !== '') {
+    return `tmp:${String(tempKey)}`;
+  }
+
+  return null;
+}
+
+export function normalizeSubTableRows(rows: SubTableRow[]) {
+  if (!rows.length) return rows;
+
+  let changed = false;
+  const normalized = rows.map((row) => {
+    const tempKey = row?.[SUB_TABLE_TEMP_ROW_KEY];
+    if (!row.__is_new__ || (tempKey != null && tempKey !== '')) {
+      return row;
+    }
+
+    changed = true;
+    return {
+      ...row,
+      [SUB_TABLE_TEMP_ROW_KEY]: uid(),
+    };
+  });
+
+  return changed ? normalized : rows;
+}