@wix/patterns 1.489.0 → 1.492.0

package/dist/types/utils/fieldTypePrefixIcons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fieldTypePrefixIcons.d.ts","sourceRoot":"","sources":["../../../src/utils/fieldTypePrefixIcons.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAiDlE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvD;;;;GAIG;AACH,MAAM,MAAM,SAAS,GACjB,YAAY,GACZ,WAAW,GACX,QAAQ,GACR,SAAS,GACT,MAAM,GACN,WAAW,GACX,UAAU,GACV,MAAM,GACN,KAAK,GACL,OAAO,GACP,OAAO,GACP,eAAe,GACf,OAAO,GACP,UAAU,GACV,gBAAgB,GAChB,WAAW,GACX,cAAc,GACd,WAAW,GACX,iBAAiB,GACjB,QAAQ,GACR,OAAO,GACP,SAAS,GACT,OAAO,GACP,SAAS,GACT,SAAS,GACT,UAAU,GACV,UAAU,GACV,OAAO,GACP,cAAc,CAAC;AAEnB;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAEpD;AAoED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,IAAc,EACd,KAAK,GACN,EAAE;IACD,SAAS,CAAC,EAAE,SAAS,GAAG,iBAAiB,CAAC;IAC1C,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B;wCACoC;IACpC,KAAK,CAAC,EAAE;QAAE,KAAK,EAAE,aAAa,CAAC;QAAC,MAAM,EAAE,aAAa,CAAA;KAAE,CAAC;CACzD,GAAG,SAAS,CAoCZ"}
+{"version":3,"file":"fieldTypePrefixIcons.d.ts","sourceRoot":"","sources":["../../../src/utils/fieldTypePrefixIcons.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAiDlE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvD;;;;GAIG;AACH,MAAM,MAAM,SAAS,GACjB,YAAY,GACZ,WAAW,GACX,QAAQ,GACR,SAAS,GACT,MAAM,GACN,WAAW,GACX,UAAU,GACV,MAAM,GACN,KAAK,GACL,OAAO,GACP,OAAO,GACP,eAAe,GACf,OAAO,GACP,UAAU,GACV,gBAAgB,GAChB,WAAW,GACX,cAAc,GACd,WAAW,GACX,iBAAiB,GACjB,QAAQ,GACR,OAAO,GACP,SAAS,GACT,OAAO,GACP,SAAS,GACT,SAAS,GACT,UAAU,GACV,UAAU,GACV,OAAO,GACP,cAAc,CAAC;AAEnB;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAEpD;AAqED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,IAAc,EACd,KAAK,GACN,EAAE;IACD,SAAS,CAAC,EAAE,SAAS,GAAG,iBAAiB,CAAC;IAC1C,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B;wCACoC;IACpC,KAAK,CAAC,EAAE;QAAE,KAAK,EAAE,aAAa,CAAC;QAAC,MAAM,EAAE,aAAa,CAAA;KAAE,CAAC;CACzD,GAAG,SAAS,CAoCZ"}

package/dist/types/version.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns",
-  "version": "1.489.0",
+  "version": "1.492.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -229,11 +229,11 @@
   ],
   "dependencies": {
     "@wix/agent-platform-bm-sdk": "^1.0.0",
-    "@wix/bex-core": "2.395.0",
-    "@wix/bex-utils": "2.182.0",
+    "@wix/bex-core": "2.398.0",
+    "@wix/bex-utils": "2.185.0",
     "@wix/essentials": "^0.1.26",
-    "@wix/patterns-fields": "1.117.0",
-    "@wix/patterns-fields-utils": "1.98.0",
+    "@wix/patterns-fields": "1.120.0",
+    "@wix/patterns-fields-utils": "1.101.0",
     "@wix/sdk": "^1.15.22",
     "@wix/wix-style-react-incubator": "^3.23.1",
     "@wix/wix-ui-test-utils": "^1.1.9",
@@ -296,11 +296,11 @@
     "@wix/awaiter-utils": "^1.0.76",
     "@wix/babel-cli": "^1.11.0",
     "@wix/business-manager-api": "^1.470.0",
-    "@wix/cairo-integration-utils": "1.157.0",
+    "@wix/cairo-integration-utils": "1.160.0",
     "@wix/ci-build-info": "^1.0.0",
     "@wix/crm": "^1.0.93",
     "@wix/dashboard": "^1.3.39",
-    "@wix/design-system": "^1.330.2",
+    "@wix/design-system": "^1.336.0",
     "@wix/eslint-config-yoshi": "^6.74.0",
     "@wix/fe-essentials-standalone": "^1.374.0",
     "@wix/jest-yoshi-preset-base": "^6.74.0",
@@ -458,5 +458,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "627243467dad871d9db25d54f2d644d9d3b239be0a4ba52df770748a"
+  "falconPackageHash": "f1a0de22bac3d921cd53e45b02b847fec550700e5acf7ff51879b69d"
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CardContainer1555245513";
+var _namespace_ = "CardContainer1443304436";
 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":"CardContainer1555245513__root"};
+export var classes = {"root":"CardContainer1443304436__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_ = "CmsFieldForm2325819247";
+var _namespace_ = "CmsFieldForm416585662";
 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":"CmsFieldForm2325819247__root","fullBleedDivider":"CmsFieldForm2325819247__fullBleedDivider"};
+export var classes = {"root":"CmsFieldForm416585662__root","fullBleedDivider":"CmsFieldForm416585662__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_ = "CmsFieldModal3641793346";
+var _namespace_ = "CmsFieldModal2187824315";
 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":"CmsFieldModal3641793346__root","modal":"CmsFieldModal3641793346__modal"};
+export var classes = {"root":"CmsFieldModal2187824315__root","modal":"CmsFieldModal2187824315__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_ = "ValidationAndDefaultsSection1496497963";
+var _namespace_ = "ValidationAndDefaultsSection2334195286";
 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":"ValidationAndDefaultsSection1496497963__root","accordionWrapper":"ValidationAndDefaultsSection1496497963__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection2334195286__root","accordionWrapper":"ValidationAndDefaultsSection2334195286__accordionWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/toFieldSpec.ts

@@ -1,14 +1,11 @@
 import type {
-  FieldSpec,
   NonReferenceField,
   StringLengthRange,
 } from '../../types/SchemaConfig';
 import type { FieldProperties, FieldRules } from './types';
 
-export const toFieldSpec = (
-  properties: FieldProperties,
-  rules: FieldRules,
-): FieldSpec => {
+// Removed return type to solve a TS issue. Anyway this code will be deprecated soon
+export const toFieldSpec = (properties: FieldProperties, rules: FieldRules) => {
   const { type, name, isPii, helpText } = properties;
   const { validationRules } = rules;
   const trimmedHelpText = helpText.trim();

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse2411328901";
+var _namespace_ = "Collapse2599402372";
 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":"Collapse2411328901__root","exit":"Collapse2411328901__exit"};
+export var classes = {"root":"Collapse2599402372__root","exit":"Collapse2599402372__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_ = "CollectionPage1852881618";
+var _namespace_ = "CollectionPage1155336608";
 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":"CollectionPage1852881618__root"};
+export var classes = {"root":"CollectionPage1155336608__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_ = "CollectionSectionHeader2779116233";
+var _namespace_ = "CollectionSectionHeader819655064";
 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":"CollectionSectionHeader2779116233__root","summaryIcon":"CollectionSectionHeader2779116233__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader819655064__root","summaryIcon":"CollectionSectionHeader819655064__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_ = "CollectionTable661149431";
+var _namespace_ = "CollectionTable2651347538";
 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":"CollectionTable661149431__root"};
+export var classes = {"root":"CollectionTable2651347538__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -10,15 +10,3 @@
   right: -4px !important;
   z-index: 1;
 }
-
-.titlebar {
-  -st-states: harmony;
-}
-
-/* WDS sizes a header cell in a virtual (flex) row as 24px + padding: 36px
-   under odeditor, in a 48px header row, which leaves a strip under the header.
-   Remove once WDS sizes these cells to the header row. */
-.titlebar:harmony :global(th) {
-  height: auto;
-  align-self: stretch;
-}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionTableWSRTable4123018196";
+var _namespace_ = "CollectionTableWSRTable1803614894";
 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":"CollectionTableWSRTable4123018196__root","titlebar":"CollectionTableWSRTable4123018196__titlebar"};
+export var classes = {"root":"CollectionTableWSRTable1803614894__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionTable/CollectionTableWSRTable.tsx

@@ -313,9 +313,6 @@ function _CollectionTableWSRTable<U, T, F extends FiltersMap = FiltersMap>(
               {!hideTitleBar && (
                 <div
                   data-hook="titlebar-a11y-wrapper"
-                  className={wsrTableSt(wsrTableClasses.titlebar, {
-                    harmony: isBmHarmonyTheme,
-                  })}
                   ref={(el) => {
                     table.headerElement = el;
                   }}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar138452636";
+var _namespace_ = "CollectionToolbar2015552195";
 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":"CollectionToolbar138452636__root","right":"CollectionToolbar138452636__right","left":"CollectionToolbar138452636__left","fullWidth":"CollectionToolbar138452636__fullWidth"};
+export var classes = {"root":"CollectionToolbar2015552195__root","right":"CollectionToolbar2015552195__right","left":"CollectionToolbar2015552195__left","fullWidth":"CollectionToolbar2015552195__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_ = "SearchOrCustomFilter2631540064";
+var _namespace_ = "SearchOrCustomFilter3470394853";
 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":"SearchOrCustomFilter2631540064__root","search":"SearchOrCustomFilter2631540064__search","searchMobile":"SearchOrCustomFilter2631540064__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter3470394853__root","search":"SearchOrCustomFilter3470394853__search","searchMobile":"SearchOrCustomFilter3470394853__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_ = "AutoCompleteReadonly2847630252";
+var _namespace_ = "AutoCompleteReadonly1883018371";
 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":"AutoCompleteReadonly2847630252__root"};
+export var classes = {"root":"AutoCompleteReadonly1883018371__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_ = "ViewsDropdown2244481173";
+var _namespace_ = "ViewsDropdown4266640330";
 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":"ViewsDropdown2244481173__root"};
+export var classes = {"root":"ViewsDropdown4266640330__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomFieldModal/CustomFieldFormPiiFields.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CustomFieldFormPiiFields3354195506";
+var _namespace_ = "CustomFieldFormPiiFields2129874859";
 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":"CustomFieldFormPiiFields3354195506__root","tooltipText":"CustomFieldFormPiiFields3354195506__tooltipText"};
+export var classes = {"root":"CustomFieldFormPiiFields2129874859__root","tooltipText":"CustomFieldFormPiiFields2129874859__tooltipText"};
 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_ = "DragHandle1510203898";
+var _namespace_ = "DragHandle1845597267";
 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":"DragHandle1510203898__root"};
+export var classes = {"root":"DragHandle1845597267__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -16,6 +16,7 @@
 @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-placeholder);
 @property st-global(--wds-color-text-disabled);
 @property st-global(--wds-color-black-700);
 @property st-global(--wsr-color-D10-30);
@@ -50,9 +51,9 @@
   overflow: visible;
 }
 
-:global(td):has(> .root:harmony:focused),
-:global(td):has(> .root:harmony:editing),
-:global(td):has(> .root:harmony [data-inner-focused]) {
+:global(td:not([data-sticky='true'])):has(> .root:harmony:focused),
+:global(td:not([data-sticky='true'])):has(> .root:harmony:editing),
+:global(td:not([data-sticky='true'])):has(> .root:harmony [data-inner-focused]) {
   z-index: 4;
 }
 
@@ -63,6 +64,17 @@
   z-index: 4;
 }
 
+/* Pinned cells must cover focused cells and their inline editors. */
+:global(tr):has(> :global(td) > .root)
+  > :global(td[data-sticky='true']) {
+  z-index: 5;
+}
+
+/* Keep the focus border above neighbouring pinned cells. */
+:global(td[data-sticky='true']):has(> .root:focused) {
+  z-index: 6;
+}
+
 /* WDS DataTable sets the row height through td padding (rowVerticalPadding),
    which adds to the cell height instead of containing it. Zero it on the whole
    row — the checkbox and row-number cells keep the row tall otherwise. */
@@ -159,12 +171,17 @@
 
 /* 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. */
+   set none. The placeholder token is greyed too, or a placeholder in a cell
+   would stay darker than the greyed text around it. */
 .root:readOnly {
   --wds-color-text-standard-primary: var(
     --wds-color-text-disabled,
     var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))
   );
+  --wds-color-text-placeholder: var(
+    --wds-color-text-disabled,
+    var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))
+  );
   color: var(--wds-color-text-standard-primary);
 }
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell2863863235";
+var _namespace_ = "EditableCell3938835703";
 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":"EditableCell2863863235__root","errorMessage":"EditableCell2863863235__errorMessage"};
+export var classes = {"root":"EditableCell3938835703__root","errorMessage":"EditableCell3938835703__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","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","wds-input-value-font-size-small":"--wds-input-value-font-size-small","wds-input-value-font-line-height-small":"--wds-input-value-font-line-height-small","wds-font-size-body-small":"--wds-font-size-body-small","wds-font-line-height-body-small":"--wds-font-line-height-body-small","wsr-text-font-size-small":"--wsr-text-font-size-small","wsr-text-line-height-small":"--wsr-text-line-height-small","wds-input-padding-horizontal-small":"--wds-input-padding-horizontal-small"}; 
+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-placeholder":"--wds-color-text-placeholder","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","wds-input-value-font-size-small":"--wds-input-value-font-size-small","wds-input-value-font-line-height-small":"--wds-input-value-font-line-height-small","wds-font-size-body-small":"--wds-font-size-body-small","wds-font-line-height-body-small":"--wds-font-line-height-body-small","wsr-text-font-size-small":"--wsr-text-font-size-small","wsr-text-line-height-small":"--wsr-text-line-height-small","wds-input-padding-horizontal-small":"--wds-input-padding-horizontal-small"}; 
 
 
 

package/src/components/EditableTable/EditableCell.tsx

@@ -39,7 +39,6 @@ function _EditableCell<T, F extends FiltersMap>({
   const isRowActive = cellInteraction.isRowActive(rowKey);
   const selectionBorder = cellInteraction.getSelectionBorder(rowKey, columnId);
   const copiedBorder = clipboard.getCopiedBorder(rowKey, columnId);
-  const isEditable = state.isCellEditable(rowKey, columnId);
   const canEdit = state.canEditCell(rowKey, columnId);
 
   const handleClick = useCallback(
@@ -208,7 +207,7 @@ function _EditableCell<T, F extends FiltersMap>({
           rowActive: isRowActive,
           rangeSelected: isSelected && isRangeSelection,
           invalid: !cellValidation.valid,
-          readOnly: !isEditable,
+          readOnly: !canEdit,
           showEditWhenFocused: !!resolved.showEditWhenFocused,
           growable: !!resolved.growable,
           selectionTop: isRangeSelection && selectionBorder.top,
@@ -226,7 +225,7 @@ function _EditableCell<T, F extends FiltersMap>({
         onKeyDown={cellKeyboard.onKeyDown}
         role="gridcell"
         aria-selected={isSelected}
-        aria-readonly={!isEditable}
+        aria-readonly={!canEdit}
         aria-invalid={!cellValidation.valid || undefined}
         tabIndex={isFocused ? 0 : -1}
         data-row-key={rowKey}

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

@@ -11,6 +11,7 @@ import { ReferenceViewUniDriver } from './cellTypes/reference/View.uni.driver';
 import { MultiReferenceViewUniDriver } from './cellTypes/multiReference/View.uni.driver';
 import { AddressEditUniDriver } from './cellTypes/address/Edit.uni.driver';
 import { ObjectEditUniDriver } from './cellTypes/object/Edit.uni.driver';
+import { MediaImageEditUniDriver } from './cellTypes/mediaImage/Edit.uni.driver';
 
 export function EditableCellUniDriver(base: UniDriver, body: UniDriver) {
   return {
@@ -103,6 +104,9 @@ export function EditableCellUniDriver(base: UniDriver, body: UniDriver) {
     /** Get the object (JSON) cell edit driver (for object columns) */
     getObjectEdit: () => ObjectEditUniDriver(base, body),
 
+    /** Get the media image cell edit driver (for mediaImage columns) */
+    getMediaImageEdit: () => MediaImageEditUniDriver(base, body),
+
     /** Right-click the cell (opens context menu) */
     rightClick: async () => {
       const el = await base.getNative();

package/src/components/EditableTable/EditableTableContextMenu.tsx

@@ -30,9 +30,10 @@ export interface EditableTableContextMenuProps<T, F extends FiltersMap> {
 }
 
 const MENU_WIDTH = 230;
-const ITEM_HEIGHT = 36;
+const ITEM_HEIGHT = 30;
 const DIVIDER_HEIGHT = 9;
-const PADDING = 16;
+const POSITIONING_ALLOWANCE = 16;
+const SURFACE_PADDING_Y = 12;
 const OFFSET_X = 4;
 const OFFSET_Y = 4;
 const CONTEXT_MENU_Z_INDEX = 5001;
@@ -56,7 +57,7 @@ const buildMenuAction = ({
   disabledDescription,
   ...params
 }: ListItemActionBuilderParams) => {
-  const built = listItemActionBuilder(params);
+  const built = listItemActionBuilder({ ...params, size: 'small' });
   if (!params.disabled || !disabledDescription) {
     return built;
   }
@@ -380,7 +381,10 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
   ).length;
   const itemCount = options.length - dividerCount;
   const estimatedHeight =
-    itemCount * ITEM_HEIGHT + dividerCount * DIVIDER_HEIGHT + PADDING;
+    itemCount * ITEM_HEIGHT +
+    dividerCount * DIVIDER_HEIGHT +
+    SURFACE_PADDING_Y * 2 +
+    POSITIONING_ALLOWANCE;
 
   const x =
     position.x + OFFSET_X + MENU_WIDTH > window.innerWidth
@@ -403,6 +407,7 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
         background: SURFACE_BACKGROUND,
         borderRadius: SURFACE_BORDER_RADIUS,
         boxShadow: SURFACE_BOX_SHADOW,
+        padding: `var(--wds-space-200, ${SURFACE_PADDING_Y}px) 0`,
         overflow: 'hidden',
       }}
       onMouseDown={(e) => e.preventDefault()}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "HeaderActionsPopover888359693";
+var _namespace_ = "HeaderActionsPopover4287542412";
 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":"HeaderActionsPopover888359693__root"};
+export var classes = {"root":"HeaderActionsPopover4287542412__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_ = "CellViewLayout1471818589";
+var _namespace_ = "CellViewLayout3111874611";
 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":"CellViewLayout1471818589__root"};
+export var classes = {"root":"CellViewLayout3111874611__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "JsonInputEdit1323796447";
+var _namespace_ = "JsonInputEdit258974341";
 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":"JsonInputEdit1323796447__root","jsonInput":"JsonInputEdit1323796447__jsonInput"};
+export var classes = {"root":"JsonInputEdit258974341__root","jsonInput":"JsonInputEdit258974341__jsonInput"};
 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_ = "Edit1758884413";
+var _namespace_ = "Edit566521424";
 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":"Edit1758884413__root","addressInput":"Edit1758884413__addressInput"};
+export var classes = {"root":"Edit566521424__root","addressInput":"Edit566521424__addressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};