@wix/patterns 1.427.0 → 1.431.0

package/src/components/EditableTable/cellTypes/number/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3562447553";
+var _namespace_ = "Edit3691147245";
 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":"Edit3562447553__root","numberInput":"Edit3562447553__numberInput"};
+export var classes = {"root":"Edit3691147245__root","numberInput":"Edit3691147245__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/number/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2971389096";
+var _namespace_ = "View3559157400";
 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":"View2971389096__root","textView":"View2971389096__textView"};
+export var classes = {"root":"View3559157400__root","textView":"View3559157400__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/object/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1195161761";
+var _namespace_ = "Edit2050020221";
 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":"Edit1195161761__root","jsonInput":"Edit1195161761__jsonInput"};
+export var classes = {"root":"Edit2050020221__root","jsonInput":"Edit2050020221__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/object/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View546190198";
+var _namespace_ = "View2117584149";
 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":"View546190198__root"};
+export var classes = {"root":"View2117584149__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/reference/ReferenceEditWrapper.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { CellEditWrapperProps } from '../../types';
 import type { ReferenceTypeConfig } from './types';
-import { useOpenCollectionOverlay } from '../../useOpenCollectionOverlay';
+import { useOpenCollectionOverlay } from '../../../../hooks/useOpenCollectionOverlay';
 import { OpenReferencedCollectionContext } from './openCollectionContext';
 
 /**

package/src/components/EditableTable/cellTypes/reference/openCollectionContext.ts

@@ -1,5 +1,5 @@
 import { createContext, useContext } from 'react';
-import type { OpenCollectionOverlay } from '../../useOpenCollectionOverlay';
+import type { OpenCollectionOverlay } from '../../../../hooks/useOpenCollectionOverlay';
 
 /**
  * Opener that navigates to the referenced collection as an overlay, or

package/src/components/EditableTable/cellTypes/select/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2830007467";
+var _namespace_ = "Edit526154172";
 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":"Edit2830007467__root","selectInput":"Edit2830007467__selectInput"};
+export var classes = {"root":"Edit526154172__root","selectInput":"Edit526154172__selectInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/text/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit908820166";
+var _namespace_ = "Edit2692897257";
 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":"Edit908820166__root","editWrapper":"Edit908820166__editWrapper","inputArea":"Edit908820166__inputArea"};
+export var classes = {"root":"Edit2692897257__root","editWrapper":"Edit2692897257__editWrapper","inputArea":"Edit2692897257__inputArea"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/text/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View458449955";
+var _namespace_ = "View231089227";
 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":"View458449955__root"};
+export var classes = {"root":"View231089227__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/time/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1673498444";
+var _namespace_ = "Edit4179666538";
 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":"Edit1673498444__root","wrapper":"Edit1673498444__wrapper","overlay":"Edit1673498444__overlay"};
+export var classes = {"root":"Edit4179666538__root","wrapper":"Edit4179666538__wrapper","overlay":"Edit4179666538__overlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit927054641";
+var _namespace_ = "Edit2536249540";
 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":"Edit927054641__root","urlInput":"Edit927054641__urlInput"};
+export var classes = {"root":"Edit2536249540__root","urlInput":"Edit2536249540__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2690356286";
+var _namespace_ = "View3597373085";
 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":"View2690356286__root","textView":"View2690356286__textView","urlText":"View2690356286__urlText","suffix":"View2690356286__suffix"};
+export var classes = {"root":"View3597373085__root","textView":"View3597373085__textView","urlText":"View3597373085__urlText","suffix":"View3597373085__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/index.ts

@@ -1,3 +1,3 @@
 export * from './EditableTable';
 export { defineCellType } from './types';
-export type { CellViewProps, CellEditProps } from './types';
+export type { CellViewProps, CellEditProps, EditableCellConfig } from './types';

package/src/components/EditableTable/types.ts

@@ -1,100 +1,32 @@
-import type { Translate } from '@wix/bex-core';
-import type { CellType, ValidationRule } from '../../state/EditableTable/types';
+import type {
+  EditableCellConfig,
+  Translate,
+  ValidationRule,
+} from '@wix/bex-core';
+import type { CellType } from '../../state/EditableTable/types';
 
-export interface CellViewProps<V> {
-  value: V;
-  typeConfig?: unknown;
-  validation?: ValidationRule[];
-  /** Stable id of the column. Cell components can use it to derive unique DOM ids. */
-  columnId: string;
-  /** Stable key of the row. Cell components can use it to derive unique DOM ids. */
-  rowKey: string;
-}
-
-export interface Focusable {
-  focus: () => void;
-}
-
-export type EditTrigger =
-  | { kind: 'type'; key: string }
-  | 'enter'
-  | 'click'
-  | 'doubleClick';
-
-export interface CellEditProps<V> {
-  value: V;
-  onChange: (value: V) => void;
-  onCommit: () => void;
-  onCancel: () => void;
-  /**
-   * Signals that the cell is starting an editing operation that will move focus
-   * outside the table (e.g., opening a media manager or a modal). Calling this
-   * sets isEditing=true so useClearFocusOnBlur does not clear cell focus while
-   * the external UI is open. Pair with onCommit (after the operation succeeds)
-   * or onCancel (if the user dismisses without a value change).
-   */
-  onStartEdit?: () => void;
-  /** Ref to the focusable input element. Used for type-to-edit (focusing the input when user starts typing on a focused cell). */
-  inputRef?: React.MutableRefObject<Focusable | undefined | null>;
-  typeConfig?: unknown;
-  /** How edit mode was triggered. Edit components can use this to customize behavior (e.g., date picker auto-opens on 'type'). */
-  editTrigger?: EditTrigger | null;
-  /** Column-level validation rules. Edit components can derive UI behavior (e.g., maxLength blocking/tooltip) from these. */
-  validation?: ValidationRule[];
-  /** Stable id of the column. Cell components can use it to derive unique DOM ids. */
-  columnId: string;
-  /** Stable key of the row. Cell components can use it to derive unique DOM ids. */
-  rowKey: string;
-}
-
-/**
- * Props passed to a cell type's optional `EditWrapper`. EditableCell mounts the
- * wrapper around the cell content and keeps it mounted across the edit↔view
- * transition, so the wrapper can own behavior that must outlive the inline
- * editor (e.g. a reference cell navigating to an overlay and refreshing on
- * return). The wrapper hands anything the editor needs down via its own context.
- */
-export interface CellEditWrapperProps {
-  /** The column's typeConfig (same value handed to the cell's Edit/View). */
-  typeConfig?: unknown;
-  /** Stable id of the column. */
-  columnId: string;
-  /** Stable key of the row. */
-  rowKey: string;
-  /** The cell content (the Edit or View component) to render inside the wrapper. */
-  children: React.ReactNode;
-}
+export type {
+  CellViewProps,
+  CellEditProps,
+  CellEditWrapperProps,
+  EditableCellConfig,
+  Focusable,
+  EditTrigger,
+} from '@wix/bex-core';
 
 /**
- * Type-safe definition for a cell type. Non-value-typed props are derived
- * directly from CellType via Pick so new additions propagate automatically.
+ * Type-safe definition for a cell type: the shared editable-cell contract plus
+ * the registry key and the registry-level validate (built-in cell types
+ * validate here; custom field types validate through their definition's
+ * `value.validate`).
  */
-export type CellTypeDefinition<V> = Pick<
-  CellType,
-  | 'editable'
-  | 'clearable'
-  | 'showEditWhenFocused'
-  | 'nativeTypeToEdit'
-  | 'EditWrapper'
-  | 'growable'
-> & {
+export type CellTypeDefinition<V> = EditableCellConfig<V> & {
   type: CellType['type'];
-  ViewComponent: React.ComponentType<CellViewProps<V>>;
-  EditComponent?: React.ComponentType<CellEditProps<V>>;
-  serialize?: (value: V) => string;
-  deserialize?: (raw: string) => V;
   validate?: (
     value: V,
     rules?: ValidationRule[],
     translate?: Translate,
   ) => string | null;
-  toggleValue?: (value: V) => V;
-  editOnClick?: (value: V) => boolean;
-  onTypeToEdit?: (params: {
-    key: string;
-    validation?: ValidationRule[];
-  }) => { value?: V } | undefined;
-  normalizeOnCommit?: (value: V) => V;
 };
 
 /** Type-safe factory for defining cell types. V ensures all value-typed fields are consistent. */

package/src/components/EmptyState/CollectionNoResultsState.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useMultiCollectionSupportContext } from '../MultiCollectionSupportProvider';
 import { TextButton, TextButtonProps } from '@wix/design-system';
-import { Revert } from '@wix/wix-ui-icons-common';
+import { Revert } from '@wix/wix-ui-icons-common/lazy';
 import {
   useWixPatternsContainer,
   useCollectionContext,

package/src/components/EmptyState/NewItemButton.tsx

@@ -1,7 +1,7 @@
 import React, { MouseEvent as ReactMouseEvent } from 'react';
 import { useCollectionContext } from '@wix/bex-core/react';
 import { TextButton } from '@wix/design-system';
-import { Add } from '@wix/wix-ui-icons-common';
+import { Add } from '@wix/wix-ui-icons-common/lazy';
 
 export interface NewItemButtonProps {
   onClick?: (e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;

package/src/components/EntityPage/EntityPagePlain.st.css.ts

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

package/src/components/EntityPageFields/EntityPageField.tsx

@@ -0,0 +1,160 @@
+import React, { Suspense } from 'react';
+import { Box, Text } from '@wix/design-system';
+import type { Field, PatternsFieldType } from '@wix/bex-core';
+import type { Control } from '@wix/bex-core/form';
+import { EntityPageReferenceField } from './EntityPageReferenceField';
+import {
+  FormShortText,
+  FormLongText,
+  FormNumber,
+  FormCheckbox,
+  FormDateInput,
+  FormDateTime,
+  FormTime,
+  FormUrl,
+  FormEmail,
+  FormColor,
+  FormImageInput,
+  FormVideo,
+  FormArray,
+  FormObject,
+  FormAddress,
+} from '@wix/patterns-fields';
+
+// Heavy renderers pull large editors (Ricos, draft-js) and media SDKs
+// (@wix/media). Loading them lazily keeps that weight out of the @wix/patterns
+// main bundle — it moves into an async chunk fetched only when an entity page
+// first renders a field of that type. @wix/patterns-fields is side-effect-free,
+// so a dynamic import of one heavy export splits into its own chunk even though
+// the light renderers above are imported statically from the same package.
+// FormDocument, FormMediaGallery, and FormRichContent are not on the package
+// main entry — they ship from their own subpaths. Mirrors the FieldCell.tsx
+// pattern.
+function lazyField<P extends object>(
+  load: () => Promise<{ default: React.ComponentType<P> }>,
+) {
+  const Lazy = React.lazy(load);
+  return function LazyField(props: P) {
+    return (
+      <Suspense fallback={null}>
+        <Lazy {...props} />
+      </Suspense>
+    );
+  };
+}
+
+const FormAudio = lazyField(async () => ({
+  default: (await import('@wix/patterns-fields')).FormAudio,
+}));
+const FormRichText = lazyField(async () => ({
+  default: (await import('@wix/patterns-fields')).FormRichText,
+}));
+const FormMultiDocument = lazyField(async () => ({
+  default: (await import('@wix/patterns-fields')).FormMultiDocument,
+}));
+const FormDocument = lazyField(async () => ({
+  default: (await import('@wix/patterns-fields/form-document-field'))
+    .FormDocument,
+}));
+const FormMediaGallery = lazyField(async () => ({
+  default: (await import('@wix/patterns-fields/form-media-gallery-field'))
+    .FormMediaGallery,
+}));
+const FormRichContent = lazyField(async () => ({
+  default: (await import('@wix/patterns-fields/form-rich-content-input'))
+    .FormRichContent,
+}));
+
+// REFERENCE / MULTI_REFERENCE are not here — they need referenced-collection
+// data, so EntityPageField routes them through EntityPageReferenceField instead
+// of this dispatcher.
+const FIELD_INPUTS: Partial<
+  Record<PatternsFieldType, React.ComponentType<any>>
+> = {
+  SHORT_TEXT: FormShortText,
+  UNKNOWN: FormShortText,
+  LONG_TEXT: FormLongText,
+  NUMBER: FormNumber,
+  BOOLEAN: FormCheckbox,
+  DATE: FormDateInput,
+  DATETIME: FormDateTime,
+  TIME: FormTime,
+  URL: FormUrl,
+  EMAIL: FormEmail,
+  COLOR: FormColor,
+  IMAGE: FormImageInput,
+  VIDEO: FormVideo,
+  AUDIO: FormAudio,
+  MEDIA_GALLERY: FormMediaGallery,
+  RICH_TEXT: FormRichText,
+  RICH_CONTENT: FormRichContent,
+  DOCUMENT: FormDocument,
+  MULTI_DOCUMENT: FormMultiDocument,
+  ARRAY: FormArray,
+  OBJECT: FormObject,
+  ADDRESS: FormAddress,
+};
+
+export interface EntityPageFieldProps {
+  field: Field;
+  formControl: Control<any>;
+  /** The entity, used by each renderer to seed its form default value. */
+  data: Record<string, unknown>;
+}
+
+// Each renderer owns its own react-hook-form wiring (useController keyed on
+// field.id), so this only needs to pick the renderer and pass the field.
+export function EntityPageField({
+  field,
+  formControl,
+  data,
+}: EntityPageFieldProps) {
+  // Reference fields need referenced-collection data, so they go through a
+  // wrapper (resolves the referenced source, fetches items) rather than the
+  // uniform dispatcher below.
+  const isReference =
+    field.type === 'REFERENCE' || field.type === 'MULTI_REFERENCE';
+  const FieldInput = FIELD_INPUTS[field.type];
+
+  if (!isReference && !FieldInput) {
+    // Every PatternsFieldType now maps to a renderer (UNKNOWN falls back to
+    // text), so an unmapped type means the field carries a type outside the
+    // contract. Skip it, but warn — otherwise it vanishes with no trace.
+    // eslint-disable-next-line no-console
+    console.warn(
+      `[EntityPageField] no renderer for field "${field.id}" of type "${field.type}"; skipping.`,
+    );
+    return null;
+  }
+
+  const ScalarInput = FieldInput as React.ComponentType<any>;
+  const inner = isReference ? (
+    <EntityPageReferenceField
+      field={field}
+      formControl={formControl}
+      data={data}
+    />
+  ) : (
+    <ScalarInput
+      field={field}
+      formControl={formControl}
+      data={data}
+      dataHook={`entity-page-field-${field.id}`}
+    />
+  );
+
+  return (
+    <Box direction="vertical" gap="SP1" width="100%">
+      {inner}
+      {field.helpText && (
+        <Text
+          size="small"
+          secondary
+          dataHook={`entity-page-field-${field.id}-help-text`}
+        >
+          {field.helpText}
+        </Text>
+      )}
+    </Box>
+  );
+}

package/src/components/EntityPageFields/EntityPageFields.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import {
+  Box,
+  SkeletonGroup,
+  SkeletonLine,
+  SkeletonRectangle,
+} from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import { usePatternsCmsFieldsContainer } from '@wix/patterns-fields/providers';
+import { useEntityPageContext } from '../../providers';
+import { resolveEntityPageFields } from '../../state/EntityPage/resolveEntityPageFields';
+import { EntityPageField } from './EntityPageField';
+
+export interface EntityPageFieldsProps {
+  dataHook?: string;
+  /** Field ids to render, in order. Omitted ⇒ all schema fields in schema order. */
+  fieldIds?: string[];
+}
+
+/** The form inputs for the page's schema fields. Render inside the `EntityPage`
+ *  from `@wix/patterns/schema` — it provides the fields container these inputs
+ *  are built with. */
+function _EntityPageFields({
+  dataHook = 'entity-page-fields',
+  fieldIds,
+}: EntityPageFieldsProps) {
+  const state = useEntityPageContext();
+  const fieldsContainer = usePatternsCmsFieldsContainer();
+  const { schema } = state;
+
+  // Without the container the field renderers below fail deep inside
+  // @wix/patterns-fields (a missing container reads as a missing translations
+  // service), so say what's actually wrong instead.
+  if (!fieldsContainer) {
+    throw new Error(
+      'EntityPageFields must render inside the EntityPage from @wix/patterns/schema, which provides the fields container.',
+    );
+  }
+
+  // The schema loads with the entity in EntityPageState.init(). Show a
+  // placeholder until it resolves so the card has content instead of collapsing
+  // to nothing while the page fetches.
+  if (!schema || state.initTask.status.isLoading) {
+    return <FieldsSkeleton count={fieldIds?.length} />;
+  }
+
+  const fields = resolveEntityPageFields(
+    schema.fields,
+    schema.idField,
+    fieldIds,
+  );
+  const data = (state.entity ?? {}) as Record<string, unknown>;
+
+  return (
+    <Box direction="vertical" gap="SP4" width="100%" dataHook={dataHook}>
+      {fields.map((field) => (
+        <EntityPageField
+          key={field.id}
+          field={field}
+          formControl={state.form.control}
+          data={data}
+        />
+      ))}
+    </Box>
+  );
+}
+
+// Before the schema loads we don't know the real field count, so default to a
+// few rows; a known fieldIds length lets us match it exactly.
+function FieldsSkeleton({ count }: { count?: number }) {
+  const rows = Math.max(1, count ?? 4);
+  return (
+    <SkeletonGroup dataHook="entity-page-fields-skeleton">
+      <Box direction="vertical" gap="SP4" width="100%">
+        {Array.from({ length: rows }, (_, i) => (
+          <Box key={i} direction="vertical" gap="SP1" width="100%">
+            <SkeletonLine width="30%" />
+            <SkeletonRectangle height="36px" />
+          </Box>
+        ))}
+      </Box>
+    </SkeletonGroup>
+  );
+}
+
+export const EntityPageFields = observer(_EntityPageFields);

package/src/components/EntityPageFields/EntityPageFields.uni.driver.ts

@@ -0,0 +1,12 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../unidriver';
+
+export default (base: UniDriver) => {
+  return {
+    ...baseUniDriverFactory(base),
+
+    /** Whether a field with the given id is rendered. */
+    hasField: (fieldId: string) =>
+      base.$(`[data-hook="entity-page-field-${fieldId}"]`).exists(),
+  };
+};