@wix/patterns 1.499.0 → 1.501.0

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow2306091191";
+var _namespace_ = "NestedTableRow1011440783";
 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":"NestedTableRow2306091191__root","firstLevel":"NestedTableRow2306091191__firstLevel","placeholder":"NestedTableRow2306091191__placeholder","parentHovered":"NestedTableRow2306091191__parentHovered"};
+export var classes = {"root":"NestedTableRow1011440783__root","firstLevel":"NestedTableRow1011440783__firstLevel","placeholder":"NestedTableRow1011440783__placeholder","parentHovered":"NestedTableRow1011440783__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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_ = "NestedTableDragAndDropRow1030495842";
 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":"NestedTableDragAndDropRow1030495842__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_ = "PickerContent305466904";
 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":"PickerContent305466904__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_ = "PickerContentAdditionalStep3720775536";
 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":"PickerContentAdditionalStep3720775536__root","titles":"PickerContentAdditionalStep3720775536__titles","suffix":"PickerContentAdditionalStep3720775536__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_ = "PickerTableListItem1736286418";
 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":"PickerTableListItem1736286418__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_ = "ScrollableContent4000791525";
 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":"ScrollableContent4000791525__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_ = "SetupWidget4083367205";
 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":"SetupWidget4083367205__root","row":"SetupWidget4083367205__row","completedCta":"SetupWidget4083367205__completedCta","secondaryCta":"SetupWidget4083367205__secondaryCta","card":"SetupWidget4083367205__card","stepIcon":"SetupWidget4083367205__stepIcon","chevron":"SetupWidget4083367205__chevron","chevronDisabled":"SetupWidget4083367205__chevronDisabled","inProgressLabel":"SetupWidget4083367205__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_ = "SkeletonCard2190057729";
 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":"SkeletonCard2190057729__root","headerLoading":"SkeletonCard2190057729__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_ = "SlidingModal3513487335";
 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":"SlidingModal3513487335__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_ = "AddFieldColumnHeader1619378697";
 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":"AddFieldColumnHeader1619378697__root","anchorLayer":"AddFieldColumnHeader1619378697__anchorLayer","popover":"AddFieldColumnHeader1619378697__popover","title":"AddFieldColumnHeader1619378697__title","hoverBridge":"AddFieldColumnHeader1619378697__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_ = "NumberCell2464487272";
 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":"NumberCell2464487272__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_ = "TabsFilter3229818130";
 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":"TabsFilter3229818130__root","titleBox":"TabsFilter3229818130__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_ = "ManageTagsModal2113851165";
 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":"ManageTagsModal2113851165__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_ = "ToolbarItem4238360001";
 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":"ToolbarItem4238360001__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_ = "ToolbarItemBox2615176155";
 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":"ToolbarItemBox2615176155__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_ = "common884522851";
 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":"common884522851__root","column":"common884522851__column","fullHeight":"common884522851__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_ = "CollectionPageHeader3744273379";
 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":"CollectionPageHeader3744273379__root","mobileMoreActions":"CollectionPageHeader3744273379__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_ = "MobilePrimaryActionBar1460350508";
 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":"MobilePrimaryActionBar1460350508__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_ = "TitleBadges4092769640";
 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":"TitleBadges4092769640__root","tooltip":"TitleBadges4092769640__tooltip","tooltipTrigger":"TitleBadges4092769640__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() {