@wix/patterns 1.377.0 → 1.380.0

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

@@ -31,10 +31,8 @@ export function TableGridSwitchUniDriver(base: UniDriver, body: UniDriver) {
     getTable,
     /** Get Grid driver */
     getGrid,
-    isShowingGrid: () =>
-      base.$(`[data-hook="toolbar-collection-content"]`).exists(),
-    isShowingTable: async () =>
-      !(await base.$(`[data-hook="toolbar-collection-content"]`).exists()),
+    isShowingGrid: () => body.$(`[data-hook="layout-view-grid"]`).exists(),
+    isShowingTable: () => body.$(`[data-hook="layout-view-table"]`).exists(),
     /**
      * Gets collection summary bar
      */

package/src/components/TableGridSwitchButton/TableGridSwitchButton.tsx

@@ -1,111 +1,14 @@
 import { observer } from 'mobx-react-lite';
-import React, { useMemo } from 'react';
-import {
-  DropdownBase,
-  IconButton,
-  listItemSelectBuilder,
-  SegmentedToggle,
-  Tooltip,
-} from '@wix/design-system';
-import { LayoutGallery, LayoutList } from '@wix/wix-ui-icons-common';
-import { useWixPatternsContainer } from '@wix/bex-core/react';
-import { TranslationsKeys } from '@wix/bex-core';
-import { ViewType, ViewTypeState } from '../../state/ViewTypeState';
-import { layoutOptions, layoutConfig } from './layoutConfig';
+import React from 'react';
+import { ViewTypeState } from '../../state/ViewTypeState';
+import { LayoutSwitchButton } from '../LayoutSwitchButton';
 
 export interface TableGridSwitchButtonProps {
   state: ViewTypeState;
 }
 
-function _TableGridSwitchButton(props: TableGridSwitchButtonProps) {
-  const { translate: t, experiments } = useWixPatternsContainer();
-  const { state } = props;
-  const { viewType } = state;
-
-  const isLayoutToggleRedesignEnabled = experiments.enabled(
-    'specs.cairo.layout-toggle.redesign',
-  );
-
-  const options = useMemo(
-    () =>
-      layoutOptions.map((option) =>
-        listItemSelectBuilder({
-          id: option,
-          title: t(layoutConfig[option].translationKey),
-          prefix: layoutConfig[option].icon,
-          dataHook: `layout-option-${option}`,
-        }),
-      ),
-    [t],
-  );
-
-  if (!isLayoutToggleRedesignEnabled) {
-    return (
-      <SegmentedToggle
-        size="small"
-        dataHook="table-grid-switch-toggle-button"
-        selected={viewType}
-        onClick={(_, value) => {
-          if (state.viewType === value) {
-            return;
-          }
-          state.changeViewType(value as ViewType);
-        }}
-      >
-        <SegmentedToggle.Icon
-          value="grid"
-          dataHook="toggle-option-grid"
-          tooltipText={t('cairo.table.gridView' as TranslationsKeys)}
-        >
-          <LayoutGallery />
-        </SegmentedToggle.Icon>
-        <SegmentedToggle.Icon
-          value="table"
-          dataHook="toggle-option-table"
-          tooltipText={t('cairo.table.listView' as TranslationsKeys)}
-        >
-          <LayoutList />
-        </SegmentedToggle.Icon>
-      </SegmentedToggle>
-    );
-  }
-
-  return (
-    <DropdownBase
-      dataHook="layout-switch-popover"
-      options={options}
-      selectedId={viewType}
-      showArrow
-      onSelect={(option) => {
-        const selectedOption = option.id as ViewType;
-        const index = layoutOptions.indexOf(selectedOption);
-        state.reportLayoutOptionClicked(selectedOption, index);
-        if (viewType !== selectedOption) {
-          state.changeViewType(selectedOption);
-        }
-      }}
-    >
-      {({ toggle }) => (
-        <Tooltip
-          content={t('cairo.table.layout.switchLayout' as TranslationsKeys)}
-          size="medium"
-        >
-          <IconButton
-            dataHook="layout-switch-button"
-            size="small"
-            priority="secondary"
-            aria-haspopup="menu"
-            onClick={() => {
-              state.reportLayoutSwitch();
-              toggle();
-            }}
-          >
-            {layoutConfig[viewType].icon}
-          </IconButton>
-        </Tooltip>
-      )}
-    </DropdownBase>
-  );
+function _TableGridSwitchButton({ state }: TableGridSwitchButtonProps) {
+  return <LayoutSwitchButton state={state} options={['table', 'grid']} />;
 }
 
 export const TableGridSwitchButton = observer(_TableGridSwitchButton);

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

@@ -22,15 +22,21 @@ export function TableGridSwitchButtonUniDriver(
     /** Check if the SegmentedToggle (old UI) exists */
     exists: () => base.exists(),
     /** Click table button in SegmentedToggle (old UI) */
-    clickTableButton: () => base.$$(`[data-hook="toggle-icon"]`).get(1).click(),
+    clickTableButton: () =>
+      base
+        .$(`[data-hook="toggle-option-table"] [data-hook="toggle-icon"]`)
+        .click(),
     /** Click grid button in SegmentedToggle (old UI) */
-    clickGridButton: () => base.$$(`[data-hook="toggle-icon"]`).get(0).click(),
+    clickGridButton: () =>
+      base
+        .$(`[data-hook="toggle-option-grid"] [data-hook="toggle-icon"]`)
+        .click(),
 
     popoverExists: () => getDropdown().exists(),
     layoutSwitchButtonExists: () => getLayoutSwitchButton().exists(),
     openPopover: () => getLayoutSwitchButton().click(),
     isPopoverOpen: () => getDropdown().isDropdownShown(),
-    clickLayoutOption: (option: 'table' | 'grid') =>
+    clickLayoutOption: (option: 'table' | 'grid' | 'spreadsheet') =>
       getDropdown().selectOptionByDataHook(`layout-option-${option}`),
     getLayoutOptionsCount: () => getDropdown().optionsCount(),
   };

package/src/components/TableGridSwitchButton/layoutConfig.tsx

@@ -1,20 +1,4 @@
-import React from 'react';
-import { LayoutGallery, LayoutSplit } from '@wix/wix-ui-icons-common';
-import { TranslationsKeys } from '@wix/bex-core';
 import { ViewType } from '../../state/ViewTypeState';
 
+export { layoutConfig } from '../LayoutSwitchButton/layoutConfig';
 export const layoutOptions: ViewType[] = ['table', 'grid'];
-
-export const layoutConfig: Record<
-  ViewType,
-  { icon: React.ReactNode; translationKey: TranslationsKeys }
-> = {
-  table: {
-    icon: <LayoutSplit />,
-    translationKey: 'cairo.table.layout.table' as TranslationsKeys,
-  },
-  grid: {
-    icon: <LayoutGallery />,
-    translationKey: 'cairo.table.layout.grid' as TranslationsKeys,
-  },
-};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter2255324386";
+var _namespace_ = "TabsFilter4257445835";
 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":"TabsFilter2255324386__root","title":"TabsFilter2255324386__title"};
+export var classes = {"root":"TabsFilter4257445835__root","title":"TabsFilter4257445835__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_ = "ManageTagsModal191798250";
+var _namespace_ = "ManageTagsModal1383368685";
 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":"ManageTagsModal191798250__root"};
+export var classes = {"root":"ManageTagsModal1383368685__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem1727625193";
+var _namespace_ = "ToolbarItem2510991336";
 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":"ToolbarItem1727625193__root"};
+export var classes = {"root":"ToolbarItem2510991336__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_ = "ToolbarItemBox3972644548";
+var _namespace_ = "ToolbarItemBox3076062664";
 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":"ToolbarItemBox3972644548__root"};
+export var classes = {"root":"ToolbarItemBox3076062664__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_ = "common3370304451";
+var _namespace_ = "common3086722801";
 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":"common3370304451__root","column":"common3370304451__column","fullHeight":"common3370304451__fullHeight"};
+export var classes = {"root":"common3086722801__root","column":"common3086722801__column","fullHeight":"common3086722801__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/exports/testkit/unidriver.ts

@@ -6,6 +6,7 @@ export { CollectionViewsDropdownUniDriver } from '../../components/CollectionVie
 export { CollectionSaveViewModalUniDriver } from '../../components/CollectionViewsDropdown/modals/SaveView/CollectionSaveViewModal.uni.driver';
 export { GridUniDriver } from '../../components/Grid/Grid.uni.driver';
 export { TableGridSwitchUniDriver } from '../../components/TableGridSwitch/TableGridSwitch.uni.driver';
+export { LayoutSwitchUniDriver } from '../../components/LayoutSwitch/LayoutSwitch.uni.driver';
 export { default as GridFoldersUniDriver } from '../../components/Grid/GridFolders.uni.driver';
 export { KanbanUniDriver } from '../../components/Kanban/Kanban.uni.driver';
 export { default as TableFoldersUniDriver } from '../../components/TableFolders/TableFolders.uni.driver';

package/src/hooks/useCollectionTableResize.ts

@@ -9,12 +9,14 @@ export function useCollectionTableResize({
   userResizeProps,
   columnSizesState,
   isVirtualized,
+  forceResize,
 }: {
   columns: TableColumn[];
   horizontalScroll: boolean | undefined;
   userResizeProps?: TableProps['resizeProps'];
   columnSizesState: ColumnSizesState | null;
   isVirtualized?: boolean;
+  forceResize?: boolean;
 }) {
   const experimentEnabled =
     columnSizesState?.isResizeExperimentEnabled ?? false;
@@ -26,16 +28,12 @@ export function useCollectionTableResize({
   );
 
   const isResizable =
-    experimentEnabled &&
-    !isMobile &&
-    !isVirtualized &&
-    !!horizontalScroll &&
-    areAllColumnsPixelWidth;
-
-  const resizePlaceholderColumn = useMemo(
-    () => ({ title: '', width: '100%', render: () => null }),
-    [],
-  );
+    forceResize ||
+    (experimentEnabled &&
+      !isMobile &&
+      !isVirtualized &&
+      !!horizontalScroll &&
+      areAllColumnsPixelWidth);
 
   const tableResizeProps: TableProps['resizeProps'] | undefined = isResizable
     ? {
@@ -51,6 +49,5 @@ export function useCollectionTableResize({
   return {
     isResizable,
     tableResizeProps,
-    resizePlaceholderColumn,
   };
 }

package/src/hooks/useEntityPage.ts

@@ -1,21 +1,29 @@
 import { useState } from 'react';
 import { EntityPageState, EntityPageStateParams } from '../state';
+import { EntityViewConfig } from '../state/EntityPage/EntityPageFieldsState';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { FieldValues } from 'react-hook-form';
 import { useWixPatternsRouter } from '../providers/WixPatternsRouterProvider';
 
-export interface UseEntityPageParams<T, V extends FieldValues = FieldValues>
-  extends Pick<
-    EntityPageStateParams<T, V>,
-    | 'fetch'
-    | 'onSave'
-    | 'saveSuccessToast'
-    | 'saveErrorToast'
-    | 'form'
-    | 'parentPageId'
-    | 'parentPath'
-    | 'fqdn'
-  > {}
+type UseEntityPageParamsBase<T, V extends FieldValues = FieldValues> = Pick<
+  EntityPageStateParams<T, V>,
+  | 'fetch'
+  | 'onSave'
+  | 'saveSuccessToast'
+  | 'saveErrorToast'
+  | 'form'
+  | 'parentPageId'
+  | 'parentPath'
+>;
+
+export type UseEntityPageParams<
+  T,
+  V extends FieldValues = FieldValues,
+> = UseEntityPageParamsBase<T, V> &
+  (
+    | { fields: EntityViewConfig[]; persistencyKey: string }
+    | { fields?: never; persistencyKey?: never }
+  );
 
 export function useEntityPage<T, V extends FieldValues = FieldValues>(
   props: UseEntityPageParams<T, V>,

package/src/hooks/useLayoutSwitchCollection.ts

@@ -0,0 +1,60 @@
+import { FiltersMap, OptionalFiltersMap } from '@wix/bex-core';
+import {
+  useWixPatternsContainer,
+  useWixPatternsContainerOverrides,
+  CollectionConfigWithConditionals,
+  useCreateCollection,
+  useCreateOptimisticActions,
+} from '@wix/bex-core/react';
+import {
+  LayoutSwitchState,
+  LayoutSwitchStateParams,
+  SpreadsheetLayoutConfig,
+  TableLayoutConfig,
+  GridLayoutConfig,
+} from '../state/LayoutSwitchState';
+import { useOptionalCachedState } from './useOptionalCachedState';
+
+export type LayoutSwitchCollectionConfig<
+  T,
+  F extends FiltersMap,
+> = CollectionConfigWithConditionals<T, F> & {
+  table?: TableLayoutConfig;
+  grid?: GridLayoutConfig;
+  spreadsheet?: Omit<SpreadsheetLayoutConfig<T, F>, 'createOptimisticActions'>;
+};
+
+export const useLayoutSwitchCollection = <
+  T,
+  F extends FiltersMap = OptionalFiltersMap,
+>(
+  config: LayoutSwitchCollectionConfig<T, F>,
+): LayoutSwitchState<T, F> => {
+  const container = useWixPatternsContainer();
+  const containerOverrides = useWixPatternsContainerOverrides();
+  const createCollection = useCreateCollection();
+  const createOptimisticActions = useCreateOptimisticActions();
+
+  const state = useOptionalCachedState(() => {
+    const collection = createCollection<T, F>(config);
+
+    const spreadsheet: LayoutSwitchStateParams<T, F>['spreadsheet'] =
+      config.spreadsheet
+        ? {
+            ...config.spreadsheet,
+            createOptimisticActions: (c) => createOptimisticActions(c),
+          }
+        : undefined;
+
+    return new LayoutSwitchState<T, F>({
+      collection,
+      container,
+      containerOverrides,
+      table: config.table,
+      grid: config.grid,
+      spreadsheet,
+    });
+  });
+
+  return state;
+};

package/src/index.ts

@@ -80,6 +80,8 @@ export * from './components/CustomFieldsWidget';
 export * from './components/TableFolders';
 export * from './components/GridDragAndDropDndKit/GridDragAndDrop';
 export * from './components/TableGridSwitch/TableGridSwitch';
+export * from './components/LayoutSwitch/LayoutSwitch';
+export * from './components/LayoutSwitchButton/LayoutSwitchButton';
 export * from './components/TableGridSwitchFolders/TableGridSwitchFolders';
 export * from './components/TableGridSwitch/TableGridSwitchDragAndDrop';
 export * from './components/TabTotal';
@@ -134,6 +136,7 @@ export * from './hooks/useEntityPage';
 export * from './hooks/useSettingsPage';
 export * from './hooks/useNestedTable';
 export * from './hooks/useEditableTableCollection';
+export * from './hooks/useLayoutSwitchCollection';
 export * from './hooks/useCreateNestedOptimisticActions';
 export * from './hooks/useEntity';
 export * from './hooks/useSettings';
@@ -144,6 +147,7 @@ export * from './hooks/useIsMobile';
 
 export * from './state/ViewsState';
 export * from './state/EntityPage/EntityPageState';
+export type { EntityViewConfig } from './state/EntityPage/EntityPageFieldsState';
 export * from './state/SettingsPage/SettingsPageState';
 export * from './state/TableState';
 export { GridState } from './state/GridState';
@@ -153,6 +157,8 @@ export * from './state/TableGridSwitchFoldersState';
 export * from './state/CustomFields/CustomFieldsWidgetState';
 export * from './state/NestedTableState';
 export * from './state/EditableTable';
+export * from './state/LayoutSwitchState';
+export * from './state/ILayoutSwitchState';
 export { DateRangeFilterStateParams } from './state/DateRangeFilterState';
 
 export { TableDragAndDrop } from './components/TableDragAndDrop';

package/src/model/view.ts

@@ -1,7 +1,7 @@
 import { AllFilters, FiltersMap, ExtractFilterValue } from '@wix/bex-core';
 import { InfoIconProps } from '@wix/design-system';
 
-export type ViewType = 'table' | 'grid';
+export type ViewType = 'table' | 'grid' | 'spreadsheet';
 
 export type ColumnSortOrder = 'Ascending' | 'Descending';
 

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

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

package/src/state/CustomColumnsState.ts

@@ -3,6 +3,7 @@ import {
   FiltersMap,
   SelectState,
   TaskState,
+  TransitionState,
   TypedEmitter,
   withoutDefaults,
   WixPatternsContainer,
@@ -14,7 +15,33 @@ import type { CustomColumnsDragAndDrop } from '../components/CustomColumns/Custo
 import { CustomColumnsHistoryState } from './CustomColumnsHistoryState';
 import { indexOfCompareFn } from './indexOfCompareFn';
 import { EventEmitter } from 'events';
-import { cairoCustomizeColumnsInSidePanel } from '@wix/bex-core/bi';
+import {
+  cairoCustomizeColumnsInSidePanel,
+  cairoFiltersPanelUsed,
+} from '@wix/bex-core/bi';
+import type { CustomColumnsDragAndDropState } from './CustomColumnsDragAndDropState';
+import type { CollectionDataExtensionState } from '../components/DataExtension';
+
+export type CustomColumnsPanelState<
+  T = unknown,
+  F extends FiltersMap = FiltersMap,
+> = {
+  readonly columnsCollection: CollectionState<Column, FiltersMap>;
+  readonly searchValue: string;
+  readonly orderedColumns: Column[];
+  readonly dragAndDrop?: CustomColumnsDragAndDropState<T, F>;
+  readonly select: SelectState<{ id: string }>;
+  setSearchValue(value: string): void;
+  onColumnCheckboxToggle(column: Column): void;
+  customizeColumnsInSidePanelBi(params: {
+    actionName: CustomColumnsActionName;
+  }): void;
+  init(): () => void;
+  readonly showFieldTypeIcons: boolean;
+  readonly collectionDataExtension?: CollectionDataExtensionState<T, F> | null;
+  readonly sidePanelTransition?: TransitionState<string>;
+  onClose(): void;
+};
 
 type StoredColumn =
   | { id?: string; name?: string; isSelected?: boolean }
@@ -477,6 +504,29 @@ export class CustomColumnsState<T, F extends FiltersMap> {
     );
   }
 
+  get showFieldTypeIcons() {
+    return this.table.showFieldTypeIcons;
+  }
+
+  get collectionDataExtension() {
+    return this.table.collectionDataExtension;
+  }
+
+  get sidePanelTransition() {
+    return this.table.sidePanel.transition;
+  }
+
+  onClose() {
+    this.table.reportBi(
+      withoutDefaults(cairoFiltersPanelUsed)({
+        isOpened: false,
+        feature: 'Custom Columns',
+        origin: 'X Button',
+      }),
+    );
+    this.table.sidePanel.close();
+  }
+
   get filteredColumns(): Column[] {
     const { orderedColumns, searchValue } = this;
 

package/src/state/EditableTable/CellInteractionState.ts

@@ -3,13 +3,10 @@ import type { Cell, CellBorder } from './types';
 import type { FiltersMap } from '@wix/bex-core';
 import type { EditableTableState } from './EditableTableState';
 import { cellKey, parseCellKey, noBorder } from './utils';
+import { EditTrigger } from '../../components/EditableTable/types';
 
 type Direction = 'up' | 'down' | 'left' | 'right';
 type CommitHandler = (editingValue: any, cell: Cell) => void;
-export type EditTrigger =
-  | { kind: 'type'; key: string }
-  | 'enter'
-  | 'doubleClick';
 
 export class CellInteractionState<T, F extends FiltersMap> {
   focusedCell: Cell | null = null;

package/src/state/EditableTable/EditableTableState.ts

@@ -174,8 +174,8 @@ export class EditableTableState<T, F extends FiltersMap>
     return this.mutation.init();
   }
 
-  addItem(afterItemKey?: string) {
-    this.mutation.addItem(afterItemKey);
+  addItem(afterItemKey?: string): string {
+    return this.mutation.addItem(afterItemKey);
   }
 
   duplicateItem(rowKey: string) {
@@ -233,21 +233,44 @@ export class EditableTableState<T, F extends FiltersMap>
       }
       // Plain click on a different cell: commit the edit and move focus.
       this.cellInteraction.commitEdit();
+
+      // If the target cell wants edit-on-click, enter edit directly.
+      const col = this._columnMap.get(columnId);
+      const res = col ? this.resolveCellTypeByColumnId(col.id) : null;
+      if (res?.editOnClick) {
+        const val = this.getCellDisplayValue(rowKey, columnId);
+        if (res.editOnClick(val) && this.isCellEditable(rowKey, columnId)) {
+          this.cellInteraction.focusCell(rowKey, columnId);
+          this.cellInteraction.startEdit(rowKey, columnId, 'click');
+          return;
+        }
+      }
+
       this.cellInteraction.focusCell(rowKey, columnId);
       return;
     }
 
     const column = this._columnMap.get(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.
+    if (resolved?.toggleValue || resolved?.showEditWhenFocused) {
+      // Toggle/showEditWhenFocused cells: click focuses the cell and shows the
+      // EditComponent affordance. Keyboard navigation remains active.
       this.cellInteraction.focusCell(rowKey, columnId);
       return;
     }
 
+    if (resolved?.editOnClick) {
+      const value = this.getCellDisplayValue(rowKey, columnId);
+      if (
+        resolved.editOnClick(value) &&
+        this.isCellEditable(rowKey, columnId)
+      ) {
+        this.cellInteraction.focusCell(rowKey, columnId);
+        this.cellInteraction.startEdit(rowKey, columnId, 'click');
+        return;
+      }
+    }
+
     if (shiftKey && this.cellInteraction.selectionAnchor) {
       this.cellInteraction.selectRange(this.cellInteraction.selectionAnchor, {
         rowKey,
@@ -267,7 +290,7 @@ export class EditableTableState<T, F extends FiltersMap>
     // 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) {
+    if (resolved?.toggleValue || resolved?.showEditWhenFocused) {
       return;
     }
     if (this.isCellEditable(rowKey, columnId)) {

package/src/state/EditableTable/MutationState.ts

@@ -37,7 +37,7 @@ export class MutationState<T, F extends FiltersMap> {
     return this._optimisticActions.init();
   }
 
-  addItem(afterItemKey?: string) {
+  addItem(afterItemKey?: string): string {
     const newItem = this._handlers.createItem();
     this._optimisticActions.createOne(newItem, {
       submit: this._handlers.submitCreate,
@@ -48,6 +48,7 @@ export class MutationState<T, F extends FiltersMap> {
         action: { onClick: retry, text: 'Retry' },
       }),
     });
+    return this._parent.collection.itemKey(newItem);
   }
 
   duplicateItem(rowKey: string) {