@wix/patterns 1.445.0 → 1.447.0

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

@@ -1,5 +1,6 @@
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import {
+  DropdownLayoutUniDriver,
   PopoverMenuUniDriver,
   TooltipUniDriver,
 } from '@wix/design-system/dist/testkit/unidriver';
@@ -41,6 +42,18 @@ export const MoreActionsUniDriver = (base: UniDriver, body: UniDriver) => {
     /** Gets children count */
     childrenCount: () => moreActionsPopoverDriver(dataHook).childrenCount(),
 
+    /** Indicates whether a menu item uses the small text size */
+    isItemTextSizeSmall: async (index: number) => {
+      const contentElement = await moreActionsPopoverDriver(
+        dataHook,
+      ).getContentElement();
+      const className = await DropdownLayoutUniDriver(
+        contentElement.$('[data-hook="dropdown-base-dropdownlayout"]'),
+        body,
+      ).getListItemAttribute(index, 'class');
+      return /---size-\d+-small(?:\s|$)/.test(className);
+    },
+
     getTooltip: () => {
       return TooltipUniDriver(
         base.$('[data-hook="more-actions-tooltip"]'),

package/src/components/MoreActions/MoreActionsBase.tsx

@@ -7,6 +7,7 @@ import {
 } from '@wix/bex-core/react';
 import { observer } from 'mobx-react-lite';
 import { useExtensionMenuItems } from '../../hooks/useExtensionMenuItems';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import { ExtensionMenuItem } from '../../state';
 import { usePageButtonBiParams } from '../usePageButtonBiParams';
 import { useExploreAppsState } from './useExploreAppsState';
@@ -36,6 +37,7 @@ function _MoreActionsBase(params: MoreActionsBaseProps) {
     biAdditionalInfo,
   } = params;
   const { pageType, location } = usePageButtonBiParams();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
   const state = useExtensionMenuItems({ containerId, containerProps });
   const container = useWixPatternsContainer();
   const pageState = useCollectionPageContext();
@@ -159,7 +161,7 @@ function _MoreActionsBase(params: MoreActionsBaseProps) {
           );
         }}
         minWidth={240}
-        textSize="medium"
+        textSize={isBmHarmonyTheme ? 'small' : 'medium'}
         triggerElement={triggerElement}
         appendTo="parent"
         zIndex={1101}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar302415624";
+var _namespace_ = "MultiBulkActionToolbar592642826";
 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":"MultiBulkActionToolbar302415624__root","leftGroupWrapper":"MultiBulkActionToolbar302415624__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar302415624__selectedCountItem","selectedCountText":"MultiBulkActionToolbar302415624__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar592642826__root","leftGroupWrapper":"MultiBulkActionToolbar592642826__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar592642826__selectedCountItem","selectedCountText":"MultiBulkActionToolbar592642826__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

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

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow397408975";
+var _namespace_ = "NestedTableRow2340955180";
 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":"NestedTableRow397408975__root","firstLevel":"NestedTableRow397408975__firstLevel","placeholder":"NestedTableRow397408975__placeholder","parentHovered":"NestedTableRow397408975__parentHovered"};
+export var classes = {"root":"NestedTableRow2340955180__root","firstLevel":"NestedTableRow2340955180__firstLevel","placeholder":"NestedTableRow2340955180__placeholder","parentHovered":"NestedTableRow2340955180__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

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

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep364555487";
+var _namespace_ = "PickerContentAdditionalStep751880777";
 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":"PickerContentAdditionalStep364555487__root","titles":"PickerContentAdditionalStep364555487__titles","suffix":"PickerContentAdditionalStep364555487__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep751880777__root","titles":"PickerContentAdditionalStep751880777__titles","suffix":"PickerContentAdditionalStep751880777__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget1751783782";
+var _namespace_ = "SetupWidget2519865406";
 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":"SetupWidget1751783782__root","row":"SetupWidget1751783782__row","completedCta":"SetupWidget1751783782__completedCta","secondaryCta":"SetupWidget1751783782__secondaryCta","card":"SetupWidget1751783782__card","stepIcon":"SetupWidget1751783782__stepIcon","chevron":"SetupWidget1751783782__chevron","chevronDisabled":"SetupWidget1751783782__chevronDisabled","inProgressLabel":"SetupWidget1751783782__inProgressLabel"};
+export var classes = {"root":"SetupWidget2519865406__root","row":"SetupWidget2519865406__row","completedCta":"SetupWidget2519865406__completedCta","secondaryCta":"SetupWidget2519865406__secondaryCta","card":"SetupWidget2519865406__card","stepIcon":"SetupWidget2519865406__stepIcon","chevron":"SetupWidget2519865406__chevron","chevronDisabled":"SetupWidget2519865406__chevronDisabled","inProgressLabel":"SetupWidget2519865406__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard3743223440";
+var _namespace_ = "SkeletonCard3225100801";
 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":"SkeletonCard3743223440__root","headerLoading":"SkeletonCard3743223440__headerLoading"};
+export var classes = {"root":"SkeletonCard3225100801__root","headerLoading":"SkeletonCard3225100801__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/Table/AddFieldColumnHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AddFieldColumnHeader3783145171";
+var _namespace_ = "AddFieldColumnHeader3457306703";
 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":"AddFieldColumnHeader3783145171__root","title":"AddFieldColumnHeader3783145171__title","hoverBridge":"AddFieldColumnHeader3783145171__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader3457306703__root","title":"AddFieldColumnHeader3457306703__title","hoverBridge":"AddFieldColumnHeader3457306703__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter924897";
+var _namespace_ = "TabsFilter3805733533";
 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":"TabsFilter924897__root","title":"TabsFilter924897__title"};
+export var classes = {"root":"TabsFilter3805733533__root","title":"TabsFilter3805733533__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem746777390";
+var _namespace_ = "ToolbarItem1072055600";
 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":"ToolbarItem746777390__root"};
+export var classes = {"root":"ToolbarItem1072055600__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_ = "ToolbarItemBox3698378441";
+var _namespace_ = "ToolbarItemBox2420370034";
 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":"ToolbarItemBox3698378441__root"};
+export var classes = {"root":"ToolbarItemBox2420370034__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_ = "common25472537";
+var _namespace_ = "common267139271";
 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":"common25472537__root","column":"common25472537__column","fullHeight":"common25472537__fullHeight"};
+export var classes = {"root":"common267139271__root","column":"common267139271__column","fullHeight":"common267139271__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

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

package/src/state/EditableTable/CellValueState.ts

@@ -261,7 +261,12 @@ export class CellValueState<T, F extends FiltersMap> {
     try {
       return { value: resolved.deserialize(rawValue) };
     } catch {
-      return { value: rawValue, error: 'Value is not compatible' };
+      return {
+        value: rawValue,
+        error: this._parent.collection?.translate(
+          'cairo.editableTable.cell.validation.notCompatible',
+        ),
+      };
     }
   }
 

package/src/state/EditableTable/EditableTableState.ts

@@ -241,6 +241,7 @@ export class EditableTableState<T, F extends FiltersMap>
     }
     return buildEditableFieldColumns(
       source.fieldsSource,
+      this.collection.translate,
       source.editableCellFor,
     ) as EditableColumn<T>[];
   }

package/src/state/EditableTable/MutationState.ts

@@ -126,6 +126,7 @@ export class MutationState<T, F extends FiltersMap> {
 
   /** Create a local new row on the server, with its edited values merged in. */
   commitNewRow(rowKey: string, item: T) {
+    const t = this._parent.collection.translate;
     const draft = this._drafts.get(rowKey);
     if (!draft) {
       return;
@@ -140,15 +141,19 @@ export class MutationState<T, F extends FiltersMap> {
     this._optimisticActions.createOne(item, {
       submit: this._submitCreate,
       afterItemKey,
-      successToast: 'Item created',
+      successToast: t('cairo.editableTable.createItem.success.toast'),
       errorToast: (_err: unknown, { retry }: { retry: () => void }) => ({
-        message: 'Failed to create item',
-        action: { onClick: retry, text: 'Retry' },
+        message: t('cairo.editableTable.createItem.error.toast'),
+        action: {
+          onClick: retry,
+          text: t('cairo.editableTable.retry.toast.CTA'),
+        },
       }),
     });
   }
 
   duplicateItem(rowKey: string) {
+    const t = this._parent.collection.translate;
     const keyedItem = this._parent.keyedItems.find((ki) => ki.key === rowKey);
     if (!keyedItem) {
       return;
@@ -170,15 +175,19 @@ export class MutationState<T, F extends FiltersMap> {
     this._optimisticActions.createOne(duplicate as T, {
       submit: this._submitCreate,
       afterItemKey: rowKey,
-      successToast: 'Item duplicated',
+      successToast: t('cairo.editableTable.duplicateItem.success.toast'),
       errorToast: (_err: unknown, { retry }: { retry: () => void }) => ({
-        message: 'Failed to duplicate item',
-        action: { onClick: retry, text: 'Retry' },
+        message: t('cairo.editableTable.duplicateItem.error.toast'),
+        action: {
+          onClick: retry,
+          text: t('cairo.editableTable.retry.toast.CTA'),
+        },
       }),
     });
   }
 
   deleteItems(rowKeys: string[]) {
+    const t = this._parent.collection.translate;
     const deleted = new Set(rowKeys);
 
     // Surviving drafts anchored on a deleted row move up to the nearest
@@ -217,29 +226,36 @@ export class MutationState<T, F extends FiltersMap> {
 
     this._optimisticActions.deleteMany(items, {
       submit: this._handlers.submitDelete,
-      successToast:
-        items.length === 1 ? 'Item deleted' : `${items.length} items deleted`,
+      successToast: t('cairo.editableTable.deleteItem.success.toast', {
+        count: items.length,
+      }),
       errorToast: (_err: unknown, { retry }: { retry: () => void }) => ({
-        message: 'Failed to delete items',
-        action: { onClick: retry, text: 'Retry' },
+        message: t('cairo.editableTable.deleteItem.error.toast'),
+        action: {
+          onClick: retry,
+          text: t('cairo.editableTable.retry.toast.CTA'),
+        },
       }),
     });
   }
 
   updateItems(updatedItems: T[]) {
+    const t = this._parent.collection.translate;
     if (updatedItems.length === 0) {
       return;
     }
     this._optimisticActions.updateMany(updatedItems, {
       keepPosition: true,
       submit: this._handlers.submitUpdate,
-      successToast:
-        updatedItems.length === 1
-          ? 'Item updated'
-          : `${updatedItems.length} items updated`,
+      successToast: t('cairo.editableTable.updateItem.success.toast', {
+        count: updatedItems.length,
+      }),
       errorToast: (_err: unknown, { retry }: { retry: () => void }) => ({
-        message: 'Failed to update items',
-        action: { onClick: retry, text: 'Retry' },
+        message: t('cairo.editableTable.updateItem.error.toast'),
+        action: {
+          onClick: retry,
+          text: t('cairo.editableTable.retry.toast.CTA'),
+        },
       }),
     });
   }

package/src/state/EntityPage/useEntityPageHeader.tsx

@@ -16,11 +16,12 @@ export function useEntityPageHeader(child: EntityPageHeaderElement) {
   );
 
   const routerEntityData = router?.currentState?._chosenEntity?.entity;
-  const {
-    title = null,
-    subtitle = null,
-    breadcrumbs = null,
-  } = routerEntityData || !state.isFetching ? child.props : {};
+  const { title = null, subtitle = null } =
+    routerEntityData || !state.isFetching ? child.props : {};
+  // Title and subtitle describe the entity, so they wait for it and show a
+  // skeleton meanwhile. Breadcrumbs are page navigation and must not — holding
+  // them back takes away the way out of a page that is still loading.
+  const { breadcrumbs = null } = child.props;
   const isMobile = useIsMobile();
 
   const header = useFormPageHeader(child, {

package/src/state/FormPage/FormPageHeader.st.css.ts

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

package/src/state/buildEditableFieldColumns.ts

@@ -3,6 +3,7 @@ import type {
   FieldsSource,
   FieldTypeDefinition,
   PatternsFieldType,
+  Translate,
   ValidationRule,
 } from '@wix/bex-core';
 import { resolveFieldTypeDefinition } from '@wix/bex-core';
@@ -37,7 +38,10 @@ function hasEditor(field: Field, customCell?: Omit<CellType, 'type'>): boolean {
   );
 }
 
-export function toValidationRules(field: Field): ValidationRule[] {
+export function toValidationRules(
+  field: Field,
+  translate: Translate,
+): ValidationRule[] {
   const v = field.validation;
   if (!v) {
     return [];
@@ -46,7 +50,9 @@ export function toValidationRules(field: Field): ValidationRule[] {
   if (v.required) {
     rules.push({
       type: 'required',
-      message: `${field.displayName} is required`,
+      message: translate('cairo.editableTable.field.validation.required', {
+        fieldName: field.displayName,
+      }),
     });
   }
   if (v.numberRange?.min != null) {
@@ -73,7 +79,10 @@ export function toValidationRules(field: Field): ValidationRule[] {
     rules.push({
       type: 'specificValues',
       values: v.specificValues,
-      message: `${field.displayName} must be one of the allowed values`,
+      message: translate(
+        'cairo.editableTable.field.validation.specificValues',
+        { fieldName: field.displayName },
+      ),
     });
   }
   return rules;
@@ -103,6 +112,7 @@ function synthesizeCellConfig(
  */
 export function buildEditableFieldColumns(
   source: FieldsSource,
+  translate: Translate,
   editableCellFor?: (field: Field) => EditableCellUpgrade | undefined,
 ): EditableColumn<Record<string, unknown>>[] {
   const canWrite = typeof source.setCellValue === 'function';
@@ -125,7 +135,7 @@ export function buildEditableFieldColumns(
         (NEEDS_TYPE_CONFIG.has(field.type)
           ? 'object'
           : FIELD_TYPE_TO_CELL_TYPE[field.type] ?? 'object');
-    const validation = toValidationRules(field);
+    const validation = toValidationRules(field, translate);
     const editable =
       canWrite &&
       !field.isSystem &&