@wix/patterns 1.425.0 → 1.427.0

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow3298464564";
+var _namespace_ = "NestedTableRow1478356820";
 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":"NestedTableRow3298464564__root","firstLevel":"NestedTableRow3298464564__firstLevel","placeholder":"NestedTableRow3298464564__placeholder","parentHovered":"NestedTableRow3298464564__parentHovered"};
+export var classes = {"root":"NestedTableRow1478356820__root","firstLevel":"NestedTableRow1478356820__firstLevel","placeholder":"NestedTableRow1478356820__placeholder","parentHovered":"NestedTableRow1478356820__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

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

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

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

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

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

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep3768588481";
+var _namespace_ = "PickerContentAdditionalStep363356966";
 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":"PickerContentAdditionalStep3768588481__root","titles":"PickerContentAdditionalStep3768588481__titles","suffix":"PickerContentAdditionalStep3768588481__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep363356966__root","titles":"PickerContentAdditionalStep363356966__titles","suffix":"PickerContentAdditionalStep363356966__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/SchemaSource/schemaFieldManagement.ts

@@ -1,6 +1,7 @@
 import { FieldDraft, FieldManagement, NonReferenceField } from '@wix/bex-core';
 import { runInAction } from 'mobx';
 import type { SchemaState } from './SchemaState';
+import { standardFieldTypeLabels } from './standardFieldTypeLabels';
 
 /**
  * Builds the source-neutral FieldManagement over SchemaState. add/edit/delete
@@ -52,14 +53,24 @@ export const schemaFieldManagement = (s: SchemaState<any>): FieldManagement => {
 
     get creatableFieldTypes() {
       const t = s.container.translate;
-      return s.source.creatableFieldTypes.map((ft) => ({
-        id: ft.patternsType,
-        label: t(ft.labelKey),
-        namePlaceholder: ft.namePlaceholderKey
-          ? t(ft.namePlaceholderKey)
-          : undefined,
-        patternsType: ft.patternsType,
-      }));
+      return s.source.creatableFieldTypes.map((ft) => {
+        // The standard pair applies only when the source didn't custom-label
+        // the entry — a custom label with the standard placeholder would show
+        // contradictory copy (the modal falls back to its generic placeholder).
+        const standard =
+          ft.label == null
+            ? standardFieldTypeLabels[ft.patternsType]
+            : undefined;
+        return {
+          id: ft.patternsType,
+          label:
+            ft.label ?? (standard ? t(standard.labelKey) : ft.patternsType),
+          namePlaceholder:
+            ft.namePlaceholder ??
+            (standard ? t(standard.namePlaceholderKey) : undefined),
+          patternsType: ft.patternsType,
+        };
+      });
     },
     get existingFieldKeys() {
       return s.fields.map((f) => f.id);

package/src/components/SchemaSource/schemaFieldsSource.ts

@@ -31,6 +31,11 @@ export const schemaFieldsSource = (s: SchemaState<any>): FieldsSource => {
     get fieldActions() {
       return s.fieldActions;
     },
+
+    // Merge a returned fields map into the loaded schema (e.g. after an import
+    // creates fields). `mergeFields` is a SchemaState action, so the columns
+    // rebuild reactively with no refetch.
+    mergeFields: (fields) => s.mergeFields(fields),
   };
 
   return source;

package/src/components/SchemaSource/schemaImportRef.ts

@@ -0,0 +1,137 @@
+import type {
+  BackupConfig,
+  BackupFn,
+  Field,
+  ImportButtonConfig,
+  ImportDataSource,
+  ImportField,
+  NewFieldDefinition,
+  Schema,
+} from '@wix/bex-core';
+import type { TableSchemaSource } from './tableSchemaSource';
+import { toPatternsFieldType } from '../ImportButton/newFieldTypeMapping';
+
+// Adapts a schema's BackupConfig (create / wait / restore steps) to the import's
+// BackupFn: snapshot on call, and hand back a `restore` used to undo the import
+// on cancel. A source without `restore` snapshots but offers no undo.
+const composeBackupFn =
+  (backup: BackupConfig): BackupFn =>
+  async (signal) => {
+    const { backupId } = await backup.create();
+    await backup.waitForCompletion(backupId, { signal });
+
+    const restore = backup.restore;
+    if (!restore) {
+      return;
+    }
+    return {
+      restore: async (restoreSignal) => {
+        const { restorationId } = await restore(backupId);
+        await backup.waitForRestoration?.(restorationId, {
+          signal: restoreSignal,
+        });
+      },
+    };
+  };
+
+// Builds the Field to create from a pending new column: import decides the key,
+// and the detected NewFieldType maps to the schema's PatternsFieldType. Import
+// only ever creates non-reference fields, so the cast is safe.
+const toField = (def: NewFieldDefinition): Field =>
+  ({
+    id: def.key,
+    displayName: def.displayName,
+    type: toPatternsFieldType(def.type),
+    ...(def.config?.validation && { validation: def.config.validation }),
+    ...(def.config?.isPii && { isPii: true }),
+    ...(def.config?.helpText && { helpText: def.config.helpText }),
+  } as Field);
+
+/**
+ * An `ImportButtonConfig` that reads the table's live `SchemaState` — the same
+ * one the table renders from. Every input is read on demand, so:
+ *  - the async schema load needn't resolve before this is constructed, and
+ *  - fields the import creates (merged back via `mergeFields`) and fields added
+ *    through the field-management panel show up immediately, with no stale copy.
+ *
+ * Reads `source.schemaState`, which the source only populates when it attaches
+ * to the table (`setOnTable`) — after this is built. Reading it through the
+ * getter each time gives that late binding: `state` is `undefined` until then
+ * (fields empty, no create).
+ */
+export class SchemaImportRef implements ImportButtonConfig {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private readonly source: TableSchemaSource<any>;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  constructor(source: TableSchemaSource<any>) {
+    this.source = source;
+  }
+
+  private get state() {
+    return this.source.schemaState;
+  }
+
+  get fields(): ImportField[] {
+    const state = this.state;
+    if (!state) {
+      return [];
+    }
+    return state.fields.map((f) => ({
+      id: f.id,
+      header: f.displayName,
+      // Carry the schema's required flag so the mapping step can block import
+      // while a required field is unmapped (CAIRO-4452).
+      required: f.validation?.required,
+    }));
+  }
+
+  get idFieldKey(): string | undefined {
+    return this.state?.schema?.idField;
+  }
+
+  // CMS data source: the collection id plus — only when the schema permits
+  // creating fields — the batch create callback. `updateSchema`'s presence is
+  // the create-new-field opt-in; omitting it (no permission) makes the import
+  // mapping-only. `collectionId` reads live off the attached schema (empty
+  // before attach, but nothing imports until then).
+  get dataSource(): ImportDataSource {
+    return {
+      collectionId: this.state?.source.collectionId ?? '',
+      ...(this._canAddFields && { updateSchema: this._updateSchema }),
+    };
+  }
+
+  private get _canAddFields(): boolean {
+    const state = this.state;
+    const schema = state?.schema;
+    // Require both the create-field permission and a batch action to create
+    // with; otherwise columns would default to "new" but nothing gets created
+    // and the upload writes values under keys with no field.
+    if (!schema || !state.fieldActions?.addFields) {
+      return false;
+    }
+    return state.source.canAddFields(schema);
+  }
+
+  private _updateSchema = async (
+    defs: NewFieldDefinition[],
+  ): Promise<Schema['fields'] | void> => {
+    const add = this.state?.fieldActions?.addFields;
+    if (!add) {
+      return;
+    }
+    return add(defs.map(toField));
+  };
+
+  // Merge the created fields into the live SchemaState so the table's columns
+  // update with no reload (CAIRO-4400). Reads the same state the table renders.
+  mergeFields = (fields: Schema['fields']): void => {
+    this.state?.mergeFields(fields);
+  };
+
+  get backup(): BackupFn | undefined {
+    const backup = this.state?.loadedSchema?.backend.backup;
+    return backup ? composeBackupFn(backup) : undefined;
+  }
+}

package/src/components/SchemaSource/standardFieldTypeLabels.ts

@@ -0,0 +1,47 @@
+import type { PatternsFieldType, TranslationsKeys } from '@wix/bex-core';
+
+/**
+ * The add-field modal's standard name and name-input placeholder per creatable
+ * field type, used when a source declares a type without a custom label.
+ * NUMBER uses the integer variant's copy.
+ */
+export const standardFieldTypeLabels: Partial<
+  Record<
+    PatternsFieldType,
+    { labelKey: TranslationsKeys; namePlaceholderKey: TranslationsKeys }
+  >
+> = {
+  SHORT_TEXT: {
+    labelKey: 'cairo.customFields.fieldType.shortText',
+    namePlaceholderKey:
+      'cairo.customFields.fieldType.shortText.Name.placeholder',
+  },
+  LONG_TEXT: {
+    labelKey: 'cairo.customFields.fieldType.longText',
+    namePlaceholderKey:
+      'cairo.customFields.fieldType.longText.Name.placeholder',
+  },
+  NUMBER: {
+    labelKey: 'cairo.customFields.fieldType.numberInteger',
+    namePlaceholderKey:
+      'cairo.customFields.fieldType.numberInteger.Name.placeholder',
+  },
+  BOOLEAN: {
+    labelKey: 'cairo.customFields.fieldType.checkbox',
+    namePlaceholderKey:
+      'cairo.customFields.fieldType.checkbox.Name.placeholder',
+  },
+  DATE: {
+    labelKey: 'cairo.customFields.fieldType.date',
+    namePlaceholderKey: 'cairo.customFields.fieldType.date.Name.placeholder',
+  },
+  DATETIME: {
+    labelKey: 'cairo.customFields.fieldType.dateAndTime',
+    namePlaceholderKey:
+      'cairo.customFields.fieldType.dateAndTime.Name.placeholder',
+  },
+  URL: {
+    labelKey: 'cairo.customFields.fieldType.url',
+    namePlaceholderKey: 'cairo.customFields.placeholder.url',
+  },
+};

package/src/components/SchemaSource/tableSchemaSource.ts

@@ -1,5 +1,6 @@
 import type { SchemaSource } from '@wix/bex-core';
 import type { FieldsSourceProvider } from '../fieldsSourceProvider';
+import type { ToolbarCollectionState } from '../../state';
 import { SchemaState } from './SchemaState';
 
 /**
@@ -8,20 +9,89 @@ import { SchemaState } from './SchemaState';
  * in the table hook — keeps it out of the core table bundle; only consumers that
  * call `tableSchemaSource` pull it in.
  *
- * It stays the full config, so you can still spread and override it. `setOnTable`
- * reads `this`, so any overrides on the (possibly spread) object take effect.
+ * `schemaState` exposes the attached state so `useSchemaImport` reads the same
+ * live schema the table renders — import always matches the visible columns
+ * (including fields it just created, or ones added via the field-management
+ * panel), rather than a separate loaded copy.
  */
 export type TableSchemaSource<T = Record<string, unknown>> = SchemaSource<T> &
-  FieldsSourceProvider;
+  FieldsSourceProvider & {
+    readonly schemaState?: SchemaState<T>;
+  };
 
+/**
+ * Implemented as a class (not an object literal with a `get schemaState()` after
+ * `...source`): a getter placed in a spread literal is evaluated once and
+ * flattened to a static `undefined` data property by Object.assign-based (loose)
+ * object-spread transpilation, which silently drops the live binding — so
+ * `useSchemaImport` would never see the loaded fields. A prototype accessor is
+ * always a real accessor, immune to that.
+ *
+ * The wrapped source's members (`collectionConfig`, `loadSchema`, …) are copied
+ * onto the instance so it's usable anywhere a `SchemaSource` is; `state` is
+ * created once on attach and reused, so the table and `useSchemaImport` share
+ * one SchemaState (and one load).
+ */
+class TableSchemaSourceImpl<T> implements TableSchemaSource<T> {
+  private state?: SchemaState<T>;
+  private readonly source: SchemaSource<T>;
+
+  // A field + body assignment (not a constructor parameter property — the docs
+  // Storybook's Babel doesn't strip that TS syntax).
+  constructor(source: SchemaSource<T>) {
+    this.source = source;
+  }
+
+  // Delegate the SchemaSource surface to the wrapped source via getters, so the
+  // instance always reflects it with no copies to keep in sync. Prototype
+  // accessors (unlike a getter inside a `...source` spread literal) survive
+  // Object.assign-based (loose) object-spread transpilation.
+  get collectionId() {
+    return this.source.collectionId;
+  }
+  get collectionConfig() {
+    return this.source.collectionConfig;
+  }
+  get creatableFieldTypes() {
+    return this.source.creatableFieldTypes;
+  }
+  get fieldPermissions() {
+    return this.source.fieldPermissions;
+  }
+  get supportsPii() {
+    return this.source.supportsPii;
+  }
+  get loadSchema() {
+    return this.source.loadSchema;
+  }
+  get searchableFieldIds() {
+    return this.source.searchableFieldIds;
+  }
+  get canAddFields() {
+    return this.source.canAddFields;
+  }
+  get canEditField() {
+    return this.source.canEditField;
+  }
+  get canDeleteField() {
+    return this.source.canDeleteField;
+  }
+
+  get schemaState(): SchemaState<T> | undefined {
+    return this.state;
+  }
+
+  setOnTable(toolbar: ToolbarCollectionState<any, any>): void {
+    this.state ??= new SchemaState<T>({
+      container: toolbar.container,
+      source: this.source,
+    });
+    this.state.setOnTable(toolbar);
+  }
+}
+
+/** @deprecated Pass the source to a `@wix/patterns/schema` collection hook
+ *  instead — no wrapper needed. */
 export const tableSchemaSource = <T>(
   source: SchemaSource<T>,
-): TableSchemaSource<T> => ({
-  ...source,
-  setOnTable(toolbar) {
-    new SchemaState({
-      container: toolbar.container,
-      source: this,
-    }).setOnTable(toolbar);
-  },
-});
+): TableSchemaSource<T> => new TableSchemaSourceImpl<T>(source);

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget2333671370";
+var _namespace_ = "SetupWidget401057936";
 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":"SetupWidget2333671370__root","row":"SetupWidget2333671370__row","completedCta":"SetupWidget2333671370__completedCta","card":"SetupWidget2333671370__card","stepIcon":"SetupWidget2333671370__stepIcon","chevron":"SetupWidget2333671370__chevron","chevronDisabled":"SetupWidget2333671370__chevronDisabled","inProgressLabel":"SetupWidget2333671370__inProgressLabel"};
+export var classes = {"root":"SetupWidget401057936__root","row":"SetupWidget401057936__row","completedCta":"SetupWidget401057936__completedCta","card":"SetupWidget401057936__card","stepIcon":"SetupWidget401057936__stepIcon","chevron":"SetupWidget401057936__chevron","chevronDisabled":"SetupWidget401057936__chevronDisabled","inProgressLabel":"SetupWidget401057936__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard1380766072";
+var _namespace_ = "SkeletonCard3052355857";
 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":"SkeletonCard1380766072__root","headerLoading":"SkeletonCard1380766072__headerLoading"};
+export var classes = {"root":"SkeletonCard3052355857__root","headerLoading":"SkeletonCard3052355857__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/Table/AddFieldColumnHeader.st.css

@@ -0,0 +1,36 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+}
+
+.title {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+}
+
+/* Invisible hit-area around the IconButton so the cursor can travel from the
+   title up to the button without leaving the hover area (interactive=true
+   keeps the popover open while hovering the content). padding-bottom matches
+   moveBy.y so the bridge reaches the title's top edge. */
+.hoverBridge {
+  display: inline-block;
+  padding: 4px 13px 4px 4px;
+  background: transparent;
+}
+
+/* Popover content is portaled to <body> via appendTo="window", so it isn't a
+   descendant of the trigger. WDS sets data-content-element on the portaled
+   element to a unique id that includes our dataHook ("add-field-popover"),
+   so we link to it that way. */
+:global(
+    [data-content-element^='popover-content-add-field-popover-'][data-hook='popover-content'][class]
+  ) {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  border-radius: 0;
+  padding: 0;
+}

package/src/components/Table/AddFieldColumnHeader.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "AddFieldColumnHeader2791313261";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"AddFieldColumnHeader2791313261__root","title":"AddFieldColumnHeader2791313261__title","hoverBridge":"AddFieldColumnHeader2791313261__hoverBridge"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

package/src/components/Table/AddFieldColumnHeader.tsx

@@ -0,0 +1,65 @@
+import React, { ReactNode, useContext, useState } from 'react';
+import { IconButton, Popover } from '@wix/design-system';
+import { Add } from '@wix/wix-ui-icons-common';
+import { ToolbarCollectionContext } from '../ToolbarCollectionContext';
+import { classes } from './AddFieldColumnHeader.st.css.js';
+
+export interface AddFieldColumnHeaderProps {
+  children: ReactNode;
+}
+
+export const AddFieldColumnHeader = ({
+  children,
+}: AddFieldColumnHeaderProps) => {
+  const collectionFieldsSource = useContext(
+    ToolbarCollectionContext,
+  )?.collectionFieldsSource;
+  // TODO: fix when the schema source exposes the CMS modal
+  const customColumnAddField = collectionFieldsSource?.fieldsSource
+    .fieldManagement?.canAddFields
+    ? () =>
+        collectionFieldsSource.openFieldModal({
+          origin: 'Custom columns panel',
+        })
+    : undefined;
+  const [hovered, setHovered] = useState(false);
+
+  if (!collectionFieldsSource) {
+    return <>{children}</>;
+  }
+
+  return (
+    <Popover
+      shown={hovered}
+      appendTo="window"
+      placement="top-start"
+      moveBy={{ x: -27, y: -47 }}
+      interactive
+      fluid
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      className={classes.root}
+      dataHook="add-field-popover"
+    >
+      <Popover.Element>
+        <span className={classes.title}>{children}</span>
+      </Popover.Element>
+      <Popover.Content>
+        <span className={classes.hoverBridge}>
+          <IconButton
+            size="tiny"
+            skin="standard"
+            priority="secondary"
+            dataHook="add-field-column-header-button"
+            onClick={(e) => {
+              e.stopPropagation();
+              customColumnAddField?.();
+            }}
+          >
+            <Add />
+          </IconButton>
+        </span>
+      </Popover.Content>
+    </Popover>
+  );
+};