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

package/hooks/features/columnHeaders/useGridColumnHeaders.mjs

@@ -0,0 +1,316 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
+import { computeOffsetLeft } from '@mui/x-virtualizer';
+import { useGridSelector } from "../../utils/index.mjs";
+import { useGridRootProps } from "../../utils/useGridRootProps.mjs";
+import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.mjs";
+import { useGridEvent } from "../../utils/useGridEvent.mjs";
+import { GridColumnHeaderItem } from "../../../components/columnHeaders/GridColumnHeaderItem.mjs";
+import { gridColumnsTotalWidthSelector, gridGroupHeaderHeightSelector, gridHasFillerSelector, gridHeaderHeightSelector, gridVerticalScrollbarWidthSelector } from "../dimensions/gridDimensionsSelectors.mjs";
+import { gridRenderContextColumnsSelector } from "../virtualization/index.mjs";
+import { GridColumnGroupHeader } from "../../../components/columnHeaders/GridColumnGroupHeader.mjs";
+import { gridColumnPositionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnLookupSelector } from "../columns/index.mjs";
+import { gridColumnGroupsUnwrappedModelSelector } from "../columnGrouping/gridColumnGroupsSelector.mjs";
+import { GridScrollbarFillerCell as ScrollbarFiller } from "../../../components/GridScrollbarFillerCell.mjs";
+import { getPinnedCellOffset } from "../../../internals/utils/getPinnedCellOffset.mjs";
+import { GridColumnHeaderSeparatorSides } from "../../../components/columnHeaders/GridColumnHeaderSeparator.mjs";
+import { gridClasses } from "../../../constants/gridClasses.mjs";
+import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from "../../../utils/cellBorderUtils.mjs";
+import { PinnedColumnPosition } from "../../../internals/constants.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const GridColumnHeaderRow = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnHeaderRow'
+})({
+  display: 'flex'
+});
+export const useGridColumnHeaders = props => {
+  const {
+    visibleColumns,
+    sortColumnLookup,
+    filterColumnLookup,
+    columnHeaderTabIndexState,
+    columnGroupHeaderTabIndexState,
+    columnHeaderFocus,
+    columnGroupHeaderFocus,
+    headerGroupingMaxDepth,
+    columnMenuState,
+    columnVisibility,
+    columnGroupsHeaderStructure,
+    hasOtherElementInTabSequence
+  } = props;
+  const [dragCol, setDragCol] = React.useState('');
+  const [resizeCol, setResizeCol] = React.useState('');
+  const apiRef = useGridPrivateApiContext();
+  const rootProps = useGridRootProps();
+  const columnGroupsModel = useGridSelector(apiRef, gridColumnGroupsUnwrappedModelSelector);
+  const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
+  const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
+  const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
+  const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector);
+  const offsetLeft = computeOffsetLeft(columnPositions, renderContext, pinnedColumns.left.length);
+  const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
+  const gridHasFiller = useGridSelector(apiRef, gridHasFillerSelector);
+  const headerHeight = useGridSelector(apiRef, gridHeaderHeightSelector);
+  const groupHeaderHeight = useGridSelector(apiRef, gridGroupHeaderHeightSelector);
+  const scrollbarWidth = useGridSelector(apiRef, gridVerticalScrollbarWidthSelector);
+  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(''), []);
+  const leftRenderContext = React.useMemo(() => {
+    return pinnedColumns.left.length ? {
+      firstColumnIndex: 0,
+      lastColumnIndex: pinnedColumns.left.length
+    } : null;
+  }, [pinnedColumns.left.length]);
+  const rightRenderContext = React.useMemo(() => {
+    return pinnedColumns.right.length ? {
+      firstColumnIndex: visibleColumns.length - pinnedColumns.right.length,
+      lastColumnIndex: visibleColumns.length
+    } : null;
+  }, [pinnedColumns.right.length, visibleColumns.length]);
+  useGridEvent(apiRef, 'columnResizeStart', handleColumnResizeStart);
+  useGridEvent(apiRef, 'columnResizeStop', handleColumnResizeStop);
+  useGridEvent(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
+  useGridEvent(apiRef, 'columnHeaderDragEndNative', handleColumnReorderStop);
+
+  // Helper for computation common between getColumnHeaders and getColumnGroupHeaders
+  const getColumnsToRender = params => {
+    const {
+      renderContext: currentContext = renderContext
+    } = params || {};
+    const firstColumnToRender = currentContext.firstColumnIndex;
+    // HACK: renderContext ins't always synchronized, this should be handled properly.
+    const lastColumnToRender = Math.min(currentContext.lastColumnIndex, visibleColumns.length);
+    const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
+    return {
+      renderedColumns,
+      firstColumnToRender,
+      lastColumnToRender
+    };
+  };
+  const getFillers = (params, children, leftOverflow, borderBottom = false) => {
+    const isPinnedRight = params?.position === PinnedColumnPosition.RIGHT;
+    const isNotPinned = params?.position === undefined;
+    const hasScrollbarFiller = pinnedColumns.right.length > 0 && isPinnedRight || pinnedColumns.right.length === 0 && isNotPinned;
+    const leftOffsetWidth = offsetLeft - leftOverflow;
+    return /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [isNotPinned && /*#__PURE__*/_jsx("div", {
+        role: "presentation",
+        style: {
+          width: leftOffsetWidth
+        }
+      }), children, isNotPinned && /*#__PURE__*/_jsx("div", {
+        role: "presentation",
+        className: clsx(gridClasses.filler, borderBottom && gridClasses['filler--borderBottom'])
+      }), hasScrollbarFiller && /*#__PURE__*/_jsx(ScrollbarFiller, {
+        pinnedRight: isPinnedRight
+      })]
+    });
+  };
+  if (process.env.NODE_ENV !== "production") getFillers.displayName = "getFillers";
+  const getColumnHeaders = (params, other = {}) => {
+    const {
+      renderedColumns,
+      firstColumnToRender
+    } = getColumnsToRender(params);
+    const columns = [];
+    for (let i = 0; i < renderedColumns.length; i += 1) {
+      const colDef = renderedColumns[i];
+      const columnIndex = firstColumnToRender + i;
+      const isFirstColumn = columnIndex === 0;
+      const tabIndex = columnHeaderTabIndexState !== null && columnHeaderTabIndexState.field === colDef.field || isFirstColumn && !hasOtherElementInTabSequence ? 0 : -1;
+      const hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === colDef.field;
+      const open = columnMenuState.open && columnMenuState.field === colDef.field;
+      const pinnedPosition = params?.position;
+      const pinnedOffset = getPinnedCellOffset(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, columnsTotalWidth, scrollbarWidth);
+      const siblingWithBorderingSeparator = pinnedPosition === PinnedColumnPosition.RIGHT ? renderedColumns[i - 1] : renderedColumns[i + 1];
+      const isSiblingFocused = siblingWithBorderingSeparator ? columnHeaderFocus !== null && columnHeaderFocus.field === siblingWithBorderingSeparator.field : false;
+      const indexInSection = i;
+      const sectionLength = renderedColumns.length;
+      const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection, rootProps.showColumnVerticalBorder, rootProps.pinnedColumnsSectionSeparator);
+      const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showColumnVerticalBorder, gridHasFiller, rootProps.pinnedColumnsSectionSeparator);
+      columns.push(/*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[colDef.field], {
+        columnMenuOpen: open,
+        filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
+        headerHeight: headerHeight,
+        isDragging: colDef.field === dragCol,
+        colDef: colDef,
+        colIndex: columnIndex,
+        isResizing: resizeCol === colDef.field,
+        isLast: columnIndex === columnPositions.length - 1,
+        hasFocus: hasFocus,
+        tabIndex: tabIndex,
+        pinnedPosition: pinnedPosition,
+        pinnedOffset: pinnedOffset,
+        isSiblingFocused: isSiblingFocused,
+        showLeftBorder: showLeftBorder,
+        showRightBorder: showRightBorder
+      }, other), colDef.field));
+    }
+    return getFillers(params, columns, 0);
+  };
+  const getColumnHeadersRow = () => {
+    return /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
+      role: "row",
+      "aria-rowindex": headerGroupingMaxDepth + 1,
+      ownerState: rootProps,
+      className: gridClasses['row--borderBottom'],
+      style: {
+        height: headerHeight
+      },
+      children: [leftRenderContext && getColumnHeaders({
+        position: PinnedColumnPosition.LEFT,
+        renderContext: leftRenderContext
+      }, {
+        disableReorder: true
+      }), getColumnHeaders({
+        renderContext
+      }), rightRenderContext && getColumnHeaders({
+        position: PinnedColumnPosition.RIGHT,
+        renderContext: rightRenderContext
+      }, {
+        disableReorder: true,
+        separatorSide: GridColumnHeaderSeparatorSides.Left
+      })]
+    });
+  };
+  if (process.env.NODE_ENV !== "production") getColumnHeadersRow.displayName = "getColumnHeadersRow";
+  const getColumnGroupHeaders = ({
+    depth,
+    params
+  }) => {
+    const columnsToRender = getColumnsToRender(params);
+    if (columnsToRender.renderedColumns.length === 0) {
+      return null;
+    }
+    const {
+      firstColumnToRender,
+      lastColumnToRender
+    } = columnsToRender;
+    const rowStructure = columnGroupsHeaderStructure[depth];
+    const firstColumnFieldToRender = visibleColumns[firstColumnToRender].field;
+    const firstGroupToRender = columnGroupsModel[firstColumnFieldToRender]?.[depth] ?? null;
+    const firstGroupIndex = rowStructure.findIndex(({
+      groupId,
+      columnFields
+    }) => groupId === firstGroupToRender && columnFields.includes(firstColumnFieldToRender));
+    const lastColumnFieldToRender = visibleColumns[lastColumnToRender - 1].field;
+    const lastGroupToRender = columnGroupsModel[lastColumnFieldToRender]?.[depth] ?? null;
+    const lastGroupIndex = rowStructure.findIndex(({
+      groupId,
+      columnFields
+    }) => groupId === lastGroupToRender && columnFields.includes(lastColumnFieldToRender));
+    const visibleColumnGroupHeader = rowStructure.slice(firstGroupIndex, lastGroupIndex + 1).map(groupStructure => {
+      return _extends({}, groupStructure, {
+        columnFields: groupStructure.columnFields.filter(field => columnVisibility[field] !== false)
+      });
+    }).filter(groupStructure => groupStructure.columnFields.length > 0);
+    const firstVisibleColumnIndex = visibleColumnGroupHeader[0].columnFields.indexOf(firstColumnFieldToRender);
+    const hiddenGroupColumns = visibleColumnGroupHeader[0].columnFields.slice(0, firstVisibleColumnIndex);
+    const leftOverflow = hiddenGroupColumns.reduce((acc, field) => {
+      const column = columnsLookup[field];
+      return acc + (column.computedWidth ?? 0);
+    }, 0);
+    let columnIndex = firstColumnToRender;
+    const children = visibleColumnGroupHeader.map(({
+      groupId,
+      columnFields
+    }, index) => {
+      const hasFocus = columnGroupHeaderFocus !== null && columnGroupHeaderFocus.depth === depth && columnFields.includes(columnGroupHeaderFocus.field);
+      const tabIndex = columnGroupHeaderTabIndexState !== null && columnGroupHeaderTabIndexState.depth === depth && columnFields.includes(columnGroupHeaderTabIndexState.field) ? 0 : -1;
+      const headerInfo = {
+        groupId,
+        width: columnFields.reduce((acc, field) => acc + columnsLookup[field].computedWidth, 0),
+        fields: columnFields,
+        colIndex: columnIndex,
+        hasFocus,
+        tabIndex
+      };
+      const pinnedPosition = params.position;
+      const pinnedOffset = getPinnedCellOffset(pinnedPosition, headerInfo.width, columnIndex, columnPositions, columnsTotalWidth, scrollbarWidth);
+      columnIndex += columnFields.length;
+      let indexInSection = index;
+      if (pinnedPosition === PinnedColumnPosition.LEFT) {
+        // Group headers can expand to multiple columns, we need to adjust the index
+        indexInSection = columnIndex - 1;
+      }
+      return /*#__PURE__*/_jsx(GridColumnGroupHeader, {
+        groupId: groupId,
+        width: headerInfo.width,
+        fields: headerInfo.fields,
+        colIndex: headerInfo.colIndex,
+        depth: depth,
+        isLastColumn: index === visibleColumnGroupHeader.length - 1,
+        maxDepth: headerGroupingMaxDepth,
+        height: groupHeaderHeight,
+        hasFocus: hasFocus,
+        tabIndex: tabIndex,
+        pinnedPosition: pinnedPosition,
+        pinnedOffset: pinnedOffset,
+        showLeftBorder: shouldCellShowLeftBorder(pinnedPosition, indexInSection, rootProps.showColumnVerticalBorder, rootProps.pinnedColumnsSectionSeparator),
+        showRightBorder: shouldCellShowRightBorder(pinnedPosition, indexInSection, visibleColumnGroupHeader.length, rootProps.showColumnVerticalBorder, gridHasFiller, rootProps.pinnedColumnsSectionSeparator)
+      }, index);
+    });
+    return getFillers(params, children, leftOverflow);
+  };
+  const getColumnGroupHeadersRows = () => {
+    if (headerGroupingMaxDepth === 0) {
+      return null;
+    }
+    const headerRows = [];
+    for (let depth = 0; depth < headerGroupingMaxDepth; depth += 1) {
+      headerRows.push(/*#__PURE__*/_jsxs(GridColumnHeaderRow, {
+        role: "row",
+        "aria-rowindex": depth + 1,
+        ownerState: rootProps,
+        style: {
+          height: groupHeaderHeight
+        },
+        children: [leftRenderContext && getColumnGroupHeaders({
+          depth,
+          params: {
+            position: PinnedColumnPosition.LEFT,
+            renderContext: leftRenderContext,
+            maxLastColumn: leftRenderContext.lastColumnIndex
+          }
+        }), getColumnGroupHeaders({
+          depth,
+          params: {
+            renderContext
+          }
+        }), rightRenderContext && getColumnGroupHeaders({
+          depth,
+          params: {
+            position: PinnedColumnPosition.RIGHT,
+            renderContext: rightRenderContext,
+            maxLastColumn: rightRenderContext.lastColumnIndex
+          }
+        })]
+      }, depth));
+    }
+    return headerRows;
+  };
+  return {
+    renderContext,
+    leftRenderContext,
+    rightRenderContext,
+    pinnedColumns,
+    visibleColumns,
+    columnPositions,
+    getFillers,
+    getColumnHeadersRow,
+    getColumnsToRender,
+    getColumnGroupHeadersRows,
+    getPinnedCellOffset,
+    isDragging: !!dragCol,
+    getInnerProps: () => ({
+      role: 'rowgroup'
+    })
+  };
+};

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

@@ -0,0 +1,2 @@
+import type { GridStateCommunity } from "../../../models/gridStateCommunity.mjs";
+export declare const gridColumnMenuSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, import("@mui/x-data-grid").GridColumnMenuState>;

package/hooks/features/columnMenu/columnMenuSelector.mjs

@@ -0,0 +1,2 @@
+import { createRootSelector } from "../../../utils/createSelector.mjs";
+export const gridColumnMenuSelector = createRootSelector(state => state.columnMenu);

package/hooks/features/columnMenu/getColumnMenuItemKeys.d.mts

@@ -0,0 +1,17 @@
+import type { RefObject } from '@mui/x-internals/types';
+import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.mjs";
+import type { GridColDef } from "../../../models/colDef/gridColDef.mjs";
+import type { GridColumnMenuSlotProps } from "./columnMenuInterfaces.mjs";
+export interface GetColumnMenuItemKeysParams {
+  apiRef: RefObject<GridPrivateApiCommunity>;
+  colDef: GridColDef;
+  defaultSlots: Record<string, any>;
+  defaultSlotProps: Record<string, GridColumnMenuSlotProps>;
+  slots?: Record<string, any>;
+  slotProps?: Record<string, GridColumnMenuSlotProps>;
+}
+/**
+ * Returns the list of column menu item keys (sorted by `displayOrder`) that should be rendered for a given column.
+ * This is shared between the column header (to know if menu is empty) and the menu itself (to render items).
+ */
+export declare function getColumnMenuItemKeys(params: GetColumnMenuItemKeysParams): string[];

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

@@ -0,0 +1,2 @@
+export * from "./columnMenuInterfaces.mjs";
+export * from "./columnMenuSelector.mjs";

package/hooks/features/columnMenu/index.mjs

@@ -0,0 +1,2 @@
+export * from "./columnMenuInterfaces.mjs";
+export * from "./columnMenuSelector.mjs";

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

@@ -0,0 +1,9 @@
+import type { RefObject } from '@mui/x-internals/types';
+import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.mjs";
+import type { GridStateInitializer } from "../../utils/useGridInitializeState.mjs";
+export declare const columnMenuStateInitializer: GridStateInitializer;
+/**
+ * @requires useGridColumnResize (event)
+ * @requires useGridInfiniteLoader (event)
+ */
+export declare const useGridColumnMenu: (apiRef: RefObject<GridPrivateApiCommunity>) => void;

package/hooks/features/columnMenu/useGridColumnMenu.mjs

@@ -0,0 +1,116 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridLogger, useGridApiMethod, useGridEvent } from "../../utils/index.mjs";
+import { gridColumnMenuSelector } from "./columnMenuSelector.mjs";
+import { gridColumnLookupSelector, gridColumnVisibilityModelSelector, gridColumnFieldsSelector } from "../columns/gridColumnsSelector.mjs";
+export const columnMenuStateInitializer = state => _extends({}, state, {
+  columnMenu: {
+    open: false
+  }
+});
+
+/**
+ * @requires useGridColumnResize (event)
+ * @requires useGridInfiniteLoader (event)
+ */
+export const useGridColumnMenu = apiRef => {
+  const logger = useGridLogger(apiRef, 'useGridColumnMenu');
+  const subscriptionRefs = React.useRef({});
+  const unsubscribeFromScrollChange = React.useCallback(() => {
+    subscriptionRefs.current.wheel?.();
+    subscriptionRefs.current.touchMove?.();
+  }, []);
+  const subscribeToScrollChange = React.useCallback(() => {
+    unsubscribeFromScrollChange();
+    subscriptionRefs.current.wheel = apiRef.current.subscribeEvent('virtualScrollerWheel', apiRef.current.hideColumnMenu);
+    subscriptionRefs.current.touchMove = apiRef.current.subscribeEvent('virtualScrollerTouchMove', apiRef.current.hideColumnMenu);
+  }, [apiRef, unsubscribeFromScrollChange]);
+
+  /**
+   * API METHODS
+   */
+  const showColumnMenu = React.useCallback(field => {
+    const columnMenuState = gridColumnMenuSelector(apiRef);
+    const newState = {
+      open: true,
+      field
+    };
+    const shouldUpdate = newState.open !== columnMenuState.open || newState.field !== columnMenuState.field;
+    if (shouldUpdate) {
+      apiRef.current.setState(state => {
+        if (state.columnMenu.open && state.columnMenu.field === field) {
+          return state;
+        }
+        logger.debug('Opening Column Menu');
+        subscribeToScrollChange();
+        return _extends({}, state, {
+          columnMenu: {
+            open: true,
+            field
+          }
+        });
+      });
+      apiRef.current.hidePreferences();
+    }
+  }, [apiRef, logger, subscribeToScrollChange]);
+  const hideColumnMenu = React.useCallback(() => {
+    const columnMenuState = gridColumnMenuSelector(apiRef);
+    if (columnMenuState.field) {
+      const columnLookup = gridColumnLookupSelector(apiRef);
+      const columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);
+      const orderedFields = gridColumnFieldsSelector(apiRef);
+      let fieldToFocus = columnMenuState.field;
+
+      // If the column was removed from the grid, we need to find the closest visible field
+      if (!columnLookup[fieldToFocus]) {
+        fieldToFocus = orderedFields[0];
+      }
+
+      // If the field to focus is hidden, we need to find the closest visible field
+      if (columnVisibilityModel[fieldToFocus] === false) {
+        // contains visible column fields + the field that was just hidden
+        const visibleOrderedFields = orderedFields.filter(field => {
+          if (field === fieldToFocus) {
+            return true;
+          }
+          return columnVisibilityModel[field] !== false;
+        });
+        const fieldIndex = visibleOrderedFields.indexOf(fieldToFocus);
+        fieldToFocus = visibleOrderedFields[fieldIndex + 1] || visibleOrderedFields[fieldIndex - 1];
+      }
+      apiRef.current.setColumnHeaderFocus(fieldToFocus);
+    }
+    const newState = {
+      open: false,
+      field: undefined
+    };
+    const shouldUpdate = newState.open !== columnMenuState.open || newState.field !== columnMenuState.field;
+    if (shouldUpdate) {
+      apiRef.current.setState(state => {
+        logger.debug('Hiding Column Menu');
+        unsubscribeFromScrollChange();
+        return _extends({}, state, {
+          columnMenu: newState
+        });
+      });
+    }
+  }, [apiRef, logger, unsubscribeFromScrollChange]);
+  const toggleColumnMenu = React.useCallback(field => {
+    logger.debug('Toggle Column Menu');
+    const columnMenu = gridColumnMenuSelector(apiRef);
+    if (!columnMenu.open || columnMenu.field !== field) {
+      showColumnMenu(field);
+    } else {
+      hideColumnMenu();
+    }
+  }, [apiRef, logger, showColumnMenu, hideColumnMenu]);
+  const columnMenuApi = {
+    showColumnMenu,
+    hideColumnMenu,
+    toggleColumnMenu
+  };
+  useGridApiMethod(apiRef, columnMenuApi, 'public');
+  useGridEvent(apiRef, 'columnResizeStart', hideColumnMenu);
+};

package/hooks/features/columnMenu/useGridColumnMenuSlots.d.mts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { GridColumnMenuRootProps } from "./columnMenuInterfaces.mjs";
+import type { GridColDef } from "../../../models/colDef/gridColDef.mjs";
+interface UseGridColumnMenuSlotsProps extends GridColumnMenuRootProps {
+  colDef: GridColDef;
+  hideMenu: (event: React.SyntheticEvent) => void;
+  addDividers?: boolean;
+}
+type UseGridColumnMenuSlotsResponse = Array<[React.JSXElementConstructor<any>, {
+  [key: string]: any;
+}]>;
+declare const useGridColumnMenuSlots: (props: UseGridColumnMenuSlotsProps) => UseGridColumnMenuSlotsResponse;
+export { useGridColumnMenuSlots };

package/hooks/features/columnMenu/useGridColumnMenuSlots.mjs

@@ -0,0 +1,54 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["displayOrder"];
+import * as React from 'react';
+import { useGridRootProps } from "../../utils/useGridRootProps.mjs";
+import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.mjs";
+import { getColumnMenuItemKeys } from "./getColumnMenuItemKeys.mjs";
+const useGridColumnMenuSlots = props => {
+  const apiRef = useGridPrivateApiContext();
+  const rootProps = useGridRootProps();
+  const {
+    defaultSlots,
+    defaultSlotProps,
+    slots = {},
+    slotProps = {},
+    hideMenu,
+    colDef,
+    addDividers = true
+  } = props;
+  const processedComponents = React.useMemo(() => _extends({}, defaultSlots, slots), [defaultSlots, slots]);
+  const processedSlotProps = React.useMemo(() => {
+    if (!slotProps || Object.keys(slotProps).length === 0) {
+      return defaultSlotProps;
+    }
+    const mergedProps = _extends({}, slotProps);
+    Object.entries(defaultSlotProps).forEach(([key, currentSlotProps]) => {
+      mergedProps[key] = _extends({}, currentSlotProps, slotProps[key] || {});
+    });
+    return mergedProps;
+  }, [defaultSlotProps, slotProps]);
+  return React.useMemo(() => {
+    const sortedKeys = getColumnMenuItemKeys({
+      apiRef,
+      colDef,
+      defaultSlots,
+      defaultSlotProps,
+      slots,
+      slotProps
+    });
+    return sortedKeys.reduce((acc, key, index) => {
+      let itemProps = {
+        colDef,
+        onClick: hideMenu
+      };
+      const processedComponentProps = processedSlotProps[key];
+      if (processedComponentProps) {
+        const customProps = _objectWithoutPropertiesLoose(processedComponentProps, _excluded);
+        itemProps = _extends({}, itemProps, customProps);
+      }
+      return addDividers && index !== sortedKeys.length - 1 ? [...acc, [processedComponents[key], itemProps], [rootProps.slots.baseDivider, {}]] : [...acc, [processedComponents[key], itemProps]];
+    }, []);
+  }, [addDividers, apiRef, colDef, defaultSlotProps, defaultSlots, hideMenu, processedComponents, processedSlotProps, slotProps, slots, rootProps.slots.baseDivider]);
+};
+export { useGridColumnMenuSlots };

package/hooks/features/columnResize/columnResizeSelector.d.mts

@@ -0,0 +1,5 @@
+import type { GridStateCommunity } from "../../../models/gridStateCommunity.mjs";
+export declare const gridColumnResizeSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, import("@mui/x-data-grid").GridColumnResizeState>;
+export declare const gridResizingColumnFieldSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => string;

package/hooks/features/columnResize/columnResizeSelector.mjs

@@ -0,0 +1,3 @@
+import { createRootSelector, createSelector } from "../../../utils/createSelector.mjs";
+export const gridColumnResizeSelector = createRootSelector(state => state.columnResize);
+export const gridResizingColumnFieldSelector = createSelector(gridColumnResizeSelector, columnResize => columnResize.resizingColumnField);

package/hooks/features/columnResize/gridColumnResizeApi.d.mts

@@ -0,0 +1,57 @@
+import type { GridColDef } from "../../../models/colDef/gridColDef.mjs";
+export declare const DEFAULT_GRID_AUTOSIZE_OPTIONS: {
+  includeHeaders: boolean;
+  includeHeaderFilters: boolean;
+  includeOutliers: boolean;
+  outliersFactor: number;
+  expand: boolean;
+  disableColumnVirtualization: boolean;
+};
+export type GridAutosizeOptions = {
+  /**
+   * The columns to autosize. By default, applies to all columns.
+   */
+  columns?: GridColDef['field'][];
+  /**
+   * If true, include the header widths in the calculation.
+   * @default false
+   */
+  includeHeaders?: boolean;
+  /**
+   * If true, include header filter widths in the calculation.
+   * Only applies when header filters are enabled.
+   * @default false
+   */
+  includeHeaderFilters?: boolean;
+  /**
+   * If true, width outliers will be ignored.
+   * @default false
+   */
+  includeOutliers?: boolean;
+  /**
+   * The IQR factor range to detect outliers.
+   * @default 1.5
+   */
+  outliersFactor?: number;
+  /**
+   * If the total width is less than the available width, expand columns to fill it.
+   * @default false
+   */
+  expand?: boolean;
+  /**
+   * If false, column virtualization is not disabled while resizing.
+   * @default true
+   */
+  disableColumnVirtualization?: boolean;
+};
+/**
+ * The Resize API interface that is available in the grid `apiRef`.
+ */
+export interface GridColumnResizeApi {
+  /**
+   * Auto-size the columns of the grid based on the cells' content and the space available.
+   * @param {GridAutosizeOptions} options The autosizing options
+   * @returns {Promise} A promise that resolves when autosizing is completed
+   */
+  autosizeColumns: (options?: GridAutosizeOptions) => Promise<void>;
+}

package/hooks/features/columnResize/index.d.mts

@@ -0,0 +1,3 @@
+export * from "./columnResizeSelector.mjs";
+export * from "./columnResizeState.mjs";
+export * from "./gridColumnResizeApi.mjs";

package/hooks/features/columnResize/index.mjs

@@ -0,0 +1,3 @@
+export * from "./columnResizeSelector.mjs";
+export * from "./columnResizeState.mjs";
+export * from "./gridColumnResizeApi.mjs";

package/hooks/features/columnResize/useGridColumnResize.d.mts

@@ -0,0 +1,10 @@
+import type { RefObject } from '@mui/x-internals/types';
+import type { GridStateInitializer } from "../../utils/useGridInitializeState.mjs";
+import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.mjs";
+import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.mjs";
+export declare const columnResizeStateInitializer: GridStateInitializer;
+/**
+ * @requires useGridColumns (method, event)
+ * TODO: improve experience for last column
+ */
+export declare const useGridColumnResize: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "autosizeOptions" | "autosizeOnMount" | "disableAutosize" | "onColumnResize" | "onColumnWidthChange" | "disableVirtualization">) => void;