@mui/x-data-grid 8.0.0-beta.3 → 8.0.0

package/modern/hooks/features/dimensions/useGridDimensions.js

@@ -1,299 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import useEventCallback from '@mui/utils/useEventCallback';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import ownerDocument from '@mui/utils/ownerDocument';
-import { throttle } from '@mui/x-internals/throttle';
-import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
-import { useGridEventPriority } from "../../utils/useGridEvent.js";
-import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
-import { createSelector } from "../../../utils/createSelector.js";
-import { useGridLogger } from "../../utils/useGridLogger.js";
-import { gridColumnPositionsSelector, gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector } from "../columns/index.js";
-import { gridDimensionsSelector } from "./gridDimensionsSelectors.js";
-import { gridDensityFactorSelector } from "../density/index.js";
-import { gridRenderContextSelector } from "../virtualization/index.js";
-import { useGridSelector } from "../../utils/index.js";
-import { getVisibleRows } from "../../utils/useGridVisibleRows.js";
-import { gridRowsMetaSelector } from "../rows/gridRowsMetaSelector.js";
-import { getValidRowHeight, rowHeightWarning } from "../rows/gridRowsUtils.js";
-import { getTotalHeaderHeight } from "../columns/gridColumnsUtils.js";
-import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../../../constants/dataGridPropsDefaultValues.js";
-import { roundToDecimalPlaces } from "../../../utils/roundToDecimalPlaces.js";
-import { isJSDOM } from "../../../utils/isJSDOM.js";
-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
-};
-export const dimensionsStateInitializer = (state, props, apiRef) => {
-  const dimensions = EMPTY_DIMENSIONS;
-  const density = gridDensityFactorSelector(apiRef);
-  return _extends({}, state, {
-    dimensions: _extends({}, dimensions, getStaticDimensions(props, apiRef, density, gridVisiblePinnedColumnDefinitionsSelector(apiRef)))
-  });
-};
-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 logger = useGridLogger(apiRef, 'useResizeContainer');
-  const errorShown = React.useRef(false);
-  const rootDimensionsRef = React.useRef(EMPTY_SIZE);
-  const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
-  const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
-  const columnsTotalWidth = useGridSelector(apiRef, columnsTotalWidthSelector);
-  const isFirstSizing = React.useRef(true);
-  const {
-    rowHeight,
-    headerHeight,
-    groupHeaderHeight,
-    headerFilterHeight,
-    headersTotalHeight,
-    leftPinnedWidth,
-    rightPinnedWidth
-  } = getStaticDimensions(props, apiRef, densityFactor, pinnedColumns);
-  const getRootDimensions = React.useCallback(() => gridDimensionsSelector(apiRef), [apiRef]);
-  const setDimensions = React.useCallback(dimensions => {
-    apiRef.current.setState(state => _extends({}, state, {
-      dimensions
-    }));
-    if (apiRef.current.rootElementRef.current) {
-      setCSSVariables(apiRef.current.rootElementRef.current, gridDimensionsSelector(apiRef));
-    }
-  }, [apiRef]);
-  const getViewportPageSize = React.useCallback(() => {
-    const dimensions = gridDimensionsSelector(apiRef);
-    if (!dimensions.isReady) {
-      return 0;
-    }
-    const currentPage = getVisibleRows(apiRef);
-
-    // TODO: Use a combination of scrollTop, dimensions.viewportInnerSize.height and rowsMeta.possitions
-    // to find out the maximum number of rows that can fit in the visible part of the grid
-    if (props.getRowHeight) {
-      const renderContext = gridRenderContextSelector(apiRef);
-      const viewportPageSize = renderContext.lastRowIndex - renderContext.firstRowIndex;
-      return Math.min(viewportPageSize - 1, currentPage.rows.length);
-    }
-    const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
-    return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
-  }, [apiRef, props.getRowHeight, rowHeight]);
-  const updateDimensions = React.useCallback(() => {
-    if (isFirstSizing.current) {
-      return;
-    }
-    // All the floating point dimensions should be rounded to .1 decimal places to avoid subpixel rendering issues
-    // https://github.com/mui/mui-x/issues/9550#issuecomment-1619020477
-    // https://github.com/mui/mui-x/issues/15721
-    const scrollbarSize = measureScrollbarSize(apiRef.current.mainElementRef.current, props.scrollbarSize);
-    const rowsMeta = gridRowsMetaSelector(apiRef);
-    const topContainerHeight = headersTotalHeight + rowsMeta.pinnedTopRowsTotalHeight;
-    const bottomContainerHeight = rowsMeta.pinnedBottomRowsTotalHeight;
-    const contentSize = {
-      width: columnsTotalWidth,
-      height: roundToDecimalPlaces(rowsMeta.currentPageTotalHeight, 1)
-    };
-    let viewportOuterSize;
-    let viewportInnerSize;
-    let hasScrollX = false;
-    let hasScrollY = false;
-    if (props.autoHeight) {
-      hasScrollY = false;
-      hasScrollX = Math.round(columnsTotalWidth) > Math.round(rootDimensionsRef.current.width);
-      viewportOuterSize = {
-        width: rootDimensionsRef.current.width,
-        height: topContainerHeight + bottomContainerHeight + contentSize.height
-      };
-      viewportInnerSize = {
-        width: Math.max(0, viewportOuterSize.width - (hasScrollY ? scrollbarSize : 0)),
-        height: Math.max(0, viewportOuterSize.height - (hasScrollX ? scrollbarSize : 0))
-      };
-    } else {
-      viewportOuterSize = {
-        width: rootDimensionsRef.current.width,
-        height: rootDimensionsRef.current.height
-      };
-      viewportInnerSize = {
-        width: Math.max(0, viewportOuterSize.width),
-        height: Math.max(0, viewportOuterSize.height - topContainerHeight - bottomContainerHeight)
-      };
-      const content = contentSize;
-      const container = viewportInnerSize;
-      const hasScrollXIfNoYScrollBar = content.width > container.width;
-      const hasScrollYIfNoXScrollBar = content.height > container.height;
-      if (hasScrollXIfNoYScrollBar || hasScrollYIfNoXScrollBar) {
-        hasScrollY = hasScrollYIfNoXScrollBar;
-        hasScrollX = content.width + (hasScrollY ? scrollbarSize : 0) > container.width;
-
-        // We recalculate the scroll y to consider the size of the x scrollbar.
-        if (hasScrollX) {
-          hasScrollY = content.height + scrollbarSize > container.height;
-        }
-      }
-      if (hasScrollY) {
-        viewportInnerSize.width -= scrollbarSize;
-      }
-      if (hasScrollX) {
-        viewportInnerSize.height -= scrollbarSize;
-      }
-    }
-    const rowWidth = Math.max(viewportOuterSize.width, columnsTotalWidth + (hasScrollY ? scrollbarSize : 0));
-    const minimumSize = {
-      width: columnsTotalWidth,
-      height: topContainerHeight + contentSize.height + bottomContainerHeight
-    };
-    const newDimensions = {
-      isReady: true,
-      root: rootDimensionsRef.current,
-      viewportOuterSize,
-      viewportInnerSize,
-      contentSize,
-      minimumSize,
-      hasScrollX,
-      hasScrollY,
-      scrollbarSize,
-      headerHeight,
-      groupHeaderHeight,
-      headerFilterHeight,
-      rowWidth,
-      rowHeight,
-      columnsTotalWidth,
-      leftPinnedWidth,
-      rightPinnedWidth,
-      headersTotalHeight,
-      topContainerHeight,
-      bottomContainerHeight
-    };
-    const prevDimensions = apiRef.current.state.dimensions;
-    if (isDeepEqual(prevDimensions, newDimensions)) {
-      return;
-    }
-    setDimensions(newDimensions);
-    if (!areElementSizesEqual(newDimensions.viewportInnerSize, prevDimensions.viewportInnerSize)) {
-      apiRef.current.publishEvent('viewportInnerSizeChange', newDimensions.viewportInnerSize);
-    }
-    apiRef.current.updateRenderContext?.();
-  }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowHeight, headerHeight, groupHeaderHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
-  const updateDimensionCallback = useEventCallback(updateDimensions);
-  const debouncedUpdateDimensions = React.useMemo(() => props.resizeThrottleMs > 0 ? throttle(() => {
-    updateDimensionCallback();
-    apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
-  }, props.resizeThrottleMs) : undefined, [apiRef, props.resizeThrottleMs, updateDimensionCallback]);
-  React.useEffect(() => debouncedUpdateDimensions?.clear, [debouncedUpdateDimensions]);
-  const apiPublic = {
-    getRootDimensions
-  };
-  const apiPrivate = {
-    updateDimensions,
-    getViewportPageSize
-  };
-  useEnhancedEffect(updateDimensions, [updateDimensions]);
-  useGridApiMethod(apiRef, apiPublic, 'public');
-  useGridApiMethod(apiRef, apiPrivate, 'private');
-  const handleRootMount = React.useCallback(root => {
-    setCSSVariables(root, gridDimensionsSelector(apiRef));
-  }, [apiRef]);
-  const handleResize = React.useCallback(size => {
-    rootDimensionsRef.current = size;
-    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;
-    }
-    if (isFirstSizing.current || !debouncedUpdateDimensions) {
-      // We want to initialize the grid dimensions as soon as possible to avoid flickering
-      isFirstSizing.current = false;
-      updateDimensions();
-      return;
-    }
-    debouncedUpdateDimensions();
-  }, [updateDimensions, props.autoHeight, debouncedUpdateDimensions, logger]);
-  useGridEventPriority(apiRef, 'rootMount', handleRootMount);
-  useGridEventPriority(apiRef, 'resize', handleResize);
-  useGridEventPriority(apiRef, 'debouncedResize', props.onResize);
-}
-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)
-  };
-}
-const scrollbarSizeCache = new WeakMap();
-function measureScrollbarSize(element, scrollbarSize) {
-  if (scrollbarSize !== undefined) {
-    return scrollbarSize;
-  }
-  if (element === null) {
-    return 0;
-  }
-  const cachedSize = scrollbarSizeCache.get(element);
-  if (cachedSize !== undefined) {
-    return cachedSize;
-  }
-  const doc = ownerDocument(element);
-  const scrollDiv = doc.createElement('div');
-  scrollDiv.style.width = '99px';
-  scrollDiv.style.height = '99px';
-  scrollDiv.style.position = 'absolute';
-  scrollDiv.style.overflow = 'scroll';
-  scrollDiv.className = 'scrollDiv';
-  element.appendChild(scrollDiv);
-  const size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-  element.removeChild(scrollDiv);
-  scrollbarSizeCache.set(element, size);
-  return size;
-}
-function areElementSizesEqual(a, b) {
-  return a.width === b.width && a.height === b.height;
-}

package/modern/hooks/features/editing/gridEditingSelectors.d.ts

@@ -1,15 +0,0 @@
-import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
-import { GridRowId } from "../../../models/gridRows.js";
-import { GridEditMode } from "../../../models/gridEditRowModel.js";
-/**
- * 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: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, {
-  rowId: GridRowId;
-  editMode: GridEditMode;
-}, boolean>;
-export declare const gridEditCellStateSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, {
-  rowId: GridRowId;
-  field: string;
-}, import("@mui/x-data-grid").GridEditCellProps<any>>;

package/modern/hooks/features/editing/gridEditingSelectors.js

@@ -1,15 +0,0 @@
-import { createSelector, createRootSelector } from "../../../utils/createSelector.js";
-import { GridEditModes } from "../../../models/gridEditRowModel.js";
-
-/**
- * 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/modern/hooks/features/editing/index.d.ts

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

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

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

package/modern/hooks/features/editing/useGridCellEditing.d.ts

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