[data grid] GridCellParams.formattedValue should be nullable (mui#4376

)
alexfauquette · Aug 26, 2022 · 753275b · 753275b
1 parent 15118e1
commit 753275b
Show file tree

Hide file tree

Showing 14 changed files with 35 additions and 34 deletions.
diff --git a/docs/data/data-grid/editing/AutoStopEditComponent.js b/docs/data/data-grid/editing/AutoStopEditComponent.js
@@ -40,7 +40,7 @@ SelectEditInputCell.propTypes = {
   /**
    * The cell value, but if the column has valueGetter, use getValue.
    */
-  value: PropTypes.any.isRequired,
+  value: PropTypes.any,
 };
 
 function renderSelectEditInputCell(params) {

diff --git a/docs/data/data-grid/filtering/CustomMultiValueOperator.tsx b/docs/data/data-grid/filtering/CustomMultiValueOperator.tsx
@@ -6,6 +6,7 @@ import {
   DataGrid,
   GridFilterItem,
   GridFilterModel,
+  GridFilterOperator,
 } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 import SyncIcon from '@mui/icons-material/Sync';
@@ -85,7 +86,7 @@ function InputNumberInterval(props: GridFilterInputValueProps) {
   );
 }
 
-const quantityOnlyOperators = [
+const quantityOnlyOperators: GridFilterOperator[] = [
   {
     label: 'Between',
     value: 'between',

diff --git a/docs/data/data-grid/group-pivot/CustomizeDetailPanelToggle.js b/docs/data/data-grid/group-pivot/CustomizeDetailPanelToggle.js
@@ -82,7 +82,7 @@ CustomDetailPanelToggle.propTypes = {
   /**
    * The cell value, but if the column has valueGetter, use getValue.
    */
-  value: PropTypes.any.isRequired,
+  value: PropTypes.any,
 };
 
 const columns = [

diff --git a/docs/data/data-grid/group-pivot/TreeDataLazyLoading.js b/docs/data/data-grid/group-pivot/TreeDataLazyLoading.js
@@ -225,7 +225,7 @@ GroupingCellWithLazyLoading.propTypes = {
   /**
    * The cell value formatted with the column valueFormatter.
    */
-  formattedValue: PropTypes.any.isRequired,
+  formattedValue: PropTypes.any,
   hideDescendantCount: PropTypes.bool,
   /**
    * The grid row id.

diff --git a/docs/pages/x/api/data-grid/grid-cell-params.md b/docs/pages/x/api/data-grid/grid-cell-params.md
@@ -12,17 +12,17 @@ import { GridCellParams } from '@mui/x-data-grid';
 
 ## Properties
 
-| Name                                                                                         | Type                                                                    | Description                                                      |
-| :------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- | :--------------------------------------------------------------- |
-| <span class="prop-name">cellMode</span>                                                      | <span class="prop-type">GridCellMode</span>                             | The mode of the cell.                                            |
-| <span class="prop-name">colDef</span>                                                        | <span class="prop-type">GridStateColDef</span>                          | The column of the row that the current cell belongs to.          |
-| <span class="prop-name">field</span>                                                         | <span class="prop-type">string</span>                                   | The column field of the cell that triggered the event.           |
-| <span class="prop-name">formattedValue</span>                                                | <span class="prop-type">F</span>                                        | The cell value formatted with the column valueFormatter.         |
-| <span class="prop-name">getValue</span>                                                      | <span class="prop-type">(id: GridRowId, field: string) =&gt; any</span> | Get the cell value of a row and field.                           |
-| <span class="prop-name">hasFocus</span>                                                      | <span class="prop-type">boolean</span>                                  | If true, the cell is the active element.                         |
-| <span class="prop-name">id</span>                                                            | <span class="prop-type">GridRowId</span>                                | The grid row id.                                                 |
-| <span class="prop-name optional">isEditable<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">boolean</span>                                  | If true, the cell is editable.                                   |
-| <span class="prop-name">row</span>                                                           | <span class="prop-type">GridRowModel&lt;R&gt;</span>                    | The row model of the row that the current cell belongs to.       |
-| <span class="prop-name">rowNode</span>                                                       | <span class="prop-type">GridRowTreeNodeConfig</span>                    | The node of the row that the current cell belongs to.            |
-| <span class="prop-name">tabIndex</span>                                                      | <span class="prop-type">0 \| -1</span>                                  | the tabIndex value.                                              |
-| <span class="prop-name">value</span>                                                         | <span class="prop-type">V \| undefined</span>                           | The cell value, but if the column has valueGetter, use getValue. |
+| Name                                                                                             | Type                                                                    | Description                                                      |
+| :----------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- | :--------------------------------------------------------------- |
+| <span class="prop-name">cellMode</span>                                                          | <span class="prop-type">GridCellMode</span>                             | The mode of the cell.                                            |
+| <span class="prop-name">colDef</span>                                                            | <span class="prop-type">GridStateColDef</span>                          | The column of the row that the current cell belongs to.          |
+| <span class="prop-name">field</span>                                                             | <span class="prop-type">string</span>                                   | The column field of the cell that triggered the event.           |
+| <span class="prop-name optional">formattedValue<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">F \| undefined</span>                           | The cell value formatted with the column valueFormatter.         |
+| <span class="prop-name">getValue</span>                                                          | <span class="prop-type">(id: GridRowId, field: string) =&gt; any</span> | Get the cell value of a row and field.                           |
+| <span class="prop-name">hasFocus</span>                                                          | <span class="prop-type">boolean</span>                                  | If true, the cell is the active element.                         |
+| <span class="prop-name">id</span>                                                                | <span class="prop-type">GridRowId</span>                                | The grid row id.                                                 |
+| <span class="prop-name optional">isEditable<sup><abbr title="optional">?</abbr></sup></span>     | <span class="prop-type">boolean</span>                                  | If true, the cell is editable.                                   |
+| <span class="prop-name">row</span>                                                               | <span class="prop-type">GridRowModel&lt;R&gt;</span>                    | The row model of the row that the current cell belongs to.       |
+| <span class="prop-name">rowNode</span>                                                           | <span class="prop-type">GridRowTreeNodeConfig</span>                    | The node of the row that the current cell belongs to.            |
+| <span class="prop-name">tabIndex</span>                                                          | <span class="prop-type">0 \| -1</span>                                  | the tabIndex value.                                              |
+| <span class="prop-name optional">value<sup><abbr title="optional">?</abbr></sup></span>          | <span class="prop-type">V \| undefined</span>                           | The cell value, but if the column has valueGetter, use getValue. |
diff --git a/packages/grid/x-data-grid-pro/src/components/GridDetailPanelToggleCell.tsx b/packages/grid/x-data-grid-pro/src/components/GridDetailPanelToggleCell.tsx
@@ -78,7 +78,7 @@ GridDetailPanelToggleCell.propTypes = {
   /**
    * The cell value formatted with the column valueFormatter.
    */
-  formattedValue: PropTypes.any.isRequired,
+  formattedValue: PropTypes.any,
   /**
    * Get the cell value of a row and field.
    * @param {GridRowId} id The row id.
@@ -114,7 +114,7 @@ GridDetailPanelToggleCell.propTypes = {
   /**
    * The cell value, but if the column has valueGetter, use getValue.
    */
-  value: PropTypes.any.isRequired,
+  value: PropTypes.any,
 } as any;
 
 export { GridDetailPanelToggleCell };
diff --git a/packages/grid/x-data-grid-pro/src/components/GridTreeDataGroupingCell.tsx b/packages/grid/x-data-grid-pro/src/components/GridTreeDataGroupingCell.tsx
@@ -117,7 +117,7 @@ GridTreeDataGroupingCell.propTypes = {
   /**
    * The cell value formatted with the column valueFormatter.
    */
-  formattedValue: PropTypes.any.isRequired,
+  formattedValue: PropTypes.any,
   /**
    * Get the cell value of a row and field.
    * @param {GridRowId} id The row id.
@@ -154,7 +154,7 @@ GridTreeDataGroupingCell.propTypes = {
   /**
    * The cell value, but if the column has valueGetter, use getValue.
    */
-  value: PropTypes.any.isRequired,
+  value: PropTypes.any,
 } as any;
 
 export { GridTreeDataGroupingCell };
diff --git a/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx
@@ -130,7 +130,7 @@ GridEditInputCell.propTypes = {
   /**
    * The cell value formatted with the column valueFormatter.
    */
-  formattedValue: PropTypes.any.isRequired,
+  formattedValue: PropTypes.any,
   /**
    * Get the cell value of a row and field.
    * @param {GridRowId} id The row id.
@@ -164,6 +164,7 @@ GridEditInputCell.propTypes = {
 } as any;
 
 export { GridEditInputCell };
+
 export const renderEditInputCell: GridColDef['renderEditCell'] = (params) => (
   <GridEditInputCell {...params} />
 );
diff --git a/packages/grid/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx
@@ -168,7 +168,7 @@ GridEditSingleSelectCell.propTypes = {
   /**
    * The cell value formatted with the column valueFormatter.
    */
-  formattedValue: PropTypes.any.isRequired,
+  formattedValue: PropTypes.any,
   /**
    * Get the cell value of a row and field.
    * @param {GridRowId} id The row id.

diff --git a/packages/grid/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx b/packages/grid/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx
@@ -133,7 +133,7 @@ GridCellCheckboxForwardRef.propTypes = {
   /**
    * The cell value formatted with the column valueFormatter.
    */
-  formattedValue: PropTypes.any.isRequired,
+  formattedValue: PropTypes.any,
   /**
    * Get the cell value of a row and field.
    * @param {GridRowId} id The row id.
@@ -169,7 +169,7 @@ GridCellCheckboxForwardRef.propTypes = {
   /**
    * The cell value, but if the column has valueGetter, use getValue.
    */
-  value: PropTypes.any.isRequired,
+  value: PropTypes.any,
 } as any;
 
 export { GridCellCheckboxForwardRef };

diff --git a/packages/grid/x-data-grid/src/hooks/features/editRows/useGridCellEditing.new.ts b/packages/grid/x-data-grid/src/hooks/features/editRows/useGridCellEditing.new.ts
@@ -345,7 +345,7 @@ export const useGridCellEditing = (
       }
 
       let editingState = gridEditRowsStateSelector(apiRef.current.state);
-      let newProps = { ...editingState[id][field], value: parsedValue };
+      let newProps: GridEditCellProps = { ...editingState[id][field], value: parsedValue };
 
       if (column.preProcessEditCellProps) {
         const hasChanged = value !== editingState[id][field].value;

diff --git a/packages/grid/x-data-grid/src/models/gridEditRowModel.ts b/packages/grid/x-data-grid/src/models/gridEditRowModel.ts
@@ -1,5 +1,5 @@
 export interface GridEditCellProps<V = any> {
-  value: V | undefined;
+  value?: V | undefined;
   isValidating?: boolean;
   isProcessingProps?: boolean;
   [prop: string]: any;

diff --git a/packages/grid/x-data-grid/src/models/params/gridCellParams.ts b/packages/grid/x-data-grid/src/models/params/gridCellParams.ts
@@ -18,11 +18,11 @@ export interface GridCellParams<V = any, R extends GridValidRowModel = any, F =
   /**
    * The cell value, but if the column has valueGetter, use getValue.
    */
-  value: V | undefined;
+  value?: V | undefined;
   /**
    * The cell value formatted with the column valueFormatter.
    */
-  formattedValue: F;
+  formattedValue?: F | undefined;
   /**
    * The row model of the row that the current cell belongs to.
    */

diff --git a/packages/grid/x-data-grid/src/tests/filterPanel.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/filterPanel.DataGrid.test.tsx
@@ -7,7 +7,6 @@ import {
   GridFilterInputValue,
   GridFilterInputValueProps,
   GridPreferencePanelsValue,
-  GridFilterItem,
 } from '@mui/x-data-grid';
 // @ts-ignore Remove once the test utils are typed
 import { createRenderer, fireEvent, screen, waitFor } from '@mui/monorepo/test/utils';
@@ -52,7 +51,7 @@ const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 describe('<DataGrid /> - Filter panel', () => {
   const { render } = createRenderer();
 
-  const baselineProps = {
+  const baselineProps: DataGridProps = {
     autoHeight: isJSDOM,
     disableVirtualization: true,
     rows: [
@@ -96,15 +95,15 @@ describe('<DataGrid /> - Filter panel', () => {
           },
           {
             value: 'equals',
-            getApplyFilterFn: (filterItem: GridFilterItem) => {
+            getApplyFilterFn: (filterItem) => {
               if (!filterItem.value) {
                 return null;
               }
               const collator = new Intl.Collator(undefined, {
                 sensitivity: 'base',
                 usage: 'search',
               });
-              return ({ value }: { value: any }): boolean => {
+              return ({ value }): boolean => {
                 return collator.compare(filterItem.value, (value && value.toString()) || '') === 0;
               };
             },