@wix/patterns 1.488.0 → 1.489.0

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

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

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload4021007671";
+var _namespace_ = "ImportStepUpload3094355711";
 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":"ImportStepUpload4021007671__root","fileUpload":"ImportStepUpload4021007671__fileUpload"};
+export var classes = {"root":"ImportStepUpload3094355711__root","fileUpload":"ImportStepUpload3094355711__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow3621201869";
+var _namespace_ = "LoadingRow1993998855";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"LoadingRow3621201869__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow3621201869__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow1993998855__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow1993998855__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar2902181092";
+var _namespace_ = "MultiBulkActionToolbar21172203";
 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":"MultiBulkActionToolbar2902181092__root","leftGroupWrapper":"MultiBulkActionToolbar2902181092__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2902181092__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2902181092__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar21172203__root","leftGroupWrapper":"MultiBulkActionToolbar21172203__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar21172203__selectedCountItem","selectedCountText":"MultiBulkActionToolbar21172203__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow3925760858";
+var _namespace_ = "NestedTablePlaceholderStatesRow1066952737";
 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":"NestedTablePlaceholderStatesRow3925760858__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow1066952737__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_ = "NestedTableRow866529802";
+var _namespace_ = "NestedTableRow3874444528";
 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":"NestedTableRow866529802__root","firstLevel":"NestedTableRow866529802__firstLevel","placeholder":"NestedTableRow866529802__placeholder","parentHovered":"NestedTableRow866529802__parentHovered"};
+export var classes = {"root":"NestedTableRow3874444528__root","firstLevel":"NestedTableRow3874444528__firstLevel","placeholder":"NestedTableRow3874444528__placeholder","parentHovered":"NestedTableRow3874444528__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_ = "MultipleDragOverlayEffect2650853254";
+var _namespace_ = "MultipleDragOverlayEffect663084329";
 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":"MultipleDragOverlayEffect2650853254__root"};
+export var classes = {"root":"MultipleDragOverlayEffect663084329__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_ = "NestedTableDragAndDropRow4161848159";
+var _namespace_ = "NestedTableDragAndDropRow2207488032";
 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":"NestedTableDragAndDropRow4161848159__root"};
+export var classes = {"root":"NestedTableDragAndDropRow2207488032__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_ = "PickerContent1182858536";
+var _namespace_ = "PickerContent2953581256";
 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":"PickerContent1182858536__root"};
+export var classes = {"root":"PickerContent2953581256__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_ = "PickerContentAdditionalStep2362062783";
+var _namespace_ = "PickerContentAdditionalStep1212820561";
 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":"PickerContentAdditionalStep2362062783__root","titles":"PickerContentAdditionalStep2362062783__titles","suffix":"PickerContentAdditionalStep2362062783__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1212820561__root","titles":"PickerContentAdditionalStep1212820561__titles","suffix":"PickerContentAdditionalStep1212820561__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_ = "PickerTableListItem2133071640";
+var _namespace_ = "PickerTableListItem1490365995";
 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":"PickerTableListItem2133071640__root"};
+export var classes = {"root":"PickerTableListItem1490365995__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SchemaSource/schemaFieldManagement.ts

@@ -99,6 +99,7 @@ export const schemaFieldManagement = (
       const t = sourceState.container.translate;
       const { fieldModal } = sourceState.source;
       return {
+        showFieldId: fieldModal.showFieldId,
         text: fieldModal.text ?? {
           addTitle: t('cairo.customFields.addCustomField.modal.title'),
           editTitle: t('cairo.customFields.editCustomField.modal.title'),

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent3785619166";
+var _namespace_ = "ScrollableContent1847254971";
 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":"ScrollableContent3785619166__root"};
+export var classes = {"root":"ScrollableContent1847254971__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_ = "SetupWidget1099513909";
+var _namespace_ = "SetupWidget3545239579";
 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":"SetupWidget1099513909__root","row":"SetupWidget1099513909__row","completedCta":"SetupWidget1099513909__completedCta","secondaryCta":"SetupWidget1099513909__secondaryCta","card":"SetupWidget1099513909__card","stepIcon":"SetupWidget1099513909__stepIcon","chevron":"SetupWidget1099513909__chevron","chevronDisabled":"SetupWidget1099513909__chevronDisabled","inProgressLabel":"SetupWidget1099513909__inProgressLabel"};
+export var classes = {"root":"SetupWidget3545239579__root","row":"SetupWidget3545239579__row","completedCta":"SetupWidget3545239579__completedCta","secondaryCta":"SetupWidget3545239579__secondaryCta","card":"SetupWidget3545239579__card","stepIcon":"SetupWidget3545239579__stepIcon","chevron":"SetupWidget3545239579__chevron","chevronDisabled":"SetupWidget3545239579__chevronDisabled","inProgressLabel":"SetupWidget3545239579__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_ = "SkeletonCard706100567";
+var _namespace_ = "SkeletonCard251690363";
 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":"SkeletonCard706100567__root","headerLoading":"SkeletonCard706100567__headerLoading"};
+export var classes = {"root":"SkeletonCard251690363__root","headerLoading":"SkeletonCard251690363__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_ = "SlidingModal1179177860";
+var _namespace_ = "SlidingModal2906014629";
 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":"SlidingModal1179177860__root"};
+export var classes = {"root":"SlidingModal2906014629__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_ = "AddFieldColumnHeader4168196710";
+var _namespace_ = "AddFieldColumnHeader660788591";
 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":"AddFieldColumnHeader4168196710__root","anchorLayer":"AddFieldColumnHeader4168196710__anchorLayer","popover":"AddFieldColumnHeader4168196710__popover","title":"AddFieldColumnHeader4168196710__title","hoverBridge":"AddFieldColumnHeader4168196710__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader660788591__root","anchorLayer":"AddFieldColumnHeader660788591__anchorLayer","popover":"AddFieldColumnHeader660788591__popover","title":"AddFieldColumnHeader660788591__title","hoverBridge":"AddFieldColumnHeader660788591__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_ = "NumberCell1256423461";
+var _namespace_ = "NumberCell3535629880";
 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":"NumberCell1256423461__root"};
+export var classes = {"root":"NumberCell3535629880__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_ = "TabsFilter950746489";
+var _namespace_ = "TabsFilter989573390";
 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":"TabsFilter950746489__root","titleBox":"TabsFilter950746489__titleBox"};
+export var classes = {"root":"TabsFilter989573390__root","titleBox":"TabsFilter989573390__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_ = "ManageTagsModal1385552329";
+var _namespace_ = "ManageTagsModal2359263321";
 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":"ManageTagsModal1385552329__root"};
+export var classes = {"root":"ManageTagsModal2359263321__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_ = "ToolbarItem163264995";
+var _namespace_ = "ToolbarItem2593961424";
 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":"ToolbarItem163264995__root"};
+export var classes = {"root":"ToolbarItem2593961424__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_ = "ToolbarItemBox2871495896";
+var _namespace_ = "ToolbarItemBox2293953367";
 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":"ToolbarItemBox2871495896__root"};
+export var classes = {"root":"ToolbarItemBox2293953367__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/VirtualGridRepeater/VirtualGridRepeaterBase.tsx

@@ -84,6 +84,7 @@ function _VirtualGridRepeaterBase(props: VirtualGridRepeaterBaseProps) {
   );
 
   useEffect(() => {
+    state.applyEstimatedRowHeight();
     state.gridRef?.resetAfterIndices({
       columnIndex: 0,
       rowIndex: 0,

package/src/components/VirtualGridRepeater/VirtualGridRepeaterState.ts

@@ -11,6 +11,9 @@ export interface ReactWindowGridRef extends VariableSizeGrid {
   _getHorizontalRangeToRender(): number[];
   _getItemStyle(rowIndex: number, columnIndex: number): CSSProperties;
   _getItemStyleCache(...args: any[]): unknown;
+  _instanceProps: {
+    estimatedRowHeight: number;
+  };
 }
 
 export interface VirtualGridRepeaterStateParams {
@@ -59,6 +62,18 @@ export class VirtualGridRepeaterState {
     return Math.ceil(itemsToRenderCount / columnCount);
   }
 
+  // react-window copies the estimatedRowHeight prop only on mount, so later changes are written to the mounted grid.
+  applyEstimatedRowHeight() {
+    const {
+      gridRef,
+      calcGridProps: { estimatedRowHeight },
+    } = this;
+
+    if (gridRef && estimatedRowHeight) {
+      gridRef._instanceProps.estimatedRowHeight = estimatedRowHeight;
+    }
+  }
+
   _itemKeyRecycler = (index: number) => {
     const {
       gridState: { itemKeyRecyclerOverride },

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common560572835";
+var _namespace_ = "common1447457300";
 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":"common560572835__root","column":"common560572835__column","fullHeight":"common560572835__fullHeight"};
+export var classes = {"root":"common1447457300__root","column":"common1447457300__column","fullHeight":"common1447457300__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader3392449430";
+var _namespace_ = "CollectionPageHeader3653877226";
 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":"CollectionPageHeader3392449430__root","mobileMoreActions":"CollectionPageHeader3392449430__mobileMoreActions"};
+export var classes = {"root":"CollectionPageHeader3653877226__root","mobileMoreActions":"CollectionPageHeader3653877226__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_ = "MobilePrimaryActionBar1358174692";
+var _namespace_ = "MobilePrimaryActionBar3203602018";
 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":"MobilePrimaryActionBar1358174692__root"};
+export var classes = {"root":"MobilePrimaryActionBar3203602018__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_ = "TitleBadges3455170710";
+var _namespace_ = "TitleBadges2841829545";
 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":"TitleBadges3455170710__root","tooltip":"TitleBadges3455170710__tooltip","tooltipTrigger":"TitleBadges3455170710__tooltipTrigger"};
+export var classes = {"root":"TitleBadges2841829545__root","tooltip":"TitleBadges2841829545__tooltip","tooltipTrigger":"TitleBadges2841829545__tooltipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/CustomColumnsState.ts

@@ -4,7 +4,14 @@ import {
   TypedEmitter,
   withoutDefaults,
 } from '@wix/bex-core';
-import { action, computed, makeObservable, observable, reaction } from 'mobx';
+import {
+  action,
+  comparer,
+  computed,
+  makeObservable,
+  observable,
+  reaction,
+} from 'mobx';
 import { ToolbarCollectionState } from './ToolbarCollectionState';
 import { Column, ViewType } from '../model';
 import type { CustomColumnsDragAndDrop } from '../components/CustomColumns/CustomColumnsDragAndDrop';
@@ -40,6 +47,28 @@ const getCustomColumnsKeyForLayout = (layout: ViewType | undefined): string =>
     ? SPREADSHEET_CUSTOM_COLUMNS_KEY
     : CUSTOM_COLUMNS_KEY;
 
+const asText = (content: unknown) =>
+  typeof content === 'string' ? content : undefined;
+
+const toPanelRow = (column: Column) => ({
+  id: column.id,
+  name: column.name || asText(column.title),
+  fieldType: column.fieldType,
+  infoText: asText(
+    column.infoTooltipProps?.panelContent || column.infoTooltipProps?.content,
+  ),
+  isPrimary: column.isPrimary,
+  isPii: column.isPii,
+  isSystem: column.isSystem,
+  appFieldEditable: column.dataExtension
+    ? !!column.dataExtension.editable
+    : undefined,
+  required: column.validation?.some((rule) => rule.type === 'required'),
+  hideable: column.hideable,
+  reorderDisabled: column.reorderDisabled,
+  hiddenFromCustomColumnsSelection: column.hiddenFromCustomColumnsSelection,
+});
+
 const asStoredColumnsOrNull = (customColumnsResult: unknown) =>
   Array.isArray(customColumnsResult)
     ? (customColumnsResult as StoredColumn[])
@@ -375,6 +404,11 @@ export class CustomColumnsState<
         },
       ),
 
+      reaction(
+        () => this.table.columns.map(toPanelRow),
+        () => void this.refreshColumns(),
+        { equals: comparer.structural },
+      ),
       this.registerSelectedColumnChange(),
       this.columnsCollection.init(),
       this.dragAndDrop?.init(),