@mui/x-data-grid 8.0.0-alpha.11 → 8.0.0-alpha.13

package/modern/models/gridFilterModel.d.ts

@@ -0,0 +1,34 @@
+import { GridFilterItem, GridLogicOperator } from "./gridFilterItem.js";
+/**
+ * Model describing the filters to apply to the grid.
+ * @demos
+ *   - [Pass filters to the grid](/x/react-data-grid/filtering/#pass-filters-to-the-data-grid)
+ */
+export interface GridFilterModel {
+  /**
+   * @default []
+   */
+  items: GridFilterItem[];
+  /**
+   * - `GridLogicOperator.And`: the row must pass all the filter items.
+   * - `GridLogicOperator.Or`: the row must pass at least on filter item.
+   * @default GridLogicOperator.And
+   */
+  logicOperator?: GridLogicOperator;
+  /**
+   * values used to quick filter rows
+   * @default []
+   */
+  quickFilterValues?: any[];
+  /**
+   * - `GridLogicOperator.And`: the row must pass all the values.
+   * - `GridLogicOperator.Or`: the row must pass at least one value.
+   * @default GridLogicOperator.And
+   */
+  quickFilterLogicOperator?: GridLogicOperator;
+  /**
+   * If `false`, the quick filter will also consider cell values from hidden columns.
+   * @default true
+   */
+  quickFilterExcludeHiddenColumns?: boolean;
+}

package/modern/models/gridFilterOperator.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
+import { GridFilterItem } from "./gridFilterItem.js";
+import type { GridColDef } from './colDef/gridColDef';
+import type { GridValidRowModel } from './gridRows';
+import type { GridApiCommunity } from './api/gridApiCommunity';
+import type { GridFilterInputValueProps } from './gridFilterInputComponent';
+type ApplyFilterFn<R extends GridValidRowModel = any, V = any, F = V> = (value: V, row: R, column: GridColDef<R, V, F>, apiRef: RefObject<GridApiCommunity>) => boolean;
+export type GetApplyFilterFn<R extends GridValidRowModel = any, V = any, F = V> = (filterItem: GridFilterItem, column: GridColDef<R, V, F>) => null | ApplyFilterFn<R, V, F>;
+/**
+ * Filter operator definition interface.
+ * @demos
+ *   - [Custom filter operator](/x/react-data-grid/filtering/customization/#create-a-custom-operator)
+ */
+export interface GridFilterOperator<R extends GridValidRowModel = any, V = any, F = V, I extends GridFilterInputValueProps<any> = GridFilterInputValueProps> {
+  /**
+   * The label of the filter operator.
+   */
+  label?: string;
+  /**
+   * The label of the filter shown in header filter row.
+   */
+  headerLabel?: string;
+  /**
+   * The name of the filter operator.
+   * It will be matched with the `operator` property of the filter items.
+   */
+  value: string;
+  /**
+   * The callback that generates a filtering function for a given filter item and column.
+   * This function can return `null` to skip filtering for this item and column.
+   * @param {GridFilterItem} filterItem The filter item with which we want to filter the column.
+   * @param {GridColDef} column The column from which we want to filter the rows.
+   * @returns {null | ApplyFilterFn} The function to call to check if a row pass this filter item or not.
+   */
+  getApplyFilterFn: GetApplyFilterFn<R, V, F>;
+  /**
+   * The input component to render in the filter panel for this filter operator.
+   */
+  InputComponent?: React.JSXElementConstructor<I>;
+  /**
+   * The props to pass to the input component in the filter panel for this filter operator.
+   */
+  InputComponentProps?: Partial<I>;
+  /**
+   * Converts the value of a filter item to a human-readable form.
+   * @param {GridFilterItem['value']} value The filter item value.
+   * @returns {string} The value formatted to be displayed in the UI of filter button tooltip.
+   */
+  getValueAsString?: (value: GridFilterItem['value']) => string;
+  /**
+   * If `false`, filter operator doesn't require user-entered value to work.
+   * Usually should be set to `false` for filter operators that don't have `InputComponent` (for example `isEmpty`)
+   * @default true
+   */
+  requiresFilterValue?: boolean;
+}
+export {};

package/modern/models/gridHeaderFilteringModel.d.ts

@@ -0,0 +1,6 @@
+import { GridColDef } from "./colDef/index.js";
+export type GridHeaderFilteringState = {
+  enabled: boolean;
+  editing: GridColDef['field'] | null;
+  menuOpen: GridColDef['field'] | null;
+};

package/modern/models/gridIconSlotsComponent.d.ts

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

package/modern/models/gridPaginationProps.d.ts

@@ -0,0 +1,16 @@
+export interface GridPaginationModel {
+  /**
+   * Set the number of rows in one page.
+   * If some of the rows have children (for instance in the tree data), this number represents the amount of top level rows wanted on each page.
+   * @default 100
+   */
+  pageSize: number;
+  /**
+   * The zero-based index of the current page.
+   * @default 0
+   */
+  page: number;
+}
+export interface GridPaginationMeta {
+  hasNextPage?: boolean;
+}

package/modern/models/gridRenderContextProps.d.ts

@@ -0,0 +1,55 @@
+/**
+ * The object containing the column properties of the rendering state.
+ */
+export interface GridRenderColumnsProps {
+  /**
+   * The index of the first rendered column.
+   */
+  firstColIdx: number;
+  /**
+   * The index of the last rendered column.
+   */
+  lastColIdx: number;
+  /**
+   * The left offset required to position the viewport at the beginning of the first rendered column.
+   */
+  leftEmptyWidth: number;
+  /**
+   * The right offset required to position the viewport to the end of the last rendered column.
+   */
+  rightEmptyWidth: number;
+}
+/**
+ * The object containing the row properties of the rendering state.
+ */
+export interface GridRenderRowProps {
+  /**
+   * The rendering zone page calculated from the scroll position.
+   */
+  page: number;
+  /**
+   * The index of the first rendered row.
+   */
+  firstRowIdx: number;
+  /**
+   * The index of the last rendered row.
+   */
+  lastRowIdx: number;
+}
+/**
+ * The object containing the pagination properties of the rendering state.
+ */
+export interface GridRenderPaginationProps {
+  /**
+   * The current page if pagination is enabled.
+   */
+  paginationCurrentPage?: number;
+  /**
+   * The page size if pagination is enabled.
+   */
+  pageSize?: number;
+}
+/**
+ * The full rendering state.
+ */
+export type GridRenderContextProps = GridRenderColumnsProps & GridRenderRowProps & GridRenderPaginationProps;

package/modern/models/gridRowSelectionManager.d.ts

@@ -0,0 +1,9 @@
+import type { GridRowId } from './gridRows';
+import type { GridRowSelectionModel } from './gridRowSelectionModel';
+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/modern/models/gridRowSelectionManager.js

@@ -0,0 +1,36 @@
+class IncludeManager {
+  constructor(model) {
+    this.data = void 0;
+    this.data = model.ids;
+  }
+  has(id) {
+    return this.data.has(id);
+  }
+  select(id) {
+    this.data.add(id);
+  }
+  unselect(id) {
+    this.data.delete(id);
+  }
+}
+class ExcludeManager {
+  constructor(model) {
+    this.data = void 0;
+    this.data = model.ids;
+  }
+  has(id) {
+    return !this.data.has(id);
+  }
+  select(id) {
+    this.data.delete(id);
+  }
+  unselect(id) {
+    this.data.add(id);
+  }
+}
+export const createRowSelectionManager = model => {
+  if (model.type === 'include') {
+    return new IncludeManager(model);
+  }
+  return new ExcludeManager(model);
+};

package/modern/models/gridRowSelectionModel.d.ts

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

package/modern/models/gridRows.d.ts

@@ -0,0 +1,178 @@
+import type { GridKeyValue } from './colDef/gridColDef';
+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]].
+ */
+export type GridRowIdGetter<R extends GridValidRowModel = GridValidRowModel> = (row: R) => GridRowId;
+export {};