@bryntum/core-react-thin 7.3.2 → 7.3.3

package/src/BryntumTextAreaField.tsx

@@ -88,9 +88,10 @@ export type BryntumTextAreaFieldProps = {
     catchEventHandlerExceptions? : boolean
     /**
      * *Only valid if this Widget is [floating](https://bryntum.com/products/core/docs/api/Core/widget/Widget#config-floating).*
-     * Set to `true` to centre the Widget in browser viewport space.
+     * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TextAreaField#config-centered)
+     * @property {boolean} [once] If `true`, the Widget will be centred on its first show, but if it is moved at runtime, it will opt out of centering for future shows.
      */
-    centered? : boolean
+    centered? : boolean|object
     /**
      * A function (or the name of a function in the ownership hierarchy) called during field validation
      * to perform custom validity checks. The function is called as part of the [isValid](https://bryntum.com/products/core/docs/api/Core/widget/Field#property-isValid)
@@ -187,7 +188,7 @@ export type BryntumTextAreaFieldProps = {
     dock? : 'top'|'bottom'|'left'|'right'|'start'|'end'|'header'|'pre-header'|object
     /**
      * *Only valid if this Widget is [floating](https://bryntum.com/products/core/docs/api/Core/widget/Widget#config-floating).*
-     * Set to `true` to be able to drag a widget freely on the page. Or set to an object with a ´handleSelector´
+     * Set to `true` to be able to drag a widget freely on the page. Or set to an object with a `handleSelector`
      * property which controls when a drag should start.
      * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TextAreaField#config-draggable)
      * @property {string} handleSelector CSS selector used to determine if drag can be started from a mouse-downed element inside the widget
@@ -504,7 +505,7 @@ export type BryntumTextAreaFieldProps = {
     rtl? : boolean
     /**
      * Defines what to do if document is scrolled while Widget is visible (only relevant when floating is set to `true`).
-     * Valid values: ´null´: do nothing, ´hide´: hide the widget or ´realign´: realign to the target if possible.
+     * Valid values: `null`: do nothing, `hide`: hide the widget or `realign`: realign to the target if possible.
      */
     scrollAction? : 'hide'|'realign'|null
     /**
@@ -782,7 +783,6 @@ export class BryntumTextAreaField extends React.Component<BryntumTextAreaFieldPr
         'autoHeight',
         'autoSelect',
         'bubbleEvents',
-        'centered',
         'checkValidity',
         'clearable',
         'color',
@@ -851,6 +851,7 @@ export class BryntumTextAreaField extends React.Component<BryntumTextAreaFieldPr
         'badge',
         'callOnFunctions',
         'catchEventHandlerExceptions',
+        'centered',
         'cls',
         'column',
         'dataset',

package/src/BryntumTextAreaPickerField.tsx

@@ -86,9 +86,10 @@ export type BryntumTextAreaPickerFieldProps = {
     catchEventHandlerExceptions? : boolean
     /**
      * *Only valid if this Widget is [floating](https://bryntum.com/products/core/docs/api/Core/widget/Widget#config-floating).*
-     * Set to `true` to centre the Widget in browser viewport space.
+     * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TextAreaPickerField#config-centered)
+     * @property {boolean} [once] If `true`, the Widget will be centred on its first show, but if it is moved at runtime, it will opt out of centering for future shows.
      */
-    centered? : boolean
+    centered? : boolean|object
     /**
      * A function (or the name of a function in the ownership hierarchy) called during field validation
      * to perform custom validity checks. The function is called as part of the [isValid](https://bryntum.com/products/core/docs/api/Core/widget/Field#property-isValid)
@@ -185,7 +186,7 @@ export type BryntumTextAreaPickerFieldProps = {
     dock? : 'top'|'bottom'|'left'|'right'|'start'|'end'|'header'|'pre-header'|object
     /**
      * *Only valid if this Widget is [floating](https://bryntum.com/products/core/docs/api/Core/widget/Widget#config-floating).*
-     * Set to `true` to be able to drag a widget freely on the page. Or set to an object with a ´handleSelector´
+     * Set to `true` to be able to drag a widget freely on the page. Or set to an object with a `handleSelector`
      * property which controls when a drag should start.
      * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TextAreaPickerField#config-draggable)
      * @property {string} handleSelector CSS selector used to determine if drag can be started from a mouse-downed element inside the widget
@@ -513,7 +514,7 @@ export type BryntumTextAreaPickerFieldProps = {
     rtl? : boolean
     /**
      * Defines what to do if document is scrolled while Widget is visible (only relevant when floating is set to `true`).
-     * Valid values: ´null´: do nothing, ´hide´: hide the widget or ´realign´: realign to the target if possible.
+     * Valid values: `null`: do nothing, `hide`: hide the widget or `realign`: realign to the target if possible.
      */
     scrollAction? : 'hide'|'realign'|null
     /**
@@ -791,7 +792,6 @@ export class BryntumTextAreaPickerField extends React.Component<BryntumTextAreaP
         'autoExpand',
         'autoSelect',
         'bubbleEvents',
-        'centered',
         'checkValidity',
         'clearable',
         'color',
@@ -864,6 +864,7 @@ export class BryntumTextAreaPickerField extends React.Component<BryntumTextAreaP
         'badge',
         'callOnFunctions',
         'catchEventHandlerExceptions',
+        'centered',
         'cls',
         'column',
         'dataset',

package/src/BryntumTextField.tsx

@@ -82,9 +82,10 @@ export type BryntumTextFieldProps = {
     catchEventHandlerExceptions? : boolean
     /**
      * *Only valid if this Widget is [floating](https://bryntum.com/products/core/docs/api/Core/widget/Widget#config-floating).*
-     * Set to `true` to centre the Widget in browser viewport space.
+     * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TextField#config-centered)
+     * @property {boolean} [once] If `true`, the Widget will be centred on its first show, but if it is moved at runtime, it will opt out of centering for future shows.
      */
-    centered? : boolean
+    centered? : boolean|object
     /**
      * A function (or the name of a function in the ownership hierarchy) called during field validation
      * to perform custom validity checks. The function is called as part of the [isValid](https://bryntum.com/products/core/docs/api/Core/widget/Field#property-isValid)
@@ -181,7 +182,7 @@ export type BryntumTextFieldProps = {
     dock? : 'top'|'bottom'|'left'|'right'|'start'|'end'|'header'|'pre-header'|object
     /**
      * *Only valid if this Widget is [floating](https://bryntum.com/products/core/docs/api/Core/widget/Widget#config-floating).*
-     * Set to `true` to be able to drag a widget freely on the page. Or set to an object with a ´handleSelector´
+     * Set to `true` to be able to drag a widget freely on the page. Or set to an object with a `handleSelector`
      * property which controls when a drag should start.
      * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TextField#config-draggable)
      * @property {string} handleSelector CSS selector used to determine if drag can be started from a mouse-downed element inside the widget
@@ -502,7 +503,7 @@ export type BryntumTextFieldProps = {
     rtl? : boolean
     /**
      * Defines what to do if document is scrolled while Widget is visible (only relevant when floating is set to `true`).
-     * Valid values: ´null´: do nothing, ´hide´: hide the widget or ´realign´: realign to the target if possible.
+     * Valid values: `null`: do nothing, `hide`: hide the widget or `realign`: realign to the target if possible.
      */
     scrollAction? : 'hide'|'realign'|null
     /**
@@ -779,7 +780,6 @@ export class BryntumTextField extends React.Component<BryntumTextFieldProps> {
         'autoComplete',
         'autoSelect',
         'bubbleEvents',
-        'centered',
         'checkValidity',
         'clearable',
         'color',
@@ -849,6 +849,7 @@ export class BryntumTextField extends React.Component<BryntumTextFieldProps> {
         'badge',
         'callOnFunctions',
         'catchEventHandlerExceptions',
+        'centered',
         'cls',
         'column',
         'dataset',

package/src/BryntumTimeField.tsx

@@ -86,9 +86,10 @@ export type BryntumTimeFieldProps = {
     catchEventHandlerExceptions? : boolean
     /**
      * *Only valid if this Widget is [floating](https://bryntum.com/products/core/docs/api/Core/widget/Widget#config-floating).*
-     * Set to `true` to centre the Widget in browser viewport space.
+     * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TimeField#config-centered)
+     * @property {boolean} [once] If `true`, the Widget will be centred on its first show, but if it is moved at runtime, it will opt out of centering for future shows.
      */
-    centered? : boolean
+    centered? : boolean|object
     /**
      * A function (or the name of a function in the ownership hierarchy) called during field validation
      * to perform custom validity checks. The function is called as part of the [isValid](https://bryntum.com/products/core/docs/api/Core/widget/Field#property-isValid)
@@ -185,7 +186,7 @@ export type BryntumTimeFieldProps = {
     dock? : 'top'|'bottom'|'left'|'right'|'start'|'end'|'header'|'pre-header'|object
     /**
      * *Only valid if this Widget is [floating](https://bryntum.com/products/core/docs/api/Core/widget/Widget#config-floating).*
-     * Set to `true` to be able to drag a widget freely on the page. Or set to an object with a ´handleSelector´
+     * Set to `true` to be able to drag a widget freely on the page. Or set to an object with a `handleSelector`
      * property which controls when a drag should start.
      * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TimeField#config-draggable)
      * @property {string} handleSelector CSS selector used to determine if drag can be started from a mouse-downed element inside the widget
@@ -538,7 +539,7 @@ export type BryntumTimeFieldProps = {
     rtl? : boolean
     /**
      * Defines what to do if document is scrolled while Widget is visible (only relevant when floating is set to `true`).
-     * Valid values: ´null´: do nothing, ´hide´: hide the widget or ´realign´: realign to the target if possible.
+     * Valid values: `null`: do nothing, `hide`: hide the widget or `realign`: realign to the target if possible.
      */
     scrollAction? : 'hide'|'realign'|null
     /**
@@ -832,7 +833,6 @@ export class BryntumTimeField extends React.Component<BryntumTimeFieldProps> {
         'autoExpand',
         'autoSelect',
         'bubbleEvents',
-        'centered',
         'checkValidity',
         'clearable',
         'color',
@@ -905,6 +905,7 @@ export class BryntumTimeField extends React.Component<BryntumTimeFieldProps> {
         'badge',
         'callOnFunctions',
         'catchEventHandlerExceptions',
+        'centered',
         'cls',
         'column',
         'dataset',

package/src/BryntumTimePicker.tsx

@@ -77,9 +77,10 @@ export type BryntumTimePickerProps = {
     catchEventHandlerExceptions? : boolean
     /**
      * *Only valid if this Widget is [floating](https://bryntum.com/products/core/docs/api/Core/widget/Widget#config-floating).*
-     * Set to `true` to centre the Widget in browser viewport space.
+     * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TimePicker#config-centered)
+     * @property {boolean} [once] If `true`, the Widget will be centred on its first show, but if it is moved at runtime, it will opt out of centering for future shows.
      */
-    centered? : boolean
+    centered? : boolean|object
     /**
      * Custom CSS classes to add to element.
      * May be specified as a space separated string, or as an object in which property names
@@ -165,7 +166,7 @@ export type BryntumTimePickerProps = {
     dock? : 'top'|'bottom'|'left'|'right'|'start'|'end'|'header'|'pre-header'|object
     /**
      * *Only valid if this Widget is [floating](https://bryntum.com/products/core/docs/api/Core/widget/Widget#config-floating).*
-     * Set to `true` to be able to drag a widget freely on the page. Or set to an object with a ´handleSelector´
+     * Set to `true` to be able to drag a widget freely on the page. Or set to an object with a `handleSelector`
      * property which controls when a drag should start.
      * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TimePicker#config-draggable)
      * @property {string} handleSelector CSS selector used to determine if drag can be started from a mouse-downed element inside the widget
@@ -278,7 +279,7 @@ export type BryntumTimePickerProps = {
      */
     labelPosition? : 'before'|'above'|'align-before'|'auto'|null
     /**
-     * Sets `labelWidth´ for all children of this Container, that does not define their own `labelWidth`.
+     * Sets `labelWidth` for all children of this Container, that do not define their own `labelWidth`.
      * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TimePicker#config-labelWidth)
      */
     labelWidth? : number|null
@@ -454,7 +455,7 @@ export type BryntumTimePickerProps = {
     scrollable? : boolean|ScrollerConfig|Scroller
     /**
      * Defines what to do if document is scrolled while Widget is visible (only relevant when floating is set to `true`).
-     * Valid values: ´null´: do nothing, ´hide´: hide the widget or ´realign´: realign to the target if possible.
+     * Valid values: `null`: do nothing, `hide`: hide the widget or `realign`: realign to the target if possible.
      */
     scrollAction? : 'hide'|'realign'|null
     /**
@@ -693,7 +694,6 @@ export class BryntumTimePicker extends React.Component<BryntumTimePickerProps> {
         'autoUpdateRecord',
         'border',
         'bubbleEvents',
-        'centered',
         'color',
         'config',
         'constrainTo',
@@ -746,6 +746,7 @@ export class BryntumTimePicker extends React.Component<BryntumTimePickerProps> {
         'appendTo',
         'callOnFunctions',
         'catchEventHandlerExceptions',
+        'centered',
         'cls',
         'column',
         'content',

package/src/BryntumToolbar.tsx

@@ -77,9 +77,10 @@ export type BryntumToolbarProps = {
     catchEventHandlerExceptions? : boolean
     /**
      * *Only valid if this Widget is [floating](https://bryntum.com/products/core/docs/api/Core/widget/Widget#config-floating).*
-     * Set to `true` to centre the Widget in browser viewport space.
+     * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/Toolbar#config-centered)
+     * @property {boolean} [once] If `true`, the Widget will be centred on its first show, but if it is moved at runtime, it will opt out of centering for future shows.
      */
-    centered? : boolean
+    centered? : boolean|object
     /**
      * Custom CSS classes to add to element.
      * May be specified as a space separated string, or as an object in which property names
@@ -165,7 +166,7 @@ export type BryntumToolbarProps = {
     dock? : 'top'|'bottom'|'left'|'right'|'start'|'end'|'header'|'pre-header'|object
     /**
      * *Only valid if this Widget is [floating](https://bryntum.com/products/core/docs/api/Core/widget/Widget#config-floating).*
-     * Set to `true` to be able to drag a widget freely on the page. Or set to an object with a ´handleSelector´
+     * Set to `true` to be able to drag a widget freely on the page. Or set to an object with a `handleSelector`
      * property which controls when a drag should start.
      * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/Toolbar#config-draggable)
      * @property {string} handleSelector CSS selector used to determine if drag can be started from a mouse-downed element inside the widget
@@ -277,7 +278,7 @@ export type BryntumToolbarProps = {
      */
     labelPosition? : 'before'|'above'|'align-before'|'auto'|null
     /**
-     * Sets `labelWidth´ for all children of this Container, that does not define their own `labelWidth`.
+     * Sets `labelWidth` for all children of this Container, that do not define their own `labelWidth`.
      * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/Toolbar#config-labelWidth)
      */
     labelWidth? : number|null
@@ -451,7 +452,7 @@ export type BryntumToolbarProps = {
     scrollable? : boolean|ScrollerConfig|Scroller
     /**
      * Defines what to do if document is scrolled while Widget is visible (only relevant when floating is set to `true`).
-     * Valid values: ´null´: do nothing, ´hide´: hide the widget or ´realign´: realign to the target if possible.
+     * Valid values: `null`: do nothing, `hide`: hide the widget or `realign`: realign to the target if possible.
      */
     scrollAction? : 'hide'|'realign'|null
     /**
@@ -715,7 +716,6 @@ export class BryntumToolbar extends React.Component<BryntumToolbarProps> {
         'autoUpdateRecord',
         'border',
         'bubbleEvents',
-        'centered',
         'color',
         'config',
         'constrainTo',
@@ -770,6 +770,7 @@ export class BryntumToolbar extends React.Component<BryntumToolbarProps> {
         'appendTo',
         'callOnFunctions',
         'catchEventHandlerExceptions',
+        'centered',
         'cls',
         'column',
         'content',

package/src/BryntumWidget.tsx

@@ -69,9 +69,10 @@ export type BryntumWidgetProps = {
     catchEventHandlerExceptions? : boolean
     /**
      * *Only valid if this Widget is [floating](https://bryntum.com/products/core/docs/api/Core/widget/Widget#config-floating).*
-     * Set to `true` to centre the Widget in browser viewport space.
+     * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/Widget#config-centered)
+     * @property {boolean} [once] If `true`, the Widget will be centred on its first show, but if it is moved at runtime, it will opt out of centering for future shows.
      */
-    centered? : boolean
+    centered? : boolean|object
     /**
      * Custom CSS classes to add to element.
      * May be specified as a space separated string, or as an object in which property names
@@ -145,7 +146,7 @@ export type BryntumWidgetProps = {
     dock? : 'top'|'bottom'|'left'|'right'|'start'|'end'|'header'|'pre-header'|object
     /**
      * *Only valid if this Widget is [floating](https://bryntum.com/products/core/docs/api/Core/widget/Widget#config-floating).*
-     * Set to `true` to be able to drag a widget freely on the page. Or set to an object with a ´handleSelector´
+     * Set to `true` to be able to drag a widget freely on the page. Or set to an object with a `handleSelector`
      * property which controls when a drag should start.
      * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/Widget#config-draggable)
      * @property {string} handleSelector CSS selector used to determine if drag can be started from a mouse-downed element inside the widget
@@ -352,7 +353,7 @@ export type BryntumWidgetProps = {
     scrollable? : boolean|ScrollerConfig|Scroller
     /**
      * Defines what to do if document is scrolled while Widget is visible (only relevant when floating is set to `true`).
-     * Valid values: ´null´: do nothing, ´hide´: hide the widget or ´realign´: realign to the target if possible.
+     * Valid values: `null`: do nothing, `hide`: hide the widget or `realign`: realign to the target if possible.
      */
     scrollAction? : 'hide'|'realign'|null
     /**
@@ -546,7 +547,6 @@ export class BryntumWidget extends React.Component<BryntumWidgetProps> {
         'ariaDescription',
         'ariaLabel',
         'bubbleEvents',
-        'centered',
         'color',
         'config',
         'constrainTo',
@@ -591,6 +591,7 @@ export class BryntumWidget extends React.Component<BryntumWidgetProps> {
         'appendTo',
         'callOnFunctions',
         'catchEventHandlerExceptions',
+        'centered',
         'cls',
         'column',
         'content',

package/src/BryntumYearPicker.tsx

@@ -88,9 +88,10 @@ export type BryntumYearPickerProps = {
     catchEventHandlerExceptions? : boolean
     /**
      * *Only valid if this Widget is [floating](https://bryntum.com/products/core/docs/api/Core/widget/Widget#config-floating).*
-     * Set to `true` to centre the Widget in browser viewport space.
+     * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/YearPicker#config-centered)
+     * @property {boolean} [once] If `true`, the Widget will be centred on its first show, but if it is moved at runtime, it will opt out of centering for future shows.
      */
-    centered? : boolean
+    centered? : boolean|object
     /**
      * Custom CSS classes to add to element.
      * May be specified as a space separated string, or as an object in which property names
@@ -186,7 +187,7 @@ export type BryntumYearPickerProps = {
     dock? : 'top'|'bottom'|'left'|'right'|'start'|'end'|'header'|'pre-header'|object
     /**
      * *Only valid if this Widget is [floating](https://bryntum.com/products/core/docs/api/Core/widget/Widget#config-floating).*
-     * Set to `true` to be able to drag a widget freely on the page. Or set to an object with a ´handleSelector´
+     * Set to `true` to be able to drag a widget freely on the page. Or set to an object with a `handleSelector`
      * property which controls when a drag should start.
      * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/YearPicker#config-draggable)
      * @property {string} handleSelector CSS selector used to determine if drag can be started from a mouse-downed element inside the widget
@@ -326,7 +327,7 @@ export type BryntumYearPickerProps = {
      */
     labelPosition? : 'before'|'above'|'align-before'|'auto'|null
     /**
-     * Sets `labelWidth´ for all children of this Container, that does not define their own `labelWidth`.
+     * Sets `labelWidth` for all children of this Container, that do not define their own `labelWidth`.
      * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/YearPicker#config-labelWidth)
      */
     labelWidth? : number|null
@@ -500,7 +501,7 @@ export type BryntumYearPickerProps = {
     scrollable? : boolean|ScrollerConfig|Scroller
     /**
      * Defines what to do if document is scrolled while Widget is visible (only relevant when floating is set to `true`).
-     * Valid values: ´null´: do nothing, ´hide´: hide the widget or ´realign´: realign to the target if possible.
+     * Valid values: `null`: do nothing, `hide`: hide the widget or `realign`: realign to the target if possible.
      */
     scrollAction? : 'hide'|'realign'|null
     /**
@@ -833,7 +834,6 @@ export class BryntumYearPicker extends React.Component<BryntumYearPickerProps> {
         'bodyCls',
         'border',
         'bubbleEvents',
-        'centered',
         'collapsible',
         'color',
         'config',
@@ -900,6 +900,7 @@ export class BryntumYearPicker extends React.Component<BryntumYearPickerProps> {
         'appendTo',
         'callOnFunctions',
         'catchEventHandlerExceptions',
+        'centered',
         'cls',
         'collapsed',
         'column',

package/src/WrapperHelper.tsx

@@ -50,6 +50,7 @@ type ReactComponentState = {
 type HTMLElementWithData = HTMLElement & {
     elementData?: any
     lastPortalId?: string | null
+    jsxContainer?: HTMLElement | null
     didSetTextContent?: boolean
 };
 
@@ -515,9 +516,11 @@ function processCellContent(this: { reactComponent: any; isExporting: boolean; $
         else {
             // Create new portal container
             const portalContainer         = DomHelper.append(renderElement, {
-                tag       : 'div',
-                className : portalContainerClass,
-                dataset   : { portalId } // for reference in tests
+                tag           : 'div',
+                className     : portalContainerClass,
+                dataset       : { portalId }, // for reference in tests
+                // We don't want portal container to be reused in the DomConfig flip for this cell
+                retainElement : true
             });
             renderElement.portalContainer = portalContainer;
 
@@ -542,9 +545,27 @@ function processCellContent(this: { reactComponent: any; isExporting: boolean; $
         cellElementData.hasPortal = true;
         portal.generation         = record.generation;
     }
-    else if (!rendererHtml && cellElementData.hasPortal) {
-        cellElement.portalContainer.remove();
-        cellElementData.hasPortal = false;
+    else if (cellElementData.hasPortal) {
+        // The previous JSX cell content can be replaced by DomConfig object so in that case,
+        // we want to delete the previously created portal for JSX. See:
+        // https://github.com/bryntum/support/issues/7862
+        const
+            container     = renderElement.portalContainer || renderElement.querySelector(`.${portalContainerClass}`),
+            ownedPortalId = container?.dataset.portalId,
+            portal        = ownedPortalId && state.portals.get(ownedPortalId);
+
+        if (portal && portal.containerInfo === container) {
+            deletePortal(component, ownedPortalId);
+            flushSync(() => updateGeneration(component, true));
+        }
+        else {
+            // No live portal owns this container. Since retainElement is true,
+            // we have to remove it manually
+            container?.remove();
+        }
+
+        renderElement.portalContainer = null;
+        cellElementData.hasPortal     = false;
     }
 }
 
@@ -1173,7 +1194,7 @@ function processEventContent(this: any, {
  */
 function processResourceHeader(
     { jsx, targetElement }:
-    { jsx: ReactElement; targetElement: HTMLElement }): void {
+    { jsx: ReactElement; targetElement: HTMLElementWithData }): void {
 
     if (!jsx) {
         return;
@@ -1186,19 +1207,36 @@ function processResourceHeader(
         { portals }        = state,
         portalId           = `resource-header-${targetElement.dataset.resourceId}`;
 
-    // Delete portal if we already have one
-    if (portals.has(portalId)) {
-        portals.delete(portalId);
-
-        // Update the generation (force React re-rendering) in this tick
-        updateGeneration(reactComponent, true);
+    // Render the JSX into a retained container instead of straight into the header cell. DomSync owns the
+    // header cell and, on every re-sync (e.g. when resizing the resource columns), it releases any DOM children
+    // it did not create itself - adding the `b-released` class which hides the React-rendered content. A
+    // `b-jsx-container` flagged with `retainElement` is left untouched by DomSync. The container is given
+    // `display: contents` so it stays transparent to the header cell's flex layout.
+    // The container is cached on the cell rather than queried from the DOM each pass.
+    let jsxContainer = targetElement.jsxContainer;
+
+    if (!jsxContainer) {
+        // Clear any plain content DomSync may have placed in the cell before hosting the portal
+        targetElement.textContent = '';
+        targetElement.jsxContainer = jsxContainer = DomHelper.createElement({
+            className     : 'b-jsx-container',
+            parent        : targetElement,
+            retainElement : true,
+            style         : { display : 'contents' }
+        }) as HTMLElement;
+    }
+    // When a header cell is reused for a different resource, drop the now stale portal
+    else if (targetElement.lastPortalId && targetElement.lastPortalId !== portalId) {
+        portals.delete(targetElement.lastPortalId);
     }
 
-    portals.set(portalId, ReactDOM.createPortal(jsx, targetElement));
-
-    // Trigger the React portals re-rendering in the next animation frame
-    updateGeneration(reactComponent);
+    // (Re)create the portal so resource record changes are reflected. Setting the same
+    // id replaces any existing portal, so no explicit delete is needed beforehand.
+    portals.set(portalId, ReactDOM.createPortal(jsx, jsxContainer));
+    targetElement.lastPortalId = portalId;
 
+    // Force React to re-render the portals in this tick
+    updateGeneration(reactComponent, true);
 }
 
 /**