@wix/patterns 1.427.0 → 1.431.0

package/src/state/CollectionFieldsSourceState.ts

@@ -6,9 +6,11 @@ import type {
   CustomFieldOrigin,
   Field,
   Schema,
+  SchemaSource,
   WixPatternsErrorCode,
 } from '@wix/bex-core';
 import type { Column } from '../model';
+import { fieldsContainerOf } from '../model/schemaFieldsContainer';
 import type { ToolbarCollectionState } from './ToolbarCollectionState';
 import { buildFieldColumns, ColumnOverridesContext } from './buildFieldColumns';
 import { handleFieldsSourceLoadError } from './handleFieldsSourceLoadError';
@@ -29,6 +31,13 @@ import {
 import type { FieldActionHandlersConfig } from '../components/FieldActions';
 import type { CustomColumnsBaseProps } from '../components/CustomColumns/CustomColumns';
 
+/** A cell type plus the config its editor needs, for a field the default
+ *  type→cell mapping can't fully resolve on its own. */
+export interface EditableCellUpgrade {
+  cellType: string;
+  typeConfig: unknown;
+}
+
 /** Builds the raw field-management for one field (handlers + registry metadata). */
 type FieldActionHandlersBuilder = (args: {
   fieldId: string;
@@ -59,11 +68,22 @@ export interface FieldsSourceComponents {
  * renders these with shared, source-neutral components.
  */
 export interface FieldsSourceRendering {
+  /** The schema behind this source, when it has one. The collection initializes
+   *  the fields container the schema carries; the components read it off the
+   *  same object for React context. */
+  schemaSource?: SchemaSource<any>;
   /**
    * Lets a source replace any column property the shared builder produces,
    * including the render function for media types. Called per field.
    */
   columnOverrides?(field: Field, ctx: ColumnOverridesContext): Partial<Column>;
+  /**
+   * The editable cell for a field whose editor needs `typeConfig` only the
+   * source can supply (a reference cell's referenced collection). Called per
+   * field when building editable columns; `undefined` keeps the default mapping
+   * for that field type, which for those types is a read-only display.
+   */
+  editableCellFor?(field: Field): EditableCellUpgrade | undefined;
   /** Per-source filter behavior (text operators, decimal, type icon). */
   filterConfig: FieldFilterConfig;
   /**
@@ -114,6 +134,11 @@ export class CollectionFieldsSourceState {
   readonly fieldActionsMenu: FieldActionsMenuBuilder;
   readonly fieldActionHandlers?: FieldActionHandlersBuilder;
   readonly components: FieldsSourceComponents;
+  /** Read by the source-driven components, which put its fields container in
+   *  React context. */
+  readonly schemaSource?: SchemaSource<any>;
+  /** Read by EditableTableState when it builds the source's editable columns. */
+  readonly editableCellFor?: FieldsSourceRendering['editableCellFor'];
   private readonly columnOverrides?: FieldsSourceRendering['columnOverrides'];
   private readonly toolbar: ToolbarCollectionState<any, any>;
   private readonly errorCode: WixPatternsErrorCode;
@@ -131,6 +156,8 @@ export class CollectionFieldsSourceState {
     this.props = params.props;
     this.filterConfig = params.filterConfig;
     this.columnOverrides = params.columnOverrides;
+    this.schemaSource = params.schemaSource;
+    this.editableCellFor = params.editableCellFor;
     this.components = params.components;
     this.errorCode = params.errorCode ?? 'InitCustomFieldsDataExtensionFailed';
 
@@ -177,18 +204,14 @@ export class CollectionFieldsSourceState {
   buildFilters(): FilterElement[] {
     return buildFieldFilters(
       this.toolbar,
-      this.fieldsSource.filterableFields,
+      this.fieldsSource,
       this.filterConfig,
     );
   }
 
   /** Registers a filter state per filterable field on the collection query. */
   registerFilters() {
-    registerFieldFilters(
-      this.toolbar,
-      this.fieldsSource.filterableFields,
-      this.filterConfig,
-    );
+    registerFieldFilters(this.toolbar, this.fieldsSource, this.filterConfig);
   }
 
   /**
@@ -219,6 +242,8 @@ export class CollectionFieldsSourceState {
   }
 
   init() {
+    // Idempotent, and the field renderers can't translate until it resolves.
+    fieldsContainerOf(this.schemaSource)?.init();
     this.initTask.runOnce(() => this.fieldsSource.load());
     this.initTask.status.promise?.catch(() => this.handleLoadError());
 

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

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

package/src/state/CustomColumnsEntityPageState.ts

@@ -9,11 +9,19 @@ import type { CustomColumnsDragAndDrop } from '../components/CustomColumns/Custo
 import type { CustomColumnsDragAndDropState } from './CustomColumnsDragAndDropState';
 import type { Field, SchemaConfig } from '../types/SchemaConfig';
 
+type SchemaFields = Pick<SchemaConfig, 'fields'>;
+
 export interface CustomColumnsEntityPageStateParams {
   panels: SidePanelsState;
   container: import('@wix/bex-core').WixPatternsContainer;
   fieldsState: SchemaFieldsState;
-  schema: SchemaConfig;
+  /** Only the fields map is read, so a `SchemaConfig` and a source's `Schema`
+   *  both fit. Pass a function when the schema loads after this state is
+   *  created — it is read reactively. */
+  schema: SchemaFields | (() => SchemaFields | null);
+  /** Whether the panel presents itself as field management rather than column
+   *  selection. Default: `false`. */
+  isFieldsEditable?: boolean;
   showFieldTypeIcons?: boolean;
   dragAndDrop?: typeof CustomColumnsDragAndDrop;
   modalsContainerRef: {
@@ -45,7 +53,8 @@ export class CustomColumnsEntityPageState extends CustomColumnsPanelStateBase {
   readonly panels: SidePanelsState;
   readonly fieldsState: SchemaFieldsState;
   readonly _showFieldTypeIcons: boolean;
-  readonly _schema: SchemaConfig;
+  readonly _schema: SchemaFields | (() => SchemaFields | null);
+  readonly _isFieldsEditable: boolean;
   readonly _dragAndDrop?: CustomColumnsDragAndDropState<unknown, any>;
 
   constructor(params: CustomColumnsEntityPageStateParams) {
@@ -58,6 +67,7 @@ export class CustomColumnsEntityPageState extends CustomColumnsPanelStateBase {
     this.fieldsState = params.fieldsState;
     this._showFieldTypeIcons = params.showFieldTypeIcons ?? true;
     this._schema = params.schema;
+    this._isFieldsEditable = params.isFieldsEditable ?? false;
 
     if (params.dragAndDrop) {
       const { fieldsState } = params;
@@ -95,8 +105,15 @@ export class CustomColumnsEntityPageState extends CustomColumnsPanelStateBase {
     this.initBaseObservables();
   }
 
+  get schema(): SchemaFields | null {
+    return typeof this._schema === 'function' ? this._schema() : this._schema;
+  }
+
   get orderedColumns(): Column[] {
-    const { fields } = this._schema;
+    const fields = this.schema?.fields;
+    if (!fields) {
+      return [];
+    }
     return this.fieldsState.orderedFields
       .map((viewConfig) => {
         const field = fields[viewConfig.id];
@@ -114,6 +131,10 @@ export class CustomColumnsEntityPageState extends CustomColumnsPanelStateBase {
     return this._showFieldTypeIcons;
   }
 
+  get isFieldsEditable() {
+    return this._isFieldsEditable;
+  }
+
   get collectionFieldsSource() {
     return null;
   }

package/src/state/CustomColumnsPanelStateBase.ts

@@ -63,6 +63,13 @@ export abstract class CustomColumnsPanelStateBase<
 
   abstract get showFieldTypeIcons(): boolean;
 
+  /** Whether the panel manages schema fields rather than picking columns —
+   *  drives its title and subtitle. Sources that carry their own field
+   *  management report it through `collectionFieldsSource` instead. */
+  get isFieldsEditable(): boolean {
+    return false;
+  }
+
   abstract get collectionFieldsSource():
     | CollectionFieldsSourceState
     | null

package/src/state/CustomFields/CustomFieldsPanelState.ts

@@ -6,9 +6,14 @@ import {
   FieldsSource,
   ReportBI,
   WixPatternsContainer,
+  resolveFieldTypeDefinition,
 } from '@wix/bex-core';
 import { makeAutoObservable } from 'mobx';
 import type { FieldActionsMenuConfig } from '../../components/FieldActions';
+import {
+  buildFieldTypeActionGroup,
+  mergeFieldTypeActions,
+} from '../../components/FieldActions/fieldTypeActions';
 
 /** Builds the per-field action popover (edit / archive / delete …) for a field. */
 export type FieldActionsMenuBuilder = (args: {
@@ -73,7 +78,22 @@ export class CustomFieldsPanelState {
         closePanel: () => undefined,
       },
     });
-    this.fieldActionsMenu = params.createFieldActionsMenu(this);
+    // A custom field type's extra actions render on every surface's menu, so
+    // they're appended here — after the source built its own menu — rather
+    // than inside each source's builder.
+    const sourceMenu = params.createFieldActionsMenu(this);
+    this.fieldActionsMenu = (args) => {
+      const config = sourceMenu(args);
+      const field = this.fieldsSource.fields.find((f) => f.id === args.fieldId);
+      const definition = field
+        ? resolveFieldTypeDefinition(this.fieldsSource, field)
+        : undefined;
+      const extras =
+        field && definition
+          ? buildFieldTypeActionGroup({ field, definition })
+          : [];
+      return mergeFieldTypeActions(config, extras);
+    };
     makeAutoObservable(this, {
       // A function that builds (doesn't mutate) the popover — not an action. It's
       // set once here and never reassigned, so it needn't be observable either.

package/src/state/EditableTable/CellValueState.ts

@@ -43,16 +43,8 @@ export class CellValueState<T, F extends FiltersMap> {
   get _cellTypeMap(): Map<string, CellType> {
     const map = new Map<string, CellType>();
     for (const col of this._parent.allColumns) {
-      if (
-        col.cellType === 'custom' &&
-        col.typeConfig &&
-        typeof col.typeConfig === 'object' &&
-        'ViewComponent' in col.typeConfig
-      ) {
-        map.set(col.id, {
-          type: 'custom',
-          ...(col.typeConfig as Omit<CellType, 'type'>),
-        });
+      if (col.cellType === 'custom' && col.typeConfig) {
+        map.set(col.id, { type: 'custom', ...col.typeConfig });
       } else {
         map.set(
           col.id,
@@ -97,7 +89,18 @@ export class CellValueState<T, F extends FiltersMap> {
     if (resolved.editable === false || !resolved.EditComponent) {
       return false;
     }
-    if (!column.setValue) {
+    return this.isColumnEditable(rowKey, columnId);
+  }
+
+  /**
+   * Whether `column.editable` permits writing this cell for this row,
+   * independent of whether the cell type has an inline EditComponent. Gates
+   * bulk/programmatic writes (clear, cut, paste) — narrower than
+   * isCellEditable, which also requires an edit UI to exist.
+   */
+  isColumnEditable(rowKey: string, columnId: string): boolean {
+    const column = this._parent._columnMap.get(columnId);
+    if (!column?.setValue) {
       return false;
     }
 
@@ -121,7 +124,7 @@ export class CellValueState<T, F extends FiltersMap> {
     return resolved.serialize ? resolved.serialize(value) : String(value ?? '');
   }
 
-  /** Clear selected cells (Delete/Backspace). Respects cellType.clearable. */
+  /** Clear selected cells (Delete/Backspace). Respects cellType.clearable and column.editable. */
   clearCells(cells: Cell[]) {
     const changes: { rowKey: string; columnId: string; value: any }[] = [];
 
@@ -134,6 +137,9 @@ export class CellValueState<T, F extends FiltersMap> {
       if (resolved.clearable === false) {
         continue;
       }
+      if (!this.isColumnEditable(cell.rowKey, cell.columnId)) {
+        continue;
+      }
 
       const pendingKey = this._pendingCellKey(cell.rowKey, cell.columnId);
       if (pendingKey) {
@@ -245,6 +251,9 @@ export class CellValueState<T, F extends FiltersMap> {
   /**
    * Apply multiple cell values in bulk. Validates per cell, accumulates
    * changes per row, and submits all modified items in a single update.
+   * Every mutation path (clear, paste, cut) funnels through here, so
+   * checking isColumnEditable here — not just at the call sites — keeps
+   * read-only cells protected regardless of entry point.
    */
   applyBulkValues(changes: { rowKey: string; columnId: string; value: any }[]) {
     const rowItems = new Map<string, T>();
@@ -252,7 +261,11 @@ export class CellValueState<T, F extends FiltersMap> {
     for (const { rowKey, columnId, value } of changes) {
       const column = this._parent._columnMap.get(columnId);
       const keyedItem = this._parent._getKeyedItem(rowKey);
-      if (!column?.setValue || !keyedItem) {
+      if (
+        !column?.setValue ||
+        !keyedItem ||
+        !this.isColumnEditable(rowKey, columnId)
+      ) {
         continue;
       }
 

package/src/state/EditableTable/EditableTableState.ts

@@ -152,6 +152,7 @@ export class EditableTableState<T, F extends FiltersMap>
     }
     return buildEditableFieldColumns(
       source.fieldsSource,
+      source.editableCellFor,
     ) as EditableColumn<T>[];
   }
 
@@ -249,6 +250,10 @@ export class EditableTableState<T, F extends FiltersMap>
     return this.cellValue.isCellEditable(rowKey, columnId);
   }
 
+  isColumnEditable(rowKey: string, columnId: string): boolean {
+    return this.cellValue.isColumnEditable(rowKey, columnId);
+  }
+
   clearCells(cells: Cell[]) {
     this.cellValue.clearCells(cells);
   }

package/src/state/EditableTable/fieldTypeToCellType.ts

@@ -7,8 +7,7 @@ import type { CellTypeConfigMap } from './types';
  * typeConfig the projection can't supply yet, so the projection downgrades
  * those to a read-only display (see NEEDS_TYPE_CONFIG in
  * buildEditableFieldColumns); the ideal mapping is kept here for when that
- * lands. ARRAY / OBJECT / UNKNOWN have no dedicated editable cell, so they
- * display as 'object'.
+ * lands. UNKNOWN has no cell of its own, so it displays as 'object'.
  */
 export const FIELD_TYPE_TO_CELL_TYPE: Record<
   PatternsFieldType,
@@ -35,7 +34,10 @@ export const FIELD_TYPE_TO_CELL_TYPE: Record<
   ADDRESS: 'address',
   REFERENCE: 'reference',
   MULTI_REFERENCE: 'multiReference',
-  ARRAY: 'object',
+  ARRAY: 'array',
   OBJECT: 'object',
+  // Reached only when a CUSTOM field's definition is missing or has no
+  // editableTable slot — the column builder resolves the definition first.
+  CUSTOM: 'object',
   UNKNOWN: 'object',
 };

package/src/state/EditableTable/types.ts

@@ -1,5 +1,5 @@
 import type { ComponentType } from 'react';
-import type { Translate } from '@wix/bex-core';
+import type { Translate, ValidationRule } from '@wix/bex-core';
 import type { RichTextStyleVariables } from '@wix/patterns-fields';
 import type { TableColumn } from '../../model/tableColumn';
 import type { ReferenceTypeConfig } from '../../components/EditableTable/cellTypes/reference/types';
@@ -26,17 +26,7 @@ export interface CellBorder {
   right: boolean;
 }
 
-export type ValidationRule =
-  | { type: 'required'; message: string }
-  | { type: 'min' | 'max'; value: number; message: string }
-  | { type: 'minLength' | 'maxLength'; value: number; message: string }
-  | { type: 'pattern'; value: RegExp; message: string }
-  | { type: 'custom'; validate: (value: unknown) => boolean; message: string }
-  | {
-      type: 'specificValues';
-      values: { id: string; value: string }[];
-      message: string;
-    };
+export type { ValidationRule } from '@wix/bex-core';
 
 export interface ValidationResult {
   valid: boolean;
@@ -144,6 +134,11 @@ export interface CellTypeConfigMap {
   reference: ReferenceTypeConfig;
   multiReference: ReferenceTypeConfig;
   address: AddressCellTypeConfig;
+  /** An inline custom cell: the full cell contract minus the registry key.
+   *  Authorable directly on a column (`cellType: 'custom'` + `typeConfig`),
+   *  and also produced by the column builder when a schema field's type
+   *  definition (registered via the source's `fieldTypes`) has an
+   *  `editableTable` slot. */
   custom: Omit<CellType, 'type'>;
 }
 

package/src/state/EntityPage/EntityPageState.ts

@@ -4,8 +4,12 @@ import {
   WixPatternsContainer,
   ActionsBarConfig,
   isMobileDevice,
+  SchemaSource,
+  Schema,
 } from '@wix/bex-core';
 import { action, computed, makeObservable, observable } from 'mobx';
+import type { PatternsFieldsAppContainer } from '@wix/patterns-fields/providers';
+import { fieldsContainerOf } from '../../model/schemaFieldsContainer';
 import { FieldValues, UseFormReturn } from 'react-hook-form';
 import { EntityPageStateBIReporter } from './EntityPageStateBIReporter';
 import { EventEmitter, TypedEmitter } from '@wix/bex-core/events';
@@ -86,6 +90,13 @@ interface EntityPageStateParamsBase<T, V extends FieldValues = FieldValues> {
    * An optional object to override the actions bar.
    */
   actionsBarConfig?: ActionsBarConfig;
+
+  /**
+   * An optional schema source describing how to load the schema and access
+   * the entity's data. When present, the page can read fields from the source
+   * instead of relying only on hand-wired fetch/onSave callbacks.
+   */
+  schemaSource?: SchemaSource<T>;
 }
 
 export type EntityPageStateParams<
@@ -110,11 +121,24 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
   readonly transformEntityToCollectionItem: (entity: T) => any;
 
   _entity: T | null = null;
+  _schema: Schema | null = null;
   private readonly _parentPageId?: string;
   private readonly _parentPath?: string;
 
   actionsBarConfig?: EntityPageStateParams<T>['actionsBarConfig'];
 
+  readonly schemaSource?: SchemaSource<T>;
+
+  /**
+   * The container the page's field renderers are built with — the one the schema
+   * carries, so a table on the same schema shares it. Initialized in `init()`
+   * below, next to the schema load the fields also wait on; the schema-entry
+   * EntityPage puts it in React context.
+   */
+  get fieldsContainer(): PatternsFieldsAppContainer | undefined {
+    return fieldsContainerOf(this.schemaSource);
+  }
+
   readonly container: WixPatternsContainer;
   readonly reportBI: ReportBI;
   readonly bi: EntityPageStateBIReporter<T, V>;
@@ -138,6 +162,7 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
     this.transformEntityToCollectionItem =
       params.transformEntityToCollectionItem || ((anEntity: T) => anEntity);
     this._parentPath = params.parentPath;
+    this.schemaSource = params.schemaSource;
 
     this.container = params.container;
 
@@ -163,6 +188,8 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
       handleSubmit: action,
       _entity: observable.ref,
       setEntity: action,
+      _schema: observable.ref,
+      setSchema: action,
       isFormDirty: computed,
       _withinRouter: computed,
     });
@@ -197,12 +224,21 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
     );
 
     initTask.runOnce(async () => {
-      const [data] = await Promise.all([
+      // The field renderers can't translate until this resolves, so the page
+      // waits on it alongside the fetch. Idempotent.
+      this.fieldsContainer?.init();
+
+      const [data, loadedSchema] = await Promise.all([
         this.fetch(),
+        this.schemaSource?.loadSchema(),
         container.initTask.status.promise,
+        this.fieldsContainer?.initTask.status.promise,
       ]);
 
       this.setEntity(data.entity ?? null);
+      if (loadedSchema) {
+        this.setSchema(loadedSchema.schema);
+      }
       this.bi.appLoaded?.();
     });
 
@@ -223,6 +259,14 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
     return this._entity;
   }
 
+  setSchema(schema: Schema | null) {
+    this._schema = schema;
+  }
+
+  get schema(): Schema | null {
+    return this._schema;
+  }
+
   get isFetching() {
     return this.formPage.isFetching;
   }

package/src/state/EntityPage/resolveEntityPageFields.ts

@@ -0,0 +1,25 @@
+import type { Field } from '@wix/bex-core';
+
+/** The fields an entity page renders: the given ids, or every editable schema
+ *  field. Lives here so the fields component and the card that wraps it offer
+ *  the same list. */
+export function resolveEntityPageFields(
+  fields: Record<string, Field | undefined>,
+  idField: string,
+  fieldIds?: string[],
+): Field[] {
+  // An explicit fieldIds list is taken as-is — the consumer chose those fields.
+  if (fieldIds) {
+    return fieldIds
+      .map((id) => fields[id])
+      .filter((field): field is Field => Boolean(field));
+  }
+
+  // By default, skip the id field and system fields (e.g. `_id`, `_manualSort`,
+  // `_createdDate`): they are not user-editable, and rendering a required one
+  // would silently block save (react-hook-form marks the form invalid).
+  return Object.values(fields).filter(
+    (field): field is Field =>
+      Boolean(field) && !field!.isSystem && field!.id !== idField,
+  );
+}