@mui/x-data-grid 7.13.0 → 7.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.13.0",
+  "version": "7.15.0",
   "description": "The Community plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -37,18 +37,18 @@
     "directory": "packages/x-data-grid"
   },
   "dependencies": {
-    "@babel/runtime": "^7.25.0",
-    "@mui/system": "^5.16.5",
-    "@mui/utils": "^5.16.5",
+    "@babel/runtime": "^7.25.4",
+    "@mui/utils": "^5.16.6",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^4.1.8",
-    "@mui/x-internals": "7.13.0"
+    "@mui/x-internals": "7.15.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14",
+    "@mui/material": "^5.15.14 || ^6.0.0",
+    "@mui/system": "^5.15.14 || ^6.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },

package/utils/createSelector.d.ts

@@ -9,6 +9,14 @@ export interface OutputSelector<State, Result> {
     (state: State, instanceId: GridCoreApi['instanceId']): Result;
     acceptsApiRef: boolean;
 }
+export interface OutputSelectorV8<State, Args, Result> {
+    (apiRef: React.MutableRefObject<{
+        state: State;
+        instanceId: GridCoreApi['instanceId'];
+    }>, args: Args): Result;
+    (state: State, instanceId: GridCoreApi['instanceId']): Result;
+    acceptsApiRef: boolean;
+}
 type StateFromSelector<T> = T extends (first: infer F, ...args: any[]) => any ? F extends {
     state: infer F2;
 } ? F2 : F : never;
@@ -17,7 +25,18 @@ type StateFromSelectorList<Selectors extends readonly any[]> = Selectors extends
     ...other: infer R
 ] ? StateFromSelector<F> extends StateFromSelectorList<R> ? StateFromSelector<F> : StateFromSelectorList<R> : {};
 type SelectorArgs<Selectors extends ReadonlyArray<Selector<any>>, Result> = [selectors: [...Selectors], combiner: (...args: SelectorResultArray<Selectors>) => Result] | [...Selectors, (...args: SelectorResultArray<Selectors>) => Result];
+type SelectorResultArrayWithArgs<Selectors extends ReadonlyArray<Selector<any>>, Args> = [
+    ...SelectorResultArray<Selectors>,
+    Args
+];
+type SelectorArgsV8<Selectors extends ReadonlyArray<Selector<any>>, Args, Result> = [
+    selectors: [...Selectors],
+    combiner: (...args: SelectorResultArrayWithArgs<Selectors, Args>) => Result
+] | [...Selectors, (...args: SelectorResultArrayWithArgs<Selectors, Args>) => Result];
 type CreateSelectorFunction = <Selectors extends ReadonlyArray<Selector<any>>, Result>(...items: SelectorArgs<Selectors, Result>) => OutputSelector<StateFromSelectorList<Selectors>, Result>;
+type CreateSelectorFunctionV8 = <Selectors extends ReadonlyArray<Selector<any>>, Args, Result>(...items: SelectorArgsV8<Selectors, Args, Result>) => OutputSelectorV8<StateFromSelectorList<Selectors>, Args, Result>;
 export declare const createSelector: CreateSelectorFunction;
+export declare const createSelectorV8: CreateSelectorFunctionV8;
 export declare const createSelectorMemoized: CreateSelectorFunction;
+export declare const createSelectorMemoizedV8: CreateSelectorFunctionV8;
 export {};

package/utils/createSelector.js

@@ -1,5 +1,18 @@
 import { createSelector as reselectCreateSelector } from 'reselect';
 import { warnOnce } from '../internals/utils/warning';
+
+// TODO v8: Remove this type
+
+// TODO v8: Rename this type to `OutputSelector`
+
+// TODO v8: Remove this type
+
+// TODO v8: Rename this type to `SelectorArgs`
+
+// TODO v8: Remove this type
+
+// TODO v8: Rename this type to `CreateSelectorFunction`
+
 const cache = new WeakMap();
 function checkIsAPIRef(value) {
   return 'current' in value && 'instanceId' in value.current;
@@ -7,6 +20,8 @@ function checkIsAPIRef(value) {
 const DEFAULT_INSTANCE_ID = {
   id: 'default'
 };
+
+// TODO v8: Remove this function
 export const createSelector = (a, b, c, d, e, f, ...other) => {
   if (other.length > 0) {
     throw new Error('Unsupported number of selectors');
@@ -71,6 +86,74 @@ export const createSelector = (a, b, c, d, e, f, ...other) => {
   selector.acceptsApiRef = true;
   return selector;
 };
+
+// TODO v8: Rename this function to `createSelector`
+export const createSelectorV8 = (a, b, c, d, e, f, ...other) => {
+  if (other.length > 0) {
+    throw new Error('Unsupported number of selectors');
+  }
+  let selector;
+  if (a && b && c && d && e && f) {
+    selector = (stateOrApiRef, args, instanceIdParam) => {
+      const isAPIRef = checkIsAPIRef(stateOrApiRef);
+      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
+      const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
+      const va = a(state, args, instanceId);
+      const vb = b(state, args, instanceId);
+      const vc = c(state, args, instanceId);
+      const vd = d(state, args, instanceId);
+      const ve = e(state, args, instanceId);
+      return f(va, vb, vc, vd, ve, args);
+    };
+  } else if (a && b && c && d && e) {
+    selector = (stateOrApiRef, args, instanceIdParam) => {
+      const isAPIRef = checkIsAPIRef(stateOrApiRef);
+      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
+      const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
+      const va = a(state, args, instanceId);
+      const vb = b(state, args, instanceId);
+      const vc = c(state, args, instanceId);
+      const vd = d(state, args, instanceId);
+      return e(va, vb, vc, vd, args);
+    };
+  } else if (a && b && c && d) {
+    selector = (stateOrApiRef, args, instanceIdParam) => {
+      const isAPIRef = checkIsAPIRef(stateOrApiRef);
+      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
+      const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
+      const va = a(state, args, instanceId);
+      const vb = b(state, args, instanceId);
+      const vc = c(state, args, instanceId);
+      return d(va, vb, vc, args);
+    };
+  } else if (a && b && c) {
+    selector = (stateOrApiRef, args, instanceIdParam) => {
+      const isAPIRef = checkIsAPIRef(stateOrApiRef);
+      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
+      const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
+      const va = a(state, args, instanceId);
+      const vb = b(state, args, instanceId);
+      return c(va, vb, args);
+    };
+  } else if (a && b) {
+    selector = (stateOrApiRef, args, instanceIdParam) => {
+      const isAPIRef = checkIsAPIRef(stateOrApiRef);
+      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
+      const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
+      const va = a(state, args, instanceId);
+      return b(va, args);
+    };
+  } else {
+    throw new Error('Missing arguments');
+  }
+
+  // We use this property to detect if the selector was created with createSelector
+  // or it's only a simple function the receives the state and returns part of it.
+  selector.acceptsApiRef = true;
+  return selector;
+};
+
+// TODO v8: Remove this function
 export const createSelectorMemoized = (...args) => {
   const selector = (stateOrApiRef, instanceId) => {
     const isAPIRef = checkIsAPIRef(stateOrApiRef);
@@ -97,6 +180,39 @@ export const createSelectorMemoized = (...args) => {
     return fn(state, cacheKey);
   };
 
+  // We use this property to detect if the selector was created with createSelector
+  // or it's only a simple function the receives the state and returns part of it.
+  selector.acceptsApiRef = true;
+  return selector;
+};
+
+// TODO v8: Rename this function to `createSelectorMemoized`
+export const createSelectorMemoizedV8 = (...args) => {
+  const selector = (stateOrApiRef, selectorArgs, instanceId) => {
+    const isAPIRef = checkIsAPIRef(stateOrApiRef);
+    const cacheKey = isAPIRef ? stateOrApiRef.current.instanceId : instanceId ?? DEFAULT_INSTANCE_ID;
+    const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
+    if (process.env.NODE_ENV !== 'production') {
+      if (cacheKey.id === 'default') {
+        warnOnce(['MUI X: A selector was called without passing the instance ID, which may impact the performance of the grid.', 'To fix, call it with `apiRef`, for example `mySelector(apiRef)`, or pass the instance ID explicitly, for example `mySelector(state, apiRef.current.instanceId)`.']);
+      }
+    }
+    const cacheArgsInit = cache.get(cacheKey);
+    const cacheArgs = cacheArgsInit ?? new Map();
+    const cacheFn = cacheArgs?.get(args);
+    if (cacheArgs && cacheFn) {
+      // We pass the cache key because the called selector might have as
+      // dependency another selector created with this `createSelector`.
+      return cacheFn(state, selectorArgs, cacheKey);
+    }
+    const fn = reselectCreateSelector(...args);
+    if (!cacheArgsInit) {
+      cache.set(cacheKey, cacheArgs);
+    }
+    cacheArgs.set(args, fn);
+    return fn(state, selectorArgs, cacheKey);
+  };
+
   // We use this property to detect if the selector was created with createSelector
   // or it's only a simple function the receives the state and returns part of it.
   selector.acceptsApiRef = true;

package/utils/keyboardUtils.d.ts

@@ -1,12 +1,4 @@
 import * as React from 'react';
-/**
- * @deprecated there is no meaninfuly logic abstracted, use event.key directly.
- */
-export declare const isEscapeKey: (key: string) => boolean;
-/**
- * @deprecated there is no meaninfuly logic abstracted, use event.key directly.
- */
-export declare const isTabKey: (key: string) => boolean;
 export declare function isPrintableKey(event: React.KeyboardEvent<HTMLElement>): boolean;
 export declare const GRID_MULTIPLE_SELECTION_KEYS: string[];
 export declare const GRID_CELL_EXIT_EDIT_MODE_KEYS: string[];
@@ -17,5 +9,5 @@ export declare const isCellExitEditModeKeys: (key: string) => boolean;
 export declare const isCellEditCommitKeys: (key: string) => boolean;
 export declare const isNavigationKey: (key: string) => boolean;
 export declare const isKeyboardEvent: (event: any) => event is React.KeyboardEvent<HTMLElement>;
-export declare const isHideMenuKey: (key: React.KeyboardEvent["key"]) => boolean;
+export declare const isHideMenuKey: (key: React.KeyboardEvent["key"]) => key is "Tab" | "Escape";
 export declare function isPasteShortcut(event: React.KeyboardEvent): boolean;

package/utils/keyboardUtils.js

@@ -1,13 +1,3 @@
-/**
- * @deprecated there is no meaninfuly logic abstracted, use event.key directly.
- */
-export const isEscapeKey = key => key === 'Escape';
-
-/**
- * @deprecated there is no meaninfuly logic abstracted, use event.key directly.
- */
-export const isTabKey = key => key === 'Tab';
-
 // Non printable keys have a name, for example "ArrowRight", see the whole list:
 // https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
 // So event.key.length === 1 is often enough.
@@ -27,7 +17,7 @@ export const isCellExitEditModeKeys = key => GRID_CELL_EXIT_EDIT_MODE_KEYS.index
 export const isCellEditCommitKeys = key => GRID_CELL_EDIT_COMMIT_KEYS.indexOf(key) > -1;
 export const isNavigationKey = key => key.indexOf('Arrow') === 0 || key.indexOf('Page') === 0 || key === ' ' || key === 'Home' || key === 'End';
 export const isKeyboardEvent = event => !!event.key;
-export const isHideMenuKey = key => isTabKey(key) || isEscapeKey(key);
+export const isHideMenuKey = key => key === 'Tab' || key === 'Escape';
 
 // In theory, on macOS, ctrl + v doesn't trigger a paste, so the function should return false.
 // However, maybe it's overkill to fix, so let's be lazy.