@mui/x-data-grid 7.12.1 → 7.14.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.

package/modern/utils/fastMemo.js

@@ -1,5 +0,0 @@
-import * as React from 'react';
-import { fastObjectShallowCompare } from './fastObjectShallowCompare';
-export function fastMemo(component) {
-  return /*#__PURE__*/React.memo(component, fastObjectShallowCompare);
-}

package/modern/utils/fastObjectShallowCompare.js

@@ -1,28 +0,0 @@
-const is = Object.is;
-export function fastObjectShallowCompare(a, b) {
-  if (a === b) {
-    return true;
-  }
-  if (!(a instanceof Object) || !(b instanceof Object)) {
-    return false;
-  }
-  let aLength = 0;
-  let bLength = 0;
-
-  /* eslint-disable guard-for-in */
-  for (const key in a) {
-    aLength += 1;
-    if (!is(a[key], b[key])) {
-      return false;
-    }
-    if (!(key in b)) {
-      return false;
-    }
-  }
-
-  /* eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-unused-vars */
-  for (const _ in b) {
-    bLength += 1;
-  }
-  return aLength === bLength;
-}

package/modern/utils/throttle.js

@@ -1,19 +0,0 @@
-export function throttle(func, wait = 166) {
-  let timeout;
-  let lastArgs;
-  const later = () => {
-    timeout = undefined;
-    func(...lastArgs);
-  };
-  function throttled(...args) {
-    lastArgs = args;
-    if (timeout === undefined) {
-      timeout = setTimeout(later, wait);
-    }
-  }
-  throttled.clear = () => {
-    clearTimeout(timeout);
-    timeout = undefined;
-  };
-  return throttled;
-}

package/node/utils/fastObjectShallowCompare.js

@@ -1,34 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.fastObjectShallowCompare = fastObjectShallowCompare;
-const is = Object.is;
-function fastObjectShallowCompare(a, b) {
-  if (a === b) {
-    return true;
-  }
-  if (!(a instanceof Object) || !(b instanceof Object)) {
-    return false;
-  }
-  let aLength = 0;
-  let bLength = 0;
-
-  /* eslint-disable guard-for-in */
-  for (const key in a) {
-    aLength += 1;
-    if (!is(a[key], b[key])) {
-      return false;
-    }
-    if (!(key in b)) {
-      return false;
-    }
-  }
-
-  /* eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-unused-vars */
-  for (const _ in b) {
-    bLength += 1;
-  }
-  return aLength === bLength;
-}

package/node/utils/throttle.js

@@ -1,25 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.throttle = throttle;
-function throttle(func, wait = 166) {
-  let timeout;
-  let lastArgs;
-  const later = () => {
-    timeout = undefined;
-    func(...lastArgs);
-  };
-  function throttled(...args) {
-    lastArgs = args;
-    if (timeout === undefined) {
-      timeout = setTimeout(later, wait);
-    }
-  }
-  throttled.clear = () => {
-    clearTimeout(timeout);
-    timeout = undefined;
-  };
-  return throttled;
-}

package/utils/fastMemo.d.ts

@@ -1 +0,0 @@
-export declare function fastMemo<T>(component: T): T;

package/utils/fastMemo.js

@@ -1,5 +0,0 @@
-import * as React from 'react';
-import { fastObjectShallowCompare } from './fastObjectShallowCompare';
-export function fastMemo(component) {
-  return /*#__PURE__*/React.memo(component, fastObjectShallowCompare);
-}

package/utils/fastObjectShallowCompare.d.ts

@@ -1 +0,0 @@
-export declare function fastObjectShallowCompare<T extends Record<string, any> | null>(a: T, b: T): boolean;

package/utils/fastObjectShallowCompare.js

@@ -1,28 +0,0 @@
-const is = Object.is;
-export function fastObjectShallowCompare(a, b) {
-  if (a === b) {
-    return true;
-  }
-  if (!(a instanceof Object) || !(b instanceof Object)) {
-    return false;
-  }
-  let aLength = 0;
-  let bLength = 0;
-
-  /* eslint-disable guard-for-in */
-  for (const key in a) {
-    aLength += 1;
-    if (!is(a[key], b[key])) {
-      return false;
-    }
-    if (!(key in b)) {
-      return false;
-    }
-  }
-
-  /* eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-unused-vars */
-  for (const _ in b) {
-    bLength += 1;
-  }
-  return aLength === bLength;
-}

package/utils/throttle.d.ts

@@ -1,4 +0,0 @@
-export interface Cancelable {
-    clear(): void;
-}
-export declare function throttle<T extends (...args: any[]) => any>(func: T, wait?: number): T & Cancelable;

package/utils/throttle.js

@@ -1,19 +0,0 @@
-export function throttle(func, wait = 166) {
-  let timeout;
-  let lastArgs;
-  const later = () => {
-    timeout = undefined;
-    func(...lastArgs);
-  };
-  function throttled(...args) {
-    lastArgs = args;
-    if (timeout === undefined) {
-      timeout = setTimeout(later, wait);
-    }
-  }
-  throttled.clear = () => {
-    clearTimeout(timeout);
-    timeout = undefined;
-  };
-  return throttled;
-}