@wix/patterns 1.422.0 → 1.424.0

package/src/state/EditableTable/EditableTableState.ts

@@ -16,19 +16,14 @@ import { CellInteractionState } from './CellInteractionState';
 import { CellValueState } from './CellValueState';
 import { ClipboardState } from './ClipboardState';
 import { MutationState } from './MutationState';
-import { FieldActionsState } from '../FieldActionsState';
 import type { EditableTableMutationHandlers } from './MutationState';
 import type { Cell, CellType, EditableColumn, ValidationResult } from './types';
-import type { FieldActions } from '../../types/SchemaConfig';
-import type { FieldActionPermissions } from '../../components/FieldActions';
-
-export type EditableTableFieldActionsPermissions = FieldActionPermissions;
+import { buildEditableFieldColumns } from '../buildEditableFieldColumns';
 
 export interface EditableTablePermissions {
   addItemDisabled?: boolean;
   updateItemDisabled?: boolean;
   removeItemDisabled?: boolean;
-  fieldActions?: EditableTableFieldActionsPermissions;
 }
 
 export interface EditableTableStateParams<T, F extends FiltersMap> {
@@ -37,8 +32,6 @@ export interface EditableTableStateParams<T, F extends FiltersMap> {
   readonly toolbar?: ToolbarCollectionState<T, F>;
   readonly permissions?: EditableTablePermissions;
   readonly mutations: EditableTableMutationHandlers<T>;
-  readonly fieldActions?: FieldActions;
-  readonly refresh?: () => Promise<void>;
   readonly createOptimisticActions: (
     collection: CollectionState<T, F>,
   ) => CollectionOptimisticActions<T, F>;
@@ -76,13 +69,12 @@ export class EditableTableState<T, F extends FiltersMap>
   readonly deleteConfirmModal = new ConditionalModalState<
     Partial<MessageModalLayoutProps>
   >();
-  readonly fieldActions: FieldActionsState;
 
   addItemDisabled = false;
   updateItemDisabled = false;
   removeItemDisabled = false;
 
-  _allColumns: EditableColumn<T>[] = [];
+  _providedColumns: EditableColumn<T>[] = [];
 
   constructor(params: EditableTableStateParams<T, F>) {
     this.toolbar =
@@ -116,20 +108,14 @@ export class EditableTableState<T, F extends FiltersMap>
       params.mutations,
       params.createOptimisticActions,
     );
-    this.fieldActions = new FieldActionsState(
-      params.collection.translate,
-      params.fieldActions,
-      params.permissions?.fieldActions,
-      params.collection.showToast,
-      params.refresh,
-    );
-
     makeObservable(this, {
       addItemDisabled: observable,
       updateItemDisabled: observable,
       removeItemDisabled: observable,
-      _allColumns: observable.ref,
+      _providedColumns: observable.ref,
       editableColumns: computed,
+      sourceColumns: computed,
+      allColumns: computed,
       _columnMap: computed,
       init: action,
       confirmDeleteItems: action,
@@ -158,8 +144,28 @@ export class EditableTableState<T, F extends FiltersMap>
     return this.tableState.itemsToRenderCount;
   }
 
+  /** Editable columns built from the wired fields source, once it loads. */
+  get sourceColumns(): EditableColumn<T>[] {
+    const source = this.toolbar.collectionFieldsSource;
+    if (!source || !source.initTask.status.isSuccess) {
+      return [];
+    }
+    return buildEditableFieldColumns(
+      source.fieldsSource,
+    ) as EditableColumn<T>[];
+  }
+
+  /**
+   * Consumer columns plus the columns built from the fields source, merged the
+   * same way the toolbar merges its columns (ToolbarCollectionState.columns).
+   * Consumer and source columns are expected to be disjoint by id.
+   */
+  get allColumns(): EditableColumn<T>[] {
+    return [...this._providedColumns, ...this.sourceColumns];
+  }
+
   get _columnMap(): Map<string, EditableColumn<T>> {
-    return new Map(this._allColumns.map((c) => [c.id, c]));
+    return new Map(this.allColumns.map((c) => [c.id, c]));
   }
 
   _getKeyedItem(key: string): KeyedItem<T> | undefined | null {
@@ -189,16 +195,15 @@ export class EditableTableState<T, F extends FiltersMap>
   get editableColumns(): EditableColumn<T>[] {
     const visibleIds = this.visibleColumns.map((c) => c.id);
     if (!visibleIds.length) {
-      return this._allColumns;
+      return this.allColumns;
     }
     return visibleIds
-      .map((id) => this._allColumns.find((c) => c.id === id))
+      .map((id) => this.allColumns.find((c) => c.id === id))
       .filter((c): c is EditableColumn<T> => c !== undefined);
   }
 
   init(columns: EditableColumn<T>[]) {
-    this._allColumns = columns;
-    this.cellValue._buildCellTypeMap();
+    this._providedColumns = columns;
     return this.mutation.init();
   }
 

package/src/state/EditableTable/fieldTypeToCellType.ts

@@ -0,0 +1,41 @@
+import type { PatternsFieldType } from '@wix/bex-core';
+import type { CellTypeConfigMap } from './types';
+
+/**
+ * Maps a source field's neutral type to the EditableTable cell type used to
+ * render and edit it. Reference / multi-reference / address need extra
+ * 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'.
+ */
+export const FIELD_TYPE_TO_CELL_TYPE: Record<
+  PatternsFieldType,
+  keyof CellTypeConfigMap
+> = {
+  SHORT_TEXT: 'text',
+  LONG_TEXT: 'text',
+  NUMBER: 'number',
+  BOOLEAN: 'boolean',
+  DATE: 'date',
+  DATETIME: 'datetime',
+  TIME: 'time',
+  URL: 'url',
+  EMAIL: 'email',
+  COLOR: 'color',
+  IMAGE: 'image',
+  VIDEO: 'video',
+  AUDIO: 'audio',
+  MEDIA_GALLERY: 'mediaGallery',
+  DOCUMENT: 'document',
+  MULTI_DOCUMENT: 'multiDocument',
+  RICH_TEXT: 'richText',
+  RICH_CONTENT: 'richContent',
+  ADDRESS: 'address',
+  REFERENCE: 'reference',
+  MULTI_REFERENCE: 'multiReference',
+  ARRAY: 'object',
+  OBJECT: 'object',
+  UNKNOWN: 'object',
+};

package/src/state/EditableTable/index.ts

@@ -3,7 +3,6 @@ export type {
   EditableTableStateParams,
   EditableTableStatePublicAPI,
   EditableTablePermissions,
-  EditableTableFieldActionsPermissions,
 } from './EditableTableState';
 
 export type { EditableTableMutationHandlers } from './MutationState';

package/src/state/EditableTable/types.ts

@@ -1,4 +1,5 @@
 import type { ComponentType } from 'react';
+import type { Translate } 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';
@@ -57,8 +58,15 @@ export interface CellType {
   /** Deserialize clipboard string to value */
   deserialize?: (raw: string) => any;
 
-  /** Validate a cell value. Return null if valid, or error message string. */
-  validate?: (value: any, rules?: ValidationRule[]) => string | null;
+  /** Validate a cell value. Return null if valid, or error message string.
+   *  `translate` is optional so cell types whose validate doesn't need
+   *  localization (text/number/date/…) can keep their existing call sites.
+   *  Cell types that DO localize (array/object) must be called with a translator. */
+  validate?: (
+    value: any,
+    rules?: ValidationRule[],
+    translate?: Translate,
+  ) => string | null;
 
   /** Can this cell type be edited? (default: true) */
   editable?: boolean;
@@ -124,6 +132,7 @@ export interface CellTypeConfigMap {
   time: never;
   datetime: never;
   object: never;
+  array: never;
   image: never;
   document: never;
   multiDocument: never;

package/src/state/EditableTable/utils.ts

@@ -1,3 +1,4 @@
+import type { Translate } from '@wix/bex-core';
 import type {
   Cell,
   CellBorder,
@@ -50,7 +51,12 @@ function checkValidationRule(rule: ValidationRule, value: any): boolean {
 export function runCellValidation(
   value: any,
   rules?: ValidationRule[],
-  typeValidate?: (value: any, rules?: ValidationRule[]) => string | null,
+  typeValidate?: (
+    value: any,
+    rules?: ValidationRule[],
+    translate?: Translate,
+  ) => string | null,
+  translate?: Translate,
 ): ValidationResult {
   const errors: string[] = [];
 
@@ -63,7 +69,7 @@ export function runCellValidation(
   }
 
   if (typeValidate) {
-    const typeError = typeValidate(value, rules);
+    const typeError = typeValidate(value, rules, translate);
     if (typeError) {
       errors.push(typeError);
     }

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

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

package/src/state/LayoutSwitchState.ts

@@ -18,7 +18,6 @@ import { ILayoutSwitchState } from './ILayoutSwitchState';
 import { TableState } from './TableState';
 import { ToolbarCollectionState } from './ToolbarCollectionState';
 import { ViewType, ViewTypeState } from './ViewTypeState';
-import type { FieldActions } from '../types/SchemaConfig';
 
 export interface TableLayoutConfig {}
 
@@ -27,8 +26,6 @@ export interface GridLayoutConfig {}
 export interface SpreadsheetLayoutConfig<T, F extends FiltersMap> {
   mutations: EditableTableMutationHandlers<T>;
   permissions?: EditableTablePermissions;
-  fieldActions?: FieldActions;
-  refresh?: () => Promise<void>;
   createOptimisticActions: (
     collection: CollectionState<T, F>,
   ) => CollectionOptimisticActions<T, F>;

package/src/state/ToolbarBIReporter.ts

@@ -203,8 +203,7 @@ export class ToolbarBIReporter<T, F extends FiltersMap> {
           ),
           isUsingLoadSelectedColumns:
             this.collection.query.refreshOnColumnsChange ?? false,
-          isUsingDataExtension:
-            !!this.toolbar.collectionDataExtension?.dataExtension,
+          isUsingDataExtension: !!this.toolbar.collectionFieldsSource,
           ...this.toolbar.featuresAvailability,
         }),
         additionalFeaturesAvailability: JSON.stringify({

package/src/state/ToolbarCollectionState.ts

@@ -15,7 +15,6 @@ import type {
 import {
   CollectionBIReporter,
   CollectionState,
-  CustomField,
   FedopsReporter,
   Filter,
   FiltersMap,
@@ -58,10 +57,9 @@ import { MultiLevelSortingState } from './MultiLevelSortingState';
 import { RectState } from './RectState';
 import { BulkActionToolbarState } from './BulkActionToolbarState';
 import { addEventListener } from '@wix/bex-core/util';
-import { simplifyExtendedColumns } from './simplifyExtendedColumns';
 import type { AddApplyFiltersButton } from '../components/FiltersPanel/AddApplyFiltersButton';
 import { TabsFilterState } from '../components/TabsFilter/TabsFilterState';
-import { CollectionDataExtensionState } from '../components/DataExtension';
+import { CollectionFieldsSourceState } from './CollectionFieldsSourceState';
 import { TagsCollectionState } from './TagsCollectionState';
 import {
   AdditionalFeaturesAvailabilityBIParams,
@@ -137,7 +135,7 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
   liveRegionRef: { current: null | LiveRegionRefType } = {
     current: null,
   };
-  collectionDataExtension: CollectionDataExtensionState<T, F> | null = null;
+  collectionFieldsSource: CollectionFieldsSourceState | null = null;
   menuItemExtensions = new Map<string, ExtensionMenuItemsState>();
   tagsCollectionState: TagsCollectionState<T, F> | null = null;
   toolbarFiltersState: CollectionToolbarFiltersState<T, F> | null = null;
@@ -302,7 +300,7 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
       itemsContentHeight: computed,
       setNewColumns: action,
       addFeatureColumn: action,
-      setNewExtendedColumns: action,
+      setExtendedColumns: action,
       _commonDynamicBiParams: action,
       _adjustSortWithNewColumns: action,
       setToolbarFiltersStateInitialized: action,
@@ -446,9 +444,9 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
   }
 
   get shouldDisplayFiltersTags() {
-    const { collectionDataExtension, featuredComponents } = this;
+    const { collectionFieldsSource, featuredComponents } = this;
 
-    if (collectionDataExtension?.initTask.status.isLoading) {
+    if (collectionFieldsSource?.initTask.status.isLoading) {
       return false;
     }
 
@@ -589,7 +587,6 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
       initTask,
       panels,
       sidePanel,
-      collectionDataExtension,
       tagsCollectionState,
       bulk,
       customColumnsState,
@@ -642,7 +639,7 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
             : undefined;
         },
       ),
-      collectionDataExtension?.init(), // dataExtensionState should be initialized and beforeInitialFetch promise listener registered before customColumnsState?._tableInit() because custom columns might use data extensions
+      this.collectionFieldsSource?.init(), // the fields source should be initialized and its beforeInitialFetch promise listener registered before customColumnsState?._tableInit() because custom columns might use data extensions
       customColumnsState?._tableInit(),
       viewsState?.init(),
       columnSizesState?.init(),
@@ -657,12 +654,6 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
           fireImmediately: true,
         },
       ),
-      reaction(
-        () => collectionDataExtension?.dataExtension.availableCustomFields,
-        (customFields) => {
-          this.setNewExtendedColumns(customFields ?? []);
-        },
-      ),
       multi.init({ skipFilterListeners }),
       ...biReporters.map((b) => b.init()),
       panels.init(),
@@ -707,7 +698,9 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
         await Promise.all([
           multi.initTask.status.promise,
           tagsCollectionState?.initTask.status.promise?.catch(() => null), // resilience to failed request
-          collectionDataExtension?.initTask.status.promise?.catch(() => null), // resilience to failed request
+          this.collectionFieldsSource?.initTask.status.promise?.catch(
+            () => null,
+          ), // resilience to failed request
           customColumnsState?.initTask.status.promise,
           columnSizesState?.initTask.status.promise,
           ...tableFeatures.map((t) => t.initTask?.status.promise),
@@ -751,35 +744,8 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
     this._adjustSelectedColumns();
   }
 
-  setNewExtendedColumns(
-    fields: CustomField[] = [],
-    { defaultHidden = false }: { defaultHidden?: boolean } = {},
-  ) {
-    if (
-      !this.collectionDataExtension?.dataExtension.initTask.status.isSuccess
-    ) {
-      return;
-    }
-
-    const dataExtension = this.collectionDataExtension?.dataExtension;
-    const getSchemaField = dataExtension
-      ? (namespace: string, fieldId: string) => {
-          const schemas = [
-            dataExtension.userSchema,
-            ...(dataExtension.appSchemas || []),
-          ];
-          const schema = schemas.find((s) => s?.namespace === namespace);
-          return schema?.jsonSchema?.properties?.[fieldId];
-        }
-      : undefined;
-
-    this._extendedColumns = simplifyExtendedColumns<T>({
-      fields,
-      toExtendedFields: this.collection.toExtendedFields,
-      defaultHidden,
-      getSchemaField,
-    });
-
+  setExtendedColumns(columns: Column[]) {
+    this._extendedColumns = columns;
     this._adjustSelectedColumns();
   }
 
@@ -976,12 +942,7 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
   );
 
   openCustomFieldModal = ({ customOrigin }: { customOrigin?: string } = {}) => {
-    return this.collectionDataExtension?.customFieldsPanel.openCustomFieldModal(
-      {
-        origin: 'external',
-        customOrigin,
-      },
-    );
+    return this.collectionFieldsSource?.openFieldModal({ customOrigin });
   };
 
   openManageTagsModal = () => {
@@ -1014,14 +975,11 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
   };
 
   getPageFeaturedActions(): MoreActionItemFactory[] {
-    const { collectionDataExtension, tagsCollectionState } = this;
-    return [collectionDataExtension, tagsCollectionState]
+    const { collectionFieldsSource, tagsCollectionState } = this;
+    return [collectionFieldsSource, tagsCollectionState]
       .filter(
-        (
-          e,
-        ): e is
-          | CollectionDataExtensionState<T, F>
-          | TagsCollectionState<T, F> => e != null,
+        (e): e is CollectionFieldsSourceState | TagsCollectionState<T, F> =>
+          e != null,
       )
       .filter((e) => !e.props?.disableDefaultPageAction)
       .flatMap((e) => e.featuredPageActions);

package/src/state/buildEditableFieldColumns.ts

@@ -0,0 +1,86 @@
+import type { Field, FieldsSource, PatternsFieldType } from '@wix/bex-core';
+import type { EditableColumn, ValidationRule } from './EditableTable/types';
+import { FIELD_TYPE_TO_CELL_TYPE } from './EditableTable/fieldTypeToCellType';
+
+// Types whose editable cell needs typeConfig the projection can't supply yet
+// (referenced collection, address shape). Until that lands, they render as a
+// read-only 'object' cell rather than a broken editor.
+const NEEDS_TYPE_CONFIG = new Set<PatternsFieldType>([
+  'REFERENCE',
+  'MULTI_REFERENCE',
+  'ADDRESS',
+]);
+
+function toValidationRules(field: Field): ValidationRule[] {
+  const v = field.validation;
+  if (!v) {
+    return [];
+  }
+  const rules: ValidationRule[] = [];
+  if (v.required) {
+    rules.push({
+      type: 'required',
+      message: `${field.displayName} is required`,
+    });
+  }
+  if (v.numberRange?.min != null) {
+    rules.push({ type: 'min', value: v.numberRange.min, message: '' });
+  }
+  if (v.numberRange?.max != null) {
+    rules.push({ type: 'max', value: v.numberRange.max, message: '' });
+  }
+  if (v.stringLengthRange?.minLength != null) {
+    rules.push({
+      type: 'minLength',
+      value: v.stringLengthRange.minLength,
+      message: '',
+    });
+  }
+  if (v.stringLengthRange?.maxLength != null) {
+    rules.push({
+      type: 'maxLength',
+      value: v.stringLengthRange.maxLength,
+      message: '',
+    });
+  }
+  return rules;
+}
+
+/**
+ * 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.
+ */
+export function buildEditableFieldColumns(
+  source: FieldsSource,
+): 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 validation = toValidationRules(field);
+    const editable = canWrite && cellType !== 'object' && !field.isSystem;
+    return {
+      id,
+      cellType,
+      field,
+      title: field.displayName,
+      name: field.displayName,
+      isPrimary: field.isPrimary,
+      isSystem: field.isSystem,
+      hideable: true,
+      sortable: field.capabilities?.sortable ?? false,
+      editable,
+      validation: validation.length ? validation : undefined,
+      getValue: (item) => source.getCellValue(item, field),
+      setValue: editable
+        ? (item, value) =>
+            source.setCellValue!(item, field, value) as Record<string, unknown>
+        : undefined,
+    } as EditableColumn<Record<string, unknown>>;
+  });
+}

package/src/state/buildFieldColumns.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import type { Field, FieldsSource, PatternsFieldType } 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';
+import { toFieldType } from '../utils/fieldTypePrefixIcons';
+
+/**
+ * Column width and alignment per field type. These match the widths the table
+ * used before this builder existed, so columns keep the same layout. Types not
+ * listed fall back to DEFAULT_LAYOUT.
+ */
+const LAYOUT_BY_TYPE: Partial<
+  Record<PatternsFieldType, { width: string; align: DataTableColumnAlign }>
+> = {
+  SHORT_TEXT: { width: '150px', align: 'start' },
+  LONG_TEXT: { width: '250px', align: 'start' },
+  URL: { width: '250px', align: 'start' },
+  DATE: { width: '150px', align: 'center' },
+  DATETIME: { width: '200px', align: 'center' },
+  NUMBER: { width: '100px', align: 'center' },
+  BOOLEAN: { width: '100px', align: 'center' },
+  ARRAY: { width: '150px', align: 'start' },
+  DOCUMENT: { width: '180px', align: 'start' },
+};
+
+const DEFAULT_LAYOUT = {
+  width: '200px',
+  align: 'start' as DataTableColumnAlign,
+};
+
+export interface ColumnOverridesContext {
+  /** True on the first push for a source, when every column starts hidden. */
+  firstBuild: boolean;
+}
+
+/**
+ * Builds table columns from a FieldsSource. Each column renders its value with
+ * FieldCell by type. A source can replace any column property — including the
+ * render function for media types — through columnOverrides.
+ */
+export function buildFieldColumns(
+  source: FieldsSource,
+  columnOverrides?: (
+    field: Field,
+    ctx: ColumnOverridesContext,
+  ) => Partial<Column>,
+  ctx: ColumnOverridesContext = { firstBuild: false },
+): Column[] {
+  // align and dataHook aren't on Column but the WDS table reads them, so the
+  // callback is left unannotated — annotating the literal as Column would reject
+  // 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;
+    return {
+      id,
+      field,
+      dataHook: id,
+      name: field.displayName,
+      title: field.displayName,
+      hideable: true,
+      sortable: field.capabilities?.sortable ?? false,
+      isPii: field.isPii,
+      isSystem: field.isSystem,
+      isPrimary: field.isPrimary,
+      fieldType: toFieldType(field.type),
+      width: layout.width,
+      align: layout.align,
+      render: (row, rowNum) => (
+        <FieldCell
+          type={field.type}
+          value={source.getCellValue(row, field)}
+          fieldId={`${id}-${rowNum}`}
+        />
+      ),
+      ...columnOverrides?.(field, ctx),
+    };
+  });
+}