@mui/x-data-grid-pro 5.4.0 → 5.6.0

package/modern/hooks/features/columnPinning/useGridColumnPinning.js

@@ -0,0 +1,268 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import MuiDivider from '@mui/material/Divider';
+import { useGridSelector, gridVisibleColumnDefinitionsSelector, gridColumnsTotalWidthSelector, gridColumnPositionsSelector, gridVisibleColumnFieldsSelector, gridClasses, GridEvents, useGridApiMethod, useGridApiEventHandler } from '@mui/x-data-grid';
+import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { GridColumnPinningMenuItems } from '../../../components/GridColumnPinningMenuItems';
+import { GridPinnedPosition } from './gridColumnPinningInterface';
+import { gridPinnedColumnsSelector } from './gridColumnPinningSelector';
+import { filterColumns } from '../../../components/DataGridProVirtualScroller';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const Divider = () => /*#__PURE__*/_jsx(MuiDivider, {
+  onClick: event => event.stopPropagation()
+});
+
+export const columnPinningStateInitializer = (state, props) => {
+  let model;
+
+  if (props.disableColumnPinning) {
+    model = {};
+  } else if (props.pinnedColumns) {
+    model = props.pinnedColumns;
+  } else if (props.initialState?.pinnedColumns) {
+    model = props.initialState?.pinnedColumns;
+  } else {
+    model = {};
+  }
+
+  return _extends({}, state, {
+    pinnedColumns: model
+  });
+};
+
+const mergeStateWithPinnedColumns = pinnedColumns => state => _extends({}, state, {
+  pinnedColumns
+});
+
+export const useGridColumnPinning = (apiRef, props) => {
+  const pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector); // Each visible row (not to be confused with a filter result) is composed of a central .MuiDataGrid-row element
+  // and up to two additional .MuiDataGrid-row's, one for the columns pinned to the left and another
+  // for those on the right side. When hovering any of these elements, the :hover styles are applied only to
+  // the row element that was actually hovered, not its additional siblings. To make it look like a contiguous row,
+  // this method adds/removes the .Mui-hovered class to all of the row elements inside one visible row.
+
+  const updateHoveredClassOnSiblingRows = React.useCallback(event => {
+    if (props.disableColumnPinning) {
+      return;
+    }
+
+    if (!Array.isArray(pinnedColumns.left) && !Array.isArray(pinnedColumns.right)) {
+      return;
+    }
+
+    const nbLeftPinnedColumns = pinnedColumns.left?.length ?? 0;
+    const nbRightPinnedColumns = pinnedColumns.right?.length ?? 0;
+
+    if (nbLeftPinnedColumns + nbRightPinnedColumns === 0) {
+      return;
+    }
+
+    const index = event.currentTarget.dataset.rowindex;
+    const rowElements = apiRef.current.windowRef.current.querySelectorAll(`.${gridClasses.row}[data-rowindex="${index}"]`);
+    rowElements.forEach(row => {
+      // Ignore rows from other grid inside the hovered row
+      if (row.closest(`.${gridClasses.virtualScroller}`) === apiRef.current.windowRef.current) {
+        if (event.type === 'mouseenter') {
+          row.classList.add('Mui-hovered');
+        } else {
+          row.classList.remove('Mui-hovered');
+        }
+      }
+    });
+  }, [apiRef, pinnedColumns.left, pinnedColumns.right, props.disableColumnPinning]);
+  const handleMouseEnter = React.useCallback((params, event) => {
+    updateHoveredClassOnSiblingRows(event);
+  }, [updateHoveredClassOnSiblingRows]);
+  const handleMouseLeave = React.useCallback((params, event) => {
+    updateHoveredClassOnSiblingRows(event);
+  }, [updateHoveredClassOnSiblingRows]);
+  useGridApiEventHandler(apiRef, GridEvents.rowMouseEnter, handleMouseEnter);
+  useGridApiEventHandler(apiRef, GridEvents.rowMouseLeave, handleMouseLeave);
+  /**
+   * PRE-PROCESSING
+   */
+
+  const calculateScrollLeft = React.useCallback((initialValue, params) => {
+    if (props.disableColumnPinning) {
+      return initialValue;
+    }
+
+    const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
+    const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, visibleColumnFields);
+
+    if (!params.colIndex || leftPinnedColumns.length === 0 && rightPinnedColumns.length === 0) {
+      return initialValue;
+    }
+
+    const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+    const columnsTotalWidth = gridColumnsTotalWidthSelector(apiRef);
+    const columnPositions = gridColumnPositionsSelector(apiRef);
+    const clientWidth = apiRef.current.windowRef.current.clientWidth;
+    const scrollLeft = apiRef.current.windowRef.current.scrollLeft;
+    const offsetWidth = visibleColumns[params.colIndex].computedWidth;
+    const offsetLeft = columnPositions[params.colIndex];
+    const leftPinnedColumnsWidth = columnPositions[leftPinnedColumns.length];
+    const rightPinnedColumnsWidth = columnsTotalWidth - columnPositions[columnPositions.length - rightPinnedColumns.length];
+    const elementBottom = offsetLeft + offsetWidth;
+
+    if (elementBottom - (clientWidth - rightPinnedColumnsWidth) > scrollLeft) {
+      const left = elementBottom - (clientWidth - rightPinnedColumnsWidth);
+      return _extends({}, initialValue, {
+        left
+      });
+    }
+
+    if (offsetLeft < scrollLeft + leftPinnedColumnsWidth) {
+      const left = offsetLeft - leftPinnedColumnsWidth;
+      return _extends({}, initialValue, {
+        left
+      });
+    }
+
+    return initialValue;
+  }, [apiRef, pinnedColumns, props.disableColumnPinning]);
+  const addColumnMenuButtons = React.useCallback((initialValue, column) => {
+    if (props.disableColumnPinning) {
+      return initialValue;
+    }
+
+    if (column.pinnable === false) {
+      return initialValue;
+    }
+
+    return [...initialValue, /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(GridColumnPinningMenuItems, {})];
+  }, [props.disableColumnPinning]);
+  const checkIfCanBeReordered = React.useCallback((initialValue, {
+    targetIndex
+  }) => {
+    const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
+    const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, visibleColumnFields);
+
+    if (leftPinnedColumns.length === 0 && rightPinnedColumns.length === 0) {
+      return initialValue;
+    }
+
+    if (leftPinnedColumns.length > 0 && targetIndex < leftPinnedColumns.length) {
+      return false;
+    }
+
+    if (rightPinnedColumns.length > 0) {
+      const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+      const firstRightPinnedColumnIndex = visibleColumns.length - rightPinnedColumns.length;
+      return targetIndex >= firstRightPinnedColumnIndex ? false : initialValue;
+    }
+
+    return initialValue;
+  }, [apiRef, pinnedColumns]);
+  const stateExportPreProcessing = React.useCallback(prevState => {
+    const pinnedColumnsToExport = gridPinnedColumnsSelector(apiRef.current.state);
+
+    if ((!pinnedColumnsToExport.left || pinnedColumnsToExport.left.length === 0) && (!pinnedColumnsToExport.right || pinnedColumnsToExport.right.length === 0)) {
+      return prevState;
+    }
+
+    return _extends({}, prevState, {
+      pinnedColumns: pinnedColumnsToExport
+    });
+  }, [apiRef]);
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    const newPinnedColumns = context.stateToRestore.pinnedColumns;
+
+    if (newPinnedColumns != null) {
+      apiRef.current.setState(mergeStateWithPinnedColumns(newPinnedColumns));
+    }
+
+    return params;
+  }, [apiRef]);
+  useGridRegisterPreProcessor(apiRef, 'scrollToIndexes', calculateScrollLeft);
+  useGridRegisterPreProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
+  useGridRegisterPreProcessor(apiRef, 'canBeReordered', checkIfCanBeReordered);
+  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  apiRef.current.unstable_updateControlState({
+    stateId: 'pinnedColumns',
+    propModel: props.pinnedColumns,
+    propOnChange: props.onPinnedColumnsChange,
+    stateSelector: gridPinnedColumnsSelector,
+    changeEvent: GridEvents.pinnedColumnsChange
+  });
+  const checkIfEnabled = React.useCallback(methodName => {
+    if (props.disableColumnPinning) {
+      throw new Error(`MUI: You cannot call \`apiRef.current.${methodName}\` when \`disableColumnPinning\` is true.`);
+    }
+  }, [props.disableColumnPinning]);
+  const pinColumn = React.useCallback((field, side) => {
+    checkIfEnabled('pinColumn');
+
+    if (apiRef.current.isColumnPinned(field) === side) {
+      return;
+    }
+
+    apiRef.current.setState(state => {
+      const otherSide = side === GridPinnedPosition.right ? GridPinnedPosition.left : GridPinnedPosition.right;
+
+      const newPinnedColumns = _extends({}, state.pinnedColumns, {
+        [side]: [...(state.pinnedColumns[side] || []), field],
+        [otherSide]: (state.pinnedColumns[otherSide] || []).filter(column => column !== field)
+      });
+
+      return _extends({}, state, {
+        pinnedColumns: newPinnedColumns
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef, checkIfEnabled]);
+  const unpinColumn = React.useCallback(field => {
+    checkIfEnabled('unpinColumn');
+    apiRef.current.setState(state => {
+      const newPinnedColumns = _extends({}, state.pinnedColumns, {
+        left: (state.pinnedColumns.left || []).filter(column => column !== field),
+        right: (state.pinnedColumns.right || []).filter(column => column !== field)
+      });
+
+      return _extends({}, state, {
+        pinnedColumns: newPinnedColumns
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef, checkIfEnabled]);
+  const getPinnedColumns = React.useCallback(() => {
+    checkIfEnabled('getPinnedColumns');
+    return gridPinnedColumnsSelector(apiRef.current.state);
+  }, [apiRef, checkIfEnabled]);
+  const setPinnedColumns = React.useCallback(newPinnedColumns => {
+    checkIfEnabled('setPinnedColumns');
+    apiRef.current.setState(mergeStateWithPinnedColumns(newPinnedColumns));
+    apiRef.current.forceUpdate();
+  }, [apiRef, checkIfEnabled]);
+  const isColumnPinned = React.useCallback(field => {
+    checkIfEnabled('isColumnPinned');
+    const leftPinnedColumns = pinnedColumns.left || [];
+
+    if (leftPinnedColumns.includes(field)) {
+      return GridPinnedPosition.left;
+    }
+
+    const rightPinnedColumns = pinnedColumns.right || [];
+
+    if (rightPinnedColumns.includes(field)) {
+      return GridPinnedPosition.right;
+    }
+
+    return false;
+  }, [pinnedColumns.left, pinnedColumns.right, checkIfEnabled]);
+  const columnPinningApi = {
+    pinColumn,
+    unpinColumn,
+    getPinnedColumns,
+    setPinnedColumns,
+    isColumnPinned
+  };
+  useGridApiMethod(apiRef, columnPinningApi, 'columnPinningApi');
+  React.useEffect(() => {
+    if (props.pinnedColumns) {
+      apiRef.current.setPinnedColumns(props.pinnedColumns);
+    }
+  }, [apiRef, props.pinnedColumns]);
+};

package/modern/hooks/features/columnPinning/useGridColumnPinningPreProcessors.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { gridPinnedColumnsSelector } from './gridColumnPinningSelector';
+import { columnPinningStateInitializer } from './useGridColumnPinning';
+import { filterColumns } from '../../../components/DataGridProVirtualScroller';
+export const useGridColumnPinningPreProcessors = (apiRef, props) => {
+  const {
+    disableColumnPinning,
+    pinnedColumns: pinnedColumnsProp,
+    initialState
+  } = props;
+  let pinnedColumns = gridPinnedColumnsSelector(apiRef.current.state);
+
+  if (pinnedColumns == null) {
+    // Since the state is not ready yet lets use the initializer to get which
+    // columns should be pinned initially.
+    const initializedState = columnPinningStateInitializer(apiRef.current.state, {
+      disableColumnPinning,
+      pinnedColumns: pinnedColumnsProp,
+      initialState
+    }, apiRef);
+    pinnedColumns = gridPinnedColumnsSelector(initializedState);
+  }
+
+  const reorderPinnedColumns = React.useCallback(columnsState => {
+    if (columnsState.all.length === 0 || disableColumnPinning) {
+      return columnsState;
+    }
+
+    const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, columnsState.all);
+
+    if (leftPinnedColumns.length === 0 && rightPinnedColumns.length === 0) {
+      return columnsState;
+    }
+
+    const centerColumns = columnsState.all.filter(field => {
+      return !leftPinnedColumns.includes(field) && !rightPinnedColumns.includes(field);
+    });
+    return _extends({}, columnsState, {
+      all: [...leftPinnedColumns, ...centerColumns, ...rightPinnedColumns]
+    });
+  }, [disableColumnPinning, pinnedColumns]);
+  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', reorderPinnedColumns);
+};

package/modern/hooks/features/columnReorder/columnReorderInterfaces.js

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

package/modern/hooks/features/columnReorder/columnReorderSelector.js

@@ -0,0 +1,3 @@
+import { createSelector } from '@mui/x-data-grid/internals';
+export const gridColumnReorderSelector = state => state.columnReorder;
+export const gridColumnReorderDragColSelector = createSelector(gridColumnReorderSelector, columnReorder => columnReorder.dragCol);

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

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

package/modern/hooks/features/columnReorder/useGridColumnReorder.js

@@ -0,0 +1,166 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { useGridApiEventHandler, getDataGridUtilityClass, GridEvents, useGridLogger } from '@mui/x-data-grid';
+import { useGridStateInit } from '@mui/x-data-grid/internals';
+import { gridColumnReorderDragColSelector } from './columnReorderSelector';
+const CURSOR_MOVE_DIRECTION_LEFT = 'left';
+const CURSOR_MOVE_DIRECTION_RIGHT = 'right';
+
+const getCursorMoveDirectionX = (currentCoordinates, nextCoordinates) => {
+  return currentCoordinates.x <= nextCoordinates.x ? CURSOR_MOVE_DIRECTION_RIGHT : CURSOR_MOVE_DIRECTION_LEFT;
+};
+
+const hasCursorPositionChanged = (currentCoordinates, nextCoordinates) => currentCoordinates.x !== nextCoordinates.x || currentCoordinates.y !== nextCoordinates.y;
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    columnHeaderDragging: ['columnHeader--dragging']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+/**
+ * Only available in DataGridPro
+ * @requires useGridColumns (method)
+ */
+
+
+export const useGridColumnReorder = (apiRef, props) => {
+  const logger = useGridLogger(apiRef, 'useGridColumnReorder');
+  useGridStateInit(apiRef, state => _extends({}, state, {
+    columnReorder: {
+      dragCol: ''
+    }
+  }));
+  const dragColNode = React.useRef(null);
+  const cursorPosition = React.useRef({
+    x: 0,
+    y: 0
+  });
+  const originColumnIndex = React.useRef(null);
+  const removeDnDStylesTimeout = React.useRef();
+  const ownerState = {
+    classes: props.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(removeDnDStylesTimeout.current);
+    };
+  }, []);
+  const handleColumnHeaderDragStart = React.useCallback((params, event) => {
+    if (props.disableColumnReorder || params.colDef.disableReorder) {
+      return;
+    }
+
+    logger.debug(`Start dragging col ${params.field}`); // Prevent drag events propagation.
+    // For more information check here https://github.com/mui/mui-x/issues/2680.
+
+    event.stopPropagation();
+    dragColNode.current = event.currentTarget;
+    dragColNode.current.classList.add(classes.columnHeaderDragging);
+    apiRef.current.setState(state => _extends({}, state, {
+      columnReorder: _extends({}, state.columnReorder, {
+        dragCol: params.field
+      })
+    }));
+    apiRef.current.forceUpdate();
+    removeDnDStylesTimeout.current = setTimeout(() => {
+      dragColNode.current.classList.remove(classes.columnHeaderDragging);
+    });
+    originColumnIndex.current = apiRef.current.getColumnIndex(params.field, false);
+  }, [props.disableColumnReorder, classes.columnHeaderDragging, logger, apiRef]);
+  const handleDragEnter = React.useCallback((params, event) => {
+    event.preventDefault(); // Prevent drag events propagation.
+    // For more information check here https://github.com/mui/mui-x/issues/2680.
+
+    event.stopPropagation();
+  }, []);
+  const handleDragOver = React.useCallback((params, event) => {
+    const dragColField = gridColumnReorderDragColSelector(apiRef);
+
+    if (!dragColField) {
+      return;
+    }
+
+    logger.debug(`Dragging over col ${params.field}`);
+    event.preventDefault(); // Prevent drag events propagation.
+    // For more information check here https://github.com/mui/mui-x/issues/2680.
+
+    event.stopPropagation();
+    const coordinates = {
+      x: event.clientX,
+      y: event.clientY
+    };
+
+    if (params.field !== dragColField && hasCursorPositionChanged(cursorPosition.current, coordinates)) {
+      const targetColIndex = apiRef.current.getColumnIndex(params.field, false);
+      const targetColVisibleIndex = apiRef.current.getColumnIndex(params.field, true);
+      const targetCol = apiRef.current.getColumn(params.field);
+      const dragColIndex = apiRef.current.getColumnIndex(dragColField, false);
+      const visibleColumns = apiRef.current.getVisibleColumns();
+      const cursorMoveDirectionX = getCursorMoveDirectionX(cursorPosition.current, coordinates);
+      const hasMovedLeft = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_LEFT && targetColIndex < dragColIndex;
+      const hasMovedRight = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_RIGHT && dragColIndex < targetColIndex;
+
+      if (hasMovedLeft || hasMovedRight) {
+        let canBeReordered;
+
+        if (!targetCol.disableReorder) {
+          canBeReordered = true;
+        } else if (hasMovedLeft) {
+          canBeReordered = targetColIndex > 0 && !visibleColumns[targetColIndex - 1].disableReorder;
+        } else {
+          canBeReordered = targetColIndex < visibleColumns.length - 1 && !visibleColumns[targetColIndex + 1].disableReorder;
+        }
+
+        const canBeReorderedProcessed = apiRef.current.unstable_applyPreProcessors('canBeReordered', canBeReordered, {
+          targetIndex: targetColVisibleIndex
+        });
+
+        if (canBeReorderedProcessed) {
+          apiRef.current.setColumnIndex(dragColField, targetColIndex);
+        }
+      }
+
+      cursorPosition.current = coordinates;
+    }
+  }, [apiRef, logger]);
+  const handleDragEnd = React.useCallback((params, event) => {
+    const dragColField = gridColumnReorderDragColSelector(apiRef);
+
+    if (props.disableColumnReorder || !dragColField) {
+      return;
+    }
+
+    logger.debug('End dragging col');
+    event.preventDefault(); // Prevent drag events propagation.
+    // For more information check here https://github.com/mui/mui-x/issues/2680.
+
+    event.stopPropagation();
+    clearTimeout(removeDnDStylesTimeout.current);
+    dragColNode.current = null; // Check if the column was dropped outside the grid.
+
+    if (event.dataTransfer.dropEffect === 'none') {
+      // Accessing params.field may contain the wrong field as header elements are reused
+      apiRef.current.setColumnIndex(dragColField, originColumnIndex.current);
+      originColumnIndex.current = null;
+    }
+
+    apiRef.current.setState(state => _extends({}, state, {
+      columnReorder: _extends({}, state.columnReorder, {
+        dragCol: ''
+      })
+    }));
+    apiRef.current.forceUpdate();
+  }, [props.disableColumnReorder, logger, apiRef]);
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, handleColumnHeaderDragStart);
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnter, handleDragEnter);
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragOver, handleDragOver);
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnd, handleDragEnd);
+  useGridApiEventHandler(apiRef, GridEvents.cellDragEnter, handleDragEnter);
+  useGridApiEventHandler(apiRef, GridEvents.cellDragOver, handleDragOver);
+};

package/modern/hooks/features/columnResize/columnResizeSelector.js

@@ -0,0 +1,3 @@
+import { createSelector } from '@mui/x-data-grid/internals';
+export const gridColumnResizeSelector = state => state.columnResize;
+export const gridResizingColumnFieldSelector = createSelector(gridColumnResizeSelector, columnResize => columnResize.resizingColumnField);

package/modern/hooks/features/columnResize/columnResizeState.js

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

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

@@ -0,0 +1,2 @@
+export * from './columnResizeSelector';
+export * from './columnResizeState';