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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useGridColumnHeadersPro = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _xDataGrid = require("@mui/x-data-grid");
var _internals = require("@mui/x-data-grid/internals");
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
var _useGridRootProps = require("../../utils/useGridRootProps");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["getColumnsToRender", "getPinnedCellOffset", "renderContext", "leftRenderContext", "rightRenderContext", "pinnedColumns", "visibleColumns", "columnPositions"];
const useUtilityClasses = ownerState => {
  const {
    classes
  } = ownerState;
  return React.useMemo(() => {
    const slots = {
      headerFilterRow: ['headerFilterRow']
    };
    return (0, _composeClasses.default)(slots, _xDataGrid.getDataGridUtilityClass, classes);
  }, [classes]);
};
const useGridColumnHeadersPro = props => {
  const apiRef = (0, _internals.useGridPrivateApiContext)();
  const {
    headerGroupingMaxDepth,
    hasOtherElementInTabSequence
  } = props;
  const columnHeaderFilterTabIndexState = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridTabIndexColumnHeaderFilterSelector);
  const _useGridColumnHeaders = (0, _internals.useGridColumnHeaders)((0, _extends2.default)({}, props, {
      hasOtherElementInTabSequence: hasOtherElementInTabSequence || columnHeaderFilterTabIndexState !== null
    })),
    {
      getColumnsToRender,
      getPinnedCellOffset,
      renderContext,
      leftRenderContext,
      rightRenderContext,
      pinnedColumns,
      visibleColumns,
      columnPositions
    } = _useGridColumnHeaders,
    otherProps = (0, _objectWithoutPropertiesLoose2.default)(_useGridColumnHeaders, _excluded);
  const headerFiltersRef = React.useRef(null);
  apiRef.current.register('private', {
    headerFiltersElementRef: headerFiltersRef
  });
  const headerFilterMenuRef = React.useRef(null);
  const rootProps = (0, _useGridRootProps.useGridRootProps)();
  const classes = useUtilityClasses(rootProps);
  const disableHeaderFiltering = !rootProps.headerFilters;
  const filterModel = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridFilterModelSelector);
  const columnsTotalWidth = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridColumnsTotalWidthSelector);
  const gridHasFiller = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridHasFillerSelector);
  const headerFilterHeight = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridHeaderFilterHeightSelector);
  const scrollbarWidth = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridVerticalScrollbarWidthSelector);
  const columnHeaderFilterFocus = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridFocusColumnHeaderFilterSelector);
  const filterItemsCache = React.useRef(Object.create(null)).current;
  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 = (0, _internals.getGridFilter)(colDef);
    filterItemsCache[colDef.field] = defaultItem;
    return defaultItem;
  },
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [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 = (0, _internals.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
      const showRightBorder = (0, _internals.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showColumnVerticalBorder, gridHasFiller);
      filters.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.headerFilterCell, (0, _extends2.default)({
        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__*/(0, _jsxRuntime.jsxs)(_internals.GridColumnHeaderRow, {
      ref: headerFiltersRef,
      className: classes.headerFilterRow,
      role: "row",
      "aria-rowindex": headerGroupingMaxDepth + 2,
      ownerState: rootProps,
      children: [leftRenderContext && getColumnFilters({
        position: _internals.PinnedColumnPosition.LEFT,
        renderContext: leftRenderContext,
        maxLastColumn: leftRenderContext.lastColumnIndex
      }), getColumnFilters({
        renderContext,
        maxLastColumn: visibleColumns.length - pinnedColumns.right.length
      }), rightRenderContext && getColumnFilters({
        position: _internals.PinnedColumnPosition.RIGHT,
        renderContext: rightRenderContext,
        maxLastColumn: rightRenderContext.lastColumnIndex
      })]
    });
  };
  if (process.env.NODE_ENV !== "production") getColumnFiltersRow.displayName = "getColumnFiltersRow";
  return (0, _extends2.default)({}, otherProps, {
    getColumnFiltersRow
  });
};
exports.useGridColumnHeadersPro = useGridColumnHeadersPro;