@wix/patterns 1.423.0 → 1.424.0

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

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

package/src/components/ToolbarTitle/ToolbarTitle.tsx

@@ -9,7 +9,8 @@ import {
   TextButton,
 } from '@wix/design-system';
 import React, { ReactNode } from 'react';
-import { FiltersMap, useWixPatternsContainer } from '../..';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import type { FiltersMap } from '@wix/bex-core';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { withoutDefaults } from '@wix/bex-core';
 import { cairoLearnMore } from '@wix/bex-utils/@wix/bi-logger-os-data/v2';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common2112733534";
+var _namespace_ = "common1841882770";
 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":"common2112733534__root","column":"common2112733534__column","fullHeight":"common2112733534__fullHeight"};
+export var classes = {"root":"common1841882770__root","column":"common1841882770__column","fullHeight":"common1841882770__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/fieldsSourceProvider.ts

@@ -0,0 +1,5 @@
+import type { ToolbarCollectionState } from '../state';
+
+export interface FieldsSourceProvider {
+  setOnTable(toolbar: ToolbarCollectionState<any, any>): void;
+}

package/src/hooks/useEditableTableCollection.ts

@@ -15,7 +15,6 @@ import {
   EditableTableMutationHandlers,
 } from '../state/EditableTable';
 import type { CellType } from '../state/EditableTable/types';
-import type { FieldActions } from '../types/SchemaConfig';
 import { useOptionalCachedState } from './useOptionalCachedState';
 
 export type EditableTableCollectionConfig<
@@ -24,8 +23,6 @@ export type EditableTableCollectionConfig<
 > = CollectionConfigWithConditionals<T, F> & {
   permissions?: EditableTablePermissions;
   mutations: EditableTableMutationHandlers<T>;
-  fieldActions?: FieldActions;
-  refresh?: () => Promise<void>;
   optimisticActionParams?: Partial<CollectionOptimisticActionsBaseParams<T, F>>;
   /**
    * Additional cell types to register alongside the built-in ones.
@@ -54,8 +51,6 @@ export const useEditableTableCollection: EditableTableCollection = <
       container,
       permissions: config.permissions,
       mutations: config.mutations,
-      fieldActions: config.fieldActions,
-      refresh: config.refresh,
       extraCellTypes: config.extraCellTypes,
       createOptimisticActions: (collection) =>
         createOptimisticActions(collection, config.optimisticActionParams),

package/src/index.ts

@@ -1,4 +1,7 @@
 export * from './components/Table';
+export { tableSchemaSource } from './components/SchemaSource';
+export type { TableSchemaSource } from './components/SchemaSource';
+export type { FieldsSourceProvider } from './components/fieldsSourceProvider';
 export * from './components/PaginationTable';
 export * from './components/CollectionListItem';
 export * from './components/PageWrapper/PageWrapper';
@@ -169,6 +172,7 @@ export { NestedTableDragAndDrop } from './components/NestedTableDragAndDrop/Nest
 export { DragAndDropSubmit, IndexedItem } from './components/DragAndDrop';
 
 export { DataExtension } from './components/DataExtension';
+export { dataExtensionTableSource } from './components/DataExtension';
 export type {
   SchemaConfig,
   Field,

package/src/model/tableColumn.ts

@@ -1,5 +1,5 @@
 import type { TableColumn as TableColumnWSR } from '@wix/design-system';
-import type { KeyedItem, SortMode, SortOrder } from '@wix/bex-core';
+import type { Field, KeyedItem, SortMode, SortOrder } from '@wix/bex-core';
 import { CSSProperties, ReactNode } from 'react';
 import type { FieldType } from '../utils/fieldTypePrefixIcons';
 import type { ValidationRule } from '../state/EditableTable/types';
@@ -189,6 +189,8 @@ export interface Column {
    */
   defaultHidden?: boolean;
   dataExtension?: { id: string; editable: boolean; isPii?: boolean };
+  /** The source field this column was built from; used to resolve manage actions. */
+  field?: Field;
   /**
    * Whether the field contains personally identifiable information.
    * @external

package/src/state/CollectionFieldsSourceState.ts

@@ -0,0 +1,270 @@
+import { reaction } from 'mobx';
+import type { ComponentType } from 'react';
+import { addEventListener, TaskState } from '@wix/bex-core';
+import type {
+  FieldsSource,
+  CustomFieldOrigin,
+  Field,
+  WixPatternsErrorCode,
+} from '@wix/bex-core';
+import type { Column } from '../model';
+import type { ToolbarCollectionState } from './ToolbarCollectionState';
+import { buildFieldColumns, ColumnOverridesContext } from './buildFieldColumns';
+import { handleFieldsSourceLoadError } from './handleFieldsSourceLoadError';
+import {
+  buildFieldFilters,
+  registerFieldFilters,
+  type FieldFilterConfig,
+} from './buildFieldFilters';
+import type {
+  FilterElement,
+  CollectionToolbarFiltersProps,
+} from '../components/CollectionToolbarFilters';
+import type { MoreActionItemFactory } from '../components/MoreActions/MoreActionsBase';
+import {
+  CustomFieldsPanelState,
+  type FieldActionsMenuBuilder,
+} from './CustomFields/CustomFieldsPanelState';
+import type { FieldActionHandlersConfig } from '../components/FieldActions';
+import type { CustomColumnsBaseProps } from '../components/CustomColumns/CustomColumns';
+
+/** Builds the raw field-management for one field (handlers + registry metadata). */
+type FieldActionHandlersBuilder = (args: {
+  fieldId: string;
+  origin: CustomFieldOrigin;
+  location: string;
+}) => FieldActionHandlersConfig | null;
+
+/**
+ * Components the source attaches at construction time so the table chunk can
+ * render them via `source.components.X` instead of statically importing them.
+ * Each source's rendering file (dataExtensionRendering / schemaRendering) is
+ * the only place these are imported — those files are reachable only from the
+ * source's feature module, so the components ship in that chunk, not the
+ * table chunk.
+ */
+export interface FieldsSourceComponents {
+  FieldManagementModals: ComponentType<{ source: CollectionFieldsSourceState }>;
+  CustomColumns: ComponentType<CustomColumnsBaseProps>;
+  CollectionToolbarFilters: ComponentType<CollectionToolbarFiltersProps>;
+}
+
+/**
+ * The source-specific behavior a collection supplies on top of its FieldsSource
+ * (data) — column tweaks, filter behavior, the manage-fields panel, page actions,
+ * field actions, and the field-management modal states. A source builds one of
+ * these (dataExtensionRendering / schemaRendering); it is spread onto
+ * CollectionFieldsSourceState, which owns the pieces directly. The collection
+ * renders these with shared, source-neutral components.
+ */
+export interface FieldsSourceRendering {
+  /**
+   * Lets a source replace any column property the shared builder produces,
+   * including the render function for media types. Called per field.
+   */
+  columnOverrides?(field: Field, ctx: ColumnOverridesContext): Partial<Column>;
+  /** Per-source filter behavior (text operators, decimal, type icon). */
+  filterConfig: FieldFilterConfig;
+  /**
+   * Builds the source's per-field actions menu for the panel it belongs to. The
+   * spine builds the panel and passes it in; the resulting menu drives both the
+   * manage-fields panel and the customize-columns header.
+   */
+  createFieldActionsMenu: (
+    panel: CustomFieldsPanelState,
+  ) => FieldActionsMenuBuilder;
+  /**
+   * Builds the raw field-management for one field (handlers + registry metadata)
+   * for the panel it belongs to, before grouping. The header merges these with
+   * its table-intrinsic actions (sort / hide / filter). Omitted by sources with
+   * no field actions.
+   */
+  createFieldActionHandlers?: (
+    panel: CustomFieldsPanelState,
+  ) => FieldActionHandlersBuilder;
+  featuredPageActions: MoreActionItemFactory[];
+  props?: { disableDefaultPageAction?: boolean };
+  /** BI error code reported when the source's load fails. Default: 'InitCustomFieldsDataExtensionFailed'. */
+  errorCode?: WixPatternsErrorCode;
+  /** The source provides these so the table chunk renders them via DI rather
+   *  than static import. See FieldsSourceComponents. */
+  components: FieldsSourceComponents;
+}
+
+/**
+ * A collection's field source: the FieldsSource (data) plus the source's UI,
+ * held as flat members. The toolbar holds one of these rather than a specific
+ * source. It owns the load status (initTask); field and filter reads pass
+ * through to the FieldsSource's own observables.
+ */
+export class CollectionFieldsSourceState {
+  readonly fieldsSource: FieldsSource;
+  /** The field-management state (modals + per-field menu). Built here from the
+   *  source's config so every source gets the same panel. */
+  readonly customFieldsPanel: CustomFieldsPanelState;
+  readonly featuredPageActions: MoreActionItemFactory[];
+  readonly props?: { disableDefaultPageAction?: boolean };
+  readonly filterConfig: FieldFilterConfig;
+  readonly openFieldModal: (opts?: {
+    fieldId?: string;
+    origin?: CustomFieldOrigin;
+    customOrigin?: string;
+  }) => void;
+  readonly fieldActionsMenu: FieldActionsMenuBuilder;
+  readonly fieldActionHandlers?: FieldActionHandlersBuilder;
+  readonly components: FieldsSourceComponents;
+  private readonly columnOverrides?: FieldsSourceRendering['columnOverrides'];
+  private readonly toolbar: ToolbarCollectionState<any, any>;
+  private readonly errorCode: WixPatternsErrorCode;
+  private hasBuiltColumns = false;
+
+  constructor(
+    params: {
+      fieldsSource: FieldsSource;
+      toolbar: ToolbarCollectionState<any, any>;
+    } & FieldsSourceRendering,
+  ) {
+    this.fieldsSource = params.fieldsSource;
+    this.toolbar = params.toolbar;
+    this.featuredPageActions = params.featuredPageActions;
+    this.props = params.props;
+    this.filterConfig = params.filterConfig;
+    this.columnOverrides = params.columnOverrides;
+    this.components = params.components;
+    this.errorCode = params.errorCode ?? 'InitCustomFieldsDataExtensionFailed';
+
+    // The panel is generic — the source supplies only its config (the menu
+    // factory); the table's container/reportBi wire it up. The panel builds all
+    // three field-management modals (add/edit, archive, delete) itself.
+    this.customFieldsPanel = new CustomFieldsPanelState({
+      fieldsSource: params.fieldsSource,
+      container: this.toolbar.container,
+      reportBi: this.toolbar.reportBi,
+      closeSidePanel: this.toolbar.closeSidePanel,
+      createFieldActionsMenu: params.createFieldActionsMenu,
+    });
+    // Opening the add/edit modal and reading the per-field menu are the same for
+    // every source, so derive them from the panel rather than per-source.
+    this.openFieldModal = (opts) =>
+      this.customFieldsPanel.openCustomFieldModal({
+        fieldId: opts?.fieldId,
+        origin: opts?.origin ?? 'external',
+        customOrigin: opts?.customOrigin,
+      });
+    this.fieldActionsMenu = this.customFieldsPanel.fieldActionsMenu;
+    this.fieldActionHandlers = params.createFieldActionHandlers?.(
+      this.customFieldsPanel,
+    );
+  }
+
+  /**
+   * Attaches a source to a table's toolbar. Builds the wrapper once; calling it
+   * again (e.g. on re-render) is a no-op.
+   */
+  static setOnTable(
+    toolbar: ToolbarCollectionState<any, any>,
+    source: { fieldsSource: FieldsSource } & FieldsSourceRendering,
+  ) {
+    toolbar.collectionFieldsSource ??= new CollectionFieldsSourceState({
+      ...source,
+      toolbar,
+    });
+  }
+
+  readonly initTask = new TaskState();
+
+  buildFilters(): FilterElement[] {
+    return buildFieldFilters(
+      this.toolbar,
+      this.fieldsSource.filterableFields,
+      this.filterConfig,
+    );
+  }
+
+  /** Registers a filter state per filterable field on the collection query. */
+  registerFilters() {
+    registerFieldFilters(
+      this.toolbar,
+      this.fieldsSource.filterableFields,
+      this.filterConfig,
+    );
+  }
+
+  /**
+   * Builds the columns from the fields, or null while the source is still
+   * loading so existing columns are kept.
+   */
+  buildColumns(firstBuild: boolean): Column[] | null {
+    if (!this.initTask.status.isSuccess) {
+      return null;
+    }
+    return buildFieldColumns(this.fieldsSource, this.columnOverrides, {
+      firstBuild,
+    });
+  }
+
+  syncColumns() {
+    const columns = this.buildColumns(!this.hasBuiltColumns);
+    if (columns) {
+      this.toolbar.setExtendedColumns(columns);
+      this.hasBuiltColumns = true;
+    }
+  }
+
+  init() {
+    this.initTask.runOnce(() => this.fieldsSource.load());
+    this.initTask.status.promise?.catch(() => this.handleLoadError());
+
+    const disposers = [
+      // Push the columns once the source loads, and again whenever the field
+      // list changes (add/edit/delete field). The first push starts every
+      // column hidden; later pushes keep the user's selection.
+      reaction(
+        () =>
+          [this.fieldsSource.fields, this.initTask.status.isSuccess] as const,
+        () => this.syncColumns(),
+      ),
+      // Register a filter state per filterable field. filterableFields populates
+      // inside the source's load (before initTask resolves), so the collection's
+      // initial fetch still waits for these — matching the prior per-source timing.
+      reaction(
+        () => this.fieldsSource.filterableFields,
+        () => this.registerFilters(),
+        { fireImmediately: true },
+      ),
+      // Make custom-columns storage reconciliation wait until this source's
+      // columns are built, so a stored hide/show selection for source fields
+      // survives a reload. Covers any source.
+      ...(this.toolbar.customColumnsState?.events
+        ? [
+            addEventListener(
+              this.toolbar.customColumnsState.events,
+              'beforeInitialFetch',
+              () => this.initTask.status.promise?.catch(() => {}),
+            ),
+          ]
+        : []),
+    ];
+
+    return () => {
+      disposers.forEach((d) => d?.());
+    };
+  }
+
+  private handleLoadError() {
+    handleFieldsSourceLoadError({
+      container: this.toolbar.container,
+      reportBi: this.toolbar.reportBi,
+      error: this.initTask.status.error,
+      errorCode: this.errorCode,
+      reload: () => this.retryLoad(),
+    });
+  }
+
+  /** Re-runs the source load after a failure (the retry toast). */
+  private retryLoad() {
+    this.initTask.reset();
+    this.initTask.runOnce(() => this.fieldsSource.load());
+    return this.initTask.status.promise;
+  }
+}

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

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

package/src/state/CollectionViewsState.ts

@@ -7,7 +7,7 @@ import {
   WixPatternsError,
 } from '@wix/bex-core';
 import { ViewsState } from './ViewsState';
-import { ViewsProps } from '../index';
+import type { ViewsProps } from '../index';
 import { action, computed, makeObservable, reaction, runInAction } from 'mobx';
 import {
   AllItemsViewProps,

package/src/state/CustomColumnsEntityPageState.ts

@@ -114,7 +114,7 @@ export class CustomColumnsEntityPageState extends CustomColumnsPanelStateBase {
     return this._showFieldTypeIcons;
   }
 
-  get collectionDataExtension() {
+  get collectionFieldsSource() {
     return null;
   }
 

package/src/state/CustomColumnsPanelStateBase.ts

@@ -9,7 +9,7 @@ import { action, computed, makeObservable, observable } from 'mobx';
 import { Column } from '../model';
 import { CustomColumnsActionName } from './CustomColumnsState';
 import type { CustomColumnsDragAndDropState } from './CustomColumnsDragAndDropState';
-import type { CollectionDataExtensionState } from '../components/DataExtension';
+import type { CollectionFieldsSourceState } from './CollectionFieldsSourceState';
 
 export interface CustomColumnsPanelStateBaseParams {
   container: WixPatternsContainer;
@@ -63,8 +63,8 @@ export abstract class CustomColumnsPanelStateBase<
 
   abstract get showFieldTypeIcons(): boolean;
 
-  abstract get collectionDataExtension():
-    | CollectionDataExtensionState<T, F>
+  abstract get collectionFieldsSource():
+    | CollectionFieldsSourceState
     | null
     | undefined;
 

package/src/state/CustomColumnsState.ts

@@ -16,11 +16,9 @@ import {
   cairoFiltersPanelUsed,
 } from '@wix/bex-core/bi';
 import type { CustomColumnsDragAndDropState } from './CustomColumnsDragAndDropState';
-import type { CollectionDataExtensionState } from '../components/DataExtension';
 import { CustomColumnsPanelStateBase } from './CustomColumnsPanelStateBase';
 
 export type { CustomColumnsDragAndDropState };
-export type { CollectionDataExtensionState };
 
 export type CustomColumnsPanelState<
   T = unknown,
@@ -503,8 +501,8 @@ export class CustomColumnsState<
     return this.table.showFieldTypeIcons;
   }
 
-  get collectionDataExtension() {
-    return this.table.collectionDataExtension;
+  get collectionFieldsSource() {
+    return this.table.collectionFieldsSource;
   }
 
   get sidePanelTransition() {

package/src/state/CustomFields/CustomFieldsPanelState.ts

@@ -2,37 +2,93 @@ import {
   ArchiveFieldModalState,
   CustomFieldModalState,
   CustomFieldOrigin,
-  DataExtensionState,
+  DeleteFieldModalState,
+  FieldsSource,
   ReportBI,
+  WixPatternsContainer,
 } from '@wix/bex-core';
 import { makeAutoObservable } from 'mobx';
+import type { FieldActionsMenuConfig } from '../../components/FieldActions';
+
+/** Builds the per-field action popover (edit / archive / delete …) for a field. */
+export type FieldActionsMenuBuilder = (args: {
+  fieldId: string;
+  origin: CustomFieldOrigin;
+  location: string;
+}) => FieldActionsMenuConfig | null;
 
 export interface CustomFieldsPanelStateParams {
   readonly reportBi: ReportBI;
   readonly closeSidePanel: () => unknown;
-  readonly dataExtension: DataExtensionState;
+  readonly fieldsSource: FieldsSource;
+  readonly container: WixPatternsContainer;
+  /**
+   * The source's per-field menu, as a factory over the panel it belongs to (its
+   * handlers call back into this panel's modals). Built once in the constructor.
+   */
+  readonly createFieldActionsMenu: (
+    panel: CustomFieldsPanelState,
+  ) => FieldActionsMenuBuilder;
 }
 
 export class CustomFieldsPanelState {
   readonly reportBi;
   readonly closeSidePanel;
-  readonly dataExtension;
+  readonly fieldsSource;
+  readonly container;
   readonly customFieldModal;
-  readonly archiveFieldModal;
+  readonly archiveFieldModal?: ArchiveFieldModalState;
+  readonly deleteFieldModal: DeleteFieldModalState;
+  /** The per-field action popover. The source supplies it; CustomFieldItem reads it. */
+  readonly fieldActionsMenu: FieldActionsMenuBuilder;
 
   constructor(params: CustomFieldsPanelStateParams) {
     this.reportBi = params.reportBi;
     this.closeSidePanel = params.closeSidePanel;
-    this.dataExtension = params.dataExtension;
-    this.archiveFieldModal = new ArchiveFieldModalState({
+    this.fieldsSource = params.fieldsSource;
+    this.container = params.container;
+
+    if (params.fieldsSource.archive) {
+      this.archiveFieldModal = new ArchiveFieldModalState({
+        reportBi: this.reportBi,
+        archiver: params.fieldsSource.archive,
+      });
+    }
+    this.customFieldModal = new CustomFieldModalState({
       reportBi: this.reportBi,
-      dataExtension: this.dataExtension,
+      fieldManagement: params.fieldsSource.fieldManagement!,
+      container: params.container,
+      fieldCount: () => params.fieldsSource.manageableFields.length,
     });
-    this.customFieldModal = new CustomFieldModalState({
+    // The delete runs through the source's own deleteField (which reports its
+    // own toast) and reconciles the archived-items list when archiving exists.
+    this.deleteFieldModal = new DeleteFieldModalState({
       reportBi: this.reportBi,
-      dataExtensionState: this.dataExtension,
+      fieldManagement: {
+        deleteField: (id, origin) =>
+          params.fieldsSource.fieldManagement!.deleteField(id, origin),
+      },
+      archive: params.fieldsSource.archive ?? {
+        items: [],
+        closePanel: () => undefined,
+      },
+    });
+    this.fieldActionsMenu = params.createFieldActionsMenu(this);
+    makeAutoObservable(this, {
+      // A function that builds (doesn't mutate) the popover — not an action. It's
+      // set once here and never reassigned, so it needn't be observable either.
+      fieldActionsMenu: false,
     });
-    makeAutoObservable(this);
+  }
+
+  get fieldManagement() {
+    return this.fieldsSource.fieldManagement;
+  }
+  get manageableFields() {
+    return this.fieldsSource.manageableFields;
+  }
+  get archive() {
+    return this.fieldsSource.archive;
   }
 
   openCustomFieldModal(params: {
@@ -41,7 +97,6 @@ export class CustomFieldsPanelState {
     customOrigin?: string;
   }) {
     const { customFieldModal } = this;
-
     const { customFieldModalBiReporter } = customFieldModal;
 
     customFieldModal.reset();
@@ -58,21 +113,17 @@ export class CustomFieldsPanelState {
     customFieldModalBiReporter.formSnapshot = null;
     customFieldModal.setDefaultPermissions();
 
-    if (this.dataExtension.userSchema) {
-      if (params.fieldId) {
-        const formValues = this.dataExtension.extractFieldValuesFromSchema(
-          params.fieldId,
-        );
-
-        if (!formValues) {
-          return;
-        }
-
-        customFieldModal.setFormValues(formValues, {
-          disablePermissionCheckboxes: true,
-        });
-        customFieldModalBiReporter.formSnapshot = formValues;
+    if (params.fieldId) {
+      const formValues = this.fieldsSource.fieldManagement?.getFieldDraft(
+        params.fieldId,
+      );
+      if (!formValues) {
+        return;
       }
+      customFieldModal.setFormValues(formValues, {
+        disablePermissionCheckboxes: true,
+      });
+      customFieldModalBiReporter.formSnapshot = formValues;
     }
 
     customFieldModal.modalState.modal.open();

package/src/state/CustomFields/CustomFieldsWidgetState.ts

@@ -22,6 +22,8 @@ import {
 
 import { CustomFieldsAllNamespacesFormState } from './CustomFieldsAllNamespacesFormState';
 import { CustomFieldsPanelState } from './CustomFieldsPanelState';
+import { dataExtensionFieldsSourceFrom } from '../../components/DataExtension/dataExtensionFieldsSource';
+import { createDataExtensionFieldActionsMenu } from '../../components/DataExtension/dataExtensionFieldActions';
 
 export interface CustomFieldsWidgetStateParams {
   readonly container: WixPatternsContainer;
@@ -98,9 +100,16 @@ export class CustomFieldsWidgetState {
     });
 
     this.customFieldsPanel = new CustomFieldsPanelState({
-      dataExtension: this.dataExtension,
+      fieldsSource: dataExtensionFieldsSourceFrom({
+        dataExtension: this.dataExtension,
+        reportBi: this.reportBi,
+      }),
+      container,
       reportBi: this.reportBi,
       closeSidePanel: this.panels.closeSidePanel,
+      createFieldActionsMenu: createDataExtensionFieldActionsMenu(
+        this.dataExtension,
+      ),
     });
 
     makeObservable(this, {