@wix/patterns 1.447.0 → 1.448.0

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultipleDragOverlayEffect2840141890";
+var _namespace_ = "MultipleDragOverlayEffect4030766872";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MultipleDragOverlayEffect2840141890__root"};
+export var classes = {"root":"MultipleDragOverlayEffect4030766872__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {}; 
+export var vars = {"wds-color-fill-surface-overlay":"--wds-color-fill-surface-overlay","wds-shadow-surface-overlay":"--wds-shadow-surface-overlay","wsr-color-D80":"--wsr-color-D80","wsr-shadow20":"--wsr-shadow20"}; 
 
 
 

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css

@@ -1,7 +1,11 @@
+@property st-global(--wds-table-list-item-fill-hover);
+@property st-global(--wsr-color-B50);
+
 .root {
   -st-states: draggingInto;
 }
 
+/* prettier-ignore */
 .root:draggingInto td {
-  background-color: #E7F0FF !important;
+  background-color: var(--wds-table-list-item-fill-hover, var(--wsr-color-B50, #E7F0FF)) !important;
 }

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableDragAndDropRow151064686";
+var _namespace_ = "NestedTableDragAndDropRow1938450215";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTableDragAndDropRow151064686__root"};
+export var classes = {"root":"NestedTableDragAndDropRow1938450215__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {}; 
+export var vars = {"wds-table-list-item-fill-hover":"--wds-table-list-item-fill-hover","wsr-color-B50":"--wsr-color-B50"}; 
 
 
 

package/src/components/NestedTableDragAndDrop/NestedTableDragHandle.tsx

@@ -22,8 +22,10 @@ export function NestedTableDragHandle<
   return (
     <Box
       direction="vertical"
-      paddingInlineStart="6px"
-      paddingInlineEnd="6px"
+      // physical props instead of paddingInline*: Box resolves SP tokens only
+      // for these, and RTL is irrelevant with equal padding on both sides
+      paddingLeft="SP1"
+      paddingRight="SP1"
       dataHook="drag-handle"
     >
       <DragHandle id={originalKeyedItem.key} />

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent4222478660";
+var _namespace_ = "PickerContent1207852199";
 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":"PickerContent4222478660__root"};
+export var classes = {"root":"PickerContent1207852199__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep751880777";
+var _namespace_ = "PickerContentAdditionalStep3295160460";
 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":"PickerContentAdditionalStep751880777__root","titles":"PickerContentAdditionalStep751880777__titles","suffix":"PickerContentAdditionalStep751880777__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep3295160460__root","titles":"PickerContentAdditionalStep3295160460__titles","suffix":"PickerContentAdditionalStep3295160460__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerTableListItem391151476";
+var _namespace_ = "PickerTableListItem2371250403";
 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":"PickerTableListItem391151476__root"};
+export var classes = {"root":"PickerTableListItem2371250403__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/QuerySearch.tsx

@@ -3,6 +3,7 @@ import { Search, SearchProps } from '@wix/design-system';
 import React, { CSSProperties } from 'react';
 import { Filter } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useBmHarmonyTheme } from '../hooks/useBmHarmonyTheme';
 
 export interface QuerySearchProps extends Partial<SearchProps> {
   visibility?: CSSProperties['visibility'];
@@ -15,10 +16,12 @@ export const QuerySearch = observer(function QuerySearch({
   ...rest
 }: QuerySearchProps) {
   const { translate: t } = useWixPatternsContainer();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   return (
     <Search
       dataHook="collection-search"
+      border={isBmHarmonyTheme ? 'standard' : undefined}
       debounceMs={300}
       onChange={(e) => {
         const value = e.target.value;

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent1387600451";
+var _namespace_ = "ScrollableContent4182818010";
 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":"ScrollableContent1387600451__root"};
+export var classes = {"root":"ScrollableContent4182818010__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget2519865406";
+var _namespace_ = "SetupWidget799516824";
 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":"SetupWidget2519865406__root","row":"SetupWidget2519865406__row","completedCta":"SetupWidget2519865406__completedCta","secondaryCta":"SetupWidget2519865406__secondaryCta","card":"SetupWidget2519865406__card","stepIcon":"SetupWidget2519865406__stepIcon","chevron":"SetupWidget2519865406__chevron","chevronDisabled":"SetupWidget2519865406__chevronDisabled","inProgressLabel":"SetupWidget2519865406__inProgressLabel"};
+export var classes = {"root":"SetupWidget799516824__root","row":"SetupWidget799516824__row","completedCta":"SetupWidget799516824__completedCta","secondaryCta":"SetupWidget799516824__secondaryCta","card":"SetupWidget799516824__card","stepIcon":"SetupWidget799516824__stepIcon","chevron":"SetupWidget799516824__chevron","chevronDisabled":"SetupWidget799516824__chevronDisabled","inProgressLabel":"SetupWidget799516824__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard3225100801";
+var _namespace_ = "SkeletonCard571625231";
 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":"SkeletonCard3225100801__root","headerLoading":"SkeletonCard3225100801__headerLoading"};
+export var classes = {"root":"SkeletonCard571625231__root","headerLoading":"SkeletonCard571625231__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SlidingModal3327522163";
+var _namespace_ = "SlidingModal1418578916";
 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":"SlidingModal3327522163__root"};
+export var classes = {"root":"SlidingModal1418578916__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Table/AddFieldColumnHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AddFieldColumnHeader3457306703";
+var _namespace_ = "AddFieldColumnHeader1179865257";
 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":"AddFieldColumnHeader3457306703__root","title":"AddFieldColumnHeader3457306703__title","hoverBridge":"AddFieldColumnHeader3457306703__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader1179865257__root","title":"AddFieldColumnHeader1179865257__title","hoverBridge":"AddFieldColumnHeader1179865257__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter3805733533";
+var _namespace_ = "TabsFilter3593242826";
 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":"TabsFilter3805733533__root","title":"TabsFilter3805733533__title"};
+export var classes = {"root":"TabsFilter3593242826__root","title":"TabsFilter3593242826__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal2716814328";
+var _namespace_ = "ManageTagsModal1381519493";
 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":"ManageTagsModal2716814328__root"};
+export var classes = {"root":"ManageTagsModal1381519493__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem1072055600";
+var _namespace_ = "ToolbarItem3283321930";
 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":"ToolbarItem1072055600__root"};
+export var classes = {"root":"ToolbarItem3283321930__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItemBox2420370034";
+var _namespace_ = "ToolbarItemBox382728702";
 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":"ToolbarItemBox2420370034__root"};
+export var classes = {"root":"ToolbarItemBox382728702__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common267139271";
+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":"common267139271__root","column":"common267139271__column","fullHeight":"common267139271__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(