Merge pull request #3028 from adumesny/master

`updateOptions()` no longer modifies passed in struct

Author: adumesny

doc/CHANGES.md

@@ -126,8 +126,9 @@ Change log
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
 ## 12.0.0-dev (TBD)
-* [#3022](https://github.com/gridstack/gridstack.js/pull/3022) removed ES5 support (IE doesn't support CSS vars needed now)
-* [#3024](https://github.com/gridstack/gridstack.js/pull/3024) remove legacy code support for disableOneColumnMode, oneColumnSize, oneColumnModeDomSort
+* rem [#3022](https://github.com/gridstack/gridstack.js/pull/3022) removed ES5 support (IE doesn't support CSS vars needed now)
+* rem [#3027](https://github.com/gridstack/gridstack.js/pull/3027) remove legacy code support for disableOneColumnMode, oneColumnSize, oneColumnModeDomSort
+* fix [#3028](https://github.com/gridstack/gridstack.js/pull/3028) `updateOptions()` no longer modifies passed in struct. only field we check are being handled too.
 
 ## 12.0.0 (2025-04-12)
 * feat: [#2854](https://github.com/gridstack/gridstack.js/pull/2854) Removed dynamic stylesheet and migrated to CSS vars. Thank you [lmartorella](https://github.com/lmartorella)

package.json

@@ -25,8 +25,7 @@
     }
   ],
   "scripts": {
-    "build": "yarn --no-progress && yarn build:ng && grunt && yarn build:es6 && yarn doc",
-    "build:es6": "webpack && tsc --stripInternal",
+    "build": "yarn --no-progress && yarn build:ng && grunt && webpack && tsc --stripInternal && yarn doc",
     "build:ng": "cd angular && yarn --no-progress && yarn build lib",
     "w": "webpack",
     "t": "rm -rf dist/* && grunt && tsc --stripInternal",

src/gridstack.ts

@@ -277,14 +277,14 @@ export class GridStack {
     // cleanup responsive opts (must have columnWidth | breakpoints) then sort breakpoints by size (so we can match during resize)
     const resp = opts.columnOpts;
     if (resp) {
-      if (!resp.columnWidth && !resp.breakpoints?.length) {
+      const bk = resp.breakpoints;
+      if (!resp.columnWidth && !bk?.length) {
         delete opts.columnOpts;
-        bk = undefined;
       } else {
         resp.columnMax = resp.columnMax || 12;
+        if (bk?.length > 1) bk.sort((a, b) => (b.w || 0) - (a.w || 0));
       }
     }
-    if (bk?.length > 1) bk.sort((a, b) => (b.w || 0) - (a.w || 0));
 
     // elements DOM attributes override any passed options (like CSS style) - merge the two together
     const defaults: GridStackOptions = {
@@ -1246,6 +1246,7 @@ export class GridStack {
     } else {
       this.el.classList.remove('grid-stack-animate');
     }
+    this.opts.animate = doAnimate;
     return this;
   }
 
@@ -1279,22 +1280,32 @@ export class GridStack {
    */
   public updateOptions(o: GridStackOptions): GridStack {
     const opts = this.opts;
-    if (o.acceptWidgets !== undefined) this._setupAcceptWidget();
-    if (o.animate !== undefined) this.setAnimation();
-    if (o.cellHeight) { this.cellHeight(o.cellHeight); delete o.cellHeight; }
-    if (o.class && o.class !== opts.class) { if (opts.class) this.el.classList.remove(opts.class); this.el.classList.add(o.class); }
-    if (typeof(o.column) === 'number' && !o.columnOpts) { this.column(o.column); delete o.column; }// responsive column take over actual count
+    if (o === opts) return this; // nothing to do
+    if (o.acceptWidgets !== undefined) { opts.acceptWidgets = o.acceptWidgets; this._setupAcceptWidget(); }
+    if (o.animate !== undefined) this.setAnimation(o.animate);
+    if (o.cellHeight) this.cellHeight(o.cellHeight);
+    if (o.class !== undefined && o.class !== opts.class) { if (opts.class) this.el.classList.remove(opts.class); if (o.class) this.el.classList.add(o.class); }
+    // responsive column take over actual count (keep what we have now)
+    if (o.columnOpts) {
+      this.opts.columnOpts = o.columnOpts;
+      this.checkDynamicColumn();
+    } else if (o.columnOpts === null && this.opts.columnOpts) {
+      delete this.opts.columnOpts;
+      this._updateResizeEvent();
+    } else if (typeof(o.column) === 'number') this.column(o.column);
     if (o.margin !== undefined) this.margin(o.margin);
     if (o.staticGrid !== undefined) this.setStatic(o.staticGrid);
     if (o.disableDrag !== undefined && !o.staticGrid) this.enableMove(!o.disableDrag);
     if (o.disableResize !== undefined && !o.staticGrid) this.enableResize(!o.disableResize);
     if (o.float !== undefined) this.float(o.float);
-    if (o.row !== undefined) { opts.minRow = opts.maxRow = o.row; }
-    if (o.children?.length) { this.load(o.children); delete o.children; }
+    if (o.row !== undefined) { opts.minRow = opts.maxRow = opts.row = o.row; }
+    else {
+      if (opts.minRow !== undefined) opts.minRow = o.minRow;
+      if (opts.maxRow !== undefined) opts.maxRow = o.maxRow;
+    }
+    if (o.children?.length) this.load(o.children);
     // TBD if we have a real need for these (more complex code)
     // alwaysShowResizeHandle, draggable, handle, handleClass, itemClass, layout, placeholderClass, placeholderText, resizable, removable, row,...
-    // rest are just copied over...
-    this.opts = {...this.opts, ...o};
     return this;
   }