@wix/patterns 1.436.0 → 1.438.0

package/src/state/EditableTable/CellValueState.ts

@@ -16,6 +16,13 @@ export class CellValueState<T, F extends FiltersMap> {
   /** Pending invalid cell values, keyed by `${itemId}:${colId}`. */
   readonly _pendingCells = new Map<string, { value: any; errors: string[] }>();
 
+  /** Valid committed values not yet saved, keyed by `${itemId}:${colId}`.
+   *  Each row's drafts are flushed as one update when focus leaves the row. */
+  readonly _draftCells = new Map<
+    string,
+    { rowKey: string; columnId: string; value: any }
+  >();
+
   private readonly _parent: EditableTableState<T, F>;
   private readonly _extraCellTypes: Map<string, CellType>;
 
@@ -28,12 +35,14 @@ export class CellValueState<T, F extends FiltersMap> {
 
     makeObservable(this, {
       _pendingCells: observable,
+      _draftCells: observable,
       _cellTypeMap: computed,
       clearCells: action,
       toggleCell: action,
       commitHandler: action,
       applyBulkRawValues: action,
       applyBulkValues: action,
+      flushDrafts: action,
     });
   }
 
@@ -66,6 +75,10 @@ export class CellValueState<T, F extends FiltersMap> {
     if (pending) {
       return pending.value;
     }
+    const draft = this._getDraftCell(rowKey, columnId);
+    if (draft) {
+      return draft.value;
+    }
     const column = this._parent._columnMap.get(columnId);
     const keyedItem = this._parent._getKeyedItem(rowKey);
     return column && keyedItem ? column.getValue(keyedItem.item) : undefined;
@@ -119,8 +132,7 @@ export class CellValueState<T, F extends FiltersMap> {
       return '';
     }
     const resolved = this.resolveCellTypeByColumnId(column.id);
-    const pending = this._getPendingCell(rowKey, columnId);
-    const value = pending ? pending.value : column.getValue(keyedItem.item);
+    const value = this.getCellDisplayValue(rowKey, columnId);
     return resolved.serialize ? resolved.serialize(value) : String(value ?? '');
   }
 
@@ -166,10 +178,9 @@ export class CellValueState<T, F extends FiltersMap> {
       return;
     }
 
-    const value = column.getValue(keyedItem.item);
+    const value = this.getCellDisplayValue(rowKey, columnId);
     const newValue = resolved.toggleValue(value);
-    const updatedItem = column.setValue(keyedItem.item, newValue);
-    this._parent.mutation.updateItems([updatedItem]);
+    this._applyValue(rowKey, columnId, newValue);
   }
 
   /** Commit handler — used as callback for CellInteractionState. */
@@ -191,6 +202,14 @@ export class CellValueState<T, F extends FiltersMap> {
     return key ? this._pendingCells.get(key) : undefined;
   }
 
+  private _getDraftCell(
+    rowKey: string,
+    columnId: string,
+  ): { value: any } | undefined {
+    const key = this._pendingCellKey(rowKey, columnId);
+    return key ? this._draftCells.get(key) : undefined;
+  }
+
   private _pendingCellKey(
     rowKey: string,
     columnId: string,
@@ -282,7 +301,22 @@ export class CellValueState<T, F extends FiltersMap> {
         if (pendingKey) {
           this._pendingCells.delete(pendingKey);
         }
-        const currentItem = rowItems.get(rowKey) ?? keyedItem.item;
+        if (this._parent.mutation.isLocalNewRow(rowKey)) {
+          // A row not created on the server yet can't take an update —
+          // buffer the value as a draft; it goes out with the row's
+          // create when focus leaves the row.
+          if (pendingKey) {
+            this._draftCells.set(pendingKey, {
+              rowKey: keyedItem.key,
+              columnId: column.id,
+              value,
+            });
+          }
+          continue;
+        }
+        const currentItem =
+          rowItems.get(rowKey) ??
+          this._consumeRowDrafts(rowKey, keyedItem.item);
         rowItems.set(rowKey, column.setValue(currentItem, value));
       } else if (pendingKey) {
         this._pendingCells.set(pendingKey, {
@@ -311,12 +345,13 @@ export class CellValueState<T, F extends FiltersMap> {
     );
     const pendingKey = this._pendingCellKey(rowKey, columnId);
 
-    if (result.valid) {
-      if (pendingKey) {
-        this._pendingCells.delete(pendingKey);
-      }
-      const updatedItem = column.setValue(keyedItem.item, value);
-      this._parent.mutation.updateItems([updatedItem]);
+    if (result.valid && pendingKey) {
+      this._pendingCells.delete(pendingKey);
+      this._draftCells.set(pendingKey, {
+        rowKey: keyedItem.key,
+        columnId: column.id,
+        value,
+      });
     } else if (pendingKey) {
       this._pendingCells.set(pendingKey, {
         value,
@@ -324,4 +359,54 @@ export class CellValueState<T, F extends FiltersMap> {
       });
     }
   }
+
+  flushDrafts(exceptRowKey?: string) {
+    const rowKeys = new Set<string>();
+    for (const entry of this._draftCells.values()) {
+      if (entry.rowKey !== exceptRowKey) {
+        rowKeys.add(entry.rowKey);
+      }
+    }
+
+    const items: T[] = [];
+    for (const rowKey of rowKeys) {
+      const keyedItem = this._parent._getKeyedItem(rowKey);
+      if (!keyedItem) {
+        this._dropRowDrafts(rowKey);
+      } else if (this._parent.mutation.isLocalNewRow(rowKey)) {
+        this._parent.mutation.commitNewRow(
+          rowKey,
+          this._consumeRowDrafts(rowKey, keyedItem.item),
+        );
+      } else {
+        items.push(this._consumeRowDrafts(rowKey, keyedItem.item));
+      }
+    }
+    if (items.length > 0) {
+      this._parent.mutation.updateItems(items);
+    }
+  }
+
+  private _consumeRowDrafts(rowKey: string, item: T): T {
+    for (const [key, entry] of this._draftCells) {
+      if (entry.rowKey !== rowKey) {
+        continue;
+      }
+      const column = this._parent._columnMap.get(entry.columnId);
+      if (column?.setValue) {
+        item = column.setValue(item, entry.value);
+      }
+      this._draftCells.delete(key);
+    }
+    return item;
+  }
+
+  /** Drop a row's draft entries without saving (the row no longer exists). */
+  private _dropRowDrafts(rowKey: string) {
+    for (const [key, entry] of this._draftCells) {
+      if (entry.rowKey === rowKey) {
+        this._draftCells.delete(key);
+      }
+    }
+  }
 }

package/src/state/EditableTable/EditableTableState.ts

@@ -11,6 +11,7 @@ import type { MessageModalLayoutProps } from '@wix/design-system';
 import type { KeyedItem, RemoveItemDisabledResult } from '@wix/bex-core';
 import { ToolbarCollectionState } from '../ToolbarCollectionState';
 import { TableState } from '../TableState';
+import type { TableStateParams } from '../TableState';
 import { ICollectionComponentState } from '../ICollectionComponentState';
 import { CellInteractionState } from './CellInteractionState';
 import { CellValueState } from './CellValueState';
@@ -73,6 +74,35 @@ export interface EditableTableStatePublicAPI<T, F extends FiltersMap> {
   isMultiDeleteDisabled(rowKeys: string[]): boolean;
 }
 
+/**
+ * Draft rows (added locally, not yet created on the server) are not part of
+ * the collection result. This TableState merges them into the rendered list,
+ * so everything that renders rows — the WDS table and the virtualizer — sees
+ * them, and a table whose only rows are drafts does not show the empty state.
+ */
+class TableStateWithDraftRows<T, F extends FiltersMap> extends TableState<
+  T,
+  F
+> {
+  private readonly _mergeDraftRows: (items: KeyedItem<T>[]) => KeyedItem<T>[];
+
+  constructor(
+    params: TableStateParams<T, F>,
+    mergeDraftRows: (items: KeyedItem<T>[]) => KeyedItem<T>[],
+  ) {
+    super(params);
+    this._mergeDraftRows = mergeDraftRows;
+  }
+
+  get keyedItems() {
+    return this._mergeDraftRows(this.collection.result.keyedItems);
+  }
+
+  get showEmptyState() {
+    return this.toolbar.multi.showEmptyState && this.keyedItems.length === 0;
+  }
+}
+
 export class EditableTableState<T, F extends FiltersMap>
   implements ICollectionComponentState, EditableTableStatePublicAPI<T, F>
 {
@@ -106,11 +136,14 @@ export class EditableTableState<T, F extends FiltersMap>
         componentType: 'EditableTable',
       });
 
-    this.tableState = new TableState({
-      collection: params.collection,
-      container: params.container,
-      toolbar: this.toolbar,
-    });
+    this.tableState = new TableStateWithDraftRows(
+      {
+        collection: params.collection,
+        container: params.container,
+        toolbar: this.toolbar,
+      },
+      (keyedItems) => this.mutation._mergeDraftRows(keyedItems),
+    );
 
     this.cellValue = new CellValueState<T, F>(
       this,
@@ -226,7 +259,11 @@ export class EditableTableState<T, F extends FiltersMap>
   }
 
   _getKeyedItem(key: string): KeyedItem<T> | undefined | null {
-    return this.collection.getKeyedItem(key);
+    // Draft rows are not in the collection — fall back to the merged list.
+    return (
+      this.collection.getKeyedItem(key) ??
+      this.keyedItems.find((ki) => ki.key === key)
+    );
   }
 
   _toIndices(pos: Cell): { row: number; col: number } | null {
@@ -261,7 +298,11 @@ export class EditableTableState<T, F extends FiltersMap>
 
   init(columns: EditableColumn<T>[]) {
     this._providedColumns = columns;
-    return this.mutation.init();
+    const disposeMutation = this.mutation.init();
+    return () => {
+      this.cellValue.flushDrafts();
+      disposeMutation();
+    };
   }
 
   addItem(afterItemKey?: string): string {

package/src/state/EditableTable/MutationState.ts

@@ -1,7 +1,9 @@
+import { action, makeObservable, observable, runInAction } from 'mobx';
 import type {
   CollectionOptimisticActions,
   CollectionState,
   FiltersMap,
+  KeyedItem,
 } from '@wix/bex-core';
 import type { EditableTableState } from './EditableTableState';
 
@@ -21,6 +23,21 @@ export class MutationState<T, F extends FiltersMap> {
   private readonly _optimisticActions: CollectionOptimisticActions<T, F>;
   private readonly _parent: EditableTableState<T, F>;
 
+  /**
+   * Rows added locally and not yet created on the server, by row key.
+   * `afterItemKey` is the key of the row directly above the draft
+   * (undefined = top of the list). `addItem` keeps this exact, so at most
+   * one draft is anchored on any given row.
+   */
+  readonly _drafts = new Map<string, { item: T; afterItemKey?: string }>();
+
+  /**
+   * Row keys of creates still in flight. Their rows are already in the
+   * collection result (optimistic patch), but their keys change when the
+   * server responds, so nothing may anchor on them.
+   */
+  private readonly _pendingCreateKeys = new Set<string>();
+
   constructor(
     parent: EditableTableState<T, F>,
     handlers: EditableTableMutationHandlers<T>,
@@ -31,15 +48,96 @@ export class MutationState<T, F extends FiltersMap> {
     this._parent = parent;
     this._handlers = handlers;
     this._optimisticActions = createOptimisticActions(parent.collection);
+    makeObservable(this, {
+      _drafts: observable.shallow,
+      addItem: action,
+      commitNewRow: action,
+      deleteItems: action,
+    });
   }
 
   init() {
     return this._optimisticActions.init();
   }
 
+  /**
+   * Merge draft rows into the collection's keyed items for rendering.
+   * Every draft renders directly below the row it is anchored on, so a
+   * draft anchored on another draft follows it down the list. Drafts whose
+   * anchor left the list (filtered out, deleted) stay visible at the end.
+   */
+  _mergeDraftRows(keyedItems: KeyedItem<T>[]): KeyedItem<T>[] {
+    if (this._drafts.size === 0) {
+      return keyedItems;
+    }
+
+    const draftBelow = new Map<string | undefined, { key: string; item: T }>();
+    for (const [rowKey, draft] of this._drafts) {
+      draftBelow.set(draft.afterItemKey, { key: rowKey, item: draft.item });
+    }
+
+    const merged: KeyedItem<T>[] = [];
+    const pushDraftsBelow = (rowKey: string | undefined) => {
+      let anchorKey = rowKey;
+      let draft = draftBelow.get(anchorKey);
+      while (draft) {
+        draftBelow.delete(anchorKey);
+        merged.push({
+          item: draft.item,
+          key: draft.key,
+          id: draft.key,
+          index: merged.length,
+          pageIndex: -1,
+          indexWithinPage: -1,
+        });
+        anchorKey = draft.key;
+        draft = draftBelow.get(anchorKey);
+      }
+    };
+
+    pushDraftsBelow(undefined);
+    for (const keyedItem of keyedItems) {
+      merged.push(keyedItem);
+      pushDraftsBelow(keyedItem.key);
+    }
+    for (const anchorKey of [...draftBelow.keys()]) {
+      pushDraftsBelow(anchorKey);
+    }
+    return merged;
+  }
+
   addItem(afterItemKey?: string): string {
     const newItem = this._handlers.createItem();
-    this._optimisticActions.createOne(newItem, {
+    const rowKey = this._parent.collection.itemKey(newItem);
+    // The new row lands directly below its anchor, pushing down whichever
+    // draft sat there — that draft is now anchored on the new row.
+    for (const [key, draft] of this._drafts) {
+      if (draft.afterItemKey === afterItemKey) {
+        this._drafts.set(key, { ...draft, afterItemKey: rowKey });
+      }
+    }
+    this._drafts.set(rowKey, { item: newItem, afterItemKey });
+    return rowKey;
+  }
+
+  isLocalNewRow(rowKey: string): boolean {
+    return this._drafts.has(rowKey);
+  }
+
+  /** Create a local new row on the server, with its edited values merged in. */
+  commitNewRow(rowKey: string, item: T) {
+    const draft = this._drafts.get(rowKey);
+    if (!draft) {
+      return;
+    }
+
+    // The create's optimistic patch can only anchor on a real server row —
+    // not a draft, not another row created through this table's patches.
+    const afterItemKey = this._serverAnchorFor(rowKey);
+
+    this._drafts.delete(rowKey);
+    this._pendingCreateKeys.add(rowKey);
+    this._optimisticActions.createOne(item, {
       submit: this._submitCreate,
       afterItemKey,
       successToast: 'Item created',
@@ -48,7 +146,6 @@ export class MutationState<T, F extends FiltersMap> {
         action: { onClick: retry, text: 'Retry' },
       }),
     });
-    return this._parent.collection.itemKey(newItem);
   }
 
   duplicateItem(rowKey: string) {
@@ -69,9 +166,10 @@ export class MutationState<T, F extends FiltersMap> {
         break;
       }
     }
+    this._pendingCreateKeys.add(newId);
     this._optimisticActions.createOne(duplicate as T, {
       submit: this._submitCreate,
-      afterItemKey: keyedItem.key,
+      afterItemKey: rowKey,
       successToast: 'Item duplicated',
       errorToast: (_err: unknown, { retry }: { retry: () => void }) => ({
         message: 'Failed to duplicate item',
@@ -81,7 +179,36 @@ export class MutationState<T, F extends FiltersMap> {
   }
 
   deleteItems(rowKeys: string[]) {
-    const items = rowKeys
+    const deleted = new Set(rowKeys);
+
+    // Surviving drafts anchored on a deleted row move up to the nearest
+    // surviving row, so they don't fall to the end of the list.
+    for (const [rowKey, draft] of this._drafts) {
+      if (
+        deleted.has(rowKey) ||
+        draft.afterItemKey == null ||
+        !deleted.has(draft.afterItemKey)
+      ) {
+        continue;
+      }
+      this._drafts.set(rowKey, {
+        ...draft,
+        afterItemKey: this._survivingAnchorAbove(draft.afterItemKey, deleted),
+      });
+    }
+
+    const serverRowKeys: string[] = [];
+    for (const rowKey of rowKeys) {
+      if (this._drafts.has(rowKey)) {
+        // Never created on the server — dropping the draft is the whole
+        // delete.
+        this._drafts.delete(rowKey);
+      } else {
+        serverRowKeys.push(rowKey);
+      }
+    }
+
+    const items = serverRowKeys
       .map((key) => this._parent.keyedItems.find((ki) => ki.key === key)?.item)
       .filter((item): item is T => item != null);
     if (items.length === 0) {
@@ -117,6 +244,51 @@ export class MutationState<T, F extends FiltersMap> {
     });
   }
 
+  /**
+   * Nearest row above `rowKey` that a create can anchor on: a server row
+   * that is not a draft and not itself a created row still living as an
+   * optimistic patch. Anchoring one create on another strands the new row
+   * at the top of the table — the core merge repositions created patches
+   * newest-first, so the anchor moves away after the new row is placed.
+   */
+  private _serverAnchorFor(rowKey: string): string | undefined {
+    const keyedItems = this._parent.keyedItems;
+    const start = keyedItems.findIndex((ki) => ki.key === rowKey);
+    for (let i = start - 1; i >= 0; i--) {
+      const key = keyedItems[i].key;
+      if (
+        !this._drafts.has(key) &&
+        !this._pendingCreateKeys.has(key) &&
+        !this._isPatchCreatedRow(key)
+      ) {
+        return key;
+      }
+    }
+    return undefined;
+  }
+
+  private _isPatchCreatedRow(key: string): boolean {
+    return this._optimisticActions.state.patches.some(
+      (patch) =>
+        patch.actionType === 'createMany' && patch.patchedItems.has(key),
+    );
+  }
+
+  private _survivingAnchorAbove(
+    key: string,
+    deleted: Set<string>,
+  ): string | undefined {
+    const keyedItems = this._parent.keyedItems;
+    const start = keyedItems.findIndex((ki) => ki.key === key);
+    for (let i = start - 1; i >= 0; i--) {
+      const k = keyedItems[i].key;
+      if (!deleted.has(k)) {
+        return k;
+      }
+    }
+    return undefined;
+  }
+
   private readonly _submitCreate = async (items: T[]) => {
     const createdItems = await this._handlers.submitCreate(items);
     if (!createdItems) {
@@ -124,16 +296,25 @@ export class MutationState<T, F extends FiltersMap> {
     }
 
     const { itemKey } = this._parent.collection;
-    createdItems.forEach((createdItem, index) => {
-      const submittedItem = items[index];
-      if (!submittedItem) {
-        return;
-      }
+    runInAction(() => {
+      createdItems.forEach((createdItem, index) => {
+        const submittedItem = items[index];
+        if (!submittedItem) {
+          return;
+        }
 
-      this._parent.cellInteraction.replaceRowKey(
-        itemKey(submittedItem),
-        itemKey(createdItem),
-      );
+        const oldKey = itemKey(submittedItem);
+        const newKey = itemKey(createdItem);
+        this._pendingCreateKeys.delete(oldKey);
+        // The server assigned the row a new key — drafts anchored on the
+        // old key must follow the row under its new key.
+        for (const [rowKey, draft] of this._drafts) {
+          if (draft.afterItemKey === oldKey) {
+            this._drafts.set(rowKey, { ...draft, afterItemKey: newKey });
+          }
+        }
+        this._parent.cellInteraction.replaceRowKey(oldKey, newKey);
+      });
     });
 
     return createdItems;

package/src/state/EditableTable/utils.ts

@@ -43,6 +43,13 @@ function checkValidationRule(rule: ValidationRule, value: any): boolean {
       return typeof value === 'string' && rule.value.test(value);
     case 'custom':
       return rule.validate(value);
+    case 'specificValues':
+      return (
+        value == null ||
+        value === '' ||
+        (typeof value === 'string' &&
+          rule.values.some((option) => option.id === value))
+      );
     default:
       return true;
   }

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

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

package/src/state/buildEditableFieldColumns.ts

@@ -69,6 +69,13 @@ function toValidationRules(field: Field): ValidationRule[] {
       message: '',
     });
   }
+  if (v.specificValues?.length) {
+    rules.push({
+      type: 'specificValues',
+      values: v.specificValues,
+      message: `${field.displayName} must be one of the allowed values`,
+    });
+  }
   return rules;
 }