@wix/patterns 1.363.0 → 1.366.0

package/src/components/CollectionToolbarFilters/CollectionToolbarFilters.tsx

@@ -5,6 +5,7 @@ import React, {
   useMemo,
   useState,
 } from 'react';
+import { Box } from '@wix/design-system';
 import { FilterElement } from './filterElement';
 import { useFiltersLayout } from './useFiltersLayout';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
@@ -13,6 +14,7 @@ import { observer } from 'mobx-react-lite';
 import { ToolbarItemBox } from '../ToolbarItemBox';
 import { AppliedFiltersTagListState } from '../AppliedFiltersTagList/AppliedFiltersTagListState';
 import { CollectionToolbarFiltersState } from './CollectionToolbarFiltersState';
+import { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';
 import { CollectionFilter } from '../CollectionFilter';
 import { FiltersPanelSidePanelEntry } from './FiltersPanelSidePanelEntry';
 import { MoreFiltersCTA } from '../MoreFiltersCTA';
@@ -217,19 +219,27 @@ function _CollectionToolbarFilters(props: CollectionToolbarFiltersProps) {
     };
   }, [hideAppliedFiltersTagList]);
 
+  const showFieldTypeIcons = state.showFieldTypeIcons;
+
   return (
     // workaround to support bad enzyme version not detecting this as a valid fragment component
     // https://wix.slack.com/archives/C02K83200PL/p1671962461443749
     <Fragment key="toolbar-items">
       {childrenArr.slice(0, totalInlineFilters).map((element, index) => {
         const { props: filterProps } = element;
+        const toolbarLabel = filterProps.toolbarItemProps?.label;
+        let label: React.ReactNode = showLabels && toolbarLabel;
+        if (showFieldTypeIcons && showLabels && toolbarLabel) {
+          const toolbarIcon = getFieldTypeIcon({ fieldType: filterProps.fieldType, size: 'medium' });
+          label = <Box gap="SP1" verticalAlign="middle">{toolbarIcon}{toolbarLabel}</Box>;
+        }
 
         return (
           <ToolbarItemBox
             key={index}
             layout={filterProps.layout}
             dataHook={`toolbar-item-filter-${index}`}
-            label={showLabels && filterProps.toolbarItemProps?.label}
+            label={label}
           >
             {filterProps.filter ? (
               <CollectionFilter

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AutoCompleteReadonly1869116685";
+var _namespace_ = "AutoCompleteReadonly3238632147";
 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":"AutoCompleteReadonly1869116685__root"};
+export var classes = {"root":"AutoCompleteReadonly3238632147__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_ = "ViewsDropdown514972543";
+var _namespace_ = "ViewsDropdown767838626";
 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":"ViewsDropdown514972543__root"};
+export var classes = {"root":"ViewsDropdown767838626__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomColumnsPanel/ColumnListTableListItem.tsx

@@ -7,6 +7,7 @@ import { CustomColumnsState } from '../../state';
 import { GridCardItemProps } from '../DragAndDrop';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';
 
 export interface ColumnListTableListItemProps<T, F extends FiltersMap>
   extends GridCardItemProps {
@@ -35,8 +36,10 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
 
   const { collectionDataExtension } = useToolbarCollectionContext();
   const { translate: t } = useWixPatternsContainer();
+  const showFieldTypeIcons = state.table.showFieldTypeIcons;
 
   const { infoTooltipProps } = column;
+  const prefixIcon = showFieldTypeIcons ? getFieldTypeIcon({ fieldType: column.fieldType }) : null;
 
   const checkboxDisabled = !column.hideable;
   const hasSearchValue = state.searchValue.trim().length > 0;
@@ -117,9 +120,10 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
         options={[
           {
             value: (
-              <Box>
+              <Box {...(prefixIcon ? { verticalAlign: 'middle' } : {})}>
                 <div
                   style={{
+                    ...(prefixIcon ? { display: 'flex', alignItems: 'center' } : {}),
                     padding: '0 6px',
                     cursor: checkboxDisabled ? undefined : 'pointer',
                     wordBreak: 'break-word',
@@ -131,6 +135,11 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
                     state.onColumnCheckboxToggle(column);
                   }}
                 >
+                  {prefixIcon && (
+                    <Box align="center" verticalAlign="middle" marginRight="SP1" flexShrink={0}>
+                      {prefixIcon}
+                    </Box>
+                  )}
                   <Text size="small" dataHook="tableListItem-label">
                     {column.name || column.title || column.id}
                   </Text>

package/src/components/CustomFieldFilters/buildCustomFieldFilterElement.tsx

@@ -7,6 +7,7 @@ import { FilterProps } from '../../model';
 import { CheckboxCustomFieldFilter } from './CheckboxCustomFieldFilter';
 import { NumberRangeFilter } from '../NumberRangeFilter';
 import { OperatorFilterCustomFieldFilter } from './OperatorFilterCustomFieldFilter';
+import { toFieldType } from '../../utils/fieldTypePrefixIcons';
 
 export const buildCustomFieldFilterElement = <T, F extends FiltersMap>(
   state: ToolbarCollectionState<T, F>,
@@ -38,6 +39,7 @@ export const buildCustomFieldFilterElement = <T, F extends FiltersMap>(
     <CustomFieldFilterComponent
       key={customField.id}
       filter={state.collection.filters[customField.id]!}
+      fieldType={toFieldType(customField.type)}
       accordionItemProps={{
         label,
       }}

package/src/components/CustomFieldModal/CustomFieldTypeDropdown.tsx

@@ -1,16 +1,9 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { Box, Dropdown, listItemSelectBuilder } from '@wix/design-system';
-import {
-  Checkbox,
-  Date,
-  DateAndTime,
-  Number,
-  Rename,
-  Link,
-} from '@wix/wix-ui-icons-common';
 import { CustomFieldModalState, CustomFieldType } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';
 
 export interface CustomFieldTypeDropdownProps {
   state: CustomFieldModalState;
@@ -38,7 +31,7 @@ export const _CustomFieldTypeDropdown = (
       id: 'shortText',
       prefix: (
         <Box>
-          <Rename />
+          {getFieldTypeIcon({ fieldType: 'SHORT_TEXT', size: 'medium' })}
         </Box>
       ),
       title: t('cairo.customFields.fieldType.shortText'),
@@ -49,7 +42,7 @@ export const _CustomFieldTypeDropdown = (
       id: 'longText',
       prefix: (
         <Box>
-          <Rename />
+          {getFieldTypeIcon({ fieldType: 'LONG_TEXT', size: 'medium' })}
         </Box>
       ),
       title: t('cairo.customFields.fieldType.longText'),
@@ -60,7 +53,7 @@ export const _CustomFieldTypeDropdown = (
       id: 'date',
       prefix: (
         <Box>
-          <Date />
+          {getFieldTypeIcon({ fieldType: 'DATE', size: 'medium' })}
         </Box>
       ),
       title: t('cairo.customFields.fieldType.date'),
@@ -71,7 +64,7 @@ export const _CustomFieldTypeDropdown = (
       id: 'dateTime',
       prefix: (
         <Box>
-          <DateAndTime />
+          {getFieldTypeIcon({ fieldType: 'DATE_TIME', size: 'medium' })}
         </Box>
       ),
       title: t('cairo.customFields.fieldType.dateAndTime'),
@@ -82,7 +75,7 @@ export const _CustomFieldTypeDropdown = (
       id: 'integer',
       prefix: (
         <Box>
-          <Number />
+          {getFieldTypeIcon({ fieldType: 'INTEGER', size: 'medium' })}
         </Box>
       ),
       title: t('cairo.customFields.fieldType.numberInteger'),
@@ -93,7 +86,7 @@ export const _CustomFieldTypeDropdown = (
       id: 'decimal',
       prefix: (
         <Box>
-          <Number />
+          {getFieldTypeIcon({ fieldType: 'DECIMAL', size: 'medium' })}
         </Box>
       ),
       title: t('cairo.customFields.fieldType.numberDecimal'),
@@ -104,7 +97,7 @@ export const _CustomFieldTypeDropdown = (
       id: 'checkbox',
       prefix: (
         <Box>
-          <Checkbox />
+          {getFieldTypeIcon({ fieldType: 'CHECKBOX', size: 'medium' })}
         </Box>
       ),
       title: t('cairo.customFields.fieldType.checkbox'),
@@ -115,7 +108,7 @@ export const _CustomFieldTypeDropdown = (
       id: 'url',
       prefix: (
         <Box>
-          <Link />
+          {getFieldTypeIcon({ fieldType: 'URL', size: 'medium' })}
         </Box>
       ),
       title: t('cairo.customFields.fieldType.url'),

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

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

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

@@ -0,0 +1,68 @@
+@property st-global(--wsr-color-B10);
+@property st-global(--wsr-color-B40);
+@property st-global(--wsr-color-Y10);
+@property st-global(--wsr-color-D80);
+
+:global(td):has(> .root) {
+  position: relative;
+  min-height: 24px;
+}
+
+.root {
+  -st-states: editing, focused, selected, invalid, selectionTop, selectionBottom,
+    selectionLeft, selectionRight, copiedTop, copiedBottom, copiedLeft,
+    copiedRight;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+  outline: none;
+  cursor: default;
+  user-select: none;
+  background: var(--wsr-color-D80);
+  border: 1px solid var(--wsr-color-B40);
+}
+
+.root:selected {
+  background: rgba(56, 153, 236, 0.08);
+}
+
+.root:focused:not(:selected) {
+  box-shadow: inset 0 0 0 2px var(--wsr-color-B10);
+  z-index: 2;
+}
+
+.root:editing {
+  background: var(--wsr-color-D80);
+  box-shadow: inset 0 0 0 2px var(--wsr-color-B10);
+  z-index: 3;
+  user-select: auto;
+  overflow: visible;
+}
+
+.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:invalid:not(:editing) {
+  background: rgba(229, 0, 77, 0.06);
+}
+
+.root:copiedTop:not(:selectionTop) { border-top: 2px dashed var(--wsr-color-B10); }
+.root:copiedBottom:not(:selectionBottom) { border-bottom: 2px dashed var(--wsr-color-B10); }
+.root:copiedLeft:not(:selectionLeft) { border-left: 2px dashed var(--wsr-color-B10); }
+.root:copiedRight:not(:selectionRight) { border-right: 2px dashed var(--wsr-color-B10); }
+
+.validationIndicator {
+  flex-shrink: 0;
+  margin-left: 12px;
+  margin-right: 6px;
+  color: var(--wsr-color-Y10);
+}

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "EditableCell3084944771";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"EditableCell3084944771__root","validationIndicator":"EditableCell3084944771__validationIndicator"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"wsr-color-B10":"--wsr-color-B10","wsr-color-B40":"--wsr-color-B40","wsr-color-Y10":"--wsr-color-Y10","wsr-color-D80":"--wsr-color-D80"}; 
+
+
+
+

package/src/components/EditableTable/EditableCell.tsx

@@ -0,0 +1,140 @@
+import React, { useCallback, useRef } from 'react';
+import { observer } from 'mobx-react-lite';
+import type { FiltersMap } from '@wix/bex-core';
+import { Tooltip } from '@wix/design-system';
+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';
+
+export interface EditableCellProps<T, F extends FiltersMap> {
+  state: EditableTableState<T, F>;
+  rowKey: string;
+  columnId: string;
+}
+
+function _EditableCell<T, F extends FiltersMap>({
+  state,
+  rowKey,
+  columnId,
+}: EditableCellProps<T, F>) {
+  const { cellInteraction, clipboard } = state;
+  const cellRef = useRef<HTMLDivElement>(null);
+  const editInputRef = useRef<any>(null);
+
+  const column = state._columnMap.get(columnId);
+  const keyedItem = state._getKeyedItem(rowKey);
+  const resolved = column ? state.resolveCellType(column.cellType) : null;
+  const value = state.getCellDisplayValue(rowKey, columnId);
+  const cellValidation = state.getCellValidation(rowKey, columnId);
+
+  const isFocused = cellInteraction.isCellFocused(rowKey, columnId);
+  const isEditing = cellInteraction.isCellEditing(rowKey, columnId);
+  const isSelected = cellInteraction.isCellSelected(rowKey, columnId);
+  const selectionBorder = cellInteraction.getSelectionBorder(rowKey, columnId);
+  const copiedBorder = clipboard.getCopiedBorder(rowKey, columnId);
+  const isEditable = state.isCellEditable(rowKey, columnId);
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      state.handleCellClick(rowKey, columnId, e.shiftKey);
+    },
+    [state, rowKey, columnId],
+  );
+
+  const handleDoubleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      state.handleCellDoubleClick(rowKey, columnId);
+    },
+    [state, rowKey, columnId],
+  );
+
+  const handleChange = useCallback(
+    (newValue: any) => cellInteraction.setEditingValue(newValue),
+    [cellInteraction],
+  );
+
+  const handleCommit = useCallback(
+    () => cellInteraction.commitEdit(),
+    [cellInteraction],
+  );
+
+  const handleCancel = useCallback(
+    () => cellInteraction.cancelEdit(),
+    [cellInteraction],
+  );
+
+  const cellKeyboard = useCellFocusAndEditing({
+    state,
+    rowKey,
+    columnId,
+    cellRef,
+    editInputRef,
+  });
+
+  if (!column || !keyedItem || !resolved) {
+    return null;
+  }
+
+  const { ViewComponent, EditComponent } = resolved;
+  const editingValue = cellInteraction.editingValue;
+  const showValidationIndicator = !cellValidation.valid && !isEditing;
+
+  const showEdit = isFocused && isEditable && EditComponent;
+
+  return (
+    <div
+      ref={cellRef}
+      className={st(classes.root, {
+        editing: isEditing,
+        focused: isFocused,
+        selected: isSelected,
+        invalid: !cellValidation.valid,
+        selectionTop: selectionBorder.top,
+        selectionBottom: selectionBorder.bottom,
+        selectionLeft: selectionBorder.left,
+        selectionRight: selectionBorder.right,
+        copiedTop: copiedBorder.top,
+        copiedBottom: copiedBorder.bottom,
+        copiedLeft: copiedBorder.left,
+        copiedRight: copiedBorder.right,
+      })}
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+      onKeyDown={cellKeyboard.onKeyDown}
+      role="gridcell"
+      aria-selected={isSelected}
+      aria-readonly={!isEditable}
+      aria-invalid={!cellValidation.valid || undefined}
+      tabIndex={isFocused ? 0 : -1}
+      data-row-key={rowKey}
+      data-column-id={columnId}
+      data-editing={isEditing || undefined}
+    >
+      {showValidationIndicator && (
+        <Tooltip content={cellValidation.errors?.join(', ')} appendTo="window">
+          <span data-hook="validation-indicator">
+            <StatusWarningFilledSmall className={classes.validationIndicator} />
+          </span>
+        </Tooltip>
+      )}
+      {showEdit ? (
+        <EditComponent
+          value={editingValue !== undefined ? editingValue : value}
+          onChange={handleChange}
+          onCommit={handleCommit}
+          onCancel={handleCancel}
+          inputRef={editInputRef}
+          typeConfig={column.typeConfig}
+          editTrigger={cellInteraction.editTrigger}
+        />
+      ) : (
+        <ViewComponent value={value} typeConfig={column.typeConfig} />
+      )}
+    </div>
+  );
+}
+
+export const EditableCell = observer(_EditableCell);

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

@@ -0,0 +1,102 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../unidriver';
+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 { DateEditUniDriver } from './cellTypes/date/Edit.uni.driver';
+
+export function EditableCellUniDriver(base: UniDriver, body: UniDriver) {
+  return {
+    ...baseUniDriverFactory(base),
+
+    /** Click the cell (focuses it) */
+    click: () => base.click(),
+
+    /** Double-click the cell (starts editing). UniDriver has no doubleClick, so dispatch native event. */
+    doubleClick: async () => {
+      const el = await base.getNative();
+      if (el.page?.evaluate) {
+        const elementHandle = await base.unwrap();
+        await elementHandle.click({ clickCount: 2 });
+      } else {
+        el.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }));
+      }
+    },
+
+    /** Get the displayed text value of the cell */
+    getDisplayValue: () => base.text(),
+
+    /** Whether this cell is focused */
+    isFocused: async () => (await base.attr('tabindex')) === '0',
+
+    /** Whether this cell is in editing mode */
+    isEditing: async () => (await base.attr('data-editing')) === 'true',
+
+    /** Whether this cell is selected (part of a selection range) */
+    isSelected: async () => (await base.attr('aria-selected')) === 'true',
+
+    /** Whether this cell is read-only (not editable) */
+    isReadOnly: async () => (await base.attr('aria-readonly')) === 'true',
+
+    /** Whether this cell has a validation error */
+    isInvalid: async () => (await base.attr('aria-invalid')) === 'true',
+
+    /** Get the row key from data attribute */
+    getRowKey: () => base.attr('data-row-key'),
+
+    /** Get the column id from data attribute */
+    getColumnId: () => base.attr('data-column-id'),
+
+    /** Whether the cell contains a validation indicator icon */
+    hasValidationIndicator: () =>
+      base.$('[data-hook="validation-indicator"]').exists(),
+
+    /** Get the text cell edit driver (for text columns) */
+    getTextEdit: () => TextEditUniDriver(base, body),
+
+    /** Get the number cell edit driver (for number columns) */
+    getNumberEdit: () => NumberEditUniDriver(base, body),
+
+    /** Get the url cell edit driver (for url columns) */
+    getUrlEdit: () => UrlEditUniDriver(base, body),
+
+    /** 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 date cell edit driver (for date columns) */
+    getDateEdit: () => DateEditUniDriver(base, body),
+
+    /** Right-click the cell (opens context menu) */
+    rightClick: async () => {
+      const el = await base.getNative();
+      if (el.page?.evaluate) {
+        // Puppeteer — unwrap to get the actual ElementHandle
+        const elementHandle = await base.unwrap();
+        await elementHandle.click({ button: 'right' });
+      } else {
+        // jsdom HTMLElement
+        const rect = el.getBoundingClientRect();
+        el.dispatchEvent(
+          new MouseEvent('contextmenu', {
+            bubbles: true,
+            clientX: rect.left + 5,
+            clientY: rect.top + 5,
+          }),
+        );
+      }
+    },
+
+    /** Press a key on the cell (native dispatch — useCellFocusAndEditing uses native addEventListener) */
+    pressKey: async (key: string, opts?: Partial<KeyboardEventInit>) => {
+      const el = await base.getNative();
+      el.dispatchEvent(
+        new KeyboardEvent('keydown', { key, bubbles: true, ...opts }),
+      );
+    },
+  };
+}

package/src/components/EditableTable/EditableTable.tsx

@@ -0,0 +1,97 @@
+import React, { useMemo, useRef } from 'react';
+import { observer } from 'mobx-react-lite';
+import type { FiltersMap, OptionalFiltersMap } from '@wix/bex-core';
+import { TableVirtual, type TableVirtualProps } from '../Table/TableVirtual';
+import {
+  type EditableColumn,
+  EditableTableState,
+} from '../../state/EditableTable';
+import { EditableCell } from './EditableCell';
+import { EditableTableContextMenu } from './EditableTableContextMenu';
+import { useEditableTableContextMenu } from './useEditableTableContextMenu';
+import { useEditableTableCollectionSyncProps } from './useEditableTableCollectionSyncProps';
+import { useKeyboardNavigation } from './useKeyboardNavigation';
+import { useClipboardHandler } from './useClipboardHandler';
+import { useClearFocusOnBlur } from './useClearFocusOnBlur';
+import type { TableColumn } from '../../model';
+
+export interface EditableTableProps<
+  T,
+  F extends FiltersMap = OptionalFiltersMap,
+> extends Omit<TableVirtualProps<T, F>, 'columns' | 'state' | 'onRowClick'> {
+  /** EditableTableState instance, created via useEditableTableCollection */
+  state: EditableTableState<T, F>;
+
+  /** Column definitions with cell types */
+  columns: EditableColumn<T>[];
+
+  /** data-hook for testkit selectors */
+  dataHook?: string;
+}
+
+function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
+  props: EditableTableProps<T, F>,
+) {
+  const {
+    state,
+    columns: editableColumns,
+    dataHook,
+    children,
+    ...tableBaseProps
+  } = props;
+
+  useEditableTableCollectionSyncProps(props);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const keyboard = useKeyboardNavigation(state);
+  useClipboardHandler(state, containerRef);
+  const { onFocus, onBlur } = useClearFocusOnBlur(state.cellInteraction);
+
+  const tableColumns = useMemo(
+    () =>
+      editableColumns.map((col) => ({
+        ...col,
+        name: col.name ?? (typeof col.title === 'string' ? col.title : col.id),
+        render: (_item: T, rowNum: number) => {
+          const rowKey = state.keyedItems[rowNum]?.key;
+          return rowKey ? (
+            <EditableCell state={state} rowKey={rowKey} columnId={col.id} />
+          ) : null;
+        },
+      })) as TableColumn<T>[],
+    [editableColumns, state],
+  );
+
+  const contextMenu = useEditableTableContextMenu(state.cellInteraction);
+
+  return (
+    <>
+      <div
+        ref={containerRef}
+        data-hook={dataHook}
+        tabIndex={0}
+        onKeyDown={keyboard.onKeyDown}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onContextMenu={contextMenu.handleContextMenu}
+      >
+        <TableVirtual
+          {...tableBaseProps}
+          state={state.tableState}
+          columns={tableColumns}
+        />
+      </div>
+      <EditableTableContextMenu
+        state={state}
+        position={contextMenu.position}
+        cell={contextMenu.cell}
+        menuRef={contextMenu.menuRef}
+        onClose={contextMenu.handleClose}
+      />
+      {children}
+    </>
+  );
+}
+
+export const EditableTable = observer(_EditableTable);