chore(deps): update Slickgrid-React to v5.2.0

ghiscoding · Jun 18, 2024 · 4a37687 · 4a37687
1 parent 17863d1
commit 4a37687
Show file tree

Hide file tree

Showing 14 changed files with 411 additions and 373 deletions.
diff --git a/bootstrap5-i18n-demo/package.json b/bootstrap5-i18n-demo/package.json
@@ -38,13 +38,13 @@
     ]
   },
   "dependencies": {
-    "@slickgrid-universal/composite-editor-component": "^5.1.0",
-    "@slickgrid-universal/custom-tooltip-plugin": "^5.1.0",
-    "@slickgrid-universal/excel-export": "^5.1.0",
-    "@slickgrid-universal/graphql": "^5.1.0",
-    "@slickgrid-universal/odata": "^5.1.0",
-    "@slickgrid-universal/rxjs-observable": "^5.1.0",
-    "@slickgrid-universal/text-export": "^5.1.0",
+    "@slickgrid-universal/composite-editor-component": "^5.2.0",
+    "@slickgrid-universal/custom-tooltip-plugin": "^5.2.0",
+    "@slickgrid-universal/excel-export": "^5.2.0",
+    "@slickgrid-universal/graphql": "^5.2.0",
+    "@slickgrid-universal/odata": "^5.2.0",
+    "@slickgrid-universal/rxjs-observable": "^5.2.0",
+    "@slickgrid-universal/text-export": "^5.2.0",
     "dompurify": "^3.1.5",
     "fetch-jsonp": "^1.3.0",
     "i18next": "^23.11.5",
@@ -53,13 +53,13 @@
     "react-dom": "^18.3.1",
     "react-i18next": "^14.1.2",
     "regenerator-runtime": "^0.14.1",
-    "slickgrid-react": "^5.1.0"
+    "slickgrid-react": "^5.2.0"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
     "@fnando/sparkline": "^0.3.10",
     "@popperjs/core": "^2.11.8",
-    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/bluebird": "^3.5.42",
@@ -69,14 +69,14 @@
     "@types/i18next-xhr-backend": "^1.4.2",
     "@types/jest": "^29.5.12",
     "@types/moment": "^2.13.0",
-    "@types/node": "^20.14.2",
+    "@types/node": "^20.14.4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/sortablejs": "^1.15.8",
     "@types/text-encoding-utf-8": "^1.0.5",
     "@types/webpack": "^5.28.5",
-    "@typescript-eslint/eslint-plugin": "^7.12.0",
-    "@typescript-eslint/parser": "^7.12.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
     "@webpack-cli/serve": "^2.0.5",
     "bootstrap": "^5.3.3",
     "clean-webpack-plugin": "^4.0.0",
@@ -85,7 +85,7 @@
     "cross-env": "^7.0.3",
     "css-loader": "^7.1.2",
     "custom-event-polyfill": "^1.0.7",
-    "esbuild-loader": "^4.1.0",
+    "esbuild-loader": "^4.2.0",
     "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prefer-arrow": "^1.2.3",
@@ -105,13 +105,13 @@
     "promise-polyfill": "^8.3.0",
     "react-router-dom": "^6.23.1",
     "rxjs": "^7.8.1",
-    "sass": "^1.77.4",
+    "sass": "^1.77.6",
     "sass-loader": "^14.2.1",
     "style-loader": "4.0.0",
-    "ts-jest": "^29.1.4",
+    "ts-jest": "^29.1.5",
     "ts-loader": "^9.5.1",
     "typescript": "^5.4.5",
-    "webpack": "^5.91.0",
+    "webpack": "^5.92.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4"
   },

diff --git a/bootstrap5-i18n-demo/src/assets/locales/en/translation.json b/bootstrap5-i18n-demo/src/assets/locales/en/translation.json
@@ -24,6 +24,7 @@
   "EXPORT_TO_EXCEL": "Export to Excel",
   "EXPORT_TO_TAB_DELIMITED": "Export in Text format (Tab delimited)",
   "EXPORT_TO_TEXT_FORMAT": "Export in Text format",
+  "FILTER_SHORTCUTS": "Filter Shortcuts",
   "FROM_TO_OF_TOTAL_ITEMS": "{{from}}-{{to}} of {{totalItems}} items",
   "FORCE_FIT_COLUMNS": "Force fit columns",
   "FREEZE_COLUMNS": "Freeze Columns",
@@ -69,6 +70,8 @@
     },
     "INFORMATION": "Billing Information"
   },
+  "BLANK_VALUES": "Blank Values",
+  "NON_BLANK_VALUES": "Non-Blank Values",
   "CUSTOM_COMMANDS": "Custom Commands",
   "DURATION": "Duration",
   "COMPANY": "Company",
@@ -81,19 +84,23 @@
   "FALSE": "False",
   "FEMALE": "Female",
   "FINISH": "Finish",
+  "FUTURE": "Future",
   "GENDER": "Gender",
   "HELP": "Help",
   "HIGH": "High",
   "LOW": "Low",
   "MEDIUM": "Medium",
   "MALE": "Male",
   "NAME": "Name",
+  "NEXT_20_DAYS": "Next 20 days",
   "NONE": "None",
+  "PAST": "Past",
   "PERCENT_COMPLETE": "% Complete",
   "PRIORITY": "Priority",
   "START": "Start",
   "TASK_X": "Task {{x}}",
   "TITLE": "Title",
+  "TODAY": "Today",
   "TRUE": "True",
   "X_DAY_PLURAL": "{{x}} day{{plural}}",
   "RBE_BTN_UPDATE": "Update the current row",

diff --git a/bootstrap5-i18n-demo/src/assets/locales/fr/translation.json b/bootstrap5-i18n-demo/src/assets/locales/fr/translation.json
@@ -24,6 +24,7 @@
   "EXPORT_TO_EXCEL": "Exporter vers Excel",
   "EXPORT_TO_TAB_DELIMITED": "Exporter en format texte (délimité par tabulation)",
   "EXPORT_TO_TEXT_FORMAT": "Exporter en format texte",
+  "FILTER_SHORTCUTS": "Raccourcis de filtre",
   "FROM_TO_OF_TOTAL_ITEMS": "{{from}}-{{to}} de {{totalItems}} éléments",
   "FORCE_FIT_COLUMNS": "Ajustement forcé des colonnes",
   "FREEZE_COLUMNS": "Geler les colonnes",
@@ -69,6 +70,8 @@
     },
     "INFORMATION": "Information de Facturation"
   },
+  "BLANK_VALUES": "Valeurs nulles",
+  "NON_BLANK_VALUES": "Valeurs non-nulles",
   "DURATION": "Durée",
   "COMPANY": "Compagnie",
   "COMPLETED": "Terminé",
@@ -81,20 +84,24 @@
   "FALSE": "Faux",
   "FEMALE": "Féminin",
   "FINISH": "Fin",
+  "FUTURE": "Future",
   "GENDER": "Sexe",
   "HELP": "Aide",
   "HIGH": "Haut",
   "LOW": "Bas",
   "MEDIUM": "Moyen",
   "MALE": "Masculin",
   "NAME": "Nom",
+  "NEXT_20_DAYS": "20 prochain jours",
   "NONE": "Aucun",
+  "PAST": "Passé",
   "PERCENT_COMPLETE": "% Achevée",
   "PRIORITY": "Priorité",
   "START": "Début",
   "TASK_X": "Tâche {{x}}",
   "TITLE": "Titre",
   "TITLE.NAME": "Nom du Titre",
+  "TODAY": "Aujourd'hui",
   "TRUE": "Vrai",
   "X_DAY_PLURAL": "{{x}} journée{{plural}}",
   "RBE_BTN_UPDATE": "Mettre à jour la ligne actuelle",

diff --git a/bootstrap5-i18n-demo/src/examples/slickgrid/Example13.tsx b/bootstrap5-i18n-demo/src/examples/slickgrid/Example13.tsx
@@ -420,16 +420,16 @@ export default class Example13 extends React.Component<Props, State> {
             <button className="btn btn-outline-secondary btn-xs btn-icon" data-test="add-500-rows-btn" onClick={() => this.updateData(500)}>
               500 rows
             </button>
-            <button className="btn btn-outline-secondary btn-xs btn-icon" data-test="add-50k-rows-btn" onClick={() => this.updateData(50000)}>
+            <button className="btn btn-outline-secondary btn-xs btn-icon mx-1" data-test="add-50k-rows-btn" onClick={() => this.updateData(50000)}>
               50k rows
             </button>
-            <button className="btn btn-outline-secondary btn-xs btn-icon" data-test="clear-grouping-btn" onClick={() => this.clearGrouping()}>
+            <button className="btn btn-outline-secondary btn-xs btn-icon mx-1" data-test="clear-grouping-btn" onClick={() => this.clearGrouping()}>
               <i className="mdi mdi-close"></i> Clear grouping
             </button>
-            <button className="btn btn-outline-secondary btn-xs btn-icon" data-test="collapse-all-btn" onClick={() => this.collapseAllGroups()}>
+            <button className="btn btn-outline-secondary btn-xs btn-icon mx-1" data-test="collapse-all-btn" onClick={() => this.collapseAllGroups()}>
               <i className="mdi mdi-arrow-collapse"></i> Collapse all groups
             </button>
-            <button className="btn btn-outline-secondary btn-xs btn-icon" data-test="expand-all-btn" onClick={() => this.expandAllGroups()}>
+            <button className="btn btn-outline-secondary btn-xs btn-icon mx-1" data-test="expand-all-btn" onClick={() => this.expandAllGroups()}>
               <i className="mdi mdi-arrow-expand"></i> Expand all groups
             </button>
             <button className="btn btn-outline-secondary btn-xs btn-icon" data-test="export-excel-btn" onClick={() => this.exportToExcel()}>
@@ -446,18 +446,18 @@ export default class Example13 extends React.Component<Props, State> {
               onClick={() => this.groupByDuration()}>
               Group by Duration &amp; sort groups by value
             </button>
-            <button className="btn btn-outline-secondary btn-xs btn-icon" data-test="group-duration-sort-count-btn"
+            <button className="btn btn-outline-secondary btn-xs btn-icon mx-1" data-test="group-duration-sort-count-btn"
               onClick={() => this.groupByDurationOrderByCount(false)}>
               Group by Duration &amp; sort groups by count
             </button>
           </div>
           <div className="row">
             <div className="col-sm-12">
-              <button className="btn btn-outline-secondary btn-xs btn-icon" data-test="group-duration-sort-count-collapse-btn"
+              <button className="btn btn-outline-secondary btn-xs btn-icon mx-1" data-test="group-duration-sort-count-collapse-btn"
                 onClick={() => this.groupByDurationOrderByCount(true)}>
                 Group by Duration &amp; sort groups by count, aggregate collapsed
               </button>
-              <button className="btn btn-outline-secondary btn-xs btn-icon" data-test="group-duration-effort-btn"
+              <button className="btn btn-outline-secondary btn-xs btn-icon mx-1" data-test="group-duration-effort-btn"
                 onClick={() => this.groupByDurationEffortDriven()}>
                 Group by Duration then Effort-Driven
               </button>

diff --git a/bootstrap5-i18n-demo/src/examples/slickgrid/Example14.tsx b/bootstrap5-i18n-demo/src/examples/slickgrid/Example14.tsx
@@ -183,7 +183,7 @@ export default class Example14 extends React.Component {
             data-test="remove-frozen-column-button">
             <i className="mdi mdi-close"></i> Remove Frozen Columns
           </button>
-          <button className="btn btn-outline-secondary btn-sm btn-icon" onClick={() => this.setFrozenColumns2(2)}
+          <button className="btn btn-outline-secondary btn-sm btn-icon mx-1" onClick={() => this.setFrozenColumns2(2)}
             data-test="set-3frozen-columns">
             <i className="mdi mdi-pin-outline"></i> Set 3 Frozen Columns
           </button>

diff --git a/bootstrap5-i18n-demo/src/examples/slickgrid/Example15.tsx b/bootstrap5-i18n-demo/src/examples/slickgrid/Example15.tsx
@@ -1,3 +1,4 @@
+import { format as tempoFormat } from '@formkit/tempo';
 import i18next, { TFunction } from 'i18next';
 import React from 'react';
 import { withTranslation } from 'react-i18next';
@@ -154,7 +155,11 @@ class Example15 extends React.Component<Props, State> {
         id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 80, width: 100,
         type: FieldType.string,
         filter: {
-          model: Filters.input
+          model: Filters.input,
+          filterShortcuts: [
+            { titleKey: 'BLANK_VALUES', searchTerms: ['< A'], iconCssClass: 'mdi mdi-filter-minus-outline', },
+            { titleKey: 'NON_BLANK_VALUES', searchTerms: ['> A'], iconCssClass: 'mdi mdi-filter-plus-outline', },
+          ]
         }
       },
       {
@@ -178,7 +183,14 @@ class Example15 extends React.Component<Props, State> {
       },
       {
         id: 'start', name: 'Start', field: 'start', nameKey: 'START', formatter: Formatters.dateIso, sortable: true, minWidth: 75, exportWithFormatter: true, width: 100,
-        type: FieldType.date, filterable: true, filter: { model: Filters.compoundDate }
+        type: FieldType.date, filterable: true,
+        filter: {
+          model: Filters.compoundDate,
+          filterShortcuts: [
+            { titleKey: 'PAST', searchTerms: [tempoFormat(new Date(), 'YYYY-MM-DD')], operator: '<', iconCssClass: 'mdi mdi-calendar', },
+            { titleKey: 'FUTURE', searchTerms: [tempoFormat(new Date(), 'YYYY-MM-DD')], operator: '>', iconCssClass: 'mdi mdi-calendar-clock', },
+          ]
+        }
       },
       {
         id: 'completed', field: 'completed', nameKey: 'COMPLETED', minWidth: 85, maxWidth: 85, formatter: Formatters.checkmarkMaterial, width: 100,
@@ -195,10 +207,11 @@ class Example15 extends React.Component<Props, State> {
 
   getData(count: number) {
     // mock a dataset
+    const currentYear = new Date().getFullYear();
     const tmpData: any[] = [];
     for (let i = 0; i < count; i++) {
       const randomDuration = Math.round(Math.random() * 100);
-      const randomYear = randomBetween(2000, 2025);
+      const randomYear = randomBetween(currentYear - 15, currentYear + 8);
       const randomYearShort = randomBetween(10, 25);
       const randomMonth = randomBetween(1, 12);
       const randomMonthStr = (randomMonth < 10) ? `0${randomMonth}` : randomMonth;

diff --git a/bootstrap5-i18n-demo/src/examples/slickgrid/Example16.tsx b/bootstrap5-i18n-demo/src/examples/slickgrid/Example16.tsx
@@ -336,7 +336,7 @@ export default class Example16 extends React.Component<Props, State> {
               <i className="mdi mdi-swap-vertical me-1"></i>
               Toggle Filtering
             </button>
-            <button className="btn btn-outline-secondary btn-sm btn-icon" data-test="toggle-sorting-btn" onClick={() => this.toggleSorting()}>
+            <button className="btn btn-outline-secondary btn-sm btn-icon mx-1" data-test="toggle-sorting-btn" onClick={() => this.toggleSorting()}>
               <i className="mdi mdi-swap-vertical me-1"></i>
               Toggle Sorting
             </button>

diff --git a/bootstrap5-i18n-demo/src/examples/slickgrid/Example18.tsx b/bootstrap5-i18n-demo/src/examples/slickgrid/Example18.tsx
@@ -521,50 +521,50 @@ export default class Example18 extends React.Component<Props, State> {
         <form className="form-inline" onSubmit={(e) => e.preventDefault()}>
           <div className="row">
             <div className="col-sm-12">
-              <button className="btn btn-outline-secondary btn-xs btn-icon" data-test="add-500-rows-btn" onClick={() => this.setData(500)}>
+              <button className="btn btn-outline-secondary btn-xs btn-icon mx-1" data-test="add-500-rows-btn" onClick={() => this.setData(500)}>
                 500 rows
               </button>
-              <button className="btn btn-outline-secondary btn-xs btn-icon" data-test="add-50k-rows-btn" onClick={() => this.setData(50000)}>
+              <button className="btn btn-outline-secondary btn-xs btn-icon mx-1" data-test="add-50k-rows-btn" onClick={() => this.setData(50000)}>
                 50k rows
               </button>
-              <button className="btn btn-outline-secondary btn-xs btn-icon" data-test="clear-grouping-btn" onClick={() => this.clearGroupsAndSelects()}>
+              <button className="btn btn-outline-secondary btn-xs btn-icon mx-1" data-test="clear-grouping-btn" onClick={() => this.clearGroupsAndSelects()}>
                 <i className="mdi mdi-close"></i> Clear grouping
               </button>
-              <button className="btn btn-outline-secondary btn-xs btn-icon" data-test="collapse-all-btn" onClick={() => this.collapseAllGroups()}>
+              <button className="btn btn-outline-secondary btn-xs btn-icon mx-1" data-test="collapse-all-btn" onClick={() => this.collapseAllGroups()}>
                 <i className="mdi mdi-arrow-collapse"></i> Collapse all groups
               </button>
-              <button className="btn btn-outline-secondary btn-xs btn-icon" data-test="expand-all-btn" onClick={() => this.expandAllGroups()}>
+              <button className="btn btn-outline-secondary btn-xs btn-icon mx-1" data-test="expand-all-btn" onClick={() => this.expandAllGroups()}>
                 <i className="mdi mdi-arrow-expand"></i> Expand all groups
               </button>
-              <button className="btn btn-outline-secondary btn-xs btn-icon" onClick={() => this.toggleDraggableGroupingRow()}>
+              <button className="btn btn-outline-secondary btn-xs btn-icon mx-1" onClick={() => this.toggleDraggableGroupingRow()}>
                 Toggle Draggable Grouping Row
               </button>
-              <button className="btn btn-outline-secondary btn-xs btn-icon" onClick={() => this.exportToExcel()}>
+              <button className="btn btn-outline-secondary btn-xs btn-icon mx-1" onClick={() => this.exportToExcel()}>
                 <i className="mdi mdi-file-excel-outline text-success"></i> Export to Excel
               </button>
             </div>
           </div>
 
           <div className="row">
             <div className="col-sm-12">
-              <button className="btn btn-outline-secondary btn-xs btn-icon" data-test="group-duration-sort-value-btn"
+              <button className="btn btn-outline-secondary btn-xs btn-icon mx-1" data-test="group-duration-sort-value-btn"
                 onClick={() => this.groupByDurationOrderByCount(false)}>
                 Group by duration &amp; sort groups by value
               </button>
-              <button className="btn btn-outline-secondary btn-xs btn-icon" data-test="group-duration-sort-count-btn"
+              <button className="btn btn-outline-secondary btn-xs btn-icon mx-1" data-test="group-duration-sort-count-btn"
                 onClick={() => this.groupByDurationOrderByCount(true)}>
                 Group by duration &amp; sort groups by count
               </button>
-              <button className="btn btn-outline-secondary btn-xs btn-icon" data-test="group-duration-effort-btn"
+              <button className="btn btn-outline-secondary btn-xs btn-icon mx-1" data-test="group-duration-effort-btn"
                 onClick={() => this.groupByDurationEffortDriven()}>
                 Group by Duration then Effort-Driven
               </button>
-              <button className="btn btn-outline-secondary btn-xs btn-icon" data-test="set-dynamic-filter"
+              <button className="btn btn-outline-secondary btn-xs btn-icon mx-1" data-test="set-dynamic-filter"
                 onClick={() => this.setFiltersDynamically()}>
                 <span className="mdi mdi-filter-outline"></span>
                 <span>Set Filters Dynamically</span>
               </button>
-              <button className="btn btn-outline-secondary btn-xs btn-icon" data-test="set-dynamic-sorting"
+              <button className="btn btn-outline-secondary btn-xs btn-icon mx-1" data-test="set-dynamic-sorting"
                 onClick={() => this.setSortingDynamically()}>
                 <span className="mdi mdi-sort-ascending"></span>
                 <span>Set Sorting Dynamically</span>

diff --git a/bootstrap5-i18n-demo/src/examples/slickgrid/Example20.tsx b/bootstrap5-i18n-demo/src/examples/slickgrid/Example20.tsx
@@ -367,14 +367,14 @@ export default class Example20 extends React.Component<Props, State> {
             <span>
               <label htmlFor="">Pinned Rows: </label>
               <input type="number" defaultValue={this.state.frozenRowCount} onInput={($event) => this.changeFrozenRowCount($event)} />
-              <button className="btn btn-outline-secondary btn-xs btn-icon" onClick={() => this.setFrozenRowCount()}>
+              <button className="btn btn-outline-secondary btn-xs btn-icon mx-1" onClick={() => this.setFrozenRowCount()}>
                 Set
               </button>
             </span>
             <span style={{ marginLeft: '10px' }}>
               <label htmlFor="">Pinned Columns: </label>
               <input type="number" defaultValue={this.state.frozenColumnCount} onInput={($event) => this.changeFrozenColumnCount($event)} />
-              <button className="btn btn-outline-secondary btn-xs btn-icon" onClick={() => this.setFrozenColumnCount()}>
+              <button className="btn btn-outline-secondary btn-xs btn-icon mx-1" onClick={() => this.setFrozenColumnCount()}>
                 Set
               </button>
             </span>
@@ -383,7 +383,7 @@ export default class Example20 extends React.Component<Props, State> {
 
         <div className="row mt-2">
           <div className="col-sm-12">
-            <button className="btn btn-outline-secondary btn-sm btn-icon" onClick={() => this.setFrozenColumns(-1)}
+            <button className="btn btn-outline-secondary btn-sm btn-icon mx-1" onClick={() => this.setFrozenColumns(-1)}
               data-test="remove-frozen-column-button">
               <i className="mdi mdi-close"></i> Remove Frozen Columns
             </button>

diff --git a/bootstrap5-i18n-demo/src/examples/slickgrid/Example24.tsx b/bootstrap5-i18n-demo/src/examples/slickgrid/Example24.tsx
@@ -401,7 +401,6 @@ class Example24 extends React.Component<Props, State> {
   getContextMenuOptions(): ContextMenu {
     return {
       hideCloseButton: false,
-      // width: 200,
       // optionally and conditionally define when the the menu is usable,
       // this should be used with a custom formatter to show/hide/disable the menu
       menuUsabilityOverride: (args) => {