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

package/components/GridTreeDataGroupingCell.js

@@ -0,0 +1,159 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import Box from '@mui/material/Box';
+import { useGridSelector, gridFilteredDescendantCountLookupSelector, getDataGridUtilityClass, GridEvents } from '@mui/x-data-grid';
+import { isNavigationKey } from '@mui/x-data-grid/internals';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['treeDataGroupingCell'],
+    toggle: ['treeDataGroupingCellToggle']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+const GridTreeDataGroupingCell = props => {
+  var _filteredDescendantCo;
+
+  const {
+    id,
+    field,
+    formattedValue,
+    rowNode,
+    hideDescendantCount
+  } = props;
+  const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  const filteredDescendantCountLookup = useGridSelector(apiRef, gridFilteredDescendantCountLookupSelector);
+  const filteredDescendantCount = (_filteredDescendantCo = filteredDescendantCountLookup[rowNode.id]) != null ? _filteredDescendantCo : 0;
+  const Icon = rowNode.childrenExpanded ? rootProps.components.TreeDataCollapseIcon : rootProps.components.TreeDataExpandIcon;
+
+  const handleKeyDown = event => {
+    if (event.key === ' ') {
+      event.stopPropagation();
+    }
+
+    if (isNavigationKey(event.key) && !event.shiftKey) {
+      apiRef.current.publishEvent(GridEvents.cellNavigationKeyDown, props, event);
+    }
+  };
+
+  const handleClick = event => {
+    apiRef.current.setRowChildrenExpansion(id, !rowNode.childrenExpanded);
+    apiRef.current.setCellFocus(id, field);
+    event.stopPropagation(); // TODO remove event.stopPropagation
+  };
+
+  return /*#__PURE__*/_jsxs(Box, {
+    className: classes.root,
+    sx: {
+      ml: rowNode.depth * 2
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      className: classes.toggle,
+      children: filteredDescendantCount > 0 && /*#__PURE__*/_jsx(IconButton, {
+        size: "small",
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        tabIndex: -1,
+        "aria-label": rowNode.childrenExpanded ? apiRef.current.getLocaleText('treeDataCollapse') : apiRef.current.getLocaleText('treeDataExpand'),
+        children: /*#__PURE__*/_jsx(Icon, {
+          fontSize: "inherit"
+        })
+      })
+    }), /*#__PURE__*/_jsxs("span", {
+      children: [formattedValue === undefined ? rowNode.groupingKey : formattedValue, !hideDescendantCount && filteredDescendantCount > 0 ? ` (${filteredDescendantCount})` : '']
+    })]
+  });
+};
+
+process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * GridApi that let you manipulate the grid.
+   */
+  api: PropTypes.object.isRequired,
+
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any.isRequired,
+
+  /**
+   * Get the cell value of a row and field.
+   * @param {GridRowId} id The row id.
+   * @param {string} field The field.
+   * @returns {GridCellValue} The cell value.
+   * @deprecated Use `params.row` to directly access the fields you want instead.
+   */
+  getValue: PropTypes.func.isRequired,
+
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+  hideDescendantCount: PropTypes.bool,
+
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.any.isRequired,
+
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+
+  /**
+   * The cell value, but if the column has valueGetter, use getValue.
+   */
+  value: PropTypes.any.isRequired
+} : void 0;
+export { GridTreeDataGroupingCell };

package/components/Watermark.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function Watermark(): JSX.Element | null;

package/components/Watermark.js

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { useLicenseVerifier, LicenseStatus } from '@mui/x-license-pro';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+function getLicenseErrorMessage(licenseStatus) {
+  switch (licenseStatus) {
+    case LicenseStatus.Expired:
+      return 'MUI X: License key expired';
+
+    case LicenseStatus.Invalid:
+      return 'MUI X: Invalid license key';
+
+    case LicenseStatus.NotFound:
+      return 'MUI X: Missing license key';
+
+    default:
+      throw new Error('MUI: Unhandled MUI X license status.');
+  }
+}
+
+export function Watermark() {
+  const licenseStatus = useLicenseVerifier();
+
+  if (licenseStatus === LicenseStatus.Valid) {
+    return null;
+  }
+
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      position: 'absolute',
+      pointerEvents: 'none',
+      color: '#8282829e',
+      zIndex: 100000,
+      width: '100%',
+      textAlign: 'center',
+      bottom: '50%',
+      right: 0,
+      letterSpacing: 5,
+      fontSize: 24
+    },
+    children: getLicenseErrorMessage(licenseStatus)
+  });
+}

package/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './GridTreeDataGroupingCell';
+export * from './GridColumnPinningMenuItems';

package/components/index.js

@@ -0,0 +1,3 @@
+// Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-pro`
+export * from './GridTreeDataGroupingCell';
+export * from './GridColumnPinningMenuItems';

package/components/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/components/index.js",
+  "types": "./index.d.ts"
+}

package/hooks/features/columnPinning/gridColumnPinningInterface.d.ts

@@ -0,0 +1,42 @@
+export interface GridPinnedColumns {
+    left?: string[];
+    right?: string[];
+}
+export declare type GridColumnPinningState = GridPinnedColumns;
+declare enum GridPinnedPosition {
+    left = "left",
+    right = "right"
+}
+/**
+ * The column pinning API interface that is available in the grid [[apiRef]].
+ */
+export interface GridColumnPinningApi {
+    /**
+     * Pins a column to the left or right side of the grid.
+     * @param {string} field The column field to pin.
+     * @param {GridPinnedPosition} side Which side to pin the column.
+     */
+    pinColumn: (field: string, side: GridPinnedPosition) => void;
+    /**
+     * Unpins a column.
+     * @param {string} field The column field to unpin.
+     */
+    unpinColumn: (field: string) => void;
+    /**
+     * Returns which columns are pinned.
+     * @returns {GridPinnedColumns} An object containing the pinned columns.
+     */
+    getPinnedColumns: () => GridPinnedColumns;
+    /**
+     * Changes the pinned columns.
+     * @param {GridPinnedColumns} pinnedColumns An object containing the columns to pin.
+     */
+    setPinnedColumns: (pinnedColumns: GridPinnedColumns) => void;
+    /**
+     * Returns which side a column is pinned to.
+     * @param {string} field The column field to check.
+     * @returns {string | false} Which side the column is pinned or `false` if not pinned.
+     */
+    isColumnPinned: (field: string) => GridPinnedPosition | false;
+}
+export { GridPinnedPosition };

package/hooks/features/columnPinning/gridColumnPinningInterface.js

@@ -0,0 +1,11 @@
+var GridPinnedPosition;
+/**
+ * The column pinning API interface that is available in the grid [[apiRef]].
+ */
+
+(function (GridPinnedPosition) {
+  GridPinnedPosition["left"] = "left";
+  GridPinnedPosition["right"] = "right";
+})(GridPinnedPosition || (GridPinnedPosition = {}));
+
+export { GridPinnedPosition };

package/hooks/features/columnPinning/gridColumnPinningSelector.d.ts

@@ -0,0 +1,2 @@
+import { GridStatePro } from '../../../models/gridStatePro';
+export declare const gridPinnedColumnsSelector: (state: GridStatePro) => import("./gridColumnPinningInterface").GridPinnedColumns;

package/hooks/features/columnPinning/gridColumnPinningSelector.js

@@ -0,0 +1 @@
+export const gridPinnedColumnsSelector = state => state.pinnedColumns;

package/hooks/features/columnPinning/index.d.ts

@@ -0,0 +1,2 @@
+export * from './gridColumnPinningSelector';
+export * from './gridColumnPinningInterface';

package/hooks/features/columnPinning/index.js

@@ -0,0 +1,2 @@
+export * from './gridColumnPinningSelector';
+export * from './gridColumnPinningInterface';

package/hooks/features/columnPinning/useGridColumnPinning.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { GridStateInitializer } from '@mui/x-data-grid/internals';
+import { GridApiPro } from '../../../models/gridApiPro';
+import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
+export declare const columnPinningStateInitializer: GridStateInitializer<Pick<DataGridProProcessedProps, 'pinnedColumns' | 'initialState' | 'disableColumnPinning'>>;
+export declare const useGridColumnPinning: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'initialState' | 'disableColumnPinning' | 'pinnedColumns' | 'onPinnedColumnsChange'>) => void;

package/hooks/features/columnPinning/useGridColumnPinning.js

@@ -0,0 +1,274 @@
+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) => {
+  var _props$initialState;
+
+  let model;
+
+  if (props.disableColumnPinning) {
+    model = {};
+  } else if (props.pinnedColumns) {
+    model = props.pinnedColumns;
+  } else if ((_props$initialState = props.initialState) != null && _props$initialState.pinnedColumns) {
+    var _props$initialState2;
+
+    model = (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.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 => {
+    var _pinnedColumns$left$l, _pinnedColumns$left, _pinnedColumns$right$, _pinnedColumns$right;
+
+    if (props.disableColumnPinning) {
+      return;
+    }
+
+    if (!Array.isArray(pinnedColumns.left) && !Array.isArray(pinnedColumns.right)) {
+      return;
+    }
+
+    const nbLeftPinnedColumns = (_pinnedColumns$left$l = (_pinnedColumns$left = pinnedColumns.left) == null ? void 0 : _pinnedColumns$left.length) != null ? _pinnedColumns$left$l : 0;
+    const nbRightPinnedColumns = (_pinnedColumns$right$ = (_pinnedColumns$right = pinnedColumns.right) == null ? void 0 : _pinnedColumns$right.length) != null ? _pinnedColumns$right$ : 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/hooks/features/columnPinning/useGridColumnPinningPreProcessors.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
+import { GridApiPro } from '../../../models/gridApiPro';
+export declare const useGridColumnPinningPreProcessors: (apiRef: React.MutableRefObject<GridApiPro>, props: DataGridProProcessedProps) => void;

package/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/hooks/features/columnReorder/columnReorderInterfaces.d.ts

@@ -0,0 +1,6 @@
+export interface GridColumnReorderState {
+    dragCol: string;
+}
+export interface GridCanBeReorderedPreProcessingContext {
+    targetIndex: number;
+}

package/hooks/features/columnReorder/columnReorderInterfaces.js

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

package/hooks/features/columnReorder/columnReorderSelector.d.ts

@@ -0,0 +1,3 @@
+import { GridStatePro } from '../../../models/gridStatePro';
+export declare const gridColumnReorderSelector: (state: GridStatePro) => import("./columnReorderInterfaces").GridColumnReorderState;
+export declare const gridColumnReorderDragColSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, string>;

package/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/hooks/features/columnReorder/index.d.ts

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

package/hooks/features/columnReorder/index.js

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

package/hooks/features/columnReorder/useGridColumnReorder.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { GridApiPro } from '../../../models/gridApiPro';
+import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
+/**
+ * Only available in DataGridPro
+ * @requires useGridColumns (method)
+ */
+export declare const useGridColumnReorder: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'disableColumnReorder' | 'classes'>) => void;