@redsift/table 12.3.0 → 12.3.1-muiv6-alpha.2

package/_internal/useControlledDatagridState.js

@@ -1,10 +1,14 @@
+import { P as PropTypes, z as exactProp, x as useTheme$1, a as _extends, _ as _objectWithoutPropertiesLoose, T as THEME_ID } from './Portal.js';
 import * as React from 'react';
 import { useState, useEffect } from 'react';
-import { P as PropTypes, K as exactProp, L as useTheme$1, B as useId, M as useEnhancedEffect, N as GlobalStyles, R as RtlProvider, Q as DefaultPropsProvider, U as GlobalStyles$1, T as THEME_ID, j as createTheme, V as createTypography, e as styleFunctionSx } from './ServerSideControlledPagination.js';
 import { j as jsxRuntimeExports } from './jsx-runtime.js';
 import { ThemeContext as ThemeContext$2 } from '@emotion/react';
 import styled, { css } from 'styled-components';
 
+/* eslint-disable */
+// https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
+var ponyfillGlobal = typeof window != 'undefined' && window.Math == Math ? window : typeof self != 'undefined' && self.Math == Math ? self : Function('return this')();
+
 const ThemeContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== 'production') {
   ThemeContext.displayName = 'ThemeContext';
@@ -14,8 +18,7 @@ var ThemeContext$1 = ThemeContext;
 function useTheme() {
   const theme = React.useContext(ThemeContext$1);
   if (process.env.NODE_ENV !== 'production') {
-    // TODO: uncomment once we enable eslint-plugin-react-compiler eslint-disable-next-line react-compiler/react-compiler
-    // eslint-disable-next-line react-hooks/rules-of-hooks -- It's not required to run React.useDebugValue in production
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useDebugValue(theme);
   }
   return theme;
@@ -57,9 +60,7 @@ function ThemeProvider$2(props) {
     }
   }
   const theme = React.useMemo(() => {
-    const output = outerTheme === null ? {
-      ...localTheme
-    } : mergeOuterLocalTheme(outerTheme, localTheme);
+    const output = outerTheme === null ? localTheme : mergeOuterLocalTheme(outerTheme, localTheme);
     if (output != null) {
       output[nested] = outerTheme !== null;
     }
@@ -84,58 +85,15 @@ if (process.env.NODE_ENV !== 'production') {
   process.env.NODE_ENV !== "production" ? ThemeProvider$2.propTypes = exactProp(ThemeProvider$2.propTypes) : void 0;
 }
 
-function useLayerOrder(theme) {
-  const upperTheme = useTheme$1();
-  const id = useId() || '';
-  const {
-    modularCssLayers
-  } = theme;
-  let layerOrder = 'mui.global, mui.components, mui.theme, mui.custom, mui.sx';
-  if (!modularCssLayers || upperTheme !== null) {
-    // skip this hook if upper theme exists.
-    layerOrder = '';
-  } else if (typeof modularCssLayers === 'string') {
-    layerOrder = modularCssLayers.replace(/mui(?!\.)/g, layerOrder);
-  } else {
-    layerOrder = `@layer ${layerOrder};`;
-  }
-  useEnhancedEffect(() => {
-    const head = document.querySelector('head');
-    if (!head) {
-      return;
-    }
-    const firstChild = head.firstChild;
-    if (layerOrder) {
-      // Only insert if first child doesn't have data-mui-layer-order attribute
-      if (firstChild && firstChild.hasAttribute?.('data-mui-layer-order') && firstChild.getAttribute('data-mui-layer-order') === id) {
-        return;
-      }
-      const styleElement = document.createElement('style');
-      styleElement.setAttribute('data-mui-layer-order', id);
-      styleElement.textContent = layerOrder;
-      head.prepend(styleElement);
-    } else {
-      head.querySelector(`style[data-mui-layer-order="${id}"]`)?.remove();
-    }
-  }, [layerOrder, id]);
-  if (!layerOrder) {
-    return null;
-  }
-  return /*#__PURE__*/jsxRuntimeExports.jsx(GlobalStyles, {
-    styles: layerOrder
-  });
-}
-
 const EMPTY_THEME = {};
 function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
   return React.useMemo(() => {
     const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
     if (typeof localTheme === 'function') {
       const mergedTheme = localTheme(resolvedTheme);
-      const result = themeId ? {
-        ...upperTheme,
+      const result = themeId ? _extends({}, upperTheme, {
         [themeId]: mergedTheme
-      } : mergedTheme;
+      }) : mergedTheme;
       // must return a function for the private theme to NOT merge with the upper theme.
       // see the test case "use provided theme from a callback" in ThemeProvider.test.js
       if (isPrivate) {
@@ -143,13 +101,9 @@ function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
       }
       return result;
     }
-    return themeId ? {
-      ...upperTheme,
+    return themeId ? _extends({}, upperTheme, {
       [themeId]: localTheme
-    } : {
-      ...upperTheme,
-      ...localTheme
-    };
+    }) : _extends({}, upperTheme, localTheme);
   }, [themeId, upperTheme, localTheme, isPrivate]);
 }
 
@@ -175,27 +129,19 @@ function ThemeProvider$1(props) {
   }
   const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
   const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
-  const rtlValue = (themeId ? engineTheme[themeId] : engineTheme).direction === 'rtl';
-  const layerOrder = useLayerOrder(engineTheme);
   return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$2, {
     theme: privateTheme,
     children: /*#__PURE__*/jsxRuntimeExports.jsx(ThemeContext$2.Provider, {
       value: engineTheme,
-      children: /*#__PURE__*/jsxRuntimeExports.jsx(RtlProvider, {
-        value: rtlValue,
-        children: /*#__PURE__*/jsxRuntimeExports.jsxs(DefaultPropsProvider, {
-          value: themeId ? engineTheme[themeId].components : engineTheme.components,
-          children: [layerOrder, children]
-        })
-      })
+      children: children
     })
   });
 }
 process.env.NODE_ENV !== "production" ? ThemeProvider$1.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * Your component tree.
    */
@@ -213,857 +159,41 @@ if (process.env.NODE_ENV !== 'production') {
   process.env.NODE_ENV !== "production" ? ThemeProvider$1.propTypes = exactProp(ThemeProvider$1.propTypes) : void 0;
 }
 
-const DEFAULT_MODE_STORAGE_KEY = 'mode';
-const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
-const DEFAULT_ATTRIBUTE = 'data-color-scheme';
-function InitColorSchemeScript(options) {
-  const {
-    defaultMode = 'system',
-    defaultLightColorScheme = 'light',
-    defaultDarkColorScheme = 'dark',
-    modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
-    colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-    attribute: initialAttribute = DEFAULT_ATTRIBUTE,
-    colorSchemeNode = 'document.documentElement',
-    nonce
-  } = options || {};
-  let setter = '';
-  let attribute = initialAttribute;
-  if (initialAttribute === 'class') {
-    attribute = '.%s';
-  }
-  if (initialAttribute === 'data') {
-    attribute = '[data-%s]';
-  }
-  if (attribute.startsWith('.')) {
-    const selector = attribute.substring(1);
-    setter += `${colorSchemeNode}.classList.remove('${selector}'.replace('%s', light), '${selector}'.replace('%s', dark));
-      ${colorSchemeNode}.classList.add('${selector}'.replace('%s', colorScheme));`;
-  }
-  const matches = attribute.match(/\[([^[\]]+)\]/); // case [data-color-scheme='%s'] or [data-color-scheme]
-  if (matches) {
-    const [attr, value] = matches[1].split('=');
-    if (!value) {
-      setter += `${colorSchemeNode}.removeAttribute('${attr}'.replace('%s', light));
-      ${colorSchemeNode}.removeAttribute('${attr}'.replace('%s', dark));`;
-    }
-    setter += `
-      ${colorSchemeNode}.setAttribute('${attr}'.replace('%s', colorScheme), ${value ? `${value}.replace('%s', colorScheme)` : '""'});`;
-  } else if (attribute !== '.%s') {
-    setter += `${colorSchemeNode}.setAttribute('${attribute}', colorScheme);`;
-  }
-  return /*#__PURE__*/jsxRuntimeExports.jsx("script", {
-    suppressHydrationWarning: true,
-    nonce: typeof window === 'undefined' ? nonce : ''
-    // eslint-disable-next-line react/no-danger
-    ,
-    dangerouslySetInnerHTML: {
-      __html: `(function() {
-try {
-  let colorScheme = '';
-  const mode = localStorage.getItem('${modeStorageKey}') || '${defaultMode}';
-  const dark = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
-  const light = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
-  if (mode === 'system') {
-    // handle system mode
-    const mql = window.matchMedia('(prefers-color-scheme: dark)');
-    if (mql.matches) {
-      colorScheme = dark
-    } else {
-      colorScheme = light
-    }
-  }
-  if (mode === 'light') {
-    colorScheme = light;
-  }
-  if (mode === 'dark') {
-    colorScheme = dark;
-  }
-  if (colorScheme) {
-    ${setter}
-  }
-} catch(e){}})();`
-    }
-  }, "mui-color-scheme-init");
-}
-
-function noop$1() {}
-const localStorageManager = ({
-  key,
-  storageWindow
-}) => {
-  if (!storageWindow && typeof window !== 'undefined') {
-    storageWindow = window;
-  }
-  return {
-    get(defaultValue) {
-      if (typeof window === 'undefined') {
-        return undefined;
-      }
-      if (!storageWindow) {
-        return defaultValue;
-      }
-      let value;
-      try {
-        value = storageWindow.localStorage.getItem(key);
-      } catch {
-        // Unsupported
-      }
-      return value || defaultValue;
-    },
-    set: value => {
-      if (storageWindow) {
-        try {
-          storageWindow.localStorage.setItem(key, value);
-        } catch {
-          // Unsupported
-        }
-      }
-    },
-    subscribe: handler => {
-      if (!storageWindow) {
-        return noop$1;
-      }
-      const listener = event => {
-        const value = event.newValue;
-        if (event.key === key) {
-          handler(value);
-        }
-      };
-      storageWindow.addEventListener('storage', listener);
-      return () => {
-        storageWindow.removeEventListener('storage', listener);
-      };
-    }
-  };
-};
-var localStorageManager$1 = localStorageManager;
-
-function noop() {}
-function getSystemMode(mode) {
-  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function' && mode === 'system') {
-    const mql = window.matchMedia('(prefers-color-scheme: dark)');
-    if (mql.matches) {
-      return 'dark';
-    }
-    return 'light';
-  }
-  return undefined;
-}
-function processState(state, callback) {
-  if (state.mode === 'light' || state.mode === 'system' && state.systemMode === 'light') {
-    return callback('light');
-  }
-  if (state.mode === 'dark' || state.mode === 'system' && state.systemMode === 'dark') {
-    return callback('dark');
-  }
-  return undefined;
-}
-function getColorScheme(state) {
-  return processState(state, mode => {
-    if (mode === 'light') {
-      return state.lightColorScheme;
-    }
-    if (mode === 'dark') {
-      return state.darkColorScheme;
-    }
-    return undefined;
-  });
-}
-function useCurrentColorScheme(options) {
-  const {
-    defaultMode = 'light',
-    defaultLightColorScheme,
-    defaultDarkColorScheme,
-    supportedColorSchemes = [],
-    modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
-    colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-    storageWindow = typeof window === 'undefined' ? undefined : window,
-    storageManager = localStorageManager$1,
-    noSsr = false
-  } = options;
-  const joinedColorSchemes = supportedColorSchemes.join(',');
-  const isMultiSchemes = supportedColorSchemes.length > 1;
-  const modeStorage = React.useMemo(() => storageManager?.({
-    key: modeStorageKey,
-    storageWindow
-  }), [storageManager, modeStorageKey, storageWindow]);
-  const lightStorage = React.useMemo(() => storageManager?.({
-    key: `${colorSchemeStorageKey}-light`,
-    storageWindow
-  }), [storageManager, colorSchemeStorageKey, storageWindow]);
-  const darkStorage = React.useMemo(() => storageManager?.({
-    key: `${colorSchemeStorageKey}-dark`,
-    storageWindow
-  }), [storageManager, colorSchemeStorageKey, storageWindow]);
-  const [state, setState] = React.useState(() => {
-    const initialMode = modeStorage?.get(defaultMode) || defaultMode;
-    const lightColorScheme = lightStorage?.get(defaultLightColorScheme) || defaultLightColorScheme;
-    const darkColorScheme = darkStorage?.get(defaultDarkColorScheme) || defaultDarkColorScheme;
-    return {
-      mode: initialMode,
-      systemMode: getSystemMode(initialMode),
-      lightColorScheme,
-      darkColorScheme
-    };
-  });
-  const [isClient, setIsClient] = React.useState(noSsr || !isMultiSchemes);
-  React.useEffect(() => {
-    setIsClient(true); // to rerender the component after hydration
-  }, []);
-  const colorScheme = getColorScheme(state);
-  const setMode = React.useCallback(mode => {
-    setState(currentState => {
-      if (mode === currentState.mode) {
-        // do nothing if mode does not change
-        return currentState;
-      }
-      const newMode = mode ?? defaultMode;
-      modeStorage?.set(newMode);
-      return {
-        ...currentState,
-        mode: newMode,
-        systemMode: getSystemMode(newMode)
-      };
-    });
-  }, [modeStorage, defaultMode]);
-  const setColorScheme = React.useCallback(value => {
-    if (!value) {
-      setState(currentState => {
-        lightStorage?.set(defaultLightColorScheme);
-        darkStorage?.set(defaultDarkColorScheme);
-        return {
-          ...currentState,
-          lightColorScheme: defaultLightColorScheme,
-          darkColorScheme: defaultDarkColorScheme
-        };
-      });
-    } else if (typeof value === 'string') {
-      if (value && !joinedColorSchemes.includes(value)) {
-        console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
-      } else {
-        setState(currentState => {
-          const newState = {
-            ...currentState
-          };
-          processState(currentState, mode => {
-            if (mode === 'light') {
-              lightStorage?.set(value);
-              newState.lightColorScheme = value;
-            }
-            if (mode === 'dark') {
-              darkStorage?.set(value);
-              newState.darkColorScheme = value;
-            }
-          });
-          return newState;
-        });
-      }
-    } else {
-      setState(currentState => {
-        const newState = {
-          ...currentState
-        };
-        const newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
-        const newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
-        if (newLightColorScheme) {
-          if (!joinedColorSchemes.includes(newLightColorScheme)) {
-            console.error(`\`${newLightColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
-          } else {
-            newState.lightColorScheme = newLightColorScheme;
-            lightStorage?.set(newLightColorScheme);
-          }
-        }
-        if (newDarkColorScheme) {
-          if (!joinedColorSchemes.includes(newDarkColorScheme)) {
-            console.error(`\`${newDarkColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
-          } else {
-            newState.darkColorScheme = newDarkColorScheme;
-            darkStorage?.set(newDarkColorScheme);
-          }
-        }
-        return newState;
-      });
-    }
-  }, [joinedColorSchemes, lightStorage, darkStorage, defaultLightColorScheme, defaultDarkColorScheme]);
-  const handleMediaQuery = React.useCallback(event => {
-    if (state.mode === 'system') {
-      setState(currentState => {
-        const systemMode = event?.matches ? 'dark' : 'light';
-
-        // Early exit, nothing changed.
-        if (currentState.systemMode === systemMode) {
-          return currentState;
-        }
-        return {
-          ...currentState,
-          systemMode
-        };
-      });
-    }
-  }, [state.mode]);
-
-  // Ref hack to avoid adding handleMediaQuery as a dep
-  const mediaListener = React.useRef(handleMediaQuery);
-  mediaListener.current = handleMediaQuery;
-  React.useEffect(() => {
-    if (typeof window.matchMedia !== 'function' || !isMultiSchemes) {
-      return undefined;
-    }
-    const handler = (...args) => mediaListener.current(...args);
-
-    // Always listen to System preference
-    const media = window.matchMedia('(prefers-color-scheme: dark)');
-
-    // Intentionally use deprecated listener methods to support iOS & old browsers
-    media.addListener(handler);
-    handler(media);
-    return () => {
-      media.removeListener(handler);
-    };
-  }, [isMultiSchemes]);
-
-  // Handle when localStorage has changed
-  React.useEffect(() => {
-    if (isMultiSchemes) {
-      const unsubscribeMode = modeStorage?.subscribe(value => {
-        if (!value || ['light', 'dark', 'system'].includes(value)) {
-          setMode(value || defaultMode);
-        }
-      }) || noop;
-      const unsubscribeLight = lightStorage?.subscribe(value => {
-        if (!value || joinedColorSchemes.match(value)) {
-          setColorScheme({
-            light: value
-          });
-        }
-      }) || noop;
-      const unsubscribeDark = darkStorage?.subscribe(value => {
-        if (!value || joinedColorSchemes.match(value)) {
-          setColorScheme({
-            dark: value
-          });
-        }
-      }) || noop;
-      return () => {
-        unsubscribeMode();
-        unsubscribeLight();
-        unsubscribeDark();
-      };
-    }
-    return undefined;
-  }, [setColorScheme, setMode, joinedColorSchemes, defaultMode, storageWindow, isMultiSchemes, modeStorage, lightStorage, darkStorage]);
-  return {
-    ...state,
-    mode: isClient ? state.mode : undefined,
-    systemMode: isClient ? state.systemMode : undefined,
-    colorScheme: isClient ? colorScheme : undefined,
-    setMode,
-    setColorScheme
-  };
-}
-
-const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
-function createCssVarsProvider(options) {
-  const {
-    themeId,
-    /**
-     * This `theme` object needs to follow a certain structure to
-     * be used correctly by the finel `CssVarsProvider`. It should have a
-     * `colorSchemes` key with the light and dark (and any other) palette.
-     * It should also ideally have a vars object created using `prepareCssVars`.
-     */
-    theme: defaultTheme = {},
-    modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,
-    colorSchemeStorageKey: defaultColorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-    disableTransitionOnChange: designSystemTransitionOnChange = false,
-    defaultColorScheme,
-    resolveTheme
-  } = options;
-  const defaultContext = {
-    allColorSchemes: [],
-    colorScheme: undefined,
-    darkColorScheme: undefined,
-    lightColorScheme: undefined,
-    mode: undefined,
-    setColorScheme: () => {},
-    setMode: () => {},
-    systemMode: undefined
-  };
-  const ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
-  if (process.env.NODE_ENV !== 'production') {
-    ColorSchemeContext.displayName = 'ColorSchemeContext';
-  }
-  const useColorScheme = () => React.useContext(ColorSchemeContext) || defaultContext;
-  const defaultColorSchemes = {};
-  const defaultComponents = {};
-  function CssVarsProvider(props) {
-    const {
-      children,
-      theme: themeProp,
-      modeStorageKey = defaultModeStorageKey,
-      colorSchemeStorageKey = defaultColorSchemeStorageKey,
-      disableTransitionOnChange = designSystemTransitionOnChange,
-      storageManager,
-      storageWindow = typeof window === 'undefined' ? undefined : window,
-      documentNode = typeof document === 'undefined' ? undefined : document,
-      colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
-      disableNestedContext = false,
-      disableStyleSheetGeneration = false,
-      defaultMode: initialMode = 'system',
-      forceThemeRerender = false,
-      noSsr
-    } = props;
-    const hasMounted = React.useRef(false);
-    const upperTheme = useTheme();
-    const ctx = React.useContext(ColorSchemeContext);
-    const nested = !!ctx && !disableNestedContext;
-    const initialTheme = React.useMemo(() => {
-      if (themeProp) {
-        return themeProp;
-      }
-      return typeof defaultTheme === 'function' ? defaultTheme() : defaultTheme;
-    }, [themeProp]);
-    const scopedTheme = initialTheme[themeId];
-    const restThemeProp = scopedTheme || initialTheme;
-    const {
-      colorSchemes = defaultColorSchemes,
-      components = defaultComponents,
-      cssVarPrefix
-    } = restThemeProp;
-    const joinedColorSchemes = Object.keys(colorSchemes).filter(k => !!colorSchemes[k]).join(',');
-    const allColorSchemes = React.useMemo(() => joinedColorSchemes.split(','), [joinedColorSchemes]);
-    const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
-    const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
-    const defaultMode = colorSchemes[defaultLightColorScheme] && colorSchemes[defaultDarkColorScheme] ? initialMode : colorSchemes[restThemeProp.defaultColorScheme]?.palette?.mode || restThemeProp.palette?.mode;
-
-    // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
-    const {
-      mode: stateMode,
-      setMode,
-      systemMode,
-      lightColorScheme,
-      darkColorScheme,
-      colorScheme: stateColorScheme,
-      setColorScheme
-    } = useCurrentColorScheme({
-      supportedColorSchemes: allColorSchemes,
-      defaultLightColorScheme,
-      defaultDarkColorScheme,
-      modeStorageKey,
-      colorSchemeStorageKey,
-      defaultMode,
-      storageManager,
-      storageWindow,
-      noSsr
-    });
-    let mode = stateMode;
-    let colorScheme = stateColorScheme;
-    if (nested) {
-      mode = ctx.mode;
-      colorScheme = ctx.colorScheme;
-    }
-    if (process.env.NODE_ENV !== 'production') {
-      if (forceThemeRerender && !restThemeProp.vars) {
-        console.warn(['MUI: The `forceThemeRerender` prop should only be used with CSS theme variables.', 'Note that it will slow down the app when changing between modes, so only do this when you cannot find a better solution.'].join('\n'));
-      }
-    }
-
-    // `colorScheme` is undefined on the server and hydration phase
-    let calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme;
-    if (restThemeProp.vars && !forceThemeRerender) {
-      calculatedColorScheme = restThemeProp.defaultColorScheme;
-    }
-    const memoTheme = React.useMemo(() => {
-      // 2. get the `vars` object that refers to the CSS custom properties
-      const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
-
-      // 3. Start composing the theme object
-      const theme = {
-        ...restThemeProp,
-        components,
-        colorSchemes,
-        cssVarPrefix,
-        vars: themeVars
-      };
-      if (typeof theme.generateSpacing === 'function') {
-        theme.spacing = theme.generateSpacing();
-      }
-
-      // 4. Resolve the color scheme and merge it to the theme
-      if (calculatedColorScheme) {
-        const scheme = colorSchemes[calculatedColorScheme];
-        if (scheme && typeof scheme === 'object') {
-          // 4.1 Merge the selected color scheme to the theme
-          Object.keys(scheme).forEach(schemeKey => {
-            if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
-              // shallow merge the 1st level structure of the theme.
-              theme[schemeKey] = {
-                ...theme[schemeKey],
-                ...scheme[schemeKey]
-              };
-            } else {
-              theme[schemeKey] = scheme[schemeKey];
-            }
-          });
-        }
-      }
-      return resolveTheme ? resolveTheme(theme) : theme;
-    }, [restThemeProp, calculatedColorScheme, components, colorSchemes, cssVarPrefix]);
-
-    // 5. Declaring effects
-    // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
-    const colorSchemeSelector = restThemeProp.colorSchemeSelector;
-    useEnhancedEffect(() => {
-      if (colorScheme && colorSchemeNode && colorSchemeSelector && colorSchemeSelector !== 'media') {
-        const selector = colorSchemeSelector;
-        let rule = colorSchemeSelector;
-        if (selector === 'class') {
-          rule = `.%s`;
-        }
-        if (selector === 'data') {
-          rule = `[data-%s]`;
-        }
-        if (selector?.startsWith('data-') && !selector.includes('%s')) {
-          // 'data-mui-color-scheme' -> '[data-mui-color-scheme="%s"]'
-          rule = `[${selector}="%s"]`;
-        }
-        if (rule.startsWith('.')) {
-          colorSchemeNode.classList.remove(...allColorSchemes.map(scheme => rule.substring(1).replace('%s', scheme)));
-          colorSchemeNode.classList.add(rule.substring(1).replace('%s', colorScheme));
-        } else {
-          const matches = rule.replace('%s', colorScheme).match(/\[([^\]]+)\]/);
-          if (matches) {
-            const [attr, value] = matches[1].split('=');
-            if (!value) {
-              // for attributes like `data-theme-dark`, `data-theme-light`
-              // remove all the existing data attributes before setting the new one
-              allColorSchemes.forEach(scheme => {
-                colorSchemeNode.removeAttribute(attr.replace(colorScheme, scheme));
-              });
-            }
-            colorSchemeNode.setAttribute(attr, value ? value.replace(/"|'/g, '') : '');
-          } else {
-            colorSchemeNode.setAttribute(rule, colorScheme);
-          }
-        }
-      }
-    }, [colorScheme, colorSchemeSelector, colorSchemeNode, allColorSchemes]);
-
-    // 5.2 Remove the CSS transition when color scheme changes to create instant experience.
-    // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
-    React.useEffect(() => {
-      let timer;
-      if (disableTransitionOnChange && hasMounted.current && documentNode) {
-        const css = documentNode.createElement('style');
-        css.appendChild(documentNode.createTextNode(DISABLE_CSS_TRANSITION));
-        documentNode.head.appendChild(css);
-
-        // Force browser repaint
-        (() => window.getComputedStyle(documentNode.body))();
-        timer = setTimeout(() => {
-          documentNode.head.removeChild(css);
-        }, 1);
-      }
-      return () => {
-        clearTimeout(timer);
-      };
-    }, [colorScheme, disableTransitionOnChange, documentNode]);
-    React.useEffect(() => {
-      hasMounted.current = true;
-      return () => {
-        hasMounted.current = false;
-      };
-    }, []);
-    const contextValue = React.useMemo(() => ({
-      allColorSchemes,
-      colorScheme,
-      darkColorScheme,
-      lightColorScheme,
-      mode,
-      setColorScheme,
-      setMode: process.env.NODE_ENV === 'production' ? setMode : newMode => {
-        if (memoTheme.colorSchemeSelector === 'media') {
-          console.error(['MUI: The `setMode` function has no effect if `colorSchemeSelector` is `media` (`media` is the default value).', 'To toggle the mode manually, please configure `colorSchemeSelector` to use a class or data attribute.', 'To learn more, visit https://mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually'].join('\n'));
-        }
-        setMode(newMode);
-      },
-      systemMode
-    }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode, memoTheme.colorSchemeSelector]);
-    let shouldGenerateStyleSheet = true;
-    if (disableStyleSheetGeneration || restThemeProp.cssVariables === false || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
-      shouldGenerateStyleSheet = false;
-    }
-    const element = /*#__PURE__*/jsxRuntimeExports.jsxs(React.Fragment, {
-      children: [/*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, {
-        themeId: scopedTheme ? themeId : undefined,
-        theme: memoTheme,
-        children: children
-      }), shouldGenerateStyleSheet && /*#__PURE__*/jsxRuntimeExports.jsx(GlobalStyles$1, {
-        styles: memoTheme.generateStyleSheets?.() || []
-      })]
-    });
-    if (nested) {
-      return element;
-    }
-    return /*#__PURE__*/jsxRuntimeExports.jsx(ColorSchemeContext.Provider, {
-      value: contextValue,
-      children: element
-    });
-  }
-  process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
-    /**
-     * The component tree.
-     */
-    children: PropTypes.node,
-    /**
-     * The node used to attach the color-scheme attribute
-     */
-    colorSchemeNode: PropTypes.any,
-    /**
-     * localStorage key used to store `colorScheme`
-     */
-    colorSchemeStorageKey: PropTypes.string,
-    /**
-     * The default mode when the storage is empty,
-     * require the theme to have `colorSchemes` with light and dark.
-     */
-    defaultMode: PropTypes.string,
-    /**
-     * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
-     */
-    disableNestedContext: PropTypes.bool,
-    /**
-     * If `true`, the style sheet won't be generated.
-     *
-     * This is useful for controlling nested CssVarsProvider behavior.
-     */
-    disableStyleSheetGeneration: PropTypes.bool,
-    /**
-     * Disable CSS transitions when switching between modes or color schemes.
-     */
-    disableTransitionOnChange: PropTypes.bool,
-    /**
-     * The document to attach the attribute to.
-     */
-    documentNode: PropTypes.any,
-    /**
-     * If `true`, theme values are recalculated when the mode changes.
-     */
-    forceThemeRerender: PropTypes.bool,
-    /**
-     * The key in the local storage used to store current color scheme.
-     */
-    modeStorageKey: PropTypes.string,
-    /**
-     * If `true`, the mode will be the same value as the storage without an extra rerendering after the hydration.
-     * You should use this option in conjunction with `InitColorSchemeScript` component.
-     */
-    noSsr: PropTypes.bool,
-    /**
-     * The storage manager to be used for storing the mode and color scheme
-     * @default using `window.localStorage`
-     */
-    storageManager: PropTypes.func,
-    /**
-     * The window that attaches the 'storage' event listener.
-     * @default window
-     */
-    storageWindow: PropTypes.any,
-    /**
-     * The calculated theme object that will be passed through context.
-     */
-    theme: PropTypes.object
-  } : void 0;
-  const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
-  const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
-  const getInitColorSchemeScript = params => InitColorSchemeScript({
-    colorSchemeStorageKey: defaultColorSchemeStorageKey,
-    defaultLightColorScheme,
-    defaultDarkColorScheme,
-    modeStorageKey: defaultModeStorageKey,
-    ...params
-  });
-  return {
-    CssVarsProvider,
-    useColorScheme,
-    getInitColorSchemeScript
-  };
-}
-
-function ThemeProviderNoVars({
-  theme: themeInput,
-  ...props
-}) {
-  const scopedTheme = THEME_ID in themeInput ? themeInput[THEME_ID] : undefined;
-  return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, {
-    ...props,
+const _excluded = ["theme"];
+function ThemeProvider(_ref) {
+  let {
+      theme: themeInput
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const scopedTheme = themeInput[THEME_ID];
+  return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, _extends({}, props, {
     themeId: scopedTheme ? THEME_ID : undefined,
     theme: scopedTheme || themeInput
-  });
+  }));
 }
-
-const defaultConfig = {
-  attribute: 'data-mui-color-scheme',
-  colorSchemeStorageKey: 'mui-color-scheme',
-  defaultLightColorScheme: 'light',
-  defaultDarkColorScheme: 'dark',
-  modeStorageKey: 'mui-mode'
-};
-process.env.NODE_ENV !== "production" ? {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * DOM attribute for applying a color scheme.
-   * @default 'data-mui-color-scheme'
-   * @example '.mode-%s' // for class based color scheme
-   * @example '[data-mode-%s]' // for data-attribute without '='
-   */
-  attribute: PropTypes.string,
+process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
   /**
-   * The node (provided as string) used to attach the color-scheme attribute.
-   * @default 'document.documentElement'
-   */
-  colorSchemeNode: PropTypes.string,
-  /**
-   * localStorage key used to store `colorScheme`.
-   * @default 'mui-color-scheme'
-   */
-  colorSchemeStorageKey: PropTypes.string,
-  /**
-   * The default color scheme to be used in dark mode.
-   * @default 'dark'
-   */
-  defaultDarkColorScheme: PropTypes.string,
-  /**
-   * The default color scheme to be used in light mode.
-   * @default 'light'
-   */
-  defaultLightColorScheme: PropTypes.string,
-  /**
-   * The default mode when the storage is empty (user's first visit).
-   * @default 'system'
-   */
-  defaultMode: PropTypes.oneOf(['dark', 'light', 'system']),
-  /**
-   * localStorage key used to store `mode`.
-   * @default 'mui-mode'
+   * Your component tree.
    */
-  modeStorageKey: PropTypes.string,
+  children: PropTypes.node,
   /**
-   * Nonce string to pass to the inline script for CSP headers.
+   * A theme object. You can provide a function to extend the outer theme.
    */
-  nonce: PropTypes.string
+  theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
 } : void 0;
 
-const {
-  CssVarsProvider: InternalCssVarsProvider,
-  useColorScheme,
-  getInitColorSchemeScript: deprecatedGetInitColorSchemeScript
-} = createCssVarsProvider({
-  themeId: THEME_ID,
-  // @ts-ignore ignore module augmentation tests
-  theme: () => createTheme({
-    cssVariables: true
-  }),
-  colorSchemeStorageKey: defaultConfig.colorSchemeStorageKey,
-  modeStorageKey: defaultConfig.modeStorageKey,
-  defaultColorScheme: {
-    light: defaultConfig.defaultLightColorScheme,
-    dark: defaultConfig.defaultDarkColorScheme
-  },
-  resolveTheme: theme => {
-    const newTheme = {
-      ...theme,
-      typography: createTypography(theme.palette, theme.typography)
-    };
-    newTheme.unstable_sx = function sx(props) {
-      return styleFunctionSx({
-        sx: props,
-        theme: this
-      });
-    };
-    return newTheme;
-  }
-});
-
-/**
- * TODO: remove this export in v7
- * @deprecated
- * The `CssVarsProvider` component has been deprecated and ported into `ThemeProvider`.
- *
- * You should use `ThemeProvider` and `createTheme()` instead:
- *
- * ```diff
- * - import { CssVarsProvider, extendTheme } from '@mui/material/styles';
- * + import { ThemeProvider, createTheme } from '@mui/material/styles';
- *
- * - const theme = extendTheme();
- * + const theme = createTheme({
- * +   cssVariables: true,
- * +   colorSchemes: { light: true, dark: true },
- * + });
- *
- * - <CssVarsProvider theme={theme}>
- * + <ThemeProvider theme={theme}>
- * ```
- *
- * To see the full documentation, check out https://mui.com/material-ui/customization/css-theme-variables/usage/.
- */
-const CssVarsProvider = InternalCssVarsProvider;
-
-function ThemeProvider({
-  theme,
-  ...props
-}) {
-  const noVarsTheme = React.useMemo(() => {
-    if (typeof theme === 'function') {
-      return theme;
-    }
-    const muiTheme = THEME_ID in theme ? theme[THEME_ID] : theme;
-    if (!('colorSchemes' in muiTheme)) {
-      if (!('vars' in muiTheme)) {
-        // For non-CSS variables themes, set `vars` to null to prevent theme inheritance from the upper theme.
-        // The example use case is the docs demo that uses ThemeProvider to customize the theme while the upper theme is using CSS variables.
-        return {
-          ...theme,
-          vars: null
-        };
-      }
-      return theme;
-    }
-    return null;
-  }, [theme]);
-  if (noVarsTheme) {
-    return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProviderNoVars, {
-      theme: noVarsTheme,
-      ...props
-    });
-  }
-  return /*#__PURE__*/jsxRuntimeExports.jsx(CssVarsProvider, {
-    theme: theme,
-    ...props
-  });
-}
-
-/**
- * @ignore - do not document.
- */
-
 // Store the license information in a global, so it can be shared
 // when module duplication occurs. The duplication of the modules can happen
 // if using multiple version of MUI X at the same time of the bundler
 // decide to duplicate to improve the size of the chunks.
 // eslint-disable-next-line no-underscore-dangle
-globalThis.__MUI_LICENSE_INFO__ = globalThis.__MUI_LICENSE_INFO__ || {
+ponyfillGlobal.__MUI_LICENSE_INFO__ = ponyfillGlobal.__MUI_LICENSE_INFO__ || {
   key: undefined
 };
 class LicenseInfo {
   static getLicenseInfo() {
     // eslint-disable-next-line no-underscore-dangle
-    return globalThis.__MUI_LICENSE_INFO__;
+    return ponyfillGlobal.__MUI_LICENSE_INFO__;
   }
   static getLicenseKey() {
     return LicenseInfo.getLicenseInfo().key;
@@ -1186,11 +316,11 @@ const useControlledDatagridState = _ref => {
   useEffect(() => {
     setPinnedColumns(propsPinnedColumns);
   }, [propsPinnedColumns]);
-  const onPinnedColumnsChange = (pinnedColumns, details) => {
+  const onPinnedColumnsChange = (model, details) => {
     if (propsOnPinnedColumnsChange) {
-      propsOnPinnedColumnsChange(pinnedColumns, details);
+      propsOnPinnedColumnsChange(model, details);
     } else {
-      setPinnedColumns(pinnedColumns);
+      setPinnedColumns(model);
     }
   };
   const [sortModel, setSortModel] = useState(propsSortModel);