@wix/patterns 1.496.0 → 1.497.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent1046466529";
+var _namespace_ = "PickerContent50865064";
 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":"PickerContent1046466529__root"};
+export var classes = {"root":"PickerContent50865064__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_ = "PickerContentAdditionalStep1198997690";
+var _namespace_ = "PickerContentAdditionalStep1390594085";
 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":"PickerContentAdditionalStep1198997690__root","titles":"PickerContentAdditionalStep1198997690__titles","suffix":"PickerContentAdditionalStep1198997690__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1390594085__root","titles":"PickerContentAdditionalStep1390594085__titles","suffix":"PickerContentAdditionalStep1390594085__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_ = "PickerTableListItem2666300085";
+var _namespace_ = "PickerTableListItem2742061961";
 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":"PickerTableListItem2666300085__root"};
+export var classes = {"root":"PickerTableListItem2742061961__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SchemaSource/schemaFieldActions.ts

@@ -13,10 +13,10 @@ import type { SchemaState } from './SchemaState';
 import { schemaFieldDisabledTooltips } from './schemaFieldDisable';
 
 // Schema field-menu layout: edit + manage actions, then delete (divider before).
-const SCHEMA_MENU_GROUPS: FieldActionKey[][] = [
+const SCHEMA_MENU_GROUPS = [
   ['editField', 'makePrimary', 'duplicateField', 'duplicateFieldWithContent'],
   ['delete'],
-];
+] satisfies FieldActionKey[][];
 
 export const schemaFieldActionHandlers =
   (s: SchemaState<any>, panel: CustomFieldsPanelState) =>
@@ -59,7 +59,11 @@ export const schemaFieldActionHandlers =
       handlers.delete = () => {
         const schema = sourceState.schema;
         const currentField = schema?.fields[fieldId];
-        if (!schema || !currentField) {
+        if (
+          !schema ||
+          !currentField ||
+          !sourceState.source.canDeleteField(currentField, schema)
+        ) {
           return;
         }
         panel.deleteFieldModal.modal.open({
@@ -78,15 +82,40 @@ export const schemaFieldActionHandlers =
       return null;
     }
 
+    const disabledTooltips = schemaFieldDisabledTooltips(field, {
+      canEdit,
+      canAddFields: s.fieldsSource.fieldManagement?.canAddFields ?? false,
+      canMakePrimary: sourceState.schema
+        ? sourceState.source.canMakePrimary?.(field, sourceState.schema)
+        : undefined,
+    });
+    SCHEMA_MENU_GROUPS.flat().forEach((action) => {
+      const handler = handlers[action];
+      if (!handler) {
+        return;
+      }
+      const getReason = () => {
+        const schema = sourceState.schema;
+        const currentField = schema?.fields[fieldId];
+        return schema && currentField
+          ? sourceState.source.getFieldActionDisabledReason?.(
+              currentField,
+              schema,
+              action,
+            )
+          : undefined;
+      };
+      disabledTooltips[action] ??= getReason();
+      handlers[action] = (id) => {
+        if (disabledTooltips[action] === undefined && getReason() === undefined) {
+          handler(id);
+        }
+      };
+    });
+
     return {
       handlers,
-      disabledTooltips: schemaFieldDisabledTooltips(field, {
-        canEdit,
-        canAddFields: s.fieldsSource.fieldManagement?.canAddFields ?? false,
-        canMakePrimary: sourceState.schema
-          ? sourceState.source.canMakePrimary?.(field, sourceState.schema)
-          : undefined,
-      }),
+      disabledTooltips,
       loading: {
         makePrimary: sourceState.makePrimaryTask.status.isLoading,
         duplicateField: sourceState.duplicateTask.status.isLoading,

package/src/components/SchemaSource/schemaFieldManagement.ts

@@ -2,6 +2,7 @@ import {
   Field,
   FieldDraft,
   FieldManagement,
+  ResolvedFieldTypeOption,
   isReferenceField,
   isReferenceFieldType,
   NonReferenceField,
@@ -108,6 +109,20 @@ export const schemaFieldManagement = (
           loadReferenceableCollectionOptions:
             fieldModal.loadReferenceableCollectionOptions,
         }),
+        getEditFieldType: (type: string): ResolvedFieldTypeOption | undefined => {
+          const definition = sourceState.source.fieldTypes.find(
+            (candidate) => candidate.type === type,
+          );
+          return definition?.fieldModal
+            ? {
+                ...definition.fieldModal,
+                id: definition.type,
+                label: definition.display.label,
+                patternsType: 'CUSTOM',
+                icons: definition.display.icons,
+              }
+            : undefined;
+        },
         types: [
           ...fieldModal.types.map((ft) => {
             // The standard pair applies only when the source didn't custom-label

package/src/components/SchemaSource/tableSchemaSource.ts

@@ -119,6 +119,9 @@ class TableSchemaSourceImpl<T> implements TableSchemaSource<T> {
   get canMakePrimary() {
     return this.source.canMakePrimary;
   }
+  get getFieldActionDisabledReason() {
+    return this.source.getFieldActionDisabledReason;
+  }
   get schemaParams() {
     return this.source.schemaParams;
   }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent968422134";
+var _namespace_ = "ScrollableContent4009927508";
 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":"ScrollableContent968422134__root"};
+export var classes = {"root":"ScrollableContent4009927508__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_ = "SetupWidget3823691260";
+var _namespace_ = "SetupWidget652943968";
 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":"SetupWidget3823691260__root","row":"SetupWidget3823691260__row","completedCta":"SetupWidget3823691260__completedCta","secondaryCta":"SetupWidget3823691260__secondaryCta","card":"SetupWidget3823691260__card","stepIcon":"SetupWidget3823691260__stepIcon","chevron":"SetupWidget3823691260__chevron","chevronDisabled":"SetupWidget3823691260__chevronDisabled","inProgressLabel":"SetupWidget3823691260__inProgressLabel"};
+export var classes = {"root":"SetupWidget652943968__root","row":"SetupWidget652943968__row","completedCta":"SetupWidget652943968__completedCta","secondaryCta":"SetupWidget652943968__secondaryCta","card":"SetupWidget652943968__card","stepIcon":"SetupWidget652943968__stepIcon","chevron":"SetupWidget652943968__chevron","chevronDisabled":"SetupWidget652943968__chevronDisabled","inProgressLabel":"SetupWidget652943968__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_ = "SkeletonCard1495382215";
+var _namespace_ = "SkeletonCard3097408332";
 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":"SkeletonCard1495382215__root","headerLoading":"SkeletonCard1495382215__headerLoading"};
+export var classes = {"root":"SkeletonCard3097408332__root","headerLoading":"SkeletonCard3097408332__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_ = "SlidingModal605283471";
+var _namespace_ = "SlidingModal1016288070";
 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":"SlidingModal605283471__root"};
+export var classes = {"root":"SlidingModal1016288070__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_ = "AddFieldColumnHeader284683266";
+var _namespace_ = "AddFieldColumnHeader2726776838";
 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":"AddFieldColumnHeader284683266__root","anchorLayer":"AddFieldColumnHeader284683266__anchorLayer","popover":"AddFieldColumnHeader284683266__popover","title":"AddFieldColumnHeader284683266__title","hoverBridge":"AddFieldColumnHeader284683266__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader2726776838__root","anchorLayer":"AddFieldColumnHeader2726776838__anchorLayer","popover":"AddFieldColumnHeader2726776838__popover","title":"AddFieldColumnHeader2726776838__title","hoverBridge":"AddFieldColumnHeader2726776838__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NumberCell1670673624";
+var _namespace_ = "NumberCell218915555";
 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":"NumberCell1670673624__root"};
+export var classes = {"root":"NumberCell218915555__root"};
 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_ = "TabsFilter1692014240";
+var _namespace_ = "TabsFilter2577241363";
 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":"TabsFilter1692014240__root","titleBox":"TabsFilter1692014240__titleBox"};
+export var classes = {"root":"TabsFilter2577241363__root","titleBox":"TabsFilter2577241363__titleBox"};
 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_ = "ManageTagsModal1828960394";
+var _namespace_ = "ManageTagsModal1016869396";
 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":"ManageTagsModal1828960394__root"};
+export var classes = {"root":"ManageTagsModal1016869396__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_ = "ToolbarItem746094005";
+var _namespace_ = "ToolbarItem341992879";
 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":"ToolbarItem746094005__root"};
+export var classes = {"root":"ToolbarItem341992879__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_ = "ToolbarItemBox2484931942";
+var _namespace_ = "ToolbarItemBox3308969475";
 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":"ToolbarItemBox2484931942__root"};
+export var classes = {"root":"ToolbarItemBox3308969475__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_ = "common463512055";
+var _namespace_ = "common3814229212";
 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":"common463512055__root","column":"common463512055__column","fullHeight":"common463512055__fullHeight"};
+export var classes = {"root":"common3814229212__root","column":"common3814229212__column","fullHeight":"common3814229212__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/hooks/useOptionalCachedState.ts

@@ -67,7 +67,10 @@ export function useOptionalCachedState<S extends ICollectionComponentState>(
 ): S {
   const container = useWixPatternsContainer();
   const router = useWixPatternsRouter();
-  const [maybeNewState] = useState<S>(() => createState());
+  const [maybeNewState] = useState<S>(() => {
+    router?.dropCacheIfFieldsChanged();
+    return createState();
+  });
   const uniqueId = getCollectionComponentUniqueId(maybeNewState);
 
   const [cachedState] = useState<S | undefined>(

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader1806512227";
+var _namespace_ = "CollectionPageHeader3311006848";
 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":"CollectionPageHeader1806512227__root","mobileMoreActions":"CollectionPageHeader1806512227__mobileMoreActions"};
+export var classes = {"root":"CollectionPageHeader3311006848__root","mobileMoreActions":"CollectionPageHeader3311006848__mobileMoreActions"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TitleBadges1040141928";
+var _namespace_ = "TitleBadges3914608263";
 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":"TitleBadges1040141928__root","tooltip":"TitleBadges1040141928__tooltip","tooltipTrigger":"TitleBadges1040141928__tooltipTrigger"};
+export var classes = {"root":"TitleBadges3914608263__root","tooltip":"TitleBadges3914608263__tooltip","tooltipTrigger":"TitleBadges3914608263__tooltipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/CustomFields/CustomFieldsPanelState.ts

@@ -112,6 +112,16 @@ export class CustomFieldsPanelState {
     return this.fieldsSource.archive;
   }
 
+  private getFieldTypeLocks(fieldId?: string) {
+    const field = fieldId
+      ? this.fieldsSource.fields.find((candidate) => candidate.id === fieldId)
+      : undefined;
+    return field
+      ? resolveFieldTypeDefinition(this.fieldsSource, field)?.fieldModal
+          ?.lockedProperties ?? []
+      : [];
+  }
+
   openCustomFieldModal(
     params: Omit<OpenFieldModalOptions, 'origin'> & {
       origin: CustomFieldOrigin;
@@ -124,7 +134,10 @@ export class CustomFieldsPanelState {
     customFieldModal.mode = params.fieldId ? 'edit' : 'new';
     customFieldModal.origin = params.origin;
     customFieldModal.customOrigin = params.customOrigin;
-    customFieldModal.lockedProperties = params.lockedProperties ?? [];
+    const typeLocks = this.getFieldTypeLocks(params.fieldId);
+    customFieldModal.lockedProperties = [
+      ...new Set([...typeLocks, ...(params.lockedProperties ?? [])]),
+    ];
     customFieldModal.onSave = params.onSave;
 
     !params.fieldId &&

package/src/state/EntityPage/EntityPageState.ts

@@ -371,6 +371,10 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
     return this._loadedSchema;
   }
 
+  markFieldsChanged() {
+    this._routerState?.markFieldsChanged();
+  }
+
   get isFetching() {
     return this.formPage.isFetching;
   }

package/src/state/EntityPageFieldsCardState.ts

@@ -189,12 +189,16 @@ export class EntityPageFieldsCardState {
       // its own copy, so update both public views of it together.
       reaction(
         () => this.sourceState?.loadedSchema,
-        (loadedSchema) => {
+        (loadedSchema, previous) => {
           if (!loadedSchema) {
             return;
           }
           this.params.pageState.setLoadedSchema(loadedSchema);
           this.params.pageState.setSchema(loadedSchema.schema);
+          // The first value is the load; every later one is a field mutation.
+          if (previous) {
+            this.params.pageState.markFieldsChanged();
+          }
         },
       ),
       this.cardState.init(),

package/src/state/FormPage/FormPageHeader.st.css.ts

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

package/src/state/WixPatternsRouterState.ts

@@ -1,7 +1,11 @@
 import { action, makeObservable, observable } from 'mobx';
 import { getCollectionComponentUniqueId } from '../utils/getCollectionComponentUniqueId';
 import { ICollectionComponentState } from './ICollectionComponentState';
-import { NavigateOptions, WixPatternsContainer } from '@wix/bex-core';
+import {
+  NavigateOptions,
+  QueryCache,
+  WixPatternsContainer,
+} from '@wix/bex-core';
 import { NavigateFunction } from 'react-router-dom';
 
 interface WixPatternsRouterStateParams {
@@ -24,6 +28,7 @@ export class WixPatternsRouterState {
   currentState: RouteState = null;
   isUsingCache = false;
   isCollectionStale = false;
+  private fieldsChanged = false;
 
   constructor(params: WixPatternsRouterStateParams) {
     this.container = params.container;
@@ -45,6 +50,19 @@ export class WixPatternsRouterState {
     this.stateRefs.set(uniqueId, state);
   }
 
+  markFieldsChanged() {
+    this.fieldsChanged = true;
+  }
+
+  dropCacheIfFieldsChanged() {
+    if (!this.fieldsChanged) {
+      return;
+    }
+    this.fieldsChanged = false;
+    this.stateRefs.clear();
+    this.container.queryCache = new QueryCache();
+  }
+
   navigate(to: string, options: NavigateOptions): void {
     this.setCurrentState(options.state);
     this._navigate?.(to, options);