@wix/patterns 1.480.0 → 1.482.0

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

@@ -85,8 +85,9 @@ export const DateTimeEdit: React.FC<CellEditProps<Date | null>> = ({
   // editingValue. WDS DateInput's `componentDidUpdate` reformats the input
   // text on every props.value change, so calling onChange while the user is
   // still in the date half would overwrite mid-typing input. We stash here
-  // and flush on focusout / intra-cell Tab / Escape.
-  const typedDateRef = useRef<Date | null>(null);
+  // and flush on focusout / intra-cell Tab / Escape. `null` = emptied,
+  // `undefined` = nothing stashed.
+  const typedDateRef = useRef<Date | null | undefined>(undefined);
 
   const onChangeRef = useRef(onChange);
   const onCommitRef = useRef(onCommit);
@@ -104,9 +105,9 @@ export const DateTimeEdit: React.FC<CellEditProps<Date | null>> = ({
   const typeTriggerConsumedRef = useRef(false);
 
   const commitTypedDate = useCallback(() => {
-    if (typedDateRef.current) {
+    if (typedDateRef.current !== undefined) {
       onChangeRef.current(typedDateRef.current);
-      typedDateRef.current = null;
+      typedDateRef.current = undefined;
     }
   }, []);
 
@@ -125,11 +126,11 @@ export const DateTimeEdit: React.FC<CellEditProps<Date | null>> = ({
 
   // Flush typed-but-not-committed date when focus leaves the date half. The
   // gesture paths (calendar day pick, Tab/Enter on focused day, intra-cell
-  // Tab, Enter on input) flush via their own handlers; this covers external
-  // exits — clicking another cell, the toolbar, or anything else outside
-  // the date wrapper. Without it the framework's commitEdit (triggered by
-  // the focus shift to another cell) would read the stale editingValue and
-  // silently discard the user's typing.
+  // Tab) flush via their own handlers, and Enter on the input commits; this
+  // covers external exits — clicking another cell, the toolbar, or anything
+  // else outside the date wrapper. Without it the framework's commitEdit
+  // (triggered by the focus shift to another cell) would read the stale
+  // editingValue and silently discard the user's typing.
   useEffect(() => {
     if (subEdit !== 'date') {
       return;
@@ -288,6 +289,19 @@ export const DateTimeEdit: React.FC<CellEditProps<Date | null>> = ({
     typedDateRef.current = mergeDate(valueRef.current, newDate);
   }, []);
 
+  const handleDateEmpty = useCallback(() => {
+    typedDateRef.current = null;
+  }, []);
+
+  const handleDateEnter = useCallback(
+    (newDate: Date | null) => {
+      typedDateRef.current = undefined;
+      onChange(newDate ? mergeDate(valueRef.current, newDate) : null);
+      onCommit();
+    },
+    [onChange, onCommit],
+  );
+
   const handleTimeChange = useCallback(
     (time: Time | null) => {
       if (!time) {
@@ -309,25 +323,29 @@ export const DateTimeEdit: React.FC<CellEditProps<Date | null>> = ({
   const handleDateClear = useCallback(() => {
     // Drop any stashed typed date so the focusout flush doesn't restore it
     // after we commit null.
-    typedDateRef.current = null;
+    typedDateRef.current = undefined;
     onChange(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
         // delayed focusout (browsers fire blur asynchronously when the
         // focused element is removed) could re-introduce the typed value
         // after the user already pressed Escape.
-        typedDateRef.current = null;
+        typedDateRef.current = undefined;
         onCancel();
       }
     },
-    [onCancel],
+    [onCancel, onCommit, commitTypedDate],
   );
 
   const validDate = isValidDate(value) ? value : null;
@@ -348,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.
@@ -359,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(),
   };
@@ -378,6 +397,8 @@ export const DateTimeEdit: React.FC<CellEditProps<Date | null>> = ({
             inputRef={dateInputElRef}
             value={validDate}
             onChange={handleDateChange}
+            onEmpty={handleDateEmpty}
+            onEnter={handleDateEnter}
             onClear={handleDateClear}
             placeholder={datePh}
             ariaLabel={t('CMS.cellDateTime.ariaLabel.date')}

package/src/components/EditableTable/cellTypes/datetime/Edit.uni.driver.ts

@@ -1,7 +1,8 @@
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { DatePickerUniDriver } from '@wix/design-system/dist/testkit/unidriver';
 import { baseUniDriverFactory } from '../../../../unidriver';
 
-export function DateTimeEditUniDriver(base: UniDriver, _body: UniDriver) {
+export function DateTimeEditUniDriver(base: UniDriver, body: UniDriver) {
   const dateHalf = () => base.$('[data-sub-cell="date"]');
   const timeHalf = () => base.$('[data-sub-cell="time"]');
 
@@ -9,6 +10,8 @@ export function DateTimeEditUniDriver(base: UniDriver, _body: UniDriver) {
     ...baseUniDriverFactory(base),
     getDateInputValue: () => dateHalf().$('input').attr('value'),
     getTimeInputValue: () => timeHalf().$('input').attr('value'),
+    enterDateText: (text: string) =>
+      DatePickerUniDriver(dateHalf(), body).inputDriver.enterText(text),
     clickDateHalf: () => dateHalf().click(),
     clickTimeHalf: () => timeHalf().click(),
     dateHalfHasInput: () => dateHalf().$('input').exists(),

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View612183954";
+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":"View612183954__root","leaf":"View612183954__leaf","datePart":"View612183954__datePart View612183954__leaf","timePart":"View612183954__timePart View612183954__leaf","placeholder":"View612183954__placeholder View612183954__leaf","divider":"View612183954__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_ = "Edit2311684223";
+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":"Edit2311684223__root","emailInput":"Edit2311684223__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_ = "View625904045";
+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":"View625904045__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_ = "Edit3329408817";
+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":"Edit3329408817__root","numberInput":"Edit3329408817__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_ = "View1911097068";
+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":"View1911097068__root","textView":"View1911097068__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_ = "Edit3863363173";
+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":"Edit3863363173__root","jsonInput":"Edit3863363173__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_ = "View702044422";
+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":"View702044422__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_ = "Edit1285713997";
+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":"Edit1285713997__root","selectInput":"Edit1285713997__selectInput"};
+export var classes = {"root":"Edit3068663442__root","selectInput":"Edit3068663442__selectInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2829224628";
+var _namespace_ = "Edit136882343";
 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":"Edit2829224628__root","editWrapper":"Edit2829224628__editWrapper","inputArea":"Edit2829224628__inputArea"};
+export var classes = {"root":"Edit136882343__root","editWrapper":"Edit136882343__editWrapper","inputArea":"Edit136882343__inputArea"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -7,6 +7,7 @@ import {
 import type { CellEditProps } from '../../types';
 import type { ValidationRule } from '../../../../state/EditableTable/types';
 import { useCloseOnAncestorScroll } from '../../../../hooks/useCloseOnAncestorScroll';
+import { useCommitOnEnter } from '../useCommitOnEnter';
 import { st, classes } from './Edit.st.css.js';
 
 function getMaxLength(validation?: ValidationRule[]) {
@@ -132,11 +133,14 @@ const TextEditSpecificValues: React.FC<
     [onCancel],
   );
 
+  const handleKeyDown = useCommitOnEnter(onCommit);
+
   return (
     <div
       ref={wrapperRef}
       className={classes.editWrapper}
       onKeyDownCapture={handleKeyDownCapture}
+      onKeyDown={handleKeyDown}
     >
       <CellAutoCompleteInput
         ref={acHandle}

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit101690587";
+var _namespace_ = "Edit1256572773";
 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":"Edit101690587__root","wrapper":"Edit101690587__wrapper","overlay":"Edit101690587__overlay"};
+export var classes = {"root":"Edit1256572773__root","wrapper":"Edit1256572773__wrapper","overlay":"Edit1256572773__overlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -7,6 +7,7 @@ import {
 import type { TimeInputImperativeActions } from '@wix/design-system';
 import type { CellEditProps } from '../../types';
 import { useCloseOnAncestorScroll } from '../../../../hooks/useCloseOnAncestorScroll';
+import { useCommitOnEnter } from '../useCommitOnEnter';
 import { CellViewLayout } from '../CellViewLayout';
 import { classes } from './Edit.st.css.js';
 
@@ -37,10 +38,13 @@ export const TimeEdit: React.FC<CellEditProps<Time | null>> = ({
     [onCancel],
   );
 
+  const handleKeyDown = useCommitOnEnter(onCommit);
+
   return (
     <div
       ref={wrapperRef}
       onKeyDownCapture={handleKeyDownCapture}
+      onKeyDown={handleKeyDown}
       className={classes.wrapper}
     >
       <CellTimeInput

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1496408529";
+var _namespace_ = "Edit2131823535";
 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":"Edit1496408529__root","urlInput":"Edit1496408529__urlInput"};
+export var classes = {"root":"Edit2131823535__root","urlInput":"Edit2131823535__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View102358572";
+var _namespace_ = "View3239557871";
 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":"View102358572__root","textView":"View102358572__textView","urlText":"View102358572__urlText","suffix":"View102358572__suffix"};
+export var classes = {"root":"View3239557871__root","textView":"View3239557871__textView","urlText":"View3239557871__urlText","suffix":"View3239557871__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/useCommitOnEnter.ts

@@ -0,0 +1,19 @@
+import type React from 'react';
+import { useCallback } from 'react';
+
+/**
+ * Bubble-phase keydown handler that commits on Enter. Put it on a wrapper
+ * around an input with a dropdown: by the time it runs, the input has already
+ * applied a highlighted option (which commits on its own), so this commits
+ * the unchanged value. The input's own `onKeyDown` prop runs too early.
+ */
+export function useCommitOnEnter(onCommit: () => void) {
+  return useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        onCommit();
+      }
+    },
+    [onCommit],
+  );
+}

package/src/components/EditableTable/cellTypes/useMultilineEditKeyboard.ts

@@ -0,0 +1,39 @@
+import type React from 'react';
+import { useCallback, useRef } from 'react';
+
+/**
+ * Keys for a multi-line cell editor: Enter commits, Shift+Enter adds a new
+ * line, Escape cancels. Blur commits unless one of those already ended the edit.
+ */
+export function useMultilineEditKeyboard({
+  onCommit,
+  onCancel,
+}: {
+  onCommit: () => void;
+  onCancel: () => void;
+}) {
+  const endedRef = useRef(false);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        endedRef.current = true;
+        onCancel();
+      } else if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        endedRef.current = true;
+        onCommit();
+      }
+    },
+    [onCancel, onCommit],
+  );
+
+  const handleBlur = useCallback(() => {
+    if (!endedRef.current) {
+      onCommit();
+    }
+  }, [onCommit]);
+
+  return { handleKeyDown, handleBlur };
+}