@wix/patterns 1.467.0 → 1.469.0

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "patterns@1.467.0";
+export declare const version = "patterns@1.469.0";
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns",
-  "version": "1.467.0",
+  "version": "1.469.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -199,6 +199,7 @@
     "dist/esm",
     "dist/types",
     "dist/docs",
+    "dist/examples",
     "dist/dts-bundle",
     "!dist/**/__tests__",
     "src",
@@ -224,11 +225,11 @@
   ],
   "dependencies": {
     "@wix/agent-platform-bm-sdk": "^1.0.0",
-    "@wix/bex-core": "2.373.0",
-    "@wix/bex-utils": "2.160.0",
+    "@wix/bex-core": "2.375.0",
+    "@wix/bex-utils": "2.162.0",
     "@wix/essentials": "^0.1.26",
-    "@wix/patterns-fields": "1.95.0",
-    "@wix/patterns-fields-utils": "1.76.0",
+    "@wix/patterns-fields": "1.97.0",
+    "@wix/patterns-fields-utils": "1.78.0",
     "@wix/sdk": "^1.15.22",
     "@wix/wix-style-react-incubator": "^3.23.1",
     "@wix/wix-ui-test-utils": "^1.1.9",
@@ -291,7 +292,7 @@
     "@wix/awaiter-utils": "^1.0.76",
     "@wix/babel-cli": "^1.11.0",
     "@wix/business-manager-api": "^1.470.0",
-    "@wix/cairo-integration-utils": "1.135.0",
+    "@wix/cairo-integration-utils": "1.137.0",
     "@wix/ci-build-info": "^1.0.0",
     "@wix/crm": "^1.0.93",
     "@wix/dashboard": "^1.3.39",
@@ -452,5 +453,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "41dbade7f22cf7b9c99c0e89520a5a36c79e808fdf83918273553ecf"
+  "falconPackageHash": "7b7263f10f01d41fd77e4cc41bb8da734a2911ffdf63d55fa4058292"
 }

package/src/components/ActionCell/ActionCell.ts

@@ -55,6 +55,7 @@ export interface ActionCellProps
    *  + `disabled`: [bool] Whether user interactions are disabled.
    *  + `prefixIcon`: Icon in front of a button label.
    *  + `suffixIcon`: Icon after a button label.
+   *  + Not `icon` — that key belongs to `secondaryActions` below. On `primaryAction` it type-checks anyway, because the `as` variants of the underlying button props carry an index signature, and is then dropped at render.
    *  + `as`: Renders button as another component or a DOM tag.
    *  + `visibility`: Specifies whether the primary action button is visible. When the value is set to `'onHover'`, the button is only visible when the mouse hovers over it, and it appears as a primary button. When the value is set to `'always'`, the button is always visible and appears as a secondary button.
    * 

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

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

package/src/components/CmsFieldManagement/CmsFieldForm.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldForm2003411689";
+var _namespace_ = "CmsFieldForm1275885253";
 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":"CmsFieldForm2003411689__root","fullBleedDivider":"CmsFieldForm2003411689__fullBleedDivider"};
+export var classes = {"root":"CmsFieldForm1275885253__root","fullBleedDivider":"CmsFieldForm1275885253__fullBleedDivider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/CmsFieldModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldModal4223188063";
+var _namespace_ = "CmsFieldModal3343705393";
 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":"CmsFieldModal4223188063__root","modal":"CmsFieldModal4223188063__modal"};
+export var classes = {"root":"CmsFieldModal3343705393__root","modal":"CmsFieldModal3343705393__modal"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/Sections/ValidationAndDefaultsSection.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "ValidationAndDefaultsSection2577113738";
+var _namespace_ = "ValidationAndDefaultsSection3827089162";
 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":"ValidationAndDefaultsSection2577113738__root","accordionWrapper":"ValidationAndDefaultsSection2577113738__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection3827089162__root","accordionWrapper":"ValidationAndDefaultsSection3827089162__accordionWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse3008343395";
+var _namespace_ = "Collapse1826189329";
 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":"Collapse3008343395__root","exit":"Collapse3008343395__exit"};
+export var classes = {"root":"Collapse1826189329__root","exit":"Collapse1826189329__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPage2837641219";
+var _namespace_ = "CollectionPage2714372964";
 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":"CollectionPage2837641219__root"};
+export var classes = {"root":"CollectionPage2714372964__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_ = "CollectionSectionHeader2230645809";
+var _namespace_ = "CollectionSectionHeader305811667";
 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":"CollectionSectionHeader2230645809__root","summaryIcon":"CollectionSectionHeader2230645809__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader305811667__root","summaryIcon":"CollectionSectionHeader305811667__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_ = "CollectionTable728764043";
+var _namespace_ = "CollectionTable713064089";
 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":"CollectionTable728764043__root"};
+export var classes = {"root":"CollectionTable713064089__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -8,6 +8,7 @@ import {
   TableUniDriver,
   LiveRegionUniDriver,
   PopoverUniDriver,
+  InfoIconUniDriver,
 } from '@wix/design-system/dist/testkit/unidriver';
 import { AppliedFiltersTagListUniDriver } from '../AppliedFiltersTagList/AppliedFiltersTagList.uni.driver';
 import { TableTopNotificationUniDriver } from '../TableTopNotification/TableTopNotification.uni.driver';
@@ -407,5 +408,17 @@ export const CollectionTableUniDriver = (base: UniDriver, body: UniDriver) => {
           .$('[data-hook="infoicon-tooltip"]'),
         body,
       ),
+
+    /** By column id, not index: WDS names the icon after the column's visual
+     *  position, which shifts with the drag / selection / row-status columns
+     *  Table prepends. */
+    getHeaderInfoIcon: (columnId: string) =>
+      InfoIconUniDriver(
+        base
+          .$('thead')
+          .$(`th[data-hook="${columnId}"]`)
+          .$('[data-hook$="_info_tooltip"]'),
+        body,
+      ),
   };
 };

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionTableWSRTable2573995063";
+var _namespace_ = "CollectionTableWSRTable857727311";
 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":"CollectionTableWSRTable2573995063__root"};
+export var classes = {"root":"CollectionTableWSRTable857727311__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_ = "CollectionToolbar3700509415";
+var _namespace_ = "CollectionToolbar3733098124";
 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":"CollectionToolbar3700509415__root","right":"CollectionToolbar3700509415__right","left":"CollectionToolbar3700509415__left","fullWidth":"CollectionToolbar3700509415__fullWidth"};
+export var classes = {"root":"CollectionToolbar3733098124__root","right":"CollectionToolbar3733098124__right","left":"CollectionToolbar3733098124__left","fullWidth":"CollectionToolbar3733098124__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_ = "SearchOrCustomFilter1025203591";
+var _namespace_ = "SearchOrCustomFilter3857586553";
 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":"SearchOrCustomFilter1025203591__root","search":"SearchOrCustomFilter1025203591__search","searchMobile":"SearchOrCustomFilter1025203591__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter3857586553__root","search":"SearchOrCustomFilter3857586553__search","searchMobile":"SearchOrCustomFilter3857586553__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_ = "AutoCompleteReadonly217741116";
+var _namespace_ = "AutoCompleteReadonly2029553353";
 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":"AutoCompleteReadonly217741116__root"};
+export var classes = {"root":"AutoCompleteReadonly2029553353__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_ = "ViewsDropdown1700299128";
+var _namespace_ = "ViewsDropdown3791931914";
 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":"ViewsDropdown1700299128__root"};
+export var classes = {"root":"ViewsDropdown3791931914__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_ = "DragHandle334215364";
+var _namespace_ = "DragHandle980352039";
 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":"DragHandle334215364__root"};
+export var classes = {"root":"DragHandle980352039__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -15,6 +15,11 @@
 @property st-global(--wsr-color-D60);
 @property st-global(--wsr-color-D80);
 @property st-global(--wsr-color-R10);
+@property st-global(--wds-color-text-standard-primary);
+@property st-global(--wds-color-text-disabled);
+@property st-global(--wds-color-black-700);
+@property st-global(--wsr-color-D10-30);
+@property st-global(--wsr-color-D70);
 
 :global(td):has(> .root) {
   position: relative;
@@ -31,7 +36,7 @@
 }
 
 .root {
-  -st-states: editing, focused, rowActive, rangeSelected, invalid,
+  -st-states: editing, focused, rowActive, rangeSelected, invalid, readOnly,
     showEditWhenFocused, growable, selectionTop, selectionBottom, selectionLeft,
     selectionRight, copiedTop, copiedBottom, copiedLeft, copiedRight;
   display: flex;
@@ -75,7 +80,7 @@
   box-shadow: inset 0 22px 18px -18px rgba(0, 6, 36, 0.1);
 }
 
-.root:rowActive:hover:not(:focused):not(:rangeSelected) {
+.root:rowActive:hover:not(:focused):not(:rangeSelected):not(:readOnly) {
   border-color: var(
     --wds-input-border-color-hover,
     var(--wsr-color-B40, #d6e6fe)
@@ -83,6 +88,31 @@
   box-shadow: inset 0 8px 6px -6px rgba(0, 6, 36, 0.05);
 }
 
+/* WDS <Text> sets its own colour, so the token it reads has to be overridden;
+   color: then carries the same value to the datetime view's raw spans, which
+   set none. */
+.root:readOnly {
+  --wds-color-text-standard-primary: var(
+    --wds-color-text-disabled,
+    var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))
+  );
+  color: var(--wds-color-text-standard-primary);
+}
+
+.root:readOnly:hover:not(:rowActive):not(:rangeSelected),
+.root:readOnly:rowActive:not(:rangeSelected) {
+  background: var(
+    --wds-color-fill-surface-raised,
+    var(--wsr-color-D80, #ffffff)
+  );
+}
+
+/* Keep above the :invalid rules — they tie with this one on specificity for
+   border-color, so source order is what keeps an invalid cell red. */
+.root:readOnly:rowActive:hover:not(:focused):not(:rangeSelected) {
+  border-color: var(--wds-color-black-700, var(--wsr-color-D70, #eceff3));
+}
+
 .root:focused:not(:rangeSelected) {
   border-color: var(
     --wds-input-border-color-focus,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell2454684859";
+var _namespace_ = "EditableCell2159728911";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"EditableCell2454684859__root","errorMessage":"EditableCell2454684859__errorMessage"};
+export var classes = {"root":"EditableCell2159728911__root","errorMessage":"EditableCell2159728911__errorMessage"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-fill-surface-raised":"--wds-color-fill-surface-raised","wds-color-border-dark-secondary":"--wds-color-border-dark-secondary","wds-color-black-750":"--wds-color-black-750","wds-color-red-100":"--wds-color-red-100","wds-color-fill-surface-overlay":"--wds-color-fill-surface-overlay","wds-input-border-color-hover":"--wds-input-border-color-hover","wds-input-border-color-focus":"--wds-input-border-color-focus","wds-border-width-default":"--wds-border-width-default","wds-border-radius-400":"--wds-border-radius-400","wds-popover-fill":"--wds-popover-fill","wds-popover-border-radius":"--wds-popover-border-radius","wds-shadow-surface-overlay":"--wds-shadow-surface-overlay","wsr-color-B10":"--wsr-color-B10","wsr-color-B40":"--wsr-color-B40","wsr-color-D60":"--wsr-color-D60","wsr-color-D80":"--wsr-color-D80","wsr-color-R10":"--wsr-color-R10"}; 
+export var vars = {"wds-color-fill-surface-raised":"--wds-color-fill-surface-raised","wds-color-border-dark-secondary":"--wds-color-border-dark-secondary","wds-color-black-750":"--wds-color-black-750","wds-color-red-100":"--wds-color-red-100","wds-color-fill-surface-overlay":"--wds-color-fill-surface-overlay","wds-input-border-color-hover":"--wds-input-border-color-hover","wds-input-border-color-focus":"--wds-input-border-color-focus","wds-border-width-default":"--wds-border-width-default","wds-border-radius-400":"--wds-border-radius-400","wds-popover-fill":"--wds-popover-fill","wds-popover-border-radius":"--wds-popover-border-radius","wds-shadow-surface-overlay":"--wds-shadow-surface-overlay","wsr-color-B10":"--wsr-color-B10","wsr-color-B40":"--wsr-color-B40","wsr-color-D60":"--wsr-color-D60","wsr-color-D80":"--wsr-color-D80","wsr-color-R10":"--wsr-color-R10","wds-color-text-standard-primary":"--wds-color-text-standard-primary","wds-color-text-disabled":"--wds-color-text-disabled","wds-color-black-700":"--wds-color-black-700","wsr-color-D10-30":"--wsr-color-D10-30","wsr-color-D70":"--wsr-color-D70"}; 
 
 
 

package/src/components/EditableTable/EditableCell.tsx

@@ -11,12 +11,14 @@ export interface EditableCellProps<T, F extends FiltersMap> {
   state: EditableTableState<T, F>;
   rowKey: string;
   columnId: string;
+  onFocus?: () => void;
 }
 
 function _EditableCell<T, F extends FiltersMap>({
   state,
   rowKey,
   columnId,
+  onFocus,
 }: EditableCellProps<T, F>) {
   const { cellInteraction, clipboard } = state;
   const cellRef = useRef<HTMLDivElement | null>(null);
@@ -148,6 +150,7 @@ function _EditableCell<T, F extends FiltersMap>({
           rowActive: isRowActive,
           rangeSelected: isSelected && isRangeSelection,
           invalid: !cellValidation.valid,
+          readOnly: !isEditable,
           showEditWhenFocused: !!resolved.showEditWhenFocused,
           growable: !!resolved.growable,
           selectionTop: isRangeSelection && selectionBorder.top,
@@ -161,6 +164,7 @@ function _EditableCell<T, F extends FiltersMap>({
         })}
         onClick={handleClick}
         onDoubleClick={handleDoubleClick}
+        onFocus={onFocus}
         onKeyDown={cellKeyboard.onKeyDown}
         role="gridcell"
         aria-selected={isSelected}

package/src/components/EditableTable/EditableCell.uni.driver.ts

@@ -7,6 +7,7 @@ import { BooleanEditUniDriver } from './cellTypes/boolean/Edit.uni.driver';
 import { SpecificValuesEditUniDriver } from './cellTypes/text/SpecificValuesEdit.uni.driver';
 import { DateEditUniDriver } from './cellTypes/date/Edit.uni.driver';
 import { ReferenceEditUniDriver } from './cellTypes/reference/Edit.uni.driver';
+import { AddressEditUniDriver } from './cellTypes/address/Edit.uni.driver';
 
 export function EditableCellUniDriver(base: UniDriver, body: UniDriver) {
   return {
@@ -15,6 +16,9 @@ export function EditableCellUniDriver(base: UniDriver, body: UniDriver) {
     /** Click the cell (focuses it) */
     click: () => base.click(),
 
+    /** Hover the cell */
+    hover: () => base.hover(),
+
     /** Double-click the cell (starts editing). UniDriver has no doubleClick, so dispatch native event. */
     doubleClick: async () => {
       const el = await base.getNative();
@@ -85,6 +89,8 @@ export function EditableCellUniDriver(base: UniDriver, body: UniDriver) {
     /** Get the reference cell edit driver (for reference columns) */
     getReferenceEdit: () => ReferenceEditUniDriver(base, body),
 
+    getAddressEdit: () => AddressEditUniDriver(base, body),
+
     /** Right-click the cell (opens context menu) */
     rightClick: async () => {
       const el = await base.getNative();

package/src/components/EditableTable/EditableTable.tsx

@@ -86,7 +86,9 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
 
   const keyboard = useKeyboardNavigation(state);
   useClipboardHandler(state, containerRef);
-  const { onFocus, onBlur } = useClearFocusOnBlur(state.cellInteraction);
+  const { onFocus, onBlur, onCellFocus } = useClearFocusOnBlur(
+    state.cellInteraction,
+  );
   useMouseSweepSelection(state, containerRef);
 
   const builtInActions = useHeaderActions(
@@ -106,21 +108,36 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
         render: (_item: T, rowNum: number) => {
           const rowKey = state.keyedItems[rowNum]?.key;
           return rowKey ? (
-            <EditableCell state={state} rowKey={rowKey} columnId={col.id} />
+            <EditableCell
+              state={state}
+              rowKey={rowKey}
+              columnId={col.id}
+              onFocus={onCellFocus}
+            />
           ) : null;
         },
       })) as TableColumn<T>[],
-    [editableColumns, state, builtInActions],
+    [editableColumns, state, builtInActions, onCellFocus],
   );
 
   const contextMenu = useEditableTableContextMenu(state.cellInteraction);
 
   const invalidCellKeys = new Set(state.cellValue._pendingCells.keys());
   const hasInvalidRows = invalidCellKeys.size > 0;
-  const rowStatus: NonNullable<TableVirtualProps<T, F>['rowStatus']> = (row) =>
-    state.allColumns.some((col) => invalidCellKeys.has(`${row.key}:${col.id}`))
-      ? { messages: [t('cairo.editableTable.row.invalidCells.tooltip')] }
+  const rowStatus: NonNullable<TableVirtualProps<T, F>['rowStatus']> = (
+    row,
+  ) => {
+    const count = state.allColumns.filter((col) =>
+      invalidCellKeys.has(`${row.key}:${col.id}`),
+    ).length;
+    return count
+      ? {
+          messages: [
+            t('cairo.editableTable.row.invalidFields.tooltip', { count }),
+          ],
+        }
       : null;
+  };
 
   return (
     <PatternsFieldsProvider>

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

@@ -1,5 +1,8 @@
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
-import { AddItemUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import {
+  AddItemUniDriver,
+  TooltipUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
 import { TableUniDriver } from '../Table/Table.uni.driver';
 import { EditableCellUniDriver } from './EditableCell.uni.driver';
 import { EditableTableContextMenuUniDriver } from './EditableTableContextMenu.uni.driver';
@@ -75,6 +78,17 @@ export function EditableTableUniDriver(base: UniDriver, body: UniDriver) {
         )
         .exists(),
 
+    /** Text of the tooltip on the row's error indicator, or null when the row
+     *  has no error. WDS renders it in a Tooltip, so it hovers the indicator
+     *  and reads the popover — the text is not in the DOM otherwise. */
+    getRowErrorMessage: (rowKey: string) =>
+      TooltipUniDriver(
+        base.$(
+          `[data-hook="table-row-${rowKey}"] [data-hook="row-status-cell"] [data-content-hook]`,
+        ),
+        body,
+      ).getTooltipText(),
+
     /** Wait for at least one data row to render */
     waitForRow: (timeout?: number) => getRows().get(0).wait(timeout),
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "HeaderActionsPopover3908657468";
+var _namespace_ = "HeaderActionsPopover889934995";
 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":"HeaderActionsPopover3908657468__root"};
+export var classes = {"root":"HeaderActionsPopover889934995__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_ = "CellViewLayout3525274442";
+var _namespace_ = "CellViewLayout3916992801";
 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":"CellViewLayout3525274442__root"};
+export var classes = {"root":"CellViewLayout3916992801__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_ = "Edit1665839409";
+var _namespace_ = "Edit3887131894";
 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":"Edit1665839409__root","addressInput":"Edit1665839409__addressInput"};
+export var classes = {"root":"Edit3887131894__root","addressInput":"Edit3887131894__addressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};