@mui/x-data-grid-pro/components/headerFiltering/GridHeaderFilterMenu.js

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.GridHeaderFilterMenu = GridHeaderFilterMenu;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
var _xDataGrid = require("@mui/x-data-grid");
var _jsxRuntime = require("react/jsx-runtime");
function GridHeaderFilterMenu({
  open,
  field,
  target,
  applyFilterChanges,
  operators,
  item,
  id,
  labelledBy,
  showClearItem,
  clearFilterItem
}) {
  const apiRef = (0, _xDataGrid.useGridApiContext)();
  const rootProps = (0, _xDataGrid.useGridRootProps)();
  const hideMenu = React.useCallback(() => {
    apiRef.current.hideHeaderFilterMenu();
  }, [apiRef]);
  if (!target) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridMenu, {
    position: "bottom-end",
    open: open,
    target: target,
    onClose: hideMenu,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuList, {
      "aria-labelledby": labelledBy,
      id: id,
      children: [showClearItem && [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
        iconStart: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuClearIcon, {
          fontSize: "small"
        }),
        onClick: () => {
          clearFilterItem();
          hideMenu();
        },
        children: apiRef.current.getLocaleText('headerFilterClear')
      }, "filter-menu-clear-filter"), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseDivider, {}, "filter-menu-divider")], operators.map(op => {
        const selected = op.value === item.operator;
        const label = op?.headerLabel ?? apiRef.current.getLocaleText(`headerFilterOperator${(0, _capitalize.default)(op.value)}`);
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
          iconStart: selected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.menuItemCheckIcon, {
            fontSize: "small"
          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {}),
          onClick: () => {
            applyFilterChanges((0, _extends2.default)({}, item, {
              operator: op.value
            }));
            hideMenu();
          },
          autoFocus: selected ? open : false,
          children: label
        }, `${field}-${op.value}`);
      })]
    })
  });
}
process.env.NODE_ENV !== "production" ? GridHeaderFilterMenu.propTypes = {
  // ----------------------------- Warning --------------------------------
  // | These PropTypes are generated from the TypeScript type definitions |
  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
  // ----------------------------------------------------------------------
  applyFilterChanges: _propTypes.default.func.isRequired,
  clearFilterItem: _propTypes.default.func.isRequired,
  field: _propTypes.default.string.isRequired,
  id: _propTypes.default /* @typescript-to-proptypes-ignore */.string,
  item: _propTypes.default.shape({
    field: _propTypes.default.string.isRequired,
    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
    operator: _propTypes.default.string.isRequired,
    value: _propTypes.default.any
  }).isRequired,
  labelledBy: _propTypes.default /* @typescript-to-proptypes-ignore */.string,
  open: _propTypes.default.bool.isRequired,
  operators: _propTypes.default.arrayOf(_propTypes.default.shape({
    getApplyFilterFn: _propTypes.default.func.isRequired,
    getValueAsString: _propTypes.default.func,
    headerLabel: _propTypes.default.string,
    InputComponent: _propTypes.default.elementType,
    InputComponentProps: _propTypes.default.shape({
      apiRef: _propTypes.default.shape({
        current: _propTypes.default.object.isRequired
      }),
      applyValue: _propTypes.default.func,
      className: _propTypes.default.string,
      clearButton: _propTypes.default.node,
      disabled: _propTypes.default.bool,
      focusElementRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
        current: _propTypes.default.any.isRequired
      })]),
      headerFilterMenu: _propTypes.default.node,
      inputRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.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.default.bool,
      item: _propTypes.default.shape({
        field: _propTypes.default.string.isRequired,
        id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
        operator: _propTypes.default.string.isRequired,
        value: _propTypes.default.any
      }),
      onBlur: _propTypes.default.func,
      onFocus: _propTypes.default.func,
      slotProps: _propTypes.default.object,
      tabIndex: _propTypes.default.number
    }),
    label: _propTypes.default.string,
    requiresFilterValue: _propTypes.default.bool,
    value: _propTypes.default.string.isRequired
  })).isRequired,
  showClearItem: _propTypes.default.bool.isRequired,
  target: _HTMLElementType.default
} : void 0;