@wix/patterns 1.481.0 → 1.482.0

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

@@ -8,6 +8,7 @@ import { SpecificValuesEditUniDriver } from './cellTypes/text/SpecificValuesEdit
 import { DateEditUniDriver } from './cellTypes/date/Edit.uni.driver';
 import { ReferenceEditUniDriver } from './cellTypes/reference/Edit.uni.driver';
 import { AddressEditUniDriver } from './cellTypes/address/Edit.uni.driver';
+import { ObjectEditUniDriver } from './cellTypes/object/Edit.uni.driver';
 
 export function EditableCellUniDriver(base: UniDriver, body: UniDriver) {
   return {
@@ -91,6 +92,9 @@ export function EditableCellUniDriver(base: UniDriver, body: UniDriver) {
 
     getAddressEdit: () => AddressEditUniDriver(base, body),
 
+    /** Get the object (JSON) cell edit driver (for object columns) */
+    getObjectEdit: () => ObjectEditUniDriver(base, body),
+
     /** Right-click the cell (opens context menu) */
     rightClick: async () => {
       const el = await base.getNative();

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

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

package/src/components/EditableTable/HeaderFieldActions.tsx

@@ -59,7 +59,7 @@ function _HeaderFieldActions<T, F extends FiltersMap>({
     field && source?.fieldActionHandlers
       ? source.fieldActionHandlers({
           fieldId: field.id,
-          origin: 'external',
+          origin: 'Table column header',
           location: HEADER_LOCATION,
         })
       : null;

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3798308404";
+var _namespace_ = "Edit290107507";
 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":"Edit3798308404__root","addressInput":"Edit3798308404__addressInput"};
+export var classes = {"root":"Edit290107507__root","addressInput":"Edit290107507__addressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { Box, Text } from '@wix/design-system';
 import { AddressInput } from '@wix/patterns-fields';
 import type { Address, AtlasService } from '@wix/patterns-fields';
@@ -43,8 +43,18 @@ export const AddressEdit: React.FC<
       ? editTrigger.key
       : undefined;
 
+  const lastKeyRef = useRef<string | null>(null);
+  const addressInputRef = useRef<{ focus: () => void } | null>(null);
+
+  // This editor is lazy-loaded, so on first use it mounts after the cell has
+  // already tried to focus it.
+  useEffect(() => {
+    addressInputRef.current?.focus();
+  }, []);
+
   const handleKeyDownCapture = useCallback(
     (e: React.KeyboardEvent) => {
+      lastKeyRef.current = e.key;
       if (e.key === 'Escape') {
         e.preventDefault();
         e.stopPropagation();
@@ -54,6 +64,14 @@ export const AddressEdit: React.FC<
     [onCancel],
   );
 
+  // Fires on Enter or Tab when no suggestion was picked. A picked suggestion
+  // resolves asynchronously and commits through onSelectAddress instead.
+  const handleManualInput = useCallback(() => {
+    if (lastKeyRef.current === 'Enter') {
+      onCommit();
+    }
+  }, [onCommit]);
+
   const handleBlur = useCallback(
     (e: React.FocusEvent<HTMLDivElement>) => {
       if (e.currentTarget.contains(e.relatedTarget as Node | null)) {
@@ -74,6 +92,7 @@ export const AddressEdit: React.FC<
     >
       <AddressInput
         ref={(instance) => {
+          addressInputRef.current = instance;
           if (inputRef) {
             inputRef.current = instance;
           }
@@ -81,6 +100,7 @@ export const AddressEdit: React.FC<
         value={value ?? undefined}
         onChange={(address) => onChange(address ?? null)}
         onSelectAddress={onCommit}
+        onManuallyInput={handleManualInput}
         atlasService={atlasService}
         initialSearchText={initialSearchText}
         size="small"

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3557897221";
+var _namespace_ = "Edit1226354150";
 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":"Edit3557897221__root","jsonInput":"Edit3557897221__jsonInput"};
+export var classes = {"root":"Edit1226354150__root","jsonInput":"Edit1226354150__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -3,6 +3,7 @@ import type { InputArea } from '@wix/design-system';
 import { Box } from '@wix/design-system';
 import { CellJsonInput } from '@wix/patterns-fields';
 import type { CellEditProps } from '../../types';
+import { useMultilineEditKeyboard } from '../useMultilineEditKeyboard';
 import { classes } from './Edit.st.css.js';
 
 export const ArrayEdit: React.FC<CellEditProps<unknown[]>> = ({
@@ -12,7 +13,6 @@ export const ArrayEdit: React.FC<CellEditProps<unknown[]>> = ({
   onCancel,
   inputRef,
 }) => {
-  const committedRef = useRef(false);
   const inputAreaRef = useRef<InputArea | null>(null);
 
   useEffect(() => {
@@ -28,22 +28,10 @@ export const ArrayEdit: React.FC<CellEditProps<unknown[]>> = ({
     [onChange],
   );
 
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        e.preventDefault();
-        committedRef.current = true;
-        onCancel();
-      }
-    },
-    [onCancel],
-  );
-
-  const handleBlur = useCallback(() => {
-    if (!committedRef.current) {
-      onCommit();
-    }
-  }, [onCommit]);
+  const { handleKeyDown, handleBlur } = useMultilineEditKeyboard({
+    onCommit,
+    onCancel,
+  });
 
   return (
     <Box width="100%" height="100%">

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1122436048";
+var _namespace_ = "Edit3486629839";
 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":"Edit1122436048__root","booleanEdit":"Edit1122436048__booleanEdit"};
+export var classes = {"root":"Edit3486629839__root","booleanEdit":"Edit3486629839__booleanEdit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -8,6 +8,7 @@ export const BooleanEdit: React.FC<CellEditProps<boolean>> = ({
   onChange,
   onCommit,
   onCancel,
+  inputRef,
 }) => {
   const handleChange = useCallback(
     (checked: boolean) => {
@@ -43,6 +44,11 @@ export const BooleanEdit: React.FC<CellEditProps<boolean>> = ({
       className={classes.booleanEdit}
     >
       <CellCheckbox
+        ref={(instance) => {
+          if (inputRef) {
+            inputRef.current = instance;
+          }
+        }}
         dataHook="boolean-checkbox"
         checked={!!value}
         onChange={handleChange}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1497652369";
+var _namespace_ = "View1045276149";
 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":"View1497652369__root","booleanView":"View1497652369__booleanView"};
+export var classes = {"root":"View1045276149__root","booleanView":"View1045276149__booleanView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit983210720";
+var _namespace_ = "Edit2522559292";
 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":"Edit983210720__root","dateInput":"Edit983210720__dateInput"};
+export var classes = {"root":"Edit2522559292__root","dateInput":"Edit2522559292__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/date/View.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit710968093";
+var _namespace_ = "Edit3461277649";
 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":"Edit710968093__root","half":"Edit710968093__half","dateHalf":"Edit710968093__dateHalf Edit710968093__half","timeHalf":"Edit710968093__timeHalf Edit710968093__half","divider":"Edit710968093__divider","passiveText":"Edit710968093__passiveText","placeholderText":"Edit710968093__placeholderText Edit710968093__passiveText"};
+export var classes = {"root":"Edit3461277649__root","half":"Edit3461277649__half","dateHalf":"Edit3461277649__dateHalf Edit3461277649__half","timeHalf":"Edit3461277649__timeHalf Edit3461277649__half","divider":"Edit3461277649__divider","passiveText":"Edit3461277649__passiveText","placeholderText":"Edit3461277649__placeholderText Edit3461277649__passiveText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -328,9 +328,13 @@ export const DateTimeEdit: React.FC<CellEditProps<Date | null>> = ({
     onCommit();
   }, [onChange, onCommit]);
 
-  const handleEscape = useCallback(
+  const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
-      if (e.key === 'Escape') {
+      // Bubble phase: the inputs have already applied a typed or picked value.
+      if (e.key === 'Enter') {
+        commitTypedDate();
+        onCommit();
+      } else if (e.key === 'Escape') {
         e.preventDefault();
         e.stopPropagation();
         // Cancellation drops any typed-but-stashed date. Without this, a
@@ -341,7 +345,7 @@ export const DateTimeEdit: React.FC<CellEditProps<Date | null>> = ({
         onCancel();
       }
     },
-    [onCancel],
+    [onCancel, onCommit, commitTypedDate],
   );
 
   const validDate = isValidDate(value) ? value : null;
@@ -362,8 +366,9 @@ export const DateTimeEdit: React.FC<CellEditProps<Date | null>> = ({
   //   1. halfHandlers.onClick / onMouseDown (React, below)
   //      → swallow the framework's "click inside cell during edit" handling
   //        so clicks on either half don't re-trigger an edit start.
-  //   2. halfHandlers.onKeyDown = handleEscape (React, below)
-  //      → cancels the edit before the framework's Escape behavior runs.
+  //   2. halfHandlers.onKeyDown = handleKeyDown (React, below)
+  //      → Enter commits; Escape cancels the edit before the framework's
+  //        Escape behavior runs.
   //   3. document keydown capture for intra-cell Tab (useEffect above)
   //      → date↔time half switch runs BEFORE the framework's Tab handler
   //        would move focus to the next column.
@@ -373,7 +378,7 @@ export const DateTimeEdit: React.FC<CellEditProps<Date | null>> = ({
   //        that would otherwise let WDS DropdownBase.onSelect commit a
   //        random option under the cursor.
   const halfHandlers = {
-    onKeyDown: handleEscape,
+    onKeyDown: handleKeyDown,
     onClick: (e: React.MouseEvent) => e.stopPropagation(),
     onMouseDown: (e: React.MouseEvent) => e.stopPropagation(),
   };

package/src/components/EditableTable/cellTypes/datetime/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1588932039";
+var _namespace_ = "View783731082";
 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":"View1588932039__root","leaf":"View1588932039__leaf","datePart":"View1588932039__datePart View1588932039__leaf","timePart":"View1588932039__timePart View1588932039__leaf","placeholder":"View1588932039__placeholder View1588932039__leaf","divider":"View1588932039__divider"};
+export var classes = {"root":"View783731082__root","leaf":"View783731082__leaf","datePart":"View783731082__datePart View783731082__leaf","timePart":"View783731082__timePart View783731082__leaf","placeholder":"View783731082__placeholder View783731082__leaf","divider":"View783731082__divider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3266938706";
+var _namespace_ = "Edit642095855";
 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":"Edit3266938706__root","emailInput":"Edit3266938706__emailInput"};
+export var classes = {"root":"Edit642095855__root","emailInput":"Edit642095855__emailInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/email/View.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1428708983";
+var _namespace_ = "Edit4233519889";
 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":"Edit1428708983__root","numberInput":"Edit1428708983__numberInput"};
+export var classes = {"root":"Edit4233519889__root","numberInput":"Edit4233519889__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/number/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View4254107584";
+var _namespace_ = "View3283603094";
 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":"View4254107584__root","textView":"View4254107584__textView"};
+export var classes = {"root":"View3283603094__root","textView":"View3283603094__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit4155910577";
+var _namespace_ = "Edit1594439409";
 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":"Edit4155910577__root","jsonInput":"Edit4155910577__jsonInput"};
+export var classes = {"root":"Edit1594439409__root","jsonInput":"Edit1594439409__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -3,6 +3,7 @@ import type { InputArea } from '@wix/design-system';
 import { Box } from '@wix/design-system';
 import { CellJsonInput } from '@wix/patterns-fields';
 import type { CellEditProps } from '../../types';
+import { useMultilineEditKeyboard } from '../useMultilineEditKeyboard';
 import { classes } from './Edit.st.css.js';
 
 export const ObjectEdit: React.FC<CellEditProps<Record<string, unknown>>> = ({
@@ -12,7 +13,6 @@ export const ObjectEdit: React.FC<CellEditProps<Record<string, unknown>>> = ({
   onCancel,
   inputRef,
 }) => {
-  const committedRef = useRef(false);
   const inputAreaRef = useRef<InputArea | null>(null);
 
   // Expand to fit content immediately on mount (= entering edit mode).
@@ -30,23 +30,10 @@ export const ObjectEdit: React.FC<CellEditProps<Record<string, unknown>>> = ({
     [onChange],
   );
 
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        e.preventDefault();
-        committedRef.current = true;
-        onCancel();
-      }
-      // Enter is not handled — multi-line JSON needs Enter for newlines
-    },
-    [onCancel],
-  );
-
-  const handleBlur = useCallback(() => {
-    if (!committedRef.current) {
-      onCommit();
-    }
-  }, [onCommit]);
+  const { handleKeyDown, handleBlur } = useMultilineEditKeyboard({
+    onCommit,
+    onCancel,
+  });
 
   return (
     <Box width="100%" height="100%">

package/src/components/EditableTable/cellTypes/object/View.st.css.ts

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

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

@@ -13,6 +13,7 @@ import {
 } from '@wix/patterns-fields';
 import type { CellEditProps } from '../../types';
 import { useCloseOnAncestorScroll } from '../../../../hooks/useCloseOnAncestorScroll';
+import { useCommitOnEnter } from '../useCommitOnEnter';
 import { useFilterCollectionStates } from '../../../../hooks/useFilterCollectionStates';
 import { FilterTranslationProvider } from '../../../../providers';
 import type { ReferenceItem, ReferenceTypeConfig } from './types';
@@ -182,6 +183,10 @@ function _ReferenceEditContent({
     ],
   );
 
+  // On a wrapper, not handleKeyDown — that runs on the input, before the
+  // highlighted option is selected.
+  const handleEnterCommit = useCommitOnEnter(onCommit);
+
   const closeDropdown = useCallback(() => acHandle.current?.hideOptions(), []);
   useCloseOnAncestorScroll(wrapperRef, closeDropdown, true);
 
@@ -210,25 +215,27 @@ function _ReferenceEditContent({
 
   return (
     <Box ref={wrapperRef} width="100%" height="100%">
-      <CellReferenceInput
-        ref={acHandle}
-        items={items}
-        value={displayValue}
-        selectedItem={selectedItem}
-        onChange={handleChange}
-        onSelect={handleSelect}
-        onClear={handleClear}
-        onKeyDown={handleKeyDown}
-        clearButton={!!displayValue}
-        infiniteScroll
-        hasMore={!showInitialLoader && !fetchedLastPage}
-        loadMore={collection.fetchNextPageIfNeeded}
-        fixedFooter={fixedFooter}
-        onBlur={onCommit}
-        onOpenCollection={handleOpenCollection}
-        autoOpen={!!editTrigger}
-        inputRef={inputRef}
-      />
+      <div style={{ display: 'contents' }} onKeyDown={handleEnterCommit}>
+        <CellReferenceInput
+          ref={acHandle}
+          items={items}
+          value={displayValue}
+          selectedItem={selectedItem}
+          onChange={handleChange}
+          onSelect={handleSelect}
+          onClear={handleClear}
+          onKeyDown={handleKeyDown}
+          clearButton={!!displayValue}
+          infiniteScroll
+          hasMore={!showInitialLoader && !fetchedLastPage}
+          loadMore={collection.fetchNextPageIfNeeded}
+          fixedFooter={fixedFooter}
+          onBlur={onCommit}
+          onOpenCollection={handleOpenCollection}
+          autoOpen={!!editTrigger}
+          inputRef={inputRef}
+        />
+      </div>
     </Box>
   );
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit261524571";
+var _namespace_ = "Edit3068663442";
 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":"Edit261524571__root","selectInput":"Edit261524571__selectInput"};
+export var classes = {"root":"Edit3068663442__root","selectInput":"Edit3068663442__selectInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};