@wix/patterns 1.481.0 → 1.482.0

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "patterns@1.481.0";
+export declare const version = "patterns@1.482.0";
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns",
-  "version": "1.481.0",
+  "version": "1.482.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -227,11 +227,11 @@
   ],
   "dependencies": {
     "@wix/agent-platform-bm-sdk": "^1.0.0",
-    "@wix/bex-core": "2.387.0",
-    "@wix/bex-utils": "2.174.0",
+    "@wix/bex-core": "2.388.0",
+    "@wix/bex-utils": "2.175.0",
     "@wix/essentials": "^0.1.26",
-    "@wix/patterns-fields": "1.109.0",
-    "@wix/patterns-fields-utils": "1.90.0",
+    "@wix/patterns-fields": "1.110.0",
+    "@wix/patterns-fields-utils": "1.91.0",
     "@wix/sdk": "^1.15.22",
     "@wix/wix-style-react-incubator": "^3.23.1",
     "@wix/wix-ui-test-utils": "^1.1.9",
@@ -294,7 +294,7 @@
     "@wix/awaiter-utils": "^1.0.76",
     "@wix/babel-cli": "^1.11.0",
     "@wix/business-manager-api": "^1.470.0",
-    "@wix/cairo-integration-utils": "1.149.0",
+    "@wix/cairo-integration-utils": "1.150.0",
     "@wix/ci-build-info": "^1.0.0",
     "@wix/crm": "^1.0.93",
     "@wix/dashboard": "^1.3.39",
@@ -456,5 +456,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "99e141bf38a29f496fa54224597ab7f4c62a94f729724d19f8223eb9"
+  "falconPackageHash": "a2de119fc16f0f5c3ca397c952a9ff783dffd8d0a9db5d068bf0aaf1"
 }

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

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

package/src/components/CmsFieldManagement/CmsFieldForm.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldForm1755542765";
+var _namespace_ = "CmsFieldForm1502115273";
 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":"CmsFieldForm1755542765__root","fullBleedDivider":"CmsFieldForm1755542765__fullBleedDivider"};
+export var classes = {"root":"CmsFieldForm1502115273__root","fullBleedDivider":"CmsFieldForm1502115273__fullBleedDivider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/CmsFieldModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldModal36790164";
+var _namespace_ = "CmsFieldModal112067056";
 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":"CmsFieldModal36790164__root","modal":"CmsFieldModal36790164__modal"};
+export var classes = {"root":"CmsFieldModal112067056__root","modal":"CmsFieldModal112067056__modal"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/CmsFieldModalBiReporter.ts

@@ -0,0 +1,65 @@
+import type { CustomFieldOrigin, ReportBI } from '@wix/bex-core';
+import { withoutDefaults } from '@wix/bex-core';
+import {
+  cairoChangesBeforeApply,
+  cairoDataExAddCustomField,
+  cairoDataExCustomFieldEndProcess,
+} from '@wix/bex-core/bi';
+import type { CmsFormState } from './CmsFormState';
+
+export type CmsFieldModalEndType = 'Add Field' | 'Edit Field' | 'Cancel';
+
+/**
+ * Reporting for the schema-source field modal. It mirrors what
+ * `CustomFieldModalBiReporter` sends for the Data Extension modal, so both
+ * field-creation paths land on the same events.
+ */
+export class CmsFieldModalBiReporter {
+  private readonly reportBi: ReportBI;
+
+  constructor(reportBi: ReportBI) {
+    this.reportBi = reportBi;
+  }
+
+  addFieldStarted(origin: CustomFieldOrigin) {
+    this.reportBi(withoutDefaults(cairoDataExAddCustomField)({ origin }));
+  }
+
+  fieldChanged(params: {
+    mode: 'new' | 'edit';
+    fieldName: string;
+    fieldValue?: string;
+  }) {
+    this.reportBi(
+      withoutDefaults(cairoChangesBeforeApply)({
+        feature:
+          params.mode === 'new' ? 'Add Custom Field' : 'Edit Custom Field',
+        fieldName: params.fieldName,
+        fieldValue: params.fieldValue,
+        isClearButton: false,
+      }),
+    );
+  }
+
+  endProcess(params: {
+    endType: CmsFieldModalEndType;
+    form: CmsFormState;
+    origin: CustomFieldOrigin;
+    numFields: number;
+  }) {
+    const { properties } = params.form;
+    this.reportBi(
+      withoutDefaults(cairoDataExCustomFieldEndProcess)({
+        actionName: params.form.mode === 'edit' ? 'Edit' : 'Add',
+        endType: params.endType,
+        fieldName: properties.name,
+        fieldType: properties.type,
+        numAdded: params.numFields,
+        origin: params.origin,
+        // Schema-source fields are ordinary collection fields, not the
+        // Data Extension custom fields the event was first built for.
+        isCustomField: false,
+      }),
+    );
+  }
+}

package/src/components/CmsFieldManagement/CmsFieldModalState.ts

@@ -1,6 +1,11 @@
 import { action, makeObservable, observable } from 'mobx';
-import { ConditionalModalState, type ToastConfig } from '@wix/bex-core';
+import {
+  ConditionalModalState,
+  type CustomFieldOrigin,
+  type ToastConfig,
+} from '@wix/bex-core';
 import { Field, SchemaConfig } from '../../types/SchemaConfig';
+import type { CmsFieldModalBiReporter } from './CmsFieldModalBiReporter';
 import { CmsFormState } from './CmsFormState';
 import { toFieldSpec } from './toFieldSpec';
 import { getFieldTypeValidationRulesList } from './fieldValidationRulesMap';
@@ -8,15 +13,21 @@ import { getFieldTypeValidationRulesList } from './fieldValidationRulesMap';
 export class CmsFieldModalState {
   private readonly getSchema: () => SchemaConfig;
   private readonly resolveError: (e: unknown) => ToastConfig;
+  private readonly bi?: CmsFieldModalBiReporter;
   readonly modal: ConditionalModalState<null>;
   formState: CmsFormState | null = null;
+  /** Distinguishes closing after a save from closing by cancelling. */
+  private didSubmit = false;
+  private origin: CustomFieldOrigin = 'external';
 
   constructor(
     getSchema: () => SchemaConfig,
     resolveError: (e: unknown) => ToastConfig,
+    bi?: CmsFieldModalBiReporter,
   ) {
     this.getSchema = getSchema;
     this.resolveError = resolveError;
+    this.bi = bi;
     this.modal = new ConditionalModalState({
       onConfirm: () => this.submit(),
     });
@@ -28,12 +39,20 @@ export class CmsFieldModalState {
     });
   }
 
-  open(fieldId?: string) {
+  open(fieldId?: string, origin: CustomFieldOrigin = 'external') {
     const schemaConfig = this.getSchema();
+    this.didSubmit = false;
+    this.origin = origin;
 
     this.formState = new CmsFormState({
       schemaConfig,
       getValidationRules: getFieldTypeValidationRulesList,
+      onFieldTouched: (field, value) =>
+        this.bi?.fieldChanged({
+          mode: fieldId ? 'edit' : 'new',
+          fieldName: field,
+          fieldValue: value,
+        }),
     });
 
     if (fieldId) {
@@ -47,10 +66,22 @@ export class CmsFieldModalState {
       this.formState.loadField(field);
     }
 
+    if (!fieldId) {
+      this.bi?.addFieldStarted(origin);
+    }
+
     this.modal.open(null);
   }
 
   reset() {
+    if (this.formState && !this.didSubmit) {
+      this.bi?.endProcess({
+        endType: 'Cancel',
+        form: this.formState,
+        origin: this.origin,
+        numFields: Object.keys(this.getSchema().fields).length,
+      });
+    }
     this.formState = null;
   }
 
@@ -83,6 +114,7 @@ export class CmsFieldModalState {
           formState.editingFieldId,
           fieldSpec,
         );
+        this._reportSaved(formState, schemaConfig);
         schemaConfig.refresh?.();
         return;
       }
@@ -91,10 +123,21 @@ export class CmsFieldModalState {
         throw new Error('SchemaConfig.fieldActions.addField is not configured');
       }
       await schemaConfig.fieldActions.addField(fieldSpec as Field);
+      this._reportSaved(formState, schemaConfig);
       schemaConfig.refresh?.();
     } catch (e) {
       formState.setErrorToastConfig(this.resolveError(e));
       throw e;
     }
   }
+
+  private _reportSaved(formState: CmsFormState, schemaConfig: SchemaConfig) {
+    this.didSubmit = true;
+    this.bi?.endProcess({
+      endType: formState.mode === 'edit' ? 'Edit Field' : 'Add Field',
+      form: formState,
+      origin: this.origin,
+      numFields: Object.keys(schemaConfig.fields).length,
+    });
+  }
 }

package/src/components/CmsFieldManagement/CmsFormState.ts

@@ -23,6 +23,8 @@ export interface CmsFormStateParams {
   getValidationRules: (t: SelectableFieldTypes) => ValidationRule[];
   mode?: 'new' | 'edit';
   editingFieldId?: string;
+  /** Called the first time a field is left, for reporting what the user filled in. */
+  onFieldTouched?: (field: keyof FieldProperties, value?: string) => void;
 }
 
 function defaultProperties(): FieldPropertiesState {
@@ -40,6 +42,7 @@ const NAME_MAX_LENGTH = 50;
 export class CmsFormState {
   readonly schemaConfig?: SchemaConfig;
   readonly getValidationRules: (t: SelectableFieldTypes) => ValidationRule[];
+  private readonly onFieldTouched?: CmsFormStateParams['onFieldTouched'];
 
   properties: FieldPropertiesState = defaultProperties();
   fieldRules: FieldRules = { validationRules: {} };
@@ -54,6 +57,7 @@ export class CmsFormState {
     this.getValidationRules = params.getValidationRules;
     this.mode = params.mode ?? 'new';
     this.editingFieldId = params.editingFieldId;
+    this.onFieldTouched = params.onFieldTouched;
 
     makeObservable(this, {
       properties: observable.ref,
@@ -165,7 +169,12 @@ export class CmsFormState {
   }
 
   blurField(field: keyof FieldProperties) {
+    const wasUntouched = !this.touchedFields.has(field);
     this.touchedFields.add(field);
+    if (wasUntouched) {
+      const value = this.properties[field];
+      this.onFieldTouched?.(field, value == null ? undefined : String(value));
+    }
   }
 
   enableShowValidationError() {

package/src/components/CmsFieldManagement/Sections/ValidationAndDefaultsSection.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "ValidationAndDefaultsSection1913926124";
+var _namespace_ = "ValidationAndDefaultsSection3597092500";
 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":"ValidationAndDefaultsSection1913926124__root","accordionWrapper":"ValidationAndDefaultsSection1913926124__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection3597092500__root","accordionWrapper":"ValidationAndDefaultsSection3597092500__accordionWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse3605536152";
+var _namespace_ = "Collapse957113978";
 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":"Collapse3605536152__root","exit":"Collapse3605536152__exit"};
+export var classes = {"root":"Collapse957113978__root","exit":"Collapse957113978__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionPageNew/CollectionPage.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionSectionHeader3804335527";
+var _namespace_ = "CollectionSectionHeader1109188456";
 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":"CollectionSectionHeader3804335527__root","summaryIcon":"CollectionSectionHeader3804335527__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader1109188456__root","summaryIcon":"CollectionSectionHeader1109188456__summaryIcon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/CollectionTable/CollectionTableWSRTable.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar1355295430";
+var _namespace_ = "CollectionToolbar3439806607";
 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":"CollectionToolbar1355295430__root","right":"CollectionToolbar1355295430__right","left":"CollectionToolbar1355295430__left","fullWidth":"CollectionToolbar1355295430__fullWidth"};
+export var classes = {"root":"CollectionToolbar3439806607__root","right":"CollectionToolbar3439806607__right","left":"CollectionToolbar3439806607__left","fullWidth":"CollectionToolbar3439806607__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter1356450189";
+var _namespace_ = "SearchOrCustomFilter746399388";
 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":"SearchOrCustomFilter1356450189__root","search":"SearchOrCustomFilter1356450189__search","searchMobile":"SearchOrCustomFilter1356450189__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter746399388__root","search":"SearchOrCustomFilter746399388__search","searchMobile":"SearchOrCustomFilter746399388__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

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

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

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

package/src/components/CustomColumnsPanel/CustomColumnsPanel.tsx

@@ -138,7 +138,7 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
             >
               <AddItem
                 dataHook="custom-columns-schema-add-field"
-                onClick={schemaCtx.addField}
+                onClick={() => schemaCtx.addField?.('Custom columns panel')}
               >
                 {t('cairo.customFields.addCustomField.CTA')}
               </AddItem>

package/src/components/CustomFieldModal/CustomFieldFormPiiFields.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CustomFieldFormPiiFields1162113718";
+var _namespace_ = "CustomFieldFormPiiFields1228557018";
 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":"CustomFieldFormPiiFields1162113718__root","tooltipText":"CustomFieldFormPiiFields1162113718__tooltipText"};
+export var classes = {"root":"CustomFieldFormPiiFields1228557018__root","tooltipText":"CustomFieldFormPiiFields1228557018__tooltipText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell1177568343";
+var _namespace_ = "EditableCell997750120";
 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":"EditableCell1177568343__root","errorMessage":"EditableCell1177568343__errorMessage"};
+export var classes = {"root":"EditableCell997750120__root","errorMessage":"EditableCell997750120__errorMessage"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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(),