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

package/modern/components/headerFiltering/GridHeaderFilterMenuContainer.js

@@ -1,138 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["operators", "item", "field", "buttonRef", "headerFilterMenuRef", "disabled", "showClearItem", "clearFilterItem"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { useGridApiContext, useGridSelector } from '@mui/x-data-grid';
-import { refType, unstable_useId as useId } from '@mui/utils';
-import { gridHeaderFilteringMenuSelector } from '@mui/x-data-grid/internals';
-import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function GridHeaderFilterMenuContainer(props) {
-  const {
-      operators,
-      item,
-      field,
-      buttonRef,
-      headerFilterMenuRef,
-      disabled = false,
-      showClearItem,
-      clearFilterItem
-    } = props,
-    others = _objectWithoutPropertiesLoose(props, _excluded);
-  const buttonId = useId();
-  const menuId = useId();
-  const rootProps = useGridRootProps();
-  const apiRef = useGridApiContext();
-  const menuOpenField = useGridSelector(apiRef, gridHeaderFilteringMenuSelector);
-  const open = Boolean(menuOpenField === field && headerFilterMenuRef.current);
-  const handleClick = event => {
-    headerFilterMenuRef.current = event.currentTarget;
-    apiRef.current.showHeaderFilterMenu(field);
-  };
-  if (!rootProps.slots.headerFilterMenu) {
-    return null;
-  }
-  const label = apiRef.current.getLocaleText('filterPanelOperator');
-  const labelString = label ? String(label) : undefined;
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-      id: buttonId,
-      ref: buttonRef,
-      "aria-label": labelString,
-      title: labelString,
-      "aria-controls": menuId,
-      "aria-expanded": open ? 'true' : undefined,
-      "aria-haspopup": "true",
-      tabIndex: -1,
-      size: "small",
-      onClick: handleClick,
-      disabled: disabled
-    }, rootProps.slotProps?.baseIconButton, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
-        color: "primary",
-        variant: "dot",
-        badgeContent: showClearItem ? 1 : 0,
-        children: /*#__PURE__*/_jsx(rootProps.slots.openFilterButtonIcon, {
-          fontSize: "inherit"
-        })
-      })
-    })), /*#__PURE__*/_jsx(rootProps.slots.headerFilterMenu, _extends({
-      field: field,
-      open: open,
-      item: item,
-      target: headerFilterMenuRef.current,
-      operators: operators,
-      labelledBy: buttonId,
-      id: menuId,
-      clearFilterItem: clearFilterItem,
-      showClearItem: showClearItem
-    }, others))]
-  });
-}
-process.env.NODE_ENV !== "production" ? GridHeaderFilterMenuContainer.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  applyFilterChanges: PropTypes.func.isRequired,
-  buttonRef: refType,
-  clearFilterItem: PropTypes.func,
-  disabled: PropTypes.bool,
-  field: PropTypes.string.isRequired,
-  headerFilterMenuRef: PropTypes.shape({
-    current: PropTypes.object
-  }).isRequired,
-  item: PropTypes.shape({
-    field: PropTypes.string.isRequired,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    operator: PropTypes.string.isRequired,
-    value: PropTypes.any
-  }).isRequired,
-  operators: PropTypes.arrayOf(PropTypes.shape({
-    getApplyFilterFn: PropTypes.func.isRequired,
-    getValueAsString: PropTypes.func,
-    headerLabel: PropTypes.string,
-    InputComponent: PropTypes.elementType,
-    InputComponentProps: PropTypes.shape({
-      apiRef: PropTypes.shape({
-        current: PropTypes.object.isRequired
-      }),
-      applyValue: PropTypes.func,
-      className: PropTypes.string,
-      clearButton: PropTypes.node,
-      disabled: PropTypes.bool,
-      focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-        current: PropTypes.any.isRequired
-      })]),
-      headerFilterMenu: PropTypes.node,
-      inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-        current: (props, propName) => {
-          if (props[propName] == null) {
-            return null;
-          }
-          if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-            return new Error(`Expected prop '${propName}' to be of type Element`);
-          }
-          return null;
-        }
-      })]),
-      isFilterActive: PropTypes.bool,
-      item: PropTypes.shape({
-        field: PropTypes.string.isRequired,
-        id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-        operator: PropTypes.string.isRequired,
-        value: PropTypes.any
-      }),
-      onBlur: PropTypes.func,
-      onFocus: PropTypes.func,
-      slotProps: PropTypes.object,
-      tabIndex: PropTypes.number
-    }),
-    label: PropTypes.string,
-    requiresFilterValue: PropTypes.bool,
-    value: PropTypes.string.isRequired
-  })).isRequired,
-  showClearItem: PropTypes.bool
-} : void 0;
-export { GridHeaderFilterMenuContainer };

package/modern/components/headerFiltering/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./GridHeaderFilterMenuContainer.js";
-export * from "./GridHeaderFilterCell.js";
-export * from "./GridHeaderFilterMenu.js";

package/modern/components/headerFiltering/index.js

@@ -1,3 +0,0 @@
-export * from "./GridHeaderFilterMenuContainer.js";
-export * from "./GridHeaderFilterCell.js";
-export * from "./GridHeaderFilterMenu.js";

package/modern/components/index.d.ts

@@ -1,6 +0,0 @@
-export * from "./GridTreeDataGroupingCell.js";
-export * from "./GridColumnMenuPinningItem.js";
-export * from "./GridDetailPanelToggleCell.js";
-export * from "./GridRowReorderCell.js";
-export * from "../material/icons.js";
-export * from "./headerFiltering/index.js";

package/modern/components/index.js

@@ -1,7 +0,0 @@
-// Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-pro`
-export * from "./GridTreeDataGroupingCell.js";
-export * from "./GridColumnMenuPinningItem.js";
-export * from "./GridDetailPanelToggleCell.js";
-export * from "./GridRowReorderCell.js";
-export * from "../material/icons.js";
-export * from "./headerFiltering/index.js";

package/modern/components/reexports.d.ts

@@ -1 +0,0 @@
-export { GridProColumnMenu as GridColumnMenu, GRID_COLUMN_MENU_SLOTS_PRO as GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS_PRO as GRID_COLUMN_MENU_SLOT_PROPS } from "./GridProColumnMenu.js";

package/modern/components/reexports.js

@@ -1 +0,0 @@
-export { GridProColumnMenu as GridColumnMenu, GRID_COLUMN_MENU_SLOTS_PRO as GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS_PRO as GRID_COLUMN_MENU_SLOT_PROPS } from "./GridProColumnMenu.js";

package/modern/constants/dataGridProDefaultSlotsComponents.d.ts

@@ -1,2 +0,0 @@
-import type { GridProSlotsComponent } from '../models';
-export declare const DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS: GridProSlotsComponent;

package/modern/constants/dataGridProDefaultSlotsComponents.js

@@ -1,17 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '@mui/x-data-grid/internals';
-import { GridProColumnMenu } from "../components/GridProColumnMenu.js";
-import { GridColumnHeaders } from "../components/GridColumnHeaders.js";
-import { GridHeaderFilterMenu } from "../components/headerFiltering/GridHeaderFilterMenu.js";
-import { GridHeaderFilterCell } from "../components/headerFiltering/GridHeaderFilterCell.js";
-import { GridDetailPanels } from "../components/GridDetailPanels.js";
-import { GridPinnedRows } from "../components/GridPinnedRows.js";
-import materialSlots from "../material/index.js";
-export const DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS = _extends({}, DATA_GRID_DEFAULT_SLOTS_COMPONENTS, materialSlots, {
-  columnMenu: GridProColumnMenu,
-  columnHeaders: GridColumnHeaders,
-  detailPanels: GridDetailPanels,
-  headerFilterCell: GridHeaderFilterCell,
-  headerFilterMenu: GridHeaderFilterMenu,
-  pinnedRows: GridPinnedRows
-});

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { UseGridColumnHeadersProps, GetHeadersParams } from '@mui/x-data-grid/internals';
-export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) => {
-  getColumnFiltersRow: () => React.JSX.Element | null;
-  getFillers: (params: GetHeadersParams | undefined, children: React.ReactNode, leftOverflow: number, borderBottom?: boolean) => React.JSX.Element;
-  getColumnHeadersRow: () => React.JSX.Element;
-  getColumnGroupHeadersRows: () => React.JSX.Element[] | null;
-  isDragging: boolean;
-  getInnerProps: () => {
-    role: string;
-  };
-};

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -1,143 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["getColumnsToRender", "getPinnedCellOffset", "renderContext", "leftRenderContext", "rightRenderContext", "pinnedColumns", "visibleColumns", "columnPositions"];
-import * as React from 'react';
-import { gridFocusColumnHeaderFilterSelector, useGridSelector, gridFilterModelSelector, gridTabIndexColumnHeaderFilterSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
-import { gridColumnsTotalWidthSelector, gridHasFillerSelector, gridHeaderFilterHeightSelector, gridVerticalScrollbarWidthSelector, useGridColumnHeaders as useGridColumnHeadersCommunity, useGridPrivateApiContext, getGridFilter, GridColumnHeaderRow, shouldCellShowLeftBorder, shouldCellShowRightBorder, PinnedColumnPosition } from '@mui/x-data-grid/internals';
-import composeClasses from '@mui/utils/composeClasses';
-import { useGridRootProps } from "../../utils/useGridRootProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  return React.useMemo(() => {
-    const slots = {
-      headerFilterRow: ['headerFilterRow']
-    };
-    return composeClasses(slots, getDataGridUtilityClass, classes);
-  }, [classes]);
-};
-const filterItemsCache = Object.create(null);
-export const useGridColumnHeaders = props => {
-  const apiRef = useGridPrivateApiContext();
-  const {
-    headerGroupingMaxDepth,
-    hasOtherElementInTabSequence
-  } = props;
-  const columnHeaderFilterTabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderFilterSelector);
-  const _useGridColumnHeaders = useGridColumnHeadersCommunity(_extends({}, props, {
-      hasOtherElementInTabSequence: hasOtherElementInTabSequence || columnHeaderFilterTabIndexState !== null
-    })),
-    {
-      getColumnsToRender,
-      getPinnedCellOffset,
-      renderContext,
-      leftRenderContext,
-      rightRenderContext,
-      pinnedColumns,
-      visibleColumns,
-      columnPositions
-    } = _useGridColumnHeaders,
-    otherProps = _objectWithoutPropertiesLoose(_useGridColumnHeaders, _excluded);
-  const headerFiltersRef = React.useRef(null);
-  apiRef.current.register('private', {
-    headerFiltersElementRef: headerFiltersRef
-  });
-  const headerFilterMenuRef = React.useRef(null);
-  const rootProps = useGridRootProps();
-  const classes = useUtilityClasses(rootProps);
-  const disableHeaderFiltering = !rootProps.headerFilters;
-  const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
-  const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
-  const gridHasFiller = useGridSelector(apiRef, gridHasFillerSelector);
-  const headerFilterHeight = useGridSelector(apiRef, gridHeaderFilterHeightSelector);
-  const scrollbarWidth = useGridSelector(apiRef, gridVerticalScrollbarWidthSelector);
-  const columnHeaderFilterFocus = useGridSelector(apiRef, gridFocusColumnHeaderFilterSelector);
-  const getFilterItem = React.useCallback(colDef => {
-    const filterModelItem = filterModel?.items.find(it => it.field === colDef.field && it.operator !== 'isAnyOf');
-    if (filterModelItem != null) {
-      // there's a valid `filterModelItem` for this column
-      return filterModelItem;
-    }
-    const defaultCachedItem = filterItemsCache[colDef.field];
-    if (defaultCachedItem != null) {
-      // there's a cached `defaultItem` for this column
-      return defaultCachedItem;
-    }
-    // there's no cached `defaultItem` for this column, let's generate one and cache it
-    const defaultItem = getGridFilter(colDef);
-    filterItemsCache[colDef.field] = defaultItem;
-    return defaultItem;
-  }, [filterModel]);
-  const getColumnFilters = params => {
-    const {
-      renderedColumns,
-      firstColumnToRender
-    } = getColumnsToRender(params);
-    const filters = [];
-    for (let i = 0; i < renderedColumns.length; i += 1) {
-      const colDef = renderedColumns[i];
-      const columnIndex = firstColumnToRender + i;
-      const hasFocus = columnHeaderFilterFocus?.field === colDef.field;
-      const isFirstColumn = columnIndex === 0;
-      const tabIndexField = columnHeaderFilterTabIndexState?.field;
-      const tabIndex = tabIndexField === colDef.field || isFirstColumn && !props.hasOtherElementInTabSequence ? 0 : -1;
-      const headerClassName = typeof colDef.headerClassName === 'function' ? colDef.headerClassName({
-        field: colDef.field,
-        colDef
-      }) : colDef.headerClassName;
-      const item = getFilterItem(colDef);
-      const pinnedPosition = params?.position;
-      const pinnedOffset = getPinnedCellOffset(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, columnsTotalWidth, scrollbarWidth);
-      const indexInSection = i;
-      const sectionLength = renderedColumns.length;
-      const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
-      const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showColumnVerticalBorder, gridHasFiller);
-      filters.push(/*#__PURE__*/_jsx(rootProps.slots.headerFilterCell, _extends({
-        colIndex: columnIndex,
-        height: headerFilterHeight,
-        width: colDef.computedWidth,
-        colDef: colDef,
-        hasFocus: hasFocus,
-        tabIndex: tabIndex,
-        headerFilterMenuRef: headerFilterMenuRef,
-        headerClassName: headerClassName,
-        "data-field": colDef.field,
-        item: item,
-        pinnedPosition: pinnedPosition,
-        pinnedOffset: pinnedOffset,
-        showLeftBorder: showLeftBorder,
-        showRightBorder: showRightBorder
-      }, rootProps.slotProps?.headerFilterCell), `${colDef.field}-filter`));
-    }
-    return otherProps.getFillers(params, filters, 0, true);
-  };
-  const getColumnFiltersRow = () => {
-    if (disableHeaderFiltering) {
-      return null;
-    }
-    return /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
-      ref: headerFiltersRef,
-      className: classes.headerFilterRow,
-      role: "row",
-      "aria-rowindex": headerGroupingMaxDepth + 2,
-      ownerState: rootProps,
-      children: [leftRenderContext && getColumnFilters({
-        position: PinnedColumnPosition.LEFT,
-        renderContext: leftRenderContext,
-        maxLastColumn: leftRenderContext.lastColumnIndex
-      }), getColumnFilters({
-        renderContext,
-        maxLastColumn: visibleColumns.length - pinnedColumns.right.length
-      }), rightRenderContext && getColumnFilters({
-        position: PinnedColumnPosition.RIGHT,
-        renderContext: rightRenderContext,
-        maxLastColumn: rightRenderContext.lastColumnIndex
-      })]
-    });
-  };
-  return _extends({}, otherProps, {
-    getColumnFiltersRow
-  });
-};

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

@@ -1,40 +0,0 @@
-import { GridPinnedColumnPosition } from '@mui/x-data-grid';
-import { GridPinnedColumnFields } from '@mui/x-data-grid/internals';
-/**
- * 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 {GridPinnedColumnPosition} side Which side to pin the column.
-   */
-  pinColumn: (field: string, side: GridPinnedColumnPosition) => void;
-  /**
-   * Unpins a column.
-   * @param {string} field The column field to unpin.
-   */
-  unpinColumn: (field: string) => void;
-  /**
-   * Returns which columns are pinned.
-   * @returns {GridPinnedColumnFields} An object containing the pinned columns.
-   */
-  getPinnedColumns: () => GridPinnedColumnFields;
-  /**
-   * Changes the pinned columns.
-   * @param {GridPinnedColumnFields} pinnedColumns An object containing the columns to pin.
-   */
-  setPinnedColumns: (pinnedColumns: GridPinnedColumnFields) => 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) => GridPinnedColumnPosition | false;
-}
-export interface GridColumnPinningInternalCache {
-  /**
-   * Stores the fields in their original position, before being pinned.
-   */
-  orderedFieldsBeforePinningColumns: string[] | null;
-}

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

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

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

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

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

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

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

@@ -1,6 +0,0 @@
-import { RefObject } from '@mui/x-internals/types';
-import { GridStateInitializer } from '@mui/x-data-grid/internals';
-import { GridPrivateApiPro } from "../../../models/gridApiPro.js";
-import { DataGridProProcessedProps } from "../../../models/dataGridProProps.js";
-export declare const columnPinningStateInitializer: GridStateInitializer<Pick<DataGridProProcessedProps, 'pinnedColumns' | 'initialState'>>;
-export declare const useGridColumnPinning: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "disableColumnPinning" | "initialState" | "pinnedColumns" | "onPinnedColumnsChange" | "slotProps" | "slots">) => void;

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

@@ -1,228 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { useGridSelector, gridVisibleColumnDefinitionsSelector, gridColumnsTotalWidthSelector, gridColumnPositionsSelector, useGridApiMethod, useGridEvent, GridPinnedColumnPosition, gridColumnFieldsSelector } from '@mui/x-data-grid';
-import { useGridRegisterPipeProcessor, gridPinnedColumnsSelector, gridVisiblePinnedColumnDefinitionsSelector } from '@mui/x-data-grid/internals';
-export const columnPinningStateInitializer = (state, props, apiRef) => {
-  apiRef.current.caches.columnPinning = {
-    orderedFieldsBeforePinningColumns: null
-  };
-  let model;
-  if (props.pinnedColumns) {
-    model = props.pinnedColumns;
-  } else if (props.initialState?.pinnedColumns) {
-    model = props.initialState.pinnedColumns;
-  } else {
-    model = {};
-  }
-  return _extends({}, state, {
-    pinnedColumns: model
-  });
-};
-export const useGridColumnPinning = (apiRef, props) => {
-  const pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
-
-  /**
-   * PRE-PROCESSING
-   */
-  const calculateScrollLeft = React.useCallback((initialValue, params) => {
-    const visiblePinnedColumns = gridVisiblePinnedColumnDefinitionsSelector(apiRef);
-    if (!params.colIndex || visiblePinnedColumns.left.length === 0 && visiblePinnedColumns.right.length === 0) {
-      return initialValue;
-    }
-    const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
-    const columnsTotalWidth = gridColumnsTotalWidthSelector(apiRef);
-    const columnPositions = gridColumnPositionsSelector(apiRef);
-    const clientWidth = apiRef.current.virtualScrollerRef.current.clientWidth;
-
-    // When using RTL, `scrollLeft` becomes negative, so we must ensure that we only compare values.
-    const scrollLeft = Math.abs(apiRef.current.virtualScrollerRef.current.scrollLeft);
-    const offsetWidth = visibleColumns[params.colIndex].computedWidth;
-    const offsetLeft = columnPositions[params.colIndex];
-    const leftPinnedColumnsWidth = columnPositions[visiblePinnedColumns.left.length];
-    const rightPinnedColumnsWidth = columnsTotalWidth - columnPositions[columnPositions.length - visiblePinnedColumns.right.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]);
-  const addColumnMenuItems = React.useCallback((columnMenuItems, colDef) => {
-    if (props.disableColumnPinning) {
-      return columnMenuItems;
-    }
-    if (colDef.pinnable === false) {
-      return columnMenuItems;
-    }
-    return [...columnMenuItems, 'columnMenuPinningItem'];
-  }, [props.disableColumnPinning]);
-  const checkIfCanBeReordered = React.useCallback((initialValue, {
-    targetIndex
-  }) => {
-    const visiblePinnedColumns = gridVisiblePinnedColumnDefinitionsSelector(apiRef);
-    if (visiblePinnedColumns.left.length === 0 && visiblePinnedColumns.right.length === 0) {
-      return initialValue;
-    }
-    if (visiblePinnedColumns.left.length > 0 && targetIndex < visiblePinnedColumns.left.length) {
-      return false;
-    }
-    if (visiblePinnedColumns.right.length > 0) {
-      const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
-      const firstRightPinnedColumnIndex = visibleColumns.length - visiblePinnedColumns.right.length;
-      return targetIndex >= firstRightPinnedColumnIndex ? false : initialValue;
-    }
-    return initialValue;
-  }, [apiRef]);
-  const stateExportPreProcessing = React.useCallback((prevState, context) => {
-    const pinnedColumnsToExport = gridPinnedColumnsSelector(apiRef);
-    const shouldExportPinnedColumns =
-    // Always export if the `exportOnlyDirtyModels` property is not activated
-    !context.exportOnlyDirtyModels ||
-    // Always export if the model is controlled
-    props.pinnedColumns != null ||
-    // Always export if the model has been initialized
-    props.initialState?.pinnedColumns != null ||
-    // Export if the model is not empty
-    (pinnedColumnsToExport.left ?? []).length > 0 || (pinnedColumnsToExport.right ?? []).length > 0;
-    if (!shouldExportPinnedColumns) {
-      return prevState;
-    }
-    return _extends({}, prevState, {
-      pinnedColumns: pinnedColumnsToExport
-    });
-  }, [apiRef, props.pinnedColumns, props.initialState?.pinnedColumns]);
-  const stateRestorePreProcessing = React.useCallback((params, context) => {
-    const newPinnedColumns = context.stateToRestore.pinnedColumns;
-    if (newPinnedColumns != null) {
-      setState(apiRef, newPinnedColumns);
-    }
-    return params;
-  }, [apiRef]);
-  useGridRegisterPipeProcessor(apiRef, 'scrollToIndexes', calculateScrollLeft);
-  useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuItems);
-  useGridRegisterPipeProcessor(apiRef, 'canBeReordered', checkIfCanBeReordered);
-  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
-  apiRef.current.registerControlState({
-    stateId: 'pinnedColumns',
-    propModel: props.pinnedColumns,
-    propOnChange: props.onPinnedColumnsChange,
-    stateSelector: gridPinnedColumnsSelector,
-    changeEvent: 'pinnedColumnsChange'
-  });
-  const pinColumn = React.useCallback((field, side) => {
-    if (apiRef.current.isColumnPinned(field) === side) {
-      return;
-    }
-    const otherSide = side === GridPinnedColumnPosition.RIGHT ? GridPinnedColumnPosition.LEFT : GridPinnedColumnPosition.RIGHT;
-    const newPinnedColumns = {
-      [side]: [...(pinnedColumns[side] || []), field],
-      [otherSide]: (pinnedColumns[otherSide] || []).filter(column => column !== field)
-    };
-    apiRef.current.setPinnedColumns(newPinnedColumns);
-  }, [apiRef, pinnedColumns]);
-  const unpinColumn = React.useCallback(field => {
-    apiRef.current.setPinnedColumns({
-      left: (pinnedColumns.left || []).filter(column => column !== field),
-      right: (pinnedColumns.right || []).filter(column => column !== field)
-    });
-  }, [apiRef, pinnedColumns.left, pinnedColumns.right]);
-  const getPinnedColumns = React.useCallback(() => {
-    return gridPinnedColumnsSelector(apiRef);
-  }, [apiRef]);
-  const setPinnedColumns = React.useCallback(newPinnedColumns => {
-    setState(apiRef, newPinnedColumns);
-    apiRef.current.requestPipeProcessorsApplication('hydrateColumns');
-  }, [apiRef]);
-  const isColumnPinned = React.useCallback(field => {
-    const leftPinnedColumns = pinnedColumns.left || [];
-    if (leftPinnedColumns.includes(field)) {
-      return GridPinnedColumnPosition.LEFT;
-    }
-    const rightPinnedColumns = pinnedColumns.right || [];
-    if (rightPinnedColumns.includes(field)) {
-      return GridPinnedColumnPosition.RIGHT;
-    }
-    return false;
-  }, [pinnedColumns.left, pinnedColumns.right]);
-  const columnPinningApi = {
-    pinColumn,
-    unpinColumn,
-    getPinnedColumns,
-    setPinnedColumns,
-    isColumnPinned
-  };
-  useGridApiMethod(apiRef, columnPinningApi, 'public');
-  const handleColumnOrderChange = params => {
-    if (!apiRef.current.caches.columnPinning.orderedFieldsBeforePinningColumns) {
-      return;
-    }
-    const {
-      column,
-      targetIndex,
-      oldIndex
-    } = params;
-    const delta = targetIndex > oldIndex ? 1 : -1;
-    const latestColumnFields = gridColumnFieldsSelector(apiRef);
-
-    /**
-     * When a column X is reordered to somewhere else, the position where this column X is dropped
-     * on must be moved to left or right to make room for it. The ^^^ below represents the column
-     * which gave space to receive X.
-     *
-     * | X | B | C | D | -> | B | C | D | X | (for example X moved to after D, so delta=1)
-     *              ^^^              ^^^
-     *
-     * | A | B | C | X | -> | X | A | B | C | (for example X moved before A, so delta=-1)
-     *  ^^^                      ^^^
-     *
-     * If column P is pinned, it will not move to provide space. However, it will jump to the next
-     * non-pinned column.
-     *
-     * | X | B | P | D | -> | B | D | P | X | (for example X moved to after D, with P pinned)
-     *              ^^^          ^^^
-     */
-    const siblingField = latestColumnFields[targetIndex - delta];
-    const newOrderedFieldsBeforePinningColumns = [...apiRef.current.caches.columnPinning.orderedFieldsBeforePinningColumns];
-
-    // The index to start swapping fields
-    let i = newOrderedFieldsBeforePinningColumns.findIndex(currentColumn => currentColumn === column.field);
-    // The index of the field to swap with
-    let j = i + delta;
-
-    // When to stop swapping fields.
-    // We stop one field before because the swap is done with i + 1 (if delta=1)
-    const stop = newOrderedFieldsBeforePinningColumns.findIndex(currentColumn => currentColumn === siblingField);
-    while (delta > 0 ? i < stop : i > stop) {
-      // If the field to swap with is a pinned column, jump to the next
-      while (apiRef.current.isColumnPinned(newOrderedFieldsBeforePinningColumns[j])) {
-        j += delta;
-      }
-      const temp = newOrderedFieldsBeforePinningColumns[i];
-      newOrderedFieldsBeforePinningColumns[i] = newOrderedFieldsBeforePinningColumns[j];
-      newOrderedFieldsBeforePinningColumns[j] = temp;
-      i = j;
-      j = i + delta;
-    }
-    apiRef.current.caches.columnPinning.orderedFieldsBeforePinningColumns = newOrderedFieldsBeforePinningColumns;
-  };
-  useGridEvent(apiRef, 'columnOrderChange', handleColumnOrderChange);
-  React.useEffect(() => {
-    if (props.pinnedColumns) {
-      apiRef.current.setPinnedColumns(props.pinnedColumns);
-    }
-  }, [apiRef, props.pinnedColumns]);
-};
-function setState(apiRef, model) {
-  apiRef.current.setState(state => _extends({}, state, {
-    pinnedColumns: model
-  }));
-}

package/modern/hooks/features/columnPinning/useGridColumnPinningPreProcessors.d.ts

@@ -1,4 +0,0 @@
-import { RefObject } from '@mui/x-internals/types';
-import { DataGridProProcessedProps } from "../../../models/dataGridProProps.js";
-import { GridPrivateApiPro } from "../../../models/gridApiPro.js";
-export declare const useGridColumnPinningPreProcessors: (apiRef: RefObject<GridPrivateApiPro>, props: DataGridProProcessedProps) => void;