@mui/x-data-grid-pro/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

The Pro plan edition of the Data Grid components (MUI X).

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["getColumnsToRender", "renderContext", "leftRenderContext", "rightRenderContext", "pinnedColumns", "visibleColumns", "getCellOffsetStyle"];
import * as React from 'react';
import { gridFocusColumnHeaderFilterSelector, useGridSelector, gridFilterModelSelector, gridTabIndexColumnHeaderFilterSelector, getDataGridUtilityClass, GridPinnedColumnPosition, gridDimensionsSelector } from '@mui/x-data-grid';
import { useGridColumnHeaders as useGridColumnHeadersCommunity, useGridPrivateApiContext, getGridFilter, GridColumnHeaderRow } from '@mui/x-data-grid/internals';
import composeClasses from '@mui/utils/composeClasses';
import { useGridRootProps } from '../../utils/useGridRootProps';
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,
      renderContext,
      leftRenderContext,
      rightRenderContext,
      pinnedColumns,
      visibleColumns,
      getCellOffsetStyle
    } = _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 dimensions = useGridSelector(apiRef, gridDimensionsSelector);
  const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
  const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
  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 style = getCellOffsetStyle({
        pinnedPosition,
        columnIndex,
        computedWidth: colDef.computedWidth
      });
      filters.push( /*#__PURE__*/_jsx(rootProps.slots.headerFilterCell, _extends({
        colIndex: columnIndex,
        height: dimensions.headerFilterHeight,
        width: colDef.computedWidth,
        colDef: colDef,
        hasFocus: hasFocus,
        tabIndex: tabIndex,
        headerFilterMenuRef: headerFilterMenuRef,
        headerClassName: headerClassName,
        "data-field": colDef.field,
        item: item,
        pinnedPosition: pinnedPosition,
        style: style,
        indexInSection: i,
        sectionLength: renderedColumns.length,
        gridHasFiller: gridHasFiller
      }, 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: GridPinnedColumnPosition.LEFT,
        renderContext: leftRenderContext,
        minFirstColumn: leftRenderContext.firstColumnIndex,
        maxLastColumn: leftRenderContext.lastColumnIndex
      }), getColumnFilters({
        renderContext,
        minFirstColumn: pinnedColumns.left.length,
        maxLastColumn: visibleColumns.length - pinnedColumns.right.length
      }), rightRenderContext && getColumnFilters({
        position: GridPinnedColumnPosition.RIGHT,
        renderContext: rightRenderContext,
        minFirstColumn: rightRenderContext.firstColumnIndex,
        maxLastColumn: rightRenderContext.lastColumnIndex
      })]
    });
  };
  return _extends({}, otherProps, {
    getColumnFiltersRow
  });
};