@wix/patterns 1.430.0 → 1.432.0

package/src/exports/schema.ts

@@ -4,15 +4,43 @@ export {
   useGridCollection,
   useEditableTableCollection,
   useLayoutSwitchCollection,
+  useEntityPage,
   usePlatformizedSource,
   sourceMutations,
+  Table,
+  EditableTable,
+  Grid,
+  LayoutSwitch,
+  EntityPage,
+  EntityPageFieldsCard,
 } from '../schema';
 export type {
   PlatformizedSourceInput,
   SchemaCollectionOptions,
+  SchemaEntityPageOptions,
   SchemaEditableTableCollectionOptions,
   SchemaLayoutSwitchCollectionOptions,
+  SchemaTableProps,
+  SchemaEditableTableProps,
+  SchemaGridProps,
+  SchemaLayoutSwitchProps,
+  SchemaEntityPageProps,
+  EntityPageFieldsCardProps,
 } from '../schema';
 export type { FieldsSourceProvider } from '../components/fieldsSourceProvider';
-export { useSchemaSource } from '@wix/bex-core/react';
-export type { SchemaSource, SchemaSourceInput } from '@wix/bex-core';
+// The cairo proxy, not the core hook: it attaches the fields container to the
+// source so every state and component on that schema shares one.
+export { useSchemaSource } from '../schema/useSchemaSource';
+export type { FieldsSchemaSource } from '../schema/useSchemaSource';
+export { defineSchemaSource, sourceFetchData } from '@wix/bex-core';
+export type {
+  SchemaSource,
+  SchemaSourceInput,
+  CreatableFieldType,
+  Schema,
+  LoadedSchema,
+  SchemaLoader,
+  CollectionBackend,
+  CollectionBackendBase,
+  FieldActions,
+} from '@wix/bex-core';

package/src/fields/DateInput/DateInput.tsx

@@ -18,11 +18,14 @@ export const DateInput = ({
   inputRef,
   onChange,
 }: DateInputProps) => {
-  const [date, setDate] = useState<Date | undefined>(() =>
-    initialValue
-      ? getDateWithoutTimezone(getISODateStringWithFixedTimezone(initialValue))
-      : undefined,
-  );
+  // An initial value that isn't a date leaves the picker empty instead of
+  // throwing out of render.
+  const [date, setDate] = useState<Date | undefined>(() => {
+    const iso = initialValue
+      ? getISODateStringWithFixedTimezone(initialValue)
+      : undefined;
+    return iso ? getDateWithoutTimezone(iso) : undefined;
+  });
 
   const ref = useRef<BaseInputRef>({});
   const [statusMessage, setStatusMessage] = useState('');
@@ -44,7 +47,7 @@ export const DateInput = ({
           onChange={(newValue: Date) => {
             const formatedDate = getISODateStringWithFixedTimezone(newValue);
             setDate(newValue);
-            onChange(formatedDate.split('T')[0]);
+            onChange(formatedDate?.split('T')[0] ?? '');
           }}
           onValidate={({ validationType, value, format }) => {
             if (validationType === 'valid') {

package/src/fields/Url/Url.tsx

@@ -4,7 +4,7 @@ import { BaseInputProps, BaseInputRef } from '../BaseInput';
 import { Field } from '../Field';
 import { dataHooks } from '../dataHooks';
 import { useTextInput } from '../useTextInput';
-import { Link } from '@wix/wix-ui-icons-common';
+import { Link } from '@wix/wix-ui-icons-common/lazy';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 export interface UrlProps extends BaseInputProps<string> {}

package/src/hooks/useBuildOption.ts

@@ -6,6 +6,7 @@ import { ArrayField, KeyedItem } from '@wix/bex-core';
 import { ListItem } from './listItem';
 import { useCallback, useMemo } from 'react';
 import { DropdownLayoutOption } from '@wix/design-system/dist/types/DropdownLayout';
+import { useBmHarmonyTheme } from './useBmHarmonyTheme';
 
 export interface BuildOptionState {
   disabled?: boolean;
@@ -23,6 +24,8 @@ export function useBuildOption<V>({
   checkbox?: boolean;
   getOptionState?: (key: string) => BuildOptionState;
 }) {
+  const isHarmonyTheme = useBmHarmonyTheme();
+
   return useCallback(
     (keyedItem: KeyedItem<V>, index: number) => {
       const { key, item } = keyedItem;
@@ -35,6 +38,7 @@ export function useBuildOption<V>({
           id: key,
           checkbox,
           ellipsis: true,
+          ...(isHarmonyTheme ? { size: 'small' } : {}),
           title: filter.itemName(item),
           label: title,
           ...option,

package/src/index.ts

@@ -164,6 +164,24 @@ export * from './state/TableGridSwitchFoldersState';
 export * from './state/CustomFields/CustomFieldsWidgetState';
 export * from './state/NestedTableState';
 export * from './state/EditableTable';
+export {
+  defineFieldType,
+  resolveFieldTypeDefinition,
+  type FieldTypeDefinition,
+  type FieldTypeDisplay,
+  type FieldValueBehavior,
+  type FieldCapabilities,
+  type FilterTypeConfig,
+  type FieldActionsConfig,
+  type FieldTypeActionItem,
+  type EditableCellConfig,
+  type TableCellConfig,
+  type CellViewProps,
+  type CellEditProps,
+  type CellEditWrapperProps,
+  type Focusable,
+  type EditTrigger,
+} from '@wix/bex-core';
 export * from './state/LayoutSwitchState';
 export * from './state/ILayoutSwitchState';
 export { DateRangeFilterStateParams } from './state/DateRangeFilterState';
@@ -262,6 +280,7 @@ export {
   ShowToast,
   OnNavigation,
   WixPatternsContainer,
+  WixPatternsContainerParams,
   prefetchTranslations,
   prefetchTranslationsWithoutBundling,
   arrayFilter,

package/src/model/schemaFieldsContainer.ts

@@ -0,0 +1,18 @@
+import type { SchemaSource } from '@wix/bex-core';
+import type { PatternsFieldsAppContainer } from '@wix/patterns-fields/providers';
+
+/**
+ * A source carrying the container its field renderers are built with. Attached
+ * by `useSchemaSource` from `@wix/patterns/schema`, so every state and component
+ * working off one schema shares one container — `SchemaSource` itself lives in
+ * core, which can't name the type.
+ */
+export interface SchemaSourceWithFields {
+  readonly fieldsContainer?: PatternsFieldsAppContainer;
+}
+
+/** The container attached to a source, if it came from `useSchemaSource`. */
+export const fieldsContainerOf = (
+  source?: SchemaSource<any> | SchemaSourceWithFields | null,
+): PatternsFieldsAppContainer | undefined =>
+  (source as SchemaSourceWithFields | undefined)?.fieldsContainer;

package/src/providers/PatternsFieldsProvider.tsx

@@ -3,6 +3,7 @@ import { useWixPatternsContainer } from '@wix/bex-core/react';
 import {
   PatternsFieldsAppContainer,
   PatternsFieldsContainerProvider,
+  usePatternsCmsFieldsContainer,
 } from '@wix/patterns-fields/providers';
 // eslint-disable-next-line no-restricted-imports
 import '@wix/patterns-fields/src/styles.global.css';
@@ -12,9 +13,32 @@ import '@wix/patterns-fields/src/styles.global.css';
  * and exposes it via PatternsFieldsContainerProvider.
  *
  * Must be rendered inside a WixPatternsContainerProvider (e.g. inside CairoProviderCore).
+ *
+ * With a provider already above it this one steps aside and warns: a second
+ * container would initialize translations twice, and the nesting is a wiring
+ * mistake worth seeing rather than absorbing.
  */
 export const PatternsFieldsProvider: React.FC<{ children: ReactNode }> = ({
   children,
+}) => {
+  const existing = usePatternsCmsFieldsContainer();
+
+  useEffect(() => {
+    if (process.env.NODE_ENV !== 'production' && existing) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'PatternsFieldsProvider is nested inside another one. The inner provider does nothing — remove it, or the component that renders it (Table / EditableTable / Grid / EntityPage from @wix/patterns/schema each provide it).',
+      );
+    }
+  }, [existing]);
+
+  return <OwnedFieldsContainer>{children}</OwnedFieldsContainer>;
+};
+
+/** Mounted only when there is no container above, so the container is built
+ *  where it is used — never speculatively. */
+const OwnedFieldsContainer: React.FC<{ children: ReactNode }> = ({
+  children,
 }) => {
   const patternsContainer = useWixPatternsContainer();
 
@@ -22,9 +46,7 @@ export const PatternsFieldsProvider: React.FC<{ children: ReactNode }> = ({
     () => new PatternsFieldsAppContainer({ patternsContainer }),
   );
 
-  useEffect(() => {
-    fieldsContainer.init();
-  }, [fieldsContainer]);
+  useEffect(() => fieldsContainer.init(), [fieldsContainer]);
 
   return (
     <PatternsFieldsContainerProvider value={fieldsContainer}>

package/src/providers/SchemaFieldsProvider.tsx

@@ -0,0 +1,47 @@
+import React, { ReactNode } from 'react';
+import { PatternsFieldsContainerProvider } from '@wix/patterns-fields/providers';
+import type { SchemaSource } from '@wix/bex-core';
+import {
+  fieldsContainerOf,
+  type SchemaSourceWithFields,
+} from '../model/schemaFieldsContainer';
+// The field renderers' styles. Imported here so every source-driven component
+// gets them from one place, rather than each one importing the side effect.
+// eslint-disable-next-line no-restricted-imports
+import '@wix/patterns-fields/src/styles.global.css';
+
+export interface SchemaFieldsProviderProps {
+  /** The schema whose container the field renderers read — attached by
+   *  `useSchemaSource`. A source built without it carries none. */
+  schema?: SchemaSource<any> | SchemaSourceWithFields | null;
+  children: ReactNode;
+}
+
+/**
+ * Puts the schema's fields container in React context, where the field
+ * renderers read it. Unlike `PatternsFieldsProvider` it creates nothing and
+ * initializes nothing: the container belongs to the schema and the component
+ * states initialize it in their `init()`.
+ *
+ * A schema with no container means the source wasn't built by `useSchemaSource`.
+ * That throws here, naming the fix: the alternative is every field renderer
+ * below failing on a null container, which says nothing about the cause.
+ */
+export const SchemaFieldsProvider: React.FC<SchemaFieldsProviderProps> = ({
+  schema,
+  children,
+}) => {
+  const fieldsContainer = fieldsContainerOf(schema);
+
+  if (!fieldsContainer) {
+    throw new Error(
+      'The schema has no fields container, so the field renderers below have nothing to read. Build the source with useSchemaSource from @wix/patterns/schema, which attaches one.',
+    );
+  }
+
+  return (
+    <PatternsFieldsContainerProvider value={fieldsContainer}>
+      {children}
+    </PatternsFieldsContainerProvider>
+  );
+};

package/src/providers/index.ts

@@ -1,5 +1,6 @@
 export * from './CairoProvider';
 export * from './PatternsFieldsProvider';
+export * from './SchemaFieldsProvider';
 export * from './CollectionPageContext';
 export * from './PageContext';
 export * from './FormPageContext';

package/src/schema/EditableTable.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import type { FiltersMap } from '@wix/bex-core';
+import { SchemaFieldsProvider } from '../providers/SchemaFieldsProvider';
+import { EditableTable as OpenEditableTable } from '../components/EditableTable';
+import type { EditableTableProps } from '../components/EditableTable/EditableTable';
+import type {
+  EditableColumn,
+  EditableTableState,
+} from '../state/EditableTable';
+
+/** EditableTable props for a source-driven table: the source supplies the field
+ *  columns and attaches its own fields management. `columns` is optional
+ *  (extras only); field-type icons are always on, and there is no
+ *  `fieldsSource`/`dataExtension`. */
+export type SchemaEditableTableProps<T, F extends FiltersMap> = Omit<
+  EditableTableProps<T, F>,
+  'state' | 'columns' | 'fieldsSource' | 'dataExtension' | 'showFieldTypeIcons'
+> & {
+  state: EditableTableState<T, F>;
+  /** Columns beyond the source's fields. Default: none. */
+  columns?: EditableColumn<T>[];
+};
+
+function _EditableTable<T, F extends FiltersMap>(
+  props: SchemaEditableTableProps<T, F>,
+) {
+  const { columns, ...rest } = props;
+  // A source's field-typed cells (dates, media, references) render
+  // patterns-fields components, which read the container from context.
+  const schema = props.state.toolbar.collectionFieldsSource?.schemaSource;
+  const table = (
+    <OpenEditableTable {...rest} columns={columns ?? []} showFieldTypeIcons />
+  );
+  return <SchemaFieldsProvider schema={schema}>{table}</SchemaFieldsProvider>;
+}
+
+export const EditableTable = observer(_EditableTable) as typeof _EditableTable;

package/src/schema/EntityPage.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { FieldValues } from 'react-hook-form';
+import { SchemaFieldsProvider } from '../providers/SchemaFieldsProvider';
+import {
+  EntityPage as OpenEntityPage,
+  type EntityPageProps,
+} from '../components/EntityPage';
+
+/** EntityPage props for a source-driven page — the same as the open component's.
+ *  The fields container the page's fields need is wired here, not by the
+ *  consumer. */
+export type SchemaEntityPageProps<
+  T,
+  V extends FieldValues = FieldValues,
+> = EntityPageProps<T, V>;
+
+function _EntityPage<T, V extends FieldValues = FieldValues>({
+  state,
+  ...rest
+}: SchemaEntityPageProps<T, V>) {
+  // The container belongs to the schema and the state initializes it in init(),
+  // so there is nothing to create or register here.
+  return (
+    <SchemaFieldsProvider schema={state.schemaSource}>
+      <OpenEntityPage state={state} {...rest} />
+    </SchemaFieldsProvider>
+  );
+}
+
+_EntityPage.Header = OpenEntityPage.Header;
+_EntityPage.Content = OpenEntityPage.Content;
+_EntityPage.MainContent = OpenEntityPage.MainContent;
+_EntityPage.AdditionalContent = OpenEntityPage.AdditionalContent;
+_EntityPage.Card = OpenEntityPage.Card;
+_EntityPage.Slots = OpenEntityPage.Slots;
+_EntityPage.Extensions = OpenEntityPage.Extensions;
+
+_EntityPage.displayName = 'EntityPage';
+
+export const EntityPage = _EntityPage;

package/src/schema/EntityPageFieldsCard.tsx

@@ -0,0 +1,138 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Card } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import { useWixPatternsContainer, usePageContext } from '@wix/bex-core/react';
+import {
+  EntityPageCard,
+  type EntityPageCardProps,
+} from '../components/EntityPageCard';
+import { EntityPageFields } from '../components/EntityPageFields';
+import { EntityPageColumnsPanelEntry } from '../components/EntityPage/EntityPageColumnsPanelEntry';
+import { EntityPageSidePanels } from '../components/EntityPage/EntityPageSidePanels';
+import { CustomColumnsDragAndDrop } from '../components/CustomColumns/CustomColumnsDragAndDrop';
+import { FieldManagementModals } from '../components/CustomFieldsPanel/FieldManagementModals';
+import { useEntityPageContext } from '../providers';
+import { EntityPageFieldsCardState } from '../state/EntityPageFieldsCardState';
+import { SidePanelsState } from '../state/SidePanelsState';
+import { entityPageFieldManagement } from './entityPageFieldManagement';
+
+export interface EntityPageFieldsCardProps
+  extends Omit<EntityPageCardProps, 'children'> {
+  title: string;
+  subtitle?: string;
+  /**
+   * Field ids to offer, in order. Omitted ⇒ every editable schema field.
+   * Read once, on the first render — a later change is ignored, since the saved
+   * show/hide and order are keyed to the list the card started with.
+   */
+  fieldIds?: string[];
+  /**
+   * Namespace the per-user show/hide and order are stored under. Default: the
+   * source's collection id — set it only to store the layout under a name of
+   * your own.
+   */
+  persistencyKey?: string;
+  /** Whether to show the "Manage fields" button and panel. Default: `true`. */
+  showManageFields?: boolean;
+  dataHook?: string;
+}
+
+/** The page's schema fields in a card, with a "Manage fields" panel that shows,
+ *  hides and reorders them, and adds, edits and deletes them. The choice is
+ *  saved per user and survives reloads. Render inside the `EntityPage` from this
+ *  entry.
+ *
+ *  One card per page. Field management is built per card, so on a second card
+ *  the rows of fields added from the first one render without their actions
+ *  menu — the row comes from the page's schema, the menu from the card's own
+ *  copy, which only the mutating card's copy gets merged into. Split the fields
+ *  across cards only when none of them manages fields (`showManageFields:
+ *  false`). */
+export function _EntityPageFieldsCard({
+  title,
+  subtitle,
+  fieldIds,
+  persistencyKey,
+  showManageFields = true,
+  dataHook = 'entity-page-fields-card',
+  ...rest
+}: EntityPageFieldsCardProps) {
+  const container = useWixPatternsContainer();
+  const { translate: t } = container;
+  const { modalsContainerRef } = usePageContext();
+  const pageState = useEntityPageContext();
+
+  // The page has no side-panel host until a feature needs one.
+  useState(() => SidePanelsState.setOnPage(pageState, container));
+
+  const [state] = useState(
+    () =>
+      new EntityPageFieldsCardState({
+        pageState,
+        container,
+        // The collection id is the schema id, and unlike the schema it is here
+        // on the first render. A page with no source has no schema and so no
+        // fields to lay out — the fallback just names an empty layout.
+        persistencyKey:
+          persistencyKey ??
+          pageState.schemaSource?.collectionId ??
+          'entity-page-fields',
+        fieldIds,
+        showManageFields,
+        dragAndDrop: CustomColumnsDragAndDrop,
+        fieldManagement: entityPageFieldManagement,
+        modalsContainerRef,
+      }),
+  );
+
+  useEffect(() => state.init(), []);
+
+  useEffect(() => {
+    if (!state.panelState) {
+      return;
+    }
+
+    state.panelState.panels.registerSidePanel(
+      'customColumns',
+      EntityPageColumnsPanelEntry,
+    );
+  }, []);
+
+  return (
+    <EntityPageCard dataHook={dataHook} {...rest}>
+      <Card.Header
+        title={title}
+        subtitle={subtitle}
+        suffix={
+          state.canManageFields ? (
+            <Button
+              size="small"
+              priority="secondary"
+              dataHook="entity-page-fields-card-manage-fields"
+              onClick={() => state.openManageFields()}
+            >
+              {t('cairo.table.manage-fields.button.cta')}
+            </Button>
+          ) : undefined
+        }
+      />
+      <Card.Divider />
+      <Card.Content>
+        <EntityPageFields fieldIds={state.visibleFieldIds} />
+      </Card.Content>
+      {/* The host lives on the page, so a panel opened here closes any other.
+          Rendered by the card rather than the page, so a page without a fields
+          card never bundles the side-panel modal. */}
+      {state.panelState && (
+        <EntityPageSidePanels panels={state.panelState.panels} />
+      )}
+      {state.manageFieldsSource && (
+        <FieldManagementModals source={state.manageFieldsSource} />
+      )}
+    </EntityPageCard>
+  );
+}
+
+_EntityPageFieldsCard.displayName = 'EntityPageFieldsCard';
+
+export const EntityPageFieldsCard = observer(_EntityPageFieldsCard);

package/src/schema/Grid.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import type { FiltersMap } from '@wix/bex-core';
+import { SchemaFieldsProvider } from '../providers/SchemaFieldsProvider';
+import { Grid as OpenGrid, type GridProps } from '../components/Grid/Grid';
+import type { SupportedCardGalleryItemProps } from '../components/Grid/SupportedCardGalleryItemProps';
+
+/** A grid driven by a source: the card title comes from the source's display
+ *  value, so `renderItem` sets only the rest of the card (subtitle, image,
+ *  badge, …). Field-type icons are always on, and not configurable. */
+export type SchemaGridProps<T, F extends FiltersMap> = Omit<
+  GridProps<T, F>,
+  'showFieldTypeIcons' | 'renderItem'
+> & {
+  renderItem?: (
+    item: T,
+    index: number,
+  ) => Omit<Partial<SupportedCardGalleryItemProps>, 'title'>;
+};
+
+function _Grid<T, F extends FiltersMap>(props: SchemaGridProps<T, F>) {
+  // Field-typed cells render patterns-fields components, which read the
+  // container from context (see Table).
+  const schema = props.state.toolbar.collectionFieldsSource?.schemaSource;
+  const grid = <OpenGrid {...props} showFieldTypeIcons />;
+  return <SchemaFieldsProvider schema={schema}>{grid}</SchemaFieldsProvider>;
+}
+
+export const Grid = observer(_Grid) as typeof _Grid;

package/src/schema/LayoutSwitch.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { SchemaFieldsProvider } from '../providers/SchemaFieldsProvider';
+import type { ReactElement } from 'react';
+import type { FiltersMap } from '@wix/bex-core';
+import {
+  LayoutSwitch as OpenLayoutSwitch,
+  type LayoutSwitchProps,
+} from '../components/LayoutSwitch/LayoutSwitch';
+import type { LayoutSwitchState } from '../state/LayoutSwitchState';
+import type { SchemaTableProps } from './Table';
+import type { SchemaEditableTableProps } from './EditableTable';
+import type { SchemaGridProps } from './Grid';
+
+type LayoutBag<P> = Omit<P, 'state' | 'tableGridSwitchButton'>;
+
+/** LayoutSwitch props for a source-driven page: the per-layout state is derived
+ *  from the single `state`, and each layout's props are the source-adjusted
+ *  versions (columns optional, no fieldsSource, field-type icons on). */
+export interface SchemaLayoutSwitchProps<T, F extends FiltersMap> {
+  state: LayoutSwitchState<T, F>;
+  importButton?: ReactElement;
+  tableProps?: LayoutBag<SchemaTableProps<T, F>>;
+  gridProps?: LayoutBag<SchemaGridProps<T, F>>;
+  spreadsheetProps?: LayoutBag<SchemaEditableTableProps<T, F>>;
+}
+
+function _LayoutSwitch<T, F extends FiltersMap>({
+  state,
+  importButton,
+  tableProps,
+  gridProps,
+  spreadsheetProps,
+}: SchemaLayoutSwitchProps<T, F>) {
+  const props: LayoutSwitchProps<T, F> = {
+    state,
+    importButton,
+    // Each layout is enabled only when both its props and its state exist —
+    // passing `tableProps` while the hook wasn't configured with `table` would
+    // otherwise render a layout with an undefined state and crash.
+    tableProps:
+      tableProps && state.tableState
+        ? {
+            ...tableProps,
+            state: state.tableState,
+            columns: tableProps.columns ?? [],
+            showFieldTypeIcons: true,
+            showAddFieldButton: true,
+          }
+        : undefined,
+    gridProps:
+      gridProps && state.gridState
+        ? {
+            ...gridProps,
+            state: state.gridState,
+            showFieldTypeIcons: true,
+          }
+        : undefined,
+    spreadsheetProps:
+      spreadsheetProps && state.spreadsheetState
+        ? {
+            ...spreadsheetProps,
+            state: state.spreadsheetState,
+            columns: spreadsheetProps.columns ?? [],
+            showFieldTypeIcons: true,
+          }
+        : undefined,
+  };
+
+  // Every layout needs the container, not just the spreadsheet (EditableTable) —
+  // a source's field-typed cells (e.g. DateTime) render in the table and grid
+  // layouts too.
+  const schema = state.toolbar.collectionFieldsSource?.schemaSource;
+  const layouts = <OpenLayoutSwitch {...props} />;
+  return <SchemaFieldsProvider schema={schema}>{layouts}</SchemaFieldsProvider>;
+}
+
+export const LayoutSwitch = observer(_LayoutSwitch) as typeof _LayoutSwitch;

package/src/schema/Table.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import type { FiltersMap } from '@wix/bex-core';
+import { SchemaFieldsProvider } from '../providers/SchemaFieldsProvider';
+import { Table as OpenTable, type TableProps } from '../components/Table/Table';
+import type { TableColumn } from '../model';
+import type { TableState } from '../state';
+
+/** Table props for a source-driven table: the source supplies the field
+ *  columns and attaches its own fields management. `columns` is optional
+ *  (extras only); the fields-management props are always on and not
+ *  configurable, and there is no `fieldsSource`/`dataExtension`. */
+export type SchemaTableProps<T, F extends FiltersMap> = Omit<
+  TableProps<T, F>,
+  | 'state'
+  | 'columns'
+  | 'fieldsSource'
+  | 'dataExtension'
+  | 'showFieldTypeIcons'
+  | 'showAddFieldButton'
+> & {
+  state: TableState<T, F>;
+  /** Columns beyond the source's fields (e.g. an action column). Default: none. */
+  columns?: TableColumn<T>[];
+};
+
+function _Table<T, F extends FiltersMap>(props: SchemaTableProps<T, F>) {
+  const { columns, ...rest } = props;
+  // A source's field-typed cells (dates, media, references) render
+  // patterns-fields components, which read the container from context.
+  const schema = props.state.toolbar.collectionFieldsSource?.schemaSource;
+  const table = (
+    <OpenTable
+      {...rest}
+      columns={columns ?? []}
+      showFieldTypeIcons
+      showAddFieldButton
+    />
+  );
+  return <SchemaFieldsProvider schema={schema}>{table}</SchemaFieldsProvider>;
+}
+
+export const Table = observer(_Table) as typeof _Table;