@mui/x-data-grid 6.3.1 → 6.5.0

package/hooks/features/export/serializers/csvSerializer.js

@@ -1,6 +1,6 @@
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../../colDef';
 import { buildWarning } from '../../../../utils/warning';
-const serializeCellValue = (value, delimiterCharacter) => {
+function sanitizeCellValue(value, delimiterCharacter) {
   if (typeof value === 'string') {
     const formattedValue = value.replace(/"/g, '""');
 
@@ -11,16 +11,49 @@ const serializeCellValue = (value, delimiterCharacter) => {
     return formattedValue;
   }
   return value;
+}
+export const serializeCellValue = (cellParams, options) => {
+  const {
+    delimiterCharacter,
+    ignoreValueFormatter
+  } = options;
+  let value;
+  if (ignoreValueFormatter) {
+    var _cellParams$value2;
+    const columnType = cellParams.colDef.type;
+    if (columnType === 'number') {
+      value = String(cellParams.value);
+    } else if (columnType === 'date' || columnType === 'dateTime') {
+      var _cellParams$value;
+      value = (_cellParams$value = cellParams.value) == null ? void 0 : _cellParams$value.toISOString();
+    } else if (typeof ((_cellParams$value2 = cellParams.value) == null ? void 0 : _cellParams$value2.toString) === 'function') {
+      value = cellParams.value.toString();
+    } else {
+      value = cellParams.value;
+    }
+  } else {
+    value = cellParams.formattedValue;
+  }
+  return sanitizeCellValue(value, delimiterCharacter);
 };
 const objectFormattedValueWarning = buildWarning(['MUI: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
-const serializeRow = (id, columns, getCellParams, delimiterCharacter) => columns.map(column => {
+const serializeRow = ({
+  id,
+  columns,
+  getCellParams,
+  delimiterCharacter,
+  ignoreValueFormatter
+}) => columns.map(column => {
   const cellParams = getCellParams(id, column.field);
   if (process.env.NODE_ENV !== 'production') {
     if (String(cellParams.formattedValue) === '[object Object]') {
       objectFormattedValueWarning();
     }
   }
-  return serializeCellValue(cellParams.formattedValue, delimiterCharacter);
+  return serializeCellValue(cellParams, {
+    delimiterCharacter,
+    ignoreValueFormatter
+  });
 });
 export function buildCSV(options) {
   const {
@@ -28,12 +61,19 @@ export function buildCSV(options) {
     rowIds,
     getCellParams,
     delimiterCharacter,
-    includeHeaders
+    includeHeaders,
+    ignoreValueFormatter
   } = options;
-  const CSVBody = rowIds.reduce((acc, id) => `${acc}${serializeRow(id, columns, getCellParams, delimiterCharacter).join(delimiterCharacter)}\r\n`, '').trim();
+  const CSVBody = rowIds.reduce((acc, id) => `${acc}${serializeRow({
+    id,
+    columns,
+    getCellParams,
+    delimiterCharacter,
+    ignoreValueFormatter
+  }).join(delimiterCharacter)}\r\n`, '').trim();
   if (!includeHeaders) {
     return CSVBody;
   }
-  const CSVHead = `${columns.filter(column => column.field !== GRID_CHECKBOX_SELECTION_COL_DEF.field).map(column => serializeCellValue(column.headerName || column.field, delimiterCharacter)).join(delimiterCharacter)}\r\n`;
+  const CSVHead = `${columns.filter(column => column.field !== GRID_CHECKBOX_SELECTION_COL_DEF.field).map(column => sanitizeCellValue(column.headerName || column.field, delimiterCharacter)).join(delimiterCharacter)}\r\n`;
   return `${CSVHead}${CSVBody}`.trim();
 }

package/hooks/features/export/useGridCsvExport.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
+import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 /**
  * @requires useGridColumns (state)
  * @requires useGridFilter (state)
@@ -7,4 +8,4 @@ import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
  * @requires useGridSelection (state)
  * @requires useGridParamsApi (method)
  */
-export declare const useGridCsvExport: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>) => void;
+export declare const useGridCsvExport: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'unstable_ignoreValueFormatterDuringExport'>) => void;

package/hooks/features/export/useGridCsvExport.js

@@ -6,7 +6,7 @@ import { buildCSV } from './serializers/csvSerializer';
 import { getColumnsToExport, defaultGetRowsToExport } from './utils';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { GridCsvExportMenuItem } from '../../../components/toolbar/GridToolbarExport';
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @requires useGridColumns (state)
  * @requires useGridFilter (state)
@@ -14,9 +14,10 @@ import { GridCsvExportMenuItem } from '../../../components/toolbar/GridToolbarEx
  * @requires useGridSelection (state)
  * @requires useGridParamsApi (method)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-export const useGridCsvExport = apiRef => {
+export const useGridCsvExport = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridCsvExport');
+  const ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
+  const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.csvExport : ignoreValueFormatterProp) || false;
   const getDataAsCsv = React.useCallback((options = {}) => {
     var _options$getRowsToExp, _options$includeHeade;
     logger.debug(`Get data as CSV`);
@@ -33,9 +34,10 @@ export const useGridCsvExport = apiRef => {
       rowIds: exportedRowIds,
       getCellParams: apiRef.current.getCellParams,
       delimiterCharacter: options.delimiter || ',',
-      includeHeaders: (_options$includeHeade = options.includeHeaders) != null ? _options$includeHeade : true
+      includeHeaders: (_options$includeHeade = options.includeHeaders) != null ? _options$includeHeade : true,
+      ignoreValueFormatter
     });
-  }, [logger, apiRef]);
+  }, [logger, apiRef, ignoreValueFormatter]);
   const exportDataAsCsv = React.useCallback(options => {
     logger.debug(`Export data as CSV`);
     const csv = getDataAsCsv(options);

package/hooks/features/focus/gridFocusState.d.ts

@@ -9,10 +9,12 @@ export type GridColumnGroupIdentifier = {
 export interface GridFocusState {
     cell: GridCellCoordinates | null;
     columnHeader: GridColumnIdentifier | null;
+    columnHeaderFilter: GridColumnIdentifier | null;
     columnGroupHeader: GridColumnGroupIdentifier | null;
 }
 export interface GridTabIndexState {
     cell: GridCellCoordinates | null;
     columnHeader: GridColumnIdentifier | null;
+    columnHeaderFilter: GridColumnIdentifier | null;
     columnGroupHeader: GridColumnGroupIdentifier | null;
 }

package/hooks/features/focus/gridFocusStateSelector.d.ts

@@ -3,8 +3,10 @@ import { GridFocusState, GridTabIndexState } from './gridFocusState';
 export declare const gridFocusStateSelector: (state: GridStateCommunity) => GridFocusState;
 export declare const gridFocusCellSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridCellCoordinates | null>;
 export declare const gridFocusColumnHeaderSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnIdentifier | null>;
+export declare const unstable_gridFocusColumnHeaderFilterSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnIdentifier | null>;
 export declare const unstable_gridFocusColumnGroupHeaderSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnGroupIdentifier | null>;
 export declare const gridTabIndexStateSelector: (state: GridStateCommunity) => GridTabIndexState;
 export declare const gridTabIndexCellSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridCellCoordinates | null>;
 export declare const gridTabIndexColumnHeaderSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnIdentifier | null>;
+export declare const unstable_gridTabIndexColumnHeaderFilterSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnIdentifier | null>;
 export declare const unstable_gridTabIndexColumnGroupHeaderSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridFocusState").GridColumnGroupIdentifier | null>;

package/hooks/features/focus/gridFocusStateSelector.js

@@ -3,11 +3,17 @@ export const gridFocusStateSelector = state => state.focus;
 export const gridFocusCellSelector = createSelector(gridFocusStateSelector, focusState => focusState.cell);
 export const gridFocusColumnHeaderSelector = createSelector(gridFocusStateSelector, focusState => focusState.columnHeader);
 
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const unstable_gridFocusColumnHeaderFilterSelector = createSelector(gridFocusStateSelector, focusState => focusState.columnHeaderFilter);
+
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const unstable_gridFocusColumnGroupHeaderSelector = createSelector(gridFocusStateSelector, focusState => focusState.columnGroupHeader);
 export const gridTabIndexStateSelector = state => state.tabIndex;
 export const gridTabIndexCellSelector = createSelector(gridTabIndexStateSelector, state => state.cell);
 export const gridTabIndexColumnHeaderSelector = createSelector(gridTabIndexStateSelector, state => state.columnHeader);
 
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const unstable_gridTabIndexColumnHeaderFilterSelector = createSelector(gridTabIndexStateSelector, state => state.columnHeaderFilter);
+
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const unstable_gridTabIndexColumnGroupHeaderSelector = createSelector(gridTabIndexStateSelector, state => state.columnGroupHeader);

package/hooks/features/focus/useGridFocus.js

@@ -9,15 +9,18 @@ import { gridFocusCellSelector, unstable_gridFocusColumnGroupHeaderSelector } fr
 import { gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
 import { getVisibleRows } from '../../utils/useGridVisibleRows';
 import { clamp } from '../../../utils/utils';
+import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
 export const focusStateInitializer = state => _extends({}, state, {
   focus: {
     cell: null,
     columnHeader: null,
+    columnHeaderFilter: null,
     columnGroupHeader: null
   },
   tabIndex: {
     cell: null,
     columnHeader: null,
+    columnHeaderFilter: null,
     columnGroupHeader: null
   }
 });
@@ -52,6 +55,7 @@ export const useGridFocus = (apiRef, props) => {
             field
           },
           columnHeader: null,
+          columnHeaderFilter: null,
           columnGroupHeader: null
         },
         focus: {
@@ -60,6 +64,7 @@ export const useGridFocus = (apiRef, props) => {
             field
           },
           columnHeader: null,
+          columnHeaderFilter: null,
           columnGroupHeader: null
         }
       });
@@ -87,6 +92,7 @@ export const useGridFocus = (apiRef, props) => {
           columnHeader: {
             field
           },
+          columnHeaderFilter: null,
           cell: null,
           columnGroupHeader: null
         },
@@ -94,6 +100,33 @@ export const useGridFocus = (apiRef, props) => {
           columnHeader: {
             field
           },
+          columnHeaderFilter: null,
+          cell: null,
+          columnGroupHeader: null
+        }
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef, logger, publishCellFocusOut]);
+  const setColumnHeaderFilterFocus = React.useCallback((field, event = {}) => {
+    const cell = gridFocusCellSelector(apiRef);
+    publishCellFocusOut(cell, event);
+    apiRef.current.setState(state => {
+      logger.debug(`Focusing on column header filter with colIndex=${field}`);
+      return _extends({}, state, {
+        tabIndex: {
+          columnHeader: null,
+          columnHeaderFilter: {
+            field
+          },
+          cell: null,
+          columnGroupHeader: null
+        },
+        focus: {
+          columnHeader: null,
+          columnHeaderFilter: {
+            field
+          },
           cell: null,
           columnGroupHeader: null
         }
@@ -114,6 +147,7 @@ export const useGridFocus = (apiRef, props) => {
             depth
           },
           columnHeader: null,
+          columnHeaderFilter: null,
           cell: null
         },
         focus: {
@@ -122,6 +156,7 @@ export const useGridFocus = (apiRef, props) => {
             depth
           },
           columnHeader: null,
+          columnHeaderFilter: null,
           cell: null
         }
       });
@@ -131,8 +166,16 @@ export const useGridFocus = (apiRef, props) => {
   const getColumnGroupHeaderFocus = React.useCallback(() => unstable_gridFocusColumnGroupHeaderSelector(apiRef), [apiRef]);
   const moveFocusToRelativeCell = React.useCallback((id, field, direction) => {
     let columnIndexToFocus = apiRef.current.getColumnIndex(field);
-    let rowIndexToFocus = apiRef.current.getRowIndexRelativeToVisibleRows(id);
     const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+    const currentPage = getVisibleRows(apiRef, {
+      pagination: props.pagination,
+      paginationMode: props.paginationMode
+    });
+    const pinnedRows = gridPinnedRowsSelector(apiRef);
+
+    // Include pinned rows as well
+    const currentPageRows = [].concat(pinnedRows.top || [], currentPage.rows, pinnedRows.bottom || []);
+    let rowIndexToFocus = currentPageRows.findIndex(row => row.id === id);
     if (direction === 'right') {
       columnIndexToFocus += 1;
     } else if (direction === 'left') {
@@ -140,14 +183,10 @@ export const useGridFocus = (apiRef, props) => {
     } else {
       rowIndexToFocus += 1;
     }
-    const currentPage = getVisibleRows(apiRef, {
-      pagination: props.pagination,
-      paginationMode: props.paginationMode
-    });
     if (columnIndexToFocus >= visibleColumns.length) {
       // Go to next row if we are after the last column
       rowIndexToFocus += 1;
-      if (rowIndexToFocus < currentPage.rows.length) {
+      if (rowIndexToFocus < currentPageRows.length) {
         // Go to first column of the next row if there's one more row
         columnIndexToFocus = 0;
       }
@@ -159,8 +198,11 @@ export const useGridFocus = (apiRef, props) => {
         columnIndexToFocus = visibleColumns.length - 1;
       }
     }
-    rowIndexToFocus = clamp(rowIndexToFocus, 0, currentPage.rows.length - 1);
-    const rowToFocus = currentPage.rows[rowIndexToFocus];
+    rowIndexToFocus = clamp(rowIndexToFocus, 0, currentPageRows.length - 1);
+    const rowToFocus = currentPageRows[rowIndexToFocus];
+    if (!rowToFocus) {
+      return;
+    }
     const colSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowToFocus.id, columnIndexToFocus);
     if (colSpanInfo && colSpanInfo.spannedByColSpan) {
       if (direction === 'left' || direction === 'below') {
@@ -214,6 +256,7 @@ export const useGridFocus = (apiRef, props) => {
       focus: {
         cell: null,
         columnHeader: null,
+        columnHeaderFilter: null,
         columnGroupHeader: null
       }
     }));
@@ -252,6 +295,7 @@ export const useGridFocus = (apiRef, props) => {
         focus: {
           cell: null,
           columnHeader: null,
+          columnHeaderFilter: null,
           columnGroupHeader: null
         }
       }));
@@ -280,6 +324,7 @@ export const useGridFocus = (apiRef, props) => {
         focus: {
           cell: null,
           columnHeader: null,
+          columnHeaderFilter: null,
           columnGroupHeader: null
         }
       }));
@@ -287,7 +332,8 @@ export const useGridFocus = (apiRef, props) => {
   }, [apiRef]);
   const focusApi = {
     setCellFocus,
-    setColumnHeaderFocus
+    setColumnHeaderFocus,
+    setColumnHeaderFilterFocus
   };
   const focusPrivateApi = {
     moveFocusToRelativeCell,

package/hooks/features/headerFiltering/gridHeaderFilteringSelectors.d.ts

@@ -0,0 +1,4 @@
+import { GridStateCommunity } from '../../../models/gridStateCommunity';
+export declare const unstable_gridHeaderFilteringStateSelector: (state: GridStateCommunity) => import("../../../models/gridHeaderFilteringModel").GridHeaderFilteringState;
+export declare const unstable_gridHeaderFilteringEditFieldSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string | null>;
+export declare const unstable_gridHeaderFilteringMenuSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string | null>;

package/hooks/features/headerFiltering/gridHeaderFilteringSelectors.js

@@ -0,0 +1,5 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { createSelector } from '../../../utils/createSelector';
+export const unstable_gridHeaderFilteringStateSelector = state => state.headerFiltering;
+export const unstable_gridHeaderFilteringEditFieldSelector = createSelector(unstable_gridHeaderFilteringStateSelector, headerFilteringState => headerFilteringState.editing);
+export const unstable_gridHeaderFilteringMenuSelector = createSelector(unstable_gridHeaderFilteringStateSelector, headerFilteringState => headerFilteringState.menuOpen);

package/hooks/features/headerFiltering/index.d.ts

@@ -0,0 +1 @@
+export * from './gridHeaderFilteringSelectors';

package/hooks/features/headerFiltering/index.js

@@ -0,0 +1 @@
+export * from './gridHeaderFilteringSelectors';

package/hooks/features/headerFiltering/useGridHeaderFiltering.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
+import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import { GridStateInitializer } from '../../utils/useGridInitializeState';
+export declare const headerFilteringStateInitializer: GridStateInitializer;
+export declare const useGridHeaderFiltering: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'signature'>) => void;

package/hooks/features/headerFiltering/useGridHeaderFiltering.js

@@ -0,0 +1,91 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridLogger } from '../../utils';
+import { gridColumnLookupSelector, gridColumnVisibilityModelSelector, gridColumnFieldsSelector } from '../columns/gridColumnsSelector';
+export const headerFilteringStateInitializer = state => _extends({}, state, {
+  headerFiltering: {
+    editing: null,
+    menuOpen: null
+  }
+});
+export const useGridHeaderFiltering = (apiRef, props) => {
+  const logger = useGridLogger(apiRef, 'useGridHeaderFiltering');
+  const setHeaderFilterState = React.useCallback(headerFilterState => {
+    apiRef.current.setState(state => {
+      var _headerFilterState$ed, _headerFilterState$me;
+      // Safety check to avoid MIT users from using it
+      // This hook should ultimately be moved to the Pro package
+      if (props.signature === 'DataGrid') {
+        return state;
+      }
+      return _extends({}, state, {
+        headerFiltering: {
+          editing: (_headerFilterState$ed = headerFilterState.editing) != null ? _headerFilterState$ed : null,
+          menuOpen: (_headerFilterState$me = headerFilterState.menuOpen) != null ? _headerFilterState$me : null
+        }
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef, props.signature]);
+  const startHeaderFilterEditMode = React.useCallback(field => {
+    logger.debug(`Starting edit mode on header filter for field: ${field}`);
+    apiRef.current.setHeaderFilterState({
+      editing: field
+    });
+  }, [apiRef, logger]);
+  const stopHeaderFilterEditMode = React.useCallback(() => {
+    logger.debug(`Stopping edit mode on header filter`);
+    apiRef.current.setHeaderFilterState({
+      editing: null
+    });
+  }, [apiRef, logger]);
+  const showHeaderFilterMenu = React.useCallback(field => {
+    logger.debug(`Opening header filter menu for field: ${field}`);
+    apiRef.current.setHeaderFilterState({
+      menuOpen: field
+    });
+  }, [apiRef, logger]);
+  const hideHeaderFilterMenu = React.useCallback(() => {
+    logger.debug(`Hiding header filter menu for active field`);
+    let fieldToFocus = apiRef.current.state.headerFiltering.menuOpen;
+    if (fieldToFocus) {
+      const columnLookup = gridColumnLookupSelector(apiRef);
+      const columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);
+      const orderedFields = gridColumnFieldsSelector(apiRef);
+
+      // If the column was removed from the grid, we need to find the closest visible field
+      if (!columnLookup[fieldToFocus]) {
+        fieldToFocus = orderedFields[0];
+      }
+
+      // If the field to focus is hidden, we need to find the closest visible field
+      if (columnVisibilityModel[fieldToFocus] === false) {
+        // contains visible column fields + the field that was just hidden
+        const visibleOrderedFields = orderedFields.filter(field => {
+          if (field === fieldToFocus) {
+            return true;
+          }
+          return columnVisibilityModel[field] !== false;
+        });
+        const fieldIndex = visibleOrderedFields.indexOf(fieldToFocus);
+        fieldToFocus = visibleOrderedFields[fieldIndex + 1] || visibleOrderedFields[fieldIndex - 1];
+      }
+      apiRef.current.setHeaderFilterState({
+        menuOpen: null
+      });
+      apiRef.current.setColumnHeaderFilterFocus(fieldToFocus);
+    }
+  }, [apiRef, logger]);
+  const headerFilterPrivateApi = {
+    setHeaderFilterState
+  };
+  const headerFilterApi = {
+    startHeaderFilterEditMode,
+    stopHeaderFilterEditMode,
+    showHeaderFilterMenu,
+    hideHeaderFilterMenu
+  };
+  useGridApiMethod(apiRef, headerFilterApi, 'public');
+  useGridApiMethod(apiRef, headerFilterPrivateApi, 'private');
+};

package/hooks/features/index.d.ts

@@ -11,3 +11,4 @@ export * from './rowSelection';
 export * from './sorting';
 export * from './dimensions';
 export * from './statePersistence';
+export * from './headerFiltering';

package/hooks/features/index.js

@@ -11,4 +11,5 @@ export * from './rows';
 export * from './rowSelection';
 export * from './sorting';
 export * from './dimensions';
-export * from './statePersistence';
+export * from './statePersistence';
+export * from './headerFiltering';

package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.d.ts

@@ -10,4 +10,4 @@ import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
  * @requires useGridScroll (method) - can be after
  * @requires useGridColumnSpanning (method) - can be after
  */
-export declare const useGridKeyboardNavigation: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode' | 'getRowId'>) => void;
+export declare const useGridKeyboardNavigation: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode' | 'getRowId' | 'experimentalFeatures' | 'signature'>) => void;