@wix/patterns 1.446.0 → 1.448.0

package/src/components/EditableTable/cellTypes/date/index.ts

@@ -25,13 +25,13 @@ export const dateCellType = defineCellType<Date | string | null>({
     }
     return date;
   },
-  validate: (value) => {
+  validate: (value, _rules, translate) => {
     if (!value) {
       return null;
     }
     const date = value instanceof Date ? value : new Date(value);
     if (isNaN(date.getTime())) {
-      return 'Invalid date';
+      return translate!('cairo.editableTable.date.validation.invalid');
     }
     return null;
   },

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3892105212";
+var _namespace_ = "Edit2657121955";
 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":"Edit3892105212__root","half":"Edit3892105212__half","dateHalf":"Edit3892105212__dateHalf Edit3892105212__half","timeHalf":"Edit3892105212__timeHalf Edit3892105212__half","divider":"Edit3892105212__divider","passiveText":"Edit3892105212__passiveText","placeholderText":"Edit3892105212__placeholderText Edit3892105212__passiveText"};
+export var classes = {"root":"Edit2657121955__root","half":"Edit2657121955__half","dateHalf":"Edit2657121955__dateHalf Edit2657121955__half","timeHalf":"Edit2657121955__timeHalf Edit2657121955__half","divider":"Edit2657121955__divider","passiveText":"Edit2657121955__passiveText","placeholderText":"Edit2657121955__placeholderText Edit2657121955__passiveText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2182751378";
+var _namespace_ = "View3750587915";
 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":"View2182751378__root","leaf":"View2182751378__leaf","datePart":"View2182751378__datePart View2182751378__leaf","timePart":"View2182751378__timePart View2182751378__leaf","placeholder":"View2182751378__placeholder View2182751378__leaf","divider":"View2182751378__divider"};
+export var classes = {"root":"View3750587915__root","leaf":"View3750587915__leaf","datePart":"View3750587915__datePart View3750587915__leaf","timePart":"View3750587915__timePart View3750587915__leaf","placeholder":"View3750587915__placeholder View3750587915__leaf","divider":"View3750587915__divider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/datetime/index.ts

@@ -35,11 +35,13 @@ export const dateTimeCellType = defineCellType<Date | null>({
     }
     return date;
   },
-  validate: (value) => {
+  validate: (value, _rules, translate) => {
     if (value == null) {
       return null;
     }
-    return toValidDate(value) ? null : 'Invalid date/time';
+    return toValidDate(value)
+      ? null
+      : translate!('cairo.editableTable.dateTime.validation.invalid');
   },
   editable: true,
   clearable: true,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit251951507";
+var _namespace_ = "Edit3348827758";
 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":"Edit251951507__root","emailInput":"Edit251951507__emailInput"};
+export var classes = {"root":"Edit3348827758__root","emailInput":"Edit3348827758__emailInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/EditableTable/cellTypes/email/index.ts

@@ -11,9 +11,9 @@ export const emailCellType = defineCellType<string>({
   EditComponent: EmailEdit,
   serialize: (value) => value ?? '',
   deserialize: (raw) => raw,
-  validate: (value) => {
+  validate: (value, _rules, translate) => {
     if (value && !emailValidation.isValid(value)) {
-      return 'Invalid email format';
+      return translate!('cairo.editableTable.email.validation.invalid');
     }
     return null;
   },

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit4293594728";
+var _namespace_ = "Edit3757480630";
 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":"Edit4293594728__root","numberInput":"Edit4293594728__numberInput"};
+export var classes = {"root":"Edit3757480630__root","numberInput":"Edit3757480630__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_ = "View1028679298";
+var _namespace_ = "View1096347571";
 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":"View1028679298__root","textView":"View1028679298__textView"};
+export var classes = {"root":"View1096347571__root","textView":"View1096347571__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/number/index.ts

@@ -19,9 +19,9 @@ export const numberCellType = defineCellType<number | null>({
     }
     return parsed;
   },
-  validate: (value) => {
+  validate: (value, _rules, translate) => {
     if (value != null && typeof value !== 'number') {
-      return 'Value must be a number';
+      return translate!('cairo.editableTable.number.validation.invalid');
     }
     return null;
   },

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1558508534";
+var _namespace_ = "Edit3974759951";
 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":"Edit1558508534__root","jsonInput":"Edit1558508534__jsonInput"};
+export var classes = {"root":"Edit3974759951__root","jsonInput":"Edit3974759951__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_ = "View1629659411";
+var _namespace_ = "View1241037216";
 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":"View1629659411__root"};
+export var classes = {"root":"View1241037216__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1370268481";
+var _namespace_ = "Edit302364771";
 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":"Edit1370268481__root","selectInput":"Edit1370268481__selectInput"};
+export var classes = {"root":"Edit302364771__root","selectInput":"Edit302364771__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_ = "Edit2457973312";
+var _namespace_ = "Edit4286334146";
 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":"Edit2457973312__root","editWrapper":"Edit2457973312__editWrapper","inputArea":"Edit2457973312__inputArea"};
+export var classes = {"root":"Edit4286334146__root","editWrapper":"Edit4286334146__editWrapper","inputArea":"Edit4286334146__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_ = "View885644843";
+var _namespace_ = "View1701286500";
 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":"View885644843__root"};
+export var classes = {"root":"View1701286500__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_ = "Edit871404938";
+var _namespace_ = "Edit836037362";
 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":"Edit871404938__root","wrapper":"Edit871404938__wrapper","overlay":"Edit871404938__overlay"};
+export var classes = {"root":"Edit836037362__root","wrapper":"Edit836037362__wrapper","overlay":"Edit836037362__overlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/time/index.ts

@@ -28,11 +28,13 @@ export const timeCellType = defineCellType<Time | null>({
     }
     return raw;
   },
-  validate: (value) => {
+  validate: (value, _rules, translate) => {
     if (!value) {
       return null;
     }
-    return TIME_REGEXP.test(value) ? null : 'Invalid time';
+    return TIME_REGEXP.test(value)
+      ? null
+      : translate!('cairo.editableTable.time.validation.invalid');
   },
   editable: true,
   clearable: true,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2546142657";
+var _namespace_ = "Edit1491394925";
 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":"Edit2546142657__root","urlInput":"Edit2546142657__urlInput"};
+export var classes = {"root":"Edit1491394925__root","urlInput":"Edit1491394925__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_ = "View3403835407";
+var _namespace_ = "View3373471404";
 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":"View3403835407__root","textView":"View3403835407__textView","urlText":"View3403835407__urlText","suffix":"View3403835407__suffix"};
+export var classes = {"root":"View3373471404__root","textView":"View3373471404__textView","urlText":"View3373471404__urlText","suffix":"View3373471404__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/index.ts

@@ -28,9 +28,9 @@ export const urlCellType = defineCellType<string>({
   EditComponent: UrlEdit,
   serialize: (value) => value ?? '',
   deserialize: (raw) => raw,
-  validate: (value) => {
+  validate: (value, _rules, translate) => {
     if (value && !URL_PATTERN.test(value)) {
-      return 'Invalid URL format';
+      return translate!('cairo.editableTable.url.validation.invalid');
     }
     return null;
   },

package/src/components/EmptyState/EmptyStateBase.st.css.ts

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

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

@@ -2,6 +2,8 @@ import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import { baseUniDriverFactory } from '../../unidriver';
 import {
   BadgeUniDriver,
+  IconButtonUniDriver,
+  MessageModalLayoutUniDriver,
   PageHeaderUniDriver,
 } from '@wix/design-system/dist/testkit/unidriver';
 import { FormPageContentUniDriver } from '../FormPageContent/FormPageContent.uni.driver';
@@ -49,6 +51,17 @@ export const EntityPageUniDriver = (base: UniDriver, body: UniDriver) => {
     /** Returns badge driver at index */
     getBadgeAt,
 
+    getDeleteActionButton: () =>
+      IconButtonUniDriver(
+        base.$(`[data-hook="entity-page-delete-action-button"]`),
+        body,
+      ),
+    getDeleteConfirmModal: () =>
+      MessageModalLayoutUniDriver(
+        body.$(`[data-hook="entity-page-delete-confirm-modal"]`),
+        body,
+      ),
+
     ...formPageContentUniDriver,
     ...baseUniDriverFactory(base),
   };

package/src/components/EntityPage/EntityPageActionsBar.tsx

@@ -1,23 +1,107 @@
-import React from 'react';
+import React, { cloneElement } from 'react';
+import { Delete } from '@wix/wix-ui-icons-common/lazy';
+import { ConditionalModalState } from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useEntityPageContext } from '../../providers';
 import { observer } from 'mobx-react-lite';
-import { MoreActionsElement } from '../MoreActions';
+import type {
+  MoreActionsElement,
+  MoreActionsItem,
+  MoreActionsProps,
+} from '../MoreActions';
+import type { MoreActionsPropItem } from '../MoreActions/MoreActionsBase';
 import { FormPageActionsBar } from '../FormPage';
 
+const LazyEntityPageDeleteAction = React.lazy(() =>
+  import('./EntityPageDeleteAction').then((module) => ({
+    default: module.EntityPageDeleteAction,
+  })),
+);
+
+const LazyEntityPageDeleteConfirmModal = React.lazy(() =>
+  import('./EntityPageDeleteConfirmModal').then((module) => ({
+    default: module.EntityPageDeleteConfirmModal,
+  })),
+);
+
 interface EntityPageActionsBarProps {
   moreActions?: MoreActionsElement;
 }
 
-export function _EntityPageActionsBar(props: EntityPageActionsBarProps) {
+const hasGroupedItems = (
+  items: MoreActionsProps['items'],
+): items is MoreActionsPropItem[][] => Array.isArray(items?.[0]);
+
+const appendMoreActionsItem = (
+  items: MoreActionsProps['items'],
+  item: MoreActionsItem,
+): MoreActionsProps['items'] => {
+  if (!items?.length) {
+    return [item];
+  }
+
+  if (hasGroupedItems(items)) {
+    return [...items, [item]];
+  }
+
+  return [items, [item]];
+};
+
+export function _EntityPageActionsBar({
+  moreActions,
+}: EntityPageActionsBarProps) {
+  const { translate: t } = useWixPatternsContainer();
   const state = useEntityPageContext();
+  const deleteAction = state.deleteActionState;
+  const [confirmModal] = React.useState(
+    () =>
+      new ConditionalModalState<null>({
+        onConfirm: () => deleteAction.deleteEntity(),
+      }),
+  );
+
+  const deleteMoreActionsItem: MoreActionsItem = {
+    dataHook: 'entity-page-delete-action-menu-item',
+    biName: 'delete',
+    disabled:
+      deleteAction.task.status.isLoading || !!deleteAction.disabledReason,
+    onClick: () => confirmModal.open(null),
+    prefixIcon: <Delete />,
+    skin: 'destructive',
+    text: t('cairo.delete.button'),
+  };
+  const enhancedMoreActions =
+    deleteAction.canShow && moreActions
+      ? cloneElement(moreActions, {
+          items: appendMoreActionsItem(
+            moreActions.props.items,
+            deleteMoreActionsItem,
+          ),
+        })
+      : undefined;
 
   return (
-    <FormPageActionsBar
-      onCancel={state.onCancel.bind(state)}
-      onSave={state.handleSubmit.bind(state)}
-      actionsBarConfig={state.actionsBarConfig}
-      {...props}
-    />
+    <>
+      <FormPageActionsBar
+        deleteAction={
+          enhancedMoreActions ??
+          (deleteAction.canShow ? (
+            <React.Suspense fallback={null}>
+              <LazyEntityPageDeleteAction />
+            </React.Suspense>
+          ) : undefined)
+        }
+        moreActions={deleteAction.canShow ? undefined : moreActions}
+        onCancel={state.onCancel.bind(state)}
+        onSave={state.handleSubmit.bind(state)}
+        actionsBarConfig={state.actionsBarConfig}
+      />
+      {enhancedMoreActions && confirmModal.isOpen && (
+        <React.Suspense fallback={null}>
+          <LazyEntityPageDeleteConfirmModal state={confirmModal} />
+        </React.Suspense>
+      )}
+    </>
   );
 }
 

package/src/components/EntityPage/EntityPageDeleteAction.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { IconButton, Tooltip } from '@wix/design-system';
+import { Delete } from '@wix/wix-ui-icons-common/lazy';
+import { observer } from 'mobx-react-lite';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useEntityPageContext } from '../../providers';
+import { ConditionalModalState } from '@wix/bex-core';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
+import { EntityPageDeleteConfirmModal } from './EntityPageDeleteConfirmModal';
+
+function _EntityPageDeleteAction() {
+  const { translate: t } = useWixPatternsContainer();
+  const state = useEntityPageContext();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+  const deleteAction = state.deleteActionState;
+  const [confirmModal] = React.useState(
+    () =>
+      new ConditionalModalState<null>({
+        onConfirm: () => deleteAction.deleteEntity(),
+      }),
+  );
+
+  if (!deleteAction.canShow) {
+    return null;
+  }
+
+  const disabledReason = deleteAction.disabledReason;
+  const isDeleting = deleteAction.task.status.isLoading;
+  const tooltipContent = disabledReason ?? t('cairo.delete.button');
+
+  return (
+    <>
+      <Tooltip content={tooltipContent}>
+        <IconButton
+          dataHook="entity-page-delete-action-button"
+          ariaLabel={tooltipContent}
+          priority="tertiary"
+          size={isBmHarmonyTheme ? 'small' : 'medium'}
+          disabled={isDeleting || !!disabledReason}
+          onClick={() => confirmModal.open(null)}
+        >
+          <Delete />
+        </IconButton>
+      </Tooltip>
+      <EntityPageDeleteConfirmModal state={confirmModal} />
+    </>
+  );
+}
+
+export const EntityPageDeleteAction = observer(_EntityPageDeleteAction);

package/src/components/EntityPage/EntityPageDeleteConfirmModal.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { ConditionalModalState } from '@wix/bex-core';
+import { observer } from 'mobx-react-lite';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useEntityPageContext } from '../../providers';
+import { MessageActionModal } from '../ActionModal';
+
+interface EntityPageDeleteConfirmModalProps {
+  state: ConditionalModalState<null>;
+}
+
+function _EntityPageDeleteConfirmModal({
+  state,
+}: EntityPageDeleteConfirmModalProps) {
+  const { translate: t } = useWixPatternsContainer();
+  const pageState = useEntityPageContext();
+  const isDeleting = pageState.deleteActionState.task.status.isLoading;
+
+  if (!pageState.entity || !state.isOpen) {
+    return null;
+  }
+
+  return (
+    <MessageActionModal
+      dataHook="entity-page-delete-confirm-modal"
+      state={state}
+      skin="destructive"
+      title={t('cairo.deleteModal.title')}
+      content={t('cairo.deleteModal.body')}
+      primaryButtonText={t('cairo.delete.button')}
+      secondaryButtonText={t('cairo.cancel.button')}
+      primaryButtonProps={{ disabled: isDeleting }}
+      secondaryButtonProps={{ disabled: isDeleting }}
+    />
+  );
+}
+
+export const EntityPageDeleteConfirmModal = observer(
+  _EntityPageDeleteConfirmModal,
+);

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

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

package/src/components/EntityPageFields/EntityPageCustomField.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useRef } from 'react';
 import { Box, FormField } from '@wix/design-system';
 import type { Field, FieldTypeDefinition, Focusable } from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useController, type Control } from '@wix/bex-core/form';
 import { fieldRefHandle } from '@wix/patterns-fields';
 import { toValidationRules } from '../../state/buildEditableFieldColumns';
@@ -35,6 +36,7 @@ export function EntityPageCustomField({
   definition,
   dataHook,
 }: EntityPageCustomFieldProps) {
+  const { translate: t } = useWixPatternsContainer();
   const validate = definition.value?.validate;
   const controller = useController({
     name: field.id,
@@ -43,7 +45,7 @@ export function EntityPageCustomField({
     rules: validate
       ? {
           validate: (value) =>
-            validate(value, toValidationRules(field)) ?? true,
+            validate(value, toValidationRules(field, t)) ?? true,
         }
       : undefined,
   });