@wix/patterns 1.422.0 → 1.424.0

package/src/components/ImportButton/ImportStepProgress.tsx

@@ -7,6 +7,17 @@ export interface ImportStepProgressProps {
   state: ImportState;
 }
 
+// A failed import's message is consumer-supplied and can be a single unbroken
+// token — e.g. the server's `MISSING_REQUIRED_FIELDS` error joins every missing
+// field with commas and no spaces (`handle,name,visible,…`), or a long URL/id.
+// Without a break opportunity the browser treats it as one long word that
+// overflows the fixed-width modal and gets clipped. Force it to wrap regardless
+// of content (both properties are inherited, so they reach the `Text` inside).
+const WRAP_LONG_WORDS: React.CSSProperties = {
+  overflowWrap: 'break-word',
+  wordBreak: 'break-word',
+};
+
 function _ImportStepProgress({ state }: ImportStepProgressProps) {
   const {
     processedCount,
@@ -39,9 +50,11 @@ function _ImportStepProgress({ state }: ImportStepProgressProps) {
         dataHook="import-progress-bar"
       />
       {errorMessage ? (
-        <Text size="small" skin="error" dataHook="import-error-message">
-          {errorMessage}
-        </Text>
+        <Box style={WRAP_LONG_WORDS} dataHook="import-error-message-wrap">
+          <Text size="small" skin="error" dataHook="import-error-message">
+            {errorMessage}
+          </Text>
+        </Box>
       ) : (
         <Text size="small" dataHook="import-progress-label">
           {isBackingUp

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload3633925322";
+var _namespace_ = "ImportStepUpload3261603244";
 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":"ImportStepUpload3633925322__root","fileUpload":"ImportStepUpload3633925322__fileUpload"};
+export var classes = {"root":"ImportStepUpload3261603244__root","fileUpload":"ImportStepUpload3261603244__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ImportButton/getImportModalStepProps.tsx

@@ -15,11 +15,14 @@ import { ImportStepProgress } from './ImportStepProgress';
 export interface GetImportModalStepProps {
   state: ImportState;
   isMobile?: boolean;
+  /** Opens the "Edit field" editor for a column's pending new field. */
+  onEditField: (header: string) => void;
 }
 
 export function getImportModalStepProps({
   state,
   isMobile,
+  onEditField,
 }: GetImportModalStepProps): Partial<
   CustomModalLayoutProps & { children?: ReactNode; onRequestClose?: () => void }
 > {
@@ -77,7 +80,9 @@ export function getImportModalStepProps({
         </Box>
       ),
       subtitle: t('cairo.import.subtitle'),
-      children: <ImportStepConfiguration state={state} />,
+      children: (
+        <ImportStepConfiguration state={state} onEditField={onEditField} />
+      ),
       showFooterDivider: true,
       primaryButtonText: t('cairo.import.startImport'),
       primaryButtonOnClick: state.hasMappings ? state.startImport : undefined,

package/src/components/ImportButton/importFieldEditor.ts

@@ -0,0 +1,27 @@
+import type { NewFieldConfig, NewFieldType } from '@wix/bex-core';
+import type { FieldSpec } from '../../types/SchemaConfig';
+import { toPatternsFieldType } from './newFieldTypeMapping';
+
+type NewFieldMapping = {
+  fieldType: NewFieldType;
+  displayName?: string;
+  config?: NewFieldConfig;
+};
+
+// Builds the field draft the editor opens pre-filled from, for a column's
+// pending new field. The reverse (editor output → mapping) lives in core's
+// `ImportState.applyFieldEdit`.
+export function buildFieldDraft(
+  header: string,
+  mapping: NewFieldMapping,
+): FieldSpec {
+  return {
+    type: toPatternsFieldType(mapping.fieldType),
+    displayName: mapping.displayName ?? header,
+    ...(mapping.config?.isPii && { isPii: true }),
+    ...(mapping.config?.helpText && { helpText: mapping.config.helpText }),
+    ...(mapping.config?.validation && {
+      validation: mapping.config.validation,
+    }),
+  } as FieldSpec;
+}

package/src/components/ImportButton/newFieldTypeMapping.ts

@@ -0,0 +1,21 @@
+import type { NewFieldType, PatternsFieldType } from '@wix/bex-core';
+
+// Maps the import flow's `NewFieldType` (lowercase, data-driven detection) to the
+// schema's `PatternsFieldType` (uppercase) used by `Field` / the field editor.
+// The reverse mapping (editor output → `NewFieldType`) lives in core, next to
+// `ImportState`, which consumes it directly.
+
+const NEW_FIELD_TYPE_TO_PATTERNS: Record<NewFieldType, PatternsFieldType> = {
+  text: 'SHORT_TEXT',
+  number: 'NUMBER',
+  date: 'DATE',
+  boolean: 'BOOLEAN',
+  url: 'URL',
+  image: 'IMAGE',
+  video: 'VIDEO',
+  document: 'DOCUMENT',
+  audio: 'AUDIO',
+};
+
+export const toPatternsFieldType = (type: NewFieldType): PatternsFieldType =>
+  NEW_FIELD_TYPE_TO_PATTERNS[type];

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow1239235736";
+var _namespace_ = "LoadingRow1058322109";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"LoadingRow1239235736__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow1239235736__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow1058322109__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow1058322109__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar2448718076";
+var _namespace_ = "MultiBulkActionToolbar809824376";
 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":"MultiBulkActionToolbar2448718076__root","leftGroupWrapper":"MultiBulkActionToolbar2448718076__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2448718076__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2448718076__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar809824376__root","leftGroupWrapper":"MultiBulkActionToolbar809824376__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar809824376__selectedCountItem","selectedCountText":"MultiBulkActionToolbar809824376__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow3557414379";
+var _namespace_ = "NestedTableRow1405815016";
 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":"NestedTableRow3557414379__root","firstLevel":"NestedTableRow3557414379__firstLevel","placeholder":"NestedTableRow3557414379__placeholder","parentHovered":"NestedTableRow3557414379__parentHovered"};
+export var classes = {"root":"NestedTableRow1405815016__root","firstLevel":"NestedTableRow1405815016__firstLevel","placeholder":"NestedTableRow1405815016__placeholder","parentHovered":"NestedTableRow1405815016__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_ = "MultipleDragOverlayEffect916466647";
+var _namespace_ = "MultipleDragOverlayEffect2212391973";
 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":"MultipleDragOverlayEffect916466647__root"};
+export var classes = {"root":"MultipleDragOverlayEffect2212391973__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_ = "NestedTableDragAndDropRow2368543043";
+var _namespace_ = "NestedTableDragAndDropRow3354128442";
 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":"NestedTableDragAndDropRow2368543043__root"};
+export var classes = {"root":"NestedTableDragAndDropRow3354128442__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_ = "PickerContent4034782988";
+var _namespace_ = "PickerContent3960672221";
 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":"PickerContent4034782988__root"};
+export var classes = {"root":"PickerContent3960672221__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_ = "PickerContentAdditionalStep638239034";
+var _namespace_ = "PickerContentAdditionalStep2779327767";
 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":"PickerContentAdditionalStep638239034__root","titles":"PickerContentAdditionalStep638239034__titles","suffix":"PickerContentAdditionalStep638239034__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep2779327767__root","titles":"PickerContentAdditionalStep2779327767__titles","suffix":"PickerContentAdditionalStep2779327767__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_ = "PickerTableListItem3102395096";
+var _namespace_ = "PickerTableListItem1110147120";
 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":"PickerTableListItem3102395096__root"};
+export var classes = {"root":"PickerTableListItem1110147120__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SchemaSource/SchemaState.ts

@@ -0,0 +1,220 @@
+import {
+  action,
+  computed,
+  makeObservable,
+  observable,
+  runInAction,
+} from 'mobx';
+import {
+  Field,
+  FieldManagement,
+  FieldsSource,
+  LoadedSchema,
+  Schema,
+  SchemaSource,
+  TaskState,
+  WixPatternsContainer,
+} from '@wix/bex-core';
+import type { RemoveToast, ToastConfig } from '@wix/bex-core';
+import type { ToolbarCollectionState } from '../../state';
+import { CollectionFieldsSourceState } from '../../state/CollectionFieldsSourceState';
+import { isFilterableFieldType } from '../../state/buildFieldFilters';
+import { schemaFieldsSource } from './schemaFieldsSource';
+import { schemaFieldManagement } from './schemaFieldManagement';
+import { schemaRendering } from './schemaRendering';
+
+export interface SchemaStateParams<T> {
+  container: WixPatternsContainer;
+  source: SchemaSource<T>;
+}
+
+/**
+ * Holds a collection's loaded schema and turns it into a source-neutral
+ * FieldsSource for the table. It owns the field-management object and the
+ * add/edit field modal, loads the schema once, and builds the table columns
+ * from its fields.
+ */
+export class SchemaState<T = Record<string, unknown>> {
+  readonly container: WixPatternsContainer;
+  readonly source: SchemaSource<T>;
+  readonly fieldManagement: FieldManagement;
+  readonly fieldsSource: FieldsSource;
+  readonly makePrimaryTask = new TaskState();
+  readonly duplicateTask = new TaskState();
+  readonly duplicateWithContentTask = new TaskState();
+
+  loadedSchema?: LoadedSchema<T> = undefined;
+  toolbar?: ToolbarCollectionState<any, any> = undefined;
+
+  constructor(params: SchemaStateParams<T>) {
+    this.container = params.container;
+    this.source = params.source;
+    this.fieldManagement = schemaFieldManagement(this);
+    this.fieldsSource = schemaFieldsSource(this);
+
+    makeObservable(this, {
+      loadedSchema: observable.ref,
+      schema: computed,
+      fields: computed,
+      filterableFields: computed,
+      mergeFields: action,
+    });
+  }
+
+  get schema(): Schema | undefined {
+    return this.loadedSchema?.schema;
+  }
+
+  get fieldActions() {
+    return this.loadedSchema?.fieldActions;
+  }
+
+  get fields(): Field[] {
+    const fields = this.schema?.fields ?? {};
+    return Object.values(fields).filter((f): f is Field => Boolean(f));
+  }
+
+  /** Fields whose type maps to an auto filter in the toolbar. */
+  get filterableFields(): Field[] {
+    return this.fields.filter((f) => isFilterableFieldType(f.type));
+  }
+
+  /** Loads the schema. CollectionFieldsSourceState runs this, tracks its status,
+   *  and shows a retry toast on failure. */
+  load = async (): Promise<void> => {
+    const loaded = await this.source.loadSchema();
+    runInAction(() => {
+      this.loadedSchema = loaded;
+    });
+  };
+
+  /** Attaches this source to a table's toolbar via the shared wrapper. */
+  setOnTable(toolbar: ToolbarCollectionState<any, any>) {
+    this.toolbar = toolbar;
+    CollectionFieldsSourceState.setOnTable(toolbar, {
+      fieldsSource: this.fieldsSource,
+      ...schemaRendering(this),
+    });
+  }
+
+  /** Replaces the loaded schema's fields with the map returned by a mutation. */
+  mergeFields(fields: Schema['fields']) {
+    const current = this.loadedSchema;
+    if (!current) {
+      return;
+    }
+    this.loadedSchema = {
+      ...current,
+      schema: { ...current.schema, fields },
+    };
+  }
+
+  makePrimary = (fieldId: string): void => {
+    const run = this.fieldActions?.makePrimary;
+    if (!run) {
+      return;
+    }
+    void this.runFieldMutation(
+      this.makePrimaryTask,
+      () => run(fieldId),
+      {
+        successMessage: 'Primary field updated',
+        successBi: 'cairo-field-action-make-primary-success',
+        errorMessage: "Couldn't update primary field",
+        errorBi: 'cairo-field-action-make-primary-error',
+      },
+      () => this.makePrimary(fieldId),
+    );
+  };
+
+  duplicateField = (fieldId: string): void => {
+    const run = this.fieldActions?.duplicateField;
+    if (!run) {
+      return;
+    }
+    void this.runFieldMutation(
+      this.duplicateTask,
+      () => run(fieldId),
+      {
+        successMessage: 'Field duplicated',
+        successBi: 'cairo-field-action-duplicate-success',
+        errorMessage: "Couldn't duplicate field",
+        errorBi: 'cairo-field-action-duplicate-error',
+      },
+      () => this.duplicateField(fieldId),
+    );
+  };
+
+  duplicateFieldWithContent = (fieldId: string): void => {
+    const run = this.fieldActions?.duplicateFieldWithContent;
+    if (!run) {
+      return;
+    }
+    void this.runFieldMutation(
+      this.duplicateWithContentTask,
+      () => run(fieldId),
+      {
+        successMessage: 'Field duplicated with content',
+        successBi: 'cairo-field-action-duplicate-with-content-success',
+        errorMessage: "Couldn't duplicate field with content",
+        errorBi: 'cairo-field-action-duplicate-with-content-error',
+      },
+      () => this.duplicateFieldWithContent(fieldId),
+    );
+  };
+
+  // makePrimary/duplicate return the updated fields map (like add/edit/delete),
+  // so merge it locally — same path as the modal actions, no full re-fetch.
+  // Toasts + loading mirror the field-management actions, so the header and the
+  // side panel report the same outcome.
+  private runFieldMutation = async (
+    task: TaskState<unknown>,
+    run: () => Promise<Schema['fields']>,
+    toasts: {
+      successMessage: string;
+      successBi: string;
+      errorMessage: string;
+      errorBi: string;
+    },
+    retry: () => void,
+  ) => {
+    if (task.status.isLoading) {
+      return;
+    }
+    await task.run(async () => {
+      const fields = await run();
+      runInAction(() => this.mergeFields(fields));
+    });
+    if (task.status.isSuccess) {
+      this.notify({
+        type: 'SUCCESS',
+        message: toasts.successMessage,
+        biName: toasts.successBi,
+      });
+    } else if (task.status.isError) {
+      this.notify({
+        type: 'ERROR',
+        message: toasts.errorMessage,
+        biName: toasts.errorBi,
+        action: {
+          text: 'Try again',
+          onClick: retry,
+          removeToastOnClick: true,
+        },
+      });
+    }
+  };
+
+  private currentToastRemove: RemoveToast | undefined;
+
+  // Shared by the source's field mutations (make-primary / duplicate / delete) to
+  // surface a toast; deduped against the previous one.
+  notify = (config: ToastConfig) => {
+    const show = this.container.showToast;
+    if (!show) {
+      return;
+    }
+    this.currentToastRemove?.();
+    this.currentToastRemove = show(config).remove;
+  };
+}

package/src/components/SchemaSource/index.ts

@@ -0,0 +1,4 @@
+export { SchemaState } from './SchemaState';
+export type { SchemaStateParams } from './SchemaState';
+export { tableSchemaSource } from './tableSchemaSource';
+export type { TableSchemaSource } from './tableSchemaSource';