gridstack 10.3.1 → 11.0.0

package/dist/gridstack.js

@@ -1,13 +1,13 @@
 /*!
- * GridStack 10.3.1
+ * GridStack 11.0.0
  * https://gridstackjs.com/
  *
- * Copyright (c) 2021-2022 Alain Dumesny
+ * Copyright (c) 2021-2024  Alain Dumesny
  * see root license https://github.com/gridstack/gridstack.js/tree/master/LICENSE
  */
 import { GridStackEngine } from './gridstack-engine';
 import { Utils, obsolete } from './utils';
-import { gridDefaults, dragInDefaultOptions } from './types';
+import { gridDefaults } from './types';
 /*
  * and include D&D by default
  * TODO: while we could generate a gridstack-static.js at smaller size - saves about 31k (41k -> 72k)
@@ -42,15 +42,15 @@ class GridStack {
      * @param elOrString element or CSS selector (first one used) to convert to a grid (default to '.grid-stack' class selector)
      *
      * @example
-     * let grid = GridStack.init();
+     * const grid = GridStack.init();
      *
      * Note: the HTMLElement (of type GridHTMLElement) will store a `gridstack: GridStack` value that can be retrieve later
-     * let grid = document.querySelector('.grid-stack').gridstack;
+     * const grid = document.querySelector('.grid-stack').gridstack;
      */
     static init(options = {}, elOrString = '.grid-stack') {
         if (typeof document === 'undefined')
             return null; // temp workaround SSR
-        let el = GridStack.getGridElement(elOrString);
+        const el = GridStack.getGridElement(elOrString);
         if (!el) {
             if (typeof elOrString === 'string') {
                 console.error('GridStack.initAll() no grid was found with selector "' + elOrString + '" - element missing or wrong selector ?' +
@@ -72,11 +72,11 @@ class GridStack {
      * @param selector elements selector to convert to grids (default to '.grid-stack' class selector)
      *
      * @example
-     * let grids = GridStack.initAll();
+     * const grids = GridStack.initAll();
      * grids.forEach(...)
      */
     static initAll(options = {}, selector = '.grid-stack') {
-        let grids = [];
+        const grids = [];
         if (typeof document === 'undefined')
             return grids; // temp workaround SSR
         GridStack.getGridElements(selector).forEach(el => {
@@ -118,14 +118,11 @@ class GridStack {
                 el = GridStack.addRemoveCB(parent, opt, true, true);
             }
             else {
-                let doc = document.implementation.createHTMLDocument(''); // IE needs a param
-                doc.body.innerHTML = `<div class="grid-stack ${opt.class || ''}"></div>`;
-                el = doc.body.children[0];
-                parent.appendChild(el);
+                el = Utils.createDiv(['grid-stack', opt.class], parent);
             }
         }
         // create grid class and load any children
-        let grid = GridStack.init(opt, el);
+        const grid = GridStack.init(opt, el);
         return grid;
     }
     /** call this method to register your engine instead of the default one.
@@ -138,10 +135,10 @@ class GridStack {
     /** @internal create placeholder DIV as needed */
     get placeholder() {
         if (!this._placeholder) {
-            let placeholderChild = document.createElement('div'); // child so padding match item-content
+            const placeholderChild = document.createElement('div'); // child so padding match item-content
             placeholderChild.className = 'placeholder-content';
             if (this.opts.placeholderText) {
-                placeholderChild.innerHTML = this.opts.placeholderText;
+                placeholderChild.textContent = this.opts.placeholderText;
             }
             this._placeholder = document.createElement('div');
             this._placeholder.classList.add(this.opts.placeholderClass, gridDefaults.itemClass, this.opts.itemClass);
@@ -173,7 +170,7 @@ class GridStack {
             opts.minRow = opts.maxRow = opts.row;
             delete opts.row;
         }
-        let rowAttr = Utils.toNumber(el.getAttribute('gs-row'));
+        const rowAttr = Utils.toNumber(el.getAttribute('gs-row'));
         // flag only valid in sub-grids (handled by parent, not here)
         if (opts.column === 'auto') {
             delete opts.column;
@@ -218,7 +215,7 @@ class GridStack {
         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
-        let defaults = {
+        const defaults = {
             ...Utils.cloneDeep(gridDefaults),
             column: Utils.toNumber(el.getAttribute('gs-column')) || gridDefaults.column,
             minRow: rowAttr ? rowAttr : Utils.toNumber(el.getAttribute('gs-min-row')) || gridDefaults.minRow,
@@ -247,13 +244,13 @@ class GridStack {
             this.el.classList.add('grid-stack-rtl');
         }
         // check if we're been nested, and if so update our style and keep pointer around (used during save)
-        const grandParent = this.el.parentElement?.parentElement;
-        let parentGridItem = grandParent?.classList.contains(gridDefaults.itemClass) ? grandParent.gridstackNode : undefined;
-        if (parentGridItem) {
-            parentGridItem.subGrid = this;
-            this.parentGridItem = parentGridItem;
+        const parentGridItem = this.el.closest('.' + gridDefaults.itemClass);
+        const parentNode = parentGridItem?.gridstackNode;
+        if (parentNode) {
+            parentNode.subGrid = this;
+            this.parentGridNode = parentNode;
             this.el.classList.add('grid-stack-nested');
-            parentGridItem.el.classList.add('grid-stack-sub-grid');
+            parentNode.el.classList.add('grid-stack-sub-grid');
         }
         this._isAutoCellHeight = (opts.cellHeight === 'auto');
         if (this._isAutoCellHeight || opts.cellHeight === 'initial') {
@@ -275,7 +272,7 @@ class GridStack {
         this._styleSheetClass = 'gs-id-' + GridStackEngine._idSeq++;
         this.el.classList.add(this._styleSheetClass);
         this._setStaticClass();
-        let engineClass = opts.engineClass || GridStack.engineClass || GridStackEngine;
+        const engineClass = opts.engineClass || GridStack.engineClass || GridStackEngine;
         this.engine = new engineClass({
             column: this.getColumn(),
             float: opts.float,
@@ -284,7 +281,7 @@ class GridStack {
                 let maxH = 0;
                 this.engine.nodes.forEach(n => { maxH = Math.max(maxH, n.y + n.h); });
                 cbNodes.forEach(n => {
-                    let el = n.el;
+                    const el = n.el;
                     if (!el)
                         return;
                     if (n._removeDOM) {
@@ -331,44 +328,35 @@ class GridStack {
      *
      * Widget will be always placed even if result height is more than actual grid height.
      * You need to use `willItFit()` before calling addWidget for additional check.
-     * See also `makeWidget()`.
+     * See also `makeWidget(el)` for DOM element.
      *
      * @example
-     * let grid = GridStack.init();
+     * const grid = GridStack.init();
      * grid.addWidget({w: 3, content: 'hello'});
-     * grid.addWidget('<div class="grid-stack-item"><div class="grid-stack-item-content">hello</div></div>', {w: 3});
      *
-     * @param el  GridStackWidget (which can have content string as well), html element, or string definition to add
+     * @param w GridStackWidget definition. used MakeWidget(el) if you have dom element instead.
      * @param options widget position/size options (optional, and ignore if first param is already option) - see GridStackWidget
      */
-    addWidget(els, options) {
-        function isGridStackWidget(w) {
-            return w.el !== undefined || w.x !== undefined || w.y !== undefined || w.w !== undefined || w.h !== undefined || w.content !== undefined ? true : false;
+    addWidget(w) {
+        if (typeof w === 'string') {
+            console.error('V11: GridStack.addWidget() does not support string anymore. see #2736');
+            return;
+        }
+        if (w.ELEMENT_NODE) {
+            console.error('V11: GridStack.addWidget() does not support HTMLElement anymore. use makeWidget()');
+            return this.makeWidget(w);
         }
         let el;
-        let node;
-        if (typeof els === 'string') {
-            let doc = document.implementation.createHTMLDocument(''); // IE needs a param
-            doc.body.innerHTML = els;
-            el = doc.body.children[0];
+        let node = w;
+        node.grid = this;
+        if (node?.el) {
+            el = node.el; // re-use element stored in the node
         }
-        else if (arguments.length === 0 || arguments.length === 1 && isGridStackWidget(els)) {
-            node = options = els;
-            if (node?.el) {
-                el = node.el; // re-use element stored in the node
-            }
-            else if (GridStack.addRemoveCB) {
-                el = GridStack.addRemoveCB(this.el, options, true, false);
-            }
-            else {
-                let content = options?.content || '';
-                let doc = document.implementation.createHTMLDocument(''); // IE needs a param
-                doc.body.innerHTML = `<div class="grid-stack-item ${this.opts.itemClass || ''}"><div class="grid-stack-item-content">${content}</div></div>`;
-                el = doc.body.children[0];
-            }
+        else if (GridStack.addRemoveCB) {
+            el = GridStack.addRemoveCB(this.el, w, true, false);
         }
         else {
-            el = els;
+            el = Utils.createWidgetDivs(this.opts.itemClass, node);
         }
         if (!el)
             return;
@@ -379,13 +367,12 @@ class GridStack {
         // Tempting to initialize the passed in opt with default and valid values, but this break knockout demos
         // as the actual value are filled in when _prepareElement() calls el.getAttribute('gs-xyz') before adding the node.
         // So make sure we load any DOM attributes that are not specified in passed in options (which override)
-        let domAttr = this._readAttr(el);
-        options = Utils.cloneDeep(options) || {}; // make a copy before we modify in case caller re-uses it
-        Utils.defaults(options, domAttr);
-        node = this.engine.prepareNode(options);
-        this._writeAttr(el, options);
+        const domAttr = this._readAttr(el);
+        Utils.defaults(w, domAttr);
+        this.engine.prepareNode(w);
+        this._writeAttr(el, w);
         this.el.appendChild(el);
-        this.makeWidget(el, options);
+        this.makeWidget(el, w);
         return el;
     }
     /**
@@ -409,7 +396,7 @@ class GridStack {
         let grid = this;
         while (grid && !subGridTemplate) {
             subGridTemplate = grid.opts?.subGridOpts;
-            grid = grid.parentGridItem?.grid;
+            grid = grid.parentGridNode?.grid;
         }
         //... and set the create options
         ops = Utils.cloneDeep({ ...(subGridTemplate || {}), children: undefined, ...(ops || node.subGridOpts || {}) });
@@ -438,33 +425,29 @@ class GridStack {
                 newItem = GridStack.addRemoveCB(this.el, newItemOpt, true, false);
             }
             else {
-                let doc = document.implementation.createHTMLDocument(''); // IE needs a param
-                doc.body.innerHTML = `<div class="grid-stack-item"></div>`;
-                newItem = doc.body.children[0];
+                newItem = Utils.createDiv(['grid-stack-item']);
                 newItem.appendChild(content);
-                doc.body.innerHTML = `<div class="grid-stack-item-content"></div>`;
-                content = doc.body.children[0];
-                node.el.appendChild(content);
+                content = Utils.createDiv(['grid-stack-item-content'], node.el);
             }
             this._prepareDragDropByNode(node); // ... and restore original D&D
         }
         // if we're adding an additional item, make the container large enough to have them both
         if (nodeToAdd) {
-            let w = autoColumn ? ops.column : node.w;
-            let h = node.h + nodeToAdd.h;
-            let style = node.el.style;
+            const w = autoColumn ? ops.column : node.w;
+            const h = node.h + nodeToAdd.h;
+            const style = node.el.style;
             style.transition = 'none'; // show up instantly so we don't see scrollbar with nodeToAdd
             this.update(node.el, { w, h });
             setTimeout(() => style.transition = null); // recover animation
         }
-        let subGrid = node.subGrid = GridStack.addGrid(content, ops);
+        const subGrid = node.subGrid = GridStack.addGrid(content, ops);
         if (nodeToAdd?._moving)
             subGrid._isTemp = true; // prevent re-nesting as we add over
         if (autoColumn)
             subGrid._autoColumn = true;
         // add the original content back as a child of hte newly created grid
         if (saveContent) {
-            subGrid.addWidget(newItem, newItemOpt);
+            subGrid.makeWidget(newItem, newItemOpt);
         }
         // now add any additional node
         if (nodeToAdd) {
@@ -473,7 +456,7 @@ class GridStack {
                 window.setTimeout(() => Utils.simulateMouseEvent(nodeToAdd._event, 'mouseenter', subGrid.el), 0);
             }
             else {
-                subGrid.addWidget(node.el, node);
+                subGrid.makeWidget(node.el, node);
             }
         }
         return subGrid;
@@ -483,21 +466,21 @@ class GridStack {
      * to the original grid-item. Also called to remove empty sub-grids when last item is dragged out (since re-creating is simple)
      */
     removeAsSubGrid(nodeThatRemoved) {
-        let pGrid = this.parentGridItem?.grid;
+        const pGrid = this.parentGridNode?.grid;
         if (!pGrid)
             return;
         pGrid.batchUpdate();
-        pGrid.removeWidget(this.parentGridItem.el, true, true);
+        pGrid.removeWidget(this.parentGridNode.el, true, true);
         this.engine.nodes.forEach(n => {
             // migrate any children over and offsetting by our location
-            n.x += this.parentGridItem.x;
-            n.y += this.parentGridItem.y;
-            pGrid.addWidget(n.el, n);
+            n.x += this.parentGridNode.x;
+            n.y += this.parentGridNode.y;
+            pGrid.makeWidget(n.el, n);
         });
         pGrid.batchUpdate(false);
-        if (this.parentGridItem)
-            delete this.parentGridItem.subGrid;
-        delete this.parentGridItem;
+        if (this.parentGridNode)
+            delete this.parentGridNode.subGrid;
+        delete this.parentGridNode;
         // create an artificial event for the original grid now that this one is gone (got a leave, but won't get enter)
         if (nodeThatRemoved) {
             window.setTimeout(() => Utils.simulateMouseEvent(nodeThatRemoved._event, 'mouseenter', pGrid.el), 0);
@@ -514,12 +497,12 @@ class GridStack {
      */
     save(saveContent = true, saveGridOpt = false, saveCB = GridStack.saveCB) {
         // return copied GridStackWidget (with optionally .el) we can modify at will...
-        let list = this.engine.save(saveContent, saveCB);
+        const list = this.engine.save(saveContent, saveCB);
         // check for HTML content and nested grids
         list.forEach(n => {
             if (saveContent && n.el && !n.subGrid && !saveCB) { // sub-grid are saved differently, not plain content
-                let sub = n.el.querySelector('.grid-stack-item-content');
-                n.content = sub ? sub.innerHTML : undefined;
+                const itemContent = n.el.querySelector('.grid-stack-item-content');
+                n.content = itemContent?.innerHTML;
                 if (!n.content)
                     delete n.content;
             }
@@ -538,7 +521,7 @@ class GridStack {
         });
         // check if save entire grid options (needed for recursive) + children...
         if (saveGridOpt) {
-            let o = Utils.cloneDeep(this.opts);
+            const o = Utils.cloneDeep(this.opts);
             // delete default values that will be recreated on launch
             if (o.marginBottom === o.marginTop && o.marginRight === o.marginLeft && o.marginTop === o.marginRight) {
                 o.margin = o.marginTop;
@@ -599,7 +582,7 @@ class GridStack {
         const prevCB = GridStack.addRemoveCB;
         if (typeof (addRemove) === 'function')
             GridStack.addRemoveCB = addRemove;
-        let removed = [];
+        const removed = [];
         this.batchUpdate();
         // if we are loading from empty temporarily remove animation
         const blank = !this.engine.nodes.length;
@@ -607,11 +590,11 @@ class GridStack {
             this.setAnimation(false);
         // see if any items are missing from new layout and need to be removed first
         if (!blank && addRemove) {
-            let copyNodes = [...this.engine.nodes]; // don't loop through array you modify
+            const copyNodes = [...this.engine.nodes]; // don't loop through array you modify
             copyNodes.forEach(n => {
                 if (!n.id)
                     return;
-                let item = Utils.find(items, n.id);
+                const item = Utils.find(items, n.id);
                 if (!item) {
                     if (GridStack.addRemoveCB)
                         GridStack.addRemoveCB(this.el, n, false, false);
@@ -623,7 +606,7 @@ class GridStack {
         // now add/update the widgets - starting with removing items in the new layout we will reposition
         // to reduce collision and add no-coord ones at next available spot
         this.engine._loading = true; // help with collision
-        let updateNodes = [];
+        const updateNodes = [];
         this.engine.nodes = this.engine.nodes.filter(n => {
             if (Utils.find(items, n.id)) {
                 updateNodes.push(n);
@@ -632,7 +615,7 @@ class GridStack {
             return true;
         });
         items.forEach(w => {
-            let item = Utils.find(updateNodes, w.id);
+            const item = Utils.find(updateNodes, w.id);
             if (item) {
                 // if item sizes to content, re-use the exiting height so it's a better guess at the final size (same if width doesn't change)
                 if (Utils.shouldSizeToContent(item))
@@ -651,7 +634,7 @@ class GridStack {
                 }
                 this.update(item.el, w);
                 if (w.subGridOpts?.children) { // update any sub grid as well
-                    let sub = item.el.querySelector('.grid-stack');
+                    const sub = item.el.querySelector('.grid-stack');
                     if (sub && sub.gridstack) {
                         sub.gridstack.load(w.subGridOpts.children); // TODO: support updating grid options ?
                     }
@@ -709,13 +692,13 @@ class GridStack {
             return this.opts.cellHeight * (96 / 2.54) / 10;
         }
         // else get first cell height
-        let el = this.el.querySelector('.' + this.opts.itemClass);
+        const el = this.el.querySelector('.' + this.opts.itemClass);
         if (el) {
-            let h = Utils.toNumber(el.getAttribute('gs-h')) || 1; // since we don't write 1 anymore
+            const h = Utils.toNumber(el.getAttribute('gs-h')) || 1; // since we don't write 1 anymore
             return Math.round(el.offsetHeight / h);
         }
         // else do entire grid and # of rows (but doesn't work if min-height is the actual constrain)
-        let rows = parseInt(this.el.getAttribute('gs-current-row'));
+        const rows = parseInt(this.el.getAttribute('gs-current-row'));
         return rows ? Math.round(this.el.getBoundingClientRect().height / rows) : this.opts.cellHeight;
     }
     /**
@@ -745,11 +728,11 @@ class GridStack {
         }
         // make item content be square
         if (val === undefined) {
-            let marginDiff = -this.opts.marginRight - this.opts.marginLeft
+            const marginDiff = -this.opts.marginRight - this.opts.marginLeft
                 + this.opts.marginTop + this.opts.marginBottom;
             val = this.cellWidth() + marginDiff;
         }
-        let data = Utils.parseHeight(val);
+        const data = Utils.parseHeight(val);
         if (this.opts.cellHeightUnit === data.unit && this.opts.cellHeight === data.h) {
             return this;
         }
@@ -821,7 +804,7 @@ class GridStack {
     column(column, layout = 'moveScale') {
         if (!column || column < 1 || this.opts.column === column)
             return this;
-        let oldColumn = this.getColumn();
+        const oldColumn = this.getColumn();
         this.opts.column = column;
         if (!this.engine)
             return this; // called in constructor, noting else to do
@@ -870,9 +853,9 @@ class GridStack {
             this.el.parentNode.removeChild(this.el);
         }
         this._removeStylesheet();
-        if (this.parentGridItem)
-            delete this.parentGridItem.subGrid;
-        delete this.parentGridItem;
+        if (this.parentGridNode)
+            delete this.parentGridNode.subGrid;
+        delete this.parentGridNode;
         delete this.opts;
         delete this._placeholder;
         delete this.engine;
@@ -906,7 +889,7 @@ class GridStack {
      * Returns an object with properties `x` and `y` i.e. the column and row in the grid.
      */
     getCellFromPixel(position, useDocRelative = false) {
-        let box = this.el.getBoundingClientRect();
+        const box = this.el.getBoundingClientRect();
         // console.log(`getBoundingClientRect left: ${box.left} top: ${box.top} w: ${box.w} h: ${box.h}`)
         let containerPos;
         if (useDocRelative) {
@@ -917,10 +900,10 @@ class GridStack {
             containerPos = { top: this.el.offsetTop, left: this.el.offsetLeft };
             // console.log(`getCellFromPixel offsetTop: ${containerPos.left} offsetLeft: ${containerPos.top}`)
         }
-        let relativeLeft = position.left - containerPos.left;
-        let relativeTop = position.top - containerPos.top;
-        let columnWidth = (box.width / this.getColumn());
-        let rowHeight = (box.height / parseInt(this.el.getAttribute('gs-current-row')));
+        const relativeLeft = position.left - containerPos.left;
+        const relativeTop = position.top - containerPos.top;
+        const columnWidth = (box.width / this.getColumn());
+        const rowHeight = (box.height / parseInt(this.el.getAttribute('gs-current-row')));
         return { x: Math.floor(relativeLeft / columnWidth), y: Math.floor(relativeTop / rowHeight) };
     }
     /** returns the current number of rows, which will be at least `minRow` if set */
@@ -945,14 +928,18 @@ class GridStack {
      * @param options widget definition to use instead of reading attributes or using default sizing values
      *
      * @example
-     * let grid = GridStack.init();
+     * const grid = GridStack.init();
      * grid.el.appendChild('<div id="1" gs-w="3"></div>');
      * grid.el.appendChild('<div id="2"></div>');
      * grid.makeWidget('1');
      * grid.makeWidget('2', {w:2, content: 'hello'});
      */
     makeWidget(els, options) {
-        let el = GridStack.getElement(els);
+        const el = GridStack.getElement(els);
+        if (!el)
+            return;
+        if (!el.parentElement)
+            this.el.appendChild(el);
         this._prepareElement(el, true, options);
         const node = el.gridstackNode;
         this._updateContainerHeight();
@@ -973,18 +960,19 @@ class GridStack {
     on(name, callback) {
         // check for array of names being passed instead
         if (name.indexOf(' ') !== -1) {
-            let names = name.split(' ');
+            const names = name.split(' ');
             names.forEach(name => this.on(name, callback));
             return this;
         }
         // native CustomEvent handlers - cash the generic handlers so we can easily remove
         if (name === 'change' || name === 'added' || name === 'removed' || name === 'enable' || name === 'disable') {
-            let noData = (name === 'enable' || name === 'disable');
+            const noData = (name === 'enable' || name === 'disable');
             if (noData) {
                 this._gsEventHandler[name] = (event) => callback(event);
             }
             else {
-                this._gsEventHandler[name] = (event) => callback(event, event.detail);
+                this._gsEventHandler[name] = (event) => { if (event.detail)
+                    callback(event, event.detail); };
             }
             this.el.addEventListener(name, this._gsEventHandler[name]);
         }
@@ -1006,7 +994,7 @@ class GridStack {
     off(name) {
         // check for array of names being passed instead
         if (name.indexOf(' ') !== -1) {
-            let names = name.split(' ');
+            const names = name.split(' ');
             names.forEach(name => this.off(name));
             return this;
         }
@@ -1031,6 +1019,10 @@ class GridStack {
      * @param triggerEvent if `false` (quiet mode) element will not be added to removed list and no 'removed' callbacks will be called (Default? true).
      */
     removeWidget(els, removeDOM = true, triggerEvent = true) {
+        if (!els) {
+            console.error('Error: GridStack.removeWidget(undefined) called');
+            return this;
+        }
         GridStack.getElements(els).forEach(el => {
             if (el.parentElement && el.parentElement !== this.el)
                 return; // not our child!
@@ -1132,20 +1124,21 @@ class GridStack {
         if (arguments.length > 2) {
             console.warn('gridstack.ts: `update(el, x, y, w, h)` is deprecated. Use `update(el, {x, w, content, ...})`. It will be removed soon');
             // eslint-disable-next-line prefer-rest-params
-            let a = arguments, i = 1;
+            const a = arguments;
+            let i = 1;
             opt = { x: a[i++], y: a[i++], w: a[i++], h: a[i++] };
             return this.update(els, opt);
         }
         GridStack.getElements(els).forEach(el => {
-            let n = el?.gridstackNode;
+            const n = el?.gridstackNode;
             if (!n)
                 return;
-            let w = Utils.cloneDeep(opt); // make a copy we can modify in case they re-use it or multiple items
+            const w = Utils.cloneDeep(opt); // make a copy we can modify in case they re-use it or multiple items
             this.engine.nodeBoundFix(w);
             delete w.autoPosition;
             delete w.id;
             // move/resize widget if anything changed
-            let keys = ['x', 'y', 'w', 'h'];
+            const keys = ['x', 'y', 'w', 'h'];
             let m;
             if (keys.some(k => w[k] !== undefined && w[k] !== n[k])) {
                 m = {};
@@ -1161,8 +1154,8 @@ class GridStack {
             // check for content changing
             if (w.content !== undefined) {
                 const itemContent = el.querySelector('.grid-stack-item-content');
-                if (itemContent && itemContent.innerHTML !== w.content) {
-                    itemContent.innerHTML = w.content;
+                if (itemContent && itemContent.textContent !== w.content) {
+                    GridStack.renderCB(itemContent, w);
                     // restore any sub-grid back
                     if (n.subGrid?.el) {
                         itemContent.appendChild(n.subGrid.el);
@@ -1292,14 +1285,14 @@ class GridStack {
      */
     rotate(els, relative) {
         GridStack.getElements(els).forEach(el => {
-            let n = el.gridstackNode;
+            const n = el.gridstackNode;
             if (!Utils.canBeRotated(n))
                 return;
             const rot = { w: n.h, h: n.w, minH: n.minW, minW: n.minH, maxH: n.maxW, maxW: n.maxH };
             // if given an offset, adjust x/y by column/row bounds when user presses 'r' during dragging
             if (relative) {
-                let pivotX = relative.left > 0 ? Math.floor(relative.left / this.cellWidth()) : 0;
-                let pivotY = relative.top > 0 ? Math.floor(relative.top / this.opts.cellHeight) : 0;
+                const pivotX = relative.left > 0 ? Math.floor(relative.left / this.cellWidth()) : 0;
+                const pivotY = relative.top > 0 ? Math.floor(relative.top / this.opts.cellHeight) : 0;
                 rot.x = n.x + pivotX - (n.h - (pivotY + 1));
                 rot.y = (n.y + pivotY) - pivotX;
             }
@@ -1316,10 +1309,10 @@ class GridStack {
      * @param value margin value
      */
     margin(value) {
-        let isMultiValue = (typeof value === 'string' && value.split(' ').length > 1);
+        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)
         if (!isMultiValue) {
-            let data = Utils.parseHeight(value);
+            const data = Utils.parseHeight(value);
             if (this.opts.marginUnit === data.unit && this.opts.margin === data.h)
                 return;
         }
@@ -1349,7 +1342,8 @@ class GridStack {
         if (arguments.length > 1) {
             console.warn('gridstack.ts: `willItFit(x,y,w,h,autoPosition)` is deprecated. Use `willItFit({x, y,...})`. It will be removed soon');
             // eslint-disable-next-line prefer-rest-params
-            let a = arguments, i = 0, w = { x: a[i++], y: a[i++], w: a[i++], h: a[i++], autoPosition: a[i++] };
+            const a = arguments;
+            let i = 0, w = { x: a[i++], y: a[i++], w: a[i++], h: a[i++], autoPosition: a[i++] };
             return this.willItFit(w);
         }
         return this.engine.willItFit(node);
@@ -1358,7 +1352,7 @@ class GridStack {
     _triggerChangeEvent() {
         if (this.engine.batchMode)
             return this;
-        let elements = this.engine.getDirtyNodes(true); // verify they really changed
+        const elements = this.engine.getDirtyNodes(true); // verify they really changed
         if (elements && elements.length) {
             if (!this._ignoreLayoutsNodeChange) {
                 this.engine.layoutsNodesChange(elements);
@@ -1397,7 +1391,7 @@ class GridStack {
     }
     /** @internal */
     _triggerEvent(type, data) {
-        let event = data ? new CustomEvent(type, { bubbles: false, detail: data }) : new Event(type);
+        const event = data ? new CustomEvent(type, { bubbles: false, detail: data }) : new Event(type);
         this.el.dispatchEvent(event);
         return this;
     }
@@ -1423,9 +1417,9 @@ class GridStack {
         if (this.opts.cellHeight === 0) {
             return this;
         }
-        let cellHeight = this.opts.cellHeight;
-        let cellHeightUnit = this.opts.cellHeightUnit;
-        let prefix = `.${this._styleSheetClass} > .${this.opts.itemClass}`;
+        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
@@ -1439,12 +1433,12 @@ class GridStack {
             // these are done once only
             Utils.addCSSRule(this._styles, prefix, `height: ${cellHeight}${cellHeightUnit}`);
             // content margins
-            let top = this.opts.marginTop + this.opts.marginUnit;
-            let bottom = this.opts.marginBottom + this.opts.marginUnit;
-            let right = this.opts.marginRight + this.opts.marginUnit;
-            let left = this.opts.marginLeft + this.opts.marginUnit;
-            let content = `${prefix} > .grid-stack-item-content`;
-            let placeholder = `.${this._styleSheetClass} > .grid-stack-placeholder > .placeholder-content`;
+            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)
@@ -1460,7 +1454,7 @@ class GridStack {
         // now update the height specific fields
         maxH = maxH || this._styles._max;
         if (maxH > this._styles._max) {
-            let getHeight = (rows) => (cellHeight * rows) + cellHeightUnit;
+            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
@@ -1473,7 +1467,7 @@ class GridStack {
     _updateContainerHeight() {
         if (!this.engine || this.engine.batchMode)
             return this;
-        const parent = this.parentGridItem;
+        const parent = this.parentGridNode;
         let row = this.getRow() + this._extraDragRow; // this checks for minRow already
         const cellHeight = this.opts.cellHeight;
         const unit = this.opts.cellHeightUnit;
@@ -1536,8 +1530,8 @@ class GridStack {
         if (!node)
             return this;
         this._writePosAttr(el, node);
-        let attrs /*: GridStackWidget but strings */ = {
-            autoPosition: 'gs-auto-position',
+        const attrs /*: GridStackWidget but strings */ = {
+            // autoPosition: 'gs-auto-position', // no need to write out as already in node and doesn't affect CSS
             noResize: 'gs-no-resize',
             noMove: 'gs-no-move',
             locked: 'gs-locked',
@@ -1555,7 +1549,7 @@ class GridStack {
     }
     /** @internal call to read any default attributes from element */
     _readAttr(el, clearDefaultAttr = true) {
-        let n = {};
+        const n = {};
         n.x = Utils.toNumber(el.getAttribute('gs-x'));
         n.y = Utils.toNumber(el.getAttribute('gs-y'));
         n.w = Utils.toNumber(el.getAttribute('gs-w'));
@@ -1597,7 +1591,7 @@ class GridStack {
     }
     /** @internal */
     _setStaticClass() {
-        let classes = ['grid-stack-static'];
+        const classes = ['grid-stack-static'];
         if (this.opts.staticGrid) {
             this.el.classList.add(...classes);
             this.el.setAttribute('gs-static', 'true');
@@ -1623,9 +1617,9 @@ class GridStack {
         this.batchUpdate();
         // see if we're nested and take our column count from our parent....
         let columnChanged = false;
-        if (this._autoColumn && this.parentGridItem) {
-            if (this.opts.column !== this.parentGridItem.w) {
-                this.column(this.parentGridItem.w, 'none');
+        if (this._autoColumn && this.parentGridNode) {
+            if (this.opts.column !== this.parentGridNode.w) {
+                this.column(this.parentGridNode.w, 'none');
                 columnChanged = true;
             }
         }
@@ -1676,7 +1670,7 @@ class GridStack {
     _updateResizeEvent(forceRemove = false) {
         // only add event if we're not nested (parent will call us) and we're auto sizing cells or supporting dynamic column (i.e. doing work)
         // or supporting new sizeToContent option.
-        const trackSize = !this.parentGridItem && (this._isAutoCellHeight || this.opts.sizeToContent || this.opts.columnOpts
+        const trackSize = !this.parentGridNode && (this._isAutoCellHeight || this.opts.sizeToContent || this.opts.columnOpts
             || this.engine.nodes.find(n => n.sizeToContent));
         if (!forceRemove && trackSize && !this.resizeObserver) {
             this._sizeThrottle = Utils.throttle(() => this.onResize(), this.opts.cellHeightThrottle);
@@ -1775,21 +1769,23 @@ class GridStack {
      * call to setup dragging in from the outside (say toolbar), by specifying the class selection and options.
      * Called during GridStack.init() as options, but can also be called directly (last param are used) in case the toolbar
      * is dynamically create and needs to be set later.
-     * @param dragIn string selector (ex: '.sidebar .grid-stack-item') or list of dom elements
-     * @param dragInOptions options - see DDDragInOpt. (default: {handle: '.grid-stack-item-content', appendTo: 'body'}
-     * @param root optional root which defaults to document (for shadow dom pas the parent HTMLDocument)
+     * @param dragIn string selector (ex: '.sidebar-item') or list of dom elements
+     * @param dragInOptions options - see DDDragOpt. (default: {handle: '.grid-stack-item-content', appendTo: 'body'}
+     * @param widgets GridStackWidget def to assign to each element which defines what to create on drop
+     * @param root optional root which defaults to document (for shadow dom pass the parent HTMLDocument)
      */
-    static setupDragIn(dragIn, dragInOptions, root = document) {
+    static setupDragIn(dragIn, dragInOptions, widgets, root = document) {
         if (dragInOptions?.pause !== undefined) {
             DDManager.pauseDrag = dragInOptions.pause;
         }
-        dragInOptions = { ...dragInDefaultOptions, ...(dragInOptions || {}) };
-        let els = (typeof dragIn === 'string') ? Utils.getElements(dragIn, root) : dragIn;
-        if (els.length)
-            els?.forEach(el => {
-                if (!dd.isDraggable(el))
-                    dd.dragIn(el, dragInOptions);
-            });
+        dragInOptions = { appendTo: 'body', helper: 'clone', ...(dragInOptions || {}) }; // default to handle:undefined = drag by the whole item
+        const els = (typeof dragIn === 'string') ? Utils.getElements(dragIn, root) : dragIn;
+        els.forEach((el, i) => {
+            if (!dd.isDraggable(el))
+                dd.dragIn(el, dragInOptions);
+            if (widgets?.[i])
+                el.gridstackNode = widgets[i];
+        });
     }
     /**
      * Enables/Disables dragging by the user of specific grid element. If you want all items, and have it affect future items, use enableMove() instead. No-op for static grids.
@@ -1818,7 +1814,7 @@ class GridStack {
         if (this.opts.staticGrid)
             return this; // can't resize a static grid!
         GridStack.getElements(els).forEach(el => {
-            let n = el.gridstackNode;
+            const n = el.gridstackNode;
             if (!n)
                 return;
             val ? delete n.noResize : n.noResize = true;
@@ -1909,11 +1905,11 @@ class GridStack {
         }
         // vars shared across all methods
         let cellHeight, cellWidth;
-        let onDrag = (event, el, helper) => {
-            let node = el.gridstackNode;
+        const onDrag = (event, el, helper) => {
+            helper = helper || el;
+            const node = helper.gridstackNode;
             if (!node)
                 return;
-            helper = helper || el;
             // if the element is being dragged from outside, scale it down to match the grid's scale
             // and slightly adjust its position relative to the mouse
             if (!node.grid?.el) {
@@ -1925,11 +1921,11 @@ class GridStack {
                 helper.style.top = helperRect.y + (this.dragTransform.yScale - 1) * (event.clientY - helperRect.y) / this.dragTransform.yScale + 'px';
                 helper.style.transformOrigin = `0px 0px`;
             }
-            let parent = this.el.getBoundingClientRect();
             let { top, left } = helper.getBoundingClientRect();
-            left -= parent.left;
-            top -= parent.top;
-            let ui = {
+            const rect = this.el.getBoundingClientRect();
+            left -= rect.left;
+            top -= rect.top;
+            const ui = {
                 position: {
                     top: top * this.dragTransform.xScale,
                     left: left * this.dragTransform.yScale
@@ -1963,7 +1959,7 @@ class GridStack {
         };
         dd.droppable(this.el, {
             accept: (el) => {
-                let node = el.gridstackNode || this._readAttr(el, false);
+                const node = el.gridstackNode || this._readAttr(el, false);
                 // set accept drop to true on ourself (which we ignore) so we don't get "can't drop" icon in HTML5 mode while moving
                 if (node?.grid === this)
                     return true;
@@ -1975,12 +1971,12 @@ class GridStack {
                     canAccept = this.opts.acceptWidgets(el);
                 }
                 else {
-                    let selector = (this.opts.acceptWidgets === true ? '.grid-stack-item' : this.opts.acceptWidgets);
+                    const selector = (this.opts.acceptWidgets === true ? '.grid-stack-item' : this.opts.acceptWidgets);
                     canAccept = el.matches(selector);
                 }
                 // finally check to make sure we actually have space left #1571 #2633
                 if (canAccept && node && this.opts.maxRow) {
-                    let n = { w: node.w, h: node.h, minW: node.minW, minH: node.minH }; // only width/height matters and autoPosition
+                    const n = { w: node.w, h: node.h, minW: node.minW, minH: node.minH }; // only width/height matters and autoPosition
                     canAccept = this.engine.willItFit(n);
                 }
                 return canAccept;
@@ -1991,7 +1987,7 @@ class GridStack {
              */
             .on(this.el, 'dropover', (event, el, helper) => {
             // console.log(`over ${this.el.gridstack.opts.id} ${count++}`); // TEST
-            let node = el.gridstackNode;
+            let node = helper?.gridstackNode || el.gridstackNode;
             // ignore drop enter on ourself (unless we temporarily removed) which happens on a simple drag of our item
             if (node?.grid === this && !node._temporaryRemoved) {
                 // delete node._added; // reset this to track placeholder again in case we were over other grid #1484 (dropout doesn't always clear)
@@ -2000,24 +1996,36 @@ class GridStack {
             // fix #1578 when dragging fast, we may not get a leave on the previous grid so force one now
             if (node?.grid && node.grid !== this && !node._temporaryRemoved) {
                 // console.log('dropover without leave'); // TEST
-                let otherGrid = node.grid;
+                const otherGrid = node.grid;
                 otherGrid._leave(el, helper);
             }
+            helper = helper || el;
             // cache cell dimensions (which don't change), position can animate if we removed an item in otherGrid that affects us...
             cellWidth = this.cellWidth();
             cellHeight = this.getCellHeight(true);
-            // load any element attributes if we don't have a node
+            // sidebar items: load any element attributes if we don't have a node
             if (!node) {
-                node = this._readAttr(el, false); // don't wipe external (e.g. drag toolbar) attr #2354
+                if (helper.hasAttribute('gridstacknode')) {
+                    try {
+                        node = JSON.parse(helper.getAttribute('gridstacknode'));
+                    }
+                    catch (error) {
+                        console.error("Gridstack dropover: Bad JSON format: ", helper.getAttribute('gridstacknode'));
+                    }
+                    helper.removeAttribute('gridstacknode');
+                }
+                if (!node)
+                    node = this._readAttr(helper); // used to pass false for #2354, but now we clone top level node
             }
-            if (!node.grid) {
+            if (!node.grid) { // sidebar item
+                if (!node.el)
+                    node = { ...node }; // clone first time we're coming from sidebar (since 'clone' doesn't copy vars)
                 node._isExternal = true;
-                el.gridstackNode = node;
+                helper.gridstackNode = node;
             }
             // calculate the grid size based on element outer size
-            helper = helper || el;
-            let w = node.w || Math.round(helper.offsetWidth / cellWidth) || 1;
-            let h = node.h || Math.round(helper.offsetHeight / cellHeight) || 1;
+            const w = node.w || Math.round(helper.offsetWidth / cellWidth) || 1;
+            const h = node.h || Math.round(helper.offsetHeight / cellHeight) || 1;
             // if the item came from another grid, make a copy and save the original info in case we go back there
             if (node.grid && node.grid !== this) {
                 // copy the node original values (min/max/id/etc...) but override width/height/other flags which are this grid specific
@@ -2051,7 +2059,7 @@ class GridStack {
              */
             .on(this.el, 'dropout', (event, el, helper) => {
             // console.log(`out ${this.el.gridstack.opts.id} ${count++}`); // TEST
-            let node = el.gridstackNode;
+            const node = helper?.gridstackNode || el.gridstackNode;
             if (!node)
                 return false;
             // fix #1578 when dragging fast, we might get leave after other grid gets enter (which calls us to clean)
@@ -2069,11 +2077,12 @@ class GridStack {
              * end - releasing the mouse
              */
             .on(this.el, 'drop', (event, el, helper) => {
-            let node = el.gridstackNode;
+            const node = helper?.gridstackNode || el.gridstackNode;
             // ignore drop on ourself from ourself that didn't come from the outside - dragend will handle the simple move instead
             if (node?.grid === this && !node._isExternal)
                 return false;
             const wasAdded = !!this.placeholder.parentElement; // skip items not actually added to us because of constrains, but do cleanup #1419
+            const wasSidebar = el !== helper;
             this.placeholder.remove();
             // disable animation when replacing a placeholder (already positioned) with actual content
             const noAnim = wasAdded && this.opts.animate;
@@ -2081,15 +2090,15 @@ class GridStack {
                 this.setAnimation(false);
             // notify previous grid of removal
             // console.log('drop delete _gridstackNodeOrig') // TEST
-            let origNode = el._gridstackNodeOrig;
+            const origNode = el._gridstackNodeOrig;
             delete el._gridstackNodeOrig;
             if (wasAdded && origNode?.grid && origNode.grid !== this) {
-                let oGrid = origNode.grid;
+                const oGrid = origNode.grid;
                 oGrid.engine.removeNodeFromLayoutCache(origNode);
                 oGrid.engine.removedNodes.push(origNode);
                 oGrid._triggerRemoveEvent()._triggerChangeEvent();
                 // if it's an empty sub-grid that got auto-created, nuke it
-                if (oGrid.parentGridItem && !oGrid.engine.nodes.length && oGrid.opts.subGridDynamic) {
+                if (oGrid.parentGridNode && !oGrid.engine.nodes.length && oGrid.opts.subGridDynamic) {
                     oGrid.removeAsSubGrid();
                 }
             }
@@ -2102,37 +2111,39 @@ class GridStack {
             }
             delete node.grid?._isTemp;
             dd.off(el, 'drag');
-            // if we made a copy ('helper' which is temp) of the original node then insert a copy, else we move the original node (#1102)
-            // as the helper will be nuked by jquery-ui otherwise. TODO: update old code path
+            // if we made a copy insert that instead of the original (sidebar item)
             if (helper !== el) {
                 helper.remove();
-                el.gridstackNode = origNode; // original item (left behind) is re-stored to pre dragging as the node now has drop info
-                if (wasAdded) {
-                    el = el.cloneNode(true);
-                }
+                el = helper;
             }
             else {
                 el.remove(); // reduce flicker as we change depth here, and size further down
-                this._removeDD(el);
             }
+            this._removeDD(el);
             if (!wasAdded)
                 return false;
-            el.gridstackNode = node;
-            node.el = el;
-            let subGrid = node.subGrid?.el?.gridstack; // set when actual sub-grid present
-            // @ts-ignore
+            const subGrid = node.subGrid?.el?.gridstack; // set when actual sub-grid present
             Utils.copyPos(node, this._readAttr(this.placeholder)); // placeholder values as moving VERY fast can throw things off #1578
-            Utils.removePositioningStyles(el); // @ts-ignore
-            this.el.appendChild(el); // @ts-ignore // TODO: now would be ideal time to _removeHelperStyle() overriding floating styles (native only)
-            this._prepareElement(el, true, node);
-            if (subGrid) {
-                subGrid.parentGridItem = node;
-                if (!subGrid.opts.styleInHead)
-                    subGrid._updateStyles(true); // re-create sub-grid styles now that we've moved
+            Utils.removePositioningStyles(el);
+            // give the user a chance to alter the widget that will get inserted if new sidebar item
+            if (wasSidebar && (node.content || node.subGridOpts || GridStack.addRemoveCB)) {
+                delete node.el;
+                el = this.addWidget(node);
             }
-            this._updateContainerHeight();
-            this.engine.addedNodes.push(node); // @ts-ignore
-            this._triggerAddEvent(); // @ts-ignore
+            else {
+                this._prepareElement(el, true, node);
+                this.el.appendChild(el);
+                // resizeToContent is skipped in _prepareElement() until node is visible (clientHeight=0) so call it now
+                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();
+            }
+            this.engine.addedNodes.push(node);
+            this._triggerAddEvent();
             this._triggerChangeEvent();
             this.engine.endUpdate();
             if (this._gsEventHandler['dropped']) {
@@ -2147,6 +2158,8 @@ class GridStack {
     }
     /** @internal mark item for removal */
     static _itemRemoving(el, remove) {
+        if (!el)
+            return;
         const node = el ? el.gridstackNode : undefined;
         if (!node?.grid || el.classList.contains(node.grid.opts.removableOptions.decline))
             return;
@@ -2157,7 +2170,7 @@ class GridStack {
     _setupRemoveDrop() {
         if (typeof this.opts.removable !== 'string')
             return this;
-        let trashEl = document.querySelector(this.opts.removable);
+        const trashEl = document.querySelector(this.opts.removable);
         if (!trashEl)
             return this;
         // only register ONE static drop-over/dropout callback for the 'trash', and it will
@@ -2172,7 +2185,7 @@ class GridStack {
     }
     /** @internal prepares the element for drag&drop */
     _prepareDragDropByNode(node) {
-        let el = node.el;
+        const el = node.el;
         const noMove = node.noMove || this.opts.disableDrag;
         const noResize = node.noResize || this.opts.disableResize;
         // check for disabled grid first
@@ -2189,7 +2202,7 @@ class GridStack {
             let cellWidth;
             let cellHeight;
             /** called when item starts moving/resizing */
-            let onStartMoving = (event, ui) => {
+            const onStartMoving = (event, ui) => {
                 // trigger any 'dragstart' / 'resizestart' manually
                 if (this._gsEventHandler[event.type]) {
                     this._gsEventHandler[event.type](event, event.target);
@@ -2199,23 +2212,23 @@ class GridStack {
                 this._onStartMoving(el, event, ui, node, cellWidth, cellHeight);
             };
             /** called when item is being dragged/resized */
-            let dragOrResize = (event, ui) => {
+            const dragOrResize = (event, ui) => {
                 this._dragOrResize(el, event, ui, node, cellWidth, cellHeight);
             };
             /** called when the item stops moving/resizing */
-            let onEndMoving = (event) => {
+            const onEndMoving = (event) => {
                 this.placeholder.remove();
                 delete node._moving;
                 delete node._event;
                 delete node._lastTried;
                 const widthChanged = node.w !== node._orig.w;
                 // if the item has moved to another grid, we're done here
-                let target = event.target;
+                const target = event.target;
                 if (!target.gridstackNode || target.gridstackNode.grid !== this)
                     return;
                 node.el = target;
                 if (node._isAboutToRemove) {
-                    let grid = el.gridstackNode.grid;
+                    const grid = el.gridstackNode.grid;
                     if (grid._gsEventHandler[event.type]) {
                         grid._gsEventHandler[event.type](event, target);
                     }
@@ -2319,11 +2332,11 @@ class GridStack {
     }
     /** @internal handles actual drag/resize */
     _dragOrResize(el, event, ui, node, cellWidth, cellHeight) {
-        let p = { ...node._orig }; // could be undefined (_isExternal) which is ok (drag only set x,y and w,h will default to node value)
+        const p = { ...node._orig }; // could be undefined (_isExternal) which is ok (drag only set x,y and w,h will default to node value)
         let resizing;
         let mLeft = this.opts.marginLeft, mRight = this.opts.marginRight, mTop = this.opts.marginTop, mBottom = this.opts.marginBottom;
         // if margins (which are used to pass mid point by) are large relative to cell height/width, reduce them down #1855
-        let mHeight = Math.round(cellHeight * 0.1), mWidth = Math.round(cellWidth * 0.1);
+        const mHeight = Math.round(cellHeight * 0.1), mWidth = Math.round(cellWidth * 0.1);
         mLeft = Math.min(mLeft, mWidth);
         mRight = Math.min(mRight, mWidth);
         mTop = Math.min(mTop, mHeight);
@@ -2331,20 +2344,20 @@ class GridStack {
         if (event.type === 'drag') {
             if (node._temporaryRemoved)
                 return; // handled by dropover
-            let distance = ui.position.top - node._prevYPix;
+            const distance = ui.position.top - node._prevYPix;
             node._prevYPix = ui.position.top;
             if (this.opts.draggable.scroll !== false) {
                 Utils.updateScrollPosition(el, ui.position, distance);
             }
             // get new position taking into account the margin in the direction we are moving! (need to pass mid point by margin)
-            let left = ui.position.left + (ui.position.left > node._lastUiPosition.left ? -mRight : mLeft);
-            let top = ui.position.top + (ui.position.top > node._lastUiPosition.top ? -mBottom : mTop);
+            const left = ui.position.left + (ui.position.left > node._lastUiPosition.left ? -mRight : mLeft);
+            const top = ui.position.top + (ui.position.top > node._lastUiPosition.top ? -mBottom : mTop);
             p.x = Math.round(left / cellWidth);
             p.y = Math.round(top / cellHeight);
             // @ts-ignore// if we're at the bottom hitting something else, grow the grid so cursor doesn't leave when trying to place below others
-            let prev = this._extraDragRow;
+            const prev = this._extraDragRow;
             if (this.engine.collide(node, p)) {
-                let row = this.getRow();
+                const row = this.getRow();
                 let extra = Math.max(0, (p.y + node.h) - row);
                 if (this.opts.maxRow && row + extra > this.opts.maxRow) {
                     extra = Math.max(0, this.opts.maxRow - row);
@@ -2373,15 +2386,15 @@ class GridStack {
             if (node._lastTried && node._lastTried.w === p.w && node._lastTried.h === p.h)
                 return; // skip one we tried (but failed)
             // if we size on left/top side this might move us, so get possible new position as well
-            let left = ui.position.left + mLeft;
-            let top = ui.position.top + mTop;
+            const left = ui.position.left + mLeft;
+            const top = ui.position.top + mTop;
             p.x = Math.round(left / cellWidth);
             p.y = Math.round(top / cellHeight);
             resizing = true;
         }
         node._event = event;
         node._lastTried = p; // set as last tried (will nuke if we go there)
-        let rect = {
+        const rect = {
             x: ui.position.left + mLeft,
             y: ui.position.top + mTop,
             w: (ui.size ? ui.size.width : node.w * cellWidth) - mLeft - mRight,
@@ -2395,7 +2408,7 @@ class GridStack {
                 node.subGrid.onResize();
             this._extraDragRow = 0; // @ts-ignore
             this._updateContainerHeight();
-            let target = event.target; // @ts-ignore
+            const target = event.target; // @ts-ignore
             this._writePosAttr(target, node);
             if (this._gsEventHandler[event.type]) {
                 this._gsEventHandler[event.type](event, target);
@@ -2407,12 +2420,12 @@ class GridStack {
      * our item to start with else restore prev node values from prev grid it came from.
      */
     _leave(el, helper) {
-        let node = el.gridstackNode;
+        helper = helper || el;
+        const node = helper.gridstackNode;
         if (!node)
             return;
-        helper = helper || el;
-        // restore the scale of the helper on leave
-        helper.style.transform = 'scale(1)';
+        // remove the scale of the helper on leave
+        helper.style.transform = helper.style.transformOrigin = null;
         dd.off(el, 'drag'); // no need to track while being outside
         // this gets called when cursor leaves and shape is outside, so only do this once
         if (node._temporaryRemoved)
@@ -2420,6 +2433,8 @@ class GridStack {
         node._temporaryRemoved = true;
         this.engine.removeNode(node); // remove placeholder as well, otherwise it's a sign node is not in our list, which is a bigger issue
         node.el = node._isExternal && helper ? helper : el; // point back to real item being dragged
+        if (node._isExternal)
+            this.engine.cleanupNode(node);
         if (this.opts.removable === true) { // boolean vs a class string
             // item leaving us and we are supposed to remove on leave (no need to drag onto trash) mark it so
             GridStack._itemRemoving(el, true);
@@ -2431,22 +2446,25 @@ class GridStack {
             delete el._gridstackNodeOrig;
         }
         else if (node._isExternal) {
-            // item came from outside (like a toolbar) so nuke any node info
-            delete node.el;
-            delete el.gridstackNode;
-            // and restore all nodes back to original
+            // item came from outside restore all nodes back to original
             this.engine.restoreInitial();
         }
     }
     // legacy method removed
     commit() { obsolete(this, this.batchUpdate(false), 'commit', 'batchUpdate', '5.2'); return this; }
 }
+/**
+ * callback to create the content of widgets so the app can control how to store and restore it
+ * By default this lib will do 'el.textContent = w.content' forcing text only support for avoiding potential XSS issues.
+ */
+GridStack.renderCB = (el, w) => { if (el && w?.content)
+    el.textContent = w.content; };
 /** parent class for sizing content. defaults to '.grid-stack-item-content' */
 GridStack.resizeToContentParent = '.grid-stack-item-content';
 /** scoping so users can call GridStack.Utils.sort() for example */
 GridStack.Utils = Utils;
 /** scoping so users can call new GridStack.Engine(12) for example */
 GridStack.Engine = GridStackEngine;
-GridStack.GDRev = '10.3.1';
+GridStack.GDRev = '11.0.0';
 export { GridStack };
 //# sourceMappingURL=gridstack.js.map