@wix/patterns 1.480.0 → 1.482.0

package/dist/types/utils/fieldTypePrefixIcons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fieldTypePrefixIcons.d.ts","sourceRoot":"","sources":["../../../src/utils/fieldTypePrefixIcons.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AA4ClE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvD;;;;GAIG;AACH,MAAM,MAAM,SAAS,GACjB,YAAY,GACZ,WAAW,GACX,QAAQ,GACR,SAAS,GACT,MAAM,GACN,WAAW,GACX,UAAU,GACV,MAAM,GACN,KAAK,GACL,OAAO,GACP,OAAO,GACP,eAAe,GACf,OAAO,GACP,UAAU,GACV,gBAAgB,GAChB,WAAW,GACX,cAAc,GACd,WAAW,GACX,iBAAiB,GACjB,QAAQ,GACR,OAAO,GACP,SAAS,GACT,OAAO,GACP,SAAS,GACT,SAAS,GACT,UAAU,GACV,UAAU,GACV,OAAO,GACP,cAAc,CAAC;AAEnB;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAEpD;AAuDD,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,IAAc,EACd,KAAK,GACN,EAAE;IACD,SAAS,CAAC,EAAE,SAAS,GAAG,iBAAiB,CAAC;IAC1C,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B;wCACoC;IACpC,KAAK,CAAC,EAAE;QAAE,KAAK,EAAE,aAAa,CAAC;QAAC,MAAM,EAAE,aAAa,CAAA;KAAE,CAAC;CACzD,GAAG,SAAS,CAoCZ"}
+{"version":3,"file":"fieldTypePrefixIcons.d.ts","sourceRoot":"","sources":["../../../src/utils/fieldTypePrefixIcons.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAiDlE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvD;;;;GAIG;AACH,MAAM,MAAM,SAAS,GACjB,YAAY,GACZ,WAAW,GACX,QAAQ,GACR,SAAS,GACT,MAAM,GACN,WAAW,GACX,UAAU,GACV,MAAM,GACN,KAAK,GACL,OAAO,GACP,OAAO,GACP,eAAe,GACf,OAAO,GACP,UAAU,GACV,gBAAgB,GAChB,WAAW,GACX,cAAc,GACd,WAAW,GACX,iBAAiB,GACjB,QAAQ,GACR,OAAO,GACP,SAAS,GACT,OAAO,GACP,SAAS,GACT,SAAS,GACT,UAAU,GACV,UAAU,GACV,OAAO,GACP,cAAc,CAAC;AAEnB;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAEpD;AAoED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,IAAc,EACd,KAAK,GACN,EAAE;IACD,SAAS,CAAC,EAAE,SAAS,GAAG,iBAAiB,CAAC;IAC1C,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B;wCACoC;IACpC,KAAK,CAAC,EAAE;QAAE,KAAK,EAAE,aAAa,CAAC;QAAC,MAAM,EAAE,aAAa,CAAA;KAAE,CAAC;CACzD,GAAG,SAAS,CAoCZ"}

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "patterns@1.480.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.480.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.386.0",
-    "@wix/bex-utils": "2.173.0",
+    "@wix/bex-core": "2.388.0",
+    "@wix/bex-utils": "2.175.0",
     "@wix/essentials": "^0.1.26",
-    "@wix/patterns-fields": "1.108.0",
-    "@wix/patterns-fields-utils": "1.89.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,11 +294,11 @@
     "@wix/awaiter-utils": "^1.0.76",
     "@wix/babel-cli": "^1.11.0",
     "@wix/business-manager-api": "^1.470.0",
-    "@wix/cairo-integration-utils": "1.148.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",
-    "@wix/design-system": "^1.319.0",
+    "@wix/design-system": "^1.330.2",
     "@wix/eslint-config-yoshi": "^6.74.0",
     "@wix/fe-essentials-standalone": "^1.374.0",
     "@wix/jest-yoshi-preset-base": "^6.74.0",
@@ -456,5 +456,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "c9f0d3377500adaea1d0e246072247550c732793a9bbc21655cf9df0"
+  "falconPackageHash": "a2de119fc16f0f5c3ca397c952a9ff783dffd8d0a9db5d068bf0aaf1"
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CardContainer2793841912";
+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":"CardContainer2793841912__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_ = "CmsFieldForm3497504880";
+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":"CmsFieldForm3497504880__root","fullBleedDivider":"CmsFieldForm3497504880__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_ = "CmsFieldModal2025714149";
+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":"CmsFieldModal2025714149__root","modal":"CmsFieldModal2025714149__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_ = "ValidationAndDefaultsSection217451980";
+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":"ValidationAndDefaultsSection217451980__root","accordionWrapper":"ValidationAndDefaultsSection217451980__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_ = "Collapse3394637096";
+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":"Collapse3394637096__root","exit":"Collapse3394637096__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_ = "CollectionPage2268116131";
+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":"CollectionPage2268116131__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_ = "CollectionSectionHeader2061756173";
+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":"CollectionSectionHeader2061756173__root","summaryIcon":"CollectionSectionHeader2061756173__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_ = "CollectionTable2233426279";
+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":"CollectionTable2233426279__root"};
+export var classes = {"root":"CollectionTable762982062__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -384,9 +384,7 @@ export const CollectionTableUniDriver = (base: UniDriver, body: UniDriver) => {
       base.$('thead').$$(`[data-sticky="true"]`).count(),
 
     isHorizontalScroll: async () =>
-      Array.from<string>(await tableContentBase()._prop('classList')).some(
-        (c) => c.includes('tableBodyScrollContent'),
-      ),
+      (await base.attr('data-horizontal-scroll')) === 'true',
 
     isResizable: async () =>
       (await base.$$('[data-hook="table-resize-handle"]').count()) > 0,

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

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

package/src/components/CollectionTable/CollectionTableWSRTable.tsx

@@ -233,6 +233,7 @@ function _CollectionTableWSRTable<U, T, F extends FiltersMap = FiltersMap>(
     <div
       data-hook="collection-table"
       data-wix-patterns={cairoVersion}
+      data-horizontal-scroll={!!horizontalScroll}
       className={wsrTableSt(
         wsrTableClasses.root,
         { resizable: !!resizable },
@@ -267,6 +268,7 @@ function _CollectionTableWSRTable<U, T, F extends FiltersMap = FiltersMap>(
           stickyColumns,
           showSelection,
           stickySelectionColumn,
+          hasRowStatusColumn: props.rowStatus != null,
         })}
         showSelection={showSelection}
         selectedIds={bulk.selectedIds}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar706146862";
+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":"CollectionToolbar706146862__root","right":"CollectionToolbar706146862__right","left":"CollectionToolbar706146862__left","fullWidth":"CollectionToolbar706146862__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_ = "SearchOrCustomFilter1402730312";
+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":"SearchOrCustomFilter1402730312__root","search":"SearchOrCustomFilter1402730312__search","searchMobile":"SearchOrCustomFilter1402730312__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/CollectionToolbarFilters/CollectionToolbarFiltersState.ts

@@ -46,20 +46,33 @@ export class CollectionToolbarFiltersState<T, F extends FiltersMap> {
 
   onFiltersButtonClick = action(() => {
     const actionStartTime = performance.now();
-    const { reportBi } = this.toolbar;
-
     const isOpened = this.toolbar.panels.toggleSidePanel('filters');
+    this._reportPanelUsed(isOpened, 'Filter Button', actionStartTime);
+  });
+
+  /** Opens the panel from a column header's Filter action. */
+  openFromColumnHeader = action(() => {
+    const actionStartTime = performance.now();
+    this.toolbar.panels.openSidePanel('filters');
+    this._reportPanelUsed(true, 'Column Header', actionStartTime);
+  });
+
+  private _reportPanelUsed(
+    isOpened: boolean,
+    origin: 'Filter Button' | 'Column Header',
+    actionStartTime: number,
+  ) {
     // to be called after the panel is opened/closed and call stack is cleared
     window.setTimeout(() => {
-      reportBi(
+      this.toolbar.reportBi(
         withoutDefaults(cairoFiltersPanelUsed)({
           ...this.toolbar._commonDynamicBiParams(),
           isOpened,
-          origin: 'Filter Button',
+          origin,
           feature: 'Filter',
           timeFromAction: Math.round(performance.now() - actionStartTime),
         }),
       );
     });
-  });
+  }
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AutoCompleteReadonly2901247477";
+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":"AutoCompleteReadonly2901247477__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_ = "ViewsDropdown3583333627";
+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":"ViewsDropdown3583333627__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_ = "CustomFieldFormPiiFields3391945470";
+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":"CustomFieldFormPiiFields3391945470__root","tooltipText":"CustomFieldFormPiiFields3391945470__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_ = "DragHandle206787588";
+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":"DragHandle206787588__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_ = "EditableCell3567460448";
+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":"EditableCell3567460448__root","errorMessage":"EditableCell3567460448__errorMessage"};
+export var classes = {"root":"EditableCell997750120__root","errorMessage":"EditableCell997750120__errorMessage"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};