@wix/patterns 1.480.0 → 1.482.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AddFieldColumnHeader3336770253";
+var _namespace_ = "AddFieldColumnHeader2606439270";
 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":"AddFieldColumnHeader3336770253__root","anchorLayer":"AddFieldColumnHeader3336770253__anchorLayer","popover":"AddFieldColumnHeader3336770253__popover","title":"AddFieldColumnHeader3336770253__title","hoverBridge":"AddFieldColumnHeader3336770253__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader2606439270__root","anchorLayer":"AddFieldColumnHeader2606439270__anchorLayer","popover":"AddFieldColumnHeader2606439270__popover","title":"AddFieldColumnHeader2606439270__title","hoverBridge":"AddFieldColumnHeader2606439270__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Table/AddFieldColumnHeader.tsx

@@ -43,7 +43,7 @@ export const AddFieldColumnHeader = observer(
 
       toolbar.customColumnsState?.setPendingInsertPosition(afterColumnId);
       collectionFieldsSource.openFieldModal({
-        origin: 'Table column header',
+        origin: 'Table add field button',
       });
     };
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter797547015";
+var _namespace_ = "TabsFilter15615530";
 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":"TabsFilter797547015__root","titleBox":"TabsFilter797547015__titleBox"};
+export var classes = {"root":"TabsFilter15615530__root","titleBox":"TabsFilter15615530__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_ = "ManageTagsModal393458239";
+var _namespace_ = "ManageTagsModal3023638265";
 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":"ManageTagsModal393458239__root"};
+export var classes = {"root":"ManageTagsModal3023638265__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/TagsWidget/TagsWidgetContent.tsx

@@ -219,6 +219,7 @@ const _TagsWidgetContent = ({
             <div>
               {!!tagsOptions.length && <Divider />}
               <ListItemAction
+                size={isBmHarmonyTheme ? 'small' : undefined}
                 dataHook="manage-tags-cta"
                 onClick={handleManageTagsCtaClick}
                 id={MANAGE_TAGS_OPTION_ID}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem18100771";
+var _namespace_ = "ToolbarItem3775715860";
 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":"ToolbarItem18100771__root"};
+export var classes = {"root":"ToolbarItem3775715860__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_ = "ToolbarItemBox3338974518";
+var _namespace_ = "ToolbarItemBox1255465366";
 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":"ToolbarItemBox3338974518__root"};
+export var classes = {"root":"ToolbarItemBox1255465366__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_ = "common3005467811";
+var _namespace_ = "common3612606240";
 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":"common3005467811__root","column":"common3005467811__column","fullHeight":"common3005467811__fullHeight"};
+export var classes = {"root":"common3612606240__root","column":"common3612606240__column","fullHeight":"common3612606240__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/providers/SchemaContext.ts

@@ -1,12 +1,13 @@
 import { createContext, useContext } from 'react';
+import type { CustomFieldOrigin } from '@wix/bex-core';
 import { FieldActions, SchemaConfig } from '../types/SchemaConfig';
 
 export type { FieldActions, SchemaConfig };
 
 export type SchemaContextValue = {
   schema: SchemaConfig;
-  addField?: () => void;
-  editField?: (fieldId: string) => void;
+  addField?: (origin?: CustomFieldOrigin) => void;
+  editField?: (fieldId: string, origin?: CustomFieldOrigin) => void;
 };
 
 export const SchemaContext = createContext<SchemaContextValue | null>(null);

package/src/providers/SchemaProvider.tsx

@@ -1,9 +1,11 @@
 import React, { ReactNode, useMemo, useRef } from 'react';
+import type { CustomFieldOrigin } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { SchemaConfig } from '../types/SchemaConfig';
 import { SchemaContext, SchemaContextValue } from './SchemaContext';
 import { CmsFieldModalState } from '../components/CmsFieldManagement/CmsFieldModalState';
 import { CmsFieldModal } from '../components/CmsFieldManagement/CmsFieldModal';
+import { CmsFieldModalBiReporter } from '../components/CmsFieldManagement/CmsFieldModalBiReporter';
 
 interface SchemaProviderProps {
   schema: SchemaConfig;
@@ -24,6 +26,7 @@ export const SchemaProvider = ({ schema, children }: SchemaProviderProps) => {
           container.errorHandler?.getResolvedError?.(e) ?? {
             message: e instanceof Error ? e.message : String(e),
           },
+        new CmsFieldModalBiReporter(container.reportBi),
       ),
     [container],
   );
@@ -32,10 +35,12 @@ export const SchemaProvider = ({ schema, children }: SchemaProviderProps) => {
     () => ({
       schema,
       ...(schema.fieldActions?.addField && {
-        addField: () => modalState.open(),
+        addField: (origin?: CustomFieldOrigin) =>
+          modalState.open(undefined, origin),
       }),
       ...(schema.fieldActions?.editField && {
-        editField: (fieldId: string) => modalState.open(fieldId),
+        editField: (fieldId: string, origin?: CustomFieldOrigin) =>
+          modalState.open(fieldId, origin),
       }),
     }),
     [schema, modalState],

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader48469155";
+var _namespace_ = "CollectionPageHeader1858429125";
 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":"CollectionPageHeader48469155__root","mobileMoreActions":"CollectionPageHeader48469155__mobileMoreActions"};
+export var classes = {"root":"CollectionPageHeader1858429125__root","mobileMoreActions":"CollectionPageHeader1858429125__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_ = "MobilePrimaryActionBar232054497";
+var _namespace_ = "MobilePrimaryActionBar613443559";
 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":"MobilePrimaryActionBar232054497__root"};
+export var classes = {"root":"MobilePrimaryActionBar613443559__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_ = "TitleBadges827468852";
+var _namespace_ = "TitleBadges2068857976";
 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":"TitleBadges827468852__root","tooltip":"TitleBadges827468852__tooltip","tooltipTrigger":"TitleBadges827468852__tooltipTrigger"};
+export var classes = {"root":"TitleBadges2068857976__root","tooltip":"TitleBadges2068857976__tooltip","tooltipTrigger":"TitleBadges2068857976__tooltipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/EditableTable/CellValueState.ts

@@ -43,6 +43,7 @@ export class CellValueState<T, F extends FiltersMap> {
       applyBulkRawValues: action,
       applyBulkValues: action,
       flushDrafts: action,
+      flushRow: action,
       dropRowCellState: action,
     });
   }
@@ -478,16 +479,25 @@ export class CellValueState<T, F extends FiltersMap> {
   }
 
   flushDrafts(exceptRowKey?: string) {
+    this._flushRows((rowKey) => rowKey !== exceptRowKey);
+  }
+
+  /** Save one row's drafts now, leaving other rows' drafts buffered. */
+  flushRow(rowKey: string) {
+    this._flushRows((key) => key === rowKey);
+  }
+
+  private _flushRows(includeRow: (rowKey: string) => boolean) {
     const invalidNewRows = new Set<string>();
     for (const rowKey of this._parent.mutation._drafts.keys()) {
-      if (rowKey !== exceptRowKey && !this._validateNewRow(rowKey)) {
+      if (includeRow(rowKey) && !this._validateNewRow(rowKey)) {
         invalidNewRows.add(rowKey);
       }
     }
 
     const rowKeys = new Set<string>();
     for (const entry of this._draftCells.values()) {
-      if (entry.rowKey !== exceptRowKey) {
+      if (includeRow(entry.rowKey)) {
         rowKeys.add(entry.rowKey);
       }
     }

package/src/state/EditableTable/EditableTableState.ts

@@ -27,6 +27,8 @@ import {
   clipboardCellCounts,
   EditableTableStateBIReporter,
   type ClipboardOrigin,
+  type DeleteModalCta,
+  type RowCreationOrigin,
 } from './EditableTableStateBIReporter';
 import type { Cell, CellType, EditableColumn, ValidationResult } from './types';
 import { buildEditableFieldColumns } from '../buildEditableFieldColumns';
@@ -350,8 +352,8 @@ export class EditableTableState<T, F extends FiltersMap>
     };
   }
 
-  addItem(afterItemKey?: string): string {
-    return this.mutation.addItem(afterItemKey);
+  addItem(afterItemKey?: string, origin?: RowCreationOrigin): string {
+    return this.mutation.addItem(afterItemKey, origin);
   }
 
   duplicateItem(rowKey: string) {
@@ -372,6 +374,9 @@ export class EditableTableState<T, F extends FiltersMap>
       return;
     }
     const { translate: t } = this.collection;
+    const reportCta = (ctaName: DeleteModalCta) =>
+      this.bi.deleteModalCtaClicked({ ctaName, rowKeys: deletableRowKeys });
+    this.bi.deleteModalShown(deletableRowKeys);
     this.deleteConfirmModal.open({
       theme: 'destructive',
       title: t('cairo.deleteModal.title'),
@@ -379,8 +384,11 @@ export class EditableTableState<T, F extends FiltersMap>
       primaryButtonText: t('cairo.delete.button'),
       secondaryButtonText: t('cairo.cancel.button'),
       primaryButtonOnClick: () => {
+        reportCta('Delete');
         this.deleteItems(deletableRowKeys);
       },
+      secondaryButtonOnClick: () => reportCta('Cancel'),
+      onCloseButtonClick: () => reportCta('X'),
     });
   }
 

package/src/state/EditableTable/EditableTableStateBIReporter.ts

@@ -187,7 +187,7 @@ export class EditableTableStateBIReporter<T, F extends FiltersMap> {
         isOpened: params.isOpened,
         key: params.key ?? cellParams?.key,
         fieldType: params.key
-          ? this._fieldTypeOf(params.key)
+          ? this.fieldTypeOf(params.key)
           : cellParams?.fieldType,
         itemIndex: cellParams?.itemIndex,
       }),
@@ -200,8 +200,8 @@ export class EditableTableStateBIReporter<T, F extends FiltersMap> {
 
   rowCreationEnd(params: {
     origin: RowCreationOrigin;
-    /** Catalog 144:107: `success` or `dismissed` (create did not land). */
-    resultType: 'success' | 'dismissed';
+    /** Catalog 144:107: `failure` means the server rejected the create. */
+    resultType: 'success' | 'failure';
     itemIds?: string[];
   }) {
     this.reportBi(
@@ -261,7 +261,7 @@ export class EditableTableStateBIReporter<T, F extends FiltersMap> {
   private _cellParams(cell: Cell): CellBiParams {
     return {
       key: cell.columnId,
-      fieldType: this._fieldTypeOf(cell.columnId),
+      fieldType: this.fieldTypeOf(cell.columnId),
       itemId: cell.rowKey,
       itemIndex: this._state._toIndices(cell)?.row,
     };
@@ -269,7 +269,7 @@ export class EditableTableStateBIReporter<T, F extends FiltersMap> {
 
   /** The schema field type where the column came from a source, otherwise the
    *  registered cell type. */
-  private _fieldTypeOf(columnId: string): string | undefined {
+  fieldTypeOf(columnId: string): string | undefined {
     const column = this._state._columnMap.get(columnId) as
       | { field?: Field; cellType?: string }
       | undefined;

package/src/state/EditableTable/MutationState.ts

@@ -7,6 +7,10 @@ import type {
   KeyedItem,
 } from '@wix/bex-core';
 import type { EditableTableState } from './EditableTableState';
+import type {
+  RetryActionName,
+  RowCreationOrigin,
+} from './EditableTableStateBIReporter';
 
 export interface EditableTableMutationHandlers<T> {
   /** Factory to create a new empty item with a fresh ID */
@@ -22,6 +26,12 @@ export interface EditableTableMutationHandlers<T> {
   submitDelete: (items: T[]) => Promise<void>;
 }
 
+type DraftRow<T> = {
+  item: T;
+  afterItemKey?: string;
+  origin: RowCreationOrigin;
+};
+
 export class MutationState<T, F extends FiltersMap> {
   private readonly _handlers: EditableTableMutationHandlers<T>;
   private readonly _optimisticActions: CollectionOptimisticActions<T, F>;
@@ -33,7 +43,7 @@ export class MutationState<T, F extends FiltersMap> {
    * (undefined = top of the list). `addItem` keeps this exact, so at most
    * one draft is anchored on any given row.
    */
-  readonly _drafts = new Map<string, { item: T; afterItemKey?: string }>();
+  readonly _drafts = new Map<string, DraftRow<T>>();
 
   /**
    * Row keys of creates still in flight. Their rows are already in the
@@ -110,7 +120,16 @@ export class MutationState<T, F extends FiltersMap> {
     return merged;
   }
 
-  addItem(afterItemKey?: string): string {
+  addItem(
+    afterItemKey?: string,
+    origin: RowCreationOrigin = 'Card CTA',
+  ): string {
+    // The add-row button reports through `onAddItemClick`; context-menu
+    // entries report here so each origin stays distinct.
+    if (origin !== 'Card CTA') {
+      this._parent.bi.rowCreationStart(origin);
+    }
+
     const newItem = this._handlers.createItem();
     const rowKey = this._parent.collection.itemKey(newItem);
     // The new row lands directly below its anchor, pushing down whichever
@@ -120,7 +139,7 @@ export class MutationState<T, F extends FiltersMap> {
         this._drafts.set(key, { ...draft, afterItemKey: rowKey });
       }
     }
-    this._drafts.set(rowKey, { item: newItem, afterItemKey });
+    this._drafts.set(rowKey, { item: newItem, afterItemKey, origin });
     return rowKey;
   }
 
@@ -139,20 +158,18 @@ export class MutationState<T, F extends FiltersMap> {
     // The create's optimistic patch can only anchor on a real server row —
     // not a draft, not another row created through this table's patches.
     const afterItemKey = this._serverAnchorFor(rowKey);
+    const { origin } = draft;
 
     this._drafts.delete(rowKey);
     this._pendingCreateKeys.add(rowKey);
     this._optimisticActions.createOne(item, {
-      submit: this._submitCreate,
+      submit: this._reportedCreate(origin),
       afterItemKey,
       successToast: t('cairo.editableTable.createItem.success.toast'),
-      errorToast: (_err: unknown, { retry }: { retry: () => void }) => ({
-        message: t('cairo.editableTable.createItem.error.toast'),
-        action: {
-          onClick: retry,
-          text: t('cairo.editableTable.retry.toast.CTA'),
-        },
-      }),
+      errorToast: this._retryableToast(
+        'cairo.editableTable.createItem.error.toast',
+        'Create',
+      ),
     });
   }
 
@@ -163,6 +180,9 @@ export class MutationState<T, F extends FiltersMap> {
       return;
     }
 
+    const origin: RowCreationOrigin = 'Row Context Menu - Duplicate';
+    this._parent.bi.rowCreationStart(origin);
+
     const sourceItem = keyedItem.item;
     const newItem = this._handlers.createItem();
     const { itemKey } = this._parent.collection;
@@ -177,16 +197,13 @@ export class MutationState<T, F extends FiltersMap> {
     }
     this._pendingCreateKeys.add(newId);
     this._optimisticActions.createOne(duplicate as T, {
-      submit: this._submitCreate,
+      submit: this._reportedCreate(origin),
       afterItemKey: rowKey,
       successToast: t('cairo.editableTable.duplicateItem.success.toast'),
-      errorToast: (_err: unknown, { retry }: { retry: () => void }) => ({
-        message: t('cairo.editableTable.duplicateItem.error.toast'),
-        action: {
-          onClick: retry,
-          text: t('cairo.editableTable.retry.toast.CTA'),
-        },
-      }),
+      errorToast: this._retryableToast(
+        'cairo.editableTable.duplicateItem.error.toast',
+        'Duplicate',
+      ),
     });
   }
 
@@ -234,13 +251,10 @@ export class MutationState<T, F extends FiltersMap> {
       successToast: t('cairo.editableTable.deleteItem.success.toast', {
         count: items.length,
       }),
-      errorToast: (_err: unknown, { retry }: { retry: () => void }) => ({
-        message: t('cairo.editableTable.deleteItem.error.toast'),
-        action: {
-          onClick: retry,
-          text: t('cairo.editableTable.retry.toast.CTA'),
-        },
-      }),
+      errorToast: this._retryableToast(
+        'cairo.editableTable.deleteItem.error.toast',
+        'Delete',
+      ),
     });
   }
 
@@ -256,13 +270,51 @@ export class MutationState<T, F extends FiltersMap> {
       successToast: t('cairo.editableTable.updateItem.success.toast', {
         count: updatedItems.length,
       }),
-      errorToast: (_err: unknown, { retry }: { retry: () => void }) => ({
-        message: t('cairo.editableTable.updateItem.error.toast'),
-        action: {
-          onClick: retry,
-          text: t('cairo.editableTable.retry.toast.CTA'),
+      errorToast: this._retryableToast(
+        'cairo.editableTable.updateItem.error.toast',
+        'Update',
+      ),
+    });
+  }
+
+  /** Wraps the create submit so the outcome is reported once the server answers
+   *  — the optimistic action itself has no completion callback. */
+  private _reportedCreate(origin: RowCreationOrigin) {
+    return async (items: T[]) => {
+      try {
+        const result = await this._submitCreate(items);
+        const { itemKey } = this._parent.collection;
+        this._parent.bi.rowCreationEnd({
+          origin,
+          resultType: 'success',
+          itemIds: (result ?? items).map(itemKey),
+        });
+        return result;
+      } catch (error) {
+        this._parent.bi.rowCreationEnd({ origin, resultType: 'failure' });
+        throw error;
+      }
+    };
+  }
+
+  private _retryableToast(
+    messageKey:
+      | 'cairo.editableTable.createItem.error.toast'
+      | 'cairo.editableTable.duplicateItem.error.toast'
+      | 'cairo.editableTable.deleteItem.error.toast'
+      | 'cairo.editableTable.updateItem.error.toast',
+    actionName: RetryActionName,
+  ) {
+    const t = this._parent.collection.translate;
+    return (_err: unknown, { retry }: { retry: () => void }) => ({
+      message: t(messageKey),
+      action: {
+        onClick: () => {
+          this._parent.bi.tryAgainClicked(actionName);
+          retry();
         },
-      }),
+        text: t('cairo.editableTable.retry.toast.CTA'),
+      },
     });
   }
 

package/src/state/FormPage/FormPageHeader.st.css.ts

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

package/src/state/TableState.ts

@@ -127,6 +127,7 @@ export class TableState<T, F extends FiltersMap>
     horizontalScroll?: boolean;
     showSelection?: boolean;
     stickySelectionColumn?: boolean;
+    hasRowStatusColumn?: boolean;
   }) {
     const { horizontalScroll } = params;
 
@@ -160,6 +161,8 @@ export class TableState<T, F extends FiltersMap>
       });
     }
 
+    const consumerStickyColumns = stickyColumns;
+
     if (tableDragAndDropState) {
       stickyColumns = tableDragAndDropState.getStickyColumnsCount({
         ...params,
@@ -176,6 +179,18 @@ export class TableState<T, F extends FiltersMap>
       stickyColumns += 1;
     }
 
+    // Without compat the consumer's count already includes the selection column.
+    const pinsConsumerColumn =
+      consumerStickyColumns >
+      (showSelection && !checkboxColumnStickyCompat ? 1 : 0);
+
+    // The row status column is added right after the selection column, so
+    // without this it takes the last pinned slot. It is pinned only ahead of a
+    // consumer column: pinned last, it clips the column after it.
+    if (params.hasRowStatusColumn && pinsConsumerColumn) {
+      stickyColumns += 1;
+    }
+
     return stickyColumns;
   }