@wix/patterns 1.427.0 → 1.431.0

package/src/state/EntityPageFieldsCardState.ts

@@ -0,0 +1,157 @@
+import { computed, makeObservable, observable, runInAction } from 'mobx';
+import {
+  addEventListener,
+  TaskState,
+  type Schema,
+  type WixPatternsContainer,
+} from '@wix/bex-core';
+import type { CustomColumnsDragAndDrop } from '../components/CustomColumns/CustomColumnsDragAndDrop';
+import { resolveEntityPageFields } from './EntityPage/resolveEntityPageFields';
+import type { EntityPageState } from './EntityPage/EntityPageState';
+import { SchemaCardState } from './SchemaCard/SchemaCardState';
+import type { SchemaViewConfig } from './SchemaCard/SchemaFieldsState';
+import { SidePanelsState } from './SidePanelsState';
+import { CustomColumnsEntityPageState } from './CustomColumnsEntityPageState';
+
+export interface EntityPageFieldsCardStateParams {
+  pageState: EntityPageState<any, any>;
+  container: WixPatternsContainer;
+  /** Namespace the per-user show/hide and order are stored under. */
+  persistencyKey: string;
+  /** Field ids to offer, in order. Omitted ⇒ every editable schema field. */
+  fieldIds?: string[];
+  /** Whether to build the manage-fields panel. Default: `true`. */
+  showManageFields?: boolean;
+  /** Passed in rather than imported so this stays free of component imports. */
+  dragAndDrop?: typeof CustomColumnsDragAndDrop;
+  modalsContainerRef: {
+    current: HTMLElement | null | undefined;
+  };
+}
+
+/**
+ * Owns the card's field layout: which of the page's schema fields are visible
+ * and in what order, plus the panel that edits them.
+ *
+ * The schema loads after this state is created, so `init()` awaits the source's
+ * load and everything below reads the result through computeds — the states are
+ * built once, on the first render, and fill in when the schema arrives.
+ */
+export class EntityPageFieldsCardState {
+  readonly cardState: SchemaCardState;
+  readonly panelState?: CustomColumnsEntityPageState;
+  /** The source's schema load. Owned here rather than read off the page state,
+   *  because this state's `init()` runs before the page's (child effects run
+   *  first) and the stored layout must not be read before the fields exist. */
+  readonly loadTask = new TaskState();
+  _loadedSchema: Schema | null = null;
+  private readonly params: EntityPageFieldsCardStateParams;
+
+  constructor(params: EntityPageFieldsCardStateParams) {
+    this.params = params;
+
+    makeObservable(this, {
+      _loadedSchema: observable.ref,
+      schema: computed,
+      declaredFields: computed,
+      visibleFieldIds: computed,
+      canManageFields: computed,
+    });
+
+    this.cardState = new SchemaCardState({
+      fields: () => this.declaredFields,
+      persistencyKey: params.persistencyKey,
+      container: params.container,
+    });
+
+    if (params.showManageFields ?? true) {
+      this.panelState = new CustomColumnsEntityPageState({
+        container: params.container,
+        panels: new SidePanelsState({
+          container: params.container,
+          panelGroupName: 'entity-page',
+        }),
+        fieldsState: this.cardState.fieldsState,
+        schema: () => this.params.pageState.schema,
+        isFieldsEditable: true,
+        showFieldTypeIcons: true,
+        dragAndDrop: params.dragAndDrop,
+        modalsContainerRef: params.modalsContainerRef,
+      });
+    }
+  }
+
+  /** The same object the page ends up with: the source memoizes its load, so
+   *  both read one result. */
+  get schema(): Schema | null {
+    return this._loadedSchema ?? this.params.pageState.schema;
+  }
+
+  /** The fields the card offers — empty until the schema loads. A required
+   *  field is not hideable: hiding it would leave the form invalid with nothing
+   *  on screen to fix. */
+  get declaredFields(): SchemaViewConfig[] {
+    const { schema } = this;
+    if (!schema) {
+      return [];
+    }
+    return resolveEntityPageFields(
+      schema.fields,
+      schema.idField,
+      this.params.fieldIds,
+    ).map((field) => ({
+      id: field.id,
+      hideable: !field.validation?.required,
+    }));
+  }
+
+  /** What the card renders. Before the schema loads this is whatever the card
+   *  was asked for, which is also what the fields show a skeleton for. */
+  get visibleFieldIds(): string[] | undefined {
+    if (!this.declaredFields.length) {
+      return this.params.fieldIds;
+    }
+    const { fieldsState } = this.cardState;
+    return fieldsState.orderedFields
+      .filter((field) => fieldsState.isFieldVisible(field.id))
+      .map((field) => field.id);
+  }
+
+  get canManageFields(): boolean {
+    return !!this.panelState && this.declaredFields.length > 0;
+  }
+
+  openManageFields() {
+    this.panelState?.panels.toggleSidePanel('customColumns');
+  }
+
+  init() {
+    // `loadSchema` is memoized on the source, so this shares the one fetch the
+    // page and the collection already make.
+    this.loadTask.runOnce(async () => {
+      const loaded = await this.params.pageState.schemaSource?.loadSchema();
+      runInAction(() => {
+        this._loadedSchema = loaded?.schema ?? null;
+      });
+    });
+    // The card renders its fields regardless; a failed load leaves the page
+    // itself showing the error.
+    this.loadTask.status.promise?.catch(() => null);
+
+    const disposers: (void | (() => void))[] = [
+      // Hold the stored-layout read until the schema is in, so a saved
+      // show/hide and order survives a reload. Registered before the card
+      // state's init below, which is what collects the listeners.
+      addEventListener(
+        this.cardState.fieldsState.events,
+        'beforeInitialFetch',
+        () => this.loadTask.status.promise?.catch(() => {}),
+      ),
+      this.cardState.init(),
+    ];
+
+    return () => {
+      disposers.forEach((dispose) => dispose?.());
+    };
+  }
+}

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

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

package/src/state/SchemaCard/SchemaCardState.ts

@@ -6,8 +6,10 @@ export interface SchemaCardStateParams {
   /**
    * Field definitions for persistency. Each field's visibility and order are
    * stored per `persistencyKey` so users' layout preferences survive page reloads.
+   * Pass a function when the fields depend on a schema that hasn't loaded yet —
+   * it is read reactively.
    */
-  fields: SchemaViewConfig[];
+  fields: SchemaViewConfig[] | (() => SchemaViewConfig[]);
   /**
    * A unique key identifying this schema card, used as the storage namespace.
    * Should be unique per card type within the app (e.g. 'contacts', 'products').
@@ -20,7 +22,7 @@ export class SchemaCardState {
   readonly fieldsState: SchemaFieldsState;
 
   constructor(params: SchemaCardStateParams) {
-    if (isEmpty(params.fields)) {
+    if (Array.isArray(params.fields) && isEmpty(params.fields)) {
       console.warn(
         'SchemaCardState: `fields` is empty — field persistency will not be enabled.',
       );
@@ -39,6 +41,7 @@ export class SchemaCardState {
   }
 
   init() {
-    this.fieldsState.init();
+    // Passed through so a disposer added below reaches the caller.
+    return this.fieldsState.init();
   }
 }

package/src/state/SchemaCard/SchemaFieldsState.ts

@@ -1,4 +1,5 @@
-import { DataCapsule, TaskState } from '@wix/bex-core';
+import { DataCapsule, TaskState, TypedEmitter } from '@wix/bex-core';
+import { EventEmitter } from 'events';
 import {
   action,
   computed,
@@ -22,12 +23,25 @@ type StoredLayout = {
 
 export interface SchemaFieldsStateParams {
   dataCapsule: DataCapsule;
-  fields: SchemaViewConfig[];
+  /** A function when the fields aren't known yet — it is read reactively, so a
+   *  state can be created before the schema that declares them loads. */
+  fields: SchemaViewConfig[] | (() => SchemaViewConfig[]);
 }
 
 export class SchemaFieldsState {
   _storedFields: SchemaViewConfig[] = [];
   readonly initTask = new TaskState();
+
+  /**
+   * `beforeInitialFetch` holds the stored-layout read until whatever declares
+   * the fields is ready — for fields that arrive with a schema, the load. A
+   * listener returns a promise; register it before `init()`. Without it the
+   * merge would run against no declared ids and drop the whole saved layout.
+   */
+  readonly events = new EventEmitter() as TypedEmitter<{
+    beforeInitialFetch: () => void;
+  }>;
+
   private _persistQueue: Promise<void> = Promise.resolve();
   private readonly params: SchemaFieldsStateParams;
 
@@ -35,6 +49,7 @@ export class SchemaFieldsState {
     this.params = params;
     makeObservable(this, {
       _storedFields: observable,
+      fields: computed,
       orderedFields: computed,
       setFieldVisibility: action.bound,
       setFieldOrder: action.bound,
@@ -44,6 +59,9 @@ export class SchemaFieldsState {
   init() {
     this.initTask.runOnce(async () => {
       try {
+        const beforeInitialFetchListeners =
+          this.events.listeners('beforeInitialFetch');
+        await Promise.all(beforeInitialFetchListeners.map((l) => l()));
         await this._fetchFromStorage();
       } catch (e) {
         console.error(e);
@@ -51,18 +69,23 @@ export class SchemaFieldsState {
     });
   }
 
+  get fields(): SchemaViewConfig[] {
+    const { fields } = this.params;
+    return typeof fields === 'function' ? fields() : fields;
+  }
+
   get orderedFields(): SchemaViewConfig[] {
     if (!this._storedFields.length) {
-      return this.params.fields;
+      return this.fields;
     }
     // Fields not in storage all get index -1; stable sort preserves their declaration order
-    return [...this.params.fields].sort(
+    return [...this.fields].sort(
       indexOfCompareFn(this._storedFields, (f) => f?.id),
     );
   }
 
   isFieldVisible(id: string): boolean {
-    const field = this.params.fields.find((f) => f.id === id);
+    const field = this.fields.find((f) => f.id === id);
     if (!field) {
       return true;
     } // unknown id — render by default
@@ -92,7 +115,7 @@ export class SchemaFieldsState {
 
   setFieldOrder(orderedFields: SchemaViewConfig[]) {
     const storedMap = new Map(this._storedFields.map((f) => [f.id, f]));
-    const declaredMap = new Map(this.params.fields.map((f) => [f.id, f]));
+    const declaredMap = new Map(this.fields.map((f) => [f.id, f]));
 
     // Rebuild _storedFields in the new order, preserving existing visibility.
     // Only include fields that are still declared; unknown ids are silently dropped.
@@ -121,7 +144,8 @@ export class SchemaFieldsState {
   }
 
   async _fetchFromStorage() {
-    const { dataCapsule, fields } = this.params;
+    const { dataCapsule } = this.params;
+    const { fields } = this;
     let storedLayout: StoredLayout | null = null;
     try {
       const raw = await dataCapsule.getItem<StoredLayout>(STORAGE_KEY);

package/src/state/ToolbarCollectionState.ts

@@ -467,7 +467,17 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
 
   get columns(): Column[] {
     const { _userColumns, _featureColumns, _extendedColumns } = this;
-    return [..._userColumns, ..._featureColumns, ..._extendedColumns];
+    // One column per id. When a layout syncs a column a source also provides
+    // (e.g. the editable table's cell defs for source fields), the layout's def
+    // wins and inherits the source's column metadata; source-only columns fill
+    // in the rest.
+    const extendedById = new Map(_extendedColumns.map((c) => [c.id, c]));
+    const merged = [..._userColumns, ..._featureColumns].map((column) => {
+      const extended = extendedById.get(column.id);
+      return extended ? { ...extended, ...column } : column;
+    });
+    const mergedIds = new Set(merged.map((c) => c.id));
+    return [...merged, ..._extendedColumns.filter((c) => !mergedIds.has(c.id))];
   }
 
   /**

package/src/state/buildEditableFieldColumns.ts

@@ -1,6 +1,14 @@
-import type { Field, FieldsSource, PatternsFieldType } from '@wix/bex-core';
-import type { EditableColumn, ValidationRule } from './EditableTable/types';
+import type {
+  Field,
+  FieldsSource,
+  FieldTypeDefinition,
+  PatternsFieldType,
+  ValidationRule,
+} from '@wix/bex-core';
+import { resolveFieldTypeDefinition } from '@wix/bex-core';
+import type { CellType, EditableColumn } from './EditableTable/types';
 import { FIELD_TYPE_TO_CELL_TYPE } from './EditableTable/fieldTypeToCellType';
+import type { EditableCellUpgrade } from './CollectionFieldsSourceState';
 
 // Types whose editable cell needs typeConfig the projection can't supply yet
 // (referenced collection, address shape). Until that lands, they render as a
@@ -11,6 +19,24 @@ const NEEDS_TYPE_CONFIG = new Set<PatternsFieldType>([
   'ADDRESS',
 ]);
 
+/**
+ * Whether this column has a usable inline editor. Read-only cases:
+ * `NEEDS_TYPE_CONFIG` types are downgraded to a display cell, `UNKNOWN` has no
+ * editor, and a `CUSTOM` field is only editable through a definition that
+ * supplies an EditComponent. Everything else keeps its cell type's own editor —
+ * including OBJECT / ARRAY, whose cells edit as JSON.
+ */
+function hasEditor(field: Field, customCell?: Omit<CellType, 'type'>): boolean {
+  if (customCell) {
+    return !!customCell.EditComponent;
+  }
+  return (
+    field.type !== 'CUSTOM' &&
+    field.type !== 'UNKNOWN' &&
+    !NEEDS_TYPE_CONFIG.has(field.type)
+  );
+}
+
 function toValidationRules(field: Field): ValidationRule[] {
   const v = field.validation;
   if (!v) {
@@ -46,34 +72,72 @@ function toValidationRules(field: Field): ValidationRule[] {
   return rules;
 }
 
+// The inline-custom cell config for a resolved definition: its editableTable
+// slot, with the definition's value-level validation layered in when the slot
+// doesn't validate itself.
+function synthesizeCellConfig(
+  definition: FieldTypeDefinition,
+): Omit<CellType, 'type'> {
+  const editableTable = definition.editableTable!;
+  const valueValidate = definition.value?.validate;
+  const validate =
+    valueValidate &&
+    ((value: unknown, rules?: ValidationRule[]) => valueValidate(value, rules));
+  return { ...editableTable, validate };
+}
+
 /**
  * Projects a FieldsSource's fields into EditableTable columns: a cell type by
  * field type, value read/write through the source, validation from the field,
  * and the flags the header reads for its disable rules. A cell is editable only
  * when the source can write it back (setCellValue) and the field isn't a system
- * field.
+ * field. A CUSTOM field renders through its definition's editableTable slot as
+ * an inline custom cell; without one it falls back to a read-only object cell.
  */
 export function buildEditableFieldColumns(
   source: FieldsSource,
+  editableCellFor?: (field: Field) => EditableCellUpgrade | undefined,
 ): EditableColumn<Record<string, unknown>>[] {
   const canWrite = typeof source.setCellValue === 'function';
   return source.fields.map((field) => {
     const id = source.columnIdForField(field);
-    const cellType = NEEDS_TYPE_CONFIG.has(field.type)
-      ? 'object'
-      : FIELD_TYPE_TO_CELL_TYPE[field.type] ?? 'object';
+    const definition = resolveFieldTypeDefinition(source, field);
+    const customCell = definition?.editableTable
+      ? synthesizeCellConfig(definition)
+      : undefined;
+    // A source-supplied cell wins over the downgrade: it carries the typeConfig
+    // that made the type read-only here in the first place.
+    const sourceCell = customCell
+      ? undefined
+      : NEEDS_TYPE_CONFIG.has(field.type)
+      ? editableCellFor?.(field)
+      : undefined;
+    const cellType = customCell
+      ? 'custom'
+      : sourceCell?.cellType ??
+        (NEEDS_TYPE_CONFIG.has(field.type)
+          ? 'object'
+          : FIELD_TYPE_TO_CELL_TYPE[field.type] ?? 'object');
     const validation = toValidationRules(field);
-    const editable = canWrite && cellType !== 'object' && !field.isSystem;
+    const editable =
+      canWrite &&
+      !field.isSystem &&
+      (!!sourceCell || hasEditor(field, customCell));
     return {
       id,
       cellType,
+      ...(customCell && { typeConfig: customCell }),
+      ...(sourceCell && { typeConfig: sourceCell.typeConfig }),
       field,
       title: field.displayName,
       name: field.displayName,
       isPrimary: field.isPrimary,
       isSystem: field.isSystem,
       hideable: true,
-      sortable: field.capabilities?.sortable ?? false,
+      sortable:
+        definition?.capabilities?.sortable ??
+        field.capabilities?.sortable ??
+        false,
       editable,
       validation: validation.length ? validation : undefined,
       getValue: (item) => source.getCellValue(item, field),

package/src/state/buildFieldColumns.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { Field, FieldsSource, PatternsFieldType } from '@wix/bex-core';
+import { resolveFieldTypeDefinition } from '@wix/bex-core';
 import type { DataTableColumnAlign } from '@wix/design-system/dist/types/Table/DataTable';
 import { Column } from '../model';
 import { FieldCell } from '../components/FieldCell/FieldCell';
@@ -52,7 +53,13 @@ export function buildFieldColumns(
   // them as excess properties. The function still returns Column[].
   return source.fields.map((field) => {
     const id = source.columnIdForField(field);
-    const layout = LAYOUT_BY_TYPE[field.type] ?? DEFAULT_LAYOUT;
+    const definition = resolveFieldTypeDefinition(source, field);
+    const layout = definition?.table
+      ? {
+          width: definition.table.width,
+          align: definition.table.align ?? 'start',
+        }
+      : LAYOUT_BY_TYPE[field.type] ?? DEFAULT_LAYOUT;
     return {
       id,
       field,
@@ -72,6 +79,7 @@ export function buildFieldColumns(
           type={field.type}
           value={source.getCellValue(row, field)}
           fieldId={`${id}-${rowNum}`}
+          definition={definition}
         />
       ),
       ...columnOverrides?.(field, ctx),

package/src/state/buildFieldFilters.tsx

@@ -2,14 +2,18 @@ import React from 'react';
 import {
   dateRangeFilter,
   idNameArrayFilter,
+  isFilterTypeConfig,
   numberRangeFilter,
+  resolveFieldTypeDefinition,
   stringOperatorFilter,
 } from '@wix/bex-core';
 import type {
   Field,
+  FieldsSource,
   Filter,
   FilterStateBaseParams,
   FilterOperator,
+  FilterTypeConfig,
   PatternsFieldType,
 } from '@wix/bex-core';
 import type { ToolbarCollectionState } from './ToolbarCollectionState';
@@ -25,6 +29,8 @@ type FilterFactory = (
   params: Partial<FilterStateBaseParams<any>>,
 ) => Filter<any>;
 
+export type { FilterTypeConfig } from '@wix/bex-core';
+
 /**
  * The filter behavior a source supplies that the shared builder can't derive
  * from the neutral field type. The neutral type collapses distinct source types
@@ -75,6 +81,27 @@ const filterFactoryByType = (
 export const isFilterableFieldType = (type: PatternsFieldType): boolean =>
   type in FILTER_COMPONENT_BY_TYPE;
 
+/** The active filter config of a CUSTOM field's type definition, if any. */
+const resolveCustomFilter = (
+  field: Field,
+  source: Pick<FieldsSource, 'fieldTypes'>,
+): FilterTypeConfig | undefined => {
+  const customTypeConfig = resolveFieldTypeDefinition(source, field);
+  return customTypeConfig && isFilterTypeConfig(customTypeConfig.filter)
+    ? customTypeConfig.filter
+    : undefined;
+};
+
+/** A field gets an auto filter when its type maps to a filter element, or —
+ *  for a CUSTOM field — when its type definition declares a filter config. */
+export const isFilterableField = (
+  field: Field,
+  source: Pick<FieldsSource, 'fieldTypes'>,
+): boolean =>
+  field.type === 'CUSTOM'
+    ? !!resolveCustomFilter(field, source)
+    : isFilterableFieldType(field.type);
+
 /**
  * Registers a filter state per filterable field on the collection query, so the
  * built elements have a filter to read. Idempotent — addFilterIfNeeded skips a
@@ -82,11 +109,22 @@ export const isFilterableFieldType = (type: PatternsFieldType): boolean =>
  */
 export const registerFieldFilters = (
   toolbar: ToolbarCollectionState<any, any>,
-  fields: Field[],
+  source: Pick<FieldsSource, 'filterableFields' | 'fieldTypes'>,
   config: FieldFilterConfig,
 ): void => {
   const factoryByType = filterFactoryByType(config);
-  fields.forEach((field) => {
+  source.filterableFields.forEach((field) => {
+    if (field.type === 'CUSTOM') {
+      const customFilter = resolveCustomFilter(field, source);
+      if (!customFilter) {
+        return;
+      }
+      const filter = customFilter.createFilter(field);
+      // The collection registers the filter under the field's id.
+      Object.assign(filter, { name: field.id });
+      toolbar.collection.query.addFilterIfNeeded(field.id as any, filter);
+      return;
+    }
     const factory = factoryByType[field.type];
     if (!factory) {
       return;
@@ -103,13 +141,32 @@ const buildFieldFilterElement = (
   toolbar: ToolbarCollectionState<any, any>,
   field: Field,
   config: FieldFilterConfig,
+  source: Pick<FieldsSource, 'fieldTypes'>,
 ): FilterElement | null => {
-  const FilterComponent = FILTER_COMPONENT_BY_TYPE[field.type];
   const filter = toolbar.collection.filters[field.id];
-  if (!FilterComponent || !filter) {
+  if (!filter) {
     return null;
   }
   const label = field.displayName || field.id;
+  if (field.type === 'CUSTOM') {
+    const CustomComponent = resolveCustomFilter(field, source)?.Component;
+    if (!CustomComponent) {
+      return null;
+    }
+    return (
+      <CustomComponent
+        key={field.id}
+        filter={filter}
+        accordionItemProps={{ label }}
+        toolbarItemProps={{ label }}
+        toolbarTagProps={{ label }}
+      />
+    ) as FilterElement;
+  }
+  const FilterComponent = FILTER_COMPONENT_BY_TYPE[field.type];
+  if (!FilterComponent) {
+    return null;
+  }
   const decimal =
     field.type === 'NUMBER' ? config.numberIsDecimal?.(field) : false;
   return (
@@ -128,9 +185,9 @@ const buildFieldFilterElement = (
 /** Builds the toolbar filter elements for a source's filterable fields. */
 export const buildFieldFilters = (
   toolbar: ToolbarCollectionState<any, any>,
-  fields: Field[],
+  source: Pick<FieldsSource, 'filterableFields' | 'fieldTypes'>,
   config: FieldFilterConfig,
 ): FilterElement[] =>
-  fields
-    .map((field) => buildFieldFilterElement(toolbar, field, config))
+  source.filterableFields
+    .map((field) => buildFieldFilterElement(toolbar, field, config, source))
     .filter((el): el is FilterElement => el !== null);