@wix/patterns 1.446.0 → 1.448.0

package/src/components/common.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common5230984";
+var _namespace_ = "common3085911248";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"common5230984__root","column":"common5230984__column","fullHeight":"common5230984__fullHeight"};
+export var classes = {"root":"common3085911248__root","column":"common3085911248__column","fullHeight":"common3085911248__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/exports/schema.ts

@@ -36,6 +36,7 @@ export { useSchemaSource } from '../schema/useSchemaSource';
 export type { FieldsSchemaSource } from '../schema/useSchemaSource';
 export { defineSchemaSource, sourceFetchData } from '@wix/bex-core';
 export type {
+  CollectionUpdateContext,
   SchemaSource,
   SchemaSourceInput,
   FieldModalInput,

package/src/hooks/index.ts

@@ -15,6 +15,7 @@ export * from './useTableCollection';
 export * from './useGridCollection';
 export * from './useTableGridSwitchCollection';
 export * from './useEntityPage';
+export * from './useSyncCollectionOnEntityDelete';
 export * from './useSettingsPage';
 export * from './useEntityPageChild';
 export * from './useSettingsPageChild';

package/src/hooks/useEntityPage.ts

@@ -10,6 +10,8 @@ export type UseEntityPageParams<T, V extends FieldValues = FieldValues> = Pick<
   | 'onSave'
   | 'saveSuccessToast'
   | 'saveErrorToast'
+  | 'deleteAction'
+  | 'transformEntityToCollectionItem'
   | 'form'
   | 'parentPageId'
   | 'parentPath'

package/src/hooks/useOptionalCachedState.ts

@@ -8,6 +8,7 @@ import {
   WixPatternsContainer,
 } from '@wix/bex-core';
 import { useSyncCollectionOnEntityCreate } from './useSyncCollectionOnEntityCreate';
+import { useSyncCollectionOnEntityDelete } from './useSyncCollectionOnEntityDelete';
 import { useSyncCollectionOnEntityUpdate } from './useSyncCollectionOnEntityUpdate';
 import { WixPatternsRouterState } from '../state/WixPatternsRouterState';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
@@ -75,6 +76,7 @@ export function useOptionalCachedState<S extends ICollectionComponentState>(
 
   useSyncCollectionOnEntityCreate(cachedState, getCollectionsToUpdate);
   useSyncCollectionOnEntityUpdate(cachedState, getCollectionsToUpdate);
+  useSyncCollectionOnEntityDelete(cachedState, getCollectionsToUpdate);
 
   const [state] = useState<S>(() => {
     if (router) {

package/src/hooks/useSyncCollectionOnEntityDelete.ts

@@ -0,0 +1,74 @@
+import { useCallback } from 'react';
+
+import { ICollectionComponentState } from '../state/ICollectionComponentState';
+import { CollectionState } from '@wix/bex-core';
+import { useSyncCollectionOnEntityReturn } from './useSyncCollectionOnEntityReturn';
+
+type FetchedPageInfo<T> = CollectionState<T>['fetchesHistory'][number];
+
+const findLatestFetchedPageContainingItem = <T>(
+  collection: CollectionState<T>,
+  itemKey: string,
+): FetchedPageInfo<T> | undefined => {
+  for (
+    let fetchIndex = collection.fetchesHistory.length - 1;
+    fetchIndex >= 0;
+    fetchIndex--
+  ) {
+    const fetch = collection.fetchesHistory[fetchIndex];
+
+    if (fetch.itemsKeys.includes(itemKey)) {
+      return fetch;
+    }
+  }
+
+  return undefined;
+};
+
+export function useSyncCollectionOnEntityDelete<
+  T,
+  S extends ICollectionComponentState,
+>(
+  cachedState?: S,
+  getCollectionsToUpdate?: (state: S, entity: T) => CollectionState<T>[] | null,
+) {
+  const updateCollection = useCallback(
+    (collection: CollectionState<T>, deletedEntity: T) => {
+      collection.removeItem(deletedEntity);
+    },
+    [],
+  );
+
+  const checkIfViewSynced = useCallback(
+    async (collection: CollectionState<T>, deletedEntity: T) => {
+      const deletedItemKey = collection.itemKey(deletedEntity);
+      const fetchedPage = findLatestFetchedPageContainingItem(
+        collection,
+        deletedItemKey,
+      );
+
+      if (!fetchedPage) {
+        return true;
+      }
+
+      const updatedData = await collection.fetchData({
+        ...collection.query.asComputed,
+        ...fetchedPage.queryPageInfo,
+      });
+
+      return !updatedData.items.some(
+        (item) => collection.itemKey(item) === deletedItemKey,
+      );
+    },
+    [],
+  );
+
+  useSyncCollectionOnEntityReturn({
+    cachedState,
+    updateCollection,
+    checkIfViewSynced,
+    getEntityFromRouterState: (state: { _deletedEntity?: T }) =>
+      state._deletedEntity,
+    getCollectionsToUpdate,
+  });
+}

package/src/hooks/useSyncCollectionOnEntityReturn.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useWixPatternsRouter } from '../providers/WixPatternsRouterProvider';
 import { ICollectionComponentState } from '../state/ICollectionComponentState';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
@@ -24,12 +24,12 @@ export function useSyncCollectionOnEntityReturn<
   getEntityFromRouterState: (state: {
     _updatedEntity?: T;
     _createdEntity?: T;
+    _deletedEntity?: T;
   }) => T | undefined;
   getCollectionsToUpdate?: (state: S, entity: T) => CollectionState<T>[] | null;
 }) {
   const container = useWixPatternsContainer();
   const router = useWixPatternsRouter();
-  const timeoutRef = useRef<number>();
 
   const routeState = useSelector(() => router?.currentState);
 
@@ -56,7 +56,7 @@ export function useSyncCollectionOnEntityReturn<
     remove: RemoveToast;
   } | null>(null);
 
-  const showViewUpdatedToast = () => {
+  const showViewUpdatedToast = useCallback(() => {
     const toast = container.showToast?.({
       type: 'STANDARD',
       timeout: 'NONE',
@@ -81,7 +81,7 @@ export function useSyncCollectionOnEntityReturn<
     if (toast) {
       setCurrentToast(toast);
     }
-  };
+  }, [collections, container]);
 
   useEffect(() => {
     if (entity && collections && router) {
@@ -94,21 +94,32 @@ export function useSyncCollectionOnEntityReturn<
           collections.map((collection) =>
             checkIfViewSynced(collection, entity),
           ),
-        ).then((results) => {
-          const isViewSynced =
-            results.some(Boolean) && !router.isCollectionStale;
-          if (!isViewSynced) {
+        )
+          .then((results) => results.every(Boolean))
+          .catch(() => false)
+          .then((isViewSynced) => {
+            if (isViewSynced && !router.isCollectionStale) {
+              return;
+            }
+
             router.isCollectionStale = true;
             showViewUpdatedToast();
-          }
-        });
+          });
       }, 3000);
 
-      timeoutRef.current = timeoutId;
+      return () => window.clearTimeout(timeoutId);
     } else if (router?.isCollectionStale) {
       showViewUpdatedToast();
     }
-  }, [collections, entity]);
+    return () => {};
+  }, [
+    checkIfViewSynced,
+    collections,
+    entity,
+    router,
+    showViewUpdatedToast,
+    updateCollection,
+  ]);
 
   useEffect(() => {
     if (!currentToast || !cachedState) {
@@ -129,25 +140,17 @@ export function useSyncCollectionOnEntityReturn<
     };
 
     collections?.forEach((collection) => {
-      collection?.emitter.on('fetch', () => {
-        onFetch();
-      });
+      collection?.emitter.on('fetch', onFetch);
     });
     return () => {
       collections?.forEach((collection) => {
-        collection?.emitter.off('fetch', () => {
-          onFetch();
-        });
+        collection?.emitter.off('fetch', onFetch);
       });
     };
-  }, [currentToast, collections]);
+  }, [cachedState, collections, currentToast, router]);
 
   useEffect(() => {
     return () => {
-      if (timeoutRef.current) {
-        window.clearTimeout(timeoutRef.current);
-      }
-
       currentToast?.remove();
     };
   }, [currentToast]);

package/src/schema/sourceMutations.ts

@@ -57,9 +57,12 @@ export function sourceMutations<T>(
           required(backend().create, 'creating')(withoutLocalId(item)),
         ),
       ),
-    submitUpdate: (items) =>
+    submitUpdate: (items, contexts) =>
       Promise.all(
-        items.map((item) => required(backend().update, 'updating')(item)),
+        items.map((item, index) => {
+          const update = required(backend().update, 'updating');
+          return update(item, contexts?.[index]);
+        }),
       ),
     submitDelete: async (items) => {
       await required(

package/src/schema/useEntityPage.ts

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import type { FieldValues } from 'react-hook-form';
 import type { SchemaSource } from '@wix/bex-core';
-import type { EntityPageState } from '../state';
+import type { EntityPageDeleteAction, EntityPageState } from '../state';
 import {
   useEntityPage as useOpenEntityPage,
   type UseEntityPageParams,
@@ -32,7 +32,8 @@ export function useEntityPage<T, V extends FieldValues = FieldValues>(
   source: SchemaSource<T>,
   options: SchemaEntityPageOptions<T, V>,
 ): EntityPageState<T, V> {
-  const { entityId, fetch, onSave, createLocalItem, ...rest } = options;
+  const { entityId, fetch, onSave, createLocalItem, deleteAction, ...rest } =
+    options;
 
   // The derived read and write need values that change or don't exist yet when
   // the state is created: the state itself (the save merges into the loaded
@@ -46,6 +47,7 @@ export function useEntityPage<T, V extends FieldValues = FieldValues>(
     fetch:
       fetch ?? (() => fetchFromSource(source, page.entityId, createLocalItem)),
     onSave: onSave ?? (() => saveToSource(source, page)),
+    deleteAction: resolveDeleteAction(page, deleteAction),
   } as UseEntityPageParams<T, V>);
 
   page.state = state;
@@ -53,6 +55,17 @@ export function useEntityPage<T, V extends FieldValues = FieldValues>(
   return state;
 }
 
+function resolveDeleteAction<T, V extends FieldValues>(
+  page: PageRef<T, V>,
+  deleteAction: EntityPageDeleteAction<T> | undefined,
+): EntityPageDeleteAction<T> | undefined {
+  if (!deleteAction || !page.entityId) {
+    return undefined;
+  }
+
+  return deleteAction;
+}
+
 interface PageRef<T, V extends FieldValues> {
   entityId?: string;
   state?: EntityPageState<T, V>;
@@ -99,11 +112,13 @@ async function saveToSource<T, V extends FieldValues>(
     throw new Error(`The source has no entity "${entityId}" to update`);
   }
 
+  const updatedEntity = { ...entity, ...values } as T;
+
   return {
-    updatedEntity: await required(
-      backend.update,
-      'updating',
-    )({ ...entity, ...values } as T),
+    updatedEntity: await required(backend.update, 'updating')(updatedEntity, {
+      previousItem: entity,
+      changedFieldIds: changedFieldIds(entity, updatedEntity, state!.form),
+    }),
   };
 }
 
@@ -113,3 +128,24 @@ function required<F>(fn: F | undefined, action: string): F {
   }
   return fn;
 }
+
+function changedFieldIds<T, V extends FieldValues>(
+  previousItem: T,
+  updatedItem: T,
+  form: EntityPageState<T, V>['form'],
+): string[] {
+  const dirtyFields = form.formState.dirtyFields as Record<string, unknown>;
+  const dirtyFieldIds = Object.entries(dirtyFields)
+    .filter(([, value]) => Boolean(value))
+    .map(([fieldId]) => fieldId);
+
+  const previousRecord = previousItem as Record<string, unknown>;
+  const updatedRecord = updatedItem as Record<string, unknown>;
+  const changedByValue = Array.from(
+    new Set([...Object.keys(previousRecord), ...Object.keys(updatedRecord)]),
+  ).filter(
+    (fieldId) => !Object.is(previousRecord[fieldId], updatedRecord[fieldId]),
+  );
+
+  return Array.from(new Set([...dirtyFieldIds, ...changedByValue]));
+}

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader5161014";
+var _namespace_ = "CollectionPageHeader2816488786";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionPageHeader5161014__root"};
+export var classes = {"root":"CollectionPageHeader2816488786__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/EditableTable/CellValueState.ts

@@ -261,7 +261,12 @@ export class CellValueState<T, F extends FiltersMap> {
     try {
       return { value: resolved.deserialize(rawValue) };
     } catch {
-      return { value: rawValue, error: 'Value is not compatible' };
+      return {
+        value: rawValue,
+        error: this._parent.collection?.translate(
+          'cairo.editableTable.cell.validation.notCompatible',
+        ),
+      };
     }
   }
 
@@ -295,7 +300,10 @@ export class CellValueState<T, F extends FiltersMap> {
    * read-only cells protected regardless of entry point.
    */
   applyBulkValues(changes: { rowKey: string; columnId: string; value: any }[]) {
-    const rowItems = new Map<string, T>();
+    const rowUpdates = new Map<
+      string,
+      { item: T; changedFieldIds: Set<string> }
+    >();
 
     for (const { rowKey, columnId, value } of changes) {
       const column = this._parent._columnMap.get(columnId);
@@ -334,10 +342,17 @@ export class CellValueState<T, F extends FiltersMap> {
           }
           continue;
         }
-        const currentItem =
-          rowItems.get(rowKey) ??
-          this._consumeRowDrafts(rowKey, keyedItem.item);
-        rowItems.set(rowKey, column.setValue(currentItem, value));
+        let rowUpdate = rowUpdates.get(rowKey);
+        if (!rowUpdate) {
+          const consumed = this._consumeRowDrafts(rowKey, keyedItem.item);
+          rowUpdate = {
+            item: consumed.item,
+            changedFieldIds: new Set(consumed.changedFieldIds),
+          };
+          rowUpdates.set(rowKey, rowUpdate);
+        }
+        rowUpdate.item = column.setValue(rowUpdate.item, value);
+        rowUpdate.changedFieldIds.add(column.id);
       } else if (pendingKey) {
         this._pendingCells.set(pendingKey, {
           value,
@@ -346,7 +361,11 @@ export class CellValueState<T, F extends FiltersMap> {
       }
     }
 
-    this._parent.mutation.updateItems(Array.from(rowItems.values()));
+    const updates = Array.from(rowUpdates.values());
+    this._parent.mutation.updateItems(
+      updates.map(({ item }) => item),
+      updates.map(({ changedFieldIds }) => Array.from(changedFieldIds)),
+    );
   }
 
   private _applyValue(rowKey: string, columnId: string, value: any) {
@@ -388,26 +407,32 @@ export class CellValueState<T, F extends FiltersMap> {
       }
     }
 
-    const items: T[] = [];
+    const updates: { item: T; changedFieldIds: string[] }[] = [];
     for (const rowKey of rowKeys) {
       const keyedItem = this._parent._getKeyedItem(rowKey);
       if (!keyedItem) {
         this._dropRowDrafts(rowKey);
       } else if (this._parent.mutation.isLocalNewRow(rowKey)) {
-        this._parent.mutation.commitNewRow(
-          rowKey,
-          this._consumeRowDrafts(rowKey, keyedItem.item),
-        );
+        const consumed = this._consumeRowDrafts(rowKey, keyedItem.item);
+        this._parent.mutation.commitNewRow(rowKey, consumed.item);
       } else {
-        items.push(this._consumeRowDrafts(rowKey, keyedItem.item));
+        const consumed = this._consumeRowDrafts(rowKey, keyedItem.item);
+        updates.push(consumed);
       }
     }
-    if (items.length > 0) {
-      this._parent.mutation.updateItems(items);
+    if (updates.length > 0) {
+      this._parent.mutation.updateItems(
+        updates.map(({ item }) => item),
+        updates.map(({ changedFieldIds }) => changedFieldIds),
+      );
     }
   }
 
-  private _consumeRowDrafts(rowKey: string, item: T): T {
+  private _consumeRowDrafts(
+    rowKey: string,
+    item: T,
+  ): { item: T; changedFieldIds: string[] } {
+    const changedFieldIds = new Set<string>();
     for (const [key, entry] of this._draftCells) {
       if (entry.rowKey !== rowKey) {
         continue;
@@ -415,10 +440,11 @@ export class CellValueState<T, F extends FiltersMap> {
       const column = this._parent._columnMap.get(entry.columnId);
       if (column?.setValue) {
         item = column.setValue(item, entry.value);
+        changedFieldIds.add(column.id);
       }
       this._draftCells.delete(key);
     }
-    return item;
+    return { item, changedFieldIds: Array.from(changedFieldIds) };
   }
 
   /** Drop a row's draft entries without saving (the row no longer exists). */

package/src/state/EditableTable/EditableTableState.ts

@@ -241,6 +241,7 @@ export class EditableTableState<T, F extends FiltersMap>
     }
     return buildEditableFieldColumns(
       source.fieldsSource,
+      this.collection.translate,
       source.editableCellFor,
     ) as EditableColumn<T>[];
   }

package/src/state/EditableTable/MutationState.ts

@@ -1,6 +1,7 @@
 import { action, makeObservable, observable, runInAction } from 'mobx';
 import type {
   CollectionOptimisticActions,
+  CollectionUpdateContext,
   CollectionState,
   FiltersMap,
   KeyedItem,
@@ -11,7 +12,10 @@ export interface EditableTableMutationHandlers<T> {
   /** Factory to create a new empty item with a fresh ID */
   createItem: () => T;
   /** Submit updated items to the server */
-  submitUpdate: (items: T[]) => Promise<T[] | void>;
+  submitUpdate: (
+    items: T[],
+    contexts?: CollectionUpdateContext<T>[],
+  ) => Promise<T[] | void>;
   /** Submit newly created items to the server */
   submitCreate: (items: T[]) => Promise<T[] | void>;
   /** Submit item deletions to the server */
@@ -126,6 +130,7 @@ export class MutationState<T, F extends FiltersMap> {
 
   /** Create a local new row on the server, with its edited values merged in. */
   commitNewRow(rowKey: string, item: T) {
+    const t = this._parent.collection.translate;
     const draft = this._drafts.get(rowKey);
     if (!draft) {
       return;
@@ -140,15 +145,19 @@ export class MutationState<T, F extends FiltersMap> {
     this._optimisticActions.createOne(item, {
       submit: this._submitCreate,
       afterItemKey,
-      successToast: 'Item created',
+      successToast: t('cairo.editableTable.createItem.success.toast'),
       errorToast: (_err: unknown, { retry }: { retry: () => void }) => ({
-        message: 'Failed to create item',
-        action: { onClick: retry, text: 'Retry' },
+        message: t('cairo.editableTable.createItem.error.toast'),
+        action: {
+          onClick: retry,
+          text: t('cairo.editableTable.retry.toast.CTA'),
+        },
       }),
     });
   }
 
   duplicateItem(rowKey: string) {
+    const t = this._parent.collection.translate;
     const keyedItem = this._parent.keyedItems.find((ki) => ki.key === rowKey);
     if (!keyedItem) {
       return;
@@ -170,15 +179,19 @@ export class MutationState<T, F extends FiltersMap> {
     this._optimisticActions.createOne(duplicate as T, {
       submit: this._submitCreate,
       afterItemKey: rowKey,
-      successToast: 'Item duplicated',
+      successToast: t('cairo.editableTable.duplicateItem.success.toast'),
       errorToast: (_err: unknown, { retry }: { retry: () => void }) => ({
-        message: 'Failed to duplicate item',
-        action: { onClick: retry, text: 'Retry' },
+        message: t('cairo.editableTable.duplicateItem.error.toast'),
+        action: {
+          onClick: retry,
+          text: t('cairo.editableTable.retry.toast.CTA'),
+        },
       }),
     });
   }
 
   deleteItems(rowKeys: string[]) {
+    const t = this._parent.collection.translate;
     const deleted = new Set(rowKeys);
 
     // Surviving drafts anchored on a deleted row move up to the nearest
@@ -217,33 +230,73 @@ export class MutationState<T, F extends FiltersMap> {
 
     this._optimisticActions.deleteMany(items, {
       submit: this._handlers.submitDelete,
-      successToast:
-        items.length === 1 ? 'Item deleted' : `${items.length} items deleted`,
+      successToast: t('cairo.editableTable.deleteItem.success.toast', {
+        count: items.length,
+      }),
       errorToast: (_err: unknown, { retry }: { retry: () => void }) => ({
-        message: 'Failed to delete items',
-        action: { onClick: retry, text: 'Retry' },
+        message: t('cairo.editableTable.deleteItem.error.toast'),
+        action: {
+          onClick: retry,
+          text: t('cairo.editableTable.retry.toast.CTA'),
+        },
       }),
     });
   }
 
-  updateItems(updatedItems: T[]) {
+  updateItems(
+    updatedItems: T[],
+    changedFieldIdsByItem?: string[][],
+  ) {
+    const t = this._parent.collection.translate;
     if (updatedItems.length === 0) {
       return;
     }
+    const contexts = this._updateContexts(updatedItems, changedFieldIdsByItem);
     this._optimisticActions.updateMany(updatedItems, {
       keepPosition: true,
-      submit: this._handlers.submitUpdate,
-      successToast:
-        updatedItems.length === 1
-          ? 'Item updated'
-          : `${updatedItems.length} items updated`,
+      submit: (items) => this._submitUpdate(items, updatedItems, contexts),
+      successToast: t('cairo.editableTable.updateItem.success.toast', {
+        count: updatedItems.length,
+      }),
       errorToast: (_err: unknown, { retry }: { retry: () => void }) => ({
-        message: 'Failed to update items',
-        action: { onClick: retry, text: 'Retry' },
+        message: t('cairo.editableTable.updateItem.error.toast'),
+        action: {
+          onClick: retry,
+          text: t('cairo.editableTable.retry.toast.CTA'),
+        },
       }),
     });
   }
 
+  private _submitUpdate(
+    items: T[],
+    updatedItems: T[],
+    contexts: CollectionUpdateContext<T>[],
+  ) {
+    const sameItems =
+      items.length === updatedItems.length &&
+      items.every((item, index) => item === updatedItems[index]);
+
+    return this._handlers.submitUpdate(items, sameItems ? contexts : undefined);
+  }
+
+  private _updateContexts(
+    updatedItems: T[],
+    changedFieldIdsByItem?: string[][],
+  ): CollectionUpdateContext<T>[] {
+    return updatedItems.map((item, index) => {
+      const key = this._parent.collection.itemKey(item);
+      const previousItem =
+        this._parent.collection.result.get(key)?.item ?? item;
+      return {
+        previousItem,
+        changedFieldIds:
+          changedFieldIdsByItem?.[index] ??
+          changedFieldIdsFromItems(previousItem, item),
+      };
+    });
+  }
+
   /**
    * Nearest row above `rowKey` that a create can anchor on: a server row
    * that is not a draft and not itself a created row still living as an
@@ -320,3 +373,21 @@ export class MutationState<T, F extends FiltersMap> {
     return createdItems;
   };
 }
+
+const changedFieldIdsFromItems = <T>(
+  previousItem: T,
+  updatedItem: T,
+): string[] => {
+  if (!isRecord(previousItem) || !isRecord(updatedItem)) {
+    return [];
+  }
+
+  return Array.from(
+    new Set([...Object.keys(previousItem), ...Object.keys(updatedItem)]),
+  ).filter(
+    (fieldId) => !Object.is(previousItem[fieldId], updatedItem[fieldId]),
+  );
+};
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === 'object' && value !== null;