@wix/patterns 1.494.0 → 1.495.0

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow876112627";
+var _namespace_ = "NestedTableRow3670036296";
 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":"NestedTableRow876112627__root","firstLevel":"NestedTableRow876112627__firstLevel","placeholder":"NestedTableRow876112627__placeholder","parentHovered":"NestedTableRow876112627__parentHovered"};
+export var classes = {"root":"NestedTableRow3670036296__root","firstLevel":"NestedTableRow3670036296__firstLevel","placeholder":"NestedTableRow3670036296__placeholder","parentHovered":"NestedTableRow3670036296__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_ = "MultipleDragOverlayEffect2795974299";
+var _namespace_ = "MultipleDragOverlayEffect348513564";
 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":"MultipleDragOverlayEffect2795974299__root"};
+export var classes = {"root":"MultipleDragOverlayEffect348513564__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_ = "NestedTableDragAndDropRow2247427962";
+var _namespace_ = "NestedTableDragAndDropRow4090382608";
 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":"NestedTableDragAndDropRow2247427962__root"};
+export var classes = {"root":"NestedTableDragAndDropRow4090382608__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_ = "PickerContent3558192044";
+var _namespace_ = "PickerContent1391911279";
 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":"PickerContent3558192044__root"};
+export var classes = {"root":"PickerContent1391911279__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_ = "PickerContentAdditionalStep2308500653";
+var _namespace_ = "PickerContentAdditionalStep2748344170";
 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":"PickerContentAdditionalStep2308500653__root","titles":"PickerContentAdditionalStep2308500653__titles","suffix":"PickerContentAdditionalStep2308500653__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep2748344170__root","titles":"PickerContentAdditionalStep2748344170__titles","suffix":"PickerContentAdditionalStep2748344170__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_ = "PickerTableListItem4043198262";
+var _namespace_ = "PickerTableListItem2099110564";
 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":"PickerTableListItem4043198262__root"};
+export var classes = {"root":"PickerTableListItem2099110564__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent2046306564";
+var _namespace_ = "ScrollableContent2674810946";
 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":"ScrollableContent2046306564__root"};
+export var classes = {"root":"ScrollableContent2674810946__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_ = "SetupWidget1799065169";
+var _namespace_ = "SetupWidget1049875717";
 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":"SetupWidget1799065169__root","row":"SetupWidget1799065169__row","completedCta":"SetupWidget1799065169__completedCta","secondaryCta":"SetupWidget1799065169__secondaryCta","card":"SetupWidget1799065169__card","stepIcon":"SetupWidget1799065169__stepIcon","chevron":"SetupWidget1799065169__chevron","chevronDisabled":"SetupWidget1799065169__chevronDisabled","inProgressLabel":"SetupWidget1799065169__inProgressLabel"};
+export var classes = {"root":"SetupWidget1049875717__root","row":"SetupWidget1049875717__row","completedCta":"SetupWidget1049875717__completedCta","secondaryCta":"SetupWidget1049875717__secondaryCta","card":"SetupWidget1049875717__card","stepIcon":"SetupWidget1049875717__stepIcon","chevron":"SetupWidget1049875717__chevron","chevronDisabled":"SetupWidget1049875717__chevronDisabled","inProgressLabel":"SetupWidget1049875717__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_ = "SkeletonCard118188005";
+var _namespace_ = "SkeletonCard3476574360";
 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":"SkeletonCard118188005__root","headerLoading":"SkeletonCard118188005__headerLoading"};
+export var classes = {"root":"SkeletonCard3476574360__root","headerLoading":"SkeletonCard3476574360__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_ = "SlidingModal3449581154";
+var _namespace_ = "SlidingModal1138162268";
 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":"SlidingModal3449581154__root"};
+export var classes = {"root":"SlidingModal1138162268__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_ = "AddFieldColumnHeader1121021053";
+var _namespace_ = "AddFieldColumnHeader2165490183";
 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":"AddFieldColumnHeader1121021053__root","anchorLayer":"AddFieldColumnHeader1121021053__anchorLayer","popover":"AddFieldColumnHeader1121021053__popover","title":"AddFieldColumnHeader1121021053__title","hoverBridge":"AddFieldColumnHeader1121021053__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader2165490183__root","anchorLayer":"AddFieldColumnHeader2165490183__anchorLayer","popover":"AddFieldColumnHeader2165490183__popover","title":"AddFieldColumnHeader2165490183__title","hoverBridge":"AddFieldColumnHeader2165490183__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_ = "NumberCell748939733";
+var _namespace_ = "NumberCell4142295463";
 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":"NumberCell748939733__root"};
+export var classes = {"root":"NumberCell4142295463__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_ = "TabsFilter734832378";
+var _namespace_ = "TabsFilter2750685995";
 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":"TabsFilter734832378__root","titleBox":"TabsFilter734832378__titleBox"};
+export var classes = {"root":"TabsFilter2750685995__root","titleBox":"TabsFilter2750685995__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_ = "ManageTagsModal3568114130";
+var _namespace_ = "ManageTagsModal2806058920";
 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":"ManageTagsModal3568114130__root"};
+export var classes = {"root":"ManageTagsModal2806058920__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_ = "ToolbarItem497625553";
+var _namespace_ = "ToolbarItem1801862605";
 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":"ToolbarItem497625553__root"};
+export var classes = {"root":"ToolbarItem1801862605__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_ = "ToolbarItemBox129482920";
+var _namespace_ = "ToolbarItemBox1663907210";
 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":"ToolbarItemBox129482920__root"};
+export var classes = {"root":"ToolbarItemBox1663907210__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_ = "common4053375054";
+var _namespace_ = "common2788775158";
 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":"common4053375054__root","column":"common4053375054__column","fullHeight":"common4053375054__fullHeight"};
+export var classes = {"root":"common2788775158__root","column":"common2788775158__column","fullHeight":"common2788775158__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/CollectionFieldsSourceState.ts

@@ -1,4 +1,4 @@
-import { reaction } from 'mobx';
+import { reaction, runInAction } from 'mobx';
 import type { ComponentType } from 'react';
 import { addEventListener, TaskState } from '@wix/bex-core';
 import type {
@@ -198,9 +198,11 @@ export class CollectionFieldsSourceState {
     toolbar: ToolbarCollectionState<any, any>,
     source: { fieldsSource: FieldsSource } & FieldsSourceRendering,
   ) {
-    toolbar.collectionFieldsSource ??= new CollectionFieldsSourceState({
-      ...source,
-      toolbar,
+    runInAction(() => {
+      toolbar.collectionFieldsSource ??= new CollectionFieldsSourceState({
+        ...source,
+        toolbar,
+      });
     });
   }
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader170929993";
+var _namespace_ = "CollectionPageHeader1790822900";
 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":"CollectionPageHeader170929993__root","mobileMoreActions":"CollectionPageHeader170929993__mobileMoreActions"};
+export var classes = {"root":"CollectionPageHeader1790822900__root","mobileMoreActions":"CollectionPageHeader1790822900__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_ = "MobilePrimaryActionBar2307826966";
+var _namespace_ = "MobilePrimaryActionBar3753253024";
 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":"MobilePrimaryActionBar2307826966__root"};
+export var classes = {"root":"MobilePrimaryActionBar3753253024__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_ = "TitleBadges4226250695";
+var _namespace_ = "TitleBadges176837811";
 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":"TitleBadges4226250695__root","tooltip":"TitleBadges4226250695__tooltip","tooltipTrigger":"TitleBadges4226250695__tooltipTrigger"};
+export var classes = {"root":"TitleBadges176837811__root","tooltip":"TitleBadges176837811__tooltip","tooltipTrigger":"TitleBadges176837811__tooltipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/EditableTable/CellValueState.ts

@@ -6,7 +6,7 @@ import {
   builtInCellTypes,
   textCellType,
 } from '../../components/EditableTable/cellTypes';
-import { runCellValidation, validResult } from './utils';
+import { parseCellKey, runCellValidation, validResult } from './utils';
 
 const builtInCellTypeMap = new Map<string, CellType>(
   builtInCellTypes.map((ct) => [ct.type, ct]),
@@ -14,7 +14,10 @@ const builtInCellTypeMap = new Map<string, CellType>(
 
 export class CellValueState<T, F extends FiltersMap> {
   /** Pending invalid cell values, keyed by `${itemId}:${colId}`. */
-  readonly _pendingCells = new Map<string, { value: any; errors: string[] }>();
+  readonly _pendingCells = new Map<
+    string,
+    { value: any; errors: string[]; isDeserializationError?: boolean }
+  >();
 
   /** Valid committed values not yet saved, keyed by `${itemId}:${colId}`.
    *  Each row's drafts are flushed as one update when focus leaves the row. */
@@ -42,6 +45,7 @@ export class CellValueState<T, F extends FiltersMap> {
       commitHandler: action,
       applyBulkRawValues: action,
       applyBulkValues: action,
+      revalidatePendingCells: action,
       flushDrafts: action,
       flushRow: action,
       dropRowCellState: action,
@@ -363,7 +367,11 @@ export class CellValueState<T, F extends FiltersMap> {
       if (error) {
         const pendingKey = this._pendingCellKey(rowKey, columnId);
         if (pendingKey) {
-          this._pendingCells.set(pendingKey, { value, errors: [error] });
+          this._pendingCells.set(pendingKey, {
+            value,
+            errors: [error],
+            isDeserializationError: true,
+          });
         }
       } else {
         changes.push({ rowKey, columnId, value });
@@ -479,6 +487,25 @@ export class CellValueState<T, F extends FiltersMap> {
     }
   }
 
+  revalidatePendingCells() {
+    const rowsToSave = new Set<string>();
+    for (const [key, pending] of this._pendingCells) {
+      const cell = parseCellKey(key);
+      if (!cell || pending.isDeserializationError) {
+        continue;
+      }
+      this._applyValue(cell.rowKey, cell.columnId, pending.value);
+      if (!this._pendingCells.has(key)) {
+        rowsToSave.add(cell.rowKey);
+      }
+    }
+    for (const rowKey of rowsToSave) {
+      if (!this._parent.cellInteraction.isRowActive(rowKey)) {
+        this.flushRow(rowKey);
+      }
+    }
+  }
+
   flushDrafts(exceptRowKey?: string) {
     this._flushRows((rowKey) => rowKey !== exceptRowKey);
   }

package/src/state/EditableTable/EditableTableState.ts

@@ -1,4 +1,4 @@
-import { action, computed, makeObservable, observable } from 'mobx';
+import { action, computed, makeObservable, observable, reaction } from 'mobx';
 import {
   CollectionOptimisticActions,
   CollectionState,
@@ -336,6 +336,10 @@ export class EditableTableState<T, F extends FiltersMap>
   init(columns: EditableColumn<T>[]) {
     this._providedColumns = columns;
     const disposeMutation = this.mutation.init();
+    const disposeValidation = reaction(
+      () => this.allColumns,
+      () => this.cellValue.revalidatePendingCells(),
+    );
 
     const { onBeforeUnload } = this.toolbar.container;
     const onBeforeUnloadSubscription = onBeforeUnload?.((event) => {
@@ -346,6 +350,7 @@ export class EditableTableState<T, F extends FiltersMap>
     });
 
     return () => {
+      disposeValidation();
       this.cellValue.flushDrafts();
       disposeMutation();
       onBeforeUnloadSubscription?.remove();

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

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

package/src/state/ToolbarCollectionState.ts

@@ -276,6 +276,7 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
     });
 
     makeObservable(this, {
+      collectionFieldsSource: observable.ref,
       forceRenderIndexes: observable.ref,
       _userColumns: observable.ref,
       _extendedColumns: observable.ref,