@mui/x-data-grid 5.5.1 → 5.7.0

package/modern/hooks/features/pagination/index.js

@@ -0,0 +1,2 @@
+export * from './gridPaginationSelector';
+export {};

package/modern/hooks/features/pagination/useGridPage.js

@@ -0,0 +1,134 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridLogger, useGridSelector, useGridApiMethod, useGridApiEventHandler } from '../../utils';
+import { GridEvents } from '../../../models/events';
+import { gridVisibleTopLevelRowCountSelector } from '../filter';
+import { gridPageSelector } from './gridPaginationSelector';
+import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { buildWarning } from '../../../utils/warning';
+export const getPageCount = (rowCount, pageSize) => {
+  if (pageSize > 0 && rowCount > 0) {
+    return Math.ceil(rowCount / pageSize);
+  }
+
+  return 0;
+};
+
+const applyValidPage = paginationState => {
+  if (!paginationState.pageCount) {
+    return paginationState;
+  }
+
+  return _extends({}, paginationState, {
+    page: Math.max(Math.min(paginationState.page, paginationState.pageCount - 1), 0)
+  });
+};
+
+const mergeStateWithPage = page => state => _extends({}, state, {
+  pagination: applyValidPage(_extends({}, state.pagination, {
+    page
+  }))
+});
+
+const noRowCountInServerMode = buildWarning(["MUI: the 'rowCount' prop is undefined while using paginationMode='server'", 'For more detail, see http://mui.com/components/data-grid/pagination/#basic-implementation'], 'error');
+/**
+ * @requires useGridPageSize (event)
+ */
+
+export const useGridPage = (apiRef, props) => {
+  const logger = useGridLogger(apiRef, 'useGridPage');
+  const visibleTopLevelRowCount = useGridSelector(apiRef, gridVisibleTopLevelRowCountSelector);
+  apiRef.current.unstable_updateControlState({
+    stateId: 'page',
+    propModel: props.page,
+    propOnChange: props.onPageChange,
+    stateSelector: gridPageSelector,
+    changeEvent: GridEvents.pageChange
+  });
+  /**
+   * API METHODS
+   */
+
+  const setPage = React.useCallback(page => {
+    logger.debug(`Setting page to ${page}`);
+    apiRef.current.setState(mergeStateWithPage(page));
+    apiRef.current.forceUpdate();
+  }, [apiRef, logger]);
+  const pageApi = {
+    setPage
+  };
+  useGridApiMethod(apiRef, pageApi, 'GridPageApi');
+  /**
+   * PRE-PROCESSING
+   */
+
+  const stateExportPreProcessing = React.useCallback(prevState => {
+    const pageToExport = gridPageSelector(apiRef);
+    const shouldExportPage = // Always export if the page is controlled
+    props.page != null || // Always export if the page has been initialized
+    props.initialState?.pagination?.page != null || // Export if the page value is not equal to the default value
+    pageToExport !== 0;
+
+    if (!shouldExportPage) {
+      return prevState;
+    }
+
+    return _extends({}, prevState, {
+      pagination: _extends({}, prevState.pagination, {
+        page: pageToExport
+      })
+    });
+  }, [apiRef, props.page, props.initialState?.pagination?.page]);
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    // We apply the constraint even if the page did not change in case the pageSize changed.
+    const page = context.stateToRestore.pagination?.page ?? gridPageSelector(apiRef);
+    apiRef.current.setState(mergeStateWithPage(page));
+    return params;
+  }, [apiRef]);
+  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  /**
+   * EVENTS
+   */
+
+  const handlePageSizeChange = pageSize => {
+    apiRef.current.setState(state => {
+      const pageCount = getPageCount(state.pagination.rowCount, pageSize);
+      return _extends({}, state, {
+        pagination: applyValidPage(_extends({}, state.pagination, {
+          pageCount,
+          page: state.pagination.page
+        }))
+      });
+    });
+    apiRef.current.forceUpdate();
+  };
+
+  useGridApiEventHandler(apiRef, GridEvents.pageSizeChange, handlePageSizeChange);
+  /**
+   * EFFECTS
+   */
+
+  React.useEffect(() => {
+    if (process.env.NODE_ENV !== 'production') {
+      if (props.paginationMode === 'server' && props.rowCount == null) {
+        noRowCountInServerMode();
+      }
+    }
+  }, [props.rowCount, props.paginationMode]);
+  React.useEffect(() => {
+    apiRef.current.setState(state => {
+      const rowCount = props.rowCount !== undefined ? props.rowCount : visibleTopLevelRowCount;
+      const pageCount = getPageCount(rowCount, state.pagination.pageSize);
+      const page = props.page == null ? state.pagination.page : props.page;
+      return _extends({}, state, {
+        pagination: applyValidPage(_extends({}, state.pagination, {
+          page,
+          rowCount,
+          pageCount
+        }))
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [visibleTopLevelRowCount, props.rowCount, props.page, props.paginationMode, apiRef]);
+};

package/modern/hooks/features/pagination/useGridPageSize.js

@@ -0,0 +1,110 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GridEvents } from '../../../models/events';
+import { useGridLogger, useGridApiMethod, useGridApiEventHandler, useGridSelector } from '../../utils';
+import { gridPageSizeSelector } from './gridPaginationSelector';
+import { gridDensityRowHeightSelector } from '../density';
+import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+export const defaultPageSize = autoPageSize => autoPageSize ? 0 : 100;
+
+const mergeStateWithPageSize = pageSize => state => _extends({}, state, {
+  pagination: _extends({}, state.pagination, {
+    pageSize
+  })
+});
+/**
+ * @requires useGridDimensions (event) - can be after
+ */
+
+
+export const useGridPageSize = (apiRef, props) => {
+  const logger = useGridLogger(apiRef, 'useGridPageSize');
+  const rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
+  apiRef.current.unstable_updateControlState({
+    stateId: 'pageSize',
+    propModel: props.pageSize,
+    propOnChange: props.onPageSizeChange,
+    stateSelector: gridPageSizeSelector,
+    changeEvent: GridEvents.pageSizeChange
+  });
+  /**
+   * API METHODS
+   */
+
+  const setPageSize = React.useCallback(pageSize => {
+    if (pageSize === gridPageSizeSelector(apiRef)) {
+      return;
+    }
+
+    logger.debug(`Setting page size to ${pageSize}`);
+    apiRef.current.setState(mergeStateWithPageSize(pageSize));
+    apiRef.current.forceUpdate();
+  }, [apiRef, logger]);
+  const pageSizeApi = {
+    setPageSize
+  };
+  useGridApiMethod(apiRef, pageSizeApi, 'GridPageSizeApi');
+  /**
+   * PRE-PROCESSING
+   */
+
+  const stateExportPreProcessing = React.useCallback(prevState => {
+    const pageSizeToExport = gridPageSizeSelector(apiRef);
+    const shouldExportPageSize = // Always export if the page size is controlled
+    props.pageSize != null || // Always export if the page size has been initialized
+    props.initialState?.pagination?.pageSize != null || // Export if the page size value is not equal to the default value
+    pageSizeToExport !== defaultPageSize(props.autoPageSize);
+
+    if (!shouldExportPageSize) {
+      return prevState;
+    }
+
+    return _extends({}, prevState, {
+      pagination: _extends({}, prevState.pagination, {
+        pageSize: pageSizeToExport
+      })
+    });
+  }, [apiRef, props.pageSize, props.initialState?.pagination?.pageSize, props.autoPageSize]);
+  /**
+   * TODO: Add error if `prop.autoHeight = true`
+   */
+
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    const pageSize = context.stateToRestore.pagination?.pageSize;
+
+    if (pageSize != null) {
+      apiRef.current.setState(mergeStateWithPageSize(pageSize));
+    }
+
+    return params;
+  }, [apiRef]);
+  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  /**
+   * EVENTS
+   */
+
+  const handleUpdateAutoPageSize = React.useCallback(() => {
+    const dimensions = apiRef.current.getRootDimensions();
+
+    if (!props.autoPageSize || !dimensions) {
+      return;
+    }
+
+    const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
+    apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
+  }, [apiRef, props.autoPageSize, rowHeight]);
+  useGridApiEventHandler(apiRef, GridEvents.viewportInnerSizeChange, handleUpdateAutoPageSize);
+  /**
+   * EFFECTS
+   */
+
+  React.useEffect(() => {
+    if (props.pageSize != null && !props.autoPageSize) {
+      apiRef.current.setPageSize(props.pageSize);
+    }
+  }, [apiRef, props.autoPageSize, props.pageSize]);
+  React.useEffect(() => {
+    handleUpdateAutoPageSize();
+  }, [handleUpdateAutoPageSize]);
+};

package/modern/hooks/features/pagination/useGridPagination.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useGridPageSize, defaultPageSize } from './useGridPageSize';
+import { useGridPage, getPageCount } from './useGridPage';
+export const paginationStateInitializer = (state, props) => {
+  let pageSize;
+
+  if (props.pageSize != null) {
+    pageSize = props.pageSize;
+  } else if (props.initialState?.pagination?.pageSize != null) {
+    pageSize = props.initialState.pagination.pageSize;
+  } else {
+    pageSize = defaultPageSize(props.autoPageSize);
+  }
+
+  return _extends({}, state, {
+    pagination: {
+      pageSize,
+      page: props.page ?? props.initialState?.pagination?.page ?? 0,
+      pageCount: getPageCount(props.rowCount ?? 0, pageSize),
+      rowCount: props.rowCount ?? 0
+    }
+  });
+};
+/**
+ * @requires useGridFilter (state)
+ * @requires useGridDimensions (event) - can be after
+ */
+
+export const useGridPagination = (apiRef, props) => {
+  useGridPageSize(apiRef, props);
+  useGridPage(apiRef, props);
+};

package/modern/hooks/features/preferencesPanel/gridPreferencePanelSelector.js

@@ -0,0 +1 @@
+export const gridPreferencePanelStateSelector = state => state.preferencePanel;

package/modern/hooks/features/preferencesPanel/gridPreferencePanelState.js

@@ -0,0 +1 @@
+export {};

package/modern/hooks/features/preferencesPanel/gridPreferencePanelsValue.js

@@ -0,0 +1,8 @@
+var GridPreferencePanelsValue;
+
+(function (GridPreferencePanelsValue) {
+  GridPreferencePanelsValue["filters"] = "filters";
+  GridPreferencePanelsValue["columns"] = "columns";
+})(GridPreferencePanelsValue || (GridPreferencePanelsValue = {}));
+
+export { GridPreferencePanelsValue };

package/modern/hooks/features/preferencesPanel/index.js

@@ -0,0 +1,3 @@
+export * from './gridPreferencePanelSelector';
+export * from './gridPreferencePanelState';
+export * from './gridPreferencePanelsValue';

package/modern/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -0,0 +1,96 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridLogger } from '../../utils/useGridLogger';
+import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { gridPreferencePanelStateSelector } from './gridPreferencePanelSelector';
+export const preferencePanelStateInitializer = (state, props) => _extends({}, state, {
+  preferencePanel: props.initialState?.preferencePanel ?? {
+    open: false
+  }
+});
+/**
+ * TODO: Add a single `setPreferencePanel` method to avoid multiple `setState`
+ */
+
+export const useGridPreferencesPanel = apiRef => {
+  const logger = useGridLogger(apiRef, 'useGridPreferencesPanel');
+  const hideTimeout = React.useRef();
+  const immediateTimeout = React.useRef();
+  /**
+   * API METHODS
+   */
+
+  const hidePreferences = React.useCallback(() => {
+    logger.debug('Hiding Preferences Panel');
+    apiRef.current.setState(state => _extends({}, state, {
+      preferencePanel: {
+        open: false
+      }
+    }));
+    apiRef.current.forceUpdate();
+  }, [apiRef, logger]); // This is to prevent the preferences from closing when you open a select box or another panel,
+  // The issue is in MUI core V4 => Fixed in V5
+
+  const doNotHidePanel = React.useCallback(() => {
+    immediateTimeout.current = setTimeout(() => clearTimeout(hideTimeout.current), 0);
+  }, []); // This is a hack for the issue with Core V4, by delaying hiding the panel on the clickAwayListener,
+  // we can cancel the action if the trigger element still need the panel...
+
+  const hidePreferencesDelayed = React.useCallback(() => {
+    hideTimeout.current = setTimeout(hidePreferences, 100);
+  }, [hidePreferences]);
+  const showPreferences = React.useCallback(newValue => {
+    logger.debug('Opening Preferences Panel');
+    doNotHidePanel();
+    apiRef.current.setState(state => _extends({}, state, {
+      preferencePanel: _extends({}, state.preferencePanel, {
+        open: true,
+        openedPanelValue: newValue
+      })
+    }));
+    apiRef.current.forceUpdate();
+  }, [doNotHidePanel, apiRef, logger]);
+  useGridApiMethod(apiRef, {
+    showPreferences,
+    hidePreferences: hidePreferencesDelayed
+  }, 'ColumnMenuApi');
+  /**
+   * PRE-PROCESSING
+   */
+
+  const stateExportPreProcessing = React.useCallback(prevState => {
+    const preferencePanelToExport = gridPreferencePanelStateSelector(apiRef.current.state);
+
+    if (!preferencePanelToExport.open && !preferencePanelToExport.openedPanelValue) {
+      return prevState;
+    }
+
+    return _extends({}, prevState, {
+      preferencePanel: preferencePanelToExport
+    });
+  }, [apiRef]);
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    const preferencePanel = context.stateToRestore.preferencePanel;
+
+    if (preferencePanel != null) {
+      apiRef.current.setState(state => _extends({}, state, {
+        preferencePanel
+      }));
+    }
+
+    return params;
+  }, [apiRef]);
+  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  /**
+   * EFFECTS
+   */
+
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(hideTimeout.current);
+      clearTimeout(immediateTimeout.current);
+    };
+  }, []);
+};

package/modern/hooks/features/rows/gridRowsMetaSelector.js

@@ -0,0 +1 @@
+export const gridRowsMetaSelector = state => state.rowsMeta;

package/modern/hooks/features/rows/gridRowsMetaState.js

@@ -0,0 +1 @@
+export {};

package/modern/hooks/features/rows/gridRowsSelector.js

@@ -0,0 +1,9 @@
+import { createSelector } from '../../../utils/createSelector';
+export const gridRowsStateSelector = state => state.rows;
+export const gridRowCountSelector = createSelector(gridRowsStateSelector, rows => rows.totalRowCount);
+export const gridTopLevelRowCountSelector = createSelector(gridRowsStateSelector, rows => rows.totalTopLevelRowCount);
+export const gridRowsLookupSelector = createSelector(gridRowsStateSelector, rows => rows.idRowsLookup);
+export const gridRowTreeSelector = createSelector(gridRowsStateSelector, rows => rows.tree);
+export const gridRowGroupingNameSelector = createSelector(gridRowsStateSelector, rows => rows.groupingName);
+export const gridRowTreeDepthSelector = createSelector(gridRowsStateSelector, rows => rows.treeDepth);
+export const gridRowIdsSelector = createSelector(gridRowsStateSelector, rows => rows.ids);

package/modern/hooks/features/rows/gridRowsState.js

@@ -0,0 +1 @@
+export {};

package/modern/hooks/features/rows/index.js

@@ -0,0 +1,4 @@
+export * from './gridRowsMetaSelector';
+export * from './gridRowsMetaState';
+export * from './gridRowsSelector';
+export {};

package/modern/hooks/features/rows/useGridParamsApi.js

@@ -0,0 +1,175 @@
+import * as React from 'react';
+import { getGridCellElement, getGridColumnHeaderElement, getGridRowElement } from '../../../utils/domUtils';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
+import { buildWarning } from '../../../utils/warning';
+let warnedOnceMissingColumn = false;
+
+function warnMissingColumn(field) {
+  console.warn([`MUI: You are calling getValue('${field}') but the column \`${field}\` is not defined.`, `Instead, you can access the data from \`params.row.${field}\`.`].join('\n'));
+  warnedOnceMissingColumn = true;
+}
+
+const getCellValueWarning = buildWarning([`MUI: You are calling getValue. This method is deprecated and will be removed in the next major version.`, 'Instead, you can access the data from `params.row`.']);
+/**
+ * @requires useGridColumns (method)
+ * @requires useGridRows (method)
+ * @requires useGridFocus (state)
+ * @requires useGridEditing (method)
+ * TODO: Impossible priority - useGridEditing also needs to be after useGridParamsApi
+ * TODO: Impossible priority - useGridFocus also needs to be after useGridParamsApi
+ */
+
+export function useGridParamsApi(apiRef) {
+  const getColumnHeaderParams = React.useCallback(field => ({
+    field,
+    colDef: apiRef.current.getColumn(field)
+  }), [apiRef]);
+  /**
+   * We want to remove the `getValue` param from `getRowParams`, `getCellParams` and `getBaseCellParams`
+   */
+
+  const getCellValueWithDeprecationWarning = React.useCallback((...args) => {
+    if (process.env.NODE_ENV !== 'production') {
+      getCellValueWarning();
+    }
+
+    return apiRef.current.getCellValue(...args);
+  }, [apiRef]);
+  const getRowParams = React.useCallback(id => {
+    const row = apiRef.current.getRow(id);
+
+    if (!row) {
+      throw new Error(`No row with id #${id} found`);
+    }
+
+    const params = {
+      id,
+      columns: apiRef.current.getAllColumns(),
+      row,
+      // TODO v6: remove
+      getValue: getCellValueWithDeprecationWarning
+    };
+    return params;
+  }, [apiRef, getCellValueWithDeprecationWarning]);
+  const getBaseCellParams = React.useCallback((id, field) => {
+    const row = apiRef.current.getRow(id);
+    const rowNode = apiRef.current.getRowNode(id);
+
+    if (!row || !rowNode) {
+      throw new Error(`No row with id #${id} found`);
+    }
+
+    const cellFocus = gridFocusCellSelector(apiRef);
+    const cellTabIndex = gridTabIndexCellSelector(apiRef);
+    const params = {
+      id,
+      field,
+      row,
+      rowNode,
+      value: row[field],
+      colDef: apiRef.current.getColumn(field),
+      cellMode: apiRef.current.getCellMode(id, field),
+      // TODO v6: remove
+      getValue: getCellValueWithDeprecationWarning,
+      api: apiRef.current,
+      hasFocus: cellFocus !== null && cellFocus.field === field && cellFocus.id === id,
+      tabIndex: cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === id ? 0 : -1
+    };
+    return params;
+  }, [apiRef, getCellValueWithDeprecationWarning]);
+  const getCellParams = React.useCallback((id, field) => {
+    const colDef = apiRef.current.getColumn(field);
+    const value = apiRef.current.getCellValue(id, field);
+    const row = apiRef.current.getRow(id);
+    const rowNode = apiRef.current.getRowNode(id);
+
+    if (!row || !rowNode) {
+      throw new Error(`No row with id #${id} found`);
+    }
+
+    const cellFocus = gridFocusCellSelector(apiRef);
+    const cellTabIndex = gridTabIndexCellSelector(apiRef);
+    const params = {
+      id,
+      field,
+      row,
+      rowNode,
+      colDef,
+      cellMode: apiRef.current.getCellMode(id, field),
+      // TODO v6: remove
+      getValue: getCellValueWithDeprecationWarning,
+      hasFocus: cellFocus !== null && cellFocus.field === field && cellFocus.id === id,
+      tabIndex: cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === id ? 0 : -1,
+      value,
+      formattedValue: value
+    };
+
+    if (colDef.valueFormatter) {
+      params.formattedValue = colDef.valueFormatter({
+        id,
+        field: params.field,
+        value: params.value,
+        api: apiRef.current
+      });
+    }
+
+    params.isEditable = colDef && apiRef.current.isCellEditable(params);
+    return params;
+  }, [apiRef, getCellValueWithDeprecationWarning]);
+  const getCellValue = React.useCallback((id, field) => {
+    const colDef = apiRef.current.getColumn(field);
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (!colDef && !warnedOnceMissingColumn) {
+        warnMissingColumn(field);
+      }
+    }
+
+    if (!colDef || !colDef.valueGetter) {
+      const rowModel = apiRef.current.getRow(id);
+
+      if (!rowModel) {
+        throw new Error(`No row with id #${id} found`);
+      }
+
+      return rowModel[field];
+    }
+
+    return colDef.valueGetter(getBaseCellParams(id, field));
+  }, [apiRef, getBaseCellParams]);
+  const getColumnHeaderElement = React.useCallback(field => {
+    if (!apiRef.current.rootElementRef.current) {
+      return null;
+    }
+
+    return getGridColumnHeaderElement(apiRef.current.rootElementRef.current, field);
+  }, [apiRef]);
+  const getRowElement = React.useCallback(id => {
+    if (!apiRef.current.rootElementRef.current) {
+      return null;
+    }
+
+    return getGridRowElement(apiRef.current.rootElementRef.current, id);
+  }, [apiRef]);
+  const getCellElement = React.useCallback((id, field) => {
+    if (!apiRef.current.rootElementRef.current) {
+      return null;
+    }
+
+    return getGridCellElement(apiRef.current.rootElementRef.current, {
+      id,
+      field
+    });
+  }, [apiRef]);
+  const paramsApi = {
+    getCellValue,
+    getCellParams,
+    getCellElement,
+    getRowParams,
+    getRowElement,
+    getColumnHeaderParams,
+    getColumnHeaderElement
+  };
+  useGridApiMethod(apiRef, paramsApi, 'GridParamsApi');
+}