@wix/patterns 1.447.0 → 1.449.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_ = "MultipleDragOverlayEffect1852040764";
 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":"MultipleDragOverlayEffect1852040764__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_ = "NestedTableDragAndDropRow3558615481";
 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":"NestedTableDragAndDropRow3558615481__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_ = "PickerContent396127304";
 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":"PickerContent396127304__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_ = "PickerContentAdditionalStep3143450510";
 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":"PickerContentAdditionalStep3143450510__root","titles":"PickerContentAdditionalStep3143450510__titles","suffix":"PickerContentAdditionalStep3143450510__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_ = "PickerTableListItem3262638855";
 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":"PickerTableListItem3262638855__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/ReferenceFieldFilter/ReferenceFieldFilter.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { OffsetQuery } from '@wix/bex-core';
-import { ReferenceAvatar } from '@wix/patterns-fields';
+import { ReferenceAvatar, useTranslations } from '@wix/patterns-fields';
 import { useFilterCollection } from '../../hooks/useFilterCollection';
 import { MultiSelectCollectionFilter } from '../MultiSelectCollectionFilter';
 import type { FilterProps } from '../../model';
@@ -16,10 +16,16 @@ export type FetchReferenceItems = (
  * way the reference cell's editor does, so a row is recognizable by more than
  * its display name.
  */
-export const referenceFilterOption = (item: ReferenceItem): ListItem => ({
-  title: item.name,
-  prefix: <ReferenceAvatar name={item.name} image={item.image} />,
-});
+export const referenceFilterOption =
+  (translate: ReturnType<typeof useTranslations>['t']) =>
+  (item: ReferenceItem): ListItem => {
+    const name = item.name || translate('patterns-fields.reference.untitled');
+
+    return {
+      title: name,
+      prefix: <ReferenceAvatar name={name} image={item.image} />,
+    };
+  };
 
 /**
  * Names the options collection's cache entry.
@@ -57,6 +63,8 @@ export interface ReferenceFieldFilterProps
  */
 export const ReferenceFieldFilter = (props: ReferenceFieldFilterProps) => {
   const { fetchItems, fieldId, referencedCollectionId, ...filterProps } = props;
+  const { t } = useTranslations();
+  const renderItem = React.useMemo(() => referenceFilterOption(t), [t]);
 
   const collection = useFilterCollection<ReferenceItem>(props.filter, {
     queryName: referenceFilterQueryName(referencedCollectionId, fieldId),
@@ -67,7 +75,7 @@ export const ReferenceFieldFilter = (props: ReferenceFieldFilterProps) => {
     <MultiSelectCollectionFilter
       {...filterProps}
       collection={collection}
-      renderItem={referenceFilterOption}
+      renderItem={renderItem}
     />
   );
 };

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_ = "ScrollableContent3969433939";
 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":"ScrollableContent3969433939__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_ = "SetupWidget2850626784";
 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":"SetupWidget2850626784__root","row":"SetupWidget2850626784__row","completedCta":"SetupWidget2850626784__completedCta","secondaryCta":"SetupWidget2850626784__secondaryCta","card":"SetupWidget2850626784__card","stepIcon":"SetupWidget2850626784__stepIcon","chevron":"SetupWidget2850626784__chevron","chevronDisabled":"SetupWidget2850626784__chevronDisabled","inProgressLabel":"SetupWidget2850626784__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_ = "SkeletonCard2603318609";
 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":"SkeletonCard2603318609__root","headerLoading":"SkeletonCard2603318609__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_ = "SlidingModal2938545875";
 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":"SlidingModal2938545875__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_ = "AddFieldColumnHeader1907546462";
 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":"AddFieldColumnHeader1907546462__root","title":"AddFieldColumnHeader1907546462__title","hoverBridge":"AddFieldColumnHeader1907546462__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/TabsFilter/TabTitle.tsx

@@ -3,14 +3,13 @@ import React, { useEffect, ReactNode, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import { TabsResponsiveState } from './TabsResponsiveState';
-import { classes, st } from './TabsFilter.st.css.js';
+import { classes } from './TabsFilter.st.css.js';
 
 export interface TabTitleProps<V> {
   tabIndex: number;
   state: TabsResponsiveState;
   text?: string;
   value: V | null | undefined;
-  active?: boolean;
   counterBadge?: (value: V | null | undefined) => ReactNode;
 }
 
@@ -19,7 +18,6 @@ function _TabTitle<V>({
   state,
   text,
   value,
-  active,
   counterBadge,
 }: TabTitleProps<V>) {
   const badge = counterBadge?.(value);
@@ -38,14 +36,18 @@ function _TabTitle<V>({
 
   return (
     <Box
-      className={st(classes.root, { selected: !!active })}
+      className={classes.root}
       dataHook="tabs-filter-tab-title"
       verticalAlign="middle"
       align="center"
     >
-      <Box maxWidth={state.itemMaxWidth} flexShrink={1} minWidth={0}>
+      <Box
+        className={classes.titleBox}
+        maxWidth={state.itemMaxWidth}
+        flexShrink={1}
+        minWidth={0}
+      >
         <Text
-          className={st(classes.title)}
           dataHook="title-text"
           ellipsis
           size={isBmHarmonyTheme ? 'small' : undefined}

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

@@ -1,18 +1,5 @@
-@property st-global(--wds-color-text-standard-primary);
-@property st-global(--wds-tabs-label-fill);
-@property st-global(--wds-tabs-label-fill-active);
-@property st-global(--wsr-color-B10);
-@property st-global(--wsr-color-D10);
-
-.root {
-  -st-states: selected;
-}
-
-.root .title {
-  color: var(--wds-tabs-label-fill, var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624)));
-}
-
-.root:selected .title,
-.root:hover .title {
-  color: var(--wds-tabs-label-fill-active, var(--wsr-color-B10, #116DFF));
+/* WDS adds a wrapper element around the label when it truncates, and that wrapper
+   sets its own color. The * reaches the wrapper and the text inside it. */
+.root .titleBox * {
+  color: inherit !important;
 }

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_ = "TabsFilter4199202321";
 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":"TabsFilter3805733533__root","title":"TabsFilter3805733533__title"};
+export var classes = {"root":"TabsFilter4199202321__root","titleBox":"TabsFilter4199202321__titleBox"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-text-standard-primary":"--wds-color-text-standard-primary","wds-tabs-label-fill":"--wds-tabs-label-fill","wds-tabs-label-fill-active":"--wds-tabs-label-fill-active","wsr-color-B10":"--wsr-color-B10","wsr-color-D10":"--wsr-color-D10"}; 
+export var vars = {}; 
 
 
 

package/src/components/TabsFilter/TabsFilter.tsx

@@ -162,7 +162,6 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
             state={responsive}
             text={itemName(value)}
             value={value}
-            active={selectedId === id}
             counterBadge={hideCounterBadge ? undefined : counterBadge}
           />
         ),
@@ -189,7 +188,6 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
           state={responsive}
           text={all}
           value={undefined}
-          active={selectedId === ALL_TAB_ITEM_ID}
           counterBadge={hideCounterBadge ? undefined : counterBadge}
         />
       ),
@@ -211,7 +209,6 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
     disabled,
     responsive.panelMinWidth,
     hideCounterBadge,
-    selectedId,
   ]);
 
   useEffect(

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_ = "ManageTagsModal1052133035";
 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":"ManageTagsModal1052133035__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_ = "ToolbarItem3030730344";
 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":"ToolbarItem3030730344__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_ = "ToolbarItemBox833067609";
 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":"ToolbarItemBox833067609__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_ = "common2982988403";
 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":"common2982988403__root","column":"common2982988403__column","fullHeight":"common2982988403__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,9 @@ export type UseEntityPageParams<T, V extends FieldValues = FieldValues> = Pick<
   | 'onSave'
   | 'saveSuccessToast'
   | 'saveErrorToast'
+  | 'deleteAction'
+  | 'transformEntityToCollectionItem'
+  | 'isNewEntity'
   | '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,
+  });
+}