@mui/x-data-grid 8.0.0-alpha.8 → 8.0.0-beta.0

package/modern/constants/cssVariables.d.ts

@@ -0,0 +1,264 @@
+declare const keys: {
+  readonly spacingUnit: "--DataGrid-t-spacing-unit";
+  readonly colors: {
+    readonly border: {
+      readonly base: "--DataGrid-t-color-border-base";
+    };
+    readonly foreground: {
+      readonly base: "--DataGrid-t-color-foreground-base";
+      readonly muted: "--DataGrid-t-color-foreground-muted";
+      readonly accent: "--DataGrid-t-color-foreground-accent";
+      readonly disabled: "--DataGrid-t-color-foreground-disabled";
+    };
+    readonly background: {
+      readonly base: "--DataGrid-t-color-background-base";
+      readonly overlay: "--DataGrid-t-color-background-overlay";
+      readonly backdrop: "--DataGrid-t-color-background-backdrop";
+    };
+    readonly interactive: {
+      readonly hover: "--DataGrid-t-color-interactive-hover";
+      readonly hoverOpacity: "--DataGrid-t-color-interactive-hover-opacity";
+      readonly focus: "--DataGrid-t-color-interactive-focus";
+      readonly focusOpacity: "--DataGrid-t-color-interactive-focus-opacity";
+      readonly disabled: "--DataGrid-t-color-interactive-disabled";
+      readonly disabledOpacity: "--DataGrid-t-color-interactive-disabled-opacity";
+      readonly selected: "--DataGrid-t-color-interactive-selected";
+      readonly selectedOpacity: "--DataGrid-t-color-interactive-selected-opacity";
+    };
+  };
+  readonly header: {
+    readonly background: {
+      readonly base: "--DataGrid-t-header-background-base";
+    };
+  };
+  readonly cell: {
+    readonly background: {
+      readonly pinned: "--DataGrid-t-cell-background-pinned";
+    };
+  };
+  readonly radius: {
+    readonly base: "--DataGrid-t-radius-base";
+  };
+  readonly typography: {
+    readonly font: {
+      readonly body: "--DataGrid-t-typography-font-body";
+      readonly small: "--DataGrid-t-typography-font-small";
+    };
+    readonly fontFamily: {
+      readonly base: "--DataGrid-t-typography-font-family-base";
+    };
+    readonly fontWeight: {
+      readonly light: "--DataGrid-t-typography-font-weight-light";
+      readonly regular: "--DataGrid-t-typography-font-weight-regular";
+      readonly medium: "--DataGrid-t-typography-font-weight-medium";
+      readonly bold: "--DataGrid-t-typography-font-weight-bold";
+    };
+  };
+  readonly transitions: {
+    readonly easing: {
+      readonly easeIn: "--DataGrid-t-transition-easing-ease-in";
+      readonly easeOut: "--DataGrid-t-transition-easing-ease-out";
+      readonly easeInOut: "--DataGrid-t-transition-easing-ease-in-out";
+    };
+    readonly duration: {
+      readonly short: "--DataGrid-t-transition-duration-short";
+      readonly base: "--DataGrid-t-transition-duration-base";
+      readonly long: "--DataGrid-t-transition-duration-long";
+    };
+  };
+  readonly shadows: {
+    readonly base: "--DataGrid-t-shadow-base";
+    readonly overlay: "--DataGrid-t-shadow-overlay";
+  };
+  readonly zIndex: {
+    readonly panel: "--DataGrid-t-z-index-panel";
+    readonly menu: "--DataGrid-t-z-index-menu";
+  };
+};
+export type GridCSSVariablesInterface = { [E in CreateObjectEntries<typeof keys> as E['value']]: string | number };
+type Entry = {
+  key: string;
+  value: unknown;
+};
+type EmptyEntry<TValue> = {
+  key: '';
+  value: TValue;
+};
+type CreateObjectEntries<TValue, TValueInitial = TValue> = TValue extends object ? { [TKey in keyof TValue]-?: TKey extends string ? OmitItself<TValue[TKey], TValueInitial> extends infer TNestedValue ? TNestedValue extends Entry ? {
+  key: `${TKey}.${TNestedValue['key']}`;
+  value: TNestedValue['value'];
+} : never : never : never }[keyof TValue] : EmptyEntry<TValue>;
+type OmitItself<TValue, TValueInitial> = TValue extends TValueInitial ? EmptyEntry<TValue> : CreateObjectEntries<TValue, TValueInitial>;
+export declare const vars: {
+  spacingUnit: "--DataGrid-t-spacing-unit";
+  colors: {
+    readonly border: {
+      readonly base: "--DataGrid-t-color-border-base";
+    };
+    readonly foreground: {
+      readonly base: "--DataGrid-t-color-foreground-base";
+      readonly muted: "--DataGrid-t-color-foreground-muted";
+      readonly accent: "--DataGrid-t-color-foreground-accent";
+      readonly disabled: "--DataGrid-t-color-foreground-disabled";
+    };
+    readonly background: {
+      readonly base: "--DataGrid-t-color-background-base";
+      readonly overlay: "--DataGrid-t-color-background-overlay";
+      readonly backdrop: "--DataGrid-t-color-background-backdrop";
+    };
+    readonly interactive: {
+      readonly hover: "--DataGrid-t-color-interactive-hover";
+      readonly hoverOpacity: "--DataGrid-t-color-interactive-hover-opacity";
+      readonly focus: "--DataGrid-t-color-interactive-focus";
+      readonly focusOpacity: "--DataGrid-t-color-interactive-focus-opacity";
+      readonly disabled: "--DataGrid-t-color-interactive-disabled";
+      readonly disabledOpacity: "--DataGrid-t-color-interactive-disabled-opacity";
+      readonly selected: "--DataGrid-t-color-interactive-selected";
+      readonly selectedOpacity: "--DataGrid-t-color-interactive-selected-opacity";
+    };
+  };
+  header: {
+    readonly background: {
+      readonly base: "--DataGrid-t-header-background-base";
+    };
+  };
+  cell: {
+    readonly background: {
+      readonly pinned: "--DataGrid-t-cell-background-pinned";
+    };
+  };
+  radius: {
+    readonly base: "--DataGrid-t-radius-base";
+  };
+  typography: {
+    readonly font: {
+      readonly body: "--DataGrid-t-typography-font-body";
+      readonly small: "--DataGrid-t-typography-font-small";
+    };
+    readonly fontFamily: {
+      readonly base: "--DataGrid-t-typography-font-family-base";
+    };
+    readonly fontWeight: {
+      readonly light: "--DataGrid-t-typography-font-weight-light";
+      readonly regular: "--DataGrid-t-typography-font-weight-regular";
+      readonly medium: "--DataGrid-t-typography-font-weight-medium";
+      readonly bold: "--DataGrid-t-typography-font-weight-bold";
+    };
+  };
+  transitions: {
+    readonly easing: {
+      readonly easeIn: "--DataGrid-t-transition-easing-ease-in";
+      readonly easeOut: "--DataGrid-t-transition-easing-ease-out";
+      readonly easeInOut: "--DataGrid-t-transition-easing-ease-in-out";
+    };
+    readonly duration: {
+      readonly short: "--DataGrid-t-transition-duration-short";
+      readonly base: "--DataGrid-t-transition-duration-base";
+      readonly long: "--DataGrid-t-transition-duration-long";
+    };
+  };
+  shadows: {
+    readonly base: "--DataGrid-t-shadow-base";
+    readonly overlay: "--DataGrid-t-shadow-overlay";
+  };
+  zIndex: {
+    readonly panel: "--DataGrid-t-z-index-panel";
+    readonly menu: "--DataGrid-t-z-index-menu";
+  };
+  breakpoints: {
+    values: {
+      xs: number;
+      sm: number;
+      md: number;
+      lg: number;
+      xl: number;
+    };
+    up: (key: any) => string;
+  };
+  spacing: typeof spacing;
+  transition: typeof transition;
+  keys: {
+    readonly spacingUnit: "--DataGrid-t-spacing-unit";
+    readonly colors: {
+      readonly border: {
+        readonly base: "--DataGrid-t-color-border-base";
+      };
+      readonly foreground: {
+        readonly base: "--DataGrid-t-color-foreground-base";
+        readonly muted: "--DataGrid-t-color-foreground-muted";
+        readonly accent: "--DataGrid-t-color-foreground-accent";
+        readonly disabled: "--DataGrid-t-color-foreground-disabled";
+      };
+      readonly background: {
+        readonly base: "--DataGrid-t-color-background-base";
+        readonly overlay: "--DataGrid-t-color-background-overlay";
+        readonly backdrop: "--DataGrid-t-color-background-backdrop";
+      };
+      readonly interactive: {
+        readonly hover: "--DataGrid-t-color-interactive-hover";
+        readonly hoverOpacity: "--DataGrid-t-color-interactive-hover-opacity";
+        readonly focus: "--DataGrid-t-color-interactive-focus";
+        readonly focusOpacity: "--DataGrid-t-color-interactive-focus-opacity";
+        readonly disabled: "--DataGrid-t-color-interactive-disabled";
+        readonly disabledOpacity: "--DataGrid-t-color-interactive-disabled-opacity";
+        readonly selected: "--DataGrid-t-color-interactive-selected";
+        readonly selectedOpacity: "--DataGrid-t-color-interactive-selected-opacity";
+      };
+    };
+    readonly header: {
+      readonly background: {
+        readonly base: "--DataGrid-t-header-background-base";
+      };
+    };
+    readonly cell: {
+      readonly background: {
+        readonly pinned: "--DataGrid-t-cell-background-pinned";
+      };
+    };
+    readonly radius: {
+      readonly base: "--DataGrid-t-radius-base";
+    };
+    readonly typography: {
+      readonly font: {
+        readonly body: "--DataGrid-t-typography-font-body";
+        readonly small: "--DataGrid-t-typography-font-small";
+      };
+      readonly fontFamily: {
+        readonly base: "--DataGrid-t-typography-font-family-base";
+      };
+      readonly fontWeight: {
+        readonly light: "--DataGrid-t-typography-font-weight-light";
+        readonly regular: "--DataGrid-t-typography-font-weight-regular";
+        readonly medium: "--DataGrid-t-typography-font-weight-medium";
+        readonly bold: "--DataGrid-t-typography-font-weight-bold";
+      };
+    };
+    readonly transitions: {
+      readonly easing: {
+        readonly easeIn: "--DataGrid-t-transition-easing-ease-in";
+        readonly easeOut: "--DataGrid-t-transition-easing-ease-out";
+        readonly easeInOut: "--DataGrid-t-transition-easing-ease-in-out";
+      };
+      readonly duration: {
+        readonly short: "--DataGrid-t-transition-duration-short";
+        readonly base: "--DataGrid-t-transition-duration-base";
+        readonly long: "--DataGrid-t-transition-duration-long";
+      };
+    };
+    readonly shadows: {
+      readonly base: "--DataGrid-t-shadow-base";
+      readonly overlay: "--DataGrid-t-shadow-overlay";
+    };
+    readonly zIndex: {
+      readonly panel: "--DataGrid-t-z-index-panel";
+      readonly menu: "--DataGrid-t-z-index-menu";
+    };
+  };
+};
+declare function spacing(a?: number, b?: number, c?: number, d?: number): string;
+declare function transition(props: string[], options?: {
+  duration?: string;
+  easing?: string;
+  delay?: number;
+}): string;
+export {};

package/modern/constants/cssVariables.js

@@ -0,0 +1,151 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+// NOTE: Breakpoints can't come from the theme because we need access to them at
+// initialization time and media-queries can't use CSS variables. For users with
+// custom breakpoints, we might want to provide a way to configure them globally
+// instead of through the theme.
+const breakpoints = {
+  values: {
+    xs: 0,
+    // phone
+    sm: 600,
+    // tablet
+    md: 900,
+    // small laptop
+    lg: 1200,
+    // desktop
+    xl: 1536 // large screen
+  },
+  up: key => {
+    const values = breakpoints.values;
+    const value = typeof values[key] === 'number' ? values[key] : key;
+    return `@media (min-width:${value}px)`;
+  }
+};
+const keys = {
+  spacingUnit: '--DataGrid-t-spacing-unit',
+  /* Variables */
+  colors: {
+    border: {
+      base: '--DataGrid-t-color-border-base'
+    },
+    foreground: {
+      base: '--DataGrid-t-color-foreground-base',
+      muted: '--DataGrid-t-color-foreground-muted',
+      accent: '--DataGrid-t-color-foreground-accent',
+      disabled: '--DataGrid-t-color-foreground-disabled'
+    },
+    background: {
+      base: '--DataGrid-t-color-background-base',
+      overlay: '--DataGrid-t-color-background-overlay',
+      backdrop: '--DataGrid-t-color-background-backdrop'
+    },
+    interactive: {
+      hover: '--DataGrid-t-color-interactive-hover',
+      hoverOpacity: '--DataGrid-t-color-interactive-hover-opacity',
+      focus: '--DataGrid-t-color-interactive-focus',
+      focusOpacity: '--DataGrid-t-color-interactive-focus-opacity',
+      disabled: '--DataGrid-t-color-interactive-disabled',
+      disabledOpacity: '--DataGrid-t-color-interactive-disabled-opacity',
+      selected: '--DataGrid-t-color-interactive-selected',
+      selectedOpacity: '--DataGrid-t-color-interactive-selected-opacity'
+    }
+  },
+  header: {
+    background: {
+      base: '--DataGrid-t-header-background-base'
+    }
+  },
+  cell: {
+    background: {
+      pinned: '--DataGrid-t-cell-background-pinned'
+    }
+  },
+  radius: {
+    base: '--DataGrid-t-radius-base'
+  },
+  typography: {
+    font: {
+      body: '--DataGrid-t-typography-font-body',
+      small: '--DataGrid-t-typography-font-small'
+    },
+    fontFamily: {
+      base: '--DataGrid-t-typography-font-family-base'
+    },
+    fontWeight: {
+      light: '--DataGrid-t-typography-font-weight-light',
+      regular: '--DataGrid-t-typography-font-weight-regular',
+      medium: '--DataGrid-t-typography-font-weight-medium',
+      bold: '--DataGrid-t-typography-font-weight-bold'
+    }
+  },
+  transitions: {
+    easing: {
+      easeIn: '--DataGrid-t-transition-easing-ease-in',
+      easeOut: '--DataGrid-t-transition-easing-ease-out',
+      easeInOut: '--DataGrid-t-transition-easing-ease-in-out'
+    },
+    duration: {
+      short: '--DataGrid-t-transition-duration-short',
+      base: '--DataGrid-t-transition-duration-base',
+      long: '--DataGrid-t-transition-duration-long'
+    }
+  },
+  shadows: {
+    base: '--DataGrid-t-shadow-base',
+    overlay: '--DataGrid-t-shadow-overlay'
+  },
+  zIndex: {
+    panel: '--DataGrid-t-z-index-panel',
+    menu: '--DataGrid-t-z-index-menu'
+  }
+};
+const values = wrap(keys);
+export const vars = _extends({
+  breakpoints,
+  spacing,
+  transition,
+  keys
+}, values);
+function spacing(a, b, c, d) {
+  /* eslint-disable prefer-template */
+  if (a === undefined) {
+    return spacingString(1);
+  }
+  if (b === undefined) {
+    return spacingString(a);
+  }
+  if (c === undefined) {
+    return spacingString(a) + ' ' + spacingString(b);
+  }
+  if (d === undefined) {
+    return spacingString(a) + ' ' + spacingString(b) + ' ' + spacingString(c);
+  }
+  return spacingString(a) + ' ' + spacingString(b) + ' ' + spacingString(c) + ' ' + spacingString(d);
+  /* eslint-enable prefer-template */
+}
+function spacingString(value) {
+  if (value === 0) {
+    return '0';
+  }
+  return `calc(var(--DataGrid-t-spacing-unit) * ${value})`;
+}
+function transition(props, options) {
+  const {
+    duration = vars.transitions.duration.base,
+    easing = vars.transitions.easing.easeInOut,
+    delay = 0
+  } = options ?? {};
+  return props.map(prop => `${prop} ${duration} ${easing} ${delay}ms`).join(', ');
+}
+function wrap(input) {
+  if (typeof input === 'string') {
+    return `var(${input})`;
+  }
+  const result = {};
+  for (const key in input) {
+    if (Object.hasOwn(input, key)) {
+      result[key] = wrap(input[key]);
+    }
+  }
+  return result;
+}

package/modern/constants/dataGridPropsDefaultValues.d.ts

@@ -0,0 +1,5 @@
+import type { DataGridPropsWithDefaultValues } from '../models/props/DataGridProps';
+/**
+ * The default values of `DataGridPropsWithDefaultValues` to inject in the props of DataGrid.
+ */
+export declare const DATA_GRID_PROPS_DEFAULT_VALUES: DataGridPropsWithDefaultValues;

package/modern/constants/dataGridPropsDefaultValues.js

@@ -51,6 +51,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   rowSpanning: false,
   showCellVerticalBorder: false,
   showColumnVerticalBorder: false,
+  showToolbar: false,
   sortingMode: 'client',
   sortingOrder: ['asc', 'desc', null],
   throttleRowsMs: 0,

package/modern/constants/defaultGridSlotsComponents.d.ts

@@ -0,0 +1,2 @@
+import { GridSlotsComponent } from "../models/index.js";
+export declare const DATA_GRID_DEFAULT_SLOTS_COMPONENTS: GridSlotsComponent;

package/modern/constants/defaultGridSlotsComponents.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount, GridColumnsManagement, GridColumnHeaderSortIcon } from "../components/index.js";
+import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount, GridColumnsManagement, GridColumnHeaderSortIcon, GridNoColumnsOverlay } from "../components/index.js";
 import { GridCell } from "../components/cell/GridCell.js";
 import { GridColumnHeaders } from "../components/GridColumnHeaders.js";
 import { GridColumnMenu } from "../components/menu/columnMenu/GridColumnMenu.js";
@@ -7,6 +7,8 @@ import { GridDetailPanels } from "../components/GridDetailPanels.js";
 import { GridPinnedRows } from "../components/GridPinnedRows.js";
 import { GridNoResultsOverlay } from "../components/GridNoResultsOverlay.js";
 import materialSlots from "../material/index.js";
+import { GridBottomContainer } from "../components/virtualization/GridBottomContainer.js";
+import { GridToolbar } from "../components/toolbarV8/GridToolbar.js";
 
 // TODO: camelCase these key. It's a private helper now.
 // Remove then need to call `uncapitalizeObjectKeys`.
@@ -18,13 +20,15 @@ export const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, materialSlots, {
   columnMenu: GridColumnMenu,
   columnHeaders: GridColumnHeaders,
   detailPanels: GridDetailPanels,
+  bottomContainer: GridBottomContainer,
   footer: GridFooter,
   footerRowCount: GridRowCount,
-  toolbar: null,
+  toolbar: GridToolbar,
   pinnedRows: GridPinnedRows,
   loadingOverlay: GridLoadingOverlay,
   noResultsOverlay: GridNoResultsOverlay,
   noRowsOverlay: GridNoRowsOverlay,
+  noColumnsOverlay: GridNoColumnsOverlay,
   pagination: GridPagination,
   filterPanel: GridFilterPanel,
   columnsPanel: GridColumnsPanel,

package/modern/constants/envConstants.d.ts

@@ -0,0 +1 @@
+export declare const GRID_EXPERIMENTAL_ENABLED = false;