@wix/patterns 1.375.0 → 1.377.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CardContainer1969536951";
+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":"CardContainer1969536951__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_ = "Collapse495485484";
+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":"Collapse495485484__root","exit":"Collapse495485484__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_ = "CollectionPage840018264";
+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":"CollectionPage840018264__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_ = "CollectionSectionHeader1591435620";
+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":"CollectionSectionHeader1591435620__root","summaryIcon":"CollectionSectionHeader1591435620__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_ = "CollectionTable4275959506";
+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":"CollectionTable4275959506__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_ = "CollectionToolbar877256535";
+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":"CollectionToolbar877256535__root","left":"CollectionToolbar877256535__left","right":"CollectionToolbar877256535__right","fullWidth":"CollectionToolbar877256535__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_ = "SearchOrCustomFilter3794450166";
+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":"SearchOrCustomFilter3794450166__root","search":"SearchOrCustomFilter3794450166__search","searchMobile":"SearchOrCustomFilter3794450166__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_ = "AutoCompleteReadonly2231257867";
+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":"AutoCompleteReadonly2231257867__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_ = "ViewsDropdown1096655248";
+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":"ViewsDropdown1096655248__root"};
+export var classes = {"root":"ViewsDropdown782432463__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_ = "DragHandle10084432";
+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":"DragHandle10084432__root"};
+export var classes = {"root":"DragHandle4188812874__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,6 +5,7 @@
 
 :global(td):has(> .root) {
   position: relative;
+  overflow: visible;
   min-height: 24px;
 }
 
@@ -44,6 +45,8 @@
   z-index: 3;
   user-select: auto;
   overflow: visible;
+  bottom: auto;
+  min-height: 100%;
 }
 
 .root:selectionTop:not(:editing) { border-top: 2px solid var(--wsr-color-B10); }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell304190034";
+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":"EditableCell304190034__root","validationIndicator":"EditableCell304190034__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

@@ -25,7 +25,7 @@ function _EditableCell<T, F extends FiltersMap>({
 
   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);
 
@@ -89,7 +89,6 @@ function _EditableCell<T, F extends FiltersMap>({
   }
 
   const { ViewComponent, EditComponent } = resolved;
-  const editingValue = cellInteraction.editingValue;
   const showValidationIndicator = !cellValidation.valid && !isEditing;
 
   const showEdit =
@@ -135,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;
     }

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

@@ -0,0 +1,12 @@
+.root {
+  -st-states: menuOpen;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+/* Reveal when the table header cell is hovered or the menu is open */
+:global(th):hover .root,
+.root:menuOpen,
+.root:focus-within {
+  opacity: 1;
+}

package/src/components/EditableTable/{cellTypes/select/View.st.css.ts → HeaderActionsPopover.st.css.ts}

@@ -1,11 +1,11 @@
 // @ts-nocheck
 
 
-import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.js";
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "View4115641211";
+var _namespace_ = "HeaderActionsPopover835706258";
 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":"View4115641211__root"};
+export var classes = {"root":"HeaderActionsPopover835706258__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/HeaderActionsPopover.tsx

@@ -0,0 +1,85 @@
+import React, { useState, useCallback, useRef, type ReactNode } from 'react';
+import { PopoverMenu, IconButton } from '@wix/design-system';
+import { MoreSmall } from '@wix/wix-ui-icons-common';
+import type { HeaderAction } from './headerActionTypes';
+import { st, classes } from './HeaderActionsPopover.st.css.js';
+import { useCloseOnAncestorScroll } from './useCloseOnAncestorScroll';
+
+export interface HeaderActionsPopoverProps {
+  actions: HeaderAction[][];
+  dataHook?: string;
+}
+
+export function HeaderActionsPopover({
+  actions,
+  dataHook,
+}: HeaderActionsPopoverProps) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [popoverKey, setPopoverKey] = useState(0);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  const closePopover = useCallback(() => {
+    setMenuOpen(false);
+    setPopoverKey((k) => k + 1);
+  }, []);
+
+  useCloseOnAncestorScroll(wrapperRef, closePopover, menuOpen);
+
+  const menuItems = actions
+    .filter((group) => group.length > 0)
+    .reduce<ReactNode[]>((result, group, index, array) => {
+      const items = group.map((action, i) => (
+        <PopoverMenu.MenuItem
+          key={`${index}-${i}`}
+          text={action.label}
+          onClick={action.onClick}
+          prefixIcon={action.icon}
+          disabled={action.disabled}
+          disabledDescription={action.disabledTooltip}
+          skin={action.skin}
+        />
+      ));
+      const divider =
+        index < array.length - 1
+          ? [<PopoverMenu.Divider key={`divider-${index}`} />]
+          : [];
+      return [...result, ...items, ...divider];
+    }, []);
+
+  if (menuItems.length === 0) {
+    return null;
+  }
+
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    <div
+      ref={wrapperRef}
+      className={st(classes.root, { menuOpen })}
+      data-hook={dataHook}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <PopoverMenu
+        key={popoverKey}
+        dataHook={dataHook ? `${dataHook}-menu` : undefined}
+        textSize="small"
+        triggerElement={
+          <IconButton
+            size="tiny"
+            skin="dark"
+            priority="tertiary"
+            ariaLabel="Column actions"
+            dataHook={dataHook ? `${dataHook}-more-button` : undefined}
+          >
+            <MoreSmall />
+          </IconButton>
+        }
+        appendTo="window"
+        placement="bottom-end"
+        onShow={() => setMenuOpen(true)}
+        onHide={() => setMenuOpen(false)}
+      >
+        {menuItems}
+      </PopoverMenu>
+    </div>
+  );
+}

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1113995296";
+var _namespace_ = "Edit550253640";
 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":"Edit1113995296__root","booleanEdit":"Edit1113995296__booleanEdit"};
+export var classes = {"root":"Edit550253640__root","booleanEdit":"Edit550253640__booleanEdit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -17,6 +17,11 @@ export const BooleanEdit: React.FC<CellEditProps<boolean>> = ({
     [onChange, onCommit],
   );
 
+  const stopClickPropagation = useCallback(
+    (e: React.MouseEvent) => e.stopPropagation(),
+    [],
+  );
+
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
       if (e.key === 'Enter') {
@@ -32,7 +37,11 @@ export const BooleanEdit: React.FC<CellEditProps<boolean>> = ({
   );
 
   return (
-    <div onKeyDown={handleKeyDown} className={classes.booleanEdit}>
+    <div
+      onKeyDown={handleKeyDown}
+      onClick={stopClickPropagation}
+      className={classes.booleanEdit}
+    >
       <CellCheckbox
         dataHook="boolean-checkbox"
         checked={!!value}