@mui/x-data-grid 9.0.0-alpha.0 → 9.0.0-alpha.2

package/hooks/features/dimensions/gridDimensionsSelectors.mjs

@@ -0,0 +1,25 @@
+import { createSelector, createRootSelector } from "../../../utils/createSelector.mjs";
+export const gridDimensionsSelector = createRootSelector(state => state.dimensions);
+
+/**
+ * Get the summed width of all the visible columns.
+ * @category Visible Columns
+ */
+export const gridColumnsTotalWidthSelector = createSelector(gridDimensionsSelector, dimensions => dimensions.columnsTotalWidth);
+export const gridRowHeightSelector = createSelector(gridDimensionsSelector, dimensions => dimensions.rowHeight);
+export const gridContentHeightSelector = createSelector(gridDimensionsSelector, dimensions => dimensions.contentSize.height);
+export const gridHasScrollXSelector = createSelector(gridDimensionsSelector, dimensions => dimensions.hasScrollX);
+export const gridHasScrollYSelector = createSelector(gridDimensionsSelector, dimensions => dimensions.hasScrollY);
+export const gridHasFillerSelector = createSelector(gridDimensionsSelector, dimensions => dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width);
+export const gridHeaderHeightSelector = createSelector(gridDimensionsSelector, dimensions => dimensions.headerHeight);
+export const gridGroupHeaderHeightSelector = createSelector(gridDimensionsSelector, dimensions => dimensions.groupHeaderHeight);
+export const gridHeaderFilterHeightSelector = createSelector(gridDimensionsSelector, dimensions => dimensions.headerFilterHeight);
+export const gridHorizontalScrollbarHeightSelector = createSelector(gridDimensionsSelector, dimensions => dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
+export const gridVerticalScrollbarWidthSelector = createSelector(gridDimensionsSelector, dimensions => dimensions.hasScrollY ? dimensions.scrollbarSize : 0);
+export const gridHasBottomFillerSelector = createSelector(gridDimensionsSelector, gridHorizontalScrollbarHeightSelector, (dimensions, height) => {
+  const needsLastRowBorder = dimensions.viewportOuterSize.height - dimensions.minimumSize.height > 0;
+  if (height === 0 && !needsLastRowBorder) {
+    return false;
+  }
+  return true;
+});

package/hooks/features/dimensions/index.d.mts

@@ -0,0 +1,3 @@
+export type { GridDimensionsState } from "./useGridDimensions.mjs";
+export { gridDimensionsSelector, gridColumnsTotalWidthSelector } from "./gridDimensionsSelectors.mjs";
+export type { GridDimensions, GridDimensionsApi } from "./gridDimensionsApi.mjs";

package/hooks/features/dimensions/index.mjs

@@ -0,0 +1 @@
+export { gridDimensionsSelector, gridColumnsTotalWidthSelector } from "./gridDimensionsSelectors.mjs";

package/hooks/features/dimensions/useGridDimensions.d.mts

@@ -0,0 +1,10 @@
+import type { RefObject } from '@mui/x-internals/types';
+import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.mjs";
+import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.mjs";
+import type { GridDimensions } from "./gridDimensionsApi.mjs";
+import type { GridStateInitializer } from "../../utils/useGridInitializeState.mjs";
+type RootProps = Pick<DataGridProcessedProps, 'onResize' | 'scrollbarSize' | 'pagination' | 'paginationMode' | 'autoHeight' | 'getRowHeight' | 'rowHeight' | 'resizeThrottleMs' | 'columnHeaderHeight' | 'columnGroupHeaderHeight' | 'headerFilterHeight'>;
+export type GridDimensionsState = GridDimensions;
+export declare const dimensionsStateInitializer: GridStateInitializer<RootProps>;
+export declare function useGridDimensions(apiRef: RefObject<GridPrivateApiCommunity>, props: RootProps): void;
+export {};

package/hooks/features/dimensions/useGridDimensions.mjs

@@ -0,0 +1,144 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useStoreEffect } from '@mui/x-internals/store';
+import { useGridEventPriority } from "../../utils/useGridEvent.mjs";
+import { useGridApiMethod } from "../../utils/useGridApiMethod.mjs";
+import { createSelector } from "../../../utils/createSelector.mjs";
+import { useGridLogger } from "../../utils/useGridLogger.mjs";
+import { gridColumnPositionsSelector, gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector } from "../columns/index.mjs";
+import { gridDimensionsSelector } from "./gridDimensionsSelectors.mjs";
+import { gridDensityFactorSelector } from "../density/index.mjs";
+import { getValidRowHeight, rowHeightWarning } from "../rows/gridRowsUtils.mjs";
+import { getTotalHeaderHeight } from "../columns/gridColumnsUtils.mjs";
+import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../../../constants/dataGridPropsDefaultValues.mjs";
+import { roundToDecimalPlaces } from "../../../utils/roundToDecimalPlaces.mjs";
+import { isJSDOM } from "../../../utils/isJSDOM.mjs";
+const EMPTY_SIZE = {
+  width: 0,
+  height: 0
+};
+const EMPTY_DIMENSIONS = {
+  isReady: false,
+  root: EMPTY_SIZE,
+  viewportOuterSize: EMPTY_SIZE,
+  viewportInnerSize: EMPTY_SIZE,
+  contentSize: EMPTY_SIZE,
+  minimumSize: EMPTY_SIZE,
+  hasScrollX: false,
+  hasScrollY: false,
+  scrollbarSize: 0,
+  headerHeight: 0,
+  groupHeaderHeight: 0,
+  headerFilterHeight: 0,
+  rowWidth: 0,
+  rowHeight: 0,
+  columnsTotalWidth: 0,
+  leftPinnedWidth: 0,
+  rightPinnedWidth: 0,
+  headersTotalHeight: 0,
+  topContainerHeight: 0,
+  bottomContainerHeight: 0,
+  autoHeight: false,
+  minimalContentHeight: undefined
+};
+export const dimensionsStateInitializer = (state, props, apiRef) => {
+  const dimensions = EMPTY_DIMENSIONS;
+  const density = gridDensityFactorSelector(apiRef);
+  const dimensionsWithStatic = _extends({}, dimensions, getStaticDimensions(props, apiRef, density, gridVisiblePinnedColumnDefinitionsSelector(apiRef)));
+  apiRef.current.store.state.dimensions = dimensionsWithStatic;
+  return _extends({}, state, {
+    dimensions: dimensionsWithStatic
+  });
+};
+const columnsTotalWidthSelector = createSelector(gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector, (visibleColumns, positions) => {
+  const colCount = visibleColumns.length;
+  if (colCount === 0) {
+    return 0;
+  }
+  return roundToDecimalPlaces(positions[colCount - 1] + visibleColumns[colCount - 1].computedWidth, 1);
+});
+export function useGridDimensions(apiRef, props) {
+  const getRootDimensions = React.useCallback(() => gridDimensionsSelector(apiRef), [apiRef]);
+  const apiPublic = {
+    getRootDimensions
+  };
+  const apiPrivate = {
+    updateDimensions: () => {
+      return apiRef.current.virtualizer.api.updateDimensions();
+    },
+    getViewportPageSize: () => {
+      return apiRef.current.virtualizer.api.getViewportPageSize();
+    }
+  };
+  useGridApiMethod(apiRef, apiPublic, 'public');
+  useGridApiMethod(apiRef, apiPrivate, 'private');
+  const handleRootMount = root => {
+    setCSSVariables(root, gridDimensionsSelector(apiRef));
+  };
+  useGridEventPriority(apiRef, 'rootMount', handleRootMount);
+  useGridEventPriority(apiRef, 'debouncedResize', props.onResize);
+  if (process.env.NODE_ENV !== 'production') {
+    /* eslint-disable react-hooks/rules-of-hooks */
+    const logger = useGridLogger(apiRef, 'useResizeContainer');
+    const errorShown = React.useRef(false);
+    useGridEventPriority(apiRef, 'resize', size => {
+      if (!getRootDimensions().isReady) {
+        return;
+      }
+      if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
+        logger.error(['The parent DOM element of the Data Grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
+        errorShown.current = true;
+      }
+      if (size.width === 0 && !errorShown.current && !isJSDOM) {
+        logger.error(['The parent DOM element of the Data Grid has an empty width.', 'Please make sure that this element has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
+        errorShown.current = true;
+      }
+    });
+    /* eslint-enable react-hooks/rules-of-hooks */
+  }
+  useStoreEffect(apiRef.current.store, s => s.dimensions, (previous, next) => {
+    if (!next.isReady) {
+      return;
+    }
+    if (apiRef.current.rootElementRef.current) {
+      setCSSVariables(apiRef.current.rootElementRef.current, next);
+    }
+    if (!areElementSizesEqual(next.viewportInnerSize, previous.viewportInnerSize)) {
+      apiRef.current.publishEvent('viewportInnerSizeChange', next.viewportInnerSize);
+    }
+    apiRef.current.publishEvent('debouncedResize', next.root);
+  });
+}
+function setCSSVariables(root, dimensions) {
+  const set = (k, v) => root.style.setProperty(k, v);
+  set('--DataGrid-hasScrollX', `${Number(dimensions.hasScrollX)}`);
+  set('--DataGrid-hasScrollY', `${Number(dimensions.hasScrollY)}`);
+  set('--DataGrid-scrollbarSize', `${dimensions.scrollbarSize}px`);
+  set('--DataGrid-rowWidth', `${dimensions.rowWidth}px`);
+  set('--DataGrid-columnsTotalWidth', `${dimensions.columnsTotalWidth}px`);
+  set('--DataGrid-leftPinnedWidth', `${dimensions.leftPinnedWidth}px`);
+  set('--DataGrid-rightPinnedWidth', `${dimensions.rightPinnedWidth}px`);
+  set('--DataGrid-headerHeight', `${dimensions.headerHeight}px`);
+  set('--DataGrid-headersTotalHeight', `${dimensions.headersTotalHeight}px`);
+  set('--DataGrid-topContainerHeight', `${dimensions.topContainerHeight}px`);
+  set('--DataGrid-bottomContainerHeight', `${dimensions.bottomContainerHeight}px`);
+  set('--height', `${dimensions.rowHeight}px`);
+}
+function getStaticDimensions(props, apiRef, density, pinnedColumnns) {
+  const validRowHeight = getValidRowHeight(props.rowHeight, DATA_GRID_PROPS_DEFAULT_VALUES.rowHeight, rowHeightWarning);
+  return {
+    rowHeight: Math.floor(validRowHeight * density),
+    headerHeight: Math.floor(props.columnHeaderHeight * density),
+    groupHeaderHeight: Math.floor((props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * density),
+    headerFilterHeight: Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * density),
+    columnsTotalWidth: columnsTotalWidthSelector(apiRef),
+    headersTotalHeight: getTotalHeaderHeight(apiRef, props),
+    leftPinnedWidth: pinnedColumnns.left.reduce((w, col) => w + col.computedWidth, 0),
+    rightPinnedWidth: pinnedColumnns.right.reduce((w, col) => w + col.computedWidth, 0)
+  };
+}
+function areElementSizesEqual(a, b) {
+  return a.width === b.width && a.height === b.height;
+}

package/hooks/features/editing/gridEditingSelectors.d.mts

@@ -0,0 +1,19 @@
+import type { GridStateCommunity } from "../../../models/gridStateCommunity.mjs";
+import type { GridRowId } from "../../../models/gridRows.mjs";
+import { type GridEditMode } from "../../../models/gridEditRowModel.mjs";
+/**
+ * Select the row editing state.
+ */
+export declare const gridEditRowsStateSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, import("@mui/x-data-grid").GridEditingState>;
+export declare const gridRowIsEditingSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>, args_1: {
+  rowId: GridRowId;
+  editMode: GridEditMode;
+}) => boolean;
+export declare const gridEditCellStateSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>, args_1: {
+  rowId: GridRowId;
+  field: string;
+}) => import("@mui/x-data-grid").GridEditCellProps<any>;

package/hooks/features/editing/gridEditingSelectors.mjs

@@ -0,0 +1,15 @@
+import { createSelector, createRootSelector } from "../../../utils/createSelector.mjs";
+import { GridEditModes } from "../../../models/gridEditRowModel.mjs";
+
+/**
+ * Select the row editing state.
+ */
+export const gridEditRowsStateSelector = createRootSelector(state => state.editRows);
+export const gridRowIsEditingSelector = createSelector(gridEditRowsStateSelector, (editRows, {
+  rowId,
+  editMode
+}) => editMode === GridEditModes.Row && Boolean(editRows[rowId]));
+export const gridEditCellStateSelector = createSelector(gridEditRowsStateSelector, (editRows, {
+  rowId,
+  field
+}) => editRows[rowId]?.[field] ?? null);

package/hooks/features/editing/index.d.mts

@@ -0,0 +1 @@
+export * from "./gridEditingSelectors.mjs";

package/hooks/features/editing/index.mjs

@@ -0,0 +1 @@
+export * from "./gridEditingSelectors.mjs";

package/hooks/features/editing/useGridCellEditable.d.mts

@@ -0,0 +1,5 @@
+import type { CellEditableConditionFn } from "../../../models/configuration/gridCellEditableConfiguration.mjs";
+/**
+ * Default implementation of the cell editable condition hook
+ */
+export declare const useIsCellEditable: () => CellEditableConditionFn;

package/hooks/features/editing/useGridCellEditable.mjs

@@ -0,0 +1,9 @@
+'use client';
+
+import * as React from 'react';
+import { isAutogeneratedRowNode } from "../rows/gridRowsUtils.mjs";
+
+/**
+ * Default implementation of the cell editable condition hook
+ */
+export const useIsCellEditable = () => React.useCallback(params => !isAutogeneratedRowNode(params.rowNode), []);

package/hooks/features/editing/useGridCellEditing.d.mts

@@ -0,0 +1,4 @@
+import type { RefObject } from '@mui/x-internals/types';
+import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.mjs";
+import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.mjs";
+export declare const useGridCellEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "editMode" | "processRowUpdate" | "onCellEditStart" | "onCellEditStop" | "cellModesModel" | "onCellModesModelChange" | "onProcessRowUpdateError" | "signature" | "dataSource">) => void;

package/hooks/features/editing/useGridCellEditing.js

@@ -10,6 +10,7 @@ exports.useGridCellEditing = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _toPropertyKey2 = _interopRequireDefault(require("@babel/runtime/helpers/toPropertyKey"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
 var _warning = require("@mui/x-internals/warning");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
@@ -44,12 +45,12 @@ const useGridCellEditing = (apiRef, props) => {
   const throwIfNotEditable = React.useCallback((id, field) => {
     const params = apiRef.current.getCellParams(id, field);
     if (!apiRef.current.isCellEditable(params)) {
-      throw new Error(`MUI X: The cell with id=${id} and field=${field} is not editable.`);
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Data Grid: The cell with id=${id} and field=${field} is not editable. ` + 'Cell editing requires the cell to be marked as editable. ' + 'Check the column definition and ensure editable is set to true, or verify the isCellEditable callback.' : (0, _formatErrorMessage2.default)(77, id, field));
     }
   }, [apiRef]);
   const throwIfNotInMode = React.useCallback((id, field, mode) => {
     if (apiRef.current.getCellMode(id, field) !== mode) {
-      throw new Error(`MUI X: The cell with id=${id} and field=${field} is not in ${mode} mode.`);
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Data Grid: The cell with id=${id} and field=${field} is not in ${mode} mode. ` + 'The operation requires the cell to be in a specific editing mode. ' + `Ensure the cell is in ${mode} mode before performing this operation.` : (0, _formatErrorMessage2.default)(78, id, field, mode, mode));
     }
   }, [apiRef]);
   const handleCellDoubleClick = React.useCallback((params, event) => {