@mui/x-data-grid 9.0.0-alpha.1 → 9.0.0-alpha.2

package/colDef/gridNumericOperators.mjs

@@ -0,0 +1,143 @@
+import { GridFilterInputValue } from "../components/panel/filterPanel/GridFilterInputValue.mjs";
+import { GridFilterInputMultipleValue } from "../components/panel/filterPanel/GridFilterInputMultipleValue.mjs";
+const parseNumericValue = value => {
+  if (value == null) {
+    return null;
+  }
+  return Number(value);
+};
+export const getGridNumericQuickFilterFn = value => {
+  if (value == null || Number.isNaN(value) || value === '') {
+    return null;
+  }
+  return columnValue => {
+    return parseNumericValue(columnValue) === parseNumericValue(value);
+  };
+};
+export const getGridNumericOperators = () => [{
+  value: '=',
+  getApplyFilterFn: filterItem => {
+    if (filterItem.value == null || Number.isNaN(filterItem.value)) {
+      return null;
+    }
+    return value => {
+      return parseNumericValue(value) === filterItem.value;
+    };
+  },
+  InputComponent: GridFilterInputValue,
+  InputComponentProps: {
+    type: 'number'
+  }
+}, {
+  value: '!=',
+  getApplyFilterFn: filterItem => {
+    if (filterItem.value == null || Number.isNaN(filterItem.value)) {
+      return null;
+    }
+    return value => {
+      return parseNumericValue(value) !== filterItem.value;
+    };
+  },
+  InputComponent: GridFilterInputValue,
+  InputComponentProps: {
+    type: 'number'
+  }
+}, {
+  value: '>',
+  getApplyFilterFn: filterItem => {
+    if (filterItem.value == null || Number.isNaN(filterItem.value)) {
+      return null;
+    }
+    return value => {
+      if (value == null) {
+        return false;
+      }
+      return parseNumericValue(value) > filterItem.value;
+    };
+  },
+  InputComponent: GridFilterInputValue,
+  InputComponentProps: {
+    type: 'number'
+  }
+}, {
+  value: '>=',
+  getApplyFilterFn: filterItem => {
+    if (filterItem.value == null || Number.isNaN(filterItem.value)) {
+      return null;
+    }
+    return value => {
+      if (value == null) {
+        return false;
+      }
+      return parseNumericValue(value) >= filterItem.value;
+    };
+  },
+  InputComponent: GridFilterInputValue,
+  InputComponentProps: {
+    type: 'number'
+  }
+}, {
+  value: '<',
+  getApplyFilterFn: filterItem => {
+    if (filterItem.value == null || Number.isNaN(filterItem.value)) {
+      return null;
+    }
+    return value => {
+      if (value == null) {
+        return false;
+      }
+      return parseNumericValue(value) < filterItem.value;
+    };
+  },
+  InputComponent: GridFilterInputValue,
+  InputComponentProps: {
+    type: 'number'
+  }
+}, {
+  value: '<=',
+  getApplyFilterFn: filterItem => {
+    if (filterItem.value == null || Number.isNaN(filterItem.value)) {
+      return null;
+    }
+    return value => {
+      if (value == null) {
+        return false;
+      }
+      return parseNumericValue(value) <= filterItem.value;
+    };
+  },
+  InputComponent: GridFilterInputValue,
+  InputComponentProps: {
+    type: 'number'
+  }
+}, {
+  value: 'isEmpty',
+  getApplyFilterFn: () => {
+    return value => {
+      return value == null;
+    };
+  },
+  requiresFilterValue: false
+}, {
+  value: 'isNotEmpty',
+  getApplyFilterFn: () => {
+    return value => {
+      return value != null;
+    };
+  },
+  requiresFilterValue: false
+}, {
+  value: 'isAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!Array.isArray(filterItem.value) || filterItem.value.length === 0) {
+      return null;
+    }
+    return value => {
+      return value != null && filterItem.value.includes(Number(value));
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue,
+  InputComponentProps: {
+    type: 'number'
+  }
+}];

package/colDef/gridSingleSelectColDef.d.mts

@@ -0,0 +1,2 @@
+import type { GridSingleSelectColDef } from "../models/colDef/gridColDef.mjs";
+export declare const GRID_SINGLE_SELECT_COL_DEF: Omit<GridSingleSelectColDef, 'field'>;

package/colDef/gridSingleSelectColDef.mjs

@@ -0,0 +1,61 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { GRID_STRING_COL_DEF } from "./gridStringColDef.mjs";
+import { renderEditSingleSelectCell } from "../components/cell/GridEditSingleSelectCell.mjs";
+import { getGridSingleSelectOperators } from "./gridSingleSelectOperators.mjs";
+import { getValueOptions, isSingleSelectColDef } from "../components/panel/filterPanel/filterPanelUtils.mjs";
+import { isObject } from "../utils/utils.mjs";
+import { gridRowIdSelector } from "../hooks/core/gridPropsSelectors.mjs";
+const isArrayOfObjects = options => {
+  return typeof options[0] === 'object';
+};
+const defaultGetOptionValue = value => {
+  return isObject(value) ? value.value : value;
+};
+const defaultGetOptionLabel = value => {
+  return isObject(value) ? value.label : String(value);
+};
+export const GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
+  type: 'singleSelect',
+  getOptionLabel: defaultGetOptionLabel,
+  getOptionValue: defaultGetOptionValue,
+  valueFormatter(value, row, colDef, apiRef) {
+    const rowId = gridRowIdSelector(apiRef, row);
+    if (!isSingleSelectColDef(colDef)) {
+      return '';
+    }
+    const valueOptions = getValueOptions(colDef, {
+      id: rowId,
+      row
+    });
+    if (value == null) {
+      return '';
+    }
+    if (!valueOptions) {
+      return value;
+    }
+    if (!isArrayOfObjects(valueOptions)) {
+      return colDef.getOptionLabel(value);
+    }
+    const valueOption = valueOptions.find(option => colDef.getOptionValue(option) === value);
+    return valueOption ? colDef.getOptionLabel(valueOption) : '';
+  },
+  renderEditCell: renderEditSingleSelectCell,
+  filterOperators: getGridSingleSelectOperators(),
+  // @ts-ignore
+  pastedValueParser: (value, row, column) => {
+    const colDef = column;
+    const valueOptions = getValueOptions(colDef) || [];
+    const getOptionValue = colDef.getOptionValue;
+    const valueOption = valueOptions.find(option => {
+      if (getOptionValue(option) === value) {
+        return true;
+      }
+      return false;
+    });
+    if (valueOption) {
+      return value;
+    }
+    // do not paste the value if it is not in the valueOptions
+    return undefined;
+  }
+});

package/colDef/gridSingleSelectOperators.d.mts

@@ -0,0 +1,2 @@
+import type { GridFilterOperator } from "../models/gridFilterOperator.mjs";
+export declare const getGridSingleSelectOperators: () => GridFilterOperator[];

package/colDef/gridSingleSelectOperators.mjs

@@ -0,0 +1,38 @@
+import { GridFilterInputSingleSelect } from "../components/panel/filterPanel/GridFilterInputSingleSelect.mjs";
+import { GridFilterInputMultipleSingleSelect } from "../components/panel/filterPanel/GridFilterInputMultipleSingleSelect.mjs";
+import { isObject } from "../utils/utils.mjs";
+const parseObjectValue = value => {
+  if (value == null || !isObject(value)) {
+    return value;
+  }
+  return value.value;
+};
+export const getGridSingleSelectOperators = () => [{
+  value: 'is',
+  getApplyFilterFn: filterItem => {
+    if (filterItem.value == null || filterItem.value === '') {
+      return null;
+    }
+    return value => parseObjectValue(value) === parseObjectValue(filterItem.value);
+  },
+  InputComponent: GridFilterInputSingleSelect
+}, {
+  value: 'not',
+  getApplyFilterFn: filterItem => {
+    if (filterItem.value == null || filterItem.value === '') {
+      return null;
+    }
+    return value => parseObjectValue(value) !== parseObjectValue(filterItem.value);
+  },
+  InputComponent: GridFilterInputSingleSelect
+}, {
+  value: 'isAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!Array.isArray(filterItem.value) || filterItem.value.length === 0) {
+      return null;
+    }
+    const filterItemValues = filterItem.value.map(parseObjectValue);
+    return value => filterItemValues.includes(parseObjectValue(value));
+  },
+  InputComponent: GridFilterInputMultipleSingleSelect
+}];

package/colDef/gridStringColDef.d.mts

@@ -0,0 +1,5 @@
+import type { GridColTypeDef } from "../models/colDef/gridColDef.mjs";
+/**
+ * TODO: Move pro and premium properties outside of this Community file
+ */
+export declare const GRID_STRING_COL_DEF: GridColTypeDef<any, any>;

package/colDef/gridStringColDef.mjs

@@ -0,0 +1,28 @@
+import { renderEditInputCell } from "../components/cell/GridEditInputCell.mjs";
+import { gridStringOrNumberComparator } from "../hooks/features/sorting/gridSortingUtils.mjs";
+import { getGridStringOperators, getGridStringQuickFilterFn } from "./gridStringOperators.mjs";
+
+/**
+ * TODO: Move pro and premium properties outside of this Community file
+ */
+export const GRID_STRING_COL_DEF = {
+  width: 100,
+  minWidth: 50,
+  maxWidth: Infinity,
+  hideable: true,
+  sortable: true,
+  resizable: true,
+  filterable: true,
+  groupable: true,
+  pinnable: true,
+  // @ts-ignore
+  aggregable: true,
+  chartable: true,
+  editable: false,
+  sortComparator: gridStringOrNumberComparator,
+  type: 'string',
+  align: 'left',
+  filterOperators: getGridStringOperators(),
+  renderEditCell: renderEditInputCell,
+  getApplyQuickFilterFn: getGridStringQuickFilterFn
+};

package/colDef/gridStringOperators.d.mts

@@ -0,0 +1,4 @@
+import type { GetApplyQuickFilterFn } from "../models/colDef/gridColDef.mjs";
+import type { GridFilterOperator } from "../models/gridFilterOperator.mjs";
+export declare const getGridStringQuickFilterFn: GetApplyQuickFilterFn<any, unknown>;
+export declare const getGridStringOperators: (disableTrim?: boolean) => GridFilterOperator<any, number | string | null, any>[];

package/colDef/gridStringOperators.mjs

@@ -0,0 +1,121 @@
+import { GridFilterInputValue } from "../components/panel/filterPanel/GridFilterInputValue.mjs";
+import { escapeRegExp } from "../utils/utils.mjs";
+import { GridFilterInputMultipleValue } from "../components/panel/filterPanel/GridFilterInputMultipleValue.mjs";
+import { removeDiacritics } from "../hooks/features/filter/gridFilterUtils.mjs";
+export const getGridStringQuickFilterFn = value => {
+  if (!value) {
+    return null;
+  }
+  const filterRegex = new RegExp(escapeRegExp(value), 'i');
+  return (_, row, column, apiRef) => {
+    let columnValue = apiRef.current.getRowFormattedValue(row, column);
+    if (apiRef.current.ignoreDiacritics) {
+      columnValue = removeDiacritics(columnValue);
+    }
+    return columnValue != null ? filterRegex.test(columnValue.toString()) : false;
+  };
+};
+const createContainsFilterFn = (disableTrim, negate) => filterItem => {
+  if (!filterItem.value) {
+    return null;
+  }
+  const trimmedValue = disableTrim ? filterItem.value : filterItem.value.trim();
+  const filterRegex = new RegExp(escapeRegExp(trimmedValue), 'i');
+  return value => {
+    if (value == null) {
+      return negate;
+    }
+    const matches = filterRegex.test(String(value));
+    return negate ? !matches : matches;
+  };
+};
+const createEqualityFilterFn = (disableTrim, negate) => filterItem => {
+  if (!filterItem.value) {
+    return null;
+  }
+  const trimmedValue = disableTrim ? filterItem.value : filterItem.value.trim();
+  const collator = new Intl.Collator(undefined, {
+    sensitivity: 'base',
+    usage: 'search'
+  });
+  return value => {
+    if (value == null) {
+      return negate;
+    }
+    const isEqual = collator.compare(trimmedValue, value.toString()) === 0;
+    return negate ? !isEqual : isEqual;
+  };
+};
+const createEmptyFilterFn = negate => () => {
+  return value => {
+    const isEmpty = value === '' || value == null;
+    return negate ? !isEmpty : isEmpty;
+  };
+};
+export const getGridStringOperators = (disableTrim = false) => [{
+  value: 'contains',
+  getApplyFilterFn: createContainsFilterFn(disableTrim, false),
+  InputComponent: GridFilterInputValue
+}, {
+  value: 'doesNotContain',
+  getApplyFilterFn: createContainsFilterFn(disableTrim, true),
+  InputComponent: GridFilterInputValue
+}, {
+  value: 'equals',
+  getApplyFilterFn: createEqualityFilterFn(disableTrim, false),
+  InputComponent: GridFilterInputValue
+}, {
+  value: 'doesNotEqual',
+  getApplyFilterFn: createEqualityFilterFn(disableTrim, true),
+  InputComponent: GridFilterInputValue
+}, {
+  value: 'startsWith',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.value) {
+      return null;
+    }
+    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
+    const filterRegex = new RegExp(`^${escapeRegExp(filterItemValue)}.*$`, 'i');
+    return value => {
+      return value != null ? filterRegex.test(value.toString()) : false;
+    };
+  },
+  InputComponent: GridFilterInputValue
+}, {
+  value: 'endsWith',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.value) {
+      return null;
+    }
+    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
+    const filterRegex = new RegExp(`.*${escapeRegExp(filterItemValue)}$`, 'i');
+    return value => {
+      return value != null ? filterRegex.test(value.toString()) : false;
+    };
+  },
+  InputComponent: GridFilterInputValue
+}, {
+  value: 'isEmpty',
+  getApplyFilterFn: createEmptyFilterFn(false),
+  requiresFilterValue: false
+}, {
+  value: 'isNotEmpty',
+  getApplyFilterFn: createEmptyFilterFn(true),
+  requiresFilterValue: false
+}, {
+  value: 'isAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!Array.isArray(filterItem.value) || filterItem.value.length === 0) {
+      return null;
+    }
+    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.map(val => val.trim());
+    const collator = new Intl.Collator(undefined, {
+      sensitivity: 'base',
+      usage: 'search'
+    });
+    return value => value != null ? filterItemValue.some(filterValue => {
+      return collator.compare(filterValue, value.toString() || '') === 0;
+    }) : false;
+  },
+  InputComponent: GridFilterInputMultipleValue
+}];

package/colDef/index.d.mts

@@ -0,0 +1,14 @@
+export * from "./gridActionsColDef.mjs";
+export * from "./gridBooleanColDef.mjs";
+export * from "./gridCheckboxSelectionColDef.mjs";
+export * from "./gridDateColDef.mjs";
+export * from "./gridNumericColDef.mjs";
+export * from "./gridSingleSelectColDef.mjs";
+export * from "./gridStringColDef.mjs";
+export * from "./gridLongTextColDef.mjs";
+export * from "./gridBooleanOperators.mjs";
+export * from "./gridDateOperators.mjs";
+export * from "./gridNumericOperators.mjs";
+export * from "./gridSingleSelectOperators.mjs";
+export * from "./gridStringOperators.mjs";
+export * from "./gridDefaultColumnTypes.mjs";

package/colDef/index.mjs

@@ -0,0 +1,14 @@
+export * from "./gridActionsColDef.mjs";
+export * from "./gridBooleanColDef.mjs";
+export * from "./gridCheckboxSelectionColDef.mjs";
+export * from "./gridDateColDef.mjs";
+export * from "./gridNumericColDef.mjs";
+export * from "./gridSingleSelectColDef.mjs";
+export * from "./gridStringColDef.mjs";
+export * from "./gridLongTextColDef.mjs";
+export * from "./gridBooleanOperators.mjs";
+export * from "./gridDateOperators.mjs";
+export * from "./gridNumericOperators.mjs";
+export * from "./gridSingleSelectOperators.mjs";
+export * from "./gridStringOperators.mjs";
+export * from "./gridDefaultColumnTypes.mjs";

package/components/GridColumnHeaders.d.mts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { type UseGridColumnHeadersProps } from "../hooks/features/columnHeaders/useGridColumnHeaders.mjs";
+export interface GridColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement>, UseGridColumnHeadersProps {
+  ref?: React.Ref<HTMLDivElement>;
+}
+declare const MemoizedGridColumnHeaders: React.ForwardRefExoticComponent<GridColumnHeadersProps> | React.ForwardRefExoticComponent<Omit<GridColumnHeadersProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { MemoizedGridColumnHeaders as GridColumnHeaders };

package/components/GridColumnHeaders.mjs

@@ -0,0 +1,88 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { fastMemo } from '@mui/x-internals/fastMemo';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useGridColumnHeaders } from "../hooks/features/columnHeaders/useGridColumnHeaders.mjs";
+import { GridBaseColumnHeaders } from "./columnHeaders/GridBaseColumnHeaders.mjs";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const GridColumnHeaders = forwardRef(function GridColumnHeaders(props, ref) {
+  const {
+      visibleColumns,
+      sortColumnLookup,
+      filterColumnLookup,
+      columnHeaderTabIndexState,
+      columnGroupHeaderTabIndexState,
+      columnHeaderFocus,
+      columnGroupHeaderFocus,
+      headerGroupingMaxDepth,
+      columnMenuState,
+      columnVisibility,
+      columnGroupsHeaderStructure,
+      hasOtherElementInTabSequence
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    getInnerProps,
+    getColumnHeadersRow,
+    getColumnGroupHeadersRows
+  } = useGridColumnHeaders({
+    visibleColumns,
+    sortColumnLookup,
+    filterColumnLookup,
+    columnHeaderTabIndexState,
+    columnGroupHeaderTabIndexState,
+    columnHeaderFocus,
+    columnGroupHeaderFocus,
+    headerGroupingMaxDepth,
+    columnMenuState,
+    columnVisibility,
+    columnGroupsHeaderStructure,
+    hasOtherElementInTabSequence
+  });
+  return /*#__PURE__*/_jsxs(GridBaseColumnHeaders, _extends({}, other, getInnerProps(), {
+    ref: ref,
+    children: [getColumnGroupHeadersRows(), getColumnHeadersRow()]
+  }));
+});
+if (process.env.NODE_ENV !== "production") GridColumnHeaders.displayName = "GridColumnHeaders";
+process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  columnGroupHeaderFocus: PropTypes.shape({
+    depth: PropTypes.number.isRequired,
+    field: PropTypes.string.isRequired
+  }),
+  columnGroupHeaderTabIndexState: PropTypes.shape({
+    depth: PropTypes.number.isRequired,
+    field: PropTypes.string.isRequired
+  }),
+  columnGroupsHeaderStructure: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.shape({
+    columnFields: PropTypes.arrayOf(PropTypes.string).isRequired,
+    groupId: PropTypes.string
+  }))).isRequired,
+  columnHeaderFocus: PropTypes.shape({
+    field: PropTypes.string.isRequired
+  }),
+  columnHeaderTabIndexState: PropTypes.shape({
+    field: PropTypes.string.isRequired
+  }),
+  columnMenuState: PropTypes.shape({
+    field: PropTypes.string,
+    open: PropTypes.bool.isRequired
+  }).isRequired,
+  columnVisibility: PropTypes.object.isRequired,
+  filterColumnLookup: PropTypes.object.isRequired,
+  hasOtherElementInTabSequence: PropTypes.bool.isRequired,
+  headerGroupingMaxDepth: PropTypes.number.isRequired,
+  sortColumnLookup: PropTypes.object.isRequired,
+  visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired
+} : void 0;
+const MemoizedGridColumnHeaders = fastMemo(GridColumnHeaders);
+export { MemoizedGridColumnHeaders as GridColumnHeaders };

package/components/GridColumnSortButton.d.mts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { GridSlotProps } from "../models/index.mjs";
+import type { GridSortDirection } from "../models/gridSortModel.mjs";
+export type GridColumnSortButtonProps = GridSlotProps['baseIconButton'] & {
+  field: string;
+  direction: GridSortDirection;
+  index?: number;
+  sortingOrder: readonly GridSortDirection[];
+  disabled?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+declare function GridColumnSortButton(props: GridColumnSortButtonProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace GridColumnSortButton {
+  var propTypes: any;
+}
+export { GridColumnSortButton };

package/components/GridColumnSortButton.mjs

@@ -0,0 +1,105 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["direction", "index", "sortingOrder", "disabled", "className"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import composeClasses from '@mui/utils/composeClasses';
+import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.mjs";
+import { getDataGridUtilityClass } from "../constants/gridClasses.mjs";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.mjs";
+import { vars } from "../constants/cssVariables.mjs";
+import { NotRendered } from "../utils/assert.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['sortButton'],
+    icon: ['sortIcon']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridColumnSortButtonRoot = styled(NotRendered, {
+  name: 'MuiDataGrid',
+  slot: 'SortButton'
+})({
+  transition: vars.transition(['opacity'], {
+    duration: vars.transitions.duration.short,
+    easing: vars.transitions.easing.easeInOut
+  })
+});
+function getIcon(icons, direction, className, sortingOrder) {
+  let Icon;
+  const iconProps = {};
+  if (direction === 'asc') {
+    Icon = icons.columnSortedAscendingIcon;
+  } else if (direction === 'desc') {
+    Icon = icons.columnSortedDescendingIcon;
+  } else {
+    Icon = icons.columnUnsortedIcon;
+    iconProps.sortingOrder = sortingOrder;
+  }
+  return Icon ? /*#__PURE__*/_jsx(Icon, _extends({
+    fontSize: "small",
+    className: className
+  }, iconProps)) : null;
+}
+function GridColumnSortButton(props) {
+  const {
+      direction,
+      index,
+      sortingOrder,
+      disabled,
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const ownerState = _extends({}, props, {
+    classes: rootProps.classes
+  });
+  const classes = useUtilityClasses(ownerState);
+  const iconElement = getIcon(rootProps.slots, direction, classes.icon, sortingOrder);
+  if (!iconElement) {
+    return null;
+  }
+  const iconButton = /*#__PURE__*/_jsx(GridColumnSortButtonRoot, _extends({
+    as: rootProps.slots.baseIconButton,
+    ownerState: ownerState,
+    "aria-label": apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
+    size: "small",
+    disabled: disabled,
+    className: clsx(classes.root, className)
+  }, rootProps.slotProps?.baseIconButton, other, {
+    children: iconElement
+  }));
+  return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
+    title: apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
+    enterDelay: 1000
+  }, rootProps.slotProps?.baseTooltip, {
+    children: /*#__PURE__*/_jsxs("span", {
+      children: [index != null && /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
+        badgeContent: index,
+        color: "default",
+        overlap: "circular",
+        children: iconButton
+      }), index == null && iconButton]
+    })
+  }));
+}
+process.env.NODE_ENV !== "production" ? GridColumnSortButton.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  direction: PropTypes.oneOf(['asc', 'desc']),
+  disabled: PropTypes.bool,
+  field: PropTypes.string.isRequired,
+  index: PropTypes.number,
+  onClick: PropTypes.func,
+  sortingOrder: PropTypes.arrayOf(PropTypes.oneOf(['asc', 'desc'])).isRequired
+} : void 0;
+export { GridColumnSortButton };

package/components/GridColumnUnsortedIcon.d.mts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { GridBaseIconProps } from "../models/gridSlotsComponentsProps.mjs";
+import type { GridSortDirection } from "../models/gridSortModel.mjs";
+export interface GridColumnUnsortedIconProps extends GridBaseIconProps {
+  sortingOrder: GridSortDirection[];
+}
+export declare const GridColumnUnsortedIcon: React.NamedExoticComponent<GridColumnUnsortedIconProps>;