@wix/patterns 1.374.0 → 1.377.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns",
-  "version": "1.374.0",
+  "version": "1.377.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -159,8 +159,8 @@
   },
   "sideEffects": false,
   "scripts": {
-    "build": "yarn stc:all && yoshi-library build && yarn docs:gen",
-    "start": "yarn stc:all && yoshi-library start",
+    "build": "yarn generate-translation-keys && yarn stc:all && yoshi-library build && yarn docs:gen",
+    "start": "yarn generate-translation-keys && yarn stc:all && yoshi-library start",
     "output-cairo-version": "ts-node -T --project tsconfig.scripts.json scripts/output-cairo-version.ts",
     "check-wix-design-system-version": "ts-node -T --project tsconfig.scripts.json scripts/check-wix-design-system-version.ts",
     "test": "yarn test:unit",
@@ -171,6 +171,7 @@
     "lint": "yoshi-library lint",
     "type-check": "tsc --noEmit",
     "type-check:tests": "tsc -p tsconfig.tests.json",
+    "type-check:handoffs": "tsc -p tsconfig.handoffs.json",
     "coverage:publish": "janet deploy --config janet/coverage.janet.json --timeout 600000",
     "visual-e2e:start": "yarn stc:all && STORYBOOK_VISUAL_E2E=true start-storybook --no-version-updates -c .storybook-visual-e2e -p 49896",
     "docs:start": "STORYBOOK_DOCS=true start-storybook --no-version-updates -c .storybook -p 49895 ",
@@ -182,7 +183,8 @@
     "stc:src": "stc --srcDir=./src --outDir=src --esm --esmExt=.js --inlineRuntime --optimize",
     "stc:ts": "ts-node -T scripts/rename-st-css-files.ts",
     "sled:gen": "ts-node -T --project tsconfig.scripts.json scripts/generate-sled-story.ts",
-    "docs:gen": "ts-node -T --project tsconfig.docs-gen.json scripts/generate-component-docs.ts"
+    "docs:gen": "ts-node -T --project tsconfig.docs-gen.json scripts/generate-component-docs.ts",
+    "generate-translation-keys": "babel-cli"
   },
   "files": [
     "dist/cjs",
@@ -212,10 +214,10 @@
   ],
   "dependencies": {
     "@wix/agent-platform-bm-sdk": "^1.0.0",
-    "@wix/bex-core": "2.291.0",
-    "@wix/bex-utils": "2.88.0",
+    "@wix/bex-core": "2.294.0",
+    "@wix/bex-utils": "2.89.0",
     "@wix/essentials": "^0.1.26",
-    "@wix/patterns-fields": "1.9.0",
+    "@wix/patterns-fields": "1.12.0",
     "@wix/sdk": "^1.15.22",
     "@wix/wix-style-react-incubator": "3.13.0",
     "@wix/wix-ui-test-utils": "^1.1.9",
@@ -276,15 +278,17 @@
     "@wix/ambassador-contacts-v5-contact": "^1.0.0",
     "@wix/ambassador-ecom-v1-order": "^1.0.0",
     "@wix/awaiter-utils": "^1.0.76",
+    "@wix/babel-cli": "^1.11.0",
     "@wix/business-manager-api": "^1.470.0",
-    "@wix/cairo-integration-utils": "1.65.0",
+    "@wix/cairo-integration-utils": "1.66.0",
     "@wix/ci-build-info": "^1.0.0",
     "@wix/crm": "^1.0.93",
     "@wix/dashboard": "^1.3.39",
-    "@wix/design-system": "^1.262.0",
+    "@wix/design-system": "^1.269.0",
     "@wix/eslint-config-yoshi": "^6.74.0",
     "@wix/fe-essentials-standalone": "^1.374.0",
     "@wix/jest-yoshi-preset-base": "^6.74.0",
+    "@wix/ricos": "^10.155.2",
     "@wix/sled-test-runner": "^2.0.403",
     "@wix/unidriver-core": "^1.0.0",
     "@wix/wix-storybook-utils": "^4.1.13",
@@ -302,6 +306,7 @@
     "react": "16.14.0",
     "react-codemirror-runmode": "^1.0.5",
     "react-dom": "16.14.0",
+    "react-element-to-jsx-string": "^14.3.4",
     "react-markdown": "^8.0.7",
     "react-router-dom": "^6.23.1",
     "react-syntax-highlighter": "^15.5.0",
@@ -358,7 +363,8 @@
       "^(\\.{1,2}/.*)\\.js$": [
         "$1.js",
         "$1.ts"
-      ]
+      ],
+      "^@wix/patterns-fields/testkit$": "<rootDir>/../../packages/fields/dist/cjs/exports/testkit.js"
     }
   },
   "eslintConfig": {
@@ -431,5 +437,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "88353ed4f5e40f1d1f604ba644b7c96963dbc37042ea49c0d9db4888"
+  "falconPackageHash": "0ebc3e906c16374385c481bdfcaeb1411a92975fb9d0ef63881ff6b2"
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CardContainer1283739482";
+var _namespace_ = "CardContainer2863952072";
 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":"CardContainer1283739482__root"};
+export var classes = {"root":"CardContainer2863952072__root"};
 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_ = "Collapse265289105";
+var _namespace_ = "Collapse806816417";
 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":"Collapse265289105__root","exit":"Collapse265289105__exit"};
+export var classes = {"root":"Collapse806816417__root","exit":"Collapse806816417__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_ = "CollectionPage1308022843";
+var _namespace_ = "CollectionPage1253913455";
 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":"CollectionPage1308022843__root"};
+export var classes = {"root":"CollectionPage1253913455__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_ = "CollectionSectionHeader3442200018";
+var _namespace_ = "CollectionSectionHeader2738490058";
 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":"CollectionSectionHeader3442200018__root","summaryIcon":"CollectionSectionHeader3442200018__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader2738490058__root","summaryIcon":"CollectionSectionHeader2738490058__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_ = "CollectionTable410750819";
+var _namespace_ = "CollectionTable3646023581";
 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":"CollectionTable410750819__root"};
+export var classes = {"root":"CollectionTable3646023581__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_ = "CollectionToolbar562579725";
+var _namespace_ = "CollectionToolbar2434720965";
 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":"CollectionToolbar562579725__root","left":"CollectionToolbar562579725__left","right":"CollectionToolbar562579725__right","fullWidth":"CollectionToolbar562579725__fullWidth"};
+export var classes = {"root":"CollectionToolbar2434720965__root","left":"CollectionToolbar2434720965__left","right":"CollectionToolbar2434720965__right","fullWidth":"CollectionToolbar2434720965__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_ = "SearchOrCustomFilter2741681105";
+var _namespace_ = "SearchOrCustomFilter3862038183";
 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":"SearchOrCustomFilter2741681105__root","search":"SearchOrCustomFilter2741681105__search","searchMobile":"SearchOrCustomFilter2741681105__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter3862038183__root","search":"SearchOrCustomFilter3862038183__search","searchMobile":"SearchOrCustomFilter3862038183__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_ = "AutoCompleteReadonly1766415372";
+var _namespace_ = "AutoCompleteReadonly3808602463";
 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":"AutoCompleteReadonly1766415372__root"};
+export var classes = {"root":"AutoCompleteReadonly3808602463__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_ = "ViewsDropdown2281813471";
+var _namespace_ = "ViewsDropdown782432463";
 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":"ViewsDropdown2281813471__root"};
+export var classes = {"root":"ViewsDropdown782432463__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomColumnsPanel/ColumnListTableListItem.tsx

@@ -133,7 +133,11 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
         options={[
           {
             value: (
-              <Box {...(prefixIcon ? { verticalAlign: 'middle' } : {})}>
+              <Box
+                {...(prefixIcon ? { verticalAlign: 'middle' } : {})}
+                minWidth={0}
+                flexGrow={1}
+              >
                 <div
                   style={{
                     ...(prefixIcon
@@ -142,8 +146,7 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
                     padding: '0',
                     cursor: checkboxDisabled ? undefined : 'pointer',
                     overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
+                    minWidth: 0,
                   }}
                   onClick={() => {
                     if (checkboxDisabled) {
@@ -166,6 +169,8 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
                     size="small"
                     weight="normal"
                     dataHook="tableListItem-label"
+                    ellipsis
+                    appendTo="window"
                   >
                     {column.name || column.title || column.id}
                   </Text>
@@ -203,6 +208,7 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
                     </Box>
                   ),
                   align: 'right' as const,
+                  width: 'auto',
                 },
               ]
             : []),

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

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

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

@@ -5,11 +5,12 @@
 
 :global(td):has(> .root) {
   position: relative;
+  overflow: visible;
   min-height: 24px;
 }
 
 .root {
-  -st-states: editing, focused, selected, invalid, selectionTop, selectionBottom,
+  -st-states: editing, focused, selected, invalid, typeToEdit, selectionTop, selectionBottom,
     selectionLeft, selectionRight, copiedTop, copiedBottom, copiedLeft,
     copiedRight;
   display: flex;
@@ -44,12 +45,22 @@
   z-index: 3;
   user-select: auto;
   overflow: visible;
+  bottom: auto;
+  min-height: 100%;
 }
 
-.root:selectionTop { border-top: 2px solid var(--wsr-color-B10); }
-.root:selectionBottom { border-bottom: 2px solid var(--wsr-color-B10); }
-.root:selectionLeft { border-left: 2px solid var(--wsr-color-B10); }
-.root:selectionRight { border-right: 2px solid var(--wsr-color-B10); }
+.root:selectionTop:not(:editing) { border-top: 2px solid var(--wsr-color-B10); }
+.root:selectionBottom:not(:editing) { border-bottom: 2px solid var(--wsr-color-B10); }
+.root:selectionLeft:not(:editing) { border-left: 2px solid var(--wsr-color-B10); }
+.root:selectionRight:not(:editing) { border-right: 2px solid var(--wsr-color-B10); }
+
+/* Type-to-edit cells (text, number, url, email): the keystroke lands directly in
+   the input, so keeping the selection border alongside the editing shadow is
+   intentional — it communicates "this cell is selected and being typed into". */
+.root:selectionTop:editing:typeToEdit { border-top: 2px solid var(--wsr-color-B10); }
+.root:selectionBottom:editing:typeToEdit { border-bottom: 2px solid var(--wsr-color-B10); }
+.root:selectionLeft:editing:typeToEdit { border-left: 2px solid var(--wsr-color-B10); }
+.root:selectionRight:editing:typeToEdit { border-right: 2px solid var(--wsr-color-B10); }
 
 .root:invalid:not(:editing) {
   background: rgba(229, 0, 77, 0.06);

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell4254905620";
+var _namespace_ = "EditableCell1967585030";
 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":"EditableCell4254905620__root","validationIndicator":"EditableCell4254905620__validationIndicator"};
+export var classes = {"root":"EditableCell1967585030__root","validationIndicator":"EditableCell1967585030__validationIndicator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableCell.tsx

@@ -6,6 +6,7 @@ import { StatusWarningFilledSmall } from '@wix/wix-ui-icons-common';
 import { st, classes } from './EditableCell.st.css.js';
 import type { EditableTableState } from '../../state/EditableTable';
 import { useCellFocusAndEditing } from './useCellFocusAndEditing';
+import { Focusable } from './types';
 
 export interface EditableCellProps<T, F extends FiltersMap> {
   state: EditableTableState<T, F>;
@@ -19,12 +20,12 @@ function _EditableCell<T, F extends FiltersMap>({
   columnId,
 }: EditableCellProps<T, F>) {
   const { cellInteraction, clipboard } = state;
-  const cellRef = useRef<HTMLDivElement>(null);
-  const editInputRef = useRef<any>(null);
+  const cellRef = useRef<HTMLDivElement | null>(null);
+  const editInputRef = useRef<Focusable>();
 
   const column = state._columnMap.get(columnId);
   const keyedItem = state._getKeyedItem(rowKey);
-  const resolved = column ? state.resolveCellType(column.cellType) : null;
+  const resolved = column ? state.resolveCellTypeByColumnId(column.id) : null;
   const value = state.getCellDisplayValue(rowKey, columnId);
   const cellValidation = state.getCellValidation(rowKey, columnId);
 
@@ -46,6 +47,7 @@ function _EditableCell<T, F extends FiltersMap>({
   const handleDoubleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation();
+      e.preventDefault();
       state.handleCellDoubleClick(rowKey, columnId);
     },
     [state, rowKey, columnId],
@@ -87,10 +89,11 @@ function _EditableCell<T, F extends FiltersMap>({
   }
 
   const { ViewComponent, EditComponent } = resolved;
-  const editingValue = cellInteraction.editingValue;
   const showValidationIndicator = !cellValidation.valid && !isEditing;
 
-  const showEdit = isFocused && isEditable && EditComponent;
+  const showEdit =
+    (isEditing || (isFocused && isEditable && !!resolved.toggleValue)) &&
+    EditComponent;
 
   return (
     <div
@@ -100,6 +103,7 @@ function _EditableCell<T, F extends FiltersMap>({
         focused: isFocused,
         selected: isSelected,
         invalid: !cellValidation.valid,
+        typeToEdit: !!resolved.onTypeToEdit,
         selectionTop: selectionBorder.top,
         selectionBottom: selectionBorder.bottom,
         selectionLeft: selectionBorder.left,
@@ -130,16 +134,17 @@ function _EditableCell<T, F extends FiltersMap>({
       )}
       {showEdit ? (
         <EditComponent
-          value={editingValue !== undefined ? editingValue : value}
+          value={cellInteraction.editingValue !== undefined ? cellInteraction.editingValue : value}
           onChange={handleChange}
           onCommit={handleCommit}
           onCancel={handleCancel}
           inputRef={editInputRef}
           typeConfig={column.typeConfig}
           editTrigger={cellInteraction.editTrigger}
+          validation={column.validation}
         />
       ) : (
-        <ViewComponent value={value} typeConfig={column.typeConfig} />
+        <ViewComponent value={value} typeConfig={column.typeConfig} validation={column.validation} />
       )}
     </div>
   );

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

@@ -4,7 +4,7 @@ import { TextEditUniDriver } from './cellTypes/text/Edit.uni.driver';
 import { NumberEditUniDriver } from './cellTypes/number/Edit.uni.driver';
 import { UrlEditUniDriver } from './cellTypes/url/Edit.uni.driver';
 import { BooleanEditUniDriver } from './cellTypes/boolean/Edit.uni.driver';
-import { SelectEditUniDriver } from './cellTypes/select/Edit.uni.driver';
+import { SpecificValuesEditUniDriver } from './cellTypes/text/SpecificValuesEdit.uni.driver';
 import { DateEditUniDriver } from './cellTypes/date/Edit.uni.driver';
 
 export function EditableCellUniDriver(base: UniDriver, body: UniDriver) {
@@ -65,8 +65,8 @@ export function EditableCellUniDriver(base: UniDriver, body: UniDriver) {
     /** Get the boolean cell edit driver (for boolean columns) */
     getBooleanEdit: () => BooleanEditUniDriver(base, body),
 
-    /** Get the select cell edit driver (for select columns) */
-    getSelectEdit: () => SelectEditUniDriver(base, body),
+    /** Get the specific-values (autocomplete) edit driver (for text columns with specificValues validation) */
+    getSpecificValuesEdit: () => SpecificValuesEditUniDriver(base, body),
 
     /** Get the date cell edit driver (for date columns) */
     getDateEdit: () => DateEditUniDriver(base, body),

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

@@ -0,0 +1,42 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { PopoverMenuUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import { PopoverMenuUniDriver as PopoverMenuUniDriverFactory } from '@wix/design-system/dist/types/PopoverMenu/PopoverMenu.uni.driver';
+import { UniDriverFactory } from '../uniDriverFactory';
+
+export function EditableColumnHeaderUniDriver(
+  base: UniDriver,
+  body: UniDriver,
+) {
+  const moreButton = base.$('[data-hook$="-more-button"]');
+
+  const getPopoverMenu = async () => {
+    const dataHook = await base.attr('data-hook');
+    return (
+      PopoverMenuUniDriver as UniDriverFactory<PopoverMenuUniDriverFactory>
+    )(body.$(`[data-hook="${dataHook}-menu"]`), body);
+  };
+
+  return {
+    exists: () => moreButton.exists(),
+
+    /** Whether the "..." more button exists */
+    hasMoreButton: () => moreButton.exists(),
+
+    /** Click the "..." button to open the popover menu */
+    clickMoreButton: () => moreButton.click(),
+
+    /** Whether the popover menu is currently open */
+    isMenuOpen: async () => (await getPopoverMenu()).isMenuOpen(),
+
+    /** Number of items in the popover menu */
+    menuItemCount: async () => (await getPopoverMenu()).childrenCount(),
+
+    /** Get the text content of a menu item by index */
+    getMenuItemText: async (index: number) =>
+      (await getPopoverMenu()).itemContentAt(index),
+
+    /** Click a menu item by index */
+    clickMenuItem: async (index: number) =>
+      (await getPopoverMenu()).clickAtChild(index),
+  };
+}

package/src/components/EditableTable/EditableTable.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
+import { PatternsFieldsProvider } from '../../providers/PatternsFieldsProvider';
 import type { FiltersMap, OptionalFiltersMap } from '@wix/bex-core';
 import { TableVirtual, type TableVirtualProps } from '../Table/TableVirtual';
 import {
@@ -9,12 +10,14 @@ import {
 import { EditableCell } from './EditableCell';
 import { EditableTableContextMenu } from './EditableTableContextMenu';
 import { useEditableTableContextMenu } from './useEditableTableContextMenu';
+import { MessageActionModal } from '../ActionModal';
 import { useEditableTableCollectionSyncProps } from './useEditableTableCollectionSyncProps';
 import { useKeyboardNavigation } from './useKeyboardNavigation';
 import { useClipboardHandler } from './useClipboardHandler';
 import { useClearFocusOnBlur } from './useClearFocusOnBlur';
 import { useMouseSweepSelection } from './useMouseSweepSelection';
 import type { TableColumn } from '../../model';
+import { useBuiltInHeaderActions } from './useBuiltInHeaderActions';
 
 export interface EditableTableProps<
   T,
@@ -26,6 +29,9 @@ export interface EditableTableProps<
   /** Column definitions with cell types */
   columns: EditableColumn<T>[];
 
+  /** When true, hides the built-in header actions popover for all columns. */
+  hideHeaderActions?: boolean;
+
   /** data-hook for testkit selectors */
   dataHook?: string;
 }
@@ -36,6 +42,7 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
   const {
     state,
     columns: editableColumns,
+    hideHeaderActions,
     dataHook,
     children,
     ...tableBaseProps
@@ -50,11 +57,18 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
   const { onFocus, onBlur } = useClearFocusOnBlur(state.cellInteraction);
   useMouseSweepSelection(state, containerRef);
 
+  const builtInActions = useBuiltInHeaderActions(
+    state,
+    editableColumns,
+    hideHeaderActions,
+  );
+
   const tableColumns = useMemo(
     () =>
       editableColumns.map((col) => ({
         ...col,
         name: col.name ?? (typeof col.title === 'string' ? col.title : col.id),
+        titleSuffix: builtInActions[col.id],
         render: (_item: T, rowNum: number) => {
           const rowKey = state.keyedItems[rowNum]?.key;
           return rowKey ? (
@@ -62,13 +76,13 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
           ) : null;
         },
       })) as TableColumn<T>[],
-    [editableColumns, state],
+    [editableColumns, state, builtInActions],
   );
 
   const contextMenu = useEditableTableContextMenu(state.cellInteraction);
 
   return (
-    <>
+    <PatternsFieldsProvider>
       <div
         ref={containerRef}
         data-hook={dataHook}
@@ -91,8 +105,14 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
         menuRef={contextMenu.menuRef}
         onClose={contextMenu.handleClose}
       />
+      {state.deleteConfirmModal.value && (
+        <MessageActionModal
+          state={state.deleteConfirmModal}
+          {...state.deleteConfirmModal.value}
+        />
+      )}
       {children}
-    </>
+    </PatternsFieldsProvider>
   );
 }
 

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

@@ -1,7 +1,9 @@
 import { UniDriver, waitFor } from '@wix/wix-ui-test-utils/unidriver';
+import { MessageModalLayoutUniDriver } from '@wix/design-system/dist/testkit/unidriver';
 import { baseUniDriverFactory } from '../../unidriver';
 import { EditableCellUniDriver } from './EditableCell.uni.driver';
 import { EditableTableContextMenuUniDriver } from './EditableTableContextMenu.uni.driver';
+import { EditableColumnHeaderUniDriver } from './EditableColumnHeader.uni.driver';
 
 const { fireEvent = null } =
   process.env.NODE_ENV === 'test'
@@ -69,9 +71,23 @@ export function EditableTableUniDriver(base: UniDriver, body: UniDriver) {
     /** Wait for at least one data row to render */
     waitForRow: (timeout?: number) => getRows().get(0).wait(timeout),
 
+    /** Get the header actions driver for a column (portaled to body) */
+    getHeaderActions: (columnId: string) =>
+      EditableColumnHeaderUniDriver(
+        base.$(`[data-hook="header-actions-${columnId}"]`),
+        body,
+      ),
+
     /** Get the context menu driver (portaled to body) */
     getContextMenu: () => EditableTableContextMenuUniDriver(base, body),
 
+    /** Get the delete confirmation modal driver */
+    getConfirmActionModal: () =>
+      MessageModalLayoutUniDriver(
+        body.$('[data-hook="collection-action-modal"]'),
+        body,
+      ),
+
     /** Press a key on the table container (triggers useKeyboardNavigation) */
     pressKey: async (key: string, opts?: Record<string, unknown>) => {
       const el = await base.getNative();

package/src/components/EditableTable/EditableTableContextMenu.tsx

@@ -184,7 +184,9 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
         onClose();
         break;
       case 'delete':
-        state.deleteItems(hasMultipleRows ? selectedRowKeys : [cell.rowKey]);
+        state.confirmDeleteItems(
+          hasMultipleRows ? selectedRowKeys : [cell.rowKey],
+        );
         onClose();
         break;
     }