gridstack 9.5.1 → 10.0.1

package/dist/es5/gridstack.js

@@ -36,7 +36,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridStack = void 0;
 /*!
- * GridStack 9.5.1
+ * GridStack 10.0.1
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2022 Alain Dumesny
@@ -54,7 +54,6 @@ var types_1 = require("./types");
 var dd_gridstack_1 = require("./dd-gridstack");
 var dd_touch_1 = require("./dd-touch");
 var dd_manager_1 = require("./dd-manager");
-/** global instance */
 var dd = new dd_gridstack_1.DDGridStack;
 // export all dependent file as well to make it easier for users to just import the main file
 __exportStar(require("./types"), exports);
@@ -80,11 +79,12 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     function GridStack(el, opts) {
         if (opts === void 0) { opts = {}; }
         var _this = this;
-        var _a, _b;
+        var _a, _b, _c, _d;
         /** @internal */
         this._gsEventHandler = {};
         /** @internal extra row added when dragging at the bottom of the grid */
         this._extraDragRow = 0;
+        el.gridstack = this;
         this.el = el; // exposed HTML element to the user
         opts = opts || {}; // handles null/undefined/0
         if (!el.classList.contains('grid-stack')) {
@@ -104,6 +104,41 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         if (opts.alwaysShowResizeHandle !== undefined) {
             opts._alwaysShowResizeHandle = opts.alwaysShowResizeHandle;
         }
+        var bk = (_a = opts.columnOpts) === null || _a === void 0 ? void 0 : _a.breakpoints;
+        // LEGACY: oneColumnMode stuff changed in v10.x - check if user explicitly set something to convert over
+        var oldOpts = opts;
+        if (oldOpts.oneColumnModeDomSort) {
+            delete oldOpts.oneColumnModeDomSort;
+            console.log('Error: Gridstack oneColumnModeDomSort no longer supported. Check GridStackOptions.columnOpts instead.');
+        }
+        if (oldOpts.oneColumnSize || oldOpts.disableOneColumnMode === false) {
+            var oneSize = oldOpts.oneColumnSize || 768;
+            delete oldOpts.oneColumnSize;
+            delete oldOpts.disableOneColumnMode;
+            opts.columnOpts = opts.columnOpts || {};
+            bk = opts.columnOpts.breakpoints = opts.columnOpts.breakpoints || [];
+            var oneColumn = bk.find(function (b) { return b.c === 1; });
+            if (!oneColumn) {
+                oneColumn = { c: 1, w: oneSize };
+                bk.push(oneColumn, { c: 12, w: oneSize + 1 });
+            }
+            else
+                oneColumn.w = oneSize;
+        }
+        //...end LEGACY
+        // cleanup responsive opts (must have columnWidth | breakpoints) then sort breakpoints by size (so we can match during resize)
+        var resp = opts.columnOpts;
+        if (resp) {
+            if (!resp.columnWidth && !((_b = resp.breakpoints) === null || _b === void 0 ? void 0 : _b.length)) {
+                delete opts.columnOpts;
+                bk = undefined;
+            }
+            else {
+                resp.columnMax = resp.columnMax || 12;
+            }
+        }
+        if ((bk === null || bk === void 0 ? void 0 : bk.length) > 1)
+            bk.sort(function (a, b) { return (b.w || 0) - (a.w || 0); });
         // elements DOM attributes override any passed options (like CSS style) - merge the two together
         var defaults = __assign(__assign({}, utils_1.Utils.cloneDeep(types_1.gridDefaults)), { column: utils_1.Utils.toNumber(el.getAttribute('gs-column')) || types_1.gridDefaults.column, minRow: rowAttr ? rowAttr : utils_1.Utils.toNumber(el.getAttribute('gs-min-row')) || types_1.gridDefaults.minRow, maxRow: rowAttr ? rowAttr : utils_1.Utils.toNumber(el.getAttribute('gs-max-row')) || types_1.gridDefaults.maxRow, staticGrid: utils_1.Utils.toBool(el.getAttribute('gs-static')) || types_1.gridDefaults.staticGrid, draggable: {
                 handle: (opts.handleClass ? '.' + opts.handleClass : (opts.handle ? opts.handle : '')) || types_1.gridDefaults.draggable.handle,
@@ -118,10 +153,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         opts = null; // make sure we use this.opts instead
         this._initMargin(); // part of settings defaults...
         // Now check if we're loading into 1 column mode FIRST so we don't do un-necessary work (like cellHeight = width / 12 then go 1 column)
-        if (this.opts.column !== 1 && !this.opts.disableOneColumnMode && this._widthOrContainer() <= this.opts.oneColumnSize) {
-            this._prevColumn = this.getColumn();
-            this.opts.column = 1;
-        }
+        this.checkDynamicColumn();
+        this.el.classList.add('gs-' + this.opts.column);
         if (this.opts.rtl === 'auto') {
             this.opts.rtl = (el.style.direction === 'rtl');
         }
@@ -129,7 +162,7 @@ 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 = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+        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;
@@ -181,6 +214,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 _this._updateStyles(false, maxH); // false = don't recreate, just append if need be
             }
         });
+        // create initial global styles BEFORE loading children so resizeToContent margin can be calculated correctly
+        this._updateStyles(false, 0);
         if (this.opts.auto) {
             this.batchUpdate(); // prevent in between re-layout #1535 TODO: this only set float=true, need to prevent collision check...
             this.getGridItems().forEach(function (el) { return _this._prepareElement(el); });
@@ -193,13 +228,12 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             if (children.length)
                 this.load(children); // don't load empty
         }
+        // if (this.engine.nodes.length) this._updateStyles(); // update based on # of children. done in engine onChange CB
         this.setAnimation(this.opts.animate);
-        this._updateStyles();
-        this.el.classList.add('gs-' + this.opts.column);
         // dynamic grids require pausing during drag to detect over to nest vs push
         if (this.opts.subGridDynamic && !dd_manager_1.DDManager.pauseDrag)
             dd_manager_1.DDManager.pauseDrag = true;
-        if (((_b = this.opts.draggable) === null || _b === void 0 ? void 0 : _b.pause) !== undefined)
+        if (((_d = this.opts.draggable) === null || _d === void 0 ? void 0 : _d.pause) !== undefined)
             dd_manager_1.DDManager.pauseDrag = this.opts.draggable.pause;
         this._setupRemoveDrop();
         this._setupAcceptWidget();
@@ -424,7 +458,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         if (ops.column === 'auto') {
             autoColumn = true;
             ops.column = Math.max(node.w || 1, (nodeToAdd === null || nodeToAdd === void 0 ? void 0 : nodeToAdd.w) || 1);
-            ops.disableOneColumnMode = true; // driven by parent
+            delete ops.columnOpts; // driven by parent
         }
         // if we're converting an existing full item, move over the content to be the first sub item in the new grid
         var content = node.el.querySelector('.grid-stack-item-content');
@@ -566,7 +600,6 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             }
             if (this._autoColumn) {
                 o.column = 'auto';
-                delete o.disableOneColumnMode;
             }
             var origShow = o._alwaysShowResizeHandle;
             delete o._alwaysShowResizeHandle;
@@ -596,17 +629,17 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         var _this = this;
         if (addRemove === void 0) { addRemove = GridStack.addRemoveCB || true; }
         items = utils_1.Utils.cloneDeep(items); // so we can mod
-        // if passed list has coordinates, use them (insert from end to beginning for conflict resolution) else force widget same order
+        var column = this.getColumn();
+        // if passed list has coordinates, use them (insert from end to beginning for conflict resolution) else keep widget order
         var haveCoord = items.some(function (w) { return w.x !== undefined || w.y !== undefined; });
         if (haveCoord)
-            items = utils_1.Utils.sort(items, -1, this._prevColumn || this.getColumn());
+            items = utils_1.Utils.sort(items, -1, column);
         this._insertNotAppend = haveCoord; // if we create in reverse order...
-        // if we're loading a layout into for example 1 column (_prevColumn is set only when going to 1) and items don't fit, make sure to save
+        // if we're loading a layout into for example 1 column and items don't fit, make sure to save
         // the original wanted layout so we can scale back up correctly #1471
-        var column = this.opts.column;
-        if (this._prevColumn && this._prevColumn !== column && items.some(function (n) { return ((n.x || 0) + n.w) > column; })) {
+        if (items.some(function (n) { return ((n.x || 0) + (n.w || 1)) > column; })) {
             this._ignoreLayoutsNodeChange = true; // skip layout update
-            this.engine.cacheLayout(items, this._prevColumn, true);
+            this.engine.cacheLayout(items, 12, true); // TODO: 12 is arbitrary. use max value in layout ?
         }
         // if given a different callback, temporally set it as global option so creating will use it
         var prevCB = GridStack.addRemoveCB;
@@ -614,6 +647,10 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             GridStack.addRemoveCB = addRemove;
         var removed = [];
         this.batchUpdate();
+        // if we are blank (loading into empty like startup) temp remove animation
+        var noAnim = !this.engine.nodes.length;
+        if (noAnim)
+            this.setAnimation(false);
         // see if any items are missing from new layout and need to be removed first
         if (addRemove) {
             var copyNodes = __spreadArray([], this.engine.nodes, true); // don't loop through array you modify
@@ -639,22 +676,20 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             } // remove if found from list
             return true;
         });
-        var widthChanged = false;
         items.forEach(function (w) {
             var _a;
             var item = utils_1.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 9same if width doesn't change)
+                // 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_1.Utils.shouldSizeToContent(item))
                     w.h = item.h;
                 // check if missing coord, in which case find next empty slot with new (or old if missing) sizes
-                _this.engine.nodeBoundFix(w); // before widthChanged is checked below...
+                _this.engine.nodeBoundFix(w);
                 if (w.autoPosition || w.x === undefined || w.y === undefined) {
                     w.w = w.w || item.w;
                     w.h = w.h || item.h;
                     _this.engine.findEmptyPosition(w);
                 }
-                widthChanged = widthChanged || (w.w !== undefined && w.w !== item.w);
                 // add back to current list BUT force a collision check if it 'appears' we didn't change to make sure we don't overlap others now
                 _this.engine.nodes.push(item);
                 if (utils_1.Utils.samePos(item, w)) {
@@ -674,12 +709,14 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             }
         });
         this.engine.removedNodes = removed;
-        this.doContentResize(widthChanged, true); // we only need to wait for animation if we changed any widths
         this.batchUpdate(false);
         // after commit, clear that flag
         delete this._ignoreLayoutsNodeChange;
         delete this._insertNotAppend;
         prevCB ? GridStack.addRemoveCB = prevCB : delete GridStack.addRemoveCB;
+        // delay adding animation back
+        if (noAnim && this.opts.animate)
+            setTimeout(function () { return _this.setAnimation(_this.opts.animate); });
         return this;
     };
     /**
@@ -706,11 +743,18 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             (!forcePixel || !this.opts.cellHeightUnit || this.opts.cellHeightUnit === 'px')) {
             return this.opts.cellHeight;
         }
+        // do rem/em to px conversion
+        if (this.opts.cellHeightUnit === 'rem') {
+            return this.opts.cellHeight * parseFloat(getComputedStyle(document.documentElement).fontSize);
+        }
+        if (this.opts.cellHeightUnit === 'em') {
+            return this.opts.cellHeight * parseFloat(getComputedStyle(this.el).fontSize);
+        }
         // else get first cell height
         var el = this.el.querySelector('.' + this.opts.itemClass);
         if (el) {
-            var height = utils_1.Utils.toNumber(el.getAttribute('gs-h')) || 1; // since we don't write 1 anymore
-            return Math.round(el.offsetHeight / height);
+            var h = utils_1.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)
         var rows = parseInt(this.el.getAttribute('gs-current-row'));
@@ -754,7 +798,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         }
         this.opts.cellHeightUnit = data.unit;
         this.opts.cellHeight = data.h;
-        this.doContentResize(false, true); // no anim wait, but use attributes since we only change row height
+        this.resizeToContentCheck();
         if (update) {
             this._updateStyles(true); // true = force re-create for current # of rows
         }
@@ -764,11 +808,40 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     GridStack.prototype.cellWidth = function () {
         return this._widthOrContainer() / this.getColumn();
     };
-    /** return our expected width (or parent) for 1 column check */
-    GridStack.prototype._widthOrContainer = function () {
+    /** return our expected width (or parent) , and optionally of window for dynamic column check */
+    GridStack.prototype._widthOrContainer = function (forBreakpoint) {
+        var _a;
+        if (forBreakpoint === void 0) { forBreakpoint = false; }
         // use `offsetWidth` or `clientWidth` (no scrollbar) ?
         // https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively
-        return (this.el.clientWidth || this.el.parentElement.clientWidth || window.innerWidth);
+        return forBreakpoint && ((_a = this.opts.columnOpts) === null || _a === void 0 ? void 0 : _a.breakpointForWindow) ? window.innerWidth : (this.el.clientWidth || this.el.parentElement.clientWidth || window.innerWidth);
+    };
+    /** checks for dynamic column count for our current size, returning true if changed */
+    GridStack.prototype.checkDynamicColumn = function () {
+        var _a, _b;
+        var resp = this.opts.columnOpts;
+        if (!resp || (!resp.columnWidth && !((_a = resp.breakpoints) === null || _a === void 0 ? void 0 : _a.length)))
+            return false;
+        var column = this.getColumn();
+        var newColumn = column;
+        var w = this._widthOrContainer(true);
+        if (resp.columnWidth) {
+            newColumn = Math.min(Math.round(w / resp.columnWidth) || 1, resp.columnMax);
+        }
+        else {
+            // find the closest breakpoint (already sorted big to small) that matches
+            newColumn = resp.columnMax;
+            var i = 0;
+            while (i < resp.breakpoints.length && w <= resp.breakpoints[i].w) {
+                newColumn = resp.breakpoints[i++].c || column;
+            }
+        }
+        if (newColumn !== column) {
+            var bk = (_b = resp.breakpoints) === null || _b === void 0 ? void 0 : _b.find(function (b) { return b.c === newColumn; });
+            this.column(newColumn, (bk === null || bk === void 0 ? void 0 : bk.layout) || resp.layout);
+            return true;
+        }
+        return false;
     };
     /**
      * re-layout grid items to reclaim any empty space. Options are:
@@ -798,34 +871,19 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         if (!column || column < 1 || this.opts.column === column)
             return this;
         var oldColumn = this.getColumn();
-        // if we go into 1 column mode due to size change (disableOneColumnMode is off and we hit min width)
-        // then remember the original columns so we can restore.
-        if (column === 1 && !this.opts.disableOneColumnMode) {
-            this._prevColumn = oldColumn;
-        }
-        else {
-            delete this._prevColumn;
-        }
+        this.opts.column = column;
+        if (!this.engine)
+            return this; // called in constructor, noting else to do
+        this.engine.column = column;
         this.el.classList.remove('gs-' + oldColumn);
         this.el.classList.add('gs-' + column);
-        this.opts.column = this.engine.column = column;
-        // update the items now - see if the dom order nodes should be passed instead (else default to current list)
-        var domNodes;
-        if (column === 1 && this.opts.oneColumnModeDomSort) {
-            domNodes = [];
-            this.getGridItems().forEach(function (el) {
-                if (el.gridstackNode) {
-                    domNodes.push(el.gridstackNode);
-                }
-            });
-            if (!domNodes.length) {
-                domNodes = undefined;
-            }
-        }
-        this.engine.columnChanged(oldColumn, column, domNodes, layout);
+        // update the items now, checking if we have a custom children layout
+        /*const newChildren = this.opts.columnOpts?.breakpoints?.find(r => r.c === column)?.children;
+        if (newChildren) this.load(newChildren);
+        else*/ this.engine.columnChanged(oldColumn, column, undefined, layout);
         if (this._isAutoCellHeight)
             this.cellHeight();
-        this.doContentResize();
+        this.resizeToContentCheck(true); // wait for width resizing
         // and trigger our event last...
         this._ignoreLayoutsNodeChange = true; // skip layout update
         this._triggerChangeEvent();
@@ -835,9 +893,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     /**
      * get the number of columns in the grid (default 12)
      */
-    GridStack.prototype.getColumn = function () {
-        return this.opts.column;
-    };
+    GridStack.prototype.getColumn = function () { return this.opts.column; };
     /** returns an array of grid HTML elements (no placeholder) - used to iterate through our children in DOM order */
     GridStack.prototype.getGridItems = function () {
         var _this = this;
@@ -952,14 +1008,13 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         this._prepareElement(el, true, options);
         var node = el.gridstackNode;
         this._updateContainerHeight();
-        this.doContentResize(false, false, node);
         // see if there is a sub-grid to create
         if (node.subGridOpts) {
             this.makeSubGrid(el, node.subGridOpts, undefined, false); // node.subGrid will be used as option in method, no need to pass
         }
-        // if we're adding an item into 1 column (_prevColumn is set only when going to 1) make sure
+        // if we're adding an item into 1 column make sure
         // we don't override the larger 12 column layout that was already saved. #1985
-        if (this._prevColumn && this.opts.column === 1) {
+        if (this.opts.column === 1) {
             this._ignoreLayoutsNodeChange = true;
         }
         this._triggerAddEvent();
@@ -991,8 +1046,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             names.forEach(function (name) { return _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') {
-            // native CustomEvent handlers - cash the generic handlers so we can easily remove
             var noData = (name === 'enable' || name === 'disable');
             if (noData) {
                 this._gsEventHandler[name] = function (event) { return callback(event); };
@@ -1009,7 +1064,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             this._gsEventHandler[name] = callback;
         }
         else {
-            console.log('GridStack.on(' + name + ') event not supported, but you can still use $(".grid-stack").on(...) while jquery-ui is still used internally.');
+            console.log('GridStack.on(' + name + ') event not supported');
         }
         return this;
     };
@@ -1106,6 +1161,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         }
         return this;
     };
+    /** @internal */
+    GridStack.prototype.hasAnimationCSS = function () { return this.el.classList.contains('grid-stack-animate'); };
     /**
      * Toggle the grid static state, which permanently removes/add Drag&Drop support, unlike disable()/enable() that just turns it off/on.
      * Also toggle the grid-stack-static class.
@@ -1196,8 +1253,11 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             }
             utils_1.Utils.sanitizeMinMax(n);
             // finally move the widget and update attr
-            if (m)
+            if (m) {
+                var widthChanged = (m.w !== undefined && m.w !== n.w);
                 _this.moveNode(n, m);
+                _this.resizeToContentCheck(widthChanged, n); // wait for animation if we changed width
+            }
             if (m || changed) {
                 _this._writeAttr(el, n);
             }
@@ -1218,10 +1278,10 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     /**
      * Updates widget height to match the content height to avoid v-scrollbar or dead space.
      * Note: this assumes only 1 child under resizeToContentParent='.grid-stack-item-content' (sized to gridItem minus padding) that is at the entire content size wanted.
-     * useAttrSize set to true if GridStackNode.h should be used instead of actual container height when we don't need to wait for animation to finish to get actual DOM heights
+     * @param el grid item element
+     * @param useNodeH set to true if GridStackNode.h should be used instead of actual container height when we don't need to wait for animation to finish to get actual DOM heights
      */
-    GridStack.prototype.resizeToContent = function (el, useAttrSize) {
-        if (useAttrSize === void 0) { useAttrSize = false; }
+    GridStack.prototype.resizeToContent = function (el) {
         if (!el)
             return;
         el.classList.remove('size-to-content-max');
@@ -1231,14 +1291,12 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         if (!n)
             return;
         var grid = n.grid;
-        if (!grid)
-            return;
-        if (el.parentElement !== grid.el)
+        if (!grid || el.parentElement !== grid.el)
             return; // skip if we are not inside a grid
-        var cell = grid.getCellHeight();
+        var cell = grid.getCellHeight(true);
         if (!cell)
             return;
-        var height = useAttrSize && n.h ? n.h * cell : el.clientHeight; // getBoundingClientRect().height seem to flicker back and forth
+        var height = n.h ? n.h * cell : el.clientHeight; // getBoundingClientRect().height seem to flicker back and forth
         var item;
         if (n.resizeToContentParent)
             item = el.querySelector(n.resizeToContentParent);
@@ -1247,11 +1305,11 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         if (!item)
             return;
         var padding = el.clientHeight - item.clientHeight; // full - available height to our child (minus border, padding...)
-        var itemH = useAttrSize && n.h ? n.h * cell - padding : item.clientHeight; // calculated to what cellHeight is or will become (rather than actual to prevent waiting for animation to finish)
+        var itemH = n.h ? n.h * cell - padding : item.clientHeight; // calculated to what cellHeight is or will become (rather than actual to prevent waiting for animation to finish)
         var wantedH;
         if (n.subGrid) {
             // sub-grid - use their actual row count * their cell height
-            wantedH = n.subGrid.getRow() * n.subGrid.getCellHeight();
+            wantedH = n.subGrid.getRow() * n.subGrid.getCellHeight(true);
         }
         else {
             // NOTE: clientHeight & getBoundingClientRect() is undefined for text and other leaf nodes. use <div> container!
@@ -1283,12 +1341,11 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         }
     };
     /** call the user resize (so they can do extra work) else our build in version */
-    GridStack.prototype.resizeToContentCheck = function (el, useAttr) {
-        if (useAttr === void 0) { useAttr = false; }
+    GridStack.prototype.resizeToContentCBCheck = function (el) {
         if (GridStack.resizeToContentCB)
-            GridStack.resizeToContentCB(el, useAttr);
+            GridStack.resizeToContentCB(el);
         else
-            this.resizeToContent(el, useAttr);
+            this.resizeToContent(el);
     };
     /**
      * Updates the margins which will set all 4 sides at once - see `GridStackOptions.margin` for format options (CSS string format of 1,2,4 values or single number).
@@ -1383,7 +1440,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     /** @internal called to delete the current dynamic style sheet used for our layout */
     GridStack.prototype._removeStylesheet = function () {
         if (this._styles) {
-            utils_1.Utils.removeStylesheet(this._styleSheetClass);
+            var styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode;
+            utils_1.Utils.removeStylesheet(this._styleSheetClass, styleLocation);
             delete this._styles;
         }
         return this;
@@ -1395,7 +1453,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         if (forceUpdate) {
             this._removeStylesheet();
         }
-        if (!maxH)
+        if (maxH === undefined)
             maxH = this.getRow();
         this._updateContainerHeight();
         // if user is telling us they will handle the CSS themselves by setting heights to 0. Do we need this opts really ??
@@ -1475,26 +1533,25 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         }
         // if we're a nested grid inside an sizeToContent item, tell it to resize itself too
         if (parent && !parent.grid.engine.batchMode && utils_1.Utils.shouldSizeToContent(parent)) {
-            parent.grid.resizeToContentCheck(parent.el);
+            parent.grid.resizeToContentCBCheck(parent.el);
         }
         return this;
     };
     /** @internal */
     GridStack.prototype._prepareElement = function (el, triggerAddEvent, node) {
         if (triggerAddEvent === void 0) { triggerAddEvent = false; }
-        el.classList.add(this.opts.itemClass);
         node = node || this._readAttr(el);
         el.gridstackNode = node;
         node.el = el;
         node.grid = this;
-        var copy = __assign({}, node);
         node = this.engine.addNode(node, triggerAddEvent);
-        // write node attr back in case there was collision or we have to fix bad values during addNode()
-        if (!utils_1.Utils.same(node, copy)) {
-            this._writeAttr(el, node);
-        }
-        if (utils_1.Utils.shouldSizeToContent(node))
-            el.classList.add('size-to-content');
+        // write the dom sizes and class
+        this._writeAttr(el, node);
+        el.classList.add(types_1.gridDefaults.itemClass, this.opts.itemClass);
+        var sizeToContent = utils_1.Utils.shouldSizeToContent(node);
+        sizeToContent ? el.classList.add('size-to-content') : el.classList.remove('size-to-content');
+        if (sizeToContent)
+            this.resizeToContentCheck(false, node);
         this._prepareDragDropByNode(node);
         return this;
     };
@@ -1612,15 +1669,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             }
         }
         else {
-            // else check for 1 column in/out behavior
-            var oneColumn = !this.opts.disableOneColumnMode && this.el.clientWidth <= this.opts.oneColumnSize ||
-                (this.opts.column === 1 && !this._prevColumn);
-            if ((this.opts.column === 1) !== oneColumn) {
-                // if (this.opts.animate) this.setAnimation(false); // 1 <-> 12 is too radical, turn off animation and we need it for sizeToContent
-                this.column(oneColumn ? 1 : this._prevColumn);
-                // if (this.opts.animate) setTimeout(() => this.setAnimation(true));
-                columnChanged = true;
-            }
+            // else check for dynamic column
+            columnChanged = this.checkDynamicColumn();
         }
         // make the cells content square again
         if (this._isAutoCellHeight)
@@ -1631,46 +1681,46 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 n.subGrid.onResize();
         });
         if (!this._skipInitialResize)
-            this.doContentResize(columnChanged); // wait for anim of column changed (DOM reflow before we can size correctly)
+            this.resizeToContentCheck(columnChanged); // wait for anim of column changed (DOM reflow before we can size correctly)
         delete this._skipInitialResize;
         this.batchUpdate(false);
         return this;
     };
-    GridStack.prototype.doContentResize = function (delay, useAttr, n) {
+    /** resizes content for given node (or all) if shouldSizeToContent() is true */
+    GridStack.prototype.resizeToContentCheck = function (delay, n) {
         var _this = this;
-        if (delay === void 0) { delay = true; }
-        if (useAttr === void 0) { useAttr = false; }
+        if (delay === void 0) { delay = false; }
         if (n === void 0) { n = undefined; }
+        if (!this.engine)
+            return; // we've been deleted in between!
         // update any gridItem height with sizeToContent, but wait for DOM $animation_speed to settle if we changed column count
         // TODO: is there a way to know what the final (post animation) size of the content will be so we can animate the column width and height together rather than sequentially ?
-        setTimeout(function () {
-            if (!_this.engine)
-                return; // we've been deleted in between!
-            if (n) {
+        if (delay && this.hasAnimationCSS())
+            return setTimeout(function () { return _this.resizeToContentCheck(false, n); }, 300 + 10);
+        if (n) {
+            if (utils_1.Utils.shouldSizeToContent(n))
+                this.resizeToContentCBCheck(n.el);
+        }
+        else if (this.engine.nodes.some(function (n) { return utils_1.Utils.shouldSizeToContent(n); })) {
+            var nodes = __spreadArray([], this.engine.nodes, true); // in case order changes while resizing one
+            this.batchUpdate();
+            nodes.forEach(function (n) {
                 if (utils_1.Utils.shouldSizeToContent(n))
-                    _this.resizeToContentCheck(n.el, useAttr);
-            }
-            else if (_this.engine.nodes.some(function (n) { return utils_1.Utils.shouldSizeToContent(n); })) {
-                var nodes = __spreadArray([], _this.engine.nodes, true); // in case order changes while resizing one
-                _this.batchUpdate();
-                nodes.forEach(function (n) {
-                    if (utils_1.Utils.shouldSizeToContent(n))
-                        _this.resizeToContentCheck(n.el, useAttr);
-                });
-                _this.batchUpdate(false);
-            }
-            // call this regardless of shouldSizeToContent because widget might need to stretch to take available space after a resize
-            if (_this._gsEventHandler['resizecontent'])
-                _this._gsEventHandler['resizecontent'](null, n ? [n] : _this.engine.nodes);
-        }, delay ? 300 + 10 : 0);
+                    _this.resizeToContentCBCheck(n.el);
+            });
+            this.batchUpdate(false);
+        }
+        // call this regardless of shouldSizeToContent because widget might need to stretch to take available space after a resize
+        if (this._gsEventHandler['resizecontent'])
+            this._gsEventHandler['resizecontent'](null, n ? [n] : this.engine.nodes);
     };
     /** add or remove the grid element size event handler */
     GridStack.prototype._updateResizeEvent = function (forceRemove) {
         var _this = this;
         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 oneColumn (i.e. doing work)
+        // 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.disableOneColumnMode
+        var trackSize = !this.parentGridItem && (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);
@@ -2071,6 +2121,10 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 return false;
             var wasAdded = !!_this.placeholder.parentElement; // skip items not actually added to us because of constrains, but do cleanup #1419
             _this.placeholder.remove();
+            // disable animation when replacing a placeholder (already positioned) with actual content
+            var noAnim = wasAdded && _this.opts.animate;
+            if (noAnim)
+                _this.setAnimation(false);
             // notify previous grid of removal
             // console.log('drop delete _gridstackNodeOrig') // TEST
             var origNode = el._gridstackNodeOrig;
@@ -2115,15 +2169,13 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             // @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._writeAttr(el, node);
-            el.classList.add(types_1.gridDefaults.itemClass, _this.opts.itemClass);
             _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._prepareDragDropByNode(node);
             _this._updateContainerHeight();
             _this.engine.addedNodes.push(node); // @ts-ignore
             _this._triggerAddEvent(); // @ts-ignore
@@ -2132,6 +2184,9 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             if (_this._gsEventHandler['dropped']) {
                 _this._gsEventHandler['dropped'](__assign(__assign({}, event), { type: 'dropped' }), origNode && origNode.grid ? origNode : undefined, node);
             }
+            // delay adding animation back
+            if (noAnim)
+                setTimeout(function () { return _this.setAnimation(_this.opts.animate); });
             return false; // prevent parent from receiving msg (which may be grid as well)
         });
         return this;
@@ -2201,6 +2256,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 delete node._moving;
                 delete node._event;
                 delete node._lastTried;
+                var widthChanged = node.w !== node._orig.w;
                 // if the item has moved to another grid, we're done here
                 var target = event.target;
                 if (!target.gridstackNode || target.gridstackNode.grid !== _this)
@@ -2238,7 +2294,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 if (event.type === 'resizestop') {
                     if (Number.isInteger(node.sizeToContent))
                         node.sizeToContent = node.h; // new soft limit
-                    _this.doContentResize(false, true, node); // no amin wait as will use the actual sized coordinate attr
+                    _this.resizeToContentCheck(widthChanged, node); // wait for width animation if changed
                 }
             };
             dd.draggable(el, {
@@ -2414,7 +2470,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     GridStack.Utils = utils_1.Utils;
     /** scoping so users can call new GridStack.Engine(12) for example */
     GridStack.Engine = gridstack_engine_1.GridStackEngine;
-    GridStack.GDRev = '9.5.1';
+    GridStack.GDRev = '10.0.1';
     return GridStack;
 }());
 //# sourceMappingURL=gridstack.js.map