@wix/patterns 1.426.0 → 1.427.0

package/src/components/CmsFieldManagement/CmsFieldModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldModal1691223120";
+var _namespace_ = "CmsFieldModal2556807168";
 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":"CmsFieldModal1691223120__root","modal":"CmsFieldModal1691223120__modal"};
+export var classes = {"root":"CmsFieldModal2556807168__root","modal":"CmsFieldModal2556807168__modal"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/FieldEditorModal.tsx

@@ -14,6 +14,8 @@ export interface FieldEditorModalProps {
   /** Cancel button label (localized). */
   secondaryButtonText: string;
   dataHook?: string;
+  /** z-index of the modal overlay, forwarded to the underlying WDS `Modal`. */
+  zIndex?: number;
 }
 
 /**
@@ -30,6 +32,7 @@ export const FieldEditorModal = observer(
     primaryButtonText,
     secondaryButtonText,
     dataHook = 'field-editor-modal',
+    zIndex,
   }: FieldEditorModalProps) => {
     const { formState } = state;
 
@@ -37,6 +40,7 @@ export const FieldEditorModal = observer(
       <CustomActionModal
         dataHook={dataHook}
         state={state.modal}
+        zIndex={zIndex}
         onAfterClose={() => state.reset()}
         title={title}
         content={formState ? <CmsFieldForm state={formState} /> : null}

package/src/components/CmsFieldManagement/Sections/ValidationAndDefaultsSection.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "ValidationAndDefaultsSection2116056137";
+var _namespace_ = "ValidationAndDefaultsSection1569807852";
 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":"ValidationAndDefaultsSection2116056137__root","accordionWrapper":"ValidationAndDefaultsSection2116056137__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection1569807852__root","accordionWrapper":"ValidationAndDefaultsSection1569807852__accordionWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/formFields/CharactersLimitInput.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CharactersLimitInput3782966396";
+var _namespace_ = "CharactersLimitInput1811547721";
 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":"CharactersLimitInput3782966396__root","field":"CharactersLimitInput3782966396__field"};
+export var classes = {"root":"CharactersLimitInput1811547721__root","field":"CharactersLimitInput1811547721__field"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse1347790111";
+var _namespace_ = "Collapse1149681514";
 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":"Collapse1347790111__root","exit":"Collapse1347790111__exit"};
+export var classes = {"root":"Collapse1149681514__root","exit":"Collapse1149681514__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionPageNew/CollectionPage.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionSectionHeader594798270";
+var _namespace_ = "CollectionSectionHeader2589279026";
 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":"CollectionSectionHeader594798270__root","summaryIcon":"CollectionSectionHeader594798270__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader2589279026__root","summaryIcon":"CollectionSectionHeader2589279026__summaryIcon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/CollectionTable/CollectionTable.tsx

@@ -81,6 +81,9 @@ export interface CollectionTableBaseProps<T, F extends FiltersMap>
    * or `dataExtensionTableSource(...)` for DataExtension, which extends the
    * consumer's own collection.
    */
+  /** A fields source (e.g. `dataExtensionTableSource(...)`) whose fields become
+   *  columns and whose field management wires into the table. Schema sources
+   *  attach via the `@wix/patterns/schema` collection hooks instead. */
   fieldsSource?: FieldsSourceProvider;
 
   tags?: TagsElement<T, F>;
@@ -109,6 +112,15 @@ export interface CollectionTableBaseProps<T, F extends FiltersMap>
    * @external
    */
   bulkActionToolbar?: BulkActionToolbarRenderProp<T, F>;
+  /**
+   * When true, wraps every column header with the AddField hover popover.
+   * The "+" button is revealed when the consumer hovers a column header and
+   * triggers either the schema's `addField` or the data-extension's custom
+   * fields modal. Off by default.
+   * @external
+   */
+  showAddFieldButton?: boolean;
+
   /**
    * Opens a modal from the [`MultiBulkActionToolbar`](./?path=/story/features-actions-bulk-actions--multibulkactiontoolbar).
    * Supported parameters:
@@ -192,6 +204,7 @@ function _CollectionTable<T, F extends FiltersMap = FiltersMap>(
     keyedItems,
     resizeProps,
     forceResize,
+    showAddFieldButton,
     ...rest
   } = props;
 
@@ -244,6 +257,7 @@ function _CollectionTable<T, F extends FiltersMap = FiltersMap>(
   const createWSRColumnBase = useCreateWSRColumnBase({
     horizontalScroll,
     showFieldTypeIcons: state.showFieldTypeIcons,
+    showAddFieldButton,
   });
 
   const transformedColumns: WSRTableColumn<KeyedItem<T>>[] =

package/src/components/CollectionTable/CollectionTableWSRTable.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar3005073471";
+var _namespace_ = "CollectionToolbar2410956896";
 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":"CollectionToolbar3005073471__root","left":"CollectionToolbar3005073471__left","right":"CollectionToolbar3005073471__right","fullWidth":"CollectionToolbar3005073471__fullWidth"};
+export var classes = {"root":"CollectionToolbar2410956896__root","left":"CollectionToolbar2410956896__left","right":"CollectionToolbar2410956896__right","fullWidth":"CollectionToolbar2410956896__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter387023842";
+var _namespace_ = "SearchOrCustomFilter3988720065";
 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":"SearchOrCustomFilter387023842__root","search":"SearchOrCustomFilter387023842__search","searchMobile":"SearchOrCustomFilter387023842__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter3988720065__root","search":"SearchOrCustomFilter3988720065__search","searchMobile":"SearchOrCustomFilter3988720065__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

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

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

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

package/src/components/DataExtension/DataExtensionImportFieldEditor.tsx

@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { reaction } from 'mobx';
+import { CustomFieldModalState, type ImportState } from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { CustomFieldModal } from '../CustomFieldModal';
+import { mappingToFieldDraft } from './platformizedImportRef';
+
+/**
+ * The DataExtension create/edit-field modal for the import flow, returned by
+ * `usePlatformizedImport` as `renderFieldEditor`. Reuses `CustomFieldModal` in
+ * side-effect-free mode (`onSubmit`) — on confirm it hands the draft to the
+ * import (which batches creation pre-upload) instead of creating the field. It
+ * opens/pre-fills from `state.editingMapping` and clears `state.editingHeader`
+ * on close, mirroring the CMS editor.
+ */
+const _DataExtensionImportFieldEditor = ({ state }: { state: ImportState }) => {
+  const container = useWixPatternsContainer();
+  const fieldManagement = state.dataExtensionFieldManagement;
+
+  const [editorState] = useState(() =>
+    fieldManagement
+      ? new CustomFieldModalState({
+          fieldManagement,
+          container,
+          reportBi: container.reportBi,
+          fieldCount: () => state.fields.length,
+          onSubmit: state.applyDataExtensionFieldEdit,
+        })
+      : undefined,
+  );
+
+  useEffect(() => {
+    if (!editorState || !fieldManagement) {
+      return undefined;
+    }
+    const disposeOpen = reaction(
+      () => state.editingMapping,
+      (mapping) => {
+        const header = state.editingHeader;
+        if (mapping && header && !editorState.modalState.isOpen) {
+          const name = mapping.displayName ?? header;
+          editorState.reset();
+          editorState.mode = 'new';
+          editorState.setFormValues(
+            mappingToFieldDraft(
+              mapping,
+              editorState.generateUniqueKey(name),
+              name,
+              fieldManagement,
+            ),
+          );
+          editorState.modalState.modal.open();
+        }
+      },
+      { fireImmediately: true },
+    );
+    const disposeClose = reaction(
+      () => editorState.modalState.isOpen,
+      (isOpen) => {
+        if (!isOpen && state.editingHeader != null) {
+          state.endFieldEdit();
+        }
+      },
+    );
+    return () => {
+      disposeOpen();
+      disposeClose();
+    };
+  }, []);
+
+  if (!editorState) {
+    return null;
+  }
+
+  return <CustomFieldModal state={editorState} />;
+};
+
+export const DataExtensionImportFieldEditor = observer(
+  _DataExtensionImportFieldEditor,
+);

package/src/components/DataExtension/platformizedImportRef.ts

@@ -0,0 +1,147 @@
+import {
+  toDataExtensionFieldType,
+  type BackupFn,
+  type Destination,
+  type FieldDraft,
+  type FieldManagement,
+  type FieldPermissions,
+  type FieldsSource,
+  type ImportButtonConfig,
+  type ImportDataSource,
+  type ImportField,
+  type JobApplicationErrorMap,
+  type NewFieldConfig,
+  type NewFieldType,
+  type PendingNewField,
+  type Schema,
+} from '@wix/bex-core';
+import type { ToolbarCollectionState } from '../../state/ToolbarCollectionState';
+
+// Resolve the four FieldDraft permission booleans from a FieldPermissions bag,
+// defaulting to read-for-apps / hidden-from-visitors when a slot is unset.
+const resolvePermissions = (permissions?: FieldPermissions) => ({
+  readApps: permissions?.installedApps?.defaultRead ?? true,
+  writeApps: permissions?.installedApps?.defaultWrite ?? true,
+  readUsers: permissions?.siteVisitors?.defaultRead ?? false,
+  writeUsers: permissions?.siteVisitors?.defaultWrite ?? false,
+});
+
+type NewFieldMapping = {
+  fieldType: NewFieldType;
+  displayName?: string;
+  config?: NewFieldConfig;
+};
+
+/**
+ * Turns a column's `new` mapping into the DataExtension `FieldDraft` used to both
+ * create the field and pre-fill the editor. The precise type comes from a prior
+ * edit (`config.deType`) or the default for the detected type; permissions come
+ * from a prior edit or the source defaults. Shared by field creation
+ * (`batchAddCustomFields`, key from the resolved pending column) and the editor
+ * (key derived from the name).
+ */
+export const mappingToFieldDraft = (
+  mapping: NewFieldMapping,
+  key: string,
+  name: string,
+  fieldManagement: FieldManagement,
+): FieldDraft => ({
+  type: mapping.config?.deType ?? toDataExtensionFieldType(mapping.fieldType),
+  key,
+  name,
+  containsPii: mapping.config?.isPii ?? false,
+  ...resolvePermissions(
+    mapping.config?.permissions ?? fieldManagement.permissions,
+  ),
+});
+
+/**
+ * Creates the pending new DataExtension fields, one `addField` per column (the
+ * DataExtension service has no batch create). Each `addField` upserts the
+ * source's schema in place, so the table columns refresh reactively — there's
+ * no fields map to merge, hence the `void` return. Not atomic: a failure on
+ * column N leaves 1..N-1 created; `startImport` surfaces it as the error state,
+ * and a retry de-dupes via the editor's `existingFieldKeys`.
+ */
+export const batchAddCustomFields = async (
+  fieldManagement: FieldManagement,
+  pending: PendingNewField[],
+): Promise<void> => {
+  for (const { key, displayName, mapping } of pending) {
+    await fieldManagement.addField(
+      mappingToFieldDraft(mapping, key, displayName, fieldManagement),
+    );
+  }
+};
+
+/**
+ * An `ImportButtonConfig` for a platformized (non–Wix-Data) destination. Cairo
+ * builds it from the consumer's inputs (via `usePlatformizedImport`) plus the
+ * table's toolbar — the toolbar is needed because a DataExtension source is
+ * created inside `setDataExtensionOnTable` and never handed back to the consumer.
+ * Holds the stable `ToolbarCollectionState` and reads the attached fields source
+ * through getters, so an import built before the source attaches (or before its
+ * schema loads) still reads the right values when it runs — mirroring
+ * `SchemaImportRef` reading `source.schemaState`.
+ *
+ * `fields` are the consumer-provided fields plus the DataExtension fields
+ * currently on the table (deduped by id, consumer first).
+ */
+export class PlatformizedImportRef implements ImportButtonConfig {
+  private readonly toolbar: ToolbarCollectionState<any, any>;
+  private readonly _fields: ImportField[];
+  private readonly _destination: Destination;
+  readonly backup?: BackupFn;
+  readonly jobApplicationErrorMap?: JobApplicationErrorMap;
+
+  constructor(params: {
+    toolbar: ToolbarCollectionState<any, any>;
+    fields: ImportField[];
+    destination: Destination;
+    backup?: BackupFn;
+    jobApplicationErrorMap?: JobApplicationErrorMap;
+  }) {
+    this.toolbar = params.toolbar;
+    this._fields = params.fields;
+    this._destination = params.destination;
+    this.backup = params.backup;
+    this.jobApplicationErrorMap = params.jobApplicationErrorMap;
+  }
+
+  private get fieldsSource(): FieldsSource | undefined {
+    return this.toolbar.collectionFieldsSource?.fieldsSource;
+  }
+
+  get fieldManagement(): FieldManagement | undefined {
+    return this.fieldsSource?.fieldManagement;
+  }
+
+  get fields(): ImportField[] {
+    const seen = new Set(this._fields.map((field) => field.id));
+    const dataExtensionFields = (this.fieldsSource?.fields ?? [])
+      .filter((field) => !seen.has(field.id))
+      .map((field) => ({ id: field.id, header: field.displayName }));
+    return [...this._fields, ...dataExtensionFields];
+  }
+
+  get dataSource(): ImportDataSource {
+    // Create-new-field is disabled for now — the import is mapping-only into the
+    // destination. Re-enable by restoring the block below (offers createFields +
+    // fieldManagement when the source permits adding fields).
+    return { destination: this._destination };
+
+    // const fieldManagement = this.fieldManagement;
+    // if (!fieldManagement?.canAddFields) {
+    //   return { destination: this._destination };
+    // }
+    // return {
+    //   destination: this._destination,
+    //   createFields: (pending) => batchAddCustomFields(fieldManagement, pending),
+    //   fieldManagement,
+    // };
+  }
+
+  // DataExtension refreshes its own schema in place on each `addField`, so there
+  // is no returned fields map to merge — `mergeFields` is deliberately omitted.
+  mergeFields?: (fields: Schema['fields']) => void;
+}

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

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

package/src/components/EditableTable/EditableCell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell1068855411";
+var _namespace_ = "EditableCell1855872420";
 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":"EditableCell1068855411__root","validationIndicator":"EditableCell1068855411__validationIndicator"};
+export var classes = {"root":"EditableCell1855872420__root","validationIndicator":"EditableCell1855872420__validationIndicator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableTable.tsx

@@ -36,6 +36,7 @@ export interface EditableTableProps<
     | 'horizontalScroll'
     | 'showSelection'
     | 'showRowNumbers'
+    | 'showAddFieldButton'
   > {
   /** EditableTableState instance, created via useEditableTableCollection */
   state: EditableTableState<T, F>;
@@ -44,9 +45,9 @@ export interface EditableTableProps<
    *  columns are added by the state, so pass `[]` for source-only tables. */
   columns: EditableColumn<T>[];
 
-  /** A fields source built with `tableSchemaSource(...)`. Its fields become
-   *  columns and its field-management menu + modals (add/edit/archive/delete)
-   *  are wired into the table. */
+  /** A fields source (e.g. `dataExtensionTableSource(...)`) whose fields become
+   *  columns and whose field management wires into the table. Schema sources
+   *  attach via the `@wix/patterns/schema` collection hooks instead. */
   fieldsSource?: FieldsSourceProvider;
 
   /** When true, hides the built-in header actions popover for all columns. */
@@ -128,6 +129,7 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
           horizontalScroll
           showSelection
           showRowNumbers
+          showAddFieldButton
         >
           {showAddItemRow && <AddItemRow onAdd={handleAddItem} />}
         </TableVirtual>

package/src/components/EditableTable/HeaderActionsPopover.st.css.ts

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

package/src/components/EditableTable/cellTypes/CellViewLayout.st.css.ts

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

package/src/components/EditableTable/cellTypes/address/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit4124009216";
+var _namespace_ = "Edit1097273263";
 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":"Edit4124009216__root","addressInput":"Edit4124009216__addressInput"};
+export var classes = {"root":"Edit1097273263__root","addressInput":"Edit1097273263__addressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/array/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3230172202";
+var _namespace_ = "Edit3813758758";
 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":"Edit3230172202__root","jsonInput":"Edit3230172202__jsonInput"};
+export var classes = {"root":"Edit3813758758__root","jsonInput":"Edit3813758758__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};