slickgrid-react 4.4.1 → 4.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slickgrid-react",
-  "version": "4.4.1",
+  "version": "4.6.0",
   "description": "Slickgrid components made available in React",
   "keywords": [
     "react",
@@ -11,20 +11,12 @@
   ],
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
-  "types": "index.d.ts",
-  "typesVersions": {
-    ">=4.2": {
-      "*": [
-        "dist/types/*"
-      ]
-    }
-  },
+  "types": "./dist/cjs/index.js",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
-      "node": "./dist/cjs/index.js",
-      "require": "./dist/cjs/index.js",
-      "default": "./dist/esm/index.js"
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
     },
     "./package.json": "./package.json"
   },
@@ -57,6 +49,7 @@
   ],
   "scripts": {
     "build:demo": "webpack --env production",
+    "dev": "webpack serve --env development",
     "delete:dist": "rimraf dist",
     "lint": "eslint src/slickgrid-react --ext .ts",
     "build:cjs": "tsc --project src/slickgrid-react/tsconfig.build.json --outDir dist/cjs --module commonjs --declaration false",
@@ -69,7 +62,6 @@
     "postbuild": "npm-run-all copy-i18n:dist copy-asset-lib",
     "copy-asset-lib": "copyfiles --up 2 src/assets/lib/** dist",
     "copy-i18n:dist": "copyfiles --up 3 src/assets/i18n/**/*.* dist/i18n",
-    "start:dev": "webpack serve --env development",
     "cypress:open": "cypress open --config-file test/cypress.config.ts",
     "cypress:ci": "cypress run --config-file test/cypress.config.ts",
     "test:ci": "npx jest --runInBand --coverage=true --ci --config ./test/jest.config.js",
@@ -96,15 +88,14 @@
     "/src/slickgrid-react"
   ],
   "dependencies": {
-    "@slickgrid-universal/common": "~4.4.1",
-    "@slickgrid-universal/custom-footer-component": "~4.4.1",
-    "@slickgrid-universal/empty-warning-component": "~4.4.1",
-    "@slickgrid-universal/event-pub-sub": "~4.4.1",
-    "@slickgrid-universal/pagination-component": "~4.4.1",
+    "@slickgrid-universal/common": "~4.6.0",
+    "@slickgrid-universal/custom-footer-component": "~4.6.0",
+    "@slickgrid-universal/empty-warning-component": "~4.6.0",
+    "@slickgrid-universal/event-pub-sub": "~4.6.0",
+    "@slickgrid-universal/pagination-component": "~4.6.0",
     "dequal": "^2.0.3",
-    "dompurify": "^3.0.8",
     "font-awesome": "^4.7.0",
-    "i18next": "^23.8.2",
+    "i18next": "^23.10.1",
     "moment-mini": "^2.29.4",
     "regenerator-runtime": "^0.14.1",
     "sortablejs": "^1.15.2"
@@ -115,15 +106,15 @@
     "@fnando/sparkline": "^0.3.10",
     "@popperjs/core": "^2.11.8",
     "@release-it/conventional-changelog": "^8.0.1",
-    "@slickgrid-universal/composite-editor-component": "~4.4.1",
-    "@slickgrid-universal/custom-tooltip-plugin": "~4.4.1",
-    "@slickgrid-universal/excel-export": "~4.4.1",
-    "@slickgrid-universal/graphql": "~4.4.1",
-    "@slickgrid-universal/odata": "~4.4.1",
-    "@slickgrid-universal/rxjs-observable": "~4.4.1",
-    "@slickgrid-universal/text-export": "~4.4.1",
+    "@slickgrid-universal/composite-editor-component": "~4.6.0",
+    "@slickgrid-universal/custom-tooltip-plugin": "~4.6.0",
+    "@slickgrid-universal/excel-export": "~4.6.0",
+    "@slickgrid-universal/graphql": "~4.6.0",
+    "@slickgrid-universal/odata": "~4.6.0",
+    "@slickgrid-universal/rxjs-observable": "~4.6.0",
+    "@slickgrid-universal/text-export": "~4.6.0",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
+    "@testing-library/react": "^14.2.2",
     "@testing-library/user-event": "^14.5.2",
     "@types/bluebird": "^3.5.42",
     "@types/dompurify": "^3.0.5",
@@ -131,65 +122,65 @@
     "@types/fnando__sparkline": "^0.3.7",
     "@types/i18next-xhr-backend": "^1.4.2",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.11.17",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
-    "@types/sortablejs": "^1.15.7",
+    "@types/node": "^20.11.30",
+    "@types/react": "^18.2.69",
+    "@types/react-dom": "^18.2.22",
+    "@types/sortablejs": "^1.15.8",
     "@types/text-encoding-utf-8": "^1.0.5",
     "@types/webpack": "^5.28.5",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
     "@webpack-cli/serve": "^2.0.5",
-    "bootstrap": "^5.3.2",
+    "bootstrap": "^5.3.3",
     "clean-webpack-plugin": "^4.0.0",
     "concurrently": "^8.2.2",
     "copy-webpack-plugin": "^12.0.2",
     "copyfiles": "^2.4.1",
     "css-loader": "^6.10.0",
     "custom-event-polyfill": "^1.0.7",
-    "cypress": "^13.6.4",
-    "esbuild-loader": "^4.0.3",
-    "eslint": "^8.56.0",
+    "cypress": "^13.7.1",
+    "esbuild-loader": "^4.1.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "fetch-jsonp": "^1.3.0",
     "font-awesome": "^4.7.0",
     "html-loader": "5.0.0",
     "html-webpack-plugin": "5.6.0",
-    "i18next-http-backend": "^2.4.3",
+    "i18next-http-backend": "^2.5.0",
     "isomorphic-fetch": "^3.0.0",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-extended": "^4.0.2",
     "jsdom-global": "^3.0.2",
-    "mini-css-extract-plugin": "^2.8.0",
+    "mini-css-extract-plugin": "^2.8.1",
     "moment-mini": "^2.29.4",
     "npm-run-all2": "^6.1.2",
     "promise-polyfill": "^8.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^14.0.5",
-    "react-router-dom": "^6.22.0",
-    "release-it": "^17.0.3",
+    "react-i18next": "^14.1.0",
+    "react-router-dom": "^6.22.3",
+    "release-it": "^17.1.1",
     "rimraf": "^5.0.5",
     "rxjs": "^7.8.1",
-    "sass": "^1.70.0",
-    "sass-loader": "^14.1.0",
+    "sass": "^1.72.0",
+    "sass-loader": "^14.1.1",
     "serve": "^14.2.1",
     "style-loader": "3.3.4",
     "ts-jest": "^29.1.2",
     "ts-loader": "^9.5.1",
-    "typescript": "^5.3.3",
-    "webpack": "^5.90.1",
+    "typescript": "^5.4.3",
+    "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.0"
+    "webpack-dev-server": "^5.0.4"
   },
   "engines": {
     "node": ">=16.15.0",
     "npm": ">=8.5.0"
   },
   "resolutions": {
-    "caniuse-lite": "1.0.30001584"
+    "caniuse-lite": "1.0.30001599"
   }
 }

package/src/slickgrid-react/components/slickgrid-react.tsx

@@ -8,7 +8,6 @@ import {
   BackendServiceApi,
   BackendServiceOption,
   Column,
-  ColumnEditor,
   DataViewOption,
   EventSubscription,
   ExtensionList,
@@ -394,6 +393,11 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
         this.displayEmptyDataWarning(finalTotalCount < 1);
       }
     }
+
+    // add dark mode CSS class when enabled
+    if (this.gridOptions.darkMode) {
+      this.setDarkMode(true);
+    }
   }
 
   initialization(eventHandler: SlickEventHandler) {
@@ -849,6 +853,13 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
           this.sharedService.visibleColumns = args.impactedColumns;
         });
 
+        this._eventHandler.subscribe(grid.onSetOptions, (_e, args) => {
+          // add/remove dark mode CSS class when enabled
+          if (args.optionsBefore.darkMode !== args.optionsAfter.darkMode && this.sharedService.gridContainerElement) {
+            this.setDarkMode(args.optionsAfter.darkMode);
+          }
+        });
+
         // load any presets if any (after dataset is initialized)
         this.loadColumnPresetsWhenDatasetInitialized();
         this.loadFilterPresetsWhenDatasetInitialized();
@@ -1113,6 +1124,14 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
     return paginationOptions;
   }
 
+  setDarkMode(dark = false) {
+    if (dark) {
+      this.sharedService.gridContainerElement?.classList.add('slick-dark-mode');
+    } else {
+      this.sharedService.gridContainerElement?.classList.remove('slick-dark-mode');
+    }
+  }
+
   /**
    * Dynamically change or update the column definitions list.
    * We will re-render the grid so that the new header and data shows up correctly.
@@ -1226,34 +1245,36 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
 
   /** Load the Editor Collection asynchronously and replace the "collection" property when Promise resolves */
   protected loadEditorCollectionAsync(column: Column) {
-    const collectionAsync = (column?.editor as ColumnEditor).collectionAsync;
-    (column?.editor as ColumnEditor).disabled = true; // disable the Editor DOM element, we'll re-enable it after receiving the collection with "updateEditorCollection()"
-
-    if (collectionAsync instanceof Promise) {
-      // wait for the "collectionAsync", once resolved we will save it into the "collection"
-      // the collectionAsync can be of 3 types HttpClient, HttpFetch or a Promise
-      collectionAsync.then((response: any | any[]) => {
-        if (Array.isArray(response)) {
-          this.updateEditorCollection(column, response); // from Promise
-        } else if (response instanceof Response && typeof response.json === 'function') {
-          if (response.bodyUsed) {
-            console.warn(`[SlickGrid-React] The response body passed to collectionAsync was already read.`
-              + `Either pass the dataset from the Response or clone the response first using response.clone()`);
-          } else {
-            // from Fetch
-            (response as Response).json().then(data => this.updateEditorCollection(column, data));
+    if (column?.editor) {
+      const collectionAsync = column.editor.collectionAsync;
+      column.editor.disabled = true; // disable the Editor DOM element, we'll re-enable it after receiving the collection with "updateEditorCollection()"
+
+      if (collectionAsync instanceof Promise) {
+        // wait for the "collectionAsync", once resolved we will save it into the "collection"
+        // the collectionAsync can be of 3 types HttpClient, HttpFetch or a Promise
+        collectionAsync.then((response: any | any[]) => {
+          if (Array.isArray(response)) {
+            this.updateEditorCollection(column, response); // from Promise
+          } else if (response instanceof Response && typeof response.json === 'function') {
+            if (response.bodyUsed) {
+              console.warn(`[SlickGrid-React] The response body passed to collectionAsync was already read.`
+                + `Either pass the dataset from the Response or clone the response first using response.clone()`);
+            } else {
+              // from Fetch
+              (response as Response).json().then(data => this.updateEditorCollection(column, data));
+            }
+          } else if (response?.content) {
+            this.updateEditorCollection(column, response.content); // from http-client
           }
-        } else if (response?.content) {
-          this.updateEditorCollection(column, response.content); // from http-client
-        }
-      });
-    } else if (this.rxjs?.isObservable(collectionAsync)) {
-      // wrap this inside a setTimeout to avoid timing issue since updateEditorCollection requires to call SlickGrid getColumns() method
-      setTimeout(() => {
-        this.subscriptions.push(
-          (collectionAsync as Observable<any>).subscribe((resolvedCollection) => this.updateEditorCollection(column, resolvedCollection))
-        );
-      });
+        });
+      } else if (this.rxjs?.isObservable(collectionAsync)) {
+        // wrap this inside a setTimeout to avoid timing issue since updateEditorCollection requires to call SlickGrid getColumns() method
+        setTimeout(() => {
+          this.subscriptions.push(
+            (collectionAsync as Observable<any>).subscribe((resolvedCollection) => this.updateEditorCollection(column, resolvedCollection))
+          );
+        });
+      }
     }
   }
 
@@ -1520,21 +1541,23 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
    * then take back "editor.model" and make it the new "editor" so that SlickGrid Editor Factory still works
    */
   protected swapInternalEditorToSlickGridFactoryEditor(columnDefinitions: Column<TData>[]): Column<TData>[] {
-    if (columnDefinitions.some(col => `${col.id}`.includes('.'))) {
+    if (columnDefinitions.some(col => `${col?.id}`.includes('.'))) {
       console.error('[Slickgrid-React] Make sure that none of your Column Definition "id" property includes a dot in its name because that will cause some problems with the Editors. For example if your column definition "field" property is "user.firstName" then use "firstName" as the column "id".');
     }
 
     return columnDefinitions.map((column: Column | any) => {
-      // on every Editor which have a "collection" or a "collectionAsync"
-      if (column.editor?.collectionAsync) {
-        this.loadEditorCollectionAsync(column);
-      }
+      if (column) {
+        // on every Editor which have a "collection" or a "collectionAsync"
+        if (column.editor?.collectionAsync) {
+          this.loadEditorCollectionAsync(column);
+        }
 
-      return {
-        ...column,
-        editor: column.editor?.model,
-        internalColumnEditor: { ...column.editor }
-      };
+        return {
+          ...column,
+          editorClass: column.editor?.model,
+          internalColumnEditor: { ...column.editor }
+        };
+      }
     });
   }
 
@@ -1544,23 +1567,25 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
    * Once we found the new pointer, we will reassign the "editor" and "collection" to the "internalColumnEditor" so it has newest collection
    */
   protected updateEditorCollection<U extends TData = any>(column: Column<U>, newCollection: U[]) {
-    (column.editor as ColumnEditor).collection = newCollection;
-    (column.editor as ColumnEditor).disabled = false;
-
-    // find the new column reference pointer & re-assign the new editor to the internalColumnEditor
-    if (Array.isArray(this._columnDefinitions)) {
-      const columnRef = this._columnDefinitions.find((col: Column) => col.id === column.id);
-      if (columnRef) {
-        columnRef.internalColumnEditor = column.editor as ColumnEditor;
+    if (this.grid && column.editor) {
+      column.editor.collection = newCollection;
+      column.editor.disabled = false;
+
+      // find the new column reference pointer & re-assign the new editor to the internalColumnEditor
+      if (Array.isArray(this._columnDefinitions)) {
+        const columnRef = this._columnDefinitions.find((col: Column) => col.id === column.id);
+        if (columnRef) {
+          columnRef.internalColumnEditor = column.editor;
+        }
       }
-    }
 
-    // get current Editor, remove it from the DOM then re-enable it and re-render it with the new collection.
-    const currentEditor = this.grid.getCellEditor() as AutocompleterEditor | SelectEditor;
-    if (currentEditor?.disable && currentEditor?.renderDomElement) {
-      currentEditor.destroy();
-      currentEditor.disable(false);
-      currentEditor.renderDomElement(newCollection);
+      // get current Editor, remove it from the DOM then re-enable it and re-render it with the new collection.
+      const currentEditor = this.grid.getCellEditor() as AutocompleterEditor | SelectEditor;
+      if (currentEditor?.disable && currentEditor?.renderDomElement) {
+        currentEditor.destroy();
+        currentEditor.disable(false);
+        currentEditor.renderDomElement(newCollection);
+      }
     }
   }
 
@@ -1570,7 +1595,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
         {/* <!-- Header slot if you need to create a complex custom header --> */}
         {this.props.header && <div className="header">{this.props.header}</div>}
 
-        <div id={`${this.props.gridId}`} className="slickgrid-container" style={{ width: '100%' }} onBlur={$event => this.commitEdit($event.target)}>
+        <div id={`${this.props.gridId}`} className="slickgrid-container" onBlur={$event => this.commitEdit($event.target)}>
         </div>
 
         {/* <!--Footer slot if you need to create a complex custom footer-- > */}

package/src/slickgrid-react/constants.ts

@@ -61,6 +61,7 @@ export class Constants {
     TEXT_SORT_ASCENDING: 'Sort Ascending',
     TEXT_SORT_DESCENDING: 'Sort Descending',
     TEXT_STARTS_WITH: 'Starts With',
+    TEXT_TOGGLE_DARK_MODE: 'Toggle Dark Mode',
     TEXT_TOGGLE_FILTER_ROW: 'Toggle Filter Row',
     TEXT_TOGGLE_PRE_HEADER_ROW: 'Toggle Pre-Header Row',
     TEXT_X_OF_Y_SELECTED: '# of % selected',

package/src/slickgrid-react/global-grid-options.ts

@@ -169,6 +169,7 @@ export const GlobalGridOptions: Partial<GridOption> = {
       exportExcelCommandKey: 'EXPORT_TO_EXCEL',
       exportTextDelimitedCommandKey: 'EXPORT_TO_TAB_DELIMITED',
       refreshDatasetCommandKey: 'REFRESH_DATASET',
+      toggleDarkModeCommandKey: 'TOGGLE_DARK_MODE',
       toggleFilterCommandKey: 'TOGGLE_FILTER_ROW',
       togglePreHeaderCommandKey: 'TOGGLE_PRE_HEADER_ROW',
     },
@@ -181,6 +182,7 @@ export const GlobalGridOptions: Partial<GridOption> = {
     hideForceFitButton: false,
     hideRefreshDatasetCommand: false,
     hideSyncResizeButton: true,
+    hideToggleDarkModeCommand: true,
     hideToggleFilterCommand: false,
     hideTogglePreHeaderCommand: false,
     iconCssClass: 'fa fa-bars',
@@ -191,6 +193,7 @@ export const GlobalGridOptions: Partial<GridOption> = {
     iconExportExcelCommand: 'fa fa-file-excel-o',
     iconExportTextDelimitedCommand: 'fa fa-download',
     iconRefreshDatasetCommand: 'fa fa-refresh',
+    iconToggleDarkModeCommand: 'fa fa-moon-o mdi mdi-brightness-4',
     iconToggleFilterCommand: 'fa fa-random',
     iconTogglePreHeaderCommand: 'fa fa-random',
     menuWidth: 16,