@mui/x-data-grid 5.5.1 → 5.7.0

package/hooks/features/clipboard/useGridClipboard.js

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { useGridApiMethod, useGridNativeEventListener } from '../../utils';
+
+function writeToClipboardPolyfill(data) {
+  const span = document.createElement('span');
+  span.style.whiteSpace = 'pre';
+  span.style.userSelect = 'all';
+  span.style.opacity = '0px';
+  span.textContent = data;
+  document.body.appendChild(span);
+  const range = document.createRange();
+  range.selectNode(span);
+  const selection = window.getSelection();
+  selection.removeAllRanges();
+  selection.addRange(range);
+
+  try {
+    document.execCommand('copy');
+  } finally {
+    document.body.removeChild(span);
+  }
+}
+/**
+ * @requires useGridCsvExport (method)
+ * @requires useGridSelection (method)
+ */
+
+
+export const useGridClipboard = apiRef => {
+  const copySelectedRowsToClipboard = React.useCallback((includeHeaders = false) => {
+    if (apiRef.current.getSelectedRows().size === 0) {
+      return;
+    }
+
+    const data = apiRef.current.getDataAsCsv({
+      includeHeaders,
+      delimiter: '\t'
+    });
+
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(data).catch(() => {
+        writeToClipboardPolyfill(data);
+      });
+    } else {
+      writeToClipboardPolyfill(data);
+    }
+  }, [apiRef]);
+  const handleKeydown = React.useCallback(event => {
+    var _window$getSelection;
+
+    const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey; // event.key === 'c' is not enough as alt+c can lead to ©, ç, or other characters on macOS.
+    // event.code === 'KeyC' is not enough as event.code assume a QWERTY keyboard layout which would
+    // be wrong with a Dvorak keyboard (as if pressing J).
+
+    if (String.fromCharCode(event.keyCode) !== 'C' || !isModifierKeyPressed) {
+      return;
+    } // Do nothing if there's a native selection
+
+
+    if (((_window$getSelection = window.getSelection()) == null ? void 0 : _window$getSelection.toString()) !== '') {
+      return;
+    }
+
+    apiRef.current.unstable_copySelectedRowsToClipboard(event.altKey);
+  }, [apiRef]);
+  useGridNativeEventListener(apiRef, apiRef.current.rootElementRef, 'keydown', handleKeydown);
+  const clipboardApi = {
+    unstable_copySelectedRowsToClipboard: copySelectedRowsToClipboard
+  };
+  useGridApiMethod(apiRef, clipboardApi, 'GridClipboardApi');
+};

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { GridRenderContext } from '../../../models/params/gridScrollParams';
+interface UseGridColumnHeadersProps {
+    innerRef?: React.Ref<HTMLDivElement>;
+    minColumnIndex?: number;
+}
+export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) => {
+    renderContext: GridRenderContext | null;
+    getColumns: (params?: {
+        renderContext: GridRenderContext | null;
+        minFirstColumn?: number | undefined;
+        maxLastColumn?: number | undefined;
+    } | undefined, other?: {}) => JSX.Element[] | null;
+    isDragging: boolean;
+    updateInnerPosition: (nextRenderContext: GridRenderContext) => void;
+    getRootProps: (other?: {}) => {
+        style: {
+            minHeight: number;
+            maxHeight: number;
+            lineHeight: string;
+        };
+    };
+    getInnerProps: () => {
+        ref: React.Ref<HTMLDivElement>;
+        'aria-rowindex': number;
+        role: string;
+    };
+};
+export {};

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -0,0 +1,147 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useForkRef } from '@mui/material/utils';
+import { useGridApiContext } from '../../utils/useGridApiContext';
+import { useGridSelector } from '../../utils/useGridSelector';
+import { gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from '../columns/gridColumnsSelector';
+import { gridTabIndexColumnHeaderSelector, gridTabIndexCellSelector, gridFocusColumnHeaderSelector } from '../focus/gridFocusStateSelector';
+import { gridDensityHeaderHeightSelector } from '../density/densitySelector';
+import { gridFilterActiveItemsLookupSelector } from '../filter/gridFilterSelector';
+import { gridSortColumnLookupSelector } from '../sorting/gridSortingSelector';
+import { gridColumnMenuSelector } from '../columnMenu/columnMenuSelector';
+import { useGridRootProps } from '../../utils/useGridRootProps';
+import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+import { GridEvents } from '../../../models/events';
+import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColumnHeaderItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const useGridColumnHeaders = props => {
+  const {
+    innerRef: innerRefProp,
+    minColumnIndex = 0
+  } = props;
+  const [dragCol, setDragCol] = React.useState('');
+  const [resizeCol, setResizeCol] = React.useState('');
+  const apiRef = useGridApiContext();
+  const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
+  const tabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
+  const cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector);
+  const columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector);
+  const headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
+  const filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
+  const sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
+  const columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector);
+  const rootProps = useGridRootProps();
+  const innerRef = React.useRef(null);
+  const handleInnerRef = useForkRef(innerRefProp, innerRef);
+  const [renderContext, setRenderContext] = React.useState(null);
+  const prevRenderContext = React.useRef(renderContext);
+  const prevScrollLeft = React.useRef(0);
+  React.useEffect(() => {
+    apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
+  }, [apiRef]);
+  const updateInnerPosition = React.useCallback(nextRenderContext => {
+    const firstColumnToRender = Math.max(nextRenderContext.firstColumnIndex - rootProps.columnBuffer, minColumnIndex);
+    const offset = firstColumnToRender > 0 ? prevScrollLeft.current - columnPositions[firstColumnToRender] : prevScrollLeft.current;
+    innerRef.current.style.transform = `translate3d(${-offset}px, 0px, 0px)`;
+  }, [columnPositions, minColumnIndex, rootProps.columnBuffer]);
+  const handleScroll = React.useCallback(({
+    left,
+    renderContext: nextRenderContext = null
+  }) => {
+    var _prevRenderContext$cu, _prevRenderContext$cu2;
+
+    if (!innerRef.current) {
+      return;
+    } // Ignore vertical scroll.
+    // Excepts the first event which sets the previous render context.
+
+
+    if (prevScrollLeft.current === left && ((_prevRenderContext$cu = prevRenderContext.current) == null ? void 0 : _prevRenderContext$cu.firstColumnIndex) === (nextRenderContext == null ? void 0 : nextRenderContext.firstColumnIndex) && ((_prevRenderContext$cu2 = prevRenderContext.current) == null ? void 0 : _prevRenderContext$cu2.lastColumnIndex) === (nextRenderContext == null ? void 0 : nextRenderContext.lastColumnIndex)) {
+      return;
+    }
+
+    prevScrollLeft.current = left;
+
+    if (nextRenderContext !== prevRenderContext.current || !prevRenderContext.current) {
+      setRenderContext(nextRenderContext);
+      prevRenderContext.current = nextRenderContext;
+    } // Pass directly the render context to avoid waiting for the next render
+
+
+    if (nextRenderContext) {
+      updateInnerPosition(nextRenderContext);
+    }
+  }, [updateInnerPosition]);
+  const handleColumnResizeStart = React.useCallback(params => setResizeCol(params.field), []);
+  const handleColumnResizeStop = React.useCallback(() => setResizeCol(''), []);
+  const handleColumnReorderStart = React.useCallback(params => setDragCol(params.field), []);
+  const handleColumnReorderStop = React.useCallback(() => setDragCol(''), []);
+  useGridApiEventHandler(apiRef, GridEvents.columnResizeStart, handleColumnResizeStart);
+  useGridApiEventHandler(apiRef, GridEvents.columnResizeStop, handleColumnResizeStop);
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, handleColumnReorderStart);
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnd, handleColumnReorderStop);
+  useGridApiEventHandler(apiRef, GridEvents.rowsScroll, handleScroll);
+
+  const getColumns = (params, other = {}) => {
+    const {
+      renderContext: nextRenderContext = renderContext,
+      minFirstColumn = minColumnIndex,
+      maxLastColumn = visibleColumns.length
+    } = params || {};
+
+    if (!nextRenderContext) {
+      return null;
+    }
+
+    const columns = [];
+    const firstColumnToRender = Math.max(nextRenderContext.firstColumnIndex - rootProps.columnBuffer, minFirstColumn);
+    const lastColumnToRender = Math.min(nextRenderContext.lastColumnIndex + rootProps.columnBuffer, maxLastColumn);
+    const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
+
+    for (let i = 0; i < renderedColumns.length; i += 1) {
+      const column = renderedColumns[i];
+      const columnIndex = firstColumnToRender + i;
+      const isFirstColumn = columnIndex === 0;
+      const hasTabbableElement = !(tabIndexState === null && cellTabIndexState === null);
+      const tabIndex = tabIndexState !== null && tabIndexState.field === column.field || isFirstColumn && !hasTabbableElement ? 0 : -1;
+      const hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === column.field;
+      const open = columnMenuState.open && columnMenuState.field === column.field;
+      columns.push( /*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[column.field], {
+        columnMenuOpen: open,
+        filterItemsCounter: filterColumnLookup[column.field] && filterColumnLookup[column.field].length,
+        headerHeight: headerHeight,
+        isDragging: column.field === dragCol,
+        column: column,
+        colIndex: columnIndex,
+        isResizing: resizeCol === column.field,
+        isLastColumn: columnIndex === columns.length - 1,
+        extendRowFullWidth: !rootProps.disableExtendRowFullWidth,
+        hasFocus: hasFocus,
+        tabIndex: tabIndex
+      }, other), i));
+    }
+
+    return columns;
+  };
+
+  const rootStyle = {
+    minHeight: headerHeight,
+    maxHeight: headerHeight,
+    lineHeight: `${headerHeight}px`
+  };
+  return {
+    renderContext,
+    getColumns,
+    isDragging: !!dragCol,
+    updateInnerPosition,
+    getRootProps: (other = {}) => _extends({
+      style: rootStyle
+    }, other),
+    getInnerProps: () => ({
+      ref: handleInnerRef,
+      'aria-rowindex': 1,
+      role: 'row'
+    })
+  };
+};

package/hooks/features/columnMenu/columnMenuSelector.d.ts

@@ -0,0 +1,2 @@
+import { GridStateCommunity } from '../../../models/gridStateCommunity';
+export declare const gridColumnMenuSelector: (state: GridStateCommunity) => import("./columnMenuState").GridColumnMenuState;

package/hooks/features/columnMenu/columnMenuSelector.js

@@ -0,0 +1 @@
+export const gridColumnMenuSelector = state => state.columnMenu;

package/hooks/features/columnMenu/columnMenuState.d.ts

@@ -0,0 +1,4 @@
+export interface GridColumnMenuState {
+    open: boolean;
+    field?: string;
+}

package/hooks/features/columnMenu/columnMenuState.js

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

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

@@ -0,0 +1,2 @@
+export * from './columnMenuState';
+export * from './columnMenuSelector';

package/hooks/features/columnMenu/index.js

@@ -0,0 +1,2 @@
+export * from './columnMenuState';
+export * from './columnMenuSelector';

package/hooks/features/columnMenu/useGridColumnMenu.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
+import { GridStateInitializer } from '../../utils/useGridInitializeState';
+export declare const columnMenuStateInitializer: GridStateInitializer;
+/**
+ * @requires useGridColumnResize (event)
+ * @requires useGridInfiniteLoader (event)
+ */
+export declare const useGridColumnMenu: (apiRef: React.MutableRefObject<GridApiCommunity>) => void;

package/hooks/features/columnMenu/useGridColumnMenu.js

@@ -0,0 +1,83 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GridEvents } from '../../../models/events';
+import { useGridLogger, useGridApiMethod, useGridApiEventHandler } from '../../utils';
+import { gridColumnMenuSelector } from './columnMenuSelector';
+export const columnMenuStateInitializer = state => _extends({}, state, {
+  columnMenu: {
+    open: false
+  }
+});
+/**
+ * @requires useGridColumnResize (event)
+ * @requires useGridInfiniteLoader (event)
+ */
+
+export const useGridColumnMenu = apiRef => {
+  const logger = useGridLogger(apiRef, 'useGridColumnMenu');
+  /**
+   * API METHODS
+   */
+
+  const showColumnMenu = React.useCallback(field => {
+    const shouldUpdate = apiRef.current.setState(state => {
+      if (state.columnMenu.open && state.columnMenu.field === field) {
+        return state;
+      }
+
+      logger.debug('Opening Column Menu');
+      return _extends({}, state, {
+        columnMenu: {
+          open: true,
+          field
+        }
+      });
+    });
+
+    if (shouldUpdate) {
+      apiRef.current.hidePreferences();
+      apiRef.current.forceUpdate();
+    }
+  }, [apiRef, logger]);
+  const hideColumnMenu = React.useCallback(() => {
+    const shouldUpdate = apiRef.current.setState(state => {
+      if (!state.columnMenu.open && state.columnMenu.field === undefined) {
+        return state;
+      }
+
+      logger.debug('Hiding Column Menu');
+      return _extends({}, state, {
+        columnMenu: _extends({}, state.columnMenu, {
+          open: false,
+          field: undefined
+        })
+      });
+    });
+
+    if (shouldUpdate) {
+      apiRef.current.forceUpdate();
+    }
+  }, [apiRef, logger]);
+  const toggleColumnMenu = React.useCallback(field => {
+    logger.debug('Toggle Column Menu');
+    const columnMenu = gridColumnMenuSelector(apiRef.current.state);
+
+    if (!columnMenu.open || columnMenu.field !== field) {
+      showColumnMenu(field);
+    } else {
+      hideColumnMenu();
+    }
+  }, [apiRef, logger, showColumnMenu, hideColumnMenu]);
+  const columnMenuApi = {
+    showColumnMenu,
+    hideColumnMenu,
+    toggleColumnMenu
+  };
+  useGridApiMethod(apiRef, columnMenuApi, 'GridColumnMenuApi');
+  /**
+   * EVENTS
+   */
+
+  useGridApiEventHandler(apiRef, GridEvents.columnResizeStart, hideColumnMenu);
+  useGridApiEventHandler(apiRef, GridEvents.rowsScroll, hideColumnMenu);
+};

package/hooks/features/columns/gridColumnsInterfaces.d.ts

@@ -0,0 +1,28 @@
+import type { GridRowId } from '../../../models';
+import { GridColDef, GridStateColDef } from '../../../models/colDef/gridColDef';
+import type { GridColumnDimensionProperties } from './gridColumnsUtils';
+export declare type GridColumnLookup = {
+    [field: string]: GridStateColDef;
+};
+export declare type GridColumnRawLookup = {
+    [field: string]: GridColDef | GridStateColDef;
+};
+export interface GridColumnsState {
+    /**
+     * TODO v6: Rename `all` to `orderedFields`
+     */
+    all: string[];
+    lookup: GridColumnLookup;
+    columnVisibilityModel: GridColumnVisibilityModel;
+}
+export declare type GridColumnDimensions = Pick<GridStateColDef, GridColumnDimensionProperties>;
+export interface GridColumnsInitialState {
+    columnVisibilityModel?: GridColumnVisibilityModel;
+    orderedFields?: string[];
+    dimensions?: Record<string, GridColumnDimensions>;
+}
+export declare type GridColumnsRawState = Omit<GridColumnsState, 'lookup'> & {
+    lookup: GridColumnRawLookup;
+};
+export declare type GridHydrateColumnsValue = Omit<GridColumnsRawState, 'columnVisibilityModel'>;
+export declare type GridColumnVisibilityModel = Record<GridRowId, boolean>;

package/hooks/features/columns/gridColumnsInterfaces.js

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

package/hooks/features/columns/gridColumnsSelector.d.ts

@@ -0,0 +1,106 @@
+import { GridStateCommunity } from '../../../models/gridStateCommunity';
+import { GridColumnLookup } from './gridColumnsInterfaces';
+/**
+ * @category Columns
+ * @deprecated Use the selector returning exactly the value you are looking for.
+ * @ignore - do not document.
+ * TODO v6: Rename `gridColumnsStateSelector`
+ */
+export declare const gridColumnsSelector: (state: GridStateCommunity) => import("./gridColumnsInterfaces").GridColumnsState;
+/**
+ * Get the field of each column.
+ * @category Columns
+ */
+export declare const gridColumnFieldsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string[]>;
+/**
+ * Get the columns as a lookup (an object containing the field for keys and the definition for values).
+ * @category Columns
+ */
+export declare const gridColumnLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, GridColumnLookup>;
+/**
+ * Get the columns as an array.
+ * @category Columns
+ */
+export declare const gridColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef[]>;
+/**
+ * Get the column visibility model, containing the visibility status of each column.
+ * If a column is not registered in the model, it is visible.
+ * @category Visible Columns
+ */
+export declare const gridColumnVisibilityModelSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridColumnsInterfaces").GridColumnVisibilityModel>;
+/**
+ * Get the visible columns as a lookup (an object containing the field for keys and the definition for values).
+ * @category Visible Columns
+ */
+export declare const gridVisibleColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef[]>;
+/**
+ * Get the field of each visible column.
+ * @category Visible Columns
+ */
+export declare const gridVisibleColumnFieldsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string[]>;
+/**
+ * Get the left position in pixel of each visible columns relative to the left of the first column.
+ * @category Visible Columns
+ */
+export declare const gridColumnPositionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number[]>;
+/**
+ * Get the summed width of all the visible columns.
+ * @category Visible Columns
+ */
+export declare const gridColumnsTotalWidthSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
+/**
+ * Get the filterable columns as an array.
+ * @category Columns
+ */
+export declare const gridFilterableColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef[]>;
+/**
+ * Get the filterable columns as a lookup (an object containing the field for keys and the definition for values).
+ * @category Columns
+ */
+export declare const gridFilterableColumnLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, GridColumnLookup>;
+/**
+ * @category Columns
+ * @deprecated Use `gridColumnFieldsSelector` instead.
+ * @ignore - do not document.
+ */
+export declare const allGridColumnsFieldsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string[]> | ((...args: any[]) => any);
+/**
+ * @category Columns
+ * @deprecated Use `gridColumnDefinitionsSelector` instead.
+ * @ignore - do not document.
+ */
+export declare const allGridColumnsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef[]> | ((...args: any[]) => any);
+/**
+ * @category Visible Columns
+ * @deprecated Use `gridVisibleColumnDefinitionsSelector` instead.
+ * @ignore - do not document.
+ */
+export declare const visibleGridColumnsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef[]> | ((...args: any[]) => any);
+/**
+ * @category Columns
+ * @deprecated Use `gridFilterableColumnDefinitionsSelector` instead.
+ * @ignore - do not document.
+ */
+export declare const filterableGridColumnsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef[]> | ((...args: any[]) => any);
+/**
+ * @category Columns
+ * @deprecated Use `gridFilterableColumnLookupSelector` instead (not the same return format).
+ * @ignore - do not document.
+ */
+export declare const filterableGridColumnsIdsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string[]> | ((...args: any[]) => any);
+/**
+ * Get the amount of visible columns.
+ * @category Visible Columns
+ * @deprecated Use the length of the array returned by `gridVisibleColumnDefinitionsSelector` instead.
+ * @ignore - do not document.
+ */
+export declare const visibleGridColumnsLengthSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number> | ((...args: any[]) => any);
+/**
+ * @category Visible Columns
+ * @deprecated Use `gridColumnsTotalWidthSelector` or `gridColumnPositionsSelector` instead.
+ * @ignore - do not document.
+ */
+export declare const gridColumnsMetaSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, {
+    totalWidth: number;
+    positions: number[];
+}> | ((...args: any[]) => any);

package/hooks/features/columns/gridColumnsSelector.js

@@ -0,0 +1,148 @@
+import { createSelector } from '../../../utils/createSelector';
+import { wrapWithWarningOnCall } from '../../../utils/warning';
+/**
+ * @category Columns
+ * @deprecated Use the selector returning exactly the value you are looking for.
+ * @ignore - do not document.
+ * TODO v6: Rename `gridColumnsStateSelector`
+ */
+
+export const gridColumnsSelector = state => state.columns;
+/**
+ * Get the field of each column.
+ * @category Columns
+ */
+
+export const gridColumnFieldsSelector = createSelector(gridColumnsSelector, columnsState => columnsState.all);
+/**
+ * Get the columns as a lookup (an object containing the field for keys and the definition for values).
+ * @category Columns
+ */
+
+export const gridColumnLookupSelector = createSelector(gridColumnsSelector, columnsState => columnsState.lookup);
+/**
+ * Get the columns as an array.
+ * @category Columns
+ */
+
+export const gridColumnDefinitionsSelector = createSelector(gridColumnFieldsSelector, gridColumnLookupSelector, (allFields, lookup) => allFields.map(field => lookup[field]));
+/**
+ * Get the column visibility model, containing the visibility status of each column.
+ * If a column is not registered in the model, it is visible.
+ * @category Visible Columns
+ */
+
+export const gridColumnVisibilityModelSelector = createSelector(gridColumnsSelector, columnsState => columnsState.columnVisibilityModel);
+/**
+ * Get the visible columns as a lookup (an object containing the field for keys and the definition for values).
+ * @category Visible Columns
+ */
+
+export const gridVisibleColumnDefinitionsSelector = createSelector(gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, (columns, columnVisibilityModel) => columns.filter(column => columnVisibilityModel[column.field] !== false));
+/**
+ * Get the field of each visible column.
+ * @category Visible Columns
+ */
+
+export const gridVisibleColumnFieldsSelector = createSelector(gridVisibleColumnDefinitionsSelector, visibleColumns => visibleColumns.map(column => column.field));
+/**
+ * Get the left position in pixel of each visible columns relative to the left of the first column.
+ * @category Visible Columns
+ */
+
+export const gridColumnPositionsSelector = createSelector(gridVisibleColumnDefinitionsSelector, visibleColumns => {
+  const positions = [];
+  let currentPosition = 0;
+
+  for (let i = 0; i < visibleColumns.length; i += 1) {
+    positions.push(currentPosition);
+    currentPosition += visibleColumns[i].computedWidth;
+  }
+
+  return positions;
+});
+/**
+ * Get the summed width of all the visible columns.
+ * @category Visible Columns
+ */
+
+export const gridColumnsTotalWidthSelector = createSelector(gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector, (visibleColumns, positions) => {
+  const colCount = visibleColumns.length;
+
+  if (colCount === 0) {
+    return 0;
+  }
+
+  return positions[colCount - 1] + visibleColumns[colCount - 1].computedWidth;
+});
+/**
+ * Get the filterable columns as an array.
+ * @category Columns
+ */
+
+export const gridFilterableColumnDefinitionsSelector = createSelector(gridColumnDefinitionsSelector, columns => columns.filter(col => col.filterable));
+/**
+ * Get the filterable columns as a lookup (an object containing the field for keys and the definition for values).
+ * @category Columns
+ */
+
+export const gridFilterableColumnLookupSelector = createSelector(gridColumnDefinitionsSelector, columns => columns.reduce((acc, col) => {
+  if (col.filterable) {
+    acc[col.field] = col;
+  }
+
+  return acc;
+}, {}));
+/**
+ * @category Columns
+ * @deprecated Use `gridColumnFieldsSelector` instead.
+ * @ignore - do not document.
+ */
+
+export const allGridColumnsFieldsSelector = wrapWithWarningOnCall(gridColumnFieldsSelector, ['MUI: The method allGridColumnsFieldsSelector is deprecated and will be removed in the next major version.', 'Use gridColumnFieldsSelector instead']);
+/**
+ * @category Columns
+ * @deprecated Use `gridColumnDefinitionsSelector` instead.
+ * @ignore - do not document.
+ */
+
+export const allGridColumnsSelector = wrapWithWarningOnCall(gridColumnDefinitionsSelector, ['MUI: The method allGridColumnsSelector is deprecated and will be removed in the next major version.', 'Use gridColumnDefinitionsSelector instead']);
+/**
+ * @category Visible Columns
+ * @deprecated Use `gridVisibleColumnDefinitionsSelector` instead.
+ * @ignore - do not document.
+ */
+
+export const visibleGridColumnsSelector = wrapWithWarningOnCall(gridVisibleColumnDefinitionsSelector, ['MUI: The method visibleGridColumnsSelector is deprecated and will be removed in the next major version.', 'Use gridVisibleColumnDefinitionsSelector instead']);
+/**
+ * @category Columns
+ * @deprecated Use `gridFilterableColumnDefinitionsSelector` instead.
+ * @ignore - do not document.
+ */
+
+export const filterableGridColumnsSelector = wrapWithWarningOnCall(gridFilterableColumnDefinitionsSelector, ['MUI: The method filterableGridColumnsSelector is deprecated and will be removed in the next major version.', 'Use gridFilterableColumnDefinitionsSelector instead']);
+/**
+ * @category Columns
+ * @deprecated Use `gridFilterableColumnLookupSelector` instead (not the same return format).
+ * @ignore - do not document.
+ */
+
+export const filterableGridColumnsIdsSelector = wrapWithWarningOnCall(createSelector(gridFilterableColumnDefinitionsSelector, columns => columns.map(col => col.field)), ['MUI: The method filterableGridColumnsIdsSelector is deprecated and will be removed in the next major version.', 'Use gridFilterableColumnDefinitionsSelector instead.', 'The return format is now a lookup, if you want to get the same output as before, use the following code:', '', 'const lookup = gridFilterableColumnLookupSelector(apiRef);', 'const fields = gridColumnFieldsSelector(apiRef).filter(field => lookup[field]);']);
+/**
+ * Get the amount of visible columns.
+ * @category Visible Columns
+ * @deprecated Use the length of the array returned by `gridVisibleColumnDefinitionsSelector` instead.
+ * @ignore - do not document.
+ */
+
+export const visibleGridColumnsLengthSelector = wrapWithWarningOnCall(createSelector(gridVisibleColumnDefinitionsSelector, visibleColumns => visibleColumns.length), ['MUI: The method visibleGridColumnsLengthSelector is deprecated and will be removed in the next major version.', 'Use the length of the array returned by gridVisibleColumnDefinitionsSelector instead.']);
+/**
+ * @category Visible Columns
+ * @deprecated Use `gridColumnsTotalWidthSelector` or `gridColumnPositionsSelector` instead.
+ * @ignore - do not document.
+ */
+
+export const gridColumnsMetaSelector = wrapWithWarningOnCall(createSelector(gridColumnPositionsSelector, gridColumnsTotalWidthSelector, (positions, totalWidth) => ({
+  totalWidth,
+  positions
+})), ['MUI: The method gridColumnsMetaSelector is deprecated and will be removed in the next major version.', 'Use gridColumnsTotalWidthSelector or gridColumnPositionsSelector instead']);