feat: upgraded gridstack to v12 (#151)

BREAKING CHANGE: Major release bump for gridstack

Author: FilipKujavec

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [5.0.0](https://github.com/yahoo/ember-gridstack/compare/v4.0.1...v5.0.0) (2025-05-22)
+
+### Features
+
+- BREAKING: update to gridstack v12.1.2 see https://github.com/gridstack/gridstack.js?tab=readme-ov-file#migrating-to-v8 for migration guides
+
 ## [4.0.0](https://github.com/yahoo/ember-gridstack/compare/v3.2.0...v4.0.0) (2023-03-08)
 
 ### Features

README.md

@@ -14,9 +14,9 @@ Ember components to build drag-and-drop multi-column grids powered by [gridstack
 ember install ember-gridstack
 ```
 
-## Migrating to v3
+## Migrating to v5
 
-View the full [v3.0.0 release notes](./CHANGELOG.md#300) for updates and breaking changes.
+View the full [v5.0.0 release notes](./CHANGELOG.md#500-2025-05-22) for updates and breaking changes.
 
 ## Basic Usage
 
@@ -125,7 +125,7 @@ The `<GridStackItem>` component uses the block form to yield the content of the
 export default class CustomComponent extends Component {
   didInsertElement() {
     super.didInsertElement(...arguments);
-    this.parentContainer.element.addEventListener('resizestop', () => {
+    this.parentContainer.element.addEventListener("resizestop", () => {
       //handle resize
     });
   }

index.js

@@ -9,6 +9,5 @@ module.exports = {
     this._super.included.apply(this, arguments);
 
     app.import(`${GRIDSTACK_DIR}/gridstack.css`);
-    app.import(`${GRIDSTACK_DIR}/gridstack-extra.css`);
   },
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-gridstack",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "Ember Gridstack",
   "keywords": [
     "ember-addon",
@@ -40,7 +40,7 @@
     "ember-cli-babel": "^7.26.11",
     "ember-cli-htmlbars": "^6.2.0",
     "ember-modifier": "^3.0.0 || ^4.1.0",
-    "gridstack": "^7.2.2"
+    "gridstack": "^12.1.2"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.21.3",

tests/integration/components/grid-stack-test.js

@@ -11,7 +11,7 @@ module('Integration | Component | grid stack', function (hooks) {
   setupRenderingTest(hooks);
 
   test('gridstack renders', async function (assert) {
-    assert.expect(2);
+    assert.expect(1);
 
     await render(hbs`
       <GridStack class="test-grid">
@@ -22,12 +22,8 @@ module('Integration | Component | grid stack', function (hooks) {
     `);
 
     assert
-      .dom('.test-grid.grid-stack .grid-stack-item')
-      .hasClass('ui-draggable', 'Dom elements with grid-stack-item class are initialized by gridstack');
-
-    assert
-      .dom('.test-grid.grid-stack .grid-stack-item')
-      .hasClass('ui-resizable', 'Dom elements with grid-stack-item class are initialized by gridstack');
+      .dom('.test-grid.grid-stack .grid-stack-item > .ui-resizable-handle.ui-resizable-se')
+      .exists('Dom elements with grid-stack-item class are initialized by gridstack');
   });
 
   test('gridstack with items', async function (assert) {
@@ -46,15 +42,15 @@ module('Integration | Component | grid stack', function (hooks) {
     `);
 
     assert
-      .dom('.grid-stack .grid-stack-item.ui-draggable.ui-resizable')
+      .dom('.grid-stack .grid-stack-item > .ui-resizable-handle.ui-resizable-se')
       .exists({ count: 2 }, 'initial grid-stack-item components are initialized by gridstack');
 
     run(() => {
       this.items.pushObject(2);
     });
 
     assert
-      .dom('.grid-stack .grid-stack-item.ui-draggable.ui-resizable')
+      .dom('.grid-stack .grid-stack-item > .ui-resizable-handle.ui-resizable-se')
       .exists(
         { count: 3 },
         'new grid-stack-item components are initialized by gridstack when added through an each loop'
@@ -275,26 +271,38 @@ module('Integration | Component | grid stack', function (hooks) {
     `);
 
     this.items.forEach(({ id, options }) => {
-      assert.dom(`[data-id="${id}"]`).hasAttribute('gs-x', `${options.x}`, 'Initial grid-stack-item layout is correct');
-      assert.dom(`[data-id="${id}"]`).hasAttribute('gs-y', `${options.y}`, 'Initial grid-stack-item layout is correct');
+      if (options.x === 0) {
+        assert.dom(`[data-id="${id}"]`).doesNotHaveAttribute('gs-x', 'Initial grid-stack-item layout is correct');
+      } else {
+        assert
+          .dom(`[data-id="${id}"]`)
+          .hasAttribute('gs-x', `${options.x}`, 'Initial grid-stack-item layout is correct');
+      }
+
+      if (options.y === 0) {
+        assert.dom(`[data-id="${id}"]`).doesNotHaveAttribute('gs-y', 'Initial grid-stack-item layout is correct');
+      } else {
+        assert
+          .dom(`[data-id="${id}"]`)
+          .hasAttribute('gs-y', `${options.y}`, 'Initial grid-stack-item layout is correct');
+      }
     });
 
     // Update the position of item 1
     this.set('items.1.options', { x: 2, y: 1, w: 12, h: 1 });
-
     assert
       .dom(`[data-id="0"]`)
-      .hasAttribute('gs-x', '0', 'Updating a grid-stack-item leaves unaffected items the same');
+      .doesNotHaveAttribute('gs-x', 'Updating a grid-stack-item leaves unaffected items the same');
     assert
       .dom(`[data-id="0"]`)
-      .hasAttribute('gs-y', '0', 'Updating a grid-stack-item leaves unaffected items the same');
+      .doesNotHaveAttribute('gs-y', 'Updating a grid-stack-item leaves unaffected items the same');
 
-    assert.dom(`[data-id="1"]`).hasAttribute('gs-x', '2', 'Updating a grid-stack-item updates moves the item');
+    assert.dom(`[data-id="1"]`).doesNotHaveAttribute('gs-x', 'Updating a grid-stack-item updates moves the item');
     assert.dom(`[data-id="1"]`).hasAttribute('gs-y', '1', 'Updating a grid-stack-item updates moves the item');
 
     assert
       .dom(`[data-id="2"]`)
-      .hasAttribute('gs-x', '0', 'Updating a grid-stack-item moves conflicting items to a different row');
+      .doesNotHaveAttribute('gs-x', 'Updating a grid-stack-item moves conflicting items to a different row');
     assert
       .dom(`[data-id="2"]`)
       .hasAttribute('gs-y', '2', 'Updating a grid-stack-item moves conflicting items to a different row');

yarn.lock

@@ -8052,10 +8052,10 @@ graphemer@^1.4.0:
   resolved "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz"
   integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
-gridstack@^7.2.2:
-  version "7.3.0"
-  resolved "https://registry.npmjs.org/gridstack/-/gridstack-7.3.0.tgz"
-  integrity sha512-JKZgsHzm1ljkn1NnBZpf8j4NDOBCXTuw0m1ZC0sr6NKUh0BFWzXAONIxtX1hWGUVeKLj5l1VcmnTwCXw5ypDNw==
+gridstack@^12.1.2:
+  version "12.1.2"
+  resolved "https://registry.yarnpkg.com/gridstack/-/gridstack-12.1.2.tgz#784f6d55873bb48fa9230c1284f769c9fbf785a8"
+  integrity sha512-IC1mkm5xonhAnftwIxsG+B3bawxC61ciKWEvX15ExpVQPbNVN7O9aZZhM7Y/eE4JaIR8PXrdkjd12gMnwNYRLQ==
 
 growly@^1.3.0:
   version "1.3.0"