@wix/patterns 1.432.0 → 1.434.0

package/src/components/SchemaSource/schemaFieldManagement.ts

@@ -11,7 +11,7 @@ import { standardFieldTypeLabels } from './standardFieldTypeLabels';
  * Builds the source-neutral FieldManagement over a source's state. add/edit/
  * delete call the schema's FieldActions, then merge the returned fields into
  * the loaded schema so the columns update from the response (no reload). The
- * creatable types, permissions, and can-edit/add rules come from the source.
+ * field modal, permissions, and can-edit/add rules come from the source.
  */
 export const schemaFieldManagement = (
   sourceState: SourceState<any>,
@@ -34,20 +34,6 @@ export const schemaFieldManagement = (
       const { schema, source } = sourceState;
       return schema ? source.canEditField(field, schema) : false;
     },
-    supportsPii: sourceState.source.supportsPii,
-    get piiWarning() {
-      return sourceState.source.piiWarning?.();
-    },
-    permissions: sourceState.source.fieldPermissions,
-    get fieldModalText() {
-      const t = sourceState.container.translate;
-      return (
-        sourceState.source.fieldModalText ?? {
-          addTitle: t('cairo.customFields.addCustomField.modal.title'),
-          editTitle: t('cairo.customFields.editCustomField.modal.title'),
-        }
-      );
-    },
     // Self-contained: does the delete and reports its own toast (matching the
     // DataExtension source). Rethrows on failure so the shared delete modal stays
     // open for a retry.
@@ -72,29 +58,40 @@ export const schemaFieldManagement = (
       }
     },
 
-    get creatableFieldTypes() {
+    get fieldModal() {
       const t = sourceState.container.translate;
-      return sourceState.source.creatableFieldTypes.map((ft) => {
-        // The standard pair applies only when the source didn't custom-label
-        // the entry — a custom label with the standard placeholder would show
-        // contradictory copy (the modal falls back to its generic placeholder).
-        const standard =
-          ft.label == null
-            ? standardFieldTypeLabels[ft.patternsType]
-            : undefined;
-        return {
-          id: ft.patternsType,
-          label:
-            ft.label ?? (standard ? t(standard.labelKey) : ft.patternsType),
-          namePlaceholder:
-            ft.namePlaceholder ??
-            (standard ? t(standard.namePlaceholderKey) : undefined),
-          subtitle: ft.subtitle,
-          group: ft.group,
-          supportsPii: ft.supportsPii,
-          patternsType: ft.patternsType,
-        };
-      });
+      const { fieldModal } = sourceState.source;
+      return {
+        text: fieldModal.text ?? {
+          addTitle: t('cairo.customFields.addCustomField.modal.title'),
+          editTitle: t('cairo.customFields.editCustomField.modal.title'),
+        },
+        types: fieldModal.types.map((ft) => {
+          // The standard pair applies only when the source didn't custom-label
+          // the entry — a custom label with the standard placeholder would show
+          // contradictory copy (the modal falls back to its generic placeholder).
+          const standard =
+            ft.label == null
+              ? standardFieldTypeLabels[ft.patternsType]
+              : undefined;
+          return {
+            id: ft.patternsType,
+            label:
+              ft.label ?? (standard ? t(standard.labelKey) : ft.patternsType),
+            namePlaceholder:
+              ft.namePlaceholder ??
+              (standard ? t(standard.namePlaceholderKey) : undefined),
+            subtitle: ft.subtitle,
+            group: ft.group,
+            supportsPii: ft.supportsPii,
+            piiWarning: ft.piiWarning,
+            settingsSection: ft.settingsSection,
+            patternsType: ft.patternsType,
+          };
+        }),
+        permissions: sourceState.source.fieldPermissions,
+        supportsPii: sourceState.source.supportsPii,
+      };
     },
     get existingFieldKeys() {
       return sourceState.fields.map((f) => f.id);
@@ -103,15 +100,18 @@ export const schemaFieldManagement = (
     addField: async (draft) => {
       const fields = await sourceState.fieldActions?.addField?.(
         draftToField(draft),
+        draft.settings,
       );
       if (fields) {
         runInAction(() => sourceState.mergeFields(fields));
       }
     },
     editField: async (fieldId, draft) => {
-      const fields = await sourceState.fieldActions?.editField?.(fieldId, {
-        displayName: draft.name,
-      });
+      const fields = await sourceState.fieldActions?.editField?.(
+        fieldId,
+        { displayName: draft.name },
+        draft.settings,
+      );
       if (fields) {
         runInAction(() => sourceState.mergeFields(fields));
       }
@@ -130,6 +130,7 @@ export const schemaFieldManagement = (
         writeApps: false,
         writeUsers: false,
         containsPii: field.isPii ?? false,
+        field,
       };
     },
   };

package/src/components/SchemaSource/standardFieldTypeLabels.ts

@@ -1,8 +1,8 @@
 import type { PatternsFieldType, TranslationsKeys } from '@wix/bex-core';
 
 /**
- * The add-field modal's standard name and name-input placeholder per creatable
- * field type, used when a source declares a type without a custom label.
+ * The add-field modal's standard name and name-input placeholder per field
+ * type, used when a source declares a type without a custom label.
  * NUMBER uses the integer variant's copy.
  */
 export const standardFieldTypeLabels: Partial<

package/src/components/SchemaSource/tableSchemaSource.ts

@@ -74,8 +74,8 @@ class TableSchemaSourceImpl<T> implements TableSchemaSource<T> {
     // wrapper would hand the components a source with no container.
     return (this.source as SchemaSourceWithFields).fieldsContainer;
   }
-  get creatableFieldTypes() {
-    return this.source.creatableFieldTypes;
+  get fieldModal() {
+    return this.source.fieldModal;
   }
   get fieldTypes() {
     return this.source.fieldTypes;

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

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

package/src/components/SetupWidget/SetupStepCard.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import { Box, Text, Divider, Tooltip } from '@wix/design-system';
-import { ChevronRight, ChevronDown, ChevronUp } from '@wix/wix-ui-icons-common/lazy';
+import {
+  ChevronRight,
+  ChevronDown,
+  ChevronUp,
+} from '@wix/wix-ui-icons-common/lazy';
 import { SetupWidgetStep } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { SetupStepIcon } from './SetupStepIcon';

package/src/components/SetupWidget/SetupStepIcon.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import { Box } from '@wix/design-system';
-import { ConfirmSmall, CircleSmallFilledSmall } from '@wix/wix-ui-icons-common/lazy';
+import {
+  ConfirmSmall,
+  CircleSmallFilledSmall,
+} from '@wix/wix-ui-icons-common/lazy';
 import { SetupWidgetStepStatus } from '@wix/bex-core';
 
 /**

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget2654981828";
+var _namespace_ = "SetupWidget122544272";
 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":"SetupWidget2654981828__root","row":"SetupWidget2654981828__row","completedCta":"SetupWidget2654981828__completedCta","card":"SetupWidget2654981828__card","stepIcon":"SetupWidget2654981828__stepIcon","chevron":"SetupWidget2654981828__chevron","chevronDisabled":"SetupWidget2654981828__chevronDisabled","inProgressLabel":"SetupWidget2654981828__inProgressLabel"};
+export var classes = {"root":"SetupWidget122544272__root","row":"SetupWidget122544272__row","completedCta":"SetupWidget122544272__completedCta","card":"SetupWidget122544272__card","stepIcon":"SetupWidget122544272__stepIcon","chevron":"SetupWidget122544272__chevron","chevronDisabled":"SetupWidget122544272__chevronDisabled","inProgressLabel":"SetupWidget122544272__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_ = "SkeletonCard1840186893";
+var _namespace_ = "SkeletonCard2938728785";
 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":"SkeletonCard1840186893__root","headerLoading":"SkeletonCard1840186893__headerLoading"};
+export var classes = {"root":"SkeletonCard2938728785__root","headerLoading":"SkeletonCard2938728785__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_ = "SlidingModal3053485234";
+var _namespace_ = "SlidingModal2563845956";
 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":"SlidingModal3053485234__root"};
+export var classes = {"root":"SlidingModal2563845956__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SlidingModal/SlidingModal.tsx

@@ -8,6 +8,7 @@ import React, {
 } from 'react';
 import { st, classes } from './SlidingModal.st.css.js';
 import { scopeTab } from './scopeTab';
+import { version as cairoVersion } from '../../version';
 
 export interface SlidingModalProps {
   dataHook?: string;
@@ -126,6 +127,7 @@ export function SlidingModal(props: SlidingModalProps) {
         contentRef?.(el);
       }}
       data-hook={dataHook}
+      data-wix-patterns={cairoVersion}
       data-transition-status={transitionStatus}
       className={st(
         classes.root,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AddFieldColumnHeader2380146996";
+var _namespace_ = "AddFieldColumnHeader1409429537";
 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":"AddFieldColumnHeader2380146996__root","title":"AddFieldColumnHeader2380146996__title","hoverBridge":"AddFieldColumnHeader2380146996__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader1409429537__root","title":"AddFieldColumnHeader1409429537__title","hoverBridge":"AddFieldColumnHeader1409429537__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/TabsFilter/TabsDefault.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Tabs } from '@wix/design-system';
+import { Tabs, TabsProps } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
 import { Filter, FiltersMap } from '@wix/bex-core';
-import { ALL_TAB_ITEM_ID, TabsFilterItem, TabsFilterItemBase } from './types';
+import { ALL_TAB_ITEM_ID, TabsFilterItemBase, TabsFilterItem } from './types';
 import { TabsFilterState } from './TabsFilterState';
 
 export interface TabsDefaultProps<V, T, F extends FiltersMap> {
@@ -12,6 +12,7 @@ export interface TabsDefaultProps<V, T, F extends FiltersMap> {
   selectedId: string;
   state: TabsFilterState<T, F>;
   type?: 'uniformFull';
+  size?: TabsProps['size'];
   onChange?: (value: V | null | undefined) => unknown;
   all?: string | null | false;
 }
@@ -19,7 +20,7 @@ export interface TabsDefaultProps<V, T, F extends FiltersMap> {
 function _TabsDefault<V, T, F extends FiltersMap>(
   props: TabsDefaultProps<V, T, F>,
 ) {
-  const { state, filter, selectedId, items, type, onChange, all } = props;
+  const { state, filter, selectedId, items, type, size, onChange, all } = props;
   const { itemKey } = filter;
 
   const { responsive } = state;
@@ -49,6 +50,7 @@ function _TabsDefault<V, T, F extends FiltersMap>(
         filter.refresh(values);
       }}
       type={type}
+      size={size}
       items={items}
       hasDivider={false}
     />

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

@@ -1,8 +1,12 @@
 @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(--wds-tabs-label-font-size-medium);
+@property st-global(--wds-tabs-label-line-height-medium);
 @property st-global(--wsr-color-B10);
 @property st-global(--wsr-color-D10);
+@property st-global(--wsr-text-font-size-medium);
+@property st-global(--wsr-text-line-height-medium);
 
 .root {
   -st-states: selected;
@@ -10,6 +14,8 @@
 
 .root .title {
   color: var(--wds-tabs-label-fill, var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624)));
+  font-size: var(--wds-tabs-label-font-size-medium, var(--wsr-text-font-size-medium, 16px));
+  line-height: var(--wds-tabs-label-line-height-medium, var(--wsr-text-line-height-medium, 22px));
 }
 
 .root:selected .title,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter773415960";
+var _namespace_ = "TabsFilter2813371047";
 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":"TabsFilter773415960__root","title":"TabsFilter773415960__title"};
+export var classes = {"root":"TabsFilter2813371047__root","title":"TabsFilter2813371047__title"};
 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 = {"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","wds-tabs-label-font-size-medium":"--wds-tabs-label-font-size-medium","wds-tabs-label-line-height-medium":"--wds-tabs-label-line-height-medium","wsr-color-B10":"--wsr-color-B10","wsr-color-D10":"--wsr-color-D10","wsr-text-font-size-medium":"--wsr-text-font-size-medium","wsr-text-line-height-medium":"--wsr-text-line-height-medium"}; 
 
 
 

package/src/components/TabsFilter/TabsFilter.tsx

@@ -9,6 +9,7 @@ import { Box, DropdownProps, TabsProps } from '@wix/design-system';
 import { Filter } from '@wix/bex-core';
 import { runInAction } from 'mobx';
 import { FilterContextProvider } from '../FilterContext';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import { observer } from 'mobx-react-lite';
 import { TabTitle } from './TabTitle';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
@@ -91,6 +92,7 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
     mobilePopoverProps,
   } = props;
   const { itemKey, itemName } = filter;
+  const size = useBmHarmonyTheme() ? 'small' : undefined;
 
   const table = useToolbarCollectionContext();
   const filterAllValueTotal = useFilterValueTotalState({
@@ -229,6 +231,7 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
             state={state}
             onChange={onChange}
             type={type}
+            size={size}
             all={all}
           />
         ) : (

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

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

package/src/components/TagsAssignButton/TagsAssignButton.tsx

@@ -48,7 +48,6 @@ const _TagsAssignButton = () => {
               dataHook="tags-assign-button-disabled-tooltip"
             >
               <Button
-                skin="standard"
                 priority="secondary"
                 size="small"
                 ellipsis

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem236369946";
+var _namespace_ = "ToolbarItem2624997349";
 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":"ToolbarItem236369946__root"};
+export var classes = {"root":"ToolbarItem2624997349__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_ = "ToolbarItemBox2074326680";
+var _namespace_ = "ToolbarItemBox3168569819";
 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":"ToolbarItemBox2074326680__root"};
+export var classes = {"root":"ToolbarItemBox3168569819__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_ = "common3243586050";
+var _namespace_ = "common3154596631";
 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":"common3243586050__root","column":"common3243586050__column","fullHeight":"common3243586050__fullHeight"};
+export var classes = {"root":"common3154596631__root","column":"common3154596631__column","fullHeight":"common3154596631__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/exports/schema.ts

@@ -36,11 +36,15 @@ export { defineSchemaSource, sourceFetchData } from '@wix/bex-core';
 export type {
   SchemaSource,
   SchemaSourceInput,
-  CreatableFieldType,
+  FieldModalInput,
+  FieldTypeOption,
   Schema,
   LoadedSchema,
   SchemaLoader,
   CollectionBackend,
   CollectionBackendBase,
   FieldActions,
+  FieldSettings,
+  FieldSettingsProps,
+  FieldSettingsSection,
 } from '@wix/bex-core';

package/src/hooks/useEditableTableCollection.ts

@@ -21,7 +21,7 @@ export type EditableTableCollectionConfig<
   T,
   F extends FiltersMap,
 > = CollectionConfigWithConditionals<T, F> & {
-  permissions?: EditableTablePermissions;
+  permissions?: EditableTablePermissions<T>;
   mutations: EditableTableMutationHandlers<T>;
   optimisticActionParams?: Partial<CollectionOptimisticActionsBaseParams<T, F>>;
   /**

package/src/hooks/useOpenCollectionOverlay.ts

@@ -45,16 +45,12 @@ export function useOpenCollectionOverlay({
       if (!collectionId || !navigateTo || !pageLocation) {
         return;
       }
-      // Preserve the current route (pathname, existing query params, hash) and
-      // only swap in the referenced collectionId, so nested routes and required
-      // query state survive the navigation.
-      const params = new URLSearchParams(pageLocation.search);
+
+      const params = new URLSearchParams();
       params.set('collectionId', collectionId);
       navigateTo({
         pageId: pageLocation.pageId,
-        relativeUrl: `${pageLocation.pathname}?${params.toString()}${
-          pageLocation.hash ?? ''
-        }`,
+        relativeUrl: `?${params.toString()}`,
         displayMode: 'overlay',
         history: 'replace',
       });

package/src/schema/syncSourcePermissions.ts

@@ -1,4 +1,4 @@
-import { autorun, runInAction } from 'mobx';
+import { autorun } from 'mobx';
 import type { FiltersMap, SourceState } from '@wix/bex-core';
 import type { EditableTableState } from '../state/EditableTable';
 
@@ -6,7 +6,9 @@ import type { EditableTableState } from '../state/EditableTable';
  * Keeps an editable table's row-action flags in sync with its source: an action
  * is disabled when the source denies the permission (`schema.itemPermissions`)
  * OR the backend can't perform it (the write method is absent, e.g. a read-only
- * source). Reactive because the schema loads asynchronously. Returns a disposer.
+ * source). The source is the only permission input — schema-entry tables do not
+ * accept consumer-supplied permissions. Reactive because the schema loads
+ * asynchronously. Returns a disposer.
  */
 export function syncSourcePermissions<T, F extends FiltersMap>(
   state: EditableTableState<T, F>,
@@ -16,12 +18,19 @@ export function syncSourcePermissions<T, F extends FiltersMap>(
     const loaded = sourceState.loadedSchema;
     const perms = loaded?.schema.itemPermissions;
     const backend = loaded?.backend;
-    runInAction(() => {
-      state.addItemDisabled = !(perms?.createItem ?? true) || !backend?.create;
-      state.updateItemDisabled =
-        !(perms?.updateItem ?? true) || !backend?.update;
-      state.removeItemDisabled =
-        !(perms?.deleteItem ?? true) || !backend?.bulkDelete;
+
+    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,
+      isRemoveItemDisabled: isRemoveItemDisabled
+        ? (item: T) => isRemoveItemDisabled(item as Record<string, unknown>)
+        : undefined,
     });
   });
 }

package/src/schema/useLayoutSwitchCollection.ts

@@ -29,9 +29,11 @@ export type SchemaLayoutSwitchCollectionOptions<
 > = SchemaCollectionOptions<T, F> & {
   table?: TableLayoutConfig;
   grid?: GridLayoutConfig;
+  // No `permissions` either: row-action permissions are source-driven
+  // (schema.itemPermissions + backend capabilities), not consumer-supplied.
   spreadsheet?: Omit<
     SpreadsheetLayoutConfig<T, F>,
-    'createOptimisticActions' | 'mutations'
+    'createOptimisticActions' | 'mutations' | 'permissions'
   >;
 };
 

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

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