fix: Composite Editor should work with Cell Menu (#370)

* fix: Composite Editor should work with Cell Menu

package.json

@@ -89,11 +89,11 @@
     "/src/slickgrid-react"
   ],
   "dependencies": {
-    "@slickgrid-universal/common": "~5.3.2",
-    "@slickgrid-universal/custom-footer-component": "~5.3.2",
-    "@slickgrid-universal/empty-warning-component": "~5.3.2",
+    "@slickgrid-universal/common": "~5.3.3",
+    "@slickgrid-universal/custom-footer-component": "~5.3.3",
+    "@slickgrid-universal/empty-warning-component": "~5.3.3",
     "@slickgrid-universal/event-pub-sub": "~5.3.0",
-    "@slickgrid-universal/pagination-component": "~5.3.2",
+    "@slickgrid-universal/pagination-component": "~5.3.3",
     "dequal": "^2.0.3",
     "i18next": "^23.11.5",
     "sortablejs": "^1.15.2"
@@ -105,18 +105,18 @@
     "@formkit/tempo": "^0.1.2",
     "@popperjs/core": "^2.11.8",
     "@release-it/conventional-changelog": "^8.0.1",
-    "@slickgrid-universal/composite-editor-component": "~5.3.2",
-    "@slickgrid-universal/custom-tooltip-plugin": "~5.3.2",
-    "@slickgrid-universal/excel-export": "~5.3.2",
-    "@slickgrid-universal/graphql": "~5.3.2",
-    "@slickgrid-universal/odata": "~5.3.2",
-    "@slickgrid-universal/rxjs-observable": "~5.3.2",
-    "@slickgrid-universal/text-export": "~5.3.2",
+    "@slickgrid-universal/composite-editor-component": "~5.3.3",
+    "@slickgrid-universal/custom-tooltip-plugin": "~5.3.3",
+    "@slickgrid-universal/excel-export": "~5.3.3",
+    "@slickgrid-universal/graphql": "~5.3.3",
+    "@slickgrid-universal/odata": "~5.3.3",
+    "@slickgrid-universal/rxjs-observable": "~5.3.3",
+    "@slickgrid-universal/text-export": "~5.3.3",
     "@types/dompurify": "^3.0.5",
     "@types/fnando__sparkline": "^0.3.7",
     "@types/i18next-xhr-backend": "^1.4.2",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.14.9",
+    "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/sortablejs": "^1.15.8",
@@ -130,9 +130,9 @@
     "copyfiles": "^2.4.1",
     "css-loader": "^7.1.2",
     "custom-event-polyfill": "^1.0.7",
-    "cypress": "^13.12.0",
+    "cypress": "^13.13.0",
     "cypress-real-events": "^1.13.0",
-    "dompurify": "^3.1.5",
+    "dompurify": "^3.1.6",
     "esbuild-loader": "^4.2.0",
     "eslint": "^9.6.0",
     "eslint-plugin-cypress": "^3.3.0",
@@ -150,14 +150,14 @@
     "jest-extended": "^4.0.2",
     "jsdom-global": "^3.0.2",
     "mini-css-extract-plugin": "^2.9.0",
-    "npm-run-all2": "^6.2.0",
+    "npm-run-all2": "^6.2.2",
     "promise-polyfill": "^8.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^14.1.2",
-    "react-router-dom": "^6.24.0",
+    "react-router-dom": "^6.24.1",
     "regenerator-runtime": "^0.14.1",
-    "release-it": "^17.4.0",
+    "release-it": "^17.4.1",
     "rimraf": "^5.0.7",
     "rxjs": "^7.8.1",
     "sass": "^1.77.6",
@@ -166,8 +166,8 @@
     "style-loader": "4.0.0",
     "ts-jest": "^29.1.5",
     "ts-loader": "^9.5.1",
-    "typescript": "^5.5.2",
-    "typescript-eslint": "^7.14.1",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^7.15.0",
     "webpack": "^5.92.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4"
@@ -179,4 +179,4 @@
   "resolutions": {
     "caniuse-lite": "1.0.30001638"
   }
-}
+}

src/examples/slickgrid/Example30.tsx

@@ -455,6 +455,9 @@ export default class Example30 extends React.Component<Props, State> {
       },
       // when using the cellMenu, you can change some of the default options and all use some of the callback methods
       enableCellMenu: true,
+      cellMenu: {
+        activateCellOnMenuClick: true, // this is important to know which row index to use for Composite Editor
+      },
       gridMenu: {
         hideToggleDarkModeCommand: false, // hidden by default
         onCommand: (_, args) => {

test/cypress/e2e/example30.cy.ts

@@ -613,4 +613,33 @@ describe('Example 30  Composite Editor Modal', () => {
 
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(10)`).should('contain', '');
   });
+
+  it('should open Edit Composite Editor from Cell Menu and expect Task 4 on 6th row', () => {
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 6}px;"] > .slick-cell:nth(11)`).click();
+
+    cy.get('.slick-menu-item .slick-menu-content')
+      .first()
+      .should('contain', 'Edit Row')
+      .click();
+
+    cy.get('.slick-editor-modal-title')
+      .should('contain', 'Editing - Task 4');
+
+    cy.get('.slick-editor-modal-footer .btn-cancel')
+      .click();
+  });
+
+  it('should open Clone Composite Editor from Cell Menu and expect Task 4 on 6th row', () => {
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 6}px;"] > .slick-cell:nth(11)`).click();
+
+    cy.get('.slick-menu-item .slick-menu-content:nth(1)')
+      .should('contain', 'Clone Row')
+      .click();
+
+    cy.get('.slick-editor-modal-title')
+      .should('contain', 'Clone - Task 4');
+
+    cy.get('.slick-editor-modal-footer .btn-cancel')
+      .click();
+  });
 });