@wix/patterns 1.446.0 → 1.447.0

package/src/components/CollectionPageNew/CollectionPage.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionSectionHeader3603664615";
+var _namespace_ = "CollectionSectionHeader17716278";
 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":"CollectionSectionHeader3603664615__root","summaryIcon":"CollectionSectionHeader3603664615__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader17716278__root","summaryIcon":"CollectionSectionHeader17716278__summaryIcon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/CollectionTable/CollectionTableWSRTable.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar2577173130";
+var _namespace_ = "CollectionToolbar1210449187";
 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":"CollectionToolbar2577173130__root","right":"CollectionToolbar2577173130__right","left":"CollectionToolbar2577173130__left","fullWidth":"CollectionToolbar2577173130__fullWidth"};
+export var classes = {"root":"CollectionToolbar1210449187__root","right":"CollectionToolbar1210449187__right","left":"CollectionToolbar1210449187__left","fullWidth":"CollectionToolbar1210449187__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter3125545518";
+var _namespace_ = "SearchOrCustomFilter1982754589";
 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":"SearchOrCustomFilter3125545518__root","search":"SearchOrCustomFilter3125545518__search","searchMobile":"SearchOrCustomFilter3125545518__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter1982754589__root","search":"SearchOrCustomFilter1982754589__search","searchMobile":"SearchOrCustomFilter1982754589__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

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

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

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

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

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

package/src/components/EditableTable/AddItemRow.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import { AddItem } from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 export interface AddItemRowProps {
   onAdd: () => void;
 }
 
 export function AddItemRow({ onAdd }: AddItemRowProps) {
+  const { translate: t } = useWixPatternsContainer();
   return (
     <div
       data-hook="add-row-button"
@@ -28,7 +30,7 @@ export function AddItemRow({ onAdd }: AddItemRowProps) {
         borderRadius="6px"
         onClick={onAdd}
       >
-        Add Item
+        {t('cairo.editableTable.addItem.CTA')}
       </AddItem>
     </div>
   );

package/src/components/EditableTable/EditableCell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell3571605708";
+var _namespace_ = "EditableCell2550432053";
 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":"EditableCell3571605708__root","errorMessage":"EditableCell3571605708__errorMessage"};
+export var classes = {"root":"EditableCell2550432053__root","errorMessage":"EditableCell2550432053__errorMessage"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableTable.tsx

@@ -24,6 +24,7 @@ import { useAddRow } from './useAddRow';
 import type { TableColumn } from '../../model';
 import { useHeaderActions } from './useHeaderActions';
 import { version as cairoVersion } from '../../version';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 export interface EditableTableProps<
   T,
@@ -74,6 +75,8 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
 
   useEditableTableCollectionSyncProps(props);
 
+  const { translate: t } = useWixPatternsContainer();
+
   const editableColumns = useMemo(
     () => [...columns, ...state.sourceColumns],
     [columns, state.sourceColumns],
@@ -116,7 +119,7 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
   const hasInvalidRows = invalidCellKeys.size > 0;
   const rowStatus: NonNullable<TableVirtualProps<T, F>['rowStatus']> = (row) =>
     state.allColumns.some((col) => invalidCellKeys.has(`${row.key}:${col.id}`))
-      ? { messages: ['This row has invalid cells'] }
+      ? { messages: [t('cairo.editableTable.row.invalidCells.tooltip')] }
       : null;
 
   return (

package/src/components/EditableTable/EditableTableContextMenu.tsx

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { observer } from 'mobx-react-lite';
 import type { FiltersMap } from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 import {
   DropdownLayout,
   Tooltip,
@@ -79,6 +80,7 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
   menuRef,
   onClose,
 }: EditableTableContextMenuProps<T, F>) {
+  const { translate: t } = useWixPatternsContainer();
   const {
     cellInteraction,
     clipboard,
@@ -163,19 +165,21 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
       : state.isRowDeleteDisabled(rowKeys[0] ?? cell.rowKey);
   const deleteDisabledReasonFor = (rowKeys: string[]) =>
     removeItemDisabled
-      ? "You don't have permission to delete rows"
+      ? t('cairo.editableTable.contextMenu.deleteRow.noPermission.tooltip')
       : rowKeys.length > 1 && state.multiDeleteDisabled
-      ? "You don't have permission to delete multiple rows at once"
+      ? t(
+          'cairo.editableTable.contextMenu.deleteRows.noPermissionMulti.tooltip',
+        )
       : rowKeys.length > 1
-      ? "Some of the selected rows can't be deleted"
+      ? t('cairo.editableTable.contextMenu.deleteRows.someNotDeletable.tooltip')
       : state.rowDeleteDisabledReason(rowKeys[0] ?? cell.rowKey) ??
-        "This row can't be deleted";
+        t('cairo.editableTable.contextMenu.deleteRow.notDeletable.tooltip');
 
   const addDisabledReason = addItemDisabled
-    ? "You don't have permission to add rows"
+    ? t('cairo.editableTable.contextMenu.addRow.noPermission.tooltip')
     : undefined;
   const updateDisabledReason = updateItemDisabled
-    ? "You don't have permission to edit rows"
+    ? t('cairo.editableTable.contextMenu.editRow.noPermission.tooltip')
     : undefined;
 
   const pushRowActions = (targetKeys: string[]) => {
@@ -183,21 +187,21 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
       options.push(
         buildMenuAction({
           id: 'add-above',
-          title: 'Add Row Above',
+          title: t('cairo.editableTable.contextMenu.addRowAbove.CTA'),
           prefixIcon: <AddSmall />,
           disabled: !!addItemDisabled,
           disabledDescription: addDisabledReason,
         }),
         buildMenuAction({
           id: 'add-below',
-          title: 'Add Row Below',
+          title: t('cairo.editableTable.contextMenu.addRowBelow.CTA'),
           prefixIcon: <AddSmall />,
           disabled: !!addItemDisabled,
           disabledDescription: addDisabledReason,
         }),
         buildMenuAction({
           id: 'duplicate',
-          title: 'Duplicate Row',
+          title: t('cairo.editableTable.contextMenu.duplicateRow.CTA'),
           prefixIcon: <DuplicateSmall />,
           disabled: !!addItemDisabled,
           disabledDescription: addDisabledReason,
@@ -210,10 +214,9 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
     options.push(
       buildMenuAction({
         id: 'delete',
-        title:
-          targetKeys.length > 1
-            ? `Delete ${targetKeys.length} Rows`
-            : 'Delete Row',
+        title: t('cairo.editableTable.contextMenu.deleteRow.CTA', {
+          count: targetKeys.length,
+        }),
         prefixIcon: <DeleteSmall />,
         skin: 'destructive',
         disabled: deleteDisabled,
@@ -236,7 +239,9 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
         options.push(
           buildMenuAction({
             id: 'delete',
-            title: `Remove ${selectedRowCount} Rows`,
+            title: t('cairo.editableTable.contextMenu.removeRows.CTA', {
+              count: selectedRowCount,
+            }),
             prefixIcon: <DeleteSmall />,
             skin: 'destructive',
             disabled: deleteDisabled,
@@ -255,12 +260,12 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
     options.push(
       buildMenuAction({
         id: 'copy',
-        title: `Copy`,
+        title: t('cairo.editableTable.contextMenu.copy.CTA'),
         disabled: selectedCount === 0,
       }),
       buildMenuAction({
         id: 'cut',
-        title: `Cut`,
+        title: t('cairo.editableTable.contextMenu.cut.CTA'),
         disabled:
           selectedCount === 0 ||
           !!updateItemDisabled ||
@@ -269,14 +274,15 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
       }),
       buildMenuAction({
         id: 'paste',
-        title: `Paste`,
+        title: t('cairo.editableTable.contextMenu.paste.CTA'),
         disabled: !!updateItemDisabled || isPasteTargetReadOnly,
         disabledDescription: updateDisabledReason,
       }),
       buildMenuAction({
         id: 'clear',
-        title:
-          selectedCount > 1 ? `Clear ${selectedCount} Cells` : 'Clear Cell',
+        title: t('cairo.editableTable.contextMenu.clearCell.CTA', {
+          count: selectedCount,
+        }),
         disabled:
           selectedCount === 0 ||
           !!updateItemDisabled ||

package/src/components/EditableTable/HeaderActionsPopover.st.css.ts

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

package/src/components/EditableTable/cellTypes/CellViewLayout.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit59862760";
+var _namespace_ = "Edit1960941028";
 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":"Edit59862760__root","addressInput":"Edit59862760__addressInput"};
+export var classes = {"root":"Edit1960941028__root","addressInput":"Edit1960941028__addressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/address/index.tsx

@@ -45,7 +45,7 @@ export const addressCellType = defineCellType<Address | undefined>({
     } catch {}
     return undefined;
   },
-  validate: (value) => {
+  validate: (value, _rules, translate) => {
     if (!value) {
       return null;
     }
@@ -56,7 +56,7 @@ export const addressCellType = defineCellType<Address | undefined>({
     ) {
       return null;
     }
-    return 'Invalid address';
+    return translate!('cairo.editableTable.address.validation.invalid');
   },
   editable: true,
   clearable: true,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1066489331";
+var _namespace_ = "Edit109297893";
 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":"Edit1066489331__root","jsonInput":"Edit1066489331__jsonInput"};
+export var classes = {"root":"Edit109297893__root","jsonInput":"Edit109297893__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1480691619";
+var _namespace_ = "Edit1596998599";
 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":"Edit1480691619__root","booleanEdit":"Edit1480691619__booleanEdit"};
+export var classes = {"root":"Edit1596998599__root","booleanEdit":"Edit1596998599__booleanEdit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1411502545";
+var _namespace_ = "View207708107";
 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":"View1411502545__root","booleanView":"View1411502545__booleanView"};
+export var classes = {"root":"View207708107__root","booleanView":"View207708107__booleanView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/EditableTable/cellTypes/color/index.tsx

@@ -28,13 +28,13 @@ export const colorCellType = defineCellType<string | undefined>({
   EditComponent: ColorEdit,
   serialize: (value) => value ?? '',
   deserialize: (raw) => (raw ? raw : undefined),
-  validate: (value) => {
+  validate: (value, _rules, translate) => {
     if (!value) {
       return null;
     }
     return HEX_RE.test(value)
       ? null
-      : 'Invalid color (expected #RGB or #RRGGBB)';
+      : translate!('cairo.editableTable.color.validation.invalid');
   },
   editable: true,
   clearable: true,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1271927729";
+var _namespace_ = "Edit4219668625";
 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":"Edit1271927729__root","dateInput":"Edit1271927729__dateInput"};
+export var classes = {"root":"Edit4219668625__root","dateInput":"Edit4219668625__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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_ = "Edit1943091834";
 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":"Edit1943091834__root","half":"Edit1943091834__half","dateHalf":"Edit1943091834__dateHalf Edit1943091834__half","timeHalf":"Edit1943091834__timeHalf Edit1943091834__half","divider":"Edit1943091834__divider","passiveText":"Edit1943091834__passiveText","placeholderText":"Edit1943091834__placeholderText Edit1943091834__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_ = "View133343380";
 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":"View133343380__root","leaf":"View133343380__leaf","datePart":"View133343380__datePart View133343380__leaf","timePart":"View133343380__timePart View133343380__leaf","placeholder":"View133343380__placeholder View133343380__leaf","divider":"View133343380__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,