@wix/patterns 1.426.0 → 1.430.0

package/src/components/EntityPageFields/EntityPageField.tsx

@@ -0,0 +1,147 @@
+import React, { Suspense } from 'react';
+import { Box, Text } from '@wix/design-system';
+import type { Field, PatternsFieldType } from '@wix/bex-core';
+import type { Control } from '@wix/bex-core/form';
+import { EntityPageReferenceField } from './EntityPageReferenceField';
+import {
+  FormShortText,
+  FormLongText,
+  FormNumber,
+  FormCheckbox,
+  FormDateInput,
+  FormDateTime,
+  FormTime,
+  FormUrl,
+  FormEmail,
+  FormColor,
+  FormImageInput,
+  FormVideo,
+} from '@wix/patterns-fields';
+
+// Heavy renderers pull large editors (Ricos, draft-js) and media SDKs
+// (@wix/media). Loading them lazily keeps that weight out of the @wix/patterns
+// main bundle — it moves into an async chunk fetched only when an entity page
+// first renders a field of that type. @wix/patterns-fields is side-effect-free,
+// so a dynamic import of one heavy export splits into its own chunk even though
+// the light renderers above are imported statically from the same package.
+// FormDocument, FormMediaGallery, and FormRichContent are not on the package
+// main entry — they ship from their own subpaths. Mirrors the FieldCell.tsx
+// pattern.
+function lazyField<P extends object>(
+  load: () => Promise<{ default: React.ComponentType<P> }>,
+) {
+  const Lazy = React.lazy(load);
+  return function LazyField(props: P) {
+    return (
+      <Suspense fallback={null}>
+        <Lazy {...props} />
+      </Suspense>
+    );
+  };
+}
+
+const FormAudio = lazyField(async () => ({
+  default: (await import('@wix/patterns-fields')).FormAudio,
+}));
+const FormRichText = lazyField(async () => ({
+  default: (await import('@wix/patterns-fields')).FormRichText,
+}));
+const FormMultiDocument = lazyField(async () => ({
+  default: (await import('@wix/patterns-fields')).FormMultiDocument,
+}));
+const FormDocument = lazyField(async () => ({
+  default: (await import('@wix/patterns-fields/form-document-field'))
+    .FormDocument,
+}));
+const FormMediaGallery = lazyField(async () => ({
+  default: (await import('@wix/patterns-fields/form-media-gallery-field'))
+    .FormMediaGallery,
+}));
+const FormRichContent = lazyField(async () => ({
+  default: (await import('@wix/patterns-fields/form-rich-content-input'))
+    .FormRichContent,
+}));
+
+// Reference / MultiReference have no form renderer in @wix/patterns-fields yet,
+// so those types are still skipped (see remaining-issues.md #2).
+const FIELD_INPUTS: Partial<
+  Record<PatternsFieldType, React.ComponentType<any>>
+> = {
+  SHORT_TEXT: FormShortText,
+  UNKNOWN: FormShortText,
+  LONG_TEXT: FormLongText,
+  NUMBER: FormNumber,
+  BOOLEAN: FormCheckbox,
+  DATE: FormDateInput,
+  DATETIME: FormDateTime,
+  TIME: FormTime,
+  URL: FormUrl,
+  EMAIL: FormEmail,
+  COLOR: FormColor,
+  IMAGE: FormImageInput,
+  VIDEO: FormVideo,
+  AUDIO: FormAudio,
+  MEDIA_GALLERY: FormMediaGallery,
+  RICH_TEXT: FormRichText,
+  RICH_CONTENT: FormRichContent,
+  DOCUMENT: FormDocument,
+  MULTI_DOCUMENT: FormMultiDocument,
+};
+
+export interface EntityPageFieldProps {
+  field: Field;
+  formControl: Control<any>;
+  /** The entity, used by each renderer to seed its form default value. */
+  data: Record<string, unknown>;
+}
+
+// Each renderer owns its own react-hook-form wiring (useController keyed on
+// field.id), so this only needs to pick the renderer and pass the field.
+export function EntityPageField({
+  field,
+  formControl,
+  data,
+}: EntityPageFieldProps) {
+  // Reference fields need referenced-collection data, so they go through a
+  // wrapper (resolves the referenced source, fetches items) rather than the
+  // uniform dispatcher below.
+  const isReference =
+    field.type === 'REFERENCE' || field.type === 'MULTI_REFERENCE';
+  const FieldInput = FIELD_INPUTS[field.type];
+
+
+  if (!isReference && !FieldInput) {
+    return null;
+  }
+
+  const ScalarInput = FieldInput as React.ComponentType<any>;
+  const inner = isReference ? (
+    <EntityPageReferenceField
+      field={field}
+      formControl={formControl}
+      data={data}
+    />
+  ) : (
+    <ScalarInput
+      field={field}
+      formControl={formControl}
+      data={data}
+      dataHook={`entity-page-field-${field.id}`}
+    />
+  );
+
+  return (
+    <Box direction="vertical" gap="SP1" width="100%">
+      {inner}
+      {field.helpText && (
+        <Text
+          size="small"
+          secondary
+          dataHook={`entity-page-field-${field.id}-help-text`}
+        >
+          {field.helpText}
+        </Text>
+      )}
+    </Box>
+  );
+}

package/src/components/EntityPageFields/EntityPageFields.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Box } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import type { Field } from '@wix/bex-core';
+import { PatternsFieldsProvider, useEntityPageContext } from '../../providers';
+import { EntityPageField } from './EntityPageField';
+
+export interface EntityPageFieldsProps {
+  dataHook?: string;
+  /** Field ids to render, in order. Omitted ⇒ all schema fields in schema order. */
+  fieldIds?: string[];
+}
+
+function _EntityPageFields({
+  dataHook = 'entity-page-fields',
+  fieldIds,
+}: EntityPageFieldsProps) {
+  const state = useEntityPageContext();
+  const { schema } = state;
+
+  // The schema loads with the entity in EntityPageState.init(); until it
+  // resolves there are no fields to render.
+  if (!schema) {
+    return null;
+  }
+
+  const fields = resolveFields(schema.fields, schema.idField, fieldIds);
+  const data = (state.entity ?? {}) as Record<string, unknown>;
+
+  return (
+    <Box direction="vertical" gap="SP4" width="100%" dataHook={dataHook}>
+      {fields.map((field) => (
+        <EntityPageField
+          key={field.id}
+          field={field}
+          formControl={state.form.control}
+          data={data}
+        />
+      ))}
+    </Box>
+  );
+}
+
+function resolveFields(
+  fields: Record<string, Field | undefined>,
+  idField: string,
+  fieldIds?: string[],
+): Field[] {
+  // An explicit fieldIds list is taken as-is — the consumer chose those fields.
+  if (fieldIds) {
+    return fieldIds
+      .map((id) => fields[id])
+      .filter((field): field is Field => Boolean(field));
+  }
+
+  // By default, skip the id field and system fields (e.g. `_id`, `_manualSort`,
+  // `_createdDate`): they are not user-editable, and rendering a required one
+  // would silently block save (react-hook-form marks the form invalid).
+  return Object.values(fields).filter(
+    (field): field is Field =>
+      Boolean(field) && !field!.isSystem && field!.id !== idField,
+  );
+}
+
+export const EntityPageFieldsWrapped = observer(_EntityPageFields);
+export function EntityPageFields(props: EntityPageFieldsProps) {
+  return (
+    <PatternsFieldsProvider>
+      <EntityPageFieldsWrapped {...props} />
+    </PatternsFieldsProvider>
+  );
+}

package/src/components/EntityPageFields/EntityPageFields.uni.driver.ts

@@ -0,0 +1,12 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../unidriver';
+
+export default (base: UniDriver) => {
+  return {
+    ...baseUniDriverFactory(base),
+
+    /** Whether a field with the given id is rendered. */
+    hasField: (fieldId: string) =>
+      base.$(`[data-hook="entity-page-field-${fieldId}"]`).exists(),
+  };
+};

package/src/components/EntityPageFields/EntityPageReferenceField.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { sourceFetchData } from '@wix/bex-core';
+import type { BaseReferenceField, Field, Schema } from '@wix/bex-core';
+import type { Control } from '@wix/bex-core/form';
+import { useCollection } from '@wix/bex-core/react';
+import { FormReference, FormMultiReference } from '@wix/patterns-fields';
+import { useEntityPageContext } from '../../providers';
+
+type RefRow = Record<string, unknown>;
+
+const imageFieldOf = (
+  fields: Schema['fields'] | undefined,
+): string | undefined =>
+  Object.entries(fields ?? {}).find(([, f]) => f?.type === 'IMAGE')?.[0];
+
+export interface EntityPageReferenceFieldProps {
+  field: Field;
+  formControl: Control<any>;
+  data: Record<string, unknown>;
+}
+
+// Adapts a referenced SchemaSource (schemaSource.references[collectionId]) to the
+// data-agnostic FormReference / FormMultiReference renderers: it queries the
+// referenced collection for candidate items and derives the referenced schema's
+// id/display/image fields, mirroring EditableTable's reference cell Edit.
+function _EntityPageReferenceField({
+  field,
+  formControl,
+  data,
+}: EntityPageReferenceFieldProps) {
+  const state = useEntityPageContext();
+  const referencedCollectionId = (field as BaseReferenceField).referenceMetadata
+    ?.referencedCollectionId;
+  const refSource = referencedCollectionId
+    ? state.schemaSource?.references?.[referencedCollectionId]
+    : undefined;
+
+  const collection = useCollection<RefRow>(
+    refSource
+      ? {
+          queryName: `entity-page-reference-${refSource.collectionId}`,
+          paginationMode: refSource.paginationMode,
+          fetchData: sourceFetchData(refSource),
+          itemKey: refSource.itemKey,
+          itemName: refSource.itemName,
+        }
+      : {
+          queryName: `entity-page-reference-${field.id}`,
+          paginationMode: 'offset',
+          fetchData: async () => ({ items: [], total: 0 }),
+          itemKey: (row: RefRow) => String(row.id ?? ''),
+          itemName: (row: RefRow) => String(row.id ?? ''),
+        },
+  );
+
+  useEffect(() => collection.init(), [collection]);
+
+  const [refSchema, setRefSchema] = useState<Schema | null>(null);
+  useEffect(() => {
+    let active = true;
+    refSource?.loadSchema().then((loaded) => {
+      if (active) {
+        setRefSchema(loaded.schema);
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, [refSource]);
+
+  const idField = refSchema?.idField;
+  const displayField = refSchema?.displayField;
+  const imageField = imageFieldOf(refSchema?.fields);
+
+  const items = useMemo(() => {
+    if (!idField || !displayField) {
+      return [];
+    }
+    return collection.result.keyedItems.map((ki) => ({
+      id: String((ki.item as RefRow)[idField] ?? ki.key),
+      name: String((ki.item as RefRow)[displayField] ?? ''),
+      image: imageField
+        ? ((ki.item as RefRow)[imageField] as string | undefined)
+        : undefined,
+    }));
+  }, [collection.result.keyedItems, idField, displayField, imageField]);
+
+  // A reference with no matching source entry, or before its schema resolves,
+  // can't render a picker — skip it rather than render a broken input.
+  if (!refSource || !idField || !displayField) {
+    return null;
+  }
+
+  const shared = {
+    field,
+    value: data?.[field.id] as never,
+    onChange: () => {},
+    formControl,
+    data,
+    dataHook: `entity-page-field-${field.id}`,
+    items,
+    idField,
+    displayField,
+    imageField,
+    searchValue: collection.query.search.value,
+    onSearch: (query: string) => collection.search(query),
+    onClearSearch: () => collection.clearSearch(),
+    hasMore: !collection.fetchedLastPage,
+    loadMore: collection.fetchNextPageIfNeeded,
+  };
+
+  return field.type === 'MULTI_REFERENCE' ? (
+    <FormMultiReference {...shared} />
+  ) : (
+    <FormReference {...shared} />
+  );
+}
+
+export const EntityPageReferenceField = observer(_EntityPageReferenceField);

package/src/components/EntityPageFields/index.ts

@@ -0,0 +1,2 @@
+export * from './EntityPageFields';
+export * from './EntityPageField';

package/src/components/ExportButton/ExportButton.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { FiltersMap, ModalState } from '@wix/bex-core';
 import { Button, Drawer, Modal } from '@wix/design-system';
-import { UploadExport } from '@wix/wix-ui-icons-common';
+import { UploadExport } from '@wix/wix-ui-icons-common/lazy';
 import { observer, Observer } from 'mobx-react-lite';
 import { ExportButtonModalLayout } from './ExportButtonModalLayout';
 import { useWixPatternsContainer } from '@wix/bex-core/react';

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

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

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

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

package/src/components/ImportButton/CAIRO-4118-tasks.md

@@ -9,7 +9,7 @@ This tracker turns the ticket's task spec into individually-trackable items. All
 
 | # | Task | Desired behavior | Status | Resolution / Notes |
 |---|---|---|---|---|
-| G1 | Success toast | On successful import, show a success toast | open | — |
+| G1 | Success toast | On successful import, show a success toast | dismiss | Superseded by [CAIRO-4442](https://wix.atlassian.net/browse/CAIRO-4442): completion is now reported by a summary modal (created/updated/failed counts) shown on **every** finished import, not a toast. |
 
 ## Step 1 — Upload: File-Level Failures
 
@@ -34,13 +34,13 @@ This tracker turns the ticket's task spec into individually-trackable items. All
 |---|---|---|---|---|
 | 3.1 | Backup fails (pre-upload backup throws) | Put modal into **error state**; replace progress label with error message; footer CTA → **"Try again"** (re-runs import). [Design](https://www.figma.com/design/RpB9iQ6a43xcvKiovmJaA1/Import?node-id=145-12691) | done | When `_runBackup` rejects, `ImportState.importStatus` goes to `queryStatus.error` (existing). The progress step now renders the error state: `ImportStepProgress.tsx` replaces the `import-progress-label` with an `import-error-message` Text and sets `error` on the `LinearProgressBar` whenever `importStatus.isError` (message = `errorHandler.getResolvedError(...)?.message ?? cairo.import.genericError`). The progress-step footer in `getImportModalStepProps.tsx` swaps the disabled **Importing** primary button for an enabled **Try again** (`cairo.import.tryAgain`, re-runs `state.startImport`) and changes the title to `cairo.import.failedTitle` when `importStatus.isError`. `startImport` now resets `importStatus` → `idle` and `result` → zero at the start of each attempt so a retry begins from a clean slate. Tests in `Table.importButton.spec.tsx`: *"puts the modal into error state and replaces the progress label with an error message when backup fails"*, *"re-runs the import when the 'Try again' CTA is clicked after a backup failure"*. All keys (`tryAgain`, `genericError`, `failedTitle`) already registered in the Translation Center. |
 | 3.2 | Full batch failure (network/server error on first batch) | Modal in **error state** with message and **try again** action | done | `ImportState._uploadBatches` now distinguishes a *thrown* batch error before anything was imported (`result.succeeded === 0`) from a partial failure: in that case it re-throws so `startImport`'s catch sets `importStatus` → `queryStatus.error`. This reuses the same error-state UI shipped for 3.1 (error message replacing the progress label, error `LinearProgressBar`, `cairo.import.failedTitle`, enabled **Try again** primary button re-running `startImport`). A thrown error *after* some batches succeeded keeps the existing partial-success inline message (that path becomes the 3.3 toast later). Tests in `Table.importButton.spec.tsx`: *"puts the modal into error state with a 'Try again' CTA when the first batch fails"* and *"re-runs the import when 'Try again' is clicked after a full batch failure"*. |
-| 3.3 | Partial success — some rows don't make it in, whether a batch *returns* row `errors` or *throws* after some succeeded | Close modal; show toast with how many failed / succeeded + action to **download the CSV** | done | `ImportState._uploadBatches` accumulates a single `_failedRowIndices` (global indices into `csvRows`) across the whole run: (a) rows the server rejects inside an OK response are read from each batch's returned `errors[].rowIndex`, offset by the batch's start index; (b) when a batch *throws* after at least one OK response, every row from the throwing batch onward (the throwing batch + all un-attempted batches) is added on top of any already-rejected rows. If *no* OK response arrived before a throw, it re-throws → full batch failure (3.2). `startImport`'s success branch closes the modal, refreshes the collection, and — whenever `_failedRowIndices` is non-empty — fires a `WARNING` toast: message `cairo.import.partialSuccessToast` ("{failed} rows failed, {imported} rows imported", `failed = _failedRowIndices.length`, `imported = totalCount - failed`) with a `cairo.import.downloadFailedRows` ("Download failed rows") action. The action serializes `csvHeaders` + the failed rows via the `unparseCsv` helper (`parseCsv.ts`, `Papa.unparse`) and downloads through the `downloadCsv` prop, wired in `useImport.ts` from `container.window.download` as a `data:text/csv` URI (filename `failed-<original>`). `BulkUploadResults` was **not** changed — failed-row tracking lives entirely in `ImportState` (it owns `csvRows` + batching). The previous behavior, where a returned-`errors` batch left the modal open on an inline partial-success message, was the bug fixed here. Tests in `Table.importButton.spec.tsx`: throw path — *"closes the modal and shows a toast when a batch fails after some succeed"*, *"downloads only the failed rows when the toast download action is clicked"*; returned-errors path — *"closes the modal and shows a toast when a batch returns row errors"*, *"downloads the rejected rows when a batch returns row errors"*. New keys `partialSuccessToast` / `downloadFailedRows` must be registered in the Translation Center (core `messages_en.json` + generated `translations.ts` are gitignored). |
+| 3.3 | Partial success — some rows don't make it in, whether a batch *returns* row `errors` or *throws* after some succeeded | Close modal; show toast with how many failed / succeeded + action to **download the CSV** | dismiss | Toast behavior superseded by [CAIRO-4442](https://wix.atlassian.net/browse/CAIRO-4442): the modal stays open and shows a summary step (created/updated/failed) with a **Download CSV** button for the failed rows; the CSV gains a leading ".Why it failed to import" reason column. The failed-row tracking described below still applies — only the toast + auto-close is replaced. Original implementation notes retained for reference: `ImportState._uploadBatches` accumulates a single `_failedRowIndices` (global indices into `csvRows`) across the whole run: (a) rows the server rejects inside an OK response are read from each batch's returned `errors[].rowIndex`, offset by the batch's start index; (b) when a batch *throws* after at least one OK response, every row from the throwing batch onward (the throwing batch + all un-attempted batches) is added on top of any already-rejected rows. If *no* OK response arrived before a throw, it re-throws → full batch failure (3.2). `startImport`'s success branch closes the modal, refreshes the collection, and — whenever `_failedRowIndices` is non-empty — fires a `WARNING` toast: message `cairo.import.partialSuccessToast` ("{failed} rows failed, {imported} rows imported", `failed = _failedRowIndices.length`, `imported = totalCount - failed`) with a `cairo.import.downloadFailedRows` ("Download failed rows") action. The action serializes `csvHeaders` + the failed rows via the `unparseCsv` helper (`parseCsv.ts`, `Papa.unparse`) and downloads through the `downloadCsv` prop, wired in `useImport.ts` from `container.window.download` as a `data:text/csv` URI (filename `failed-<original>`). `BulkUploadResults` was **not** changed — failed-row tracking lives entirely in `ImportState` (it owns `csvRows` + batching). The previous behavior, where a returned-`errors` batch left the modal open on an inline partial-success message, was the bug fixed here. Tests in `Table.importButton.spec.tsx`: throw path — *"closes the modal and shows a toast when a batch fails after some succeed"*, *"downloads only the failed rows when the toast download action is clicked"*; returned-errors path — *"closes the modal and shows a toast when a batch returns row errors"*, *"downloads the rejected rows when a batch returns row errors"*. New keys `partialSuccessToast` / `downloadFailedRows` must be registered in the Translation Center (core `messages_en.json` + generated `translations.ts` are gitignored). |
 
 ## Status summary
 
 | # | Topic | Status |
 |---|---|---|
-| G1 | Success toast | open |
+| G1 | Success toast | dismiss (superseded by CAIRO-4442) |
 | 1.1 | File can't be read | done |
 | 1.2 | Malformed CSV | done |
 | 1.3 | Non-UTF-8 encoding | done |
@@ -50,4 +50,4 @@ This tracker turns the ticket's task spec into individually-trackable items. All
 | 2.3 | Field/data mismatch | open |
 | 3.1 | Backup fails | done |
 | 3.2 | Full batch failure | done |
-| 3.3 | Partial success | done |
+| 3.3 | Partial success | dismiss (toast superseded by CAIRO-4442) |

package/src/components/ImportButton/CmsImportFieldEditor.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { reaction } from 'mobx';
+import type { ImportState } from '@wix/bex-core';
+import { FieldEditorModal } from '../CmsFieldManagement/FieldEditorModal';
+import { FieldEditorModalState } from '../CmsFieldManagement/FieldEditorModalState';
+import { buildFieldDraft } from './importFieldEditor';
+
+/**
+ * The CMS create/edit-field modal for the import flow. `ImportButton` picks and
+ * lazy-loads it for a CMS (Wix Data) import (from the config's `dataSource`).
+ * Self-contained: it opens and pre-fills from `state.editingMapping` when a
+ * column starts editing, writes the result back via `state.applyFieldEdit`, and
+ * clears `state.editingHeader` on close so re-editing the same column re-opens it.
+ */
+const _CmsImportFieldEditor = ({ state }: { state: ImportState }) => {
+  const t = state.translate;
+  const [editorState] = useState(
+    () => new FieldEditorModalState({ onSubmit: state.applyFieldEdit }),
+  );
+
+  useEffect(() => {
+    const disposeOpen = reaction(
+      () => state.editingMapping,
+      (mapping) => {
+        const header = state.editingHeader;
+        if (mapping && header && !editorState.modal.isOpen) {
+          editorState.open(buildFieldDraft(header, mapping));
+        }
+      },
+      { fireImmediately: true },
+    );
+    const disposeClose = reaction(
+      () => editorState.modal.isOpen,
+      (isOpen) => {
+        if (!isOpen && state.editingHeader != null) {
+          state.endFieldEdit();
+        }
+      },
+    );
+    return () => {
+      disposeOpen();
+      disposeClose();
+    };
+  }, []);
+
+  return (
+    <FieldEditorModal
+      state={editorState}
+      title={t('cairo.import.editField')}
+      primaryButtonText={t('cairo.import.save')}
+      secondaryButtonText={t('cairo.import.cancel')}
+      // The mapping dropdown's popover renders at z-index 5001. Opening the editor
+      // from the "+ Create New Field" footer doesn't synchronously close that
+      // popover, so the editor must stack above it — below the field-type dropdown
+      // inside the editor (10000) and toasts (5500).
+      zIndex={5100}
+    />
+  );
+};
+
+export const CmsImportFieldEditor = observer(_CmsImportFieldEditor);

package/src/components/ImportButton/ImportButton.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { FiltersMap, ModalState } from '@wix/bex-core';
 import { Button, Drawer, Modal } from '@wix/design-system';
-import { DownloadImport } from '@wix/wix-ui-icons-common';
+import { DownloadImport } from '@wix/wix-ui-icons-common/lazy';
 import { observer, Observer } from 'mobx-react-lite';
 import { ImportButtonModalLayout } from './ImportButtonModalLayout';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
@@ -11,7 +11,7 @@ import { ResponsiveButton } from '../ResponsiveButton/ResponsiveButton';
 import { useIsMobile } from '../../hooks/useIsMobile';
 
 function _ImportButton<T, F extends FiltersMap>(props: ImportButtonProps) {
-  const { toolbarType = 'default', config } = props;
+  const { toolbarType = 'default', config, renderFieldEditor } = props;
 
   const table = useToolbarCollectionContext<T, F>();
   const {
@@ -30,6 +30,7 @@ function _ImportButton<T, F extends FiltersMap>(props: ImportButtonProps) {
             <ImportButtonModalLayout
               importModalState={state}
               config={config}
+              renderFieldEditor={renderFieldEditor}
             />
           );
 

package/src/components/ImportButton/ImportButtonModalLayout.tsx

@@ -7,7 +7,7 @@ import {
   Text,
 } from '@wix/design-system';
 import { getImportModalStepProps } from './getImportModalStepProps';
-import React, { useEffect, useState } from 'react';
+import React, { Suspense, lazy, useEffect, useMemo, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useCreateImport } from '@wix/bex-core';
 import { detectFieldType } from '@wix/patterns-fields';
@@ -19,40 +19,48 @@ import { ImportStepper } from './ImportStepper';
 import { MessageActionModal } from '../ActionModal';
 import { ModalWrapper } from '../CollectionModal';
 import { PatternsFieldsProvider } from '../../providers';
-import { FieldEditorModal } from '../CmsFieldManagement/FieldEditorModal';
-import { FieldEditorModalState } from '../CmsFieldManagement/FieldEditorModalState';
-import { buildFieldDraft } from './importFieldEditor';
+import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 
 function _ImportButtonModalLayout(props: ImportButtonModalLayoutProps) {
-  const { config, importModalState, ...rest } = props;
+  const { config, importModalState, renderFieldEditor, ...rest } = props;
 
   const isMobile = useIsMobile();
+  // The config is read live off the table's source, which is in context here (the
+  // consumer builds `config` above the collection provider, so it can't be). Pass
+  // the toolbar's fields source to ImportState, which builds the effective config.
+  const toolbar = useToolbarCollectionContext();
 
   const createImport = useCreateImport({
-    config,
+    importInputs: config,
+    fieldsSource: toolbar.collectionFieldsSource?.fieldsSource,
     // Media-aware detection (image/video/document/audio) lives in
-    // patterns-fields; core defaults to primitive detection without it. A
-    // schema-backed config carries its own `mergeFields` (via useSchemaImport),
-    // so created columns refresh with no wiring here (CAIRO-4400).
+    // patterns-fields; core defaults to primitive detection without it.
+    // ImportState wires the schema-backed `mergeFields` from the source, so
+    // created columns refresh with no wiring here (CAIRO-4400).
     detectColumnType: detectFieldType,
     importModalState,
   });
 
   const [state] = useState(() => createImport());
 
-  const [fieldEditorState] = useState(
-    () => new FieldEditorModalState({ onSubmit: state.applyFieldEdit }),
+  // The create/edit-field editor follows the destination and is loaded on demand,
+  // so neither the CMS nor the DataExtension editor is bundled until an import
+  // that can create fields actually opens. A `renderFieldEditor` prop overrides.
+  const isPlatformized = Boolean(config?.destination);
+  const FieldEditor = useMemo(
+    () =>
+      lazy(() =>
+        isPlatformized
+          ? import('../DataExtension/DataExtensionImportFieldEditor').then(
+              (m) => ({ default: m.DataExtensionImportFieldEditor }),
+            )
+          : import('./CmsImportFieldEditor').then((m) => ({
+              default: m.CmsImportFieldEditor,
+            })),
+      ),
+    [isPlatformized],
   );
 
-  const openFieldEditor = (header: string) => {
-    const mapping = state.mappingByHeader[header];
-    if (mapping?.kind !== 'new') {
-      return;
-    }
-    state.beginFieldEdit(header);
-    fieldEditorState.open(buildFieldDraft(header, mapping));
-  };
-
   const {
     onRequestClose,
     children,
@@ -61,11 +69,10 @@ function _ImportButtonModalLayout(props: ImportButtonModalLayoutProps) {
   } = getImportModalStepProps({
     state,
     isMobile,
-    onEditField: openFieldEditor,
   });
 
   const wrappedChildren =
-    state.currentStep !== 'progress' ? (
+    state.currentStep !== 'progress' && state.currentStep !== 'summary' ? (
       <Box direction="vertical" gap="SP3" width="100%" height="100%">
         <ImportStepper
           state={state}
@@ -187,12 +194,15 @@ function _ImportButtonModalLayout(props: ImportButtonModalLayoutProps) {
   return (
     <>
       {child}
-      <FieldEditorModal
-        state={fieldEditorState}
-        title={t('cairo.import.editField')}
-        primaryButtonText={t('cairo.import.save')}
-        secondaryButtonText={t('cairo.import.cancel')}
-      />
+      {state.canCreateNewField ? (
+        renderFieldEditor ? (
+          renderFieldEditor({ state })
+        ) : (
+          <Suspense fallback={null}>
+            <FieldEditor state={state} />
+          </Suspense>
+        )
+      ) : null}
     </>
   );
 }

package/src/components/ImportButton/ImportIdCollisionControl.tsx

@@ -29,7 +29,7 @@ export const IdCollisionControl = observer(function _IdCollisionControl({
     : t('cairo.import.updateExistingItems');
 
   return (
-    <Box direction="vertical" gap="SP1">
+    <Box direction="vertical" gap="0">
       <Text size="tiny" secondary dataHook="import-id-collision-label">
         {t('cairo.import.idCollisionLabel')}
       </Text>