@wix/patterns 1.499.0 → 1.500.0

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

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

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

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

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep2373265152";
+var _namespace_ = "PickerContentAdditionalStep550974158";
 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":"PickerContentAdditionalStep2373265152__root","titles":"PickerContentAdditionalStep2373265152__titles","suffix":"PickerContentAdditionalStep2373265152__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep550974158__root","titles":"PickerContentAdditionalStep550974158__titles","suffix":"PickerContentAdditionalStep550974158__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/PrimaryActions/PrimaryActions.tsx

@@ -64,7 +64,7 @@ export function PrimaryActions({ subItems, ...props }: ActionSubitem) {
             cairoPageCtaClicked({
               location: 'Collection Page Header',
               pageType: 'Collection',
-              ctaName: props.biName ?? '',
+              ctaName: props.biName || 'Create New',
               ctaType: 'primary page button',
               additionalInfo: props.biAdditionalInfo,
             }),

package/src/components/SchemaSource/ReferenceFieldCell.tsx

@@ -2,6 +2,7 @@ import React, { Suspense } from 'react';
 import { observer } from 'mobx-react-lite';
 import type { Field } from '@wix/bex-core';
 import type { SchemaState } from './SchemaState';
+import { getImageFieldId } from '../../utils/referenceImage';
 
 // The reference views live in @wix/patterns-fields, which statically pulls the
 // rich-text editor and media SDKs — loaded lazily here for the same reason
@@ -50,9 +51,7 @@ function _ReferenceFieldCell({
   }
 
   const { displayField, fields } = refSchema;
-  const imageField = Object.entries(fields ?? {}).find(
-    ([, f]) => f?.type === 'IMAGE',
-  )?.[0];
+  const imageField = getImageFieldId(fields);
 
   const labelOf = (item: unknown) => {
     // A value that was never expanded (a bare id) has no label to show.
@@ -62,14 +61,12 @@ function _ReferenceFieldCell({
     const record = item as Record<string, unknown>;
     return {
       name: String(record[displayField] ?? ''),
-      image: imageField
-        ? (record[imageField] as string | undefined)
-        : undefined,
+      image: imageField ? record[imageField] : undefined,
     };
   };
 
   if (field.type === 'MULTI_REFERENCE') {
-    const items: { id: string; name: string; image?: string }[] = [];
+    const items: { id: string; name: string; image?: unknown }[] = [];
     (Array.isArray(value) ? value : []).forEach((item, i) => {
       const label = labelOf(item);
       if (label) {
@@ -89,7 +86,7 @@ function _ReferenceFieldCell({
   return label ? (
     <CellReferenceView
       name={label.name}
-      imageUrl={label.image}
+      image={label.image}
       dataHook="reference-view"
     />
   ) : null;

package/src/components/SchemaSource/referenceCells.ts

@@ -13,6 +13,7 @@ import type {
   ReferenceTypeConfig,
   RefSchema,
 } from '../EditableTable/cellTypes/reference/types';
+import { getImageFieldId, pickImageFields } from '../../utils/referenceImage';
 
 type RefRow = Record<string, unknown>;
 
@@ -21,19 +22,12 @@ const referencedCollectionIdOf = (field: Field): string | undefined =>
     ? field.referenceMetadata?.referencedCollectionId
     : undefined;
 
-const imageFieldOf = (fields: Schema['fields']): string | undefined =>
-  Object.entries(fields ?? {}).find(([, f]) => f?.type === 'IMAGE')?.[0];
-
 const toRefSchema = (schema: Schema, collectionId: string): RefSchema => ({
   id: schema.id ?? collectionId,
   collectionId,
   displayField: schema.displayField,
   idField: schema.idField,
-  fields: Object.fromEntries(
-    Object.entries(schema.fields ?? {})
-      .filter(([, f]) => f?.type === 'IMAGE')
-      .map(([id]) => [id, { type: 'IMAGE' as const }]),
-  ),
+  fields: pickImageFields(schema.fields),
 });
 
 /**
@@ -196,14 +190,14 @@ async function fetchReferenceItems(
   query: OffsetQuery,
 ): Promise<{ items: ReferenceItem[]; total: number }> {
   const { idField, displayField } = schema;
-  const imageField = imageFieldOf(schema.fields);
+  const imageField = getImageFieldId(schema.fields);
   const { items, total } = await sourceFetchData<RefRow>(refSource)(query);
 
   return {
     items: items.map((item) => ({
       id: String(item[idField] ?? ''),
       name: String(item[displayField] ?? ''),
-      image: imageField ? (item[imageField] as string | undefined) : undefined,
+      image: imageField ? item[imageField] : undefined,
     })),
     total: total ?? items.length,
   };

package/src/components/SchemaSource/schemaFieldActions.ts

@@ -141,7 +141,18 @@ export const createSchemaFieldActionsMenu =
         translate: t,
         tooltipContent: t('cairo.custom-columns.more-actions.tooltip'),
         bi: {
-          reportBi: s.sourceState.container.reportBi,
+          reportBi: (event) => {
+            const table = s.sourceState.source.schemaParams();
+            const withTable = {
+              ...event,
+              params: { ...event.params, ...table },
+            };
+            if (s.toolbar) {
+              s.toolbar.reportBi(withTable);
+              return;
+            }
+            s.sourceState.container.reportBi(withTable);
+          },
           location: args.location,
           listSize: s.sourceState.fields.length,
         },

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget3249360778";
+var _namespace_ = "SetupWidget1614172812";
 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":"SetupWidget3249360778__root","row":"SetupWidget3249360778__row","completedCta":"SetupWidget3249360778__completedCta","secondaryCta":"SetupWidget3249360778__secondaryCta","card":"SetupWidget3249360778__card","stepIcon":"SetupWidget3249360778__stepIcon","chevron":"SetupWidget3249360778__chevron","chevronDisabled":"SetupWidget3249360778__chevronDisabled","inProgressLabel":"SetupWidget3249360778__inProgressLabel"};
+export var classes = {"root":"SetupWidget1614172812__root","row":"SetupWidget1614172812__row","completedCta":"SetupWidget1614172812__completedCta","secondaryCta":"SetupWidget1614172812__secondaryCta","card":"SetupWidget1614172812__card","stepIcon":"SetupWidget1614172812__stepIcon","chevron":"SetupWidget1614172812__chevron","chevronDisabled":"SetupWidget1614172812__chevronDisabled","inProgressLabel":"SetupWidget1614172812__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard1061967962";
+var _namespace_ = "SkeletonCard982369363";
 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":"SkeletonCard1061967962__root","headerLoading":"SkeletonCard1061967962__headerLoading"};
+export var classes = {"root":"SkeletonCard982369363__root","headerLoading":"SkeletonCard982369363__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/Table/AddFieldColumnHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AddFieldColumnHeader1942466341";
+var _namespace_ = "AddFieldColumnHeader2817907323";
 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":"AddFieldColumnHeader1942466341__root","anchorLayer":"AddFieldColumnHeader1942466341__anchorLayer","popover":"AddFieldColumnHeader1942466341__popover","title":"AddFieldColumnHeader1942466341__title","hoverBridge":"AddFieldColumnHeader1942466341__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader2817907323__root","anchorLayer":"AddFieldColumnHeader2817907323__anchorLayer","popover":"AddFieldColumnHeader2817907323__popover","title":"AddFieldColumnHeader2817907323__title","hoverBridge":"AddFieldColumnHeader2817907323__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Table/NumberCell.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter1130701286";
+var _namespace_ = "TabsFilter114130271";
 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":"TabsFilter1130701286__root","titleBox":"TabsFilter1130701286__titleBox"};
+export var classes = {"root":"TabsFilter114130271__root","titleBox":"TabsFilter114130271__titleBox"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

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

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common1747287945";
+var _namespace_ = "common3781652268";
 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":"common1747287945__root","column":"common1747287945__column","fullHeight":"common1747287945__fullHeight"};
+export var classes = {"root":"common3781652268__root","column":"common3781652268__column","fullHeight":"common3781652268__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/exports/schema.ts

@@ -53,6 +53,8 @@ export type {
   FieldSettingsProps,
   FieldSettingsSection,
   FieldModalCollectionOption,
+  FieldModalCollectionGroup,
+  FieldModalCollectionEntry,
   FieldModalCollectionOptionsLoader,
   FieldModalCollectionInput,
   FieldModalCollectionAction,

package/src/index.ts

@@ -179,6 +179,8 @@ export {
   type FieldActionsConfig,
   type FieldModalConfig,
   type FieldModalCollectionOption,
+  type FieldModalCollectionGroup,
+  type FieldModalCollectionEntry,
   type FieldModalCollectionOptionsLoader,
   type FieldModalCollectionInput,
   type FieldModalCollectionAction,

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader1447808307";
+var _namespace_ = "CollectionPageHeader2199499396";
 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":"CollectionPageHeader1447808307__root","mobileMoreActions":"CollectionPageHeader1447808307__mobileMoreActions"};
+export var classes = {"root":"CollectionPageHeader2199499396__root","mobileMoreActions":"CollectionPageHeader2199499396__mobileMoreActions"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/CollectionPage/MobilePrimaryActionBar.st.css.ts

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

package/src/state/CollectionPage/TitleBadges.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TitleBadges239452423";
+var _namespace_ = "TitleBadges3144533068";
 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":"TitleBadges239452423__root","tooltip":"TitleBadges239452423__tooltip","tooltipTrigger":"TitleBadges239452423__tooltipTrigger"};
+export var classes = {"root":"TitleBadges3144533068__root","tooltip":"TitleBadges3144533068__tooltip","tooltipTrigger":"TitleBadges3144533068__tooltipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/CustomColumnsEntityPageState.ts

@@ -1,4 +1,5 @@
-import { TransitionState } from '@wix/bex-core';
+import { TransitionState, withoutDefaults } from '@wix/bex-core';
+import { cairoCustomizeColumnsInSidePanel } from '@wix/bex-core/bi';
 import { reaction } from 'mobx';
 import { resolveFieldPresentation } from '../utils/resolveFieldPresentation';
 import { Column } from '../model';
@@ -70,6 +71,7 @@ export class CustomColumnsEntityPageState extends CustomColumnsPanelStateBase {
   readonly _isFieldsEditable: boolean;
   readonly _manageFieldsSource?: ManageFieldsSource;
   readonly _dragAndDrop?: CustomColumnsDragAndDropState<unknown, any>;
+  private _reorderReported = false;
 
   constructor(params: CustomColumnsEntityPageStateParams) {
     super({
@@ -178,10 +180,33 @@ export class CustomColumnsEntityPageState extends CustomColumnsPanelStateBase {
     return this._dragAndDrop;
   }
 
-  customizeColumnsInSidePanelBi(_params: {
+  customizeColumnsInSidePanelBi({
+    actionName,
+    key,
+  }: {
     actionName: CustomColumnsActionName;
+    key?: string;
   }) {
-    // BI reporting — to be wired
+    if (actionName !== 'visibility') {
+      if (this._reorderReported) {
+        return;
+      }
+      this._reorderReported = true;
+    }
+    const schema =
+      typeof this._schema === 'function' ? this._schema() : this._schema;
+    const event = withoutDefaults(cairoCustomizeColumnsInSidePanel)({
+      actionName,
+    });
+    this.container.reportBi({
+      ...event,
+      params: {
+        ...event.params,
+        componentType: 'Entity page',
+        ...(schema?.id ? { tableId: schema.id } : {}),
+        ...(key ? { key } : {}),
+      },
+    });
   }
 
   onClose() {

package/src/state/CustomColumnsPanelStateBase.ts

@@ -81,6 +81,7 @@ export abstract class CustomColumnsPanelStateBase<
 
   abstract customizeColumnsInSidePanelBi(params: {
     actionName: CustomColumnsActionName;
+    key?: string;
   }): void;
 
   abstract onClose(): void;

package/src/state/CustomColumnsState.ts

@@ -552,18 +552,27 @@ export class CustomColumnsState<
 
   customizeColumnsInSidePanelBi({
     actionName,
+    key,
   }: {
     actionName: CustomColumnsActionName;
+    key?: string;
   }) {
-    if (this._performedCustomColumnsActions.get(actionName)) {
-      return;
+    if (actionName !== 'visibility') {
+      if (this._performedCustomColumnsActions.get(actionName)) {
+        return;
+      }
+      this._performedCustomColumnsActions.set(actionName, true);
     }
-    this._performedCustomColumnsActions.set(actionName, true);
-    this.table.reportBi(
-      withoutDefaults(cairoCustomizeColumnsInSidePanel)({
-        actionName,
-      }),
-    );
+    const event = withoutDefaults(cairoCustomizeColumnsInSidePanel)({
+      actionName,
+    });
+    this.table.reportBi({
+      ...event,
+      params: {
+        ...event.params,
+        ...(key ? { key } : {}),
+      },
+    });
   }
 
   get showFieldTypeIcons() {

package/src/state/EntityPage/EntityPageState.ts

@@ -339,6 +339,9 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
         this.setSchema(loadedSchema.schema);
       }
       this.bi.appLoaded?.();
+      if (!this._isExistingEntity) {
+        this.bi.reportItemCreationStart();
+      }
     });
 
     return () => {
@@ -412,6 +415,15 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
       ctaName: 'Cancel',
       additionalInfo: this.actionsBarConfig?.cancelCta?.biAdditionalInfo,
     });
+    const creating = !this._isExistingEntity;
+    if (creating || this.isFormDirty) {
+      this.bi.reportItemDismissed({
+        editing: !creating,
+        itemId: creating
+          ? undefined
+          : entityItemId(this.entity, this.schema?.idField),
+      });
+    }
     this.navigateToParent();
   }
 
@@ -595,6 +607,7 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
       bi,
     } = this;
 
+    const creating = !this._isExistingEntity;
     submitTask.run(async () => {
       let savedEntity: T | undefined;
       let submitSuccessful = false;
@@ -641,6 +654,10 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
       if (!submitSuccessful) {
         return;
       }
+      bi.reportItemSaved({
+        creating,
+        itemId: entityItemId(savedEntity ?? this.entity, this.schema?.idField),
+      });
       const transformedItem =
         savedEntity && this.transformEntityToCollectionItem
           ? this.transformEntityToCollectionItem(savedEntity)
@@ -674,3 +691,11 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
     }
   }
 }
+
+function entityItemId(entity: unknown, idField = 'id'): string | undefined {
+  if (entity == null || typeof entity !== 'object' || !(idField in entity)) {
+    return undefined;
+  }
+  const id = (entity as Record<string, unknown>)[idField];
+  return typeof id === 'string' ? id : undefined;
+}