@wix/patterns 1.496.0 → 1.498.0

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar2917075844";
+var _namespace_ = "MultiBulkActionToolbar1247603396";
 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":"MultiBulkActionToolbar2917075844__root","leftGroupWrapper":"MultiBulkActionToolbar2917075844__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2917075844__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2917075844__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar1247603396__root","leftGroupWrapper":"MultiBulkActionToolbar1247603396__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1247603396__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1247603396__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

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

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow3992930584";
+var _namespace_ = "NestedTableRow671921928";
 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":"NestedTableRow3992930584__root","firstLevel":"NestedTableRow3992930584__firstLevel","placeholder":"NestedTableRow3992930584__placeholder","parentHovered":"NestedTableRow3992930584__parentHovered"};
+export var classes = {"root":"NestedTableRow671921928__root","firstLevel":"NestedTableRow671921928__firstLevel","placeholder":"NestedTableRow671921928__placeholder","parentHovered":"NestedTableRow671921928__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

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

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_ = "PickerContent3592524932";
 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":"PickerContent3592524932__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_ = "PickerContentAdditionalStep19696875";
 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":"PickerContentAdditionalStep19696875__root","titles":"PickerContentAdditionalStep19696875__titles","suffix":"PickerContentAdditionalStep19696875__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_ = "PickerTableListItem3863105122";
 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":"PickerTableListItem3863105122__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_ = "ScrollableContent4148828866";
 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":"ScrollableContent4148828866__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_ = "SetupWidget994892369";
 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":"SetupWidget994892369__root","row":"SetupWidget994892369__row","completedCta":"SetupWidget994892369__completedCta","secondaryCta":"SetupWidget994892369__secondaryCta","card":"SetupWidget994892369__card","stepIcon":"SetupWidget994892369__stepIcon","chevron":"SetupWidget994892369__chevron","chevronDisabled":"SetupWidget994892369__chevronDisabled","inProgressLabel":"SetupWidget994892369__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_ = "SkeletonCard3316434517";
 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":"SkeletonCard3316434517__root","headerLoading":"SkeletonCard3316434517__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_ = "SlidingModal1726289212";
 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":"SlidingModal1726289212__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_ = "AddFieldColumnHeader261273616";
 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":"AddFieldColumnHeader261273616__root","anchorLayer":"AddFieldColumnHeader261273616__anchorLayer","popover":"AddFieldColumnHeader261273616__popover","title":"AddFieldColumnHeader261273616__title","hoverBridge":"AddFieldColumnHeader261273616__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_ = "NumberCell2337029218";
 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":"NumberCell2337029218__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_ = "TabsFilter1483518244";
 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":"TabsFilter1483518244__root","titleBox":"TabsFilter1483518244__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_ = "ManageTagsModal1650527282";
 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":"ManageTagsModal1650527282__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_ = "ToolbarItem3191019945";
 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":"ToolbarItem3191019945__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_ = "ToolbarItemBox2331186614";
 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":"ToolbarItemBox2331186614__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_ = "common2479329430";
 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":"common2479329430__root","column":"common2479329430__column","fullHeight":"common2479329430__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/model/itemAccess.ts

@@ -0,0 +1,36 @@
+import type { CollectionBackend, ItemPermissions } from '@wix/bex-core';
+
+interface ItemActions {
+  create: boolean;
+  update: boolean;
+  delete: boolean;
+  bulkDelete: boolean;
+}
+
+export interface ItemAccess {
+  /** What the item permissions allow. An unset permission allows the action. */
+  permitted: ItemActions;
+  /** Which write methods the backend has. */
+  supported: ItemActions;
+}
+
+export function getItemAccess(
+  permissions: ItemPermissions<any> | undefined,
+  backend: CollectionBackend<any> | undefined,
+): ItemAccess {
+  return {
+    permitted: {
+      create: permissions?.createItem ?? true,
+      update: permissions?.updateItem ?? true,
+      delete: permissions?.deleteItem ?? true,
+      bulkDelete:
+        permissions?.bulkDeleteItems ?? permissions?.deleteItem ?? true,
+    },
+    supported: {
+      create: !!backend?.create,
+      update: !!backend?.update,
+      delete: !!backend?.delete,
+      bulkDelete: !!backend?.bulkDelete,
+    },
+  };
+}

package/src/schema/syncSourcePermissions.ts

@@ -1,6 +1,7 @@
 import { autorun } from 'mobx';
 import type { FiltersMap, SourceState } from '@wix/bex-core';
 import type { EditableTableState } from '../state/EditableTable';
+import { getItemAccess } from '../model/itemAccess';
 
 /**
  * Keeps an editable table's row-action flags in sync with its source: an action
@@ -19,15 +20,14 @@ export function syncSourcePermissions<T, F extends FiltersMap>(
     const perms = loaded?.schema.itemPermissions;
     const backend = loaded?.backend;
 
+    const { permitted, supported } = getItemAccess(perms, backend);
     const isRemoveItemDisabled = perms?.isRemoveItemDisabled;
 
     state.setPermissions({
-      addItemDisabled: !(perms?.createItem ?? true) || !backend?.create,
-      updateItemDisabled: !(perms?.updateItem ?? true) || !backend?.update,
-      removeItemDisabled: !(perms?.deleteItem ?? true) || !backend?.bulkDelete,
-      multiDeleteDisabled:
-        !(perms?.bulkDeleteItems ?? perms?.deleteItem ?? true) ||
-        !backend?.bulkDelete,
+      addItemDisabled: !permitted.create || !supported.create,
+      updateItemDisabled: !permitted.update || !supported.update,
+      removeItemDisabled: !permitted.delete || !supported.bulkDelete,
+      multiDeleteDisabled: !permitted.bulkDelete || !supported.bulkDelete,
       isCreateItemDisabled: perms?.isCreateItemDisabled,
       isRemoveItemDisabled: isRemoveItemDisabled
         ? (item: T) => isRemoveItemDisabled(item as Record<string, unknown>)

package/src/schema/useEntityPage.ts

@@ -1,7 +1,9 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { observable, runInAction } from 'mobx';
 import type { FieldValues } from 'react-hook-form';
 import type { SchemaSource } from '@wix/bex-core';
 import type { EntityPageDeleteAction, EntityPageState } from '../state';
+import { markSourceSave } from '../state/EntityPage/sourceSave';
 import {
   useEntityPage as useOpenEntityPage,
   type UseEntityPageParams,
@@ -41,8 +43,19 @@ export function useEntityPage<T, V extends FieldValues = FieldValues>(
   // 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
   // entity) and the latest entityId (a re-fetch should read the current one).
-  const [page] = useState<PageRef<T, V>>(() => ({}));
-  page.entityId = entityId;
+  // entityId is observable so the page's create/update permission follows it.
+  const [page] = useState(() =>
+    observable<PageRef<T, V>>(
+      { entityId, state: undefined },
+      { state: false },
+      { deep: false },
+    ),
+  );
+  useEffect(() => {
+    runInAction(() => {
+      page.entityId = entityId;
+    });
+  }, [page, entityId]);
 
   const state = useOpenEntityPage<T, V>({
     ...rest,
@@ -50,7 +63,7 @@ export function useEntityPage<T, V extends FieldValues = FieldValues>(
     isNewEntity: () => !page.entityId,
     fetch:
       fetch ?? (() => fetchFromSource(source, page.entityId, createLocalItem)),
-    onSave: onSave ?? (() => saveToSource(source, page)),
+    onSave: onSave ?? markSourceSave(() => saveToSource(source, page)),
     deleteAction: resolveDeleteAction(page, deleteAction),
   } as UseEntityPageParams<T, V>);
 

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_ = "CollectionPageHeader1248869590";
 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":"CollectionPageHeader1248869590__root","mobileMoreActions":"CollectionPageHeader1248869590__mobileMoreActions"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};