@mui/x-data-grid 8.0.0-alpha.9 → 8.0.0-beta.1

package/esm/models/events/gridEventPublisher.d.ts

@@ -0,0 +1,29 @@
+import type { MuiBaseEvent } from '../muiEvent';
+import type { GridEventLookup, GridEvents } from './gridEventLookup';
+type PublisherArgsNoEvent<E extends GridEvents, T extends {
+  params: any;
+}> = [E, T['params']];
+type PublisherArgsRequiredEvent<E extends GridEvents, T extends {
+  params: any;
+  event: MuiBaseEvent;
+}> = [E, T['params'], T['event']];
+type PublisherArgsOptionalEvent<E extends GridEvents, T extends {
+  params: any;
+  event: MuiBaseEvent;
+}> = PublisherArgsRequiredEvent<E, T> | PublisherArgsNoEvent<E, T>;
+type PublisherArgsEvent<E extends GridEvents, T extends {
+  params: any;
+  event: MuiBaseEvent;
+}> = {} extends T['event'] ? PublisherArgsOptionalEvent<E, T> : PublisherArgsRequiredEvent<E, T>;
+type PublisherArgsParams<E extends GridEvents, T extends {
+  params: any;
+}> = [E, T['params']];
+type PublisherArgsNoParams<E extends GridEvents> = [E];
+type GridEventPublisherArg<E extends GridEvents, T> = T extends {
+  params: any;
+  event: MuiBaseEvent;
+} ? PublisherArgsEvent<E, T> : T extends {
+  params: any;
+} ? PublisherArgsParams<E, T> : PublisherArgsNoParams<E>;
+export type GridEventPublisher = <E extends GridEvents>(...params: GridEventPublisherArg<E, GridEventLookup[E]>) => void;
+export {};

package/esm/models/events/gridEventPublisher.js

@@ -0,0 +1 @@
+export {};

package/esm/models/events/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./gridEventListener.js";
+export * from "./gridEventPublisher.js";
+export * from "./gridEventLookup.js";

package/esm/models/events/index.js

@@ -0,0 +1,3 @@
+export * from "./gridEventListener.js";
+export * from "./gridEventPublisher.js";
+export * from "./gridEventLookup.js";

package/esm/models/gridApiCaches.d.ts

@@ -0,0 +1,6 @@
+import { GridRowsInternalCache } from "../hooks/features/rows/gridRowsInterfaces.js";
+import { GridRowsMetaInternalCache } from "../hooks/features/rows/gridRowsMetaInterfaces.js";
+export interface GridApiCaches {
+  rows: GridRowsInternalCache;
+  rowsMeta: GridRowsMetaInternalCache;
+}

package/esm/models/gridApiCaches.js

@@ -0,0 +1 @@
+export {};

package/esm/models/gridBaseSlots.d.ts

@@ -0,0 +1,271 @@
+type Ref<T = HTMLElement> = React.RefCallback<T | null> | React.RefObject<T | null> | null;
+export interface AutocompleteFilterOptionsState<Value> {
+  inputValue: string;
+  getOptionLabel: (option: Value) => string;
+}
+type AcValueMap<FreeSolo> = FreeSolo extends true ? string : never;
+type AcValue<Value, Multiple, DisableClearable, FreeSolo> = Multiple extends true ? Array<Value | AcValueMap<FreeSolo>> : DisableClearable extends true ? NonNullable<Value | AcValueMap<FreeSolo>> : Value | null | AcValueMap<FreeSolo>;
+export type AutocompleteProps<Value = string, Multiple extends boolean = false, DisableClearable extends boolean = false, FreeSolo extends boolean = false> = {
+  id?: string;
+  /** Allow multiple selection. */
+  multiple?: Multiple;
+  /** Allow to add new options. */
+  freeSolo?: FreeSolo;
+  value?: AcValue<Value, Multiple, DisableClearable, FreeSolo>;
+  options: ReadonlyArray<Value>;
+  /**
+   * Used to determine the string value for a given option.
+   * It's used to fill the input (and the list box options if `renderOption` is not provided).
+   *
+   * If used in free solo mode, it must accept both the type of the options and a string.
+   *
+   * @param {Value} option The option
+   * @returns {string} The label
+   * @default (option) => option.label ?? option
+   */
+  getOptionLabel?: (option: Value | AcValueMap<FreeSolo>) => string;
+  /**
+   * Used to determine if the option represents the given value.
+   * Uses strict equality by default.
+   * ⚠️ Both arguments need to be handled, an option can only match with one value.
+   *
+   * @param {Value} option The option to test.
+   * @param {Value} value The value to test against.
+   * @returns {boolean} true if value matches
+   */
+  isOptionEqualToValue?: (option: Value, value: Value) => boolean;
+  /**
+   * Callback fired when the value changes.
+   *
+   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {Value|Value[]} value The new value of the component.
+   */
+  onChange?: (event: React.SyntheticEvent, value: AcValue<Value, Multiple, DisableClearable, FreeSolo>) => void;
+  /**
+   * Callback fired when the input value changes.
+   *
+   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {string} value The new value of the input.
+   */
+  onInputChange?: (event: React.SyntheticEvent, value: string) => void;
+  label?: React.ReactNode;
+  placeholder?: string;
+  slotProps?: {
+    textField: TextFieldProps;
+  };
+};
+export type BadgeProps = {
+  badgeContent?: React.ReactNode;
+  children: React.ReactNode;
+  color?: 'primary' | 'default' | 'error';
+  invisible?: boolean;
+  overlap?: 'circular';
+  variant?: 'dot';
+  style?: React.CSSProperties;
+};
+export type ButtonProps = {
+  ref?: Ref;
+  children?: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+  id?: string;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+  role?: string;
+  size?: 'small' | 'medium' | 'large';
+  startIcon?: React.ReactNode;
+  style?: React.CSSProperties;
+  tabIndex?: number;
+  title?: string;
+  touchRippleRef?: any;
+};
+export type CheckboxProps = {
+  ref?: Ref<HTMLButtonElement>;
+  id?: string;
+  autoFocus?: boolean;
+  checked?: boolean;
+  className?: string;
+  disabled?: boolean;
+  fullWidth?: boolean;
+  indeterminate?: boolean;
+  inputRef?: React.Ref<HTMLInputElement>;
+  name?: string;
+  label?: React.ReactNode;
+  onClick?: React.MouseEventHandler;
+  onChange?: React.ChangeEventHandler;
+  onKeyDown?: React.KeyboardEventHandler;
+  size?: 'small' | 'medium';
+  density?: 'standard' | 'compact';
+  slotProps?: {
+    htmlInput?: React.InputHTMLAttributes<HTMLInputElement>;
+  };
+  style?: React.CSSProperties;
+  tabIndex?: number;
+  touchRippleRef?: any;
+};
+export type IconButtonProps = Omit<ButtonProps, 'startIcon'> & {
+  label?: string;
+  color?: 'default' | 'inherit' | 'primary';
+  edge?: 'start' | 'end' | false;
+};
+export type DividerProps = {
+  orientation?: 'horizontal' | 'vertical';
+};
+export type MenuListProps = {
+  ref?: Ref<HTMLUListElement>;
+  id?: string;
+  className?: string;
+  children?: React.ReactNode;
+  autoFocus?: boolean;
+  autoFocusItem?: boolean;
+  onKeyDown?: React.KeyboardEventHandler;
+};
+export type MenuItemProps = {
+  autoFocus?: boolean;
+  children?: React.ReactNode;
+  /** For items that aren't interactive themselves (but may contain an interactive widget) */
+  inert?: boolean;
+  disabled?: boolean;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+  iconStart?: React.ReactNode;
+  iconEnd?: React.ReactNode;
+  selected?: boolean;
+  value?: number | string | readonly string[];
+  style?: React.CSSProperties;
+};
+type BasePlacement = 'top' | 'bottom' | 'left' | 'right';
+type VariationPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';
+type AutoPlacement = 'auto' | 'auto-start' | 'auto-end';
+type Placement = AutoPlacement | BasePlacement | VariationPlacement;
+type ClickAwayMouseEventHandler = 'onClick' | 'onMouseDown' | 'onMouseUp' | 'onPointerDown' | 'onPointerUp';
+type ClickAwayTouchEventHandler = 'onTouchStart' | 'onTouchEnd';
+export type PaginationProps = {
+  count: number;
+  page: number;
+  rowsPerPage: number;
+  rowsPerPageOptions?: readonly (number | {
+    value: number;
+    label: string;
+  })[];
+  onPageChange: (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void;
+  onRowsPerPageChange?: (rowsPerPage: number) => void;
+  disabled?: boolean;
+};
+export type PopperProps = {
+  open: boolean;
+  children?: React.ReactNode;
+  className?: string;
+  clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+  clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+  flip?: boolean;
+  focusTrap?: boolean;
+  onExited?: (node: HTMLElement | null) => void;
+  onClickAway?: (event: MouseEvent | TouchEvent) => void;
+  onDidShow?: () => void;
+  onDidHide?: () => void;
+  id?: string;
+  ref?: Ref;
+  target?: Element | null;
+  transition?: boolean;
+  /** @default 'bottom' */
+  placement?: Placement;
+};
+export type CircularProgressProps = {
+  /**
+   * Pixels or CSS value.
+   * @default 40
+   */
+  size?: number | string;
+  /** @default 'primary' */
+  color?: 'inherit' | 'primary';
+};
+export type LinearProgressProps = {};
+export type InputProps = {
+  ref?: React.Ref<HTMLElement>;
+  inputRef?: React.Ref<HTMLInputElement>;
+  className?: string;
+  fullWidth?: boolean;
+  type?: React.HTMLInputTypeAttribute;
+  value?: string;
+  onChange: React.ChangeEventHandler;
+  disabled?: boolean;
+  endAdornment?: React.ReactNode;
+  startAdornment?: React.ReactNode;
+  slotProps?: {
+    htmlInput?: React.InputHTMLAttributes<HTMLInputElement>;
+  };
+};
+export type SelectProps = {
+  ref?: Ref;
+  id?: string;
+  value?: any;
+  open?: boolean;
+  error?: boolean;
+  disabled?: boolean;
+  onChange?: React.ChangeEventHandler;
+  onFocus?: React.FocusEventHandler;
+  onBlur?: React.FocusEventHandler;
+  onKeyDown?: React.KeyboardEventHandler;
+  onOpen?: (event: React.SyntheticEvent) => void;
+  onClose?: (event: React.KeyboardEvent, reason: 'backdropClick' | 'escapeKeyDown' | 'tabKeyDown') => void;
+  label?: React.ReactNode;
+  labelId?: string;
+  native?: boolean;
+  fullWidth?: boolean;
+  size?: 'small' | 'medium';
+  slotProps?: {
+    htmlInput?: {
+      ref?: Ref;
+    } & React.InputHTMLAttributes<HTMLInputElement>;
+  };
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+};
+export type SelectOptionProps = {
+  native: boolean;
+  value: any;
+  children?: React.ReactNode;
+};
+export type SkeletonProps = {
+  variant?: 'circular' | 'text';
+  width?: number | string;
+  height?: number | string;
+};
+export type SwitchProps = {
+  checked?: boolean;
+  onChange?: React.ChangeEventHandler;
+  size?: 'small' | 'medium';
+};
+export type TextFieldProps = {
+  role?: string;
+  autoComplete?: string;
+  className?: string;
+  color?: 'primary' | 'error';
+  disabled?: boolean;
+  error?: boolean;
+  fullWidth?: boolean;
+  helperText?: string | null;
+  id?: string;
+  inputRef?: React.Ref<HTMLInputElement>;
+  label?: React.ReactNode;
+  onChange?: React.ChangeEventHandler;
+  onKeyDown?: React.KeyboardEventHandler;
+  placeholder?: string;
+  size?: 'small' | 'medium';
+  slotProps?: {
+    input?: Omit<Partial<InputProps>, 'slotProps'>;
+    inputLabel?: {};
+    htmlInput?: React.InputHTMLAttributes<HTMLInputElement>;
+  };
+  style?: React.CSSProperties;
+  tabIndex?: number;
+  type?: React.HTMLInputTypeAttribute;
+  value?: string;
+  ref?: Ref<HTMLInputElement>;
+};
+export type TooltipProps = {
+  children: React.ReactElement<any, any>;
+  enterDelay?: number;
+  title: React.ReactNode;
+};
+export {};

package/esm/models/gridBaseSlots.js

@@ -0,0 +1 @@
+export {};

package/esm/models/gridCell.d.ts

@@ -0,0 +1,30 @@
+import type { GridColDef } from './colDef';
+import { GridRowId } from "./gridRows.js";
+/**
+ * The mode of the cell.
+ */
+export type GridCellMode = 'edit' | 'view';
+/**
+ * The mode of the row.
+ */
+export type GridRowMode = 'edit' | 'view';
+/**
+ * The coordinates of cell represented by their row and column indexes.
+ */
+export interface GridCellIndexCoordinates {
+  colIndex: number;
+  rowIndex: number;
+}
+/**
+ * The coordinates of a cell represented by their row ID and column field.
+ */
+export interface GridCellCoordinates {
+  id: GridRowId;
+  field: GridColDef['field'];
+}
+/**
+ * The coordinates of column header represented by their row and column indexes.
+ */
+export interface GridColumnHeaderIndexCoordinates {
+  colIndex: number;
+}

package/esm/models/gridCell.js

@@ -0,0 +1 @@
+export {};

package/esm/models/gridCellClass.d.ts

@@ -0,0 +1,10 @@
+import { GridValidRowModel } from "./gridRows.js";
+import { GridCellParams } from "./params/gridCellParams.js";
+/**
+ * A function used to process cellClassName params.
+ */
+export type GridCellClassFn<R extends GridValidRowModel = any, V = unknown> = (params: GridCellParams<R, V>) => string;
+/**
+ * The union type representing the [[GridColDef]] cell class type.
+ */
+export type GridCellClassNamePropType<R extends GridValidRowModel = any, V = unknown> = string | GridCellClassFn<R, V>;

package/esm/models/gridCellClass.js

@@ -0,0 +1 @@
+export {};

package/esm/models/gridColumnGrouping.d.ts

@@ -0,0 +1,41 @@
+import { GridColDef } from "./colDef/index.js";
+import type { GridColumnGroupHeaderParams } from './params/gridColumnGroupHeaderParams';
+export interface GridLeafColumn {
+  field: GridColDef['field'];
+}
+export type GridColumnNode = GridColumnGroup | GridLeafColumn;
+export declare function isLeaf(node: GridColumnNode): node is GridLeafColumn;
+/**
+ * A function used to process headerClassName params.
+ */
+export type GridColumnGroupHeaderClassFn = (params: GridColumnGroupHeaderParams) => string;
+/**
+ * The union type representing the [[GridColDef]] column header class type.
+ */
+export type GridColumnGroupHeaderClassNamePropType = string | GridColumnGroupHeaderClassFn;
+export interface GridColumnGroup extends Pick<GridColDef, 'headerName' | 'description' | 'headerAlign'> {
+  /**
+   * A unique string identifying the group.
+   */
+  groupId: string;
+  /**
+   * The groups and columns included in this group.
+   */
+  children: GridColumnNode[];
+  /**
+   * If `true`, allows reordering columns outside of the group.
+   * @default false
+   */
+  freeReordering?: boolean;
+  /**
+   * Allows to render a component in the column group header cell.
+   * @param {GridColumnGroupHeaderParams} params Object containing parameters for the renderer.
+   * @returns {React.ReactNode} The element to be rendered.
+   */
+  renderHeaderGroup?: (params: GridColumnGroupHeaderParams) => React.ReactNode;
+  /**
+   * Class name that will be added in the column group header cell.
+   */
+  headerClassName?: GridColumnGroupHeaderClassNamePropType;
+}
+export type GridColumnGroupingModel = GridColumnGroup[];

package/esm/models/gridColumnGrouping.js

@@ -0,0 +1,11 @@
+export function isLeaf(node) {
+  return node.field !== undefined;
+}
+
+/**
+ * A function used to process headerClassName params.
+ */
+
+/**
+ * The union type representing the [[GridColDef]] column header class type.
+ */

package/esm/models/gridColumnHeaderClass.d.ts

@@ -0,0 +1,9 @@
+import { GridColumnHeaderParams } from "./params/gridColumnHeaderParams.js";
+/**
+ * A function used to process headerClassName params.
+ */
+export type GridColumnHeaderClassFn = (params: GridColumnHeaderParams) => string;
+/**
+ * The union type representing the [[GridColDef]] column header class type.
+ */
+export type GridColumnHeaderClassNamePropType = string | GridColumnHeaderClassFn;

package/esm/models/gridColumnHeaderClass.js

@@ -0,0 +1 @@
+export {};

package/esm/models/gridColumnSpanning.d.ts

@@ -0,0 +1,12 @@
+export type GridColumnIndex = number;
+export type GridCellColSpanInfo = {
+  spannedByColSpan: true;
+  rightVisibleCellIndex: GridColumnIndex;
+  leftVisibleCellIndex: GridColumnIndex;
+} | {
+  spannedByColSpan: false;
+  cellProps: {
+    colSpan: number;
+    width: number;
+  };
+};

package/esm/models/gridColumnSpanning.js

@@ -0,0 +1 @@
+export {};

package/esm/models/gridDataSource.d.ts

@@ -0,0 +1,70 @@
+import type { GridSortModel, GridFilterModel, GridRowModel, GridPaginationModel, GridRowId } from '.';
+export interface GridGetRowsParams {
+  sortModel: GridSortModel;
+  filterModel: GridFilterModel;
+  /**
+   * Alternate to `start` and `end`, maps to `GridPaginationModel` interface.
+   */
+  paginationModel?: GridPaginationModel;
+  /**
+   * First row index to fetch (number) or cursor information (number | string).
+   */
+  start: number | string;
+  /**
+   * Last row index to fetch.
+   */
+  end: number;
+}
+export interface GridUpdateRowParams {
+  rowId: GridRowId;
+  updatedRow: GridRowModel;
+  previousRow: GridRowModel;
+}
+export interface GridGetRowsResponse {
+  rows: GridRowModel[];
+  /**
+   * To reflect updates in total `rowCount` (optional).
+   * Useful when the `rowCount` is inaccurate (for example when filtering) or not available upfront.
+   */
+  rowCount?: number;
+  /**
+   * Additional `pageInfo` for advanced use-cases.
+   * `hasNextPage`: When row count is unknown/estimated, `hasNextPage` will be used to check if more records are available on server.
+   */
+  pageInfo?: {
+    hasNextPage?: boolean;
+    nextCursor?: string;
+  };
+}
+export interface GridDataSource {
+  /**
+   * This method will be called when the grid needs to fetch some rows.
+   * @param {GridGetRowsParams} params The parameters required to fetch the rows.
+   * @returns {Promise<GridGetRowsResponse>} A promise that resolves to the data of type [GridGetRowsResponse].
+   */
+  getRows(params: GridGetRowsParams): Promise<GridGetRowsResponse>;
+  /**
+   * This method will be called when the user updates a row.
+   * @param {GridUpdateRowParams} params The parameters required to update the row.
+   * @returns {Promise<any>} If resolved (synced on the backend), the grid will update the row and mutate the cache.
+   */
+  updateRow?(params: GridUpdateRowParams): Promise<any>;
+}
+export interface GridDataSourceCache {
+  /**
+   * Set the cache entry for the given key.
+   * @param {GridGetRowsParams} key The key of type `GridGetRowsParams`.
+   * @param {GridGetRowsResponse} value The value to be stored in the cache.
+   */
+  set: (key: GridGetRowsParams, value: GridGetRowsResponse) => void;
+  /**
+   * Get the cache entry for the given key.
+   * @param {GridGetRowsParams} key The key of type `GridGetRowsParams`.
+   * @returns {GridGetRowsResponse} The value stored in the cache.
+   */
+  get: (key: GridGetRowsParams) => GridGetRowsResponse | undefined;
+  /**
+   * Clear the cache.
+   */
+  clear: () => void;
+}

package/esm/models/gridDataSource.js

@@ -0,0 +1 @@
+export {};

package/esm/models/gridDensity.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Available densities.
+ */
+export type GridDensity = 'compact' | 'standard' | 'comfortable';

package/esm/models/gridDensity.js

@@ -0,0 +1 @@
+export {};

package/esm/models/gridEditRowModel.d.ts

@@ -0,0 +1,28 @@
+import type { GridEditCellMeta } from './api/gridEditingApi';
+export interface GridEditCellProps<V = any> {
+  value?: V | undefined;
+  isValidating?: boolean;
+  isProcessingProps?: boolean;
+  changeReason?: GridEditCellMeta['changeReason'];
+  [prop: string]: any;
+}
+export type GridEditRowProps = {
+  [field: string]: GridEditCellProps;
+};
+export type GridEditingState = {
+  [rowId: string]: GridEditRowProps;
+};
+export type GridEditMode = 'cell' | 'row';
+declare enum GridEditModes {
+  Cell = "cell",
+  Row = "row",
+}
+declare enum GridCellModes {
+  Edit = "edit",
+  View = "view",
+}
+declare enum GridRowModes {
+  Edit = "edit",
+  View = "view",
+}
+export { GridEditModes, GridCellModes, GridRowModes };

package/esm/models/gridEditRowModel.js

@@ -0,0 +1,16 @@
+var GridEditModes = /*#__PURE__*/function (GridEditModes) {
+  GridEditModes["Cell"] = "cell";
+  GridEditModes["Row"] = "row";
+  return GridEditModes;
+}(GridEditModes || {});
+var GridCellModes = /*#__PURE__*/function (GridCellModes) {
+  GridCellModes["Edit"] = "edit";
+  GridCellModes["View"] = "view";
+  return GridCellModes;
+}(GridCellModes || {});
+var GridRowModes = /*#__PURE__*/function (GridRowModes) {
+  GridRowModes["Edit"] = "edit";
+  GridRowModes["View"] = "view";
+  return GridRowModes;
+}(GridRowModes || {});
+export { GridEditModes, GridCellModes, GridRowModes };