@wix/patterns 1.430.0 → 1.432.0

package/src/components/PageErrorState/PageErrorState.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react';
 import { LoadingErrorState } from '../ErrorState';
 import { Page, PageProps } from '@wix/design-system';
 import { PageErrorStateIllustration } from './PageErrorStateIllustration';
-import { Refresh } from '@wix/wix-ui-icons-common';
+import { Refresh } from '@wix/wix-ui-icons-common/lazy';
 
 export interface PageErrorStateProps extends PageProps {
   /**

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

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

package/src/components/PickerContent/PickerContent.tsx

@@ -9,6 +9,7 @@ import { PickerContentWrapped } from './PickerContentWrapped';
 import { PickerContentItemsSelectionProps } from './PickerContentItemsSelection';
 import { SelectorListContentProps } from '@wix/design-system';
 import { PickerContentAdditionalStepProps } from './PickerContentAdditionalStep';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface PickerContentComponentBaseProps<T, F extends FiltersMap>
   extends PickerContentItemsSelectionProps<T, F>,
@@ -47,6 +48,7 @@ export function PickerContent<T, F extends FiltersMap>(
   props: PickerContentProps<T, F>,
 ) {
   const { modalState } = props;
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   // wrap with a new WixPatternsContainer that can get initialProps
   return (
@@ -55,6 +57,7 @@ export function PickerContent<T, F extends FiltersMap>(
         {...props}
         renderPickerContent={({ state, renderItem }) => (
           <PickerSelectorListContent
+            size={isBmHarmonyTheme ? 'small' : undefined}
             {...props.selectorListProps}
             state={state}
             multiple={fromMultipleSelectionToBoolean(props.multiple)}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep1102083508";
+var _namespace_ = "PickerContentAdditionalStep1878984807";
 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":"PickerContentAdditionalStep1102083508__root","titles":"PickerContentAdditionalStep1102083508__titles","suffix":"PickerContentAdditionalStep1102083508__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1878984807__root","titles":"PickerContentAdditionalStep1878984807__titles","suffix":"PickerContentAdditionalStep1878984807__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerContent/PickerContentAdditionalStep.tsx

@@ -8,8 +8,9 @@ import {
   PickerContentBaseWrappedProps,
 } from './PickerContentBaseWrapped';
 import { AdditionalStepState, PickerContentState } from '../../state';
-import { ChevronLeft } from '@wix/wix-ui-icons-common';
+import { ChevronLeft, ChevronLeftSmall } from '@wix/wix-ui-icons-common/lazy';
 import { st, classes } from './PickerContentAdditionalStep.st.css.js';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface PickerContentAdditionalStepProps<T>
   extends Partial<PickerContentBaseWrappedProps> {
@@ -88,6 +89,8 @@ function _PickerContentAdditionalStep<T, F extends FiltersMap = FiltersMap>(
     ...rest
   } = props;
 
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+
   const [state] = useState(
     () =>
       (pickerContentState.additionalStep = new AdditionalStepState({
@@ -170,7 +173,9 @@ function _PickerContentAdditionalStep<T, F extends FiltersMap = FiltersMap>(
       sideActions={
         autoAdditionalStepOnInitialSelect ? undefined : (
           <TextButton
-            prefixIcon={<ChevronLeft />}
+            prefixIcon={
+              isBmHarmonyTheme ? <ChevronLeftSmall /> : <ChevronLeft />
+            }
             dataHook="back-button"
             onClick={() => onBackButtonClick()}
           >

package/src/components/PickerEmptyState/PickerEmptyState.tsx

@@ -1,5 +1,5 @@
 import { FiltersMap, OptionalFiltersMap, PickerState } from '@wix/bex-core';
-import { Revert } from '@wix/wix-ui-icons-common';
+import { Revert } from '@wix/wix-ui-icons-common/lazy';
 import React from 'react';
 import { Box, Text, TextButton } from '@wix/design-system';
 import {

package/src/components/PickerStandaloneLayout/PickerStandaloneLayoutFooter.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite';
 import React, { MouseEventHandler, ReactElement } from 'react';
 import { Box, Divider, TextButton, TextButtonProps } from '@wix/design-system';
 import { PickerStandaloneState } from '../../state';
-import { Add as AddIcon } from '@wix/wix-ui-icons-common';
+import { Add as AddIcon } from '@wix/wix-ui-icons-common/lazy';
 
 export interface PickerStandaloneLayoutFooterProps<
   T,

package/src/components/PickerStandaloneLayout/PickerStandaloneLayoutHeader.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite';
 import React, { useRef, useState } from 'react';
 import { SwitchTransition } from 'react-transition-group';
 import { Box, Divider } from '@wix/design-system';
-import { ChevronLeftLarge } from '@wix/wix-ui-icons-common';
+import { ChevronLeftLarge } from '@wix/wix-ui-icons-common/lazy';
 import { CollectionSearch } from '../CollectionSearch';
 import { EditorXLogo } from '../EditorXLogo';
 import { WixLogo } from '../WixLogo';

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

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

package/src/components/PickerTableListItem/PickerTableListItem.tsx

@@ -7,7 +7,7 @@ import {
   TableListItemColumn,
   Text,
 } from '@wix/design-system';
-import { ChevronRightLarge } from '@wix/wix-ui-icons-common';
+import { ChevronRightLarge } from '@wix/wix-ui-icons-common/lazy';
 import { PickerListItemProps } from '../PickerListItemProps';
 import { st, classes } from './PickerTableListItem.st.css.js';
 

package/src/components/PrimaryActions/PrimaryActions.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react';
 import { ActionSubitem } from '../ActionControl/ActionSubItemProps';
 import { ActionControl } from '../ActionControl/ActionControl';
-import { Add } from '@wix/wix-ui-icons-common';
+import { Add } from '@wix/wix-ui-icons-common/lazy';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useSelector } from '../../useSelector';
 import { cairoPageCtaClicked } from '@wix/bex-core/bi';

package/src/components/PrimaryPageButton/PrimaryPageButton.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
 import { Button, ButtonProps } from '@wix/design-system';
-import { Add } from '@wix/wix-ui-icons-common';
+import { Add } from '@wix/wix-ui-icons-common/lazy';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { cairoPageCtaClicked } from '@wix/bex-core/bi';
 import { usePageButtonBiParams } from '../usePageButtonBiParams';

package/src/components/RequestId/RequestId.tsx

@@ -7,7 +7,7 @@ import {
   TextSize,
 } from '@wix/design-system';
 import React, { useEffect, useMemo } from 'react';
-import { DuplicateSmall, InfoCircleSmall } from '@wix/wix-ui-icons-common';
+import { DuplicateSmall, InfoCircleSmall } from '@wix/wix-ui-icons-common/lazy';
 
 export interface RequestIdProps {
   /**

package/src/components/SchemaCard/SchemaCard.tsx

@@ -15,7 +15,7 @@ import { CustomColumnsEntityPagePanelMount } from '../CustomColumnsPanel/CustomC
 import { useSchemaContext } from '../../providers/SchemaContext';
 import { CustomColumnsDragAndDrop } from '../CustomColumns/CustomColumnsDragAndDrop';
 import { SchemaCardState } from '../../state/SchemaCard/SchemaCardState';
-import { Add } from '@wix/wix-ui-icons-common';
+import { Add } from '@wix/wix-ui-icons-common/lazy';
 
 export interface SchemaCardProps extends Omit<CardProps, 'children'> {
   title: string;

package/src/components/SchemaSource/ReferenceFieldCell.tsx

@@ -0,0 +1,98 @@
+import React, { Suspense } from 'react';
+import { observer } from 'mobx-react-lite';
+import type { Field } from '@wix/bex-core';
+import type { SchemaState } from './SchemaState';
+
+// The reference views live in @wix/patterns-fields, which statically pulls the
+// rich-text editor and media SDKs — loaded lazily here for the same reason
+// FieldCell does it.
+function lazyView<P extends object>(
+  pick: (m: typeof import('@wix/patterns-fields')) => React.ComponentType<P>,
+) {
+  const C = React.lazy(async () => ({
+    default: pick(await import('@wix/patterns-fields')),
+  }));
+  return (props: P) => (
+    <Suspense fallback={null}>
+      <C {...props} />
+    </Suspense>
+  );
+}
+
+const CellReferenceView = lazyView((m) => m.CellReferenceView);
+const CellMultiReferenceView = lazyView((m) => m.CellMultiReferenceView);
+
+export interface ReferenceFieldCellProps {
+  state: SchemaState<any>;
+  field: Field;
+  row: unknown;
+  /** Stable DOM id prefix for the multi-reference tags. */
+  fieldId: string;
+}
+
+/**
+ * A reference value in a display column. `FieldCell` can't render one: the label
+ * lives in the referenced item's display field, which only the source knows.
+ *
+ * An observer, so the cell fills in when the referenced schema resolves — before
+ * that there is no display field to read and the cell stays empty.
+ */
+function _ReferenceFieldCell({
+  state,
+  field,
+  row,
+  fieldId,
+}: ReferenceFieldCellProps) {
+  const refSchema = state.referenceCells.refSchemaFor(field);
+  const value = state.fieldsSource.getCellValue(row, field);
+  if (!refSchema || value == null) {
+    return null;
+  }
+
+  const { displayField, fields } = refSchema;
+  const imageField = Object.entries(fields ?? {}).find(
+    ([, f]) => f?.type === 'IMAGE',
+  )?.[0];
+
+  const labelOf = (item: unknown) => {
+    // A value that was never expanded (a bare id) has no label to show.
+    if (!item || typeof item !== 'object') {
+      return undefined;
+    }
+    const record = item as Record<string, unknown>;
+    return {
+      name: String(record[displayField] ?? ''),
+      image: imageField
+        ? (record[imageField] as string | undefined)
+        : undefined,
+    };
+  };
+
+  if (field.type === 'MULTI_REFERENCE') {
+    const items: { id: string; name: string; image?: string }[] = [];
+    (Array.isArray(value) ? value : []).forEach((item, i) => {
+      const label = labelOf(item);
+      if (label) {
+        items.push({ id: `${fieldId}-${i}`, ...label });
+      }
+    });
+    return items.length ? (
+      <CellMultiReferenceView
+        items={items}
+        fieldId={fieldId}
+        dataHook="multi-reference-view"
+      />
+    ) : null;
+  }
+
+  const label = labelOf(value);
+  return label ? (
+    <CellReferenceView
+      name={label.name}
+      imageUrl={label.image}
+      dataHook="reference-view"
+    />
+  ) : null;
+}
+
+export const ReferenceFieldCell = observer(_ReferenceFieldCell);

package/src/components/SchemaSource/SchemaState.ts

@@ -2,9 +2,10 @@ import { computed, makeObservable } from 'mobx';
 import { Field, FieldsSource, SourceState } from '@wix/bex-core';
 import type { ToolbarCollectionState } from '../../state';
 import { CollectionFieldsSourceState } from '../../state/CollectionFieldsSourceState';
-import { isFilterableFieldType } from '../../state/buildFieldFilters';
+import { isFilterableField } from '../../state/buildFieldFilters';
 import { schemaFieldsSource } from './schemaFieldsSource';
 import { schemaRendering } from './schemaRendering';
+import { ReferenceCellsState } from './referenceCells';
 
 export interface SchemaStateParams<T> {
   sourceState: SourceState<T>;
@@ -23,12 +24,15 @@ export class SchemaState<T = Record<string, unknown>> {
    *  getters read through to `sourceState`, so MobX tracks through it. Built
    *  once: the spine keeps this exact instance. */
   readonly fieldsSource: FieldsSource;
+  /** Supplies the reference cells their referenced-collection config. */
+  readonly referenceCells: ReferenceCellsState<T>;
 
   toolbar?: ToolbarCollectionState<any, any> = undefined;
 
   constructor(params: SchemaStateParams<T>) {
     this.sourceState = params.sourceState;
     this.fieldsSource = schemaFieldsSource(this);
+    this.referenceCells = new ReferenceCellsState<T>(this.sourceState);
 
     makeObservable(this, {
       filterableFields: computed,
@@ -37,7 +41,9 @@ export class SchemaState<T = Record<string, unknown>> {
 
   /** Fields whose type maps to an auto filter in the toolbar. */
   get filterableFields(): Field[] {
-    return this.sourceState.fields.filter((f) => isFilterableFieldType(f.type));
+    return this.sourceState.fields.filter((f) =>
+      isFilterableField(f, this.fieldsSource),
+    );
   }
 
   /** Attaches this source to a table's toolbar via the shared wrapper. */

package/src/components/SchemaSource/referenceCells.ts

@@ -0,0 +1,141 @@
+import { observable, runInAction } from 'mobx';
+import { sourceFetchData } from '@wix/bex-core';
+import type {
+  Field,
+  OffsetQuery,
+  Schema,
+  SchemaSource,
+  SourceState,
+} from '@wix/bex-core';
+import type { EditableCellUpgrade } from '../../state/CollectionFieldsSourceState';
+import type {
+  ReferenceItem,
+  ReferenceTypeConfig,
+  RefSchema,
+} from '../EditableTable/cellTypes/reference/types';
+
+type RefRow = Record<string, unknown>;
+
+const referencedCollectionIdOf = (field: Field): string | undefined =>
+  field.type === 'REFERENCE' || field.type === 'MULTI_REFERENCE'
+    ? field.referenceMetadata?.referencedCollectionId
+    : undefined;
+
+const imageFieldOf = (fields: Schema['fields']): string | undefined =>
+  Object.entries(fields ?? {}).find(([, f]) => f?.type === 'IMAGE')?.[0];
+
+const toRefSchema = (schema: Schema, collectionId: string): RefSchema => ({
+  id: schema.id ?? collectionId,
+  collectionId,
+  displayField: schema.displayField,
+  idField: schema.idField,
+  fields: Object.fromEntries(
+    Object.entries(schema.fields ?? {})
+      .filter(([, f]) => f?.type === 'IMAGE')
+      .map(([id]) => [id, { type: 'IMAGE' as const }]),
+  ),
+});
+
+/**
+ * Supplies the reference / multi-reference cells the `typeConfig` they need:
+ * the referenced collection's schema (for the id / display / image fields) and
+ * a query for its items.
+ *
+ * The referenced schema loads asynchronously, so `cellFor` answers `undefined`
+ * until it lands and the column stays a read-only display; once loaded, the
+ * column builder's computed re-runs and the cell upgrades to the real editor.
+ */
+export class ReferenceCellsState<T = Record<string, unknown>> {
+  private readonly _sourceState: SourceState<T>;
+  /** Referenced schema per referenced collection id, once loaded. */
+  private readonly _schemas = observable.map<string, Schema>();
+  /** Ids already requested. A plain Set, so reading `cellFor` from a computed
+   *  mutates no observable — only the async result does, in an action. */
+  private readonly _requested = new Set<string>();
+
+  constructor(sourceState: SourceState<T>) {
+    this._sourceState = sourceState;
+  }
+
+  /** The cell type and config for a reference field, or `undefined` while the
+   *  referenced schema is still loading (or the source has no entry for it). */
+  cellFor(field: Field): EditableCellUpgrade | undefined {
+    const resolved = this._resolve(field);
+    if (!resolved) {
+      return undefined;
+    }
+    const { collectionId, refSource, schema } = resolved;
+
+    return {
+      cellType:
+        field.type === 'MULTI_REFERENCE' ? 'multiReference' : 'reference',
+      typeConfig: {
+        refSchema: toRefSchema(schema, collectionId),
+        fetchReferenceItems: (query) =>
+          fetchReferenceItems(refSource, schema, query),
+      } satisfies ReferenceTypeConfig,
+    };
+  }
+
+  /** The referenced collection's id / display / image fields, for rendering a
+   *  reference value. `undefined` until the referenced schema resolves. */
+  refSchemaFor(field: Field): RefSchema | undefined {
+    const resolved = this._resolve(field);
+    return resolved && toRefSchema(resolved.schema, resolved.collectionId);
+  }
+
+  /** The referenced source and its loaded schema, requesting the load on first
+   *  ask. Returns `undefined` until it lands, or if the source has no entry. */
+  private _resolve(field: Field) {
+    const collectionId = referencedCollectionIdOf(field);
+    if (!collectionId) {
+      return undefined;
+    }
+    const refSource = this._sourceState.source.references?.[collectionId];
+    if (!refSource) {
+      return undefined;
+    }
+    const schema = this._schemas.get(collectionId);
+    if (!schema) {
+      this._request(collectionId, refSource);
+      return undefined;
+    }
+    return { collectionId, refSource, schema };
+  }
+
+  private _request(collectionId: string, refSource: SchemaSource<any>) {
+    if (this._requested.has(collectionId)) {
+      return;
+    }
+    this._requested.add(collectionId);
+    refSource
+      .loadSchema()
+      .then(({ schema }) =>
+        runInAction(() => this._schemas.set(collectionId, schema)),
+      )
+      .catch(() => {
+        // The reference column keeps its read-only display. Retry on the next
+        // schema load rather than holding a failed id forever.
+        this._requested.delete(collectionId);
+      });
+  }
+}
+
+async function fetchReferenceItems(
+  refSource: SchemaSource<any>,
+  schema: Schema,
+  query: OffsetQuery,
+): Promise<{ items: ReferenceItem[]; total: number }> {
+  const { idField, displayField } = schema;
+  const imageField = imageFieldOf(schema.fields);
+  const { items, total } = await sourceFetchData<RefRow>(refSource)(query);
+
+  return {
+    items: items.map((item) => ({
+      id: String(item[idField] ?? ''),
+      name: String(item[displayField] ?? ''),
+      image: imageField ? (item[imageField] as string | undefined) : undefined,
+    })),
+    total: total ?? items.length,
+  };
+}

package/src/components/SchemaSource/schemaFieldManagement.ts

@@ -35,7 +35,19 @@ export const schemaFieldManagement = (
       return schema ? source.canEditField(field, schema) : false;
     },
     supportsPii: sourceState.source.supportsPii,
+    get piiWarning() {
+      return sourceState.source.piiWarning?.();
+    },
     permissions: sourceState.source.fieldPermissions,
+    get fieldModalText() {
+      const t = sourceState.container.translate;
+      return (
+        sourceState.source.fieldModalText ?? {
+          addTitle: t('cairo.customFields.addCustomField.modal.title'),
+          editTitle: t('cairo.customFields.editCustomField.modal.title'),
+        }
+      );
+    },
     // Self-contained: does the delete and reports its own toast (matching the
     // DataExtension source). Rethrows on failure so the shared delete modal stays
     // open for a retry.
@@ -77,6 +89,9 @@ export const schemaFieldManagement = (
           namePlaceholder:
             ft.namePlaceholder ??
             (standard ? t(standard.namePlaceholderKey) : undefined),
+          subtitle: ft.subtitle,
+          group: ft.group,
+          supportsPii: ft.supportsPii,
           patternsType: ft.patternsType,
         };
       });

package/src/components/SchemaSource/schemaFieldsSource.ts

@@ -21,6 +21,7 @@ export const schemaFieldsSource = (s: SchemaState<any>): FieldsSource => {
     get manageableFields() {
       return sourceState.fields.filter((f) => !f.isSystem);
     },
+    fieldTypes: sourceState.source.fieldTypes,
     columnIdForField: (field) => field.id,
     queryFieldId: (field) => field.id,
     getCellValue: (row, field) => (row as Record<string, unknown>)[field.id],

package/src/components/SchemaSource/schemaRendering.tsx

@@ -1,4 +1,6 @@
+import React from 'react';
 import { FilterOperator } from '@wix/bex-core';
+import type { Column } from '../../model';
 import type { FieldsSourceRendering } from '../../state/CollectionFieldsSourceState';
 import type { SchemaState } from './SchemaState';
 import {
@@ -8,6 +10,7 @@ import {
 import { FieldManagementModals } from '../CustomFieldsPanel/FieldManagementModals';
 import { CustomColumnsFull } from '../CustomColumns/CustomColumnsFull';
 import { CollectionToolbarFilters } from '../CollectionToolbarFilters';
+import { ReferenceFieldCell } from './ReferenceFieldCell';
 
 // Text operators a schema source's backend can execute.
 const SCHEMA_TEXT_OPERATORS = [
@@ -29,6 +32,25 @@ export const schemaRendering = (
     textOperators: SCHEMA_TEXT_OPERATORS,
     numberIsDecimal: () => true,
   },
+  // A reference value is an expanded referenced item, which FieldCell can't
+  // render — the label is in the referenced collection's display field.
+  columnOverrides: (field): Partial<Column> => {
+    if (field.type !== 'REFERENCE' && field.type !== 'MULTI_REFERENCE') {
+      return {};
+    }
+    return {
+      render: (row: unknown, rowNum: number) => (
+        <ReferenceFieldCell
+          state={s}
+          field={field}
+          row={row}
+          fieldId={`${field.id}-${rowNum}`}
+        />
+      ),
+    } as Partial<Column>;
+  },
+  schemaSource: s.sourceState.source,
+  editableCellFor: (field) => s.referenceCells.cellFor(field),
   createFieldActionsMenu: createSchemaFieldActionsMenu(s),
   createFieldActionHandlers: (panel) => schemaFieldActionHandlers(s, panel),
   featuredPageActions: [],

package/src/components/SchemaSource/tableSchemaSource.ts

@@ -1,6 +1,7 @@
 import { SourceState } from '@wix/bex-core';
 import type { SchemaSource } from '@wix/bex-core';
 import type { FieldsSourceProvider } from '../fieldsSourceProvider';
+import type { SchemaSourceWithFields } from '../../model/schemaFieldsContainer';
 import type { ToolbarCollectionState } from '../../state';
 import { SchemaState } from './SchemaState';
 
@@ -68,9 +69,17 @@ class TableSchemaSourceImpl<T> implements TableSchemaSource<T> {
   get references() {
     return this.source.references;
   }
+  get fieldsContainer() {
+    // Attached by `useSchemaSource`; forwarded like every other member, or the
+    // wrapper would hand the components a source with no container.
+    return (this.source as SchemaSourceWithFields).fieldsContainer;
+  }
   get creatableFieldTypes() {
     return this.source.creatableFieldTypes;
   }
+  get fieldTypes() {
+    return this.source.fieldTypes;
+  }
   get fieldPermissions() {
     return this.source.fieldPermissions;
   }

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

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

package/src/components/SetupWidget/SetupStepCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, Text, Divider, Tooltip } from '@wix/design-system';
-import { ChevronRight, ChevronDown, ChevronUp } from '@wix/wix-ui-icons-common';
+import { ChevronRight, ChevronDown, ChevronUp } from '@wix/wix-ui-icons-common/lazy';
 import { SetupWidgetStep } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { SetupStepIcon } from './SetupStepIcon';

package/src/components/SetupWidget/SetupStepGroup.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, Text, Badge, Tag } from '@wix/design-system';
-import { ChevronDown, ChevronUp } from '@wix/wix-ui-icons-common';
+import { ChevronDown, ChevronUp } from '@wix/wix-ui-icons-common/lazy';
 import { SetupWidgetStep } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { SetupStepIcon } from './SetupStepIcon';

package/src/components/SetupWidget/SetupStepIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box } from '@wix/design-system';
-import { ConfirmSmall, CircleSmallFilledSmall } from '@wix/wix-ui-icons-common';
+import { ConfirmSmall, CircleSmallFilledSmall } from '@wix/wix-ui-icons-common/lazy';
 import { SetupWidgetStepStatus } from '@wix/bex-core';
 
 /**

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget525839026";
+var _namespace_ = "SetupWidget2654981828";
 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":"SetupWidget525839026__root","row":"SetupWidget525839026__row","completedCta":"SetupWidget525839026__completedCta","card":"SetupWidget525839026__card","stepIcon":"SetupWidget525839026__stepIcon","chevron":"SetupWidget525839026__chevron","chevronDisabled":"SetupWidget525839026__chevronDisabled","inProgressLabel":"SetupWidget525839026__inProgressLabel"};
+export var classes = {"root":"SetupWidget2654981828__root","row":"SetupWidget2654981828__row","completedCta":"SetupWidget2654981828__completedCta","card":"SetupWidget2654981828__card","stepIcon":"SetupWidget2654981828__stepIcon","chevron":"SetupWidget2654981828__chevron","chevronDisabled":"SetupWidget2654981828__chevronDisabled","inProgressLabel":"SetupWidget2654981828__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};