@wix/patterns 1.374.0 → 1.377.0

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard4107778614";
+var _namespace_ = "SkeletonCard3797804032";
 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":"SkeletonCard4107778614__root","headerLoading":"SkeletonCard4107778614__headerLoading"};
+export var classes = {"root":"SkeletonCard3797804032__root","headerLoading":"SkeletonCard3797804032__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter3564855939";
+var _namespace_ = "TabsFilter2255324386";
 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":"TabsFilter3564855939__root","title":"TabsFilter3564855939__title"};
+export var classes = {"root":"TabsFilter2255324386__root","title":"TabsFilter2255324386__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal361100246";
+var _namespace_ = "ManageTagsModal191798250";
 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":"ManageTagsModal361100246__root"};
+export var classes = {"root":"ManageTagsModal191798250__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsNotification.tsx

@@ -55,7 +55,9 @@ export const ManageTagsNotification = ({
       onDismiss={() => onClose(toastConfig)}
       action={actionElement}
     >
-      <span data-hook="manage-tags-modal-notification-message">{toastConfig.message}</span>
+      <span data-hook="manage-tags-modal-notification-message">
+        {toastConfig.message}
+      </span>
     </StatusToast>
   );
 };

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common2106460737";
+var _namespace_ = "common3370304451";
 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":"common2106460737__root","column":"common2106460737__column","fullHeight":"common2106460737__fullHeight"};
+export var classes = {"root":"common3370304451__root","column":"common3370304451__column","fullHeight":"common3370304451__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/exports/testkit/unidriver.ts

@@ -29,3 +29,5 @@ export { MoreActionsUniDriver } from '../../components/MoreActions/MoreActions.u
 export { CollectionDropdownFilterUniDriver } from '../../components/DropdownFilter/CollectionDropdownFilter.uni.driver';
 export { SuggestionsUniDriver } from '../../components/Suggestions/Suggestions.uni.driver';
 export { MarketingCardUniDriver } from '../../components/Suggestions/MarketingCard.uni.driver';
+export { default as EditableTableUniDriver } from '../../components/EditableTable/EditableTable.uni.driver';
+export { EditableCellUniDriver } from '../../components/EditableTable/EditableCell.uni.driver';

package/src/model/tableColumn.ts

@@ -6,7 +6,7 @@ import type { ValidationRule } from '../state/EditableTable/types';
 
 type TableColumnBase<T = any> = Omit<
   TableColumnWSR<T>,
-  'sortDescending' | 'sortable' | 'infoTooltipProps' | 'style'
+  'sortDescending' | 'sortable' | 'infoTooltipProps' | 'style' | 'titleSuffix'
 > & {
   style?:
     | CSSProperties

package/src/providers/PatternsFieldsProvider.tsx

@@ -0,0 +1,32 @@
+import React, { ReactNode, useEffect, useState } from 'react';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import {
+  PatternsFieldsAppContainer,
+  PatternsFieldsContainerProvider,
+} from '@wix/patterns-fields/providers';
+
+/**
+ * Initializes PatternsFieldsAppContainer with the current WixPatternsContainer
+ * and exposes it via PatternsFieldsContainerProvider.
+ *
+ * Must be rendered inside a WixPatternsContainerProvider (e.g. inside CairoProviderCore).
+ */
+export const PatternsFieldsProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const patternsContainer = useWixPatternsContainer();
+
+  const [fieldsContainer] = useState(
+    () => new PatternsFieldsAppContainer({ patternsContainer }),
+  );
+
+  useEffect(() => {
+    fieldsContainer.init();
+  }, [fieldsContainer]);
+
+  return (
+    <PatternsFieldsContainerProvider value={fieldsContainer}>
+      {children}
+    </PatternsFieldsContainerProvider>
+  );
+};

package/src/providers/SchemaProvider.tsx

@@ -0,0 +1,51 @@
+import React, {
+  ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+import { SchemaConfig } from '../types/SchemaConfig';
+
+export type SchemaContextValue = {
+  schema: Record<string, SchemaConfig>;
+  addSchema: (collectionId: string, schemaConfig: SchemaConfig) => void;
+  isReady: boolean;
+};
+
+export const schemaContext = createContext<SchemaContextValue | null>(null);
+
+export const useSchemaContext = () => useContext(schemaContext);
+
+interface SchemaProviderProps {
+  children: ReactNode;
+  skeleton?: ReactNode;
+}
+
+export const SchemaProvider = ({
+  children,
+  skeleton = null,
+}: SchemaProviderProps) => {
+  const [schema, setSchema] = useState<SchemaContextValue['schema']>({});
+
+  const addSchema = useCallback(
+    (collectionId: string, schemaConfig: SchemaConfig) => {
+      setSchema((prev) => ({ ...prev, [collectionId]: schemaConfig }));
+    },
+    [],
+  );
+
+  const isReady = Object.keys(schema).length > 0;
+
+  const value = useMemo(
+    () => ({ schema, addSchema, isReady }),
+    [schema, addSchema, isReady],
+  );
+
+  return (
+    <schemaContext.Provider value={value}>
+      {isReady ? children : skeleton}
+    </schemaContext.Provider>
+  );
+};

package/src/providers/index.ts

@@ -1,4 +1,5 @@
 export * from './CairoProvider';
+export * from './PatternsFieldsProvider';
 export * from './CollectionPageContext';
 export * from './PageContext';
 export * from './FormPageContext';
@@ -10,3 +11,4 @@ export * from './SettingsPageContext';
 export * from './ScrollableContentContext';
 export * from './DropdownTranslationProvider';
 export * from './FilterTranslationProvider';
+export * from './SchemaProvider';

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

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

package/src/state/CustomFields/CustomFieldsAllNamespacesFormState.ts

@@ -44,8 +44,10 @@ export class CustomFieldsAllNamespacesFormState {
         (schema.namespace === _userFieldsNamespace ||
           Object.values(
             schema.jsonSchema.properties as Record<string, DataExtensionField>,
-          ).some((prop) =>
-            prop['x-wix-permissions']?.write?.includes('users'),
+          ).some(
+            (prop) =>
+              prop['x-wix-permissions']?.write?.includes('users') &&
+              prop['x-wix-permissions']?.read?.includes('users'),
           )),
     );
     return orderBy(

package/src/state/EditableTable/CellInteractionState.ts

@@ -6,7 +6,10 @@ import { cellKey, parseCellKey, noBorder } from './utils';
 
 type Direction = 'up' | 'down' | 'left' | 'right';
 type CommitHandler = (editingValue: any, cell: Cell) => void;
-export type EditTrigger = 'type' | 'enter' | 'doubleClick';
+export type EditTrigger =
+  | { kind: 'type'; key: string }
+  | 'enter'
+  | 'doubleClick';
 
 export class CellInteractionState<T, F extends FiltersMap> {
   focusedCell: Cell | null = null;
@@ -15,7 +18,7 @@ export class CellInteractionState<T, F extends FiltersMap> {
   editTrigger: EditTrigger | null = null;
   selectedCells = new Set<string>();
   selectionAnchor: Cell | null = null;
-  focusedCellElement: HTMLElement | null = null;
+  focusedCellElement: HTMLElement | null | undefined = null;
   /** True while the user is performing a mouse sweep selection. */
   isSelecting = false;
   private readonly _parent: EditableTableState<T, F>;
@@ -84,6 +87,12 @@ export class CellInteractionState<T, F extends FiltersMap> {
       this.editTrigger = trigger;
       this.editingCell = { rowKey: rk, columnId: cid };
       this.focusedCell = { rowKey: rk, columnId: cid };
+      // Collapse any multi-cell range selection down to the editing cell.
+      // Without this, range-selected cells remain visually selected alongside
+      // the editing cell, producing an invalid "two cells selected" state.
+      this.selectedCells.clear();
+      this.selectedCells.add(cellKey(rk, cid));
+      this.selectionAnchor = { rowKey: rk, columnId: cid };
     }
   }
 
@@ -334,15 +343,21 @@ export class CellInteractionState<T, F extends FiltersMap> {
       }
     }
 
-    // Vertical: check if cell is behind the sticky header/toolbar.
+    // Vertical: same pattern — check if cell is behind the sticky header
+    // or below the visible area of the page-level scroll container.
     const headerEl = this._parent.tableState.headerElement;
     const scrollEl = this._parent.collection.scrollableContent;
-    if (headerEl && scrollEl) {
-      const headerBottom = headerEl.getBoundingClientRect().bottom;
-      const cellTop = td.getBoundingClientRect().top;
-      if (cellTop < headerBottom) {
-        // +2px buffer to prevent the cell from touching the header border
-        scrollEl.scrollTop -= headerBottom - cellTop + 2;
+    if (scrollEl) {
+      const cellRect = td.getBoundingClientRect();
+      const scrollRect = scrollEl.getBoundingClientRect();
+      const effectiveTop = headerEl
+        ? headerEl.getBoundingClientRect().bottom
+        : scrollRect.top;
+
+      if (cellRect.top < effectiveTop) {
+        scrollEl.scrollTop -= effectiveTop - cellRect.top + 2;
+      } else if (cellRect.bottom > scrollRect.bottom) {
+        scrollEl.scrollTop += cellRect.bottom - scrollRect.bottom + 2;
       }
     }
   }

package/src/state/EditableTable/CellValueState.ts

@@ -8,7 +8,7 @@ import {
 } from '../../components/EditableTable/cellTypes';
 import { runCellValidation, validResult } from './utils';
 
-const cellTypeMap = new Map<string, CellType>(
+const builtInCellTypeMap = new Map<string, CellType>(
   builtInCellTypes.map((ct) => [ct.type, ct]),
 );
 
@@ -17,6 +17,7 @@ export class CellValueState<T, F extends FiltersMap> {
   readonly _pendingCells = new Map<string, { value: any; errors: string[] }>();
 
   private readonly _parent: EditableTableState<T, F>;
+  private _cellTypeMap: Map<string, CellType> = builtInCellTypeMap;
 
   constructor(parent: EditableTableState<T, F>) {
     this._parent = parent;
@@ -31,8 +32,28 @@ export class CellValueState<T, F extends FiltersMap> {
     });
   }
 
-  resolveCellType(type: string): CellType {
-    return cellTypeMap.get(type) ?? textCellType;
+  _buildCellTypeMap() {
+    const map = new Map<string, CellType>();
+    for (const col of this._parent._allColumns) {
+      if (
+        col.cellType === 'custom' &&
+        col.typeConfig &&
+        typeof col.typeConfig === 'object' &&
+        'ViewComponent' in col.typeConfig
+      ) {
+        map.set(col.id, {
+          type: 'custom',
+          ...(col.typeConfig as Omit<CellType, 'type'>),
+        });
+      } else {
+        map.set(col.id, builtInCellTypeMap.get(col.cellType) ?? textCellType);
+      }
+    }
+    this._cellTypeMap = map;
+  }
+
+  resolveCellTypeByColumnId(columnId: string): CellType {
+    return this._cellTypeMap.get(columnId) ?? textCellType;
   }
 
   getCellDisplayValue(rowKey: string, columnId: string): any {
@@ -59,7 +80,7 @@ export class CellValueState<T, F extends FiltersMap> {
       return false;
     }
 
-    const resolved = this.resolveCellType(column.cellType);
+    const resolved = this.resolveCellTypeByColumnId(column.id);
     if (resolved.editable === false || !resolved.EditComponent) {
       return false;
     }
@@ -81,7 +102,7 @@ export class CellValueState<T, F extends FiltersMap> {
     if (!column || !keyedItem) {
       return '';
     }
-    const resolved = this.resolveCellType(column.cellType);
+    const resolved = this.resolveCellTypeByColumnId(column.id);
     const pending = this._getPendingCell(rowKey, columnId);
     const value = pending ? pending.value : column.getValue(keyedItem.item);
     return resolved.serialize ? resolved.serialize(value) : String(value ?? '');
@@ -96,7 +117,7 @@ export class CellValueState<T, F extends FiltersMap> {
       if (!column?.setValue) {
         continue;
       }
-      const resolved = this.resolveCellType(column.cellType);
+      const resolved = this.resolveCellTypeByColumnId(column.id);
       if (resolved.clearable === false) {
         continue;
       }
@@ -121,7 +142,7 @@ export class CellValueState<T, F extends FiltersMap> {
       return;
     }
 
-    const resolved = this.resolveCellType(column.cellType);
+    const resolved = this.resolveCellTypeByColumnId(column.id);
     if (!resolved.toggleValue) {
       return;
     }
@@ -135,7 +156,11 @@ export class CellValueState<T, F extends FiltersMap> {
   /** Commit handler — used as callback for CellInteractionState. */
   commitHandler(editingValue: any, cell: Cell) {
     if (editingValue !== undefined) {
-      this._applyValue(cell.rowKey, cell.columnId, editingValue);
+      const resolved = this.resolveCellTypeByColumnId(cell.columnId);
+      const normalized = resolved.normalizeOnCommit
+        ? resolved.normalizeOnCommit(editingValue)
+        : editingValue;
+      this._applyValue(cell.rowKey, cell.columnId, normalized);
     }
   }
 
@@ -171,7 +196,7 @@ export class CellValueState<T, F extends FiltersMap> {
     if (!column) {
       return { value: rawValue };
     }
-    const resolved = this.resolveCellType(column.cellType);
+    const resolved = this.resolveCellTypeByColumnId(column.id);
     if (!resolved.deserialize) {
       return { value: rawValue };
     }
@@ -218,7 +243,7 @@ export class CellValueState<T, F extends FiltersMap> {
         continue;
       }
 
-      const resolved = this.resolveCellType(column.cellType);
+      const resolved = this.resolveCellTypeByColumnId(column.id);
       const result = runCellValidation(
         value,
         column.validation,
@@ -250,7 +275,7 @@ export class CellValueState<T, F extends FiltersMap> {
       return;
     }
 
-    const resolved = this.resolveCellType(column.cellType);
+    const resolved = this.resolveCellTypeByColumnId(column.id);
     const result = runCellValidation(
       value,
       column.validation,

package/src/state/EditableTable/EditableTableState.ts

@@ -2,10 +2,12 @@ import { action, computed, makeObservable, observable } from 'mobx';
 import {
   CollectionOptimisticActions,
   CollectionState,
+  ConditionalModalState,
   FiltersMap,
   SortOrder,
   WixPatternsContainer,
 } from '@wix/bex-core';
+import type { MessageModalLayoutProps } from '@wix/design-system';
 import type { KeyedItem } from '@wix/bex-core';
 import { ToolbarCollectionState } from '../ToolbarCollectionState';
 import { TableState } from '../TableState';
@@ -58,6 +60,9 @@ export class EditableTableState<T, F extends FiltersMap>
   readonly cellValue: CellValueState<T, F>;
   readonly clipboard: ClipboardState<T, F>;
   readonly mutation: MutationState<T, F>;
+  readonly deleteConfirmModal = new ConditionalModalState<
+    Partial<MessageModalLayoutProps>
+  >();
 
   addItemDisabled = false;
   updateItemDisabled = false;
@@ -103,6 +108,7 @@ export class EditableTableState<T, F extends FiltersMap>
       editableColumns: computed,
       _columnMap: computed,
       init: action,
+      confirmDeleteItems: action,
     });
 
     if (params.permissions) {
@@ -164,6 +170,7 @@ export class EditableTableState<T, F extends FiltersMap>
 
   init(columns: EditableColumn<T>[]) {
     this._allColumns = columns;
+    this.cellValue._buildCellTypeMap();
     return this.mutation.init();
   }
 
@@ -179,8 +186,22 @@ export class EditableTableState<T, F extends FiltersMap>
     this.mutation.deleteItems(rowKeys);
   }
 
-  resolveCellType(type: string) {
-    return this.cellValue.resolveCellType(type);
+  confirmDeleteItems(rowKeys: string[]) {
+    const { translate: t } = this.collection;
+    this.deleteConfirmModal.open({
+      theme: 'destructive',
+      title: t('cairo.deleteModal.title'),
+      content: t('cairo.deleteModal.body'),
+      primaryButtonText: t('cairo.delete.button'),
+      secondaryButtonText: t('cairo.cancel.button'),
+      primaryButtonOnClick: () => {
+        this.deleteItems(rowKeys);
+      },
+    });
+  }
+
+  resolveCellTypeByColumnId(columnId: string) {
+    return this.cellValue.resolveCellTypeByColumnId(columnId);
   }
 
   getCellDisplayValue(rowKey: string, columnId: string): any {
@@ -201,13 +222,28 @@ export class EditableTableState<T, F extends FiltersMap>
 
   handleCellClick(rowKey: string, columnId: string, shiftKey: boolean) {
     if (this.cellInteraction.isEditing) {
+      if (this.cellInteraction.isCellEditing(rowKey, columnId)) {
+        // Click landed inside the active editor — let the editor handle it.
+        return;
+      }
+      // Shift-click while editing: ignore — extending a range selection during
+      // an active edit is not a meaningful action.
+      if (shiftKey) {
+        return;
+      }
+      // Plain click on a different cell: commit the edit and move focus.
+      this.cellInteraction.commitEdit();
+      this.cellInteraction.focusCell(rowKey, columnId);
       return;
     }
 
     const column = this._columnMap.get(columnId);
-    const resolved = column ? this.resolveCellType(column.cellType) : null;
-    if (resolved?.toggleValue && !this.updateItemDisabled) {
-      this.cellValue.toggleCell(rowKey, columnId);
+    const resolved = column ? this.resolveCellTypeByColumnId(column.id) : null;
+    if (resolved?.toggleValue) {
+      // Toggle cells (e.g. boolean): click focuses the cell and shows the
+      // checkbox affordance. The toggle itself is committed when the user
+      // interacts with the checkbox or presses Enter — not on the bare cell
+      // click — so that clicking to focus doesn't inadvertently change the value.
       this.cellInteraction.focusCell(rowKey, columnId);
       return;
     }
@@ -226,6 +262,14 @@ export class EditableTableState<T, F extends FiltersMap>
     if (this.updateItemDisabled) {
       return;
     }
+    const column = this._columnMap.get(columnId);
+    const resolved = column ? this.resolveCellTypeByColumnId(column.id) : null;
+    // Toggle-value cells (e.g. boolean) activate on single click, not double-click.
+    // Entering edit mode on double-click would apply the editing box-shadow
+    // without any EditComponent being shown, causing a visual border glitch.
+    if (resolved?.toggleValue) {
+      return;
+    }
     if (this.isCellEditable(rowKey, columnId)) {
       this.cellInteraction.startEdit(rowKey, columnId, 'doubleClick');
     }

package/src/state/EditableTable/index.ts

@@ -12,5 +12,4 @@ export type {
   ValidationResult,
   CellType,
   EditableColumn,
-  SelectCellConfig,
 } from './types';

package/src/state/EditableTable/types.ts

@@ -22,7 +22,8 @@ export type ValidationRule =
   | { type: 'min' | 'max'; value: number; message: string }
   | { type: 'minLength' | 'maxLength'; value: number; message: string }
   | { type: 'pattern'; value: RegExp; message: string }
-  | { type: 'custom'; validate: (value: unknown) => boolean; message: string };
+  | { type: 'custom'; validate: (value: unknown) => boolean; message: string }
+  | { type: 'specificValues'; values: { id: string; value: string }[]; message: string };
 
 export interface ValidationResult {
   valid: boolean;
@@ -57,10 +58,18 @@ export interface CellType {
   toggleValue?: (value: any) => any;
 
   /** Called on type-to-edit. Return object with cleared value and/or prevent flag.
-   *  CMS-web pattern: text clears to '', number clears only for digits, date blocks non-digits. */
+   *  CMS-web pattern: text clears to '', number clears only for digits, date blocks non-digits.
+   *  Return undefined to block the key. Return {} to enter edit mode without changing the value. */
   onTypeToEdit?: (params: {
     key: string;
-  }) => { value?: any; prevent?: boolean } | undefined;
+    validation?: ValidationRule[];
+  }) => { value?: any } | undefined;
+
+  /** Optional hook to normalize the committed value (e.g. auto-prepend https://).
+   *  Called before commitEdit() from EditableCell (blur/Enter) and useKeyboardNavigation (Tab).
+   *  The value is written back to editingValue via runInAction before committing. */
+  normalizeOnCommit?: (value: any) => any;
+
 }
 
 export interface CellTypeConfigMap {
@@ -69,14 +78,9 @@ export interface CellTypeConfigMap {
   boolean: never;
   url: never;
   email: never;
-  select: SelectCellConfig;
   date: never;
   object: never;
-  custom: Record<string, unknown>;
-}
-
-export interface SelectCellConfig {
-  options: { id: string; value: string }[];
+  custom: Omit<CellType, 'type'>;
 }
 
 interface EditableColumnBase<T> extends Omit<TableColumn<T>, 'render'> {