gridstack 11.5.1 → 12.1.0

package/dist/gridstack.js

@@ -1,5 +1,5 @@
 /*!
- * GridStack 11.5.1
+ * GridStack 12.1.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2024  Alain Dumesny
@@ -178,41 +178,19 @@ class GridStack {
         if (opts.alwaysShowResizeHandle !== undefined) {
             opts._alwaysShowResizeHandle = opts.alwaysShowResizeHandle;
         }
-        let bk = opts.columnOpts?.breakpoints;
-        // LEGACY: oneColumnMode stuff changed in v10.x - check if user explicitly set something to convert over
-        const oldOpts = opts;
-        if (oldOpts.oneColumnModeDomSort) {
-            delete oldOpts.oneColumnModeDomSort;
-            console.log('warning: Gridstack oneColumnModeDomSort no longer supported. Use GridStackOptions.columnOpts instead.');
-        }
-        if (oldOpts.oneColumnSize || oldOpts.disableOneColumnMode === false) {
-            const oneSize = oldOpts.oneColumnSize || 768;
-            delete oldOpts.oneColumnSize;
-            delete oldOpts.disableOneColumnMode;
-            opts.columnOpts = opts.columnOpts || {};
-            bk = opts.columnOpts.breakpoints = opts.columnOpts.breakpoints || [];
-            let oneColumn = bk.find(b => b.c === 1);
-            if (!oneColumn) {
-                oneColumn = { c: 1, w: oneSize };
-                bk.push(oneColumn, { c: 12, w: oneSize + 1 });
-            }
-            else
-                oneColumn.w = oneSize;
-        }
-        //...end LEGACY
         // cleanup responsive opts (must have columnWidth | breakpoints) then sort breakpoints by size (so we can match during resize)
         const resp = opts.columnOpts;
         if (resp) {
-            if (!resp.columnWidth && !resp.breakpoints?.length) {
+            const bk = resp.breakpoints;
+            if (!resp.columnWidth && !bk?.length) {
                 delete opts.columnOpts;
-                bk = undefined;
             }
             else {
                 resp.columnMax = resp.columnMax || 12;
+                if (bk?.length > 1)
+                    bk.sort((a, b) => (b.w || 0) - (a.w || 0));
             }
         }
-        if (bk?.length > 1)
-            bk.sort((a, b) => (b.w || 0) - (a.w || 0));
         // elements DOM attributes override any passed options (like CSS style) - merge the two together
         const defaults = {
             ...Utils.cloneDeep(gridDefaults),
@@ -234,9 +212,9 @@ class GridStack {
         }
         opts = Utils.defaults(opts, defaults);
         this._initMargin(); // part of settings defaults...
-        // Now check if we're loading into 1 column mode FIRST so we don't do un-necessary work (like cellHeight = width / 12 then go 1 column)
+        // Now check if we're loading into !12 column mode FIRST so we don't do un-necessary work (like cellHeight = width / 12 then go 1 column)
         this.checkDynamicColumn();
-        this.el.classList.add('gs-' + opts.column);
+        this._updateColumnVar(opts);
         if (opts.rtl === 'auto') {
             opts.rtl = (el.style.direction === 'rtl');
         }
@@ -255,7 +233,7 @@ class GridStack {
         this._isAutoCellHeight = (opts.cellHeight === 'auto');
         if (this._isAutoCellHeight || opts.cellHeight === 'initial') {
             // make the cell content square initially (will use resize/column event to keep it square)
-            this.cellHeight(undefined, false);
+            this.cellHeight(undefined);
         }
         else {
             // append unit if any are set
@@ -263,14 +241,14 @@ class GridStack {
                 opts.cellHeight = opts.cellHeight + opts.cellHeightUnit;
                 delete opts.cellHeightUnit;
             }
-            this.cellHeight(opts.cellHeight, false);
+            const val = opts.cellHeight;
+            delete opts.cellHeight; // force initial cellHeight() call to set the value
+            this.cellHeight(val);
         }
         // see if we need to adjust auto-hide
         if (opts.alwaysShowResizeHandle === 'mobile') {
             opts.alwaysShowResizeHandle = isTouch;
         }
-        this._styleSheetClass = 'gs-id-' + GridStackEngine._idSeq++;
-        this.el.classList.add(this._styleSheetClass);
         this._setStaticClass();
         const engineClass = opts.engineClass || GridStack.engineClass || GridStackEngine;
         this.engine = new engineClass({
@@ -278,8 +256,6 @@ class GridStack {
             float: opts.float,
             maxRow: opts.maxRow,
             onChange: (cbNodes) => {
-                let maxH = 0;
-                this.engine.nodes.forEach(n => { maxH = Math.max(maxH, n.y + n.h); });
                 cbNodes.forEach(n => {
                     const el = n.el;
                     if (!el)
@@ -293,11 +269,9 @@ class GridStack {
                         this._writePosAttr(el, n);
                     }
                 });
-                this._updateStyles(false, maxH); // false = don't recreate, just append if need be
+                this._updateContainerHeight();
             }
         });
-        // create initial global styles BEFORE loading children so resizeToContent margin can be calculated correctly
-        this._updateStyles(false, 0);
         if (opts.auto) {
             this.batchUpdate(); // prevent in between re-layout #1535 TODO: this only set float=true, need to prevent collision check...
             this.engine._loading = true; // loading collision check
@@ -312,7 +286,6 @@ class GridStack {
             if (children.length)
                 this.load(children); // don't load empty
         }
-        // if (this.engine.nodes.length) this._updateStyles(); // update based on # of children. done in engine onChange CB
         this.setAnimation();
         // dynamic grids require pausing during drag to detect over to nest vs push
         if (opts.subGridDynamic && !DDManager.pauseDrag)
@@ -323,6 +296,11 @@ class GridStack {
         this._setupAcceptWidget();
         this._updateResizeEvent();
     }
+    _updateColumnVar(opts = this.opts) {
+        this.el.classList.add('gs-' + opts.column);
+        if (typeof opts.column === 'number')
+            this.el.style.setProperty('--gs-column-width', `${100 / opts.column}%`);
+    }
     /**
      * add a new widget and returns it.
      *
@@ -604,8 +582,18 @@ class GridStack {
         items.forEach(n => { maxColumn = Math.max(maxColumn, (n.x || 0) + n.w); });
         if (maxColumn > this.engine.defaultColumn)
             this.engine.defaultColumn = maxColumn;
-        if (maxColumn > column)
-            this.engine.cacheLayout(items, maxColumn, true);
+        if (maxColumn > column) {
+            // if we're loading (from empty) into a smaller column, check for special responsive layout
+            if (this.engine.nodes.length === 0 && this.responseLayout) {
+                this.engine.nodes = items;
+                this.engine.columnChanged(maxColumn, column, this.responseLayout);
+                items = this.engine.nodes;
+                this.engine.nodes = [];
+                delete this.responseLayout;
+            }
+            else
+                this.engine.cacheLayout(items, maxColumn, true);
+        }
         // if given a different callback, temporally set it as global option so creating will use it
         const prevCB = GridStack.addRemoveCB;
         if (typeof (addRemove) === 'function')
@@ -738,16 +726,15 @@ class GridStack {
      *
      * @param val the cell height. If not passed (undefined), cells content will be made square (match width minus margin),
      * if pass 0 the CSS will be generated by the application instead.
-     * @param update (Optional) if false, styles will not be updated
      *
      * @example
      * grid.cellHeight(100); // same as 100px
      * grid.cellHeight('70px');
      * grid.cellHeight(grid.cellWidth() * 1.2);
      */
-    cellHeight(val, update = true) {
+    cellHeight(val) {
         // if not called internally, check if we're changing mode
-        if (update && val !== undefined) {
+        if (val !== undefined) {
             if (this._isAutoCellHeight !== (val === 'auto')) {
                 this._isAutoCellHeight = (val === 'auto');
                 this._updateResizeEvent();
@@ -768,10 +755,10 @@ class GridStack {
         }
         this.opts.cellHeightUnit = data.unit;
         this.opts.cellHeight = data.h;
+        // finally update var and container
+        this.el.style.setProperty('--gs-cell-height', `${this.opts.cellHeight}${this.opts.cellHeightUnit}`);
+        this._updateContainerHeight();
         this.resizeToContentCheck();
-        if (update) {
-            this._updateStyles(true); // true = force re-create for current # of rows
-        }
         return this;
     }
     /** Gets current cell width. */
@@ -825,8 +812,6 @@ class GridStack {
     /**
      * set the number of columns in the grid. Will update existing widgets to conform to new number of columns,
      * as well as cache the original layout so you can revert back to previous positions without loss.
-     * Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [2-11],
-     * else you will need to generate correct CSS (see https://github.com/gridstack/gridstack.js#change-grid-columns)
      * @param column - Integer > 0 (default 12).
      * @param layout specify the type of re-layout that will happen (position, size, etc...).
      * Note: items will never be outside of the current column boundaries. default ('moveScale'). Ignored for 1 column
@@ -836,15 +821,16 @@ class GridStack {
             return this;
         const oldColumn = this.getColumn();
         this.opts.column = column;
-        if (!this.engine)
-            return this; // called in constructor, noting else to do
+        if (!this.engine) {
+            // called in constructor, noting else to do but remember that breakpoint layout
+            this.responseLayout = layout;
+            return this;
+        }
         this.engine.column = column;
         this.el.classList.remove('gs-' + oldColumn);
-        this.el.classList.add('gs-' + column);
-        // update the items now, checking if we have a custom children layout
-        /*const newChildren = this.opts.columnOpts?.breakpoints?.find(r => r.c === column)?.children;
-        if (newChildren) this.load(newChildren);
-        else*/ this.engine.columnChanged(oldColumn, column, layout);
+        this._updateColumnVar();
+        // update the items now
+        this.engine.columnChanged(oldColumn, column, layout);
         if (this._isAutoCellHeight)
             this.cellHeight();
         this.resizeToContentCheck(true); // wait for width resizing
@@ -878,14 +864,13 @@ class GridStack {
         this.setAnimation(false);
         if (!removeDOM) {
             this.removeAll(removeDOM);
-            this.el.classList.remove(this._styleSheetClass);
             this.el.removeAttribute('gs-current-row');
         }
         else {
             this.el.parentNode.removeChild(this.el);
         }
-        this._removeStylesheet();
-        delete this.parentGridNode?.subGrid;
+        if (this.parentGridNode)
+            delete this.parentGridNode.subGrid;
         delete this.parentGridNode;
         delete this.opts;
         delete this._placeholder?.gridstackNode;
@@ -967,8 +952,8 @@ class GridStack {
      */
     makeWidget(els, options) {
         const el = GridStack.getElement(els);
-        if (!el)
-            return;
+        if (!el || el.gridstackNode)
+            return el;
         if (!el.parentElement)
             this.el.appendChild(el);
         this._prepareElement(el, true, options);
@@ -1120,6 +1105,7 @@ class GridStack {
         else {
             this.el.classList.remove('grid-stack-animate');
         }
+        this.opts.animate = doAnimate;
         return this;
     }
     /** @internal */
@@ -1154,23 +1140,33 @@ class GridStack {
      */
     updateOptions(o) {
         const opts = this.opts;
-        if (o.acceptWidgets !== undefined)
+        if (o === opts)
+            return this; // nothing to do
+        if (o.acceptWidgets !== undefined) {
+            opts.acceptWidgets = o.acceptWidgets;
             this._setupAcceptWidget();
-        if (o.animate !== undefined)
-            this.setAnimation();
-        if (o.cellHeight) {
-            this.cellHeight(o.cellHeight, true);
-            delete o.cellHeight;
         }
-        if (o.class && o.class !== opts.class) {
+        if (o.animate !== undefined)
+            this.setAnimation(o.animate);
+        if (o.cellHeight)
+            this.cellHeight(o.cellHeight);
+        if (o.class !== undefined && o.class !== opts.class) {
             if (opts.class)
                 this.el.classList.remove(opts.class);
-            this.el.classList.add(o.class);
+            if (o.class)
+                this.el.classList.add(o.class);
+        }
+        // responsive column take over actual count (keep what we have now)
+        if (o.columnOpts) {
+            this.opts.columnOpts = o.columnOpts;
+            this.checkDynamicColumn();
         }
-        if (typeof (o.column) === 'number' && !o.columnOpts) {
+        else if (o.columnOpts === null && this.opts.columnOpts) {
+            delete this.opts.columnOpts;
+            this._updateResizeEvent();
+        }
+        else if (typeof (o.column) === 'number')
             this.column(o.column);
-            delete o.column;
-        } // responsive column take over actual count
         if (o.margin !== undefined)
             this.margin(o.margin);
         if (o.staticGrid !== undefined)
@@ -1182,16 +1178,18 @@ class GridStack {
         if (o.float !== undefined)
             this.float(o.float);
         if (o.row !== undefined) {
-            opts.minRow = opts.maxRow = o.row;
+            opts.minRow = opts.maxRow = opts.row = o.row;
         }
-        if (o.children?.length) {
-            this.load(o.children);
-            delete o.children;
+        else {
+            if (opts.minRow !== undefined)
+                opts.minRow = o.minRow;
+            if (opts.maxRow !== undefined)
+                opts.maxRow = o.maxRow;
         }
+        if (o.children?.length)
+            this.load(o.children);
         // TBD if we have a real need for these (more complex code)
         // alwaysShowResizeHandle, draggable, handle, handleClass, itemClass, layout, placeholderClass, placeholderText, resizable, removable, row,...
-        // rest are just copied over...
-        this.opts = { ...this.opts, ...o };
         return this;
     }
     /**
@@ -1230,8 +1228,7 @@ class GridStack {
                     // restore any sub-grid back
                     if (n.subGrid?.el) {
                         itemContent.appendChild(n.subGrid.el);
-                        if (!n.subGrid.opts.styleInHead)
-                            n.subGrid._updateStyles(true); // force create
+                        n.subGrid._updateContainerHeight();
                     }
                 }
                 delete w.content;
@@ -1316,7 +1313,7 @@ class GridStack {
             // sub-grid - use their actual row count * their cell height, BUT append any content outside of the grid (eg: above text)
             wantedH = n.subGrid.getRow() * n.subGrid.getCellHeight(true);
             const subRec = n.subGrid.el.getBoundingClientRect();
-            const parentRec = n.subGrid.el.parentElement.getBoundingClientRect();
+            const parentRec = el.getBoundingClientRect();
             wantedH += subRec.top - parentRec.top;
         }
         else if (n.subGridOpts?.children?.length) {
@@ -1390,7 +1387,7 @@ class GridStack {
      */
     margin(value) {
         const isMultiValue = (typeof value === 'string' && value.split(' ').length > 1);
-        // check if we can skip re-creating our CSS file... won't check if multi values (too much hassle)
+        // check if we can skip... won't check if multi values (too much hassle)
         if (!isMultiValue) {
             const data = Utils.parseHeight(value);
             if (this.opts.marginUnit === data.unit && this.opts.margin === data.h)
@@ -1400,7 +1397,6 @@ class GridStack {
         this.opts.margin = value;
         this.opts.marginTop = this.opts.marginBottom = this.opts.marginLeft = this.opts.marginRight = undefined;
         this._initMargin();
-        this._updateStyles(true); // true = force re-create
         return this;
     }
     /** returns current margin number value (undefined if 4 sides don't match) */
@@ -1472,75 +1468,12 @@ class GridStack {
     /** @internal */
     _triggerEvent(type, data) {
         const event = data ? new CustomEvent(type, { bubbles: false, detail: data }) : new Event(type);
-        this.el.dispatchEvent(event);
-        return this;
-    }
-    /** @internal called to delete the current dynamic style sheet used for our layout */
-    _removeStylesheet() {
-        if (this._styles) {
-            const styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode;
-            Utils.removeStylesheet(this._styleSheetClass, styleLocation);
-            delete this._styles;
-        }
-        return this;
-    }
-    /** @internal updated/create the CSS styles for row based layout and initial margin setting */
-    _updateStyles(forceUpdate = false, maxH) {
-        // call to delete existing one if we change cellHeight / margin
-        if (forceUpdate) {
-            this._removeStylesheet();
-        }
-        if (maxH === undefined)
-            maxH = this.getRow();
-        this._updateContainerHeight();
-        // if user is telling us they will handle the CSS themselves by setting heights to 0. Do we need this opts really ??
-        if (this.opts.cellHeight === 0) {
-            return this;
-        }
-        const cellHeight = this.opts.cellHeight;
-        const cellHeightUnit = this.opts.cellHeightUnit;
-        const prefix = `.${this._styleSheetClass} > .${this.opts.itemClass}`;
-        // create one as needed
-        if (!this._styles) {
-            // insert style to parent (instead of 'head' by default) to support WebComponent
-            const styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode;
-            this._styles = Utils.createStylesheet(this._styleSheetClass, styleLocation, {
-                nonce: this.opts.nonce,
-            });
-            if (!this._styles)
-                return this;
-            this._styles._max = 0;
-            // these are done once only
-            Utils.addCSSRule(this._styles, prefix, `height: ${cellHeight}${cellHeightUnit}`);
-            // content margins
-            const top = this.opts.marginTop + this.opts.marginUnit;
-            const bottom = this.opts.marginBottom + this.opts.marginUnit;
-            const right = this.opts.marginRight + this.opts.marginUnit;
-            const left = this.opts.marginLeft + this.opts.marginUnit;
-            const content = `${prefix} > .grid-stack-item-content`;
-            const placeholder = `.${this._styleSheetClass} > .grid-stack-placeholder > .placeholder-content`;
-            Utils.addCSSRule(this._styles, content, `top: ${top}; right: ${right}; bottom: ${bottom}; left: ${left};`);
-            Utils.addCSSRule(this._styles, placeholder, `top: ${top}; right: ${right}; bottom: ${bottom}; left: ${left};`);
-            // resize handles offset (to match margin)
-            Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-n`, `top: ${top};`);
-            Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-s`, `bottom: ${bottom}`);
-            Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-ne`, `right: ${right}; top: ${top}`);
-            Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-e`, `right: ${right}`);
-            Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-se`, `right: ${right}; bottom: ${bottom}`);
-            Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-nw`, `left: ${left}; top: ${top}`);
-            Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-w`, `left: ${left}`);
-            Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-sw`, `left: ${left}; bottom: ${bottom}`);
-        }
-        // now update the height specific fields
-        maxH = maxH || this._styles._max;
-        if (maxH > this._styles._max) {
-            const getHeight = (rows) => (cellHeight * rows) + cellHeightUnit;
-            for (let i = this._styles._max + 1; i <= maxH; i++) { // start at 1
-                Utils.addCSSRule(this._styles, `${prefix}[gs-y="${i}"]`, `top: ${getHeight(i)}`);
-                Utils.addCSSRule(this._styles, `${prefix}[gs-h="${i + 1}"]`, `height: ${getHeight(i + 1)}`); // start at 2
-            }
-            this._styles._max = maxH;
-        }
+        // check if we're nested, and if so call the outermost grid to trigger the event
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        let grid = this;
+        while (grid.parentGridNode)
+            grid = grid.parentGridNode.grid;
+        grid.el.dispatchEvent(event);
         return this;
     }
     /** @internal */
@@ -1594,14 +1527,19 @@ class GridStack {
             this.prepareDragDrop(node.el);
         return this;
     }
-    /** @internal call to write position x,y,w,h attributes back to element */
+    /** @internal write position CSS vars and x,y,w,h attributes (not used for CSS but by users) back to element */
     _writePosAttr(el, n) {
-        if (n.x !== undefined && n.x !== null) {
-            el.setAttribute('gs-x', String(n.x));
-        }
-        if (n.y !== undefined && n.y !== null) {
-            el.setAttribute('gs-y', String(n.y));
-        }
+        // Avoid overwriting the inline style of the element during drag/resize, but always update the placeholder
+        if ((!n._moving && !n._resizing) || this._placeholder === el) {
+            // width/height:1 x/y:0 is set by default in the main CSS, so no need to set inlined vars
+            el.style.top = n.y ? (n.y === 1 ? `var(--gs-cell-height)` : `calc(${n.y} * var(--gs-cell-height))`) : null;
+            el.style.left = n.x ? (n.x === 1 ? `var(--gs-column-width)` : `calc(${n.x} * var(--gs-column-width))`) : null;
+            el.style.width = n.w > 1 ? `calc(${n.w} * var(--gs-column-width))` : null;
+            el.style.height = n.h > 1 ? `calc(${n.h} * var(--gs-cell-height))` : null;
+        }
+        // NOTE: those are technically not needed anymore (v12+) as we have CSS vars for everything, but some users depends on them to render item size using CSS
+        n.x > 0 ? el.setAttribute('gs-x', String(n.x)) : el.removeAttribute('gs-x');
+        n.y > 0 ? el.setAttribute('gs-y', String(n.y)) : el.removeAttribute('gs-y');
         n.w > 1 ? el.setAttribute('gs-w', String(n.w)) : el.removeAttribute('gs-w');
         n.h > 1 ? el.setAttribute('gs-h', String(n.h)) : el.removeAttribute('gs-h');
         return this;
@@ -1749,7 +1687,9 @@ class GridStack {
                 if (Utils.shouldSizeToContent(n))
                     this.resizeToContentCBCheck(n.el);
             });
+            this._ignoreLayoutsNodeChange = true; // loop through each node will set/reset around each move, so set it here again
             this.batchUpdate(false);
+            this._ignoreLayoutsNodeChange = false;
         }
         // call this regardless of shouldSizeToContent because widget might need to stretch to take available space after a resize
         if (this._gsEventHandler['resizecontent'])
@@ -1807,42 +1747,27 @@ class GridStack {
             margin = this.opts.margin = data.h;
         }
         // see if top/bottom/left/right need to be set as well
-        if (this.opts.marginTop === undefined) {
-            this.opts.marginTop = margin;
-        }
-        else {
-            data = Utils.parseHeight(this.opts.marginTop);
-            this.opts.marginTop = data.h;
-            delete this.opts.margin;
-        }
-        if (this.opts.marginBottom === undefined) {
-            this.opts.marginBottom = margin;
-        }
-        else {
-            data = Utils.parseHeight(this.opts.marginBottom);
-            this.opts.marginBottom = data.h;
-            delete this.opts.margin;
-        }
-        if (this.opts.marginRight === undefined) {
-            this.opts.marginRight = margin;
-        }
-        else {
-            data = Utils.parseHeight(this.opts.marginRight);
-            this.opts.marginRight = data.h;
-            delete this.opts.margin;
-        }
-        if (this.opts.marginLeft === undefined) {
-            this.opts.marginLeft = margin;
-        }
-        else {
-            data = Utils.parseHeight(this.opts.marginLeft);
-            this.opts.marginLeft = data.h;
-            delete this.opts.margin;
-        }
+        const keys = ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'];
+        keys.forEach(k => {
+            if (this.opts[k] === undefined) {
+                this.opts[k] = margin;
+            }
+            else {
+                data = Utils.parseHeight(this.opts[k]);
+                this.opts[k] = data.h;
+                delete this.opts.margin;
+            }
+        });
         this.opts.marginUnit = data.unit; // in case side were spelled out, use those units instead...
         if (this.opts.marginTop === this.opts.marginBottom && this.opts.marginLeft === this.opts.marginRight && this.opts.marginTop === this.opts.marginRight) {
             this.opts.margin = this.opts.marginTop; // makes it easier to check for no-ops in setMargin()
         }
+        // finally Update the CSS margin variables (inside the cell height) */
+        const style = this.el.style;
+        style.setProperty('--gs-item-margin-top', `${this.opts.marginTop}${this.opts.marginUnit}`);
+        style.setProperty('--gs-item-margin-bottom', `${this.opts.marginBottom}${this.opts.marginUnit}`);
+        style.setProperty('--gs-item-margin-right', `${this.opts.marginRight}${this.opts.marginUnit}`);
+        style.setProperty('--gs-item-margin-left', `${this.opts.marginLeft}${this.opts.marginUnit}`);
         return this;
     }
     /* ===========================================================================================
@@ -2252,8 +2177,6 @@ class GridStack {
                 this.resizeToContentCheck(false, node);
                 if (subGrid) {
                     subGrid.parentGridNode = node;
-                    if (!subGrid.opts.styleInHead)
-                        subGrid._updateStyles(true); // re-create sub-grid styles now that we've moved
                 }
                 this._updateContainerHeight();
             }
@@ -2328,9 +2251,7 @@ class GridStack {
             /** called when item starts moving/resizing */
             const onStartMoving = (event, ui) => {
                 // trigger any 'dragstart' / 'resizestart' manually
-                if (this._gsEventHandler[event.type]) {
-                    this._gsEventHandler[event.type](event, event.target);
-                }
+                this.triggerEvent(event, event.target);
                 cellWidth = this.cellWidth();
                 cellHeight = this.getCellHeight(true); // force pixels for calculations
                 this._onStartMoving(el, event, ui, node, cellWidth, cellHeight);
@@ -2344,6 +2265,7 @@ class GridStack {
                 this.placeholder.remove();
                 delete this.placeholder.gridstackNode;
                 delete node._moving;
+                delete node._resizing;
                 delete node._event;
                 delete node._lastTried;
                 const widthChanged = node.w !== node._orig.w;
@@ -2372,9 +2294,7 @@ class GridStack {
                         // move to new placeholder location
                         this._writePosAttr(target, node);
                     }
-                    if (this._gsEventHandler[event.type]) {
-                        this._gsEventHandler[event.type](event, target);
-                    }
+                    this.triggerEvent(event, target);
                 }
                 // @ts-ignore
                 this._extraDragRow = 0; // @ts-ignore
@@ -2436,6 +2356,7 @@ class GridStack {
         node._lastUiPosition = ui.position;
         node._prevYPix = ui.position.top;
         node._moving = (event.type === 'dragstart'); // 'dropover' are not initially moving so they can go exactly where they enter (will push stuff out of the way)
+        node._resizing = (event.type === 'resizestart');
         delete node._lastTried;
         if (event.type === 'dropover' && node._temporaryRemoved) {
             // console.log('engine.addNode x=' + node.x); // TEST
@@ -2538,9 +2459,17 @@ class GridStack {
             if (!node._sidebarOrig) {
                 this._writePosAttr(target, node);
             }
-            if (this._gsEventHandler[event.type]) {
-                this._gsEventHandler[event.type](event, target);
-            }
+            this.triggerEvent(event, target);
+        }
+    }
+    /** call given event callback on our main top-most grid (if we're nested) */
+    triggerEvent(event, target) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        let grid = this;
+        while (grid.parentGridNode)
+            grid = grid.parentGridNode.grid;
+        if (grid._gsEventHandler[event.type]) {
+            grid._gsEventHandler[event.type](event, target);
         }
     }
     /** @internal called when item leaving our area by either cursor dropout event
@@ -2596,6 +2525,6 @@ GridStack.resizeToContentParent = '.grid-stack-item-content';
 GridStack.Utils = Utils;
 /** scoping so users can call new GridStack.Engine(12) for example */
 GridStack.Engine = GridStackEngine;
-GridStack.GDRev = '11.5.1';
+GridStack.GDRev = '12.1.0';
 export { GridStack };
 //# sourceMappingURL=gridstack.js.map