@wix/patterns 1.467.0 → 1.468.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.468.0";
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns",
-  "version": "1.467.0",
+  "version": "1.468.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -224,11 +224,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.374.0",
+    "@wix/bex-utils": "2.161.0",
     "@wix/essentials": "^0.1.26",
-    "@wix/patterns-fields": "1.95.0",
-    "@wix/patterns-fields-utils": "1.76.0",
+    "@wix/patterns-fields": "1.96.0",
+    "@wix/patterns-fields-utils": "1.77.0",
     "@wix/sdk": "^1.15.22",
     "@wix/wix-style-react-incubator": "^3.23.1",
     "@wix/wix-ui-test-utils": "^1.1.9",
@@ -291,7 +291,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.136.0",
     "@wix/ci-build-info": "^1.0.0",
     "@wix/crm": "^1.0.93",
     "@wix/dashboard": "^1.3.39",
@@ -452,5 +452,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "41dbade7f22cf7b9c99c0e89520a5a36c79e808fdf83918273553ecf"
+  "falconPackageHash": "0b5aeccf48d5fbba656f6989fe57930b2f3eb793aa99810c3c40937a"
 }

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_ = "CardContainer179446655";
 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":"CardContainer179446655__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_ = "CmsFieldForm2296801681";
 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":"CmsFieldForm2296801681__root","fullBleedDivider":"CmsFieldForm2296801681__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_ = "CmsFieldModal2787546348";
 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":"CmsFieldModal2787546348__root","modal":"CmsFieldModal2787546348__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_ = "ValidationAndDefaultsSection2053269587";
 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":"ValidationAndDefaultsSection2053269587__root","accordionWrapper":"ValidationAndDefaultsSection2053269587__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_ = "Collapse560640468";
 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":"Collapse560640468__root","exit":"Collapse560640468__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_ = "CollectionPage801811228";
 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":"CollectionPage801811228__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_ = "CollectionSectionHeader3985538636";
 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":"CollectionSectionHeader3985538636__root","summaryIcon":"CollectionSectionHeader3985538636__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_ = "CollectionTable2794573160";
 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":"CollectionTable2794573160__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_ = "CollectionTableWSRTable2573995063";
+var _namespace_ = "CollectionTableWSRTable1039809708";
 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":"CollectionTableWSRTable1039809708__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_ = "CollectionToolbar2384329588";
 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":"CollectionToolbar2384329588__root","right":"CollectionToolbar2384329588__right","left":"CollectionToolbar2384329588__left","fullWidth":"CollectionToolbar2384329588__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_ = "SearchOrCustomFilter3401884258";
 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":"SearchOrCustomFilter3401884258__root","search":"SearchOrCustomFilter3401884258__search","searchMobile":"SearchOrCustomFilter3401884258__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_ = "AutoCompleteReadonly2555179000";
 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":"AutoCompleteReadonly2555179000__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_ = "ViewsDropdown520767598";
 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":"ViewsDropdown520767598__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_ = "DragHandle3454605988";
 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":"DragHandle3454605988__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_ = "EditableCell1770231380";
 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":"EditableCell1770231380__root","errorMessage":"EditableCell1770231380__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,11 +108,16 @@ 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);

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_ = "HeaderActionsPopover1067728408";
 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":"HeaderActionsPopover1067728408__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_ = "CellViewLayout1002375023";
 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":"CellViewLayout1002375023__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_ = "Edit239199024";
 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":"Edit239199024__root","addressInput":"Edit239199024__addressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -20,7 +20,9 @@ export interface AddressCellTypeConfig {
  * popover focus handling, and Enter-to-select are owned by AddressInput;
  * here we only forward the cell-framework callbacks.
  */
-export const AddressEdit: React.FC<CellEditProps<Address | undefined>> = ({
+export const AddressEdit: React.FC<
+  CellEditProps<Address | null | undefined>
+> = ({
   value,
   onChange,
   onCommit,
@@ -45,6 +47,7 @@ export const AddressEdit: React.FC<CellEditProps<Address | undefined>> = ({
     (e: React.KeyboardEvent) => {
       if (e.key === 'Escape') {
         e.preventDefault();
+        e.stopPropagation();
         onCancel();
       }
     },
@@ -75,8 +78,8 @@ export const AddressEdit: React.FC<CellEditProps<Address | undefined>> = ({
             inputRef.current = instance;
           }
         }}
-        value={value}
-        onChange={onChange}
+        value={value ?? undefined}
+        onChange={(address) => onChange(address ?? null)}
         onSelectAddress={onCommit}
         atlasService={atlasService}
         initialSearchText={initialSearchText}

package/src/components/EditableTable/cellTypes/address/Edit.uni.driver.ts

@@ -1,5 +1,6 @@
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import { baseUniDriverFactory } from '../../../../unidriver';
+import { AddressInputUniDriver } from '@wix/design-system/dist/testkit/unidriver';
 
 const { fireEvent = null } =
   process.env.NODE_ENV === 'test'
@@ -11,19 +12,23 @@ const { fireEvent = null } =
       })()
     : {};
 
-export function AddressEditUniDriver(base: UniDriver) {
+export function AddressEditUniDriver(base: UniDriver, body: UniDriver) {
+  const addressInput = AddressInputUniDriver(
+    base.$('[data-hook="address-input"]'),
+    body,
+  );
   const getInput = () => base.$('input');
   const getNativeInput = async () =>
     (await getInput().getNative()) as HTMLInputElement | null;
 
   return {
     ...baseUniDriverFactory(base),
-    getValue: async () => {
-      const el = await getNativeInput();
-      return el?.value ?? '';
-    },
-    keyDown: async (key: string) => {
-      await getInput().pressKey(key as any);
+    getValue: addressInput.getInputValue,
+    typeValue: addressInput.enterText,
+    clickAtOption: addressInput.clickAtOption,
+    getAmountOfItems: addressInput.getAmountOfItems,
+    keyDown: async (key: Parameters<UniDriver['pressKey']>[0]) => {
+      await getInput().pressKey(key);
     },
     /**
      * Blur the input as if focus moved outside the cell. relatedTarget defaults
@@ -31,7 +36,9 @@ export function AddressEditUniDriver(base: UniDriver) {
      */
     blurOutside: async () => {
       const el = await getNativeInput();
-      if (!el) return;
+      if (!el) {
+        return;
+      }
       fireEvent.blur(el, { relatedTarget: document.body });
     },
   };

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

@@ -4,10 +4,10 @@ import type { Address } from '@wix/patterns-fields';
 import type { CellViewProps } from '../../types';
 import { CellViewLayout } from '../CellViewLayout';
 
-export const AddressCellView: React.FC<CellViewProps<Address | undefined>> = ({
-  value,
-}) => (
+export const AddressCellView: React.FC<
+  CellViewProps<Address | null | undefined>
+> = ({ value }) => (
   <CellViewLayout>
-    <CellAddressView data={value} />
+    <CellAddressView data={value ?? undefined} />
   </CellViewLayout>
 );