@bryntum/grid-react-thin 7.3.1 → 7.3.3

package/src/BryntumTreeGrid.tsx

@@ -43,6 +43,8 @@ export type BryntumTreeGridProps = {
     /**
      * Element (or the id of an element) to append this widget's element to. Can be configured, or set once at
      * runtime. To access the element of a rendered widget, see [element](https://bryntum.com/products/grid/docs/api/Core/widget/Widget#property-element).
+     * <div class="note">When creating nested trees of widgets, this should only be used on the outermost widget.
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/TreeGrid#config-appendTo)
      */
     appendTo? : HTMLElement|string
     /**
@@ -354,10 +356,14 @@ export type BryntumTreeGridProps = {
     inputFieldAlign? : 'start'|'end'
     /**
      * Element (or element id) to insert this widget before. If provided, [appendTo](https://bryntum.com/products/grid/docs/api/Core/widget/Widget#config-appendTo) config is ignored.
+     * <div class="note">When creating nested trees of widgets, this should only be used on the outermost widget.
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/TreeGrid#config-insertBefore)
      */
     insertBefore? : HTMLElement|string
     /**
      * Element (or element id) to append this widget element to, as a first child. If provided, [appendTo](https://bryntum.com/products/grid/docs/api/Core/widget/Widget#config-appendTo) config is ignored.
+     * <div class="note">When creating nested trees of widgets, this should only be used on the outermost widget.
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/TreeGrid#config-insertFirst)
      */
     insertFirst? : HTMLElement|string
     /**
@@ -370,7 +376,7 @@ export type BryntumTreeGridProps = {
      */
     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/Grid/view/TreeGrid#config-labelWidth)
      */
     labelWidth? : number|null
@@ -2295,6 +2301,7 @@ export class BryntumTreeGrid extends React.Component<BryntumTreeGridProps> {
     ];
 
     static propertyNames = [
+        'centered',
         'originalStore',
         'parent',
         'selectedCell',

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);
 }
 
 /**