@wix/patterns 1.430.0 → 1.431.0

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.tsx

@@ -12,7 +12,8 @@ import {
   ToastContainer,
 } from '@wix/design-system';
 import { useReachBottom } from '../../../../hooks/useReachBottom';
-import { Add } from '@wix/wix-ui-icons-common';
+import { useBmHarmonyTheme } from '../../../../hooks/useBmHarmonyTheme';
+import { Add } from '@wix/wix-ui-icons-common/lazy';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { TagsListItem } from './List/TagsListItem';
 import { st, classes } from './ManageTagsModal.st.css.js';
@@ -31,6 +32,7 @@ export interface ManageTagsModalProps {
 
 const ManageTagsModalContent = observer(({ state }: ManageTagsModalProps) => {
   const { translate: t } = useWixPatternsContainer();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
   const closeModal = useCallback(() => {
     state.closeManageTagsModal();
   }, [state]);
@@ -78,9 +80,9 @@ const ManageTagsModalContent = observer(({ state }: ManageTagsModalProps) => {
   return (
     <Box width={510}>
       <CustomModalLayout
-        className={st(classes.root)}
+        className={st(classes.root, { harmony: isBmHarmonyTheme })}
         overflowY="visible"
-        showFooterDivider
+        showFooterDivider={!isBmHarmonyTheme}
         removeContentPadding
         title={t('cairo.tags.manageTags.modal.title', {
           EntityName: state.entityTypeName,
@@ -94,6 +96,7 @@ const ManageTagsModalContent = observer(({ state }: ManageTagsModalProps) => {
               prefixIcon={<Add />}
               onClick={handleCreateClick}
               disabled={state.isShowingNewTagListItem}
+              skin={isBmHarmonyTheme ? 'dark' : undefined}
             >
               {t('cairo.tags.manageTags.modal.add.CTA')}
             </TextButton>
@@ -101,6 +104,7 @@ const ManageTagsModalContent = observer(({ state }: ManageTagsModalProps) => {
         }
         primaryButtonText={t('cairo.tags.manageTags.modal.close.CTA')}
         primaryButtonOnClick={closeModal}
+        primaryButtonProps={isBmHarmonyTheme ? { skin: 'dark' } : undefined}
         onCloseButtonClick={closeModal}
         dataHook="manage-tags-modal-layout"
       >
@@ -114,10 +118,11 @@ const ManageTagsModalContent = observer(({ state }: ManageTagsModalProps) => {
               />
             )}
           </ToastContainer>
-          <Box direction="vertical" gap="SP2">
-            <Box padding="0 SP4">
+          {isBmHarmonyTheme ? (
+            <Box padding="0 SP6">
               <Search
                 autoFocus
+                border="standard"
                 dataHook="manage-tags-modal-search"
                 onChange={handleSearchChange}
                 value={state.searchValue}
@@ -128,8 +133,24 @@ const ManageTagsModalContent = observer(({ state }: ManageTagsModalProps) => {
                 onClear={handleSearchClear}
               />
             </Box>
-            <Divider />
-          </Box>
+          ) : (
+            <Box direction="vertical" gap="SP2">
+              <Box padding="0 SP4">
+                <Search
+                  autoFocus
+                  dataHook="manage-tags-modal-search"
+                  onChange={handleSearchChange}
+                  value={state.searchValue}
+                  placeholder={t(
+                    'cairo.tags.manageTags.modal.search.placeholder',
+                  )}
+                  onEnterPressed={handleCreateTagFromSearch}
+                  onClear={handleSearchClear}
+                />
+              </Box>
+              <Divider />
+            </Box>
+          )}
           <Box
             ref={shouldAllowTagsPagination ? scrollRef : undefined}
             direction="vertical"
@@ -138,6 +159,7 @@ const ManageTagsModalContent = observer(({ state }: ManageTagsModalProps) => {
             dataHook="manage-tags-modal-tags-list"
             overflowY="auto"
             paddingBottom="SP1"
+            marginTop={isBmHarmonyTheme ? 'SP4' : undefined}
           >
             <ScrollableContent
               overflowY={!shouldAllowTagsPagination}

package/src/components/Tags/ManageTags/ManageTagsModal/TagItemEditable.tsx

@@ -4,13 +4,17 @@ import {
   ListItemEditable,
   ListItemEditableSize,
   ListItemEditableMargins,
-  ListItemEditableProps,
   FormField,
   Input,
+  IconButton,
+  Box,
+  Tooltip,
 } from '@wix/design-system';
+import { ConfirmSmall, DismissSmall } from '@wix/wix-ui-icons-common/lazy';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useBmHarmonyTheme } from '../../../../hooks/useBmHarmonyTheme';
 
-export interface TagItemEditableProps extends Partial<ListItemEditableProps> {
+export interface TagItemEditableProps {
   tagName?: string;
   isLastTag: boolean;
   errorMessage: string | null;
@@ -28,9 +32,81 @@ export const TagItemEditable = ({
   maxLength,
 }: TagItemEditableProps) => {
   const { translate: t } = useWixPatternsContainer();
-  const [currentValueLength, setCurrentValueLength] = useState(
-    tagName?.length ?? 0,
-  );
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+  const [value, setValue] = useState(tagName ?? '');
+
+  if (isBmHarmonyTheme) {
+    return (
+      <TableListItem
+        options={[
+          {
+            value: (
+              <FormField
+                dataHook="manage-tags-modal-tag-form-field"
+                stretchContent
+                status={errorMessage ? 'error' : undefined}
+                statusMessage={errorMessage}
+              >
+                <Input
+                  dataHook="manage-tags-modal-tag-editable"
+                  value={value}
+                  onChange={(e) => setValue(e.target.value)}
+                  onEnterPressed={() => onApprove(value)}
+                  onEscapePressed={onCancel}
+                  placeholder={t(
+                    'cairo.tags.manageTags.modal.list.input.placeholder',
+                  )}
+                  autoFocus
+                  size="small"
+                  suffix={
+                    <Input.Affix>
+                      {`${value.length} / ${maxLength}`}
+                    </Input.Affix>
+                  }
+                />
+              </FormField>
+            ),
+            width: '1fr',
+          },
+          {
+            value: (
+              <Box gap="2px">
+                <Tooltip
+                  content={t(
+                    'cairo.tags.manageTags.modal.list.input.cancel.CTA',
+                  )}
+                >
+                  <IconButton
+                    dataHook="manage-tags-modal-tag-action-cancel"
+                    size="small"
+                    priority="tertiary"
+                    onClick={onCancel}
+                  >
+                    <DismissSmall />
+                  </IconButton>
+                </Tooltip>
+                <Tooltip
+                  content={t('cairo.tags.manageTags.modal.list.input.save.CTA')}
+                >
+                  <IconButton
+                    dataHook="manage-tags-modal-tag-action-approve"
+                    size="small"
+                    priority="tertiary"
+                    onClick={() => onApprove(value)}
+                  >
+                    <ConfirmSmall />
+                  </IconButton>
+                </Tooltip>
+              </Box>
+            ),
+            width: 'max-content',
+            align: 'right',
+          },
+        ]}
+        verticalPadding="tiny"
+      />
+    );
+  }
 
   return (
     <TableListItem
@@ -48,7 +124,7 @@ export const TagItemEditable = ({
                 onEnterPressed={(e: React.KeyboardEvent<HTMLInputElement>) => {
                   onApprove(e.currentTarget.value);
                 }}
-                onChange={(e) => setCurrentValueLength(e.target.value.length)}
+                onChange={(e) => setValue(e.target.value)}
                 onApprove={onApprove}
                 onCancel={onCancel}
                 placeholder={t(
@@ -65,9 +141,7 @@ export const TagItemEditable = ({
                 size={'small' as keyof typeof ListItemEditableSize}
                 margins={'none' as ListItemEditableMargins}
                 suffix={
-                  <Input.Affix>
-                    {`${currentValueLength} / ${maxLength}`}
-                  </Input.Affix>
+                  <Input.Affix>{`${value.length} / ${maxLength}`}</Input.Affix>
                 }
               />
             </FormField>

package/src/components/Tags/manageTagsPageAction.tsx

@@ -1,6 +1,6 @@
 import { CollectionPageState, WixPatternsContainer } from '@wix/bex-core';
 import { MoreActionsItem } from '../MoreActions';
-import { TagSmall } from '@wix/wix-ui-icons-common';
+import { TagSmall } from '@wix/wix-ui-icons-common/lazy';
 import React from 'react';
 
 export function manageTagsPageAction({

package/src/components/TagsAssignButton/TagsAssignButton.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useRef } from 'react';
 import { Box, Button } from '@wix/design-system';
-import { TagSmall } from '@wix/wix-ui-icons-common';
+import { TagSmall } from '@wix/wix-ui-icons-common/lazy';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { BulkAssignTagsPopover } from '../Tags/BulkAssignTagsPopover';

package/src/components/TagsWidget/TagsWidget.tsx

@@ -16,7 +16,7 @@ import { TagsWidgetContextProvider } from '../TagsWidgetContext';
 import { TagsWidgetContent } from './TagsWidgetContent';
 import { Tags, OnSubmitTagsFuncType, TagsWidgetState } from '@wix/bex-core';
 import { useWidgetPageStatus } from '../useWidgetPageStatus';
-import { Refresh } from '@wix/wix-ui-icons-common';
+import { Refresh } from '@wix/wix-ui-icons-common/lazy';
 import { useTagsWidgetInternal } from '../../hooks/useTagsWidget';
 
 export type TagsWidgetProps = {

package/src/components/TagsWidget/TagsWidgetContent.tsx

@@ -12,7 +12,7 @@ import {
   Tag,
   Text,
 } from '@wix/design-system';
-import { Add as AddIcon } from '@wix/wix-ui-icons-common';
+import { Add as AddIcon } from '@wix/wix-ui-icons-common/lazy';
 import { TagsWidgetBaseProps } from './TagsWidget';
 import { runInAction } from 'mobx';
 import {

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common843717652";
+var _namespace_ = "common2729451634";
 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":"common843717652__root","column":"common843717652__column","fullHeight":"common843717652__fullHeight"};
+export var classes = {"root":"common2729451634__root","column":"common2729451634__column","fullHeight":"common2729451634__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/deleteSecondaryAction/deleteSecondaryAction.tsx

@@ -1,4 +1,4 @@
-import { Delete } from '@wix/wix-ui-icons-common';
+import { Delete } from '@wix/wix-ui-icons-common/lazy';
 import React from 'react';
 import {
   CollectionOptimisticActions,

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;