@wix/patterns 1.481.0 → 1.483.0

package/src/components/EditableTable/EditableCell.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import type { FiltersMap } from '@wix/bex-core';
 import { Text } from '@wix/design-system';
@@ -56,15 +56,25 @@ function _EditableCell<T, F extends FiltersMap>({
     [state, rowKey, columnId],
   );
 
+  // Local new rows still create when focus leaves them, so a half-filled row
+  // is not created.
+  const saveRow = useCallback(() => {
+    if (!state.mutation.isLocalNewRow(rowKey)) {
+      state.cellValue.flushRow(rowKey);
+    }
+  }, [state, rowKey]);
+
   // Auto-start edit if onChange fires before explicit startEdit (e.g., onOptionMarked
   // in select). startEdit resets editingValue, so it must come before setEditingValue.
   // For production cell types, consider the per-callback withEnterEdit pattern from cms-web.
   const handleChange = useCallback(
     (newValue: any) => {
       // A checkbox click is a toggle, same as Enter on the cell. Starting an
-      // edit here would report that click as Enter.
-      if (resolved?.toggleValue) {
+      // edit here would report that click as Enter. In edit mode (keyboard)
+      // the new value goes through editingValue, so commitEdit reports it once.
+      if (resolved?.toggleValue && !cellInteraction.isEditing) {
         state.cellValue.toggleCell(rowKey, columnId);
+        saveRow();
         return;
       }
       if (!cellInteraction.isEditing) {
@@ -72,13 +82,51 @@ function _EditableCell<T, F extends FiltersMap>({
       }
       cellInteraction.setEditingValue(newValue);
     },
-    [resolved, state, cellInteraction, rowKey, columnId],
+    [resolved, state, cellInteraction, rowKey, columnId, saveRow],
   );
 
-  const handleCommit = useCallback(
-    () => cellInteraction.commitEdit(),
-    [cellInteraction],
-  );
+  // A mouse press on another cell blurs this editor, which commits, before the
+  // click moves focus. That commit only buffers the value; the row saves when
+  // focus leaves it, same as Tab. The flag clears on click, not pointerup:
+  // on touch, the blur comes after pointerup.
+  const pressedOtherCellRef = useRef(false);
+  useEffect(() => {
+    if (!isEditing) {
+      return;
+    }
+    const handlePointerDown = (e: PointerEvent) => {
+      const pressedCell = (e.target as Element | null)?.closest?.(
+        '[role="gridcell"]',
+      );
+      pressedOtherCellRef.current =
+        !!pressedCell && pressedCell !== cellRef.current;
+    };
+    // A key press clears it too, so a press that never became a click
+    // cannot stop the next Enter from saving.
+    const clearPress = () => {
+      pressedOtherCellRef.current = false;
+    };
+    document.addEventListener('pointerdown', handlePointerDown, true);
+    document.addEventListener('click', clearPress, true);
+    document.addEventListener('keydown', clearPress, true);
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown, true);
+      document.removeEventListener('click', clearPress, true);
+      document.removeEventListener('keydown', clearPress, true);
+      pressedOtherCellRef.current = false;
+    };
+  }, [isEditing]);
+
+  // An editor commits on Enter or when the user picks a value — save the row
+  // now. Focus moves commit through the framework, so this cell is no longer
+  // editing by then and the row saves when focus leaves it.
+  const handleCommit = useCallback(() => {
+    const wasEditing = cellInteraction.isCellEditing(rowKey, columnId);
+    cellInteraction.commitEdit();
+    if (wasEditing && !pressedOtherCellRef.current) {
+      saveRow();
+    }
+  }, [cellInteraction, rowKey, columnId, saveRow]);
 
   const handleCancel = useCallback(
     () => cellInteraction.cancelEdit(),

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_ = "HeaderActionsPopover338227680";
 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":"HeaderActionsPopover338227680__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_ = "CellViewLayout3647193528";
 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":"CellViewLayout3647193528__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_ = "Edit2465882765";
 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":"Edit2465882765__root","addressInput":"Edit2465882765__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_ = "Edit187134751";
 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":"Edit187134751__root","jsonInput":"Edit187134751__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_ = "Edit553149446";
 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":"Edit553149446__root","booleanEdit":"Edit553149446__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_ = "View2780809279";
 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":"View2780809279__root","booleanView":"View2780809279__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_ = "Edit3124814383";
 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":"Edit3124814383__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_ = "Edit3869966854";
 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":"Edit3869966854__root","dateInput":"Edit3869966854__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_ = "View4175531701";
 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":"View4175531701__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_ = "Edit3230846280";
 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":"Edit3230846280__root","half":"Edit3230846280__half","dateHalf":"Edit3230846280__dateHalf Edit3230846280__half","timeHalf":"Edit3230846280__timeHalf Edit3230846280__half","divider":"Edit3230846280__divider","passiveText":"Edit3230846280__passiveText","placeholderText":"Edit3230846280__placeholderText Edit3230846280__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_ = "View3043169916";
 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":"View3043169916__root","leaf":"View3043169916__leaf","datePart":"View3043169916__datePart View3043169916__leaf","timePart":"View3043169916__timePart View3043169916__leaf","placeholder":"View3043169916__placeholder View3043169916__leaf","divider":"View3043169916__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_ = "Edit755446550";
 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":"Edit755446550__root","emailInput":"Edit755446550__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_ = "View3810151596";
 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":"View3810151596__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_ = "Edit2979442439";
 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":"Edit2979442439__root","numberInput":"Edit2979442439__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_ = "View2569538802";
 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":"View2569538802__root","textView":"View2569538802__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_ = "Edit3161541003";
 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":"Edit3161541003__root","jsonInput":"Edit3161541003__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_ = "View280324629";
 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":"View280324629__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};