gridstack 10.3.1 → 11.0.0

package/dist/es5/gridstack.js

@@ -36,10 +36,10 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridStack = void 0;
 /*!
- * 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
  */
 var gridstack_engine_1 = require("./gridstack-engine");
@@ -79,7 +79,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     function GridStack(el, opts) {
         if (opts === void 0) { opts = {}; }
         var _this = this;
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         this.el = el;
         this.opts = opts;
         /** @internal */
@@ -164,13 +164,13 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             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)
-        var grandParent = (_c = this.el.parentElement) === null || _c === void 0 ? void 0 : _c.parentElement;
-        var parentGridItem = (grandParent === null || grandParent === void 0 ? void 0 : grandParent.classList.contains(types_1.gridDefaults.itemClass)) ? grandParent.gridstackNode : undefined;
-        if (parentGridItem) {
-            parentGridItem.subGrid = this;
-            this.parentGridItem = parentGridItem;
+        var parentGridItem = this.el.closest('.' + types_1.gridDefaults.itemClass);
+        var parentNode = parentGridItem === null || parentGridItem === void 0 ? void 0 : 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') {
@@ -237,7 +237,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         // dynamic grids require pausing during drag to detect over to nest vs push
         if (opts.subGridDynamic && !dd_manager_1.DDManager.pauseDrag)
             dd_manager_1.DDManager.pauseDrag = true;
-        if (((_d = opts.draggable) === null || _d === void 0 ? void 0 : _d.pause) !== undefined)
+        if (((_c = opts.draggable) === null || _c === void 0 ? void 0 : _c.pause) !== undefined)
             dd_manager_1.DDManager.pauseDrag = opts.draggable.pause;
         this._setupRemoveDrop();
         this._setupAcceptWidget();
@@ -251,10 +251,10 @@ var GridStack = exports.GridStack = /** @class */ (function () {
      * @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;
      */
     GridStack.init = function (options, elOrString) {
         if (options === void 0) { options = {}; }
@@ -283,7 +283,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
      * @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(...)
      */
     GridStack.initAll = function (options, selector) {
@@ -332,10 +332,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 el = GridStack.addRemoveCB(parent, opt, true, true);
             }
             else {
-                var doc = document.implementation.createHTMLDocument(''); // IE needs a param
-                doc.body.innerHTML = "<div class=\"grid-stack ".concat(opt.class || '', "\"></div>");
-                el = doc.body.children[0];
-                parent.appendChild(el);
+                el = utils_1.Utils.createDiv(['grid-stack', opt.class], parent);
             }
         }
         // create grid class and load any children
@@ -356,7 +353,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 var 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, types_1.gridDefaults.itemClass, this.opts.itemClass);
@@ -372,44 +369,35 @@ var GridStack = exports.GridStack = /** @class */ (function () {
      *
      * 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
      */
-    GridStack.prototype.addWidget = function (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;
+    GridStack.prototype.addWidget = function (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);
         }
         var el;
-        var node;
-        if (typeof els === 'string') {
-            var doc = document.implementation.createHTMLDocument(''); // IE needs a param
-            doc.body.innerHTML = els;
-            el = doc.body.children[0];
+        var node = w;
+        node.grid = this;
+        if (node === null || node === void 0 ? void 0 : 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 === null || node === void 0 ? void 0 : 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 {
-                var content = (options === null || options === void 0 ? void 0 : options.content) || '';
-                var doc = document.implementation.createHTMLDocument(''); // IE needs a param
-                doc.body.innerHTML = "<div class=\"grid-stack-item ".concat(this.opts.itemClass || '', "\"><div class=\"grid-stack-item-content\">").concat(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_1.Utils.createWidgetDivs(this.opts.itemClass, node);
         }
         if (!el)
             return;
@@ -421,12 +409,11 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         // 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)
         var domAttr = this._readAttr(el);
-        options = utils_1.Utils.cloneDeep(options) || {}; // make a copy before we modify in case caller re-uses it
-        utils_1.Utils.defaults(options, domAttr);
-        node = this.engine.prepareNode(options);
-        this._writeAttr(el, options);
+        utils_1.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;
     };
     /**
@@ -452,7 +439,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         var grid = this;
         while (grid && !subGridTemplate) {
             subGridTemplate = (_b = grid.opts) === null || _b === void 0 ? void 0 : _b.subGridOpts;
-            grid = (_c = grid.parentGridItem) === null || _c === void 0 ? void 0 : _c.grid;
+            grid = (_c = grid.parentGridNode) === null || _c === void 0 ? void 0 : _c.grid;
         }
         //... and set the create options
         ops = utils_1.Utils.cloneDeep(__assign(__assign(__assign({}, (subGridTemplate || {})), { children: undefined }), (ops || node.subGridOpts || {})));
@@ -481,13 +468,9 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 newItem = GridStack.addRemoveCB(this.el, newItemOpt, true, false);
             }
             else {
-                var doc = document.implementation.createHTMLDocument(''); // IE needs a param
-                doc.body.innerHTML = "<div class=\"grid-stack-item\"></div>";
-                newItem = doc.body.children[0];
+                newItem = utils_1.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_1.Utils.createDiv(['grid-stack-item-content'], node.el);
             }
             this._prepareDragDropByNode(node); // ... and restore original D&D
         }
@@ -507,7 +490,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             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) {
@@ -516,7 +499,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 window.setTimeout(function () { return utils_1.Utils.simulateMouseEvent(nodeToAdd._event, 'mouseenter', subGrid.el); }, 0);
             }
             else {
-                subGrid.addWidget(node.el, node);
+                subGrid.makeWidget(node.el, node);
             }
         }
         return subGrid;
@@ -528,21 +511,21 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     GridStack.prototype.removeAsSubGrid = function (nodeThatRemoved) {
         var _this = this;
         var _a;
-        var pGrid = (_a = this.parentGridItem) === null || _a === void 0 ? void 0 : _a.grid;
+        var pGrid = (_a = this.parentGridNode) === null || _a === void 0 ? void 0 : _a.grid;
         if (!pGrid)
             return;
         pGrid.batchUpdate();
-        pGrid.removeWidget(this.parentGridItem.el, true, true);
+        pGrid.removeWidget(this.parentGridNode.el, true, true);
         this.engine.nodes.forEach(function (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(function () { return utils_1.Utils.simulateMouseEvent(nodeThatRemoved._event, 'mouseenter', pGrid.el); }, 0);
@@ -567,8 +550,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         list.forEach(function (n) {
             var _a;
             if (saveContent && n.el && !n.subGrid && !saveCB) { // sub-grid are saved differently, not plain content
-                var sub = n.el.querySelector('.grid-stack-item-content');
-                n.content = sub ? sub.innerHTML : undefined;
+                var itemContent = n.el.querySelector('.grid-stack-item-content');
+                n.content = itemContent === null || itemContent === void 0 ? void 0 : itemContent.innerHTML;
                 if (!n.content)
                     delete n.content;
             }
@@ -934,9 +917,9 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             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;
@@ -1010,7 +993,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
      * @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');
@@ -1018,6 +1001,10 @@ var GridStack = exports.GridStack = /** @class */ (function () {
      */
     GridStack.prototype.makeWidget = function (els, options) {
         var el = GridStack.getElement(els);
+        if (!el)
+            return;
+        if (!el.parentElement)
+            this.el.appendChild(el);
         this._prepareElement(el, true, options);
         var node = el.gridstackNode;
         this._updateContainerHeight();
@@ -1050,7 +1037,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 this._gsEventHandler[name] = function (event) { return callback(event); };
             }
             else {
-                this._gsEventHandler[name] = function (event) { return callback(event, event.detail); };
+                this._gsEventHandler[name] = function (event) { if (event.detail)
+                    callback(event, event.detail); };
             }
             this.el.addEventListener(name, this._gsEventHandler[name]);
         }
@@ -1102,6 +1090,10 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         var _this = this;
         if (removeDOM === void 0) { removeDOM = true; }
         if (triggerEvent === void 0) { triggerEvent = true; }
+        if (!els) {
+            console.error('Error: GridStack.removeWidget(undefined) called');
+            return this;
+        }
         GridStack.getElements(els).forEach(function (el) {
             if (el.parentElement && el.parentElement !== _this.el)
                 return; // not our child!
@@ -1212,7 +1204,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         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
-            var a = arguments, i = 1;
+            var a = arguments;
+            var i = 1;
             opt = { x: a[i++], y: a[i++], w: a[i++], h: a[i++] };
             return this.update(els, opt);
         }
@@ -1242,8 +1235,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             // check for content changing
             if (w.content !== undefined) {
                 var 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 ((_a = n.subGrid) === null || _a === void 0 ? void 0 : _a.el) {
                         itemContent.appendChild(n.subGrid.el);
@@ -1432,7 +1425,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         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
-            var a = arguments, i = 0, w = { x: a[i++], y: a[i++], w: a[i++], h: a[i++], autoPosition: a[i++] };
+            var a = arguments;
+            var 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);
@@ -1559,7 +1553,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     GridStack.prototype._updateContainerHeight = function () {
         if (!this.engine || this.engine.batchMode)
             return this;
-        var parent = this.parentGridItem;
+        var parent = this.parentGridNode;
         var row = this.getRow() + this._extraDragRow; // this checks for minRow already
         var cellHeight = this.opts.cellHeight;
         var unit = this.opts.cellHeightUnit;
@@ -1624,7 +1618,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             return this;
         this._writePosAttr(el, node);
         var attrs /*: GridStackWidget but strings */ = {
-            autoPosition: 'gs-auto-position',
+            // 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',
@@ -1713,9 +1707,9 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         this.batchUpdate();
         // see if we're nested and take our column count from our parent....
         var 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;
             }
         }
@@ -1771,7 +1765,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         if (forceRemove === void 0) { 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.
-        var trackSize = !this.parentGridItem && (this._isAutoCellHeight || this.opts.sizeToContent || this.opts.columnOpts
+        var trackSize = !this.parentGridNode && (this._isAutoCellHeight || this.opts.sizeToContent || this.opts.columnOpts
             || this.engine.nodes.find(function (n) { return n.sizeToContent; }));
         if (!forceRemove && trackSize && !this.resizeObserver) {
             this._sizeThrottle = utils_1.Utils.throttle(function () { return _this.onResize(); }, this.opts.cellHeightThrottle);
@@ -1876,22 +1870,24 @@ var GridStack = exports.GridStack = /** @class */ (function () {
      * 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)
      */
-    GridStack.setupDragIn = function (dragIn, dragInOptions, root) {
+    GridStack.setupDragIn = function (dragIn, dragInOptions, widgets, root) {
         if (root === void 0) { root = document; }
         if ((dragInOptions === null || dragInOptions === void 0 ? void 0 : dragInOptions.pause) !== undefined) {
             dd_manager_1.DDManager.pauseDrag = dragInOptions.pause;
         }
-        dragInOptions = __assign(__assign({}, types_1.dragInDefaultOptions), (dragInOptions || {}));
+        dragInOptions = __assign({ appendTo: 'body', helper: 'clone' }, (dragInOptions || {})); // default to handle:undefined = drag by the whole item
         var els = (typeof dragIn === 'string') ? utils_1.Utils.getElements(dragIn, root) : dragIn;
-        if (els.length)
-            els === null || els === void 0 ? void 0 : els.forEach(function (el) {
-                if (!dd.isDraggable(el))
-                    dd.dragIn(el, dragInOptions);
-            });
+        els.forEach(function (el, i) {
+            if (!dd.isDraggable(el))
+                dd.dragIn(el, dragInOptions);
+            if (widgets === null || widgets === void 0 ? void 0 : 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.
@@ -2022,14 +2018,13 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         var cellHeight, cellWidth;
         var onDrag = function (event, el, helper) {
             var _a;
-            var _b;
-            var node = el.gridstackNode;
+            helper = helper || el;
+            var 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 (!((_b = node.grid) === null || _b === void 0 ? void 0 : _b.el)) {
+            if (!((_a = node.grid) === null || _a === void 0 ? void 0 : _a.el)) {
                 // this scales the helper down
                 helper.style.transform = "scale(".concat(1 / _this.dragTransform.xScale, ",").concat(1 / _this.dragTransform.yScale, ")");
                 // this makes it so that the helper is well positioned relative to the mouse after scaling
@@ -2038,10 +2033,10 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 helper.style.top = helperRect.y + (_this.dragTransform.yScale - 1) * (event.clientY - helperRect.y) / _this.dragTransform.yScale + 'px';
                 helper.style.transformOrigin = "0px 0px";
             }
-            var parent = _this.el.getBoundingClientRect();
-            var top = (_a = helper.getBoundingClientRect(), _a.top), left = _a.left;
-            left -= parent.left;
-            top -= parent.top;
+            var _b = helper.getBoundingClientRect(), top = _b.top, left = _b.left;
+            var rect = _this.el.getBoundingClientRect();
+            left -= rect.left;
+            top -= rect.top;
             var ui = {
                 position: {
                     top: top * _this.dragTransform.xScale,
@@ -2104,7 +2099,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
              */
             .on(this.el, 'dropover', function (event, el, helper) {
             // console.log(`over ${this.el.gridstack.opts.id} ${count++}`); // TEST
-            var node = el.gridstackNode;
+            var node = (helper === null || helper === void 0 ? void 0 : helper.gridstackNode) || el.gridstackNode;
             // ignore drop enter on ourself (unless we temporarily removed) which happens on a simple drag of our item
             if ((node === null || node === void 0 ? void 0 : 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)
@@ -2116,19 +2111,31 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 var 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 = __assign({}, 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;
             var w = node.w || Math.round(helper.offsetWidth / cellWidth) || 1;
             var 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
@@ -2164,7 +2171,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
              */
             .on(this.el, 'dropout', function (event, el, helper) {
             // console.log(`out ${this.el.gridstack.opts.id} ${count++}`); // TEST
-            var node = el.gridstackNode;
+            var node = (helper === null || helper === void 0 ? void 0 : 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)
@@ -2183,11 +2190,12 @@ var GridStack = exports.GridStack = /** @class */ (function () {
              */
             .on(this.el, 'drop', function (event, el, helper) {
             var _a, _b, _c;
-            var node = el.gridstackNode;
+            var node = (helper === null || helper === void 0 ? void 0 : 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 === null || node === void 0 ? void 0 : node.grid) === _this && !node._isExternal)
                 return false;
             var wasAdded = !!_this.placeholder.parentElement; // skip items not actually added to us because of constrains, but do cleanup #1419
+            var wasSidebar = el !== helper;
             _this.placeholder.remove();
             // disable animation when replacing a placeholder (already positioned) with actual content
             var noAnim = wasAdded && _this.opts.animate;
@@ -2203,7 +2211,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 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();
                 }
             }
@@ -2216,37 +2224,39 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             }
             (_a = node.grid) === null || _a === void 0 ? true : delete _a._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;
             var subGrid = (_c = (_b = node.subGrid) === null || _b === void 0 ? void 0 : _b.el) === null || _c === void 0 ? void 0 : _c.gridstack; // set when actual sub-grid present
-            // @ts-ignore
             utils_1.Utils.copyPos(node, _this._readAttr(_this.placeholder)); // placeholder values as moving VERY fast can throw things off #1578
-            utils_1.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
-            }
-            _this._updateContainerHeight();
-            _this.engine.addedNodes.push(node); // @ts-ignore
-            _this._triggerAddEvent(); // @ts-ignore
+            utils_1.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);
+            }
+            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']) {
@@ -2261,6 +2271,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     };
     /** @internal mark item for removal */
     GridStack._itemRemoving = function (el, remove) {
+        if (!el)
+            return;
         var node = el ? el.gridstackNode : undefined;
         if (!(node === null || node === void 0 ? void 0 : node.grid) || el.classList.contains(node.grid.opts.removableOptions.decline))
             return;
@@ -2523,12 +2535,12 @@ var GridStack = exports.GridStack = /** @class */ (function () {
      * our item to start with else restore prev node values from prev grid it came from.
      */
     GridStack.prototype._leave = function (el, helper) {
-        var node = el.gridstackNode;
+        helper = helper || el;
+        var 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)
@@ -2536,6 +2548,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         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);
@@ -2547,22 +2561,25 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             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
     GridStack.prototype.commit = function () { (0, utils_1.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 = function (el, w) { if (el && (w === null || w === void 0 ? void 0 : 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_1.Utils;
     /** scoping so users can call new GridStack.Engine(12) for example */
     GridStack.Engine = gridstack_engine_1.GridStackEngine;
-    GridStack.GDRev = '10.3.1';
+    GridStack.GDRev = '11.0.0';
     return GridStack;
 }());
 //# sourceMappingURL=gridstack.js.map