@wix/patterns 1.385.0 → 1.388.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow447893025";
+var _namespace_ = "NestedTableRow2460612389";
 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":"NestedTableRow447893025__root","firstLevel":"NestedTableRow447893025__firstLevel","placeholder":"NestedTableRow447893025__placeholder","parentHovered":"NestedTableRow447893025__parentHovered"};
+export var classes = {"root":"NestedTableRow2460612389__root","firstLevel":"NestedTableRow2460612389__firstLevel","placeholder":"NestedTableRow2460612389__placeholder","parentHovered":"NestedTableRow2460612389__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_ = "MultipleDragOverlayEffect2685672979";
+var _namespace_ = "MultipleDragOverlayEffect1249922194";
 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":"MultipleDragOverlayEffect2685672979__root"};
+export var classes = {"root":"MultipleDragOverlayEffect1249922194__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_ = "NestedTableDragAndDropRow1881623806";
+var _namespace_ = "NestedTableDragAndDropRow4174353810";
 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":"NestedTableDragAndDropRow1881623806__root"};
+export var classes = {"root":"NestedTableDragAndDropRow4174353810__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_ = "PickerContent125126466";
+var _namespace_ = "PickerContent3973713495";
 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":"PickerContent125126466__root"};
+export var classes = {"root":"PickerContent3973713495__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_ = "PickerContentAdditionalStep2884149236";
+var _namespace_ = "PickerContentAdditionalStep2016124852";
 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":"PickerContentAdditionalStep2884149236__root","titles":"PickerContentAdditionalStep2884149236__titles","suffix":"PickerContentAdditionalStep2884149236__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep2016124852__root","titles":"PickerContentAdditionalStep2016124852__titles","suffix":"PickerContentAdditionalStep2016124852__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_ = "PickerTableListItem3776807060";
+var _namespace_ = "PickerTableListItem2433074301";
 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":"PickerTableListItem3776807060__root"};
+export var classes = {"root":"PickerTableListItem2433074301__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SchemaCard/SchemaCard.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Button, Card, CardProps } from '@wix/design-system';
+import { Button, Card, CardProps, Layout } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
 import { useWixPatternsContainer, usePageContext } from '@wix/bex-core/react';
 import { SidePanelsState } from '../../state/SidePanelsState';
@@ -90,10 +90,12 @@ function _SchemaCard({
       />
       <Card.Divider />
       <Card.Content>
-        {fieldsState &&
-          fieldsState.orderedFields
-            .filter((f) => fieldsState.isFieldVisible(f.id))
-            .map((f) => renderField(f.id))}
+        <Layout>
+          {fieldsState &&
+            fieldsState.orderedFields
+              .filter((f) => fieldsState.isFieldVisible(f.id))
+              .map((f) => renderField(f.id))}
+        </Layout>
       </Card.Content>
       {state && <CustomColumnsEntityPageCTA state={state} />}
     </Card>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent2351431343";
+var _namespace_ = "ScrollableContent2625116042";
 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":"ScrollableContent2351431343__root"};
+export var classes = {"root":"ScrollableContent2625116042__root"};
 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_ = "SkeletonCard472246820";
+var _namespace_ = "SkeletonCard567081106";
 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":"SkeletonCard472246820__root","headerLoading":"SkeletonCard472246820__headerLoading"};
+export var classes = {"root":"SkeletonCard567081106__root","headerLoading":"SkeletonCard567081106__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_ = "SlidingModal3963588508";
+var _namespace_ = "SlidingModal1034207869";
 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":"SlidingModal3963588508__root"};
+export var classes = {"root":"SlidingModal1034207869__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_ = "TabsFilter2765541283";
+var _namespace_ = "TabsFilter118117328";
 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":"TabsFilter2765541283__root","title":"TabsFilter2765541283__title"};
+export var classes = {"root":"TabsFilter118117328__root","title":"TabsFilter118117328__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/TagsFilter/TagsFilter.tsx

@@ -43,14 +43,16 @@ export const _TagsFilter = ({ filter }: TagsFilterProps) => {
         {},
         {
           serverErrorOverride: () => ({
-            message: t(
-              'cairo.tags.collectionPage.popover.loadTags.error.body',
-            ),
+            message: t('cairo.tags.collectionPage.popover.loadTags.error.body'),
           }),
         },
       );
 
-      return { items: result.items, cursor: result.cursor, hasNext: result.hasNext };
+      return {
+        items: result.items,
+        cursor: result.cursor,
+        hasNext: result.hasNext,
+      };
     },
   });
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem1722452606";
+var _namespace_ = "ToolbarItem4246765503";
 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":"ToolbarItem1722452606__root"};
+export var classes = {"root":"ToolbarItem4246765503__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_ = "ToolbarItemBox133583237";
+var _namespace_ = "ToolbarItemBox1967016999";
 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":"ToolbarItemBox133583237__root"};
+export var classes = {"root":"ToolbarItemBox1967016999__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_ = "common1028938793";
+var _namespace_ = "common3424099641";
 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":"common1028938793__root","column":"common1028938793__column","fullHeight":"common1028938793__fullHeight"};
+export var classes = {"root":"common3424099641__root","column":"common3424099641__column","fullHeight":"common3424099641__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/index.ts

@@ -167,6 +167,13 @@ export { NestedTableDragAndDrop } from './components/NestedTableDragAndDrop/Nest
 export { DragAndDropSubmit, IndexedItem } from './components/DragAndDrop';
 
 export { DataExtension } from './components/DataExtension';
+export type {
+  SchemaConfig,
+  Field,
+  FieldSpec,
+  CategoryCollectionInfo,
+  PatternsFieldType,
+} from './types/SchemaConfig';
 export { transformCustomFiltersToWQL } from './components/CustomFieldsTransforms/transformCustomFiltersToWQL';
 export { transformOperatorFilterToWQL } from './components/CustomFieldsTransforms/transformOperatorFilterToWQL';
 export { transformSortToWQL } from './components/CustomFieldsTransforms/transformSortToWQL';

package/src/providers/{SchemaContext.tsx → SchemaContext.ts}

@@ -5,6 +5,8 @@ export type { FieldActions, SchemaConfig };
 
 export type SchemaContextValue = {
   schema: SchemaConfig;
+  addField?: () => void;
+  editField?: (fieldId: string) => void;
 };
 
 export const SchemaContext = createContext<SchemaContextValue | null>(null);

package/src/providers/SchemaProvider.tsx

@@ -0,0 +1,50 @@
+import React, { ReactNode, useMemo, useRef } from 'react';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { SchemaConfig } from '../types/SchemaConfig';
+import { SchemaContext, SchemaContextValue } from './SchemaContext';
+import { CmsFieldModalState } from '../components/CmsFieldManagement/CmsFieldModalState';
+import { CmsFieldModal } from '../components/CmsFieldManagement/CmsFieldModal';
+
+interface SchemaProviderProps {
+  schema: SchemaConfig;
+  children?: ReactNode;
+}
+
+export const SchemaProvider = ({ schema, children }: SchemaProviderProps) => {
+  const container = useWixPatternsContainer();
+
+  const schemaRef = useRef(schema);
+  schemaRef.current = schema;
+
+  const modalState = useMemo(
+    () =>
+      new CmsFieldModalState(
+        () => schemaRef.current,
+        (e) =>
+          container.errorHandler?.getResolvedError?.(e) ?? {
+            message: e instanceof Error ? e.message : String(e),
+          },
+      ),
+    [container],
+  );
+
+  const value = useMemo<SchemaContextValue>(
+    () => ({
+      schema,
+      ...(schema.fieldActions?.addField && {
+        addField: () => modalState.open(),
+      }),
+      ...(schema.fieldActions?.editField && {
+        editField: (fieldId: string) => modalState.open(fieldId),
+      }),
+    }),
+    [schema, modalState],
+  );
+
+  return (
+    <SchemaContext.Provider value={value}>
+      {children}
+      <CmsFieldModal state={modalState} />
+    </SchemaContext.Provider>
+  );
+};

package/src/providers/index.ts

@@ -12,3 +12,4 @@ export * from './ScrollableContentContext';
 export * from './DropdownTranslationProvider';
 export * from './FilterTranslationProvider';
 export * from './SchemaContext';
+export * from './SchemaProvider';

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

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

package/src/state/EditableTable/EditableTableState.ts

@@ -20,12 +20,9 @@ import { FieldActionsState } from './FieldActionsState';
 import type { EditableTableMutationHandlers } from './MutationState';
 import type { Cell, EditableColumn, ValidationResult } from './types';
 import type { FieldActions } from '../../types/SchemaConfig';
+import type { FieldActionPermissions } from '../../components/FieldActions';
 
-export interface EditableTableFieldActionsPermissions {
-  addDisabled?: boolean;
-  editDisabled?: boolean;
-  deleteDisabled?: boolean;
-}
+export type EditableTableFieldActionsPermissions = FieldActionPermissions;
 
 export interface EditableTablePermissions {
   addItemDisabled?: boolean;
@@ -114,6 +111,7 @@ export class EditableTableState<T, F extends FiltersMap>
       params.collection.translate,
       params.fieldActions,
       params.permissions?.fieldActions,
+      params.collection.showToast,
     );
 
     makeObservable(this, {

package/src/state/EditableTable/FieldActionsState.ts

@@ -1,6 +1,11 @@
 import { action, makeObservable } from 'mobx';
 import { ConditionalModalState, TaskState } from '@wix/bex-core';
-import type { Translate } from '@wix/bex-core';
+import type {
+  RemoveToast,
+  ShowToast,
+  ToastConfig,
+  Translate,
+} from '@wix/bex-core';
 import type { MessageModalLayoutProps } from '@wix/design-system';
 import type { FieldActions } from '../../types/SchemaConfig';
 import type { EditableTableFieldActionsPermissions } from './EditableTableState';
@@ -9,25 +14,44 @@ export class FieldActionsState {
   readonly handlers: FieldActions | undefined;
   readonly permissions: EditableTableFieldActionsPermissions | undefined;
   readonly translate: Translate;
+  readonly showToast: ShowToast | undefined;
+
+  private _currentToastRemove: RemoveToast | undefined;
 
   readonly confirmModal = new ConditionalModalState<
     Partial<MessageModalLayoutProps>
   >();
   readonly deleteTask = new TaskState<unknown>();
+  readonly makePrimaryTask = new TaskState<unknown>();
+  readonly duplicateTask = new TaskState<unknown>();
+  readonly duplicateWithContentTask = new TaskState<unknown>();
 
   constructor(
     translate: Translate,
     handlers?: FieldActions,
     permissions?: EditableTableFieldActionsPermissions,
+    showToast?: ShowToast,
   ) {
     this.translate = translate;
     this.handlers = handlers;
     this.permissions = permissions;
+    this.showToast = showToast;
     makeObservable(this, {
       confirmDelete: action,
+      makePrimary: action,
+      duplicate: action,
+      duplicateWithContent: action,
     });
   }
 
+  private _showToast = (config: ToastConfig) => {
+    if (!this.showToast) {
+      return;
+    }
+    this._currentToastRemove?.();
+    this._currentToastRemove = this.showToast(config).remove;
+  };
+
   confirmDelete(fieldId: string) {
     const deleteField = this.handlers?.deleteField;
     if (!deleteField) {
@@ -46,6 +70,102 @@ export class FieldActionsState {
     });
   }
 
+  async makePrimary(fieldId: string) {
+    const makePrimary = this.handlers?.makePrimary;
+    if (!makePrimary || this.makePrimaryTask.status.isLoading) {
+      return;
+    }
+    await this.makePrimaryTask.run(
+      () => makePrimary(fieldId),
+      (err) => console.error('[EditableTable] makePrimary failed', err),
+    );
+    if (this.makePrimaryTask.status.isSuccess) {
+      this._showToast({
+        type: 'SUCCESS',
+        message: 'Primary field updated',
+        biName: 'cairo-field-action-make-primary-success',
+      });
+    } else if (this.makePrimaryTask.status.isError) {
+      this._showToast({
+        type: 'ERROR',
+        message: "Couldn't update primary field",
+        biName: 'cairo-field-action-make-primary-error',
+        action: {
+          text: 'Try again',
+          onClick: () => this.makePrimary(fieldId),
+          removeToastOnClick: true,
+        },
+      });
+    }
+  }
+
+  async duplicate(fieldId: string) {
+    const duplicateField = this.handlers?.duplicateField;
+    if (
+      !duplicateField ||
+      this.duplicateTask.status.isLoading ||
+      this.duplicateWithContentTask.status.isLoading
+    ) {
+      return;
+    }
+    await this.duplicateTask.run(
+      () => duplicateField(fieldId),
+      (err) => console.error('[EditableTable] duplicateField failed', err),
+    );
+    if (this.duplicateTask.status.isSuccess) {
+      this._showToast({
+        type: 'SUCCESS',
+        message: 'Field duplicated',
+        biName: 'cairo-field-action-duplicate-success',
+      });
+    } else if (this.duplicateTask.status.isError) {
+      this._showToast({
+        type: 'ERROR',
+        message: "Couldn't duplicate field",
+        biName: 'cairo-field-action-duplicate-error',
+        action: {
+          text: 'Try again',
+          onClick: () => this.duplicate(fieldId),
+          removeToastOnClick: true,
+        },
+      });
+    }
+  }
+
+  async duplicateWithContent(fieldId: string) {
+    const duplicateFieldWithContent = this.handlers?.duplicateFieldWithContent;
+    if (
+      !duplicateFieldWithContent ||
+      this.duplicateWithContentTask.status.isLoading ||
+      this.duplicateTask.status.isLoading
+    ) {
+      return;
+    }
+    await this.duplicateWithContentTask.run(
+      () => duplicateFieldWithContent(fieldId),
+      (err) =>
+        console.error('[EditableTable] duplicateFieldWithContent failed', err),
+    );
+    if (this.duplicateWithContentTask.status.isSuccess) {
+      this._showToast({
+        type: 'SUCCESS',
+        message: 'Field duplicated with content',
+        biName: 'cairo-field-action-duplicate-with-content-success',
+      });
+    } else if (this.duplicateWithContentTask.status.isError) {
+      this._showToast({
+        type: 'ERROR',
+        message: "Couldn't duplicate field with content",
+        biName: 'cairo-field-action-duplicate-with-content-error',
+        action: {
+          text: 'Try again',
+          onClick: () => this.duplicateWithContent(fieldId),
+          removeToastOnClick: true,
+        },
+      });
+    }
+  }
+
   private _runDelete = async (
     fieldId: string,
     deleteField: (id: string) => Promise<unknown>,
@@ -56,6 +176,22 @@ export class FieldActionsState {
     );
     if (this.deleteTask.status.isSuccess) {
       this.confirmModal.close();
+      this._showToast({
+        type: 'SUCCESS',
+        message: 'Field deleted',
+        biName: 'cairo-field-action-delete-success',
+      });
+    } else if (this.deleteTask.status.isError) {
+      this._showToast({
+        type: 'ERROR',
+        message: "Couldn't delete field",
+        biName: 'cairo-field-action-delete-error',
+        action: {
+          text: 'Try again',
+          onClick: () => this._runDelete(fieldId, deleteField),
+          removeToastOnClick: true,
+        },
+      });
     }
   };
 }

package/src/state/EditableTable/types.ts

@@ -119,6 +119,12 @@ interface EditableColumnBase<T> extends Omit<TableColumn<T>, 'render'> {
 
   /** Is this column editable? (default: true if setValue exists) */
   editable?: boolean | ((item: T) => boolean);
+
+  /** True if this column represents the schema's primary field. Drives header-action disable rules (e.g. blocks Delete, blocks Make Primary). */
+  isPrimary?: boolean;
+
+  /** True if this column represents a system field. Drives header-action disable rules (e.g. blocks Edit, Delete, Duplicate). */
+  isSystem?: boolean;
 }
 
 export type EditableColumn<

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

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

package/src/state/ViewTypeState.ts

@@ -81,7 +81,9 @@ export class ViewTypeState {
       );
     }
 
-    this.viewType = this.options.includes(newViewType) ? newViewType : this.options[0]!;
+    this.viewType = this.options.includes(newViewType)
+      ? newViewType
+      : this.options[0]!;
     this.dataCapsule.setItem('view-type', this.viewType);
   }