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

package/models/gridIconSlotsComponent.d.mts

@@ -0,0 +1,213 @@
+import type * as React from 'react';
+import type { IconProps } from "./gridBaseSlots.mjs";
+import type { GridColumnUnsortedIconProps } from "../components/GridColumnUnsortedIcon.mjs";
+/**
+ * Set of icons used in the grid component UI.
+ */
+export interface GridIconSlotsComponent {
+  /**
+   * Icon displayed on the boolean cell to represent the true value.
+   * @default GridCheckIcon
+   */
+  booleanCellTrueIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the boolean cell to represent the false value.
+   * @default GridCloseIcon
+   */
+  booleanCellFalseIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the undo button in the toolbar.
+   * @default GridUndoIcon
+   */
+  undoIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the redo button in the toolbar.
+   * @default GridRedoIcon
+   */
+  redoIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the side of the column header title to display the filter input component.
+   * @default GridTripleDotsVerticalIcon
+   */
+  columnMenuIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the open filter button present in the toolbar by default.
+   * @default GridFilterListIcon
+   */
+  openFilterButtonIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the column header menu to show that a filter has been applied to the column.
+   * @default GridFilterAltIcon
+   */
+  columnFilteredIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the column menu selector tab.
+   * @default GridColumnIcon
+   */
+  columnSelectorIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the side of the column header title when unsorted.
+   * @default GridColumnUnsortedIcon
+   */
+  columnUnsortedIcon: React.JSXElementConstructor<GridColumnUnsortedIconProps> | null;
+  /**
+   * Icon displayed on the side of the column header title when sorted in ascending order.
+   * @default GridArrowUpwardIcon
+   */
+  columnSortedAscendingIcon: React.JSXElementConstructor<IconProps> | null;
+  /**
+   * Icon displayed on the side of the column header title when sorted in descending order.
+   * @default GridArrowDownwardIcon
+   */
+  columnSortedDescendingIcon: React.JSXElementConstructor<IconProps> | null;
+  /**
+   * Icon displayed in between two column headers that allows to resize the column header.
+   * @default GridSeparatorIcon
+   */
+  columnResizeIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the compact density option in the toolbar.
+   * @default GridViewHeadlineIcon
+   */
+  densityCompactIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the standard density option in the toolbar.
+   * @default GridTableRowsIcon
+   */
+  densityStandardIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the "comfortable" density option in the toolbar.
+   * @default GridViewStreamIcon
+   */
+  densityComfortableIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the open export button present in the toolbar by default.
+   * @default GridDownloadIcon
+   */
+  exportIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the `actions` column type to open the menu.
+   * @default GridMoreVertIcon
+   */
+  moreActionsIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the tree data toggling column when the children are collapsed
+   * @default GridKeyboardArrowRight
+   */
+  treeDataExpandIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the tree data toggling column when the children are expanded
+   * @default GridExpandMoreIcon
+   */
+  treeDataCollapseIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the grouping column when the children are collapsed
+   * @default GridKeyboardArrowRight
+   */
+  groupingCriteriaExpandIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the grouping column when the children are expanded
+   * @default GridExpandMoreIcon
+   */
+  groupingCriteriaCollapseIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the detail panel toggle column when collapsed.
+   * @default GridAddIcon
+   */
+  detailPanelExpandIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the detail panel toggle column when expanded.
+   * @default GridRemoveIcon
+   */
+  detailPanelCollapseIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed for deleting the filter from filter panel.
+   * @default GridAddIcon
+   */
+  filterPanelAddIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed for deleting the filter from filter panel.
+   * @default GridDeleteIcon
+   */
+  filterPanelDeleteIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed for deleting all the active filters from filter panel.
+   * @default GridDeleteForeverIcon
+   */
+  filterPanelRemoveAllIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the `reorder` column type to reorder a row.
+   * @default GridDragIcon
+   */
+  rowReorderIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the quick filter input.
+   * @default GridSearchIcon
+   */
+  quickFilterIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the quick filter reset input.
+   * @default GridCloseIcon
+   */
+  quickFilterClearIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed in column menu for hiding column
+   * @default GridVisibilityOffIcon
+   */
+  columnMenuHideIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed in column menu for ascending sort
+   * @default GridArrowUpwardIcon
+   */
+  columnMenuSortAscendingIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed in column menu for descending sort
+   * @default GridArrowDownwardIcon
+   */
+  columnMenuSortDescendingIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed in column menu for unsort
+   * @default null
+   */
+  columnMenuUnsortIcon: React.JSXElementConstructor<IconProps> | null;
+  /**
+   * Icon displayed in column menu for filter
+   * @default GridFilterAltIcon
+   */
+  columnMenuFilterIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed in column menu for showing all columns
+   * @default GridViewColumnIcon
+   */
+  columnMenuManageColumnsIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed in column menu for clearing values
+   * @default GridClearIcon
+   */
+  columnMenuClearIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the input while processing.
+   * @default GridLoadIcon
+   */
+  loadIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the column reorder button.
+   * @default GridDragIcon
+   */
+  columnReorderIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed to indicate that a menu item is selected.
+   * @default GridCheckIcon
+   */
+  menuItemCheckIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the long text cell to expand the content.
+   * @default GridLongTextCellExpandIcon
+   */
+  longTextCellExpandIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the long text cell popup to collapse the content.
+   * @default GridLongTextCellCollapseIcon
+   */
+  longTextCellCollapseIcon: React.JSXElementConstructor<IconProps>;
+}

package/models/gridRowSelectionManager.d.mts

@@ -0,0 +1,9 @@
+import type { GridRowId } from "./gridRows.mjs";
+import type { GridRowSelectionModel } from "./gridRowSelectionModel.mjs";
+export interface RowSelectionManager {
+  data: Set<GridRowId>;
+  has(id: GridRowId): boolean;
+  select(id: GridRowId): void;
+  unselect(id: GridRowId): void;
+}
+export declare const createRowSelectionManager: (model: GridRowSelectionModel) => RowSelectionManager;

package/models/gridRowSelectionModel.d.mts

@@ -0,0 +1,9 @@
+import type { GridRowId } from "./gridRows.mjs";
+export type GridRowSelectionPropagation = {
+  descendants?: boolean;
+  parents?: boolean;
+};
+export type GridRowSelectionModel = {
+  type: 'include' | 'exclude';
+  ids: Set<GridRowId>;
+};

package/models/gridRows.d.mts

@@ -0,0 +1,180 @@
+import type { GridKeyValue } from "./colDef/gridColDef.mjs";
+export type GridValidRowModel = {
+  [key: string | symbol]: any;
+};
+export type GridRowsProp<R extends GridValidRowModel = GridValidRowModel> = Readonly<GridRowModel<R>[]>;
+/**
+ * The key value object representing the data of a row.
+ */
+export type GridRowModel<R extends GridValidRowModel = GridValidRowModel> = R;
+export type GridUpdateAction = 'delete';
+export interface GridRowModelUpdate extends GridRowModel {
+  _action?: GridUpdateAction;
+}
+/**
+ * The grid rows total height and row positions.
+ */
+export interface GridRowsMeta {
+  /**
+   * The sum of all grid rows.
+   */
+  totalHeight: number;
+  /**
+   * The grid rows positions.
+   */
+  positions: number[];
+}
+export interface GridTreeBasicNode {
+  /**
+   * The uniq id of this node.
+   */
+  id: GridRowId;
+  /**
+   * Depth of this node in the tree.
+   */
+  depth: number;
+}
+export interface GridLeafNode extends GridTreeBasicNode {
+  type: 'leaf';
+  /**
+   * The id of the group containing this node.
+   */
+  parent: GridRowId;
+  /**
+   * The key used to group the children of this row.
+   */
+  groupingKey: GridKeyValue | null;
+}
+export interface GridBasicGroupNode extends GridTreeBasicNode {
+  type: 'group';
+  /**
+   * The key used to group the children of this row.
+   */
+  groupingKey: GridKeyValue | null;
+  /**
+   * The field used to group the children of this row.
+   * Is `null` if no field has been used to group the children of this row.
+   */
+  groupingField: string | null;
+  /**
+   * The id of the body children nodes.
+   * Only contains the children of type "group" and "leaf".
+   */
+  children: GridRowId[];
+  /**
+   * The id of the footer child node.
+   */
+  footerId?: GridRowId | null;
+  /**
+   * The id of the children nodes, grouped by grouping field and grouping key.
+   * Only contains the children of type "group" and "leaf".
+   * Empty for flat tree.
+   */
+  childrenFromPath: GridChildrenFromPathLookup;
+  /**
+   * If `true`, the children of this group are not visible.
+   * @default false
+   */
+  childrenExpanded?: boolean;
+  /**
+   * The id of the group containing this node (null for the root group).
+   */
+  parent: GridRowId | null;
+  /**
+   * If `true`, this row is pinned.
+   * @default false
+   */
+  isPinned?: boolean;
+}
+export interface GridAutoGeneratedGroupNode extends GridBasicGroupNode {
+  /**
+   * If `true`, this node has been automatically generated by the grid.
+   * In the row grouping, all groups are auto-generated
+   * In the tree data, some groups can be passed in the rows
+   */
+  isAutoGenerated: true;
+}
+export interface GridDataGroupNode extends GridBasicGroupNode {
+  /**
+   * If `true`, this node has been automatically generated by the grid.
+   * In the row grouping, all groups are auto-generated
+   * In the tree data, some groups can be passed in the rows
+   */
+  isAutoGenerated: false;
+}
+export interface GridDataSourceGroupNode extends GridDataGroupNode {
+  /**
+   * Number of children this node has on the server. Equals to `-1` if there are some children but the count is unknown.
+   */
+  serverChildrenCount: number;
+  /**
+   * The cached path to be passed on as `groupKey` to the server.
+   */
+  path: string[];
+}
+export type GridGroupNode = GridDataGroupNode | GridAutoGeneratedGroupNode;
+export type GridChildrenFromPathLookup = {
+  [groupingField: string]: {
+    [groupingKey: string]: GridRowId;
+  };
+};
+export interface GridFooterNode extends GridTreeBasicNode {
+  type: 'footer';
+  /**
+   * The id of the group containing this node.
+   */
+  parent: GridRowId;
+}
+export interface GridSkeletonRowNode extends GridTreeBasicNode {
+  type: 'skeletonRow';
+  /**
+   * The id of the group containing this node.
+   * Is always equal to `GRID_ROOT_GROUP_ID`.
+   */
+  parent: GridRowId;
+}
+interface GridBasicPinnedRowNode extends GridTreeBasicNode {
+  type: 'pinnedRow';
+  /**
+   * The id of the group containing this node.
+   * Is always equal to `GRID_ROOT_GROUP_ID`.
+   */
+  parent: GridRowId;
+}
+export interface GridDataPinnedRowNode extends GridBasicPinnedRowNode {
+  /**
+   * If `true`, this node has been automatically generated by the grid.
+   */
+  isAutoGenerated: true;
+}
+export interface GridAutoGeneratedPinnedRowNode extends GridBasicPinnedRowNode {
+  /**
+   * If `true`, this node has been automatically generated by the grid.
+   */
+  isAutoGenerated: false;
+}
+export type GridPinnedRowNode = GridDataPinnedRowNode | GridAutoGeneratedPinnedRowNode;
+export type GridTreeNode = GridLeafNode | GridGroupNode | GridFooterNode | GridPinnedRowNode | GridSkeletonRowNode;
+export type GridTreeNodeWithRender = GridLeafNode | GridGroupNode | GridFooterNode | GridPinnedRowNode;
+export type GridRowTreeConfig = Record<GridRowId, GridTreeNode>;
+/**
+ * The type of Id supported by the grid.
+ */
+export type GridRowId = string | number;
+export interface GridRowEntry<R extends GridValidRowModel = GridValidRowModel> {
+  /**
+   * The row id.
+   */
+  id: GridRowId;
+  /**
+   * The row model.
+   */
+  model: R;
+}
+/**
+ * The function to retrieve the id of a [[GridRowModel]].
+ * @param {R} row The row model.
+ * @returns {GridRowId} The id of the row.
+ */
+export type GridRowIdGetter<R extends GridValidRowModel = GridValidRowModel> = (row: R) => GridRowId;
+export {};

package/models/gridSlotsComponent.d.mts

@@ -0,0 +1,235 @@
+import type * as React from 'react';
+import type { GridSlotProps } from "./gridSlotsComponentsProps.mjs";
+import type { GridIconSlotsComponent } from "./gridIconSlotsComponent.mjs";
+export type { GridSlotProps } from "./gridSlotsComponentsProps.mjs";
+export interface GridBaseSlots {
+  /**
+   * The custom Autocomplete component used in the grid for both header and cells.
+   * @default Autocomplete
+   */
+  baseAutocomplete: React.JSXElementConstructor<GridSlotProps['baseAutocomplete']>;
+  /**
+   * The custom Badge component used in the grid for both header and cells.
+   * @default Badge
+   */
+  baseBadge: React.JSXElementConstructor<GridSlotProps['baseBadge']>;
+  /**
+   * The custom Checkbox component used in the grid for both header and cells.
+   * @default Checkbox
+   */
+  baseCheckbox: React.JSXElementConstructor<GridSlotProps['baseCheckbox']>;
+  /**
+   * The custom Chip component used in the grid.
+   * @default Chip
+   */
+  baseChip: React.JSXElementConstructor<GridSlotProps['baseChip']>;
+  /**
+   * The custom CircularProgress component used in the grid.
+   * @default CircularProgress
+   */
+  baseCircularProgress: React.JSXElementConstructor<GridSlotProps['baseCircularProgress']>;
+  /**
+   * The custom Divider component used in the grid.
+   * @default Divider
+   */
+  baseDivider: React.JSXElementConstructor<GridSlotProps['baseDivider']>;
+  /**
+   * The custom LinearProgress component used in the grid.
+   * @default LinearProgress
+   */
+  baseLinearProgress: React.JSXElementConstructor<GridSlotProps['baseLinearProgress']>;
+  /**
+   * The custom MenuList component used in the grid.
+   * @default MenuList
+   */
+  baseMenuList: React.JSXElementConstructor<GridSlotProps['baseMenuList']>;
+  /**
+   * The custom MenuItem component used in the grid.
+   * @default MenuItem
+   */
+  baseMenuItem: React.JSXElementConstructor<GridSlotProps['baseMenuItem']>;
+  /**
+   * The custom TextField component used in the grid.
+   * @default TextField
+   */
+  baseTextField: React.JSXElementConstructor<GridSlotProps['baseTextField']>;
+  /**
+   * The custom Select component used in the grid.
+   * @default Select
+   */
+  baseSelect: React.JSXElementConstructor<GridSlotProps['baseSelect']>;
+  /**
+   * The custom Button component used in the grid.
+   * @default Button
+   */
+  baseButton: React.JSXElementConstructor<GridSlotProps['baseButton']>;
+  /**
+   * The custom IconButton component used in the grid.
+   * @default IconButton
+   */
+  baseIconButton: React.JSXElementConstructor<GridSlotProps['baseIconButton']>;
+  /**
+   * The custom Input component used in the grid.
+   * @default Input
+   */
+  baseInput: React.JSXElementConstructor<GridSlotProps['baseInput']>;
+  /**
+   * The custom Textarea component used in the grid for multiline text editing.
+   * @default InputBase with multiline
+   */
+  baseTextarea: React.JSXElementConstructor<GridSlotProps['baseTextarea']>;
+  /**
+   * The custom ToggleButton component used in the grid.
+   * @default ToggleButton
+   */
+  baseToggleButton: React.JSXElementConstructor<GridSlotProps['baseToggleButton']>;
+  /**
+   * The custom Tooltip component used in the grid.
+   * @default Tooltip
+   */
+  baseTooltip: React.JSXElementConstructor<GridSlotProps['baseTooltip']>;
+  /**
+   * The custom Pagination component used in the grid.
+   * @default Pagination
+   */
+  basePagination: React.JSXElementConstructor<GridSlotProps['basePagination']>;
+  /**
+   * The custom Popper component used in the grid.
+   * @default Popper
+   */
+  basePopper: React.JSXElementConstructor<GridSlotProps['basePopper']>;
+  /**
+   * The custom SelectOption component used in the grid.
+   * @default SelectOption
+   */
+  baseSelectOption: React.JSXElementConstructor<GridSlotProps['baseSelectOption']>;
+  /**
+   * The custom Skeleton component used in the grid.
+   * @default Skeleton
+   */
+  baseSkeleton: React.JSXElementConstructor<GridSlotProps['baseSkeleton']>;
+  /**
+   * The custom Switch component used in the grid.
+   * @default Switch
+   */
+  baseSwitch: React.JSXElementConstructor<GridSlotProps['baseSwitch']>;
+  /**
+   * The custom Tabs component used in the grid.
+   * @default Tabs
+   */
+  baseTabs: React.JSXElementConstructor<GridSlotProps['baseTabs']>;
+}
+/**
+ * Grid components React prop interface containing all the overridable components.
+ */
+export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponent {
+  /**
+   * Component rendered for the bottom container.
+   * @default GridBottomContainer
+   */
+  bottomContainer: React.JSXElementConstructor<GridSlotProps['bottomContainer']>;
+  /**
+   * Component rendered for each cell.
+   * @default GridCell
+   */
+  cell: React.JSXElementConstructor<GridSlotProps['cell']>;
+  /**
+   * Component rendered for each skeleton cell.
+   * @default GridSkeletonCell
+   */
+  skeletonCell: React.JSXElementConstructor<GridSlotProps['skeletonCell']>;
+  /**
+   * Filter icon component rendered in each column header.
+   * @default GridColumnHeaderFilterIconButton
+   */
+  columnHeaderFilterIconButton: React.JSXElementConstructor<GridSlotProps['columnHeaderFilterIconButton']>;
+  /**
+   * Sort icon component rendered in each column header.
+   * @default GridColumnHeaderSortIcon
+   */
+  columnHeaderSortIcon: React.JSXElementConstructor<GridSlotProps['columnHeaderSortIcon']>;
+  /**
+   * Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.
+   * @default GridColumnMenu
+   */
+  columnMenu: React.JSXElementConstructor<GridSlotProps['columnMenu']>;
+  /**
+   * Component responsible for rendering the column headers.
+   * @default GridColumnHeaders
+   */
+  columnHeaders: React.JSXElementConstructor<GridSlotProps['columnHeaders']>;
+  /**
+   * Component responsible for rendering the detail panels.
+   * @default GridDetailPanels
+   */
+  detailPanels: React.JSXElementConstructor<GridSlotProps['detailPanels']>;
+  /**
+   * Footer component rendered at the bottom of the grid viewport.
+   * @default GridFooter
+   */
+  footer: React.JSXElementConstructor<GridSlotProps['footer']>;
+  /**
+   * Row count component rendered in the footer
+   * @default GridRowCount
+   */
+  footerRowCount: React.JSXElementConstructor<GridSlotProps['footerRowCount']>;
+  /**
+   * Toolbar component rendered in the grid header.
+   */
+  toolbar: React.JSXElementConstructor<GridSlotProps['toolbar']>;
+  /**
+   * Pinned rows container.
+   * @ignore - do not document
+   */
+  pinnedRows: React.JSXElementConstructor<GridSlotProps['pinnedRows']>;
+  /**
+   * Loading overlay component rendered when the grid is in a loading state.
+   * @default GridLoadingOverlay
+   */
+  loadingOverlay: React.JSXElementConstructor<GridSlotProps['loadingOverlay']>;
+  /**
+   * No results overlay component rendered when the grid has no results after filtering.
+   * @default GridNoResultsOverlay
+   */
+  noResultsOverlay: React.JSXElementConstructor<GridSlotProps['noResultsOverlay']>;
+  /**
+   * No rows overlay component rendered when the grid has no rows.
+   * @default GridNoRowsOverlay
+   */
+  noRowsOverlay: React.JSXElementConstructor<GridSlotProps['noRowsOverlay']>;
+  /**
+   * No columns overlay component rendered when the grid has no columns.
+   * @default GridNoColumnsOverlay
+   */
+  noColumnsOverlay: React.JSXElementConstructor<GridSlotProps['noColumnsOverlay']>;
+  /**
+   * Pagination component rendered in the grid footer by default.
+   * @default Pagination
+   */
+  pagination: React.JSXElementConstructor<GridSlotProps['pagination']> | null;
+  /**
+   * Filter panel component rendered when clicking the filter button.
+   * @default GridFilterPanel
+   */
+  filterPanel: React.JSXElementConstructor<GridSlotProps['filterPanel']>;
+  /**
+   * GridColumns panel component rendered when clicking the columns button.
+   * @default GridColumnsPanel
+   */
+  columnsPanel: React.JSXElementConstructor<GridSlotProps['columnsPanel']>;
+  /**
+   * Component used inside Grid Columns panel to manage columns.
+   * @default GridColumnsManagement
+   */
+  columnsManagement: React.JSXElementConstructor<any>;
+  /**
+   * Panel component wrapping the filters and columns panels.
+   * @default GridPanel
+   */
+  panel: React.JSXElementConstructor<GridSlotProps['panel']>;
+  /**
+   * Component rendered for each row.
+   * @default GridRow
+   */
+  row: React.JSXElementConstructor<GridSlotProps['row']>;
+}