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

package/components/columnSelection/GridHeaderCheckbox.mjs

@@ -0,0 +1,178 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["field", "colDef"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import composeClasses from '@mui/utils/composeClasses';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { isMultipleRowSelectionEnabled } from "../../hooks/features/rowSelection/utils.mjs";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.mjs";
+import { gridTabIndexColumnHeaderSelector } from "../../hooks/features/focus/gridFocusStateSelector.mjs";
+import { gridRowSelectionStateSelector } from "../../hooks/features/rowSelection/gridRowSelectionSelector.mjs";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.mjs";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.mjs";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
+import { gridExpandedSortedRowIdsSelector } from "../../hooks/features/filter/gridFilterSelector.mjs";
+import { gridPaginatedVisibleSortedGridRowIdsSelector } from "../../hooks/features/pagination/gridPaginationSelector.mjs";
+import { createRowSelectionManager } from "../../models/gridRowSelectionManager.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['checkboxInput']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
+  const other = _objectWithoutPropertiesLoose(props, _excluded);
+  const [, forceUpdate] = React.useState(false);
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  const tabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
+  const selection = useGridSelector(apiRef, gridRowSelectionStateSelector);
+  const visibleRowIds = useGridSelector(apiRef, gridExpandedSortedRowIdsSelector);
+  const paginatedVisibleRowIds = useGridSelector(apiRef, gridPaginatedVisibleSortedGridRowIdsSelector);
+  const filteredSelection = React.useMemo(() => {
+    const isRowSelectable = rootProps.isRowSelectable;
+    if (typeof isRowSelectable !== 'function') {
+      return selection;
+    }
+    if (selection.type === 'exclude') {
+      return selection;
+    }
+
+    // selection.type === 'include'
+    const selectionModel = {
+      type: 'include',
+      ids: new Set()
+    };
+    for (const id of selection.ids) {
+      if (rootProps.keepNonExistentRowsSelected) {
+        selectionModel.ids.add(id);
+      }
+      // The row might have been deleted
+      if (!apiRef.current.getRow(id)) {
+        continue;
+      }
+      if (isRowSelectable(apiRef.current.getRowParams(id))) {
+        selectionModel.ids.add(id);
+      }
+    }
+    return selectionModel;
+  }, [apiRef, rootProps.isRowSelectable, rootProps.keepNonExistentRowsSelected, selection]);
+
+  // All the rows that could be selected / unselected by toggling this checkbox
+  const selectionCandidates = React.useMemo(() => {
+    const rowIds = !rootProps.pagination || !rootProps.checkboxSelectionVisibleOnly || rootProps.paginationMode === 'server' ? visibleRowIds : paginatedVisibleRowIds;
+
+    // Convert to a Set to make O(1) checking if a row exists or not
+    const candidates = new Set();
+    for (let i = 0; i < rowIds.length; i += 1) {
+      const id = rowIds[i];
+      if (!apiRef.current.getRow(id)) {
+        // The row could have been removed
+        continue;
+      }
+      if (apiRef.current.isRowSelectable(id)) {
+        candidates.add(id);
+      }
+    }
+    return candidates;
+  }, [apiRef, rootProps.pagination, rootProps.paginationMode, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
+
+  // Amount of rows selected and that are visible in the current page
+  const currentSelectionSize = React.useMemo(() => {
+    const selectionManager = createRowSelectionManager(filteredSelection);
+    let size = 0;
+    for (const id of selectionCandidates) {
+      if (selectionManager.has(id)) {
+        size += 1;
+      }
+    }
+    return size;
+  }, [filteredSelection, selectionCandidates]);
+  const isIndeterminate = React.useMemo(() => {
+    if (currentSelectionSize === 0) {
+      return false;
+    }
+    const selectionManager = createRowSelectionManager(filteredSelection);
+    for (const rowId of selectionCandidates) {
+      if (!selectionManager.has(rowId)) {
+        return true;
+      }
+    }
+    return false;
+  }, [currentSelectionSize, filteredSelection, selectionCandidates]);
+  const isChecked = currentSelectionSize > 0;
+  const handleChange = event => {
+    const params = {
+      value: event.target.checked
+    };
+    apiRef.current.publishEvent('headerSelectionCheckboxChange', params);
+  };
+  const multipleSelectionEnabled = isMultipleRowSelectionEnabled(rootProps);
+  const tabIndex = tabIndexState !== null && tabIndexState.field === props.field && multipleSelectionEnabled ? 0 : -1;
+  useEnhancedEffect(() => {
+    const element = apiRef.current.getColumnHeaderElement(props.field);
+    if (tabIndex === 0 && element && multipleSelectionEnabled) {
+      element.tabIndex = -1;
+    }
+  }, [tabIndex, apiRef, props.field, multipleSelectionEnabled]);
+  const handleKeyDown = React.useCallback(event => {
+    if (event.key === ' ') {
+      // imperative toggle the checkbox because Space is disable by some preventDefault
+      apiRef.current.publishEvent('headerSelectionCheckboxChange', {
+        value: !isChecked
+      });
+    }
+  }, [apiRef, isChecked]);
+  const handleSelectionChange = React.useCallback(() => {
+    forceUpdate(p => !p);
+  }, []);
+  React.useEffect(() => {
+    return apiRef.current.subscribeEvent('rowSelectionChange', handleSelectionChange);
+  }, [apiRef, handleSelectionChange]);
+  const label = apiRef.current.getLocaleText(isChecked && !isIndeterminate ? 'checkboxSelectionUnselectAllRows' : 'checkboxSelectionSelectAllRows');
+  return /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
+    indeterminate: isIndeterminate,
+    checked: isChecked && !isIndeterminate,
+    onChange: handleChange,
+    className: classes.root,
+    slotProps: {
+      htmlInput: {
+        'aria-label': label,
+        name: 'select_all_rows'
+      }
+    },
+    tabIndex: tabIndex,
+    onKeyDown: handleKeyDown,
+    disabled: !multipleSelectionEnabled
+  }, rootProps.slotProps?.baseCheckbox, other, {
+    ref: ref
+  }));
+});
+if (process.env.NODE_ENV !== "production") GridHeaderCheckbox.displayName = "GridHeaderCheckbox";
+process.env.NODE_ENV !== "production" ? GridHeaderCheckbox.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The column of the current header component.
+   */
+  colDef: PropTypes.object.isRequired,
+  /**
+   * The column field of the column that triggered the event
+   */
+  field: PropTypes.string.isRequired
+} : void 0;
+export { GridHeaderCheckbox };

package/components/columnSelection/index.d.mts

@@ -0,0 +1,2 @@
+export * from "./GridCellCheckboxRenderer.mjs";
+export * from "./GridHeaderCheckbox.mjs";

package/components/columnSelection/index.mjs

@@ -0,0 +1,2 @@
+export * from "./GridCellCheckboxRenderer.mjs";
+export * from "./GridHeaderCheckbox.mjs";

package/components/columnsManagement/GridColumnsManagement.d.mts

@@ -0,0 +1,50 @@
+import type { TextFieldProps } from "../../models/gridBaseSlots.mjs";
+import type { DataGridProcessedProps } from "../../models/props/DataGridProps.mjs";
+import type { GridColDef } from "../../models/colDef/gridColDef.mjs";
+export interface GridColumnsManagementProps {
+  sort?: 'asc' | 'desc';
+  searchPredicate?: (column: GridColDef, searchValue: string) => boolean;
+  searchInputProps?: Partial<TextFieldProps>;
+  /**
+   * The milliseconds delay to wait after a keystroke before triggering filtering in the columns menu.
+   * @default 150
+   */
+  searchDebounceMs?: DataGridProcessedProps['columnFilterDebounceMs'];
+  /**
+   * If `true`, the column search field will be focused automatically.
+   * If `false`, the first column switch input will be focused automatically.
+   * This helps to avoid input keyboard panel to popup automatically on touch devices.
+   * @default true
+   */
+  autoFocusSearchField?: boolean;
+  /**
+   * If `true`, the `Show/Hide all` toggle checkbox will not be displayed.
+   * @default false
+   */
+  disableShowHideToggle?: boolean;
+  /**
+   * If `true`, the `Reset` button will not be disabled
+   * @default false
+   */
+  disableResetButton?: boolean;
+  /**
+   * Changes the behavior of the `Show/Hide All` toggle when the search field is used:
+   * - `all`: Will toggle all columns.
+   * - `filteredOnly`: Will only toggle columns that match the search criteria.
+   * @default 'all'
+   */
+  toggleAllMode?: 'all' | 'filteredOnly';
+  /**
+   * Returns the list of togglable columns.
+   * If used, only those columns will be displayed in the panel
+   * which are passed as the return value of the function.
+   * @param {GridColDef[]} columns The `ColDef` list of all columns.
+   * @returns {GridColDef['field'][]} The list of togglable columns' field names.
+   */
+  getTogglableColumns?: (columns: GridColDef[]) => GridColDef['field'][];
+}
+declare function GridColumnsManagement(props: GridColumnsManagementProps): import("react/jsx-runtime").JSX.Element;
+declare namespace GridColumnsManagement {
+  var propTypes: any;
+}
+export { GridColumnsManagement };

package/components/columnsManagement/GridColumnsManagement.mjs

@@ -0,0 +1,317 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import composeClasses from '@mui/utils/composeClasses';
+import debounce from '@mui/utils/debounce';
+import { styled } from '@mui/material/styles';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import { vars } from "../../constants/cssVariables.mjs";
+import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, gridInitialColumnVisibilityModelSelector } from "../../hooks/features/columns/gridColumnsSelector.mjs";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.mjs";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.mjs";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.mjs";
+import { checkColumnVisibilityModelsSame, defaultSearchPredicate } from "./utils.mjs";
+import { NotRendered } from "../../utils/assert.mjs";
+import { GridShadowScrollArea } from "../GridShadowScrollArea.mjs";
+import { gridPivotActiveSelector, gridPivotInitialColumnsSelector } from "../../hooks/features/pivoting/gridPivotingSelectors.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['columnsManagement'],
+    header: ['columnsManagementHeader'],
+    searchInput: ['columnsManagementSearchInput'],
+    footer: ['columnsManagementFooter'],
+    row: ['columnsManagementRow']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const collator = new Intl.Collator();
+function GridColumnsManagement(props) {
+  const apiRef = useGridApiContext();
+  const searchInputRef = React.useRef(null);
+  const initialColumnVisibilityModel = useGridSelector(apiRef, gridInitialColumnVisibilityModelSelector);
+  const columnVisibilityModel = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
+  const rootProps = useGridRootProps();
+  const [searchValue, setSearchValue] = React.useState('');
+  const classes = useUtilityClasses(rootProps);
+  const columnDefinitions = useGridSelector(apiRef, gridColumnDefinitionsSelector);
+  const pivotActive = useGridSelector(apiRef, gridPivotActiveSelector);
+  const pivotInitialColumns = useGridSelector(apiRef, gridPivotInitialColumnsSelector);
+  const columns = React.useMemo(() => pivotActive ? Array.from(pivotInitialColumns.values()) : columnDefinitions, [pivotActive, pivotInitialColumns, columnDefinitions]);
+  const {
+    sort,
+    searchPredicate = defaultSearchPredicate,
+    autoFocusSearchField = true,
+    disableShowHideToggle = false,
+    disableResetButton = false,
+    toggleAllMode = 'all',
+    getTogglableColumns,
+    searchInputProps,
+    searchDebounceMs = rootProps.columnFilterDebounceMs
+  } = props;
+  const debouncedFilter = React.useMemo(() => debounce(value => {
+    setSearchValue(value);
+  }, searchDebounceMs ?? 150), [searchDebounceMs]);
+  const isResetDisabled = React.useMemo(() => checkColumnVisibilityModelsSame(columnVisibilityModel, initialColumnVisibilityModel), [columnVisibilityModel, initialColumnVisibilityModel]);
+  const sortedColumns = React.useMemo(() => {
+    switch (sort) {
+      case 'asc':
+        return [...columns].sort((a, b) => collator.compare(a.headerName || a.field, b.headerName || b.field));
+      case 'desc':
+        return [...columns].sort((a, b) => -collator.compare(a.headerName || a.field, b.headerName || b.field));
+      default:
+        return columns;
+    }
+  }, [columns, sort]);
+  const toggleColumn = event => {
+    const {
+      name: field
+    } = event.target;
+    apiRef.current.setColumnVisibility(field, columnVisibilityModel[field] === false);
+  };
+  const currentColumns = React.useMemo(() => {
+    const togglableColumns = getTogglableColumns ? getTogglableColumns(sortedColumns) : null;
+    const togglableSortedColumns = togglableColumns ? sortedColumns.filter(({
+      field
+    }) => togglableColumns.includes(field)) : sortedColumns;
+    if (!searchValue) {
+      return togglableSortedColumns;
+    }
+    return togglableSortedColumns.filter(column => searchPredicate(column, searchValue.toLowerCase()));
+  }, [sortedColumns, searchValue, searchPredicate, getTogglableColumns]);
+  const toggleAllColumns = React.useCallback(isVisible => {
+    const currentModel = gridColumnVisibilityModelSelector(apiRef);
+    const newModel = _extends({}, currentModel);
+    const togglableColumns = getTogglableColumns ? getTogglableColumns(columns) : null;
+    (toggleAllMode === 'filteredOnly' ? currentColumns : columns).forEach(col => {
+      if (col.hideable && (togglableColumns == null || togglableColumns.includes(col.field))) {
+        if (isVisible) {
+          // delete the key from the model instead of setting it to `true`
+          delete newModel[col.field];
+        } else {
+          newModel[col.field] = false;
+        }
+      }
+    });
+    return apiRef.current.setColumnVisibilityModel(newModel);
+  }, [apiRef, columns, getTogglableColumns, toggleAllMode, currentColumns]);
+  const handleSearchValueChange = React.useCallback(event => {
+    debouncedFilter(event.target.value);
+  }, [debouncedFilter]);
+  const hideableColumns = React.useMemo(() => currentColumns.filter(col => col.hideable), [currentColumns]);
+  const allHideableColumnsVisible = React.useMemo(() => hideableColumns.every(column => columnVisibilityModel[column.field] == null || columnVisibilityModel[column.field] !== false), [columnVisibilityModel, hideableColumns]);
+  const allHideableColumnsHidden = React.useMemo(() => hideableColumns.every(column => columnVisibilityModel[column.field] === false), [columnVisibilityModel, hideableColumns]);
+  const firstSwitchRef = React.useRef(null);
+  React.useEffect(() => {
+    if (autoFocusSearchField) {
+      searchInputRef.current?.focus();
+    } else if (firstSwitchRef.current && typeof firstSwitchRef.current.focus === 'function') {
+      firstSwitchRef.current.focus();
+    }
+  }, [autoFocusSearchField]);
+  let firstHideableColumnFound = false;
+  const isFirstHideableColumn = column => {
+    if (firstHideableColumnFound === false && column.hideable !== false) {
+      firstHideableColumnFound = true;
+      return true;
+    }
+    return false;
+  };
+  const handleSearchReset = React.useCallback(() => {
+    setSearchValue('');
+    if (searchInputRef.current) {
+      searchInputRef.current.value = '';
+      searchInputRef.current.focus();
+    }
+  }, []);
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(GridColumnsManagementHeader, {
+      className: classes.header,
+      ownerState: rootProps,
+      children: /*#__PURE__*/_jsx(SearchInput, _extends({
+        as: rootProps.slots.baseTextField,
+        ownerState: rootProps,
+        placeholder: apiRef.current.getLocaleText('columnsManagementSearchTitle'),
+        inputRef: searchInputRef,
+        className: classes.searchInput,
+        onChange: handleSearchValueChange,
+        size: "small",
+        type: "search",
+        slotProps: {
+          input: {
+            startAdornment: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {
+              fontSize: "small"
+            }),
+            endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+              size: "small",
+              "aria-label": apiRef.current.getLocaleText('columnsManagementDeleteIconLabel'),
+              style: searchValue ? {
+                visibility: 'visible'
+              } : {
+                visibility: 'hidden'
+              },
+              tabIndex: -1,
+              onClick: handleSearchReset,
+              edge: "end"
+            }, rootProps.slotProps?.baseIconButton, {
+              children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {
+                fontSize: "small"
+              })
+            }))
+          },
+          htmlInput: {
+            'aria-label': apiRef.current.getLocaleText('columnsManagementSearchTitle')
+          }
+        },
+        autoComplete: "off",
+        fullWidth: true
+      }, rootProps.slotProps?.baseTextField, searchInputProps))
+    }), /*#__PURE__*/_jsx(GridColumnsManagementScrollArea, {
+      ownerState: rootProps,
+      children: /*#__PURE__*/_jsxs(GridColumnsManagementBody, {
+        className: classes.root,
+        ownerState: rootProps,
+        children: [currentColumns.map(column => /*#__PURE__*/_jsx(GridColumnsManagementRow, _extends({
+          as: rootProps.slots.baseCheckbox,
+          className: classes.row,
+          disabled: column.hideable === false || pivotActive,
+          checked: columnVisibilityModel[column.field] !== false,
+          onChange: toggleColumn,
+          name: column.field,
+          inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined,
+          label: column.headerName || column.field,
+          density: "compact",
+          fullWidth: true
+        }, rootProps.slotProps?.baseCheckbox), column.field)), currentColumns.length === 0 && /*#__PURE__*/_jsx(GridColumnsManagementEmptyText, {
+          ownerState: rootProps,
+          children: apiRef.current.getLocaleText('columnsManagementNoColumns')
+        })]
+      })
+    }), !disableShowHideToggle || !disableResetButton ? /*#__PURE__*/_jsxs(GridColumnsManagementFooter, {
+      ownerState: rootProps,
+      className: classes.footer,
+      children: [!disableShowHideToggle ? /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
+        disabled: hideableColumns.length === 0 || pivotActive,
+        checked: allHideableColumnsVisible,
+        indeterminate: !allHideableColumnsVisible && !allHideableColumnsHidden,
+        onChange: () => toggleAllColumns(!allHideableColumnsVisible),
+        name: apiRef.current.getLocaleText('columnsManagementShowHideAllText'),
+        label: apiRef.current.getLocaleText('columnsManagementShowHideAllText'),
+        density: "compact"
+      }, rootProps.slotProps?.baseCheckbox)) : /*#__PURE__*/_jsx("span", {}), !disableResetButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+        onClick: () => apiRef.current.setColumnVisibilityModel(initialColumnVisibilityModel),
+        disabled: isResetDisabled || pivotActive
+      }, rootProps.slotProps?.baseButton, {
+        children: apiRef.current.getLocaleText('columnsManagementReset')
+      })) : null]
+    }) : null]
+  });
+}
+process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * If `true`, the column search field will be focused automatically.
+   * If `false`, the first column switch input will be focused automatically.
+   * This helps to avoid input keyboard panel to popup automatically on touch devices.
+   * @default true
+   */
+  autoFocusSearchField: PropTypes.bool,
+  /**
+   * If `true`, the `Reset` button will not be disabled
+   * @default false
+   */
+  disableResetButton: PropTypes.bool,
+  /**
+   * If `true`, the `Show/Hide all` toggle checkbox will not be displayed.
+   * @default false
+   */
+  disableShowHideToggle: PropTypes.bool,
+  /**
+   * Returns the list of togglable columns.
+   * If used, only those columns will be displayed in the panel
+   * which are passed as the return value of the function.
+   * @param {GridColDef[]} columns The `ColDef` list of all columns.
+   * @returns {GridColDef['field'][]} The list of togglable columns' field names.
+   */
+  getTogglableColumns: PropTypes.func,
+  /**
+   * The milliseconds delay to wait after a keystroke before triggering filtering in the columns menu.
+   * @default 150
+   */
+  searchDebounceMs: PropTypes.number,
+  searchInputProps: PropTypes.object,
+  searchPredicate: PropTypes.func,
+  sort: PropTypes.oneOf(['asc', 'desc']),
+  /**
+   * Changes the behavior of the `Show/Hide All` toggle when the search field is used:
+   * - `all`: Will toggle all columns.
+   * - `filteredOnly`: Will only toggle columns that match the search criteria.
+   * @default 'all'
+   */
+  toggleAllMode: PropTypes.oneOf(['all', 'filteredOnly'])
+} : void 0;
+const GridColumnsManagementBody = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagement'
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  padding: vars.spacing(0.5, 1.5)
+});
+const GridColumnsManagementScrollArea = styled(GridShadowScrollArea, {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementScrollArea'
+})({
+  maxHeight: 300
+});
+const GridColumnsManagementHeader = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementHeader'
+})({
+  padding: vars.spacing(1.5, 2),
+  borderBottom: `1px solid ${vars.colors.border.base}`
+});
+const SearchInput = styled(NotRendered, {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementSearchInput'
+})({
+  [`& .${inputBaseClasses.input}::-webkit-search-decoration,
+      & .${inputBaseClasses.input}::-webkit-search-cancel-button,
+      & .${inputBaseClasses.input}::-webkit-search-results-button,
+      & .${inputBaseClasses.input}::-webkit-search-results-decoration`]: {
+    /* clears the 'X' icon from Chrome */
+    display: 'none'
+  }
+});
+const GridColumnsManagementFooter = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementFooter'
+})({
+  padding: vars.spacing(1, 1, 1, 1.5),
+  display: 'flex',
+  justifyContent: 'space-between',
+  borderTop: `1px solid ${vars.colors.border.base}`
+});
+const GridColumnsManagementEmptyText = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementEmptyText'
+})({
+  padding: vars.spacing(1, 0),
+  alignSelf: 'center',
+  font: vars.typography.font.body
+});
+const GridColumnsManagementRow = styled(NotRendered, {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementRow'
+})({});
+export { GridColumnsManagement };

package/components/columnsManagement/index.d.mts

@@ -0,0 +1 @@
+export * from "./GridColumnsManagement.mjs";

package/components/columnsManagement/index.mjs

@@ -0,0 +1 @@
+export * from "./GridColumnsManagement.mjs";

package/components/columnsManagement/utils.d.mts

@@ -0,0 +1,4 @@
+import type { GridColumnVisibilityModel } from "../../hooks/features/columns/gridColumnsInterfaces.mjs";
+import type { GridColumnsManagementProps } from "./GridColumnsManagement.mjs";
+export declare const checkColumnVisibilityModelsSame: (a: GridColumnVisibilityModel, b: GridColumnVisibilityModel) => boolean;
+export declare const defaultSearchPredicate: NonNullable<GridColumnsManagementProps['searchPredicate']>;

package/components/columnsPanel/ColumnsPanelTrigger.d.mts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { type RenderProp } from '@mui/x-internals/useComponentRenderer';
+import type { GridSlotProps } from "../../models/index.mjs";
+export interface ColumnsPanelState {
+  /**
+   * If `true`, the columns panel is open.
+   */
+  open: boolean;
+}
+export type ColumnsPanelTriggerProps = Omit<GridSlotProps['baseButton'], 'className'> & {
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<GridSlotProps['baseButton'], ColumnsPanelState>;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className?: string | ((state: ColumnsPanelState) => string);
+};
+/**
+ * A button that opens and closes the columns panel.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Columns Panel](https://mui.com/x/react-data-grid/components/columns-panel/)
+ *
+ * API:
+ *
+ * - [ColumnsPanelTrigger API](https://mui.com/x/api/data-grid/columns-panel-trigger/)
+ */
+declare const ColumnsPanelTrigger: React.ForwardRefExoticComponent<ColumnsPanelTriggerProps> | React.ForwardRefExoticComponent<Omit<ColumnsPanelTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { ColumnsPanelTrigger };