@mui/x-data-grid 8.9.1 → 8.10.0

package/hooks/features/virtualization/useGridVirtualization.js

@@ -6,53 +6,63 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EMPTY_RENDER_CONTEXT = void 0;
 exports.useGridVirtualization = useGridVirtualization;
 exports.virtualizationStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _xVirtualizer = require("@mui/x-virtualizer");
+var _isJSDOM = require("../../../utils/isJSDOM");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
-const EMPTY_RENDER_CONTEXT = exports.EMPTY_RENDER_CONTEXT = {
-  firstRowIndex: 0,
-  lastRowIndex: 0,
-  firstColumnIndex: 0,
-  lastColumnIndex: 0
-};
+var _utils = require("../../utils");
+const HAS_LAYOUT = !_isJSDOM.isJSDOM;
+
+// HACK: Typescript doesn't use the alias name ("GridVirtualizationState") and changes
+// the autogenerated docs result, but this would otherwise be just:
+//   export type GridVirtualizationState = VirtualizationState;
+
+// XXX: We want to use the virtualizer as the source of truth for its state, but this needs to
+// stay because some parts of the grid require the `virtualization` state during initialization.
 const virtualizationStateInitializer = (state, props) => {
   const {
     disableVirtualization,
     autoHeight
   } = props;
   const virtualization = {
-    enabled: !disableVirtualization,
-    enabledForColumns: !disableVirtualization,
-    enabledForRows: !disableVirtualization && !autoHeight,
-    renderContext: EMPTY_RENDER_CONTEXT
+    enabled: !disableVirtualization && HAS_LAYOUT,
+    enabledForColumns: !disableVirtualization && HAS_LAYOUT,
+    enabledForRows: !disableVirtualization && !autoHeight && HAS_LAYOUT,
+    renderContext: _xVirtualizer.EMPTY_RENDER_CONTEXT
   };
   return (0, _extends2.default)({}, state, {
     virtualization
   });
 };
 exports.virtualizationStateInitializer = virtualizationStateInitializer;
-function useGridVirtualization(apiRef, props) {
+function useGridVirtualization(apiRef, rootProps) {
+  const {
+    virtualizer
+  } = apiRef.current;
+  const {
+    autoHeight,
+    disableVirtualization
+  } = rootProps;
+
   /*
    * API METHODS
    */
 
   const setVirtualization = enabled => {
-    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
-      virtualization: (0, _extends2.default)({}, state.virtualization, {
-        enabled,
-        enabledForColumns: enabled,
-        enabledForRows: enabled && !props.autoHeight
-      })
+    enabled && (enabled = HAS_LAYOUT);
+    virtualizer.store.set('virtualization', (0, _extends2.default)({}, virtualizer.store.state.virtualization, {
+      enabled,
+      enabledForColumns: enabled,
+      enabledForRows: enabled && !autoHeight
     }));
   };
   const setColumnVirtualization = enabled => {
-    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
-      virtualization: (0, _extends2.default)({}, state.virtualization, {
-        enabledForColumns: enabled
-      })
+    enabled && (enabled = HAS_LAYOUT);
+    virtualizer.store.set('virtualization', (0, _extends2.default)({}, virtualizer.store.state.virtualization, {
+      enabledForColumns: enabled
     }));
   };
   const api = {
@@ -60,14 +70,22 @@ function useGridVirtualization(apiRef, props) {
     unstable_setColumnVirtualization: setColumnVirtualization
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, api, 'public');
+  const forceUpdateRenderContext = virtualizer.api.forceUpdateRenderContext;
+  apiRef.current.register('private', {
+    updateRenderContext: forceUpdateRenderContext
+  });
 
   /*
    * EFFECTS
    */
 
+  (0, _utils.useGridEventPriority)(apiRef, 'sortedRowsSet', forceUpdateRenderContext);
+  (0, _utils.useGridEventPriority)(apiRef, 'paginationModelChange', forceUpdateRenderContext);
+  (0, _utils.useGridEventPriority)(apiRef, 'columnsChange', forceUpdateRenderContext);
+
   /* eslint-disable react-hooks/exhaustive-deps */
   React.useEffect(() => {
-    setVirtualization(!props.disableVirtualization);
-  }, [props.disableVirtualization, props.autoHeight]);
+    setVirtualization(!rootProps.disableVirtualization);
+  }, [disableVirtualization, autoHeight]);
   /* eslint-enable react-hooks/exhaustive-deps */
 }

package/hooks/utils/index.d.ts

@@ -1,3 +1,4 @@
+export * from '@mui/x-internals/useRunOnce';
 export { useGridEvent, useGridEventPriority, unstable_resetCleanupTracking } from "./useGridEvent.js";
 export * from "./useGridApiMethod.js";
 export * from "./useGridLogger.js";
@@ -5,6 +6,5 @@ export { useGridSelector } from "./useGridSelector.js";
 export * from "./useGridNativeEventListener.js";
 export * from "./useFirstRender.js";
 export * from "./useOnMount.js";
-export * from "./useRunOnce.js";
 export * from "./useRunOncePerLoop.js";
 export type { RenderProp } from '@mui/x-internals/useComponentRenderer';

package/hooks/utils/index.js

@@ -33,6 +33,18 @@ Object.defineProperty(exports, "useGridSelector", {
     return _useGridSelector.useGridSelector;
   }
 });
+var _useRunOnce = require("@mui/x-internals/useRunOnce");
+Object.keys(_useRunOnce).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useRunOnce[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useRunOnce[key];
+    }
+  });
+});
 var _useGridEvent = require("./useGridEvent");
 var _useGridApiMethod = require("./useGridApiMethod");
 Object.keys(_useGridApiMethod).forEach(function (key) {
@@ -95,18 +107,6 @@ Object.keys(_useOnMount).forEach(function (key) {
     }
   });
 });
-var _useRunOnce = require("./useRunOnce");
-Object.keys(_useRunOnce).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useRunOnce[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _useRunOnce[key];
-    }
-  });
-});
 var _useRunOncePerLoop = require("./useRunOncePerLoop");
 Object.keys(_useRunOncePerLoop).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/hooks/utils/useFirstRender.d.ts

@@ -1 +1 @@
-export declare const useFirstRender: (callback: () => void) => void;
+export * from '@mui/x-internals/useFirstRender';

package/hooks/utils/useFirstRender.js

@@ -1,16 +1,16 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useFirstRender = void 0;
-var React = _interopRequireWildcard(require("react"));
-const useFirstRender = callback => {
-  const isFirstRender = React.useRef(true);
-  if (isFirstRender.current) {
-    isFirstRender.current = false;
-    callback();
-  }
-};
-exports.useFirstRender = useFirstRender;
+var _useFirstRender = require("@mui/x-internals/useFirstRender");
+Object.keys(_useFirstRender).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useFirstRender[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useFirstRender[key];
+    }
+  });
+});

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.9.1
+ * @mui/x-data-grid v8.10.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/index.d.ts

@@ -12,6 +12,7 @@ export { GridBaseColumnHeaders } from "../components/columnHeaders/GridBaseColum
 export { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from "../constants/defaultGridSlotsComponents.js";
 export * from "../constants/signature.js";
 export { vars } from "../constants/cssVariables.js";
+export { useGridVirtualizer } from "../hooks/core/useGridVirtualizer.js";
 export { propsStateInitializer } from "../hooks/core/useGridProps.js";
 export { getGridFilter } from "../components/panel/filterPanel/GridFilterPanel.js";
 export { getValueOptions } from "../components/panel/filterPanel/filterPanelUtils.js";
@@ -62,6 +63,8 @@ export { getRowIdFromRowModel, GRID_ID_AUTOGENERATED, getRowValue } from "../hoo
 export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector, gridRowSelector } from "../hooks/features/rows/gridRowsSelector.js";
 export { headerFilteringStateInitializer, useGridHeaderFiltering } from "../hooks/features/headerFiltering/useGridHeaderFiltering.js";
 export { useGridRowSelection, rowSelectionStateInitializer } from "../hooks/features/rowSelection/useGridRowSelection.js";
+export { gridIsRowDragActiveSelector } from "../hooks/features/rowReorder/gridRowReorderSelector.js";
+export type { GridRowReorderState } from "../hooks/features/rowReorder/gridRowReorderInterfaces.js";
 export { useGridRowSelectionPreProcessors } from "../hooks/features/rowSelection/useGridRowSelectionPreProcessors.js";
 export { useGridSorting, sortingStateInitializer } from "../hooks/features/sorting/useGridSorting.js";
 export type { GridSortingModelApplier } from "../hooks/features/sorting/gridSortingState.js";
@@ -72,7 +75,6 @@ export { dimensionsStateInitializer, useGridDimensions } from "../hooks/features
 export * from "../hooks/features/dimensions/gridDimensionsSelectors.js";
 export { useGridStatePersistence } from "../hooks/features/statePersistence/useGridStatePersistence.js";
 export type { GridRestoreStatePreProcessingContext } from "../hooks/features/statePersistence/gridStatePersistenceInterface.js";
-export { useGridVirtualScroller, EMPTY_DETAIL_PANELS } from "../hooks/features/virtualization/useGridVirtualScroller.js";
 export * from "../hooks/features/virtualization/index.js";
 export { useGridColumnResize, columnResizeStateInitializer } from "../hooks/features/columnResize/useGridColumnResize.js";
 export { ROW_SELECTION_PROPAGATION_DEFAULT } from "../hooks/features/rowSelection/utils.js";

package/internals/index.js

@@ -14,6 +14,7 @@ var _exportNames = {
   GridBaseColumnHeaders: true,
   DATA_GRID_DEFAULT_SLOTS_COMPONENTS: true,
   vars: true,
+  useGridVirtualizer: true,
   propsStateInitializer: true,
   getGridFilter: true,
   getValueOptions: true,
@@ -78,6 +79,7 @@ var _exportNames = {
   useGridHeaderFiltering: true,
   useGridRowSelection: true,
   rowSelectionStateInitializer: true,
+  gridIsRowDragActiveSelector: true,
   useGridRowSelectionPreProcessors: true,
   useGridSorting: true,
   sortingStateInitializer: true,
@@ -87,8 +89,6 @@ var _exportNames = {
   dimensionsStateInitializer: true,
   useGridDimensions: true,
   useGridStatePersistence: true,
-  useGridVirtualScroller: true,
-  EMPTY_DETAIL_PANELS: true,
   useGridColumnResize: true,
   columnResizeStateInitializer: true,
   ROW_SELECTION_PROPAGATION_DEFAULT: true,
@@ -139,12 +139,6 @@ Object.defineProperty(exports, "DataSourceRowsUpdateStrategy", {
     return _utils2.DataSourceRowsUpdateStrategy;
   }
 });
-Object.defineProperty(exports, "EMPTY_DETAIL_PANELS", {
-  enumerable: true,
-  get: function () {
-    return _useGridVirtualScroller.EMPTY_DETAIL_PANELS;
-  }
-});
 Object.defineProperty(exports, "GRID_DEFAULT_STRATEGY", {
   enumerable: true,
   get: function () {
@@ -427,6 +421,12 @@ Object.defineProperty(exports, "gridHeaderFilteringMenuSelector", {
     return _gridHeaderFilteringSelectors.gridHeaderFilteringMenuSelector;
   }
 });
+Object.defineProperty(exports, "gridIsRowDragActiveSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridRowReorderSelector.gridIsRowDragActiveSelector;
+  }
+});
 Object.defineProperty(exports, "gridPinnedRowsSelector", {
   enumerable: true,
   get: function () {
@@ -793,10 +793,10 @@ Object.defineProperty(exports, "useGridStatePersistence", {
     return _useGridStatePersistence.useGridStatePersistence;
   }
 });
-Object.defineProperty(exports, "useGridVirtualScroller", {
+Object.defineProperty(exports, "useGridVirtualizer", {
   enumerable: true,
   get: function () {
-    return _useGridVirtualScroller.useGridVirtualScroller;
+    return _useGridVirtualizer.useGridVirtualizer;
   }
 });
 Object.defineProperty(exports, "useGridVisibleRows", {
@@ -838,6 +838,7 @@ Object.keys(_signature).forEach(function (key) {
   });
 });
 var _cssVariables = require("../constants/cssVariables");
+var _useGridVirtualizer = require("../hooks/core/useGridVirtualizer");
 var _useGridProps = require("../hooks/core/useGridProps");
 var _GridFilterPanel = require("../components/panel/filterPanel/GridFilterPanel");
 var _filterPanelUtils = require("../components/panel/filterPanel/filterPanelUtils");
@@ -911,6 +912,7 @@ var _useGridParamsApi = require("../hooks/features/rows/useGridParamsApi");
 var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
 var _useGridHeaderFiltering = require("../hooks/features/headerFiltering/useGridHeaderFiltering");
 var _useGridRowSelection = require("../hooks/features/rowSelection/useGridRowSelection");
+var _gridRowReorderSelector = require("../hooks/features/rowReorder/gridRowReorderSelector");
 var _useGridRowSelectionPreProcessors = require("../hooks/features/rowSelection/useGridRowSelectionPreProcessors");
 var _useGridSorting = require("../hooks/features/sorting/useGridSorting");
 var _gridSortingSelector = require("../hooks/features/sorting/gridSortingSelector");
@@ -930,7 +932,6 @@ Object.keys(_gridDimensionsSelectors).forEach(function (key) {
   });
 });
 var _useGridStatePersistence = require("../hooks/features/statePersistence/useGridStatePersistence");
-var _useGridVirtualScroller = require("../hooks/features/virtualization/useGridVirtualScroller");
 var _virtualization = require("../hooks/features/virtualization");
 Object.keys(_virtualization).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/utils/getPinnedCellOffset.js

@@ -18,6 +18,11 @@ const getPinnedCellOffset = (pinnedPosition, computedWidth, columnIndex, columnP
       pinnedOffset = undefined;
       break;
   }
+
+  // XXX: fix this properly
+  if (Number.isNaN(pinnedOffset)) {
+    pinnedOffset = undefined;
+  }
   return pinnedOffset;
 };
 exports.getPinnedCellOffset = getPinnedCellOffset;

package/locales/frFR.js

@@ -9,8 +9,8 @@ const frFRGrid = {
   // Root
   noRowsLabel: 'Pas de résultats',
   noResultsOverlayLabel: 'Aucun résultat.',
-  // noColumnsOverlayLabel: 'No columns',
-  // noColumnsOverlayManageColumns: 'Manage columns',
+  noColumnsOverlayLabel: 'Aucune colonne',
+  noColumnsOverlayManageColumns: 'Gérer les colonnes',
   // emptyPivotOverlayLabel: 'Add fields to rows, columns, and values to create a pivot table',
 
   // Density selector toolbar button text
@@ -42,15 +42,13 @@ const frFRGrid = {
   // toolbarPivot: 'Pivot',
 
   // Toolbar AI Assistant button
-  // toolbarAssistant: 'AI Assistant',
-
+  toolbarAssistant: 'Assistant IA',
   // Columns management text
   columnsManagementSearchTitle: 'Rechercher',
   columnsManagementNoColumns: 'Pas de colonnes',
   columnsManagementShowHideAllText: 'Afficher/masquer toutes',
   columnsManagementReset: 'Réinitialiser',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementDeleteIconLabel: 'Effacer',
   // Filter panel text
   filterPanelAddFilter: 'Ajouter un filtre',
   filterPanelRemoveAll: 'Tout supprimer',
@@ -106,15 +104,14 @@ const frFRGrid = {
   'headerFilterOperator>=': 'Est supérieur ou égal à',
   'headerFilterOperator<': 'Est inférieur à',
   'headerFilterOperator<=': 'Est inférieur ou égal à',
-  // headerFilterClear: 'Clear filter',
-
+  headerFilterClear: 'Effacer le filtre',
   // Filter values text
   filterValueAny: 'tous',
   filterValueTrue: 'vrai',
   filterValueFalse: 'faux',
   // Column menu text
   columnMenuLabel: 'Menu',
-  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
+  columnMenuAriaLabel: columnName => `Menu pour la colonne ${columnName}`,
   columnMenuShowColumns: 'Afficher les colonnes',
   columnMenuManageColumns: 'Gérer les colonnes',
   columnMenuFilter: 'Filtrer',
@@ -163,18 +160,18 @@ const frFRGrid = {
   collapseDetailPanel: 'Masquer',
   // Pagination
   paginationRowsPerPage: 'Lignes par page :',
-  // paginationDisplayedRows: ({
-  //   from,
-  //   to,
-  //   count,
-  //   estimated
-  // }) => {
-  //   if (!estimated) {
-  //     return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
-  //   }
-  //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
-  // },
+  paginationDisplayedRows: ({
+    from,
+    to,
+    count,
+    estimated
+  }) => {
+    if (!estimated) {
+      return `${from}–${to} sur ${count !== -1 ? count : `plus de ${to}`}`;
+    }
+    const estimatedLabel = estimated && estimated > to ? `environ ${estimated}` : `plus de ${to}`;
+    return `${from}–${to} sur ${count !== -1 ? count : estimatedLabel}`;
+  },
   paginationItemAriaLabel: type => {
     if (type === 'first') {
       return 'Aller à la première page';

package/locales/heIL.js

@@ -162,18 +162,18 @@ const heILGrid = {
   collapseDetailPanel: 'כווץ',
   // Pagination
   paginationRowsPerPage: 'שורות בעמוד:',
-  // paginationDisplayedRows: ({
-  //   from,
-  //   to,
-  //   count,
-  //   estimated
-  // }) => {
-  //   if (!estimated) {
-  //     return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
-  //   }
-  //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
-  // },
+  paginationDisplayedRows: ({
+    from,
+    to,
+    count,
+    estimated
+  }) => {
+    if (!estimated) {
+      return `${from}-${to} מתוך ${count !== -1 ? count : `יותר מ־${to}`}`;
+    }
+    const estimatedLabel = estimated && estimated > to ? `כ־${estimated}` : `יותר מ־${to}`;
+    return `${from}-${to} מתוך ${count !== -1 ? count : estimatedLabel}`;
+  },
   paginationItemAriaLabel: type => {
     if (type === 'first') {
       return 'לעמוד הראשון';